/* Montana Yorkie — shared stylesheet. Edit here, not per page. */
/* Script face for the logo and taglines — matched to the brand board.
     Self-hosted from Janet's library (New Icon Script). */
  @font-face{
    font-family:'Adored Script';
    src:url('/fonts/AdoredScript.otf') format('opentype');
    font-weight:400;font-style:normal;font-display:swap;
  }

/* ─────────────────────────────────────────────────────────────
     Montana Yorkie — palette taken from the approved brand board.
       ivory + cream  70–80%   backgrounds, cards, negative space
       dusty blush    10–15%   buttons, accent sections, borders, hearts
       champagne       5%      hairlines, dividers, outlines — never blocks
       soft taupe      5–10%   secondary text, navigation, subtle borders
       steel blue      1–3%    a nod to the coat. Numerals only.
     ───────────────────────────────────────────────────────────── */
  :root{
    --ivory:#FAF7F2;
    --cream:#F6F1E6;
    --blush:#E9C8CF;
    --champagne:#EAD7B7;
    --taupe:#7F6E63;
    --steel:#8FA1B3;

    /* sampled off the logo artwork itself */
    /* 2026-10-04: deepened for contrast — the pale board values washed out on screen */
    --rose:#9A4F5B;      /* deep dusty rose — headings, wordmark, buttons */
    --gold:#9E7A3C;      /* antique gold — hairlines, script, accents */

    /* derived — the board has no dark value and body copy needs one */
    --ink:#2B2320;
    --muted:#5C4F48;
    --blush-soft:#FCF4F5;
    --hair:rgba(127,110,99,.38);
    --pad:clamp(24px,6vw,80px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--ivory);color:var(--ink);
    font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-weight:300;
    font-size:16.5px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;margin:0}
  a{color:inherit}
  img{max-width:100%;display:block}
  .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
  .center{text-align:center}
  .caps{font-size:10px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
    color:var(--taupe);font-weight:400;margin:0}
  /* the board's divider: hairline, heart, hairline */
  .divider{display:flex;align-items:center;justify-content:center;gap:13px;
    margin:18px 0;width:100%}
  .divider i{flex:0 1 62px;height:1px;background:var(--gold);display:block}
  .divider svg{width:15px;height:auto;color:var(--rose);flex:none}
  .divider.left{justify-content:flex-start}
  .divider.left i:last-of-type{display:none}
  h2{font-size:clamp(32px,5vw,48px);line-height:1.16}
  .body{color:var(--muted);max-width:64ch;font-size:16px}
  .center .body{margin-inline:auto}
  .lede{font-family:'Playfair Display',serif;font-size:clamp(20px,2.7vw,27px);
    line-height:1.55;max-width:34ch;color:var(--ink)}
  .center .lede{margin-inline:auto}
  section{padding:clamp(74px,10vw,128px) 0}
  .cream{background:var(--cream);border-block:1px solid var(--hair)}
  .blush-band{background:var(--blush-soft);border-block:1px solid rgba(233,200,207,.75)}

  /* ── her logo artwork ─────────────────────────────────── */
  .brandmark,.brandmark:hover,.brandmark:focus{display:block;line-height:0;
    text-decoration:none;border:0;box-shadow:none}
  .brandmark img{height:clamp(54px,6vw,70px);width:auto;display:block}
  .footer-mark img{height:62px}
  /* text wordmark (2026-10-04: replaces logo-nav.png — crown removed) */
  .wm{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1;
    font-size:clamp(17px,1.9vw,23px);letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);white-space:nowrap;display:inline-block}
  .wm b{font-weight:400;color:var(--rose)}
  .footer-mark .wm{font-size:21px}

  /* ── nav ───────────────────────────────────────────────── */
  header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.94);
    backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--hair)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:96px;gap:20px}
  .nav-right{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px)}
  /* NB: no blanket `.nav ul` or `.nav a` rules here. They also matched the
     submenu (turning the dropdown into a full-width flex row) and the logo
     link (giving it a hover underline). Menu styling lives on .menu below. */
  .nav .cta{border:1px solid var(--rose);color:var(--rose);padding:12px 22px;font-size:10px;
    letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:.25s;
    white-space:nowrap}
  .nav .cta:hover{background:var(--rose);border-color:var(--rose);color:var(--ivory)}
  @media(max-width:560px){
    .nav{height:76px}
    .brandmark img{height:46px}
    .wm{font-size:15px;letter-spacing:.16em}
    .nav .cta{padding:10px 14px;font-size:9px;letter-spacing:.16em}
  }

  /* ── hero: full-bleed photograph, content over a soft wash ─── */
  /* grid-template-columns:minmax(0,1fr) is load-bearing. Without it the single
     column is auto-sized to max-content, and the wide script tagline drags the
     whole hero past the viewport on narrow screens. */
  .hero{position:relative;height:min(82vh,760px);overflow:hidden;background:var(--cream)}
  /* 2026-10-04: the banner is the photograph alone, with the drifting hearts,
     blossoms and crowns over it. The writing card lives in .intro below. */
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
  .hero-wash{position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(to bottom,
      rgba(250,247,242,.16) 0%, rgba(250,247,242,0) 22%,
      rgba(246,241,230,0) 72%, rgba(246,241,230,.72) 100%)}
  @media(max-width:860px){.hero{height:auto;aspect-ratio:4/3;min-height:0}}
  /* ── drifting hearts, blossoms and crowns ────────────────
     Sits above the photograph and its wash, below .hero-inner, so the
     writing card always stays clear of it. */
  .petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .petal{
    position:absolute;top:0;left:var(--l);
    width:var(--s);height:var(--s);
    background-position:center;background-repeat:no-repeat;background-size:contain;
    opacity:0;will-change:transform,opacity;
  }
  .petal.h{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 28C8 21.5 2 16.8 2 11A7 7 0 0 1 14.6 6.6 6 6 0 0 1 16 8.6 6 6 0 0 1 17.4 6.6 7 7 0 0 1 30 11c0 5.8-6 10.5-14 17z' fill='%23E9C8CF'/%3E%3C/svg%3E")}
  .petal.f{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23F1D6DA'%3E%3Ccircle cx='16' cy='7' r='6'/%3E%3Ccircle cx='24.6' cy='13.2' r='6'/%3E%3Ccircle cx='21.3' cy='23.4' r='6'/%3E%3Ccircle cx='10.7' cy='23.4' r='6'/%3E%3Ccircle cx='7.4' cy='13.2' r='6'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='4.6' fill='%23EAD7B7'/%3E%3C/svg%3E")}
  .petal.c{background-image:url("/images/petal-crown.png")}
  @keyframes ay-fall{
    0%   {transform:translate3d(0,-14vh,0) rotate(0deg);opacity:0}
    10%  {opacity:calc(var(--o) * 1.35)}
    88%  {opacity:calc(var(--o) * 1.35)}
    100% {transform:translate3d(var(--dx),112vh,0) rotate(var(--rot));opacity:0}
  }
  @media (prefers-reduced-motion:no-preference){
    .petal{animation:ay-fall var(--d) linear var(--delay) infinite}
  }
  @media (prefers-reduced-motion:reduce){.petals{display:none}}

  .hero-card{
    background:rgba(250,247,242,.88);
    -webkit-backdrop-filter:blur(9px) saturate(115%);
    backdrop-filter:blur(9px) saturate(115%);
    border:1px solid rgba(214,179,124,.5);
    box-shadow:0 26px 64px rgba(90,78,69,.12);
    padding:clamp(38px,4.4vw,60px) clamp(28px,4vw,62px);
    max-width:min(560px,100%);width:100%;margin-inline:auto;
    text-align:center;display:flex;flex-direction:column;align-items:center;
  }
  .hero-logo-wrap{position:relative;display:inline-block;line-height:0}
  .hero-logo{width:clamp(232px,27vw,392px);height:auto;display:block}

  /* A gold gleam that travels across the mark, then rests. The shine layer is
     masked by the logo's own alpha so the light only touches the artwork,
     never the card behind it. */
  .hero-logo-wrap::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(104deg,
      rgba(255,255,255,0) 41%, rgba(255,255,255,.38) 47%,
      rgba(255,255,255,.72) 50%, rgba(255,255,255,.38) 53%,
      rgba(255,255,255,0) 59%);
    background-size:240% 100%;background-repeat:no-repeat;
    -webkit-mask-image:url('/images/logo-hero.png');mask-image:url('/images/logo-hero.png');
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    background-position:210% 0;
  }
  @keyframes ay-shine{
    0%   {background-position:210% 0}
    16%  {background-position:-70% 0}
    100% {background-position:-70% 0}
  }
  @keyframes ay-float{
    0%,100%{transform:translateY(0)}
    50%    {transform:translateY(-9px)}
  }
  @keyframes ay-rise{
    from{opacity:0;transform:translateY(16px)}
    to  {opacity:1;transform:none}
  }
  @media (prefers-reduced-motion:no-preference){
    .hero-logo-wrap{animation:ay-float 7.5s ease-in-out 1.2s infinite}
    .hero-logo-wrap::after{animation:ay-shine 8.5s ease-in-out 2s infinite}
    .hero-card{animation:ay-rise 1.1s cubic-bezier(.2,.7,.3,1) both}
  }
  /* text lockup — Montana / — Yorkie — / Yorkshire Terriers (crown removed) */
  .lockup{display:flex;flex-direction:column;align-items:center;gap:0}
  .lk-name{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1;
    font-size:clamp(42px,5.4vw,72px);letter-spacing:.14em;text-indent:.14em;
    text-transform:uppercase;color:var(--rose)}
  .lk-sub{display:flex;align-items:center;gap:14px;margin-top:18px;
    font-family:'Playfair Display',Georgia,serif;font-size:clamp(13px,1.5vw,19px);
    letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:var(--gold)}
  .lk-sub i{display:block;width:clamp(28px,4vw,54px);height:1px;background:var(--gold)}
  .lk-script{font-family:'Adored Script','Snell Roundhand',cursive;color:var(--gold);
    font-size:clamp(28px,3.6vw,46px);line-height:1.1;margin-top:10px}
  .hero-card .tagline{
    font-family:'Adored Script','Snell Roundhand',cursive;color:var(--rose);
    font-size:clamp(25px,3.4vw,42px);line-height:1.06;margin:22px 0 0;text-align:center;
  }
  .hero-card .hero-line{
    font-family:'Playfair Display',serif;font-style:italic;color:var(--ink);
    font-size:clamp(15px,1.6vw,18px);line-height:1.7;margin:18px 0 0;max-width:34ch;
    text-align:center;
  }
  .hero-card .place{margin-top:24px;color:var(--muted)}

  /* ── intro: lockup card beside the framed puppy photos ─────────── */
  .intro{background:linear-gradient(135deg,var(--ivory),var(--cream));
    padding:clamp(64px,8vw,108px) 0;border-bottom:1px solid var(--hair)}
  .intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(40px,6vw,96px);align-items:center}
  @media(max-width:860px){.intro-grid{grid-template-columns:minmax(0,1fr);gap:64px}}
  .polaroid-stack{position:relative;margin:0;width:100%;max-width:440px;justify-self:center;
    padding:18px clamp(40px,8%,72px) clamp(64px,9vw,92px) 0}
  .polaroid{position:relative;background:#fff;padding:14px 14px 16px;
    border:1px solid rgba(214,179,124,.35);box-shadow:0 24px 54px rgba(90,78,69,.18);
    transform:rotate(-2.4deg)}
  .polaroid img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;display:block}
  .polaroid figcaption{margin-top:14px;text-align:left;padding-left:4px;color:var(--gold);max-width:58%}
  .tape{position:absolute;top:-15px;left:50%;width:46%;height:30px;z-index:1;
    transform:translateX(-50%) rotate(-1.5deg);background:rgba(234,215,183,.78);
    box-shadow:0 2px 6px rgba(0,0,0,.08)}
  .polaroid.mini{position:absolute;right:0;bottom:0;width:38%;padding:9px 9px 11px;
    transform:rotate(4deg);z-index:2}
  .polaroid.mini img{aspect-ratio:1;object-position:center 20%}
  .reveal.polaroid-stack{transition-delay:.12s}

  /* ── columns ───────────────────────────────────────────── */
  .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.6vw,36px)}
  @media(max-width:1080px){.cols{grid-template-columns:repeat(3,1fr);gap:40px}}
  @media(max-width:820px){.cols{grid-template-columns:repeat(2,1fr);gap:38px}}
  @media(max-width:560px){.cols{grid-template-columns:1fr}}
  .col h3{font-size:21px;margin-bottom:6px}
  .col .ic{width:clamp(46px,4vw,56px);height:auto;display:block;margin:0 0 16px;
    color:var(--gold)}
  .center .col .ic{margin-inline:auto}
  .col p{color:var(--muted);font-size:15px;margin:0}

  /* ── split ─────────────────────────────────────────────── */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,76px);align-items:center}
  @media(max-width:860px){.split{grid-template-columns:1fr}}
  .split-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--hair)}

  /* ── imagery ───────────────────────────────────────────── */
  .band-img{width:100%;height:clamp(280px,40vw,500px);overflow:hidden}
  .band-img img{width:100%;height:100%;object-fit:cover}
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,26px)}
  @media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
  .gallery figure{margin:0}
  .gallery img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--hair)}
  .gallery figcaption{margin-top:12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--taupe);text-align:center}
  .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,30px)}
  @media(max-width:760px){.trio{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}
  .trio figure{margin:0}
  .trio img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
    border:1px solid var(--hair)}

  /* ── dog cards ─────────────────────────────────────────── */
  .dogs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,42px)}
  @media(max-width:820px){.dogs{grid-template-columns:1fr}}
  .dog{background:var(--ivory);border:1px solid var(--hair);padding:clamp(26px,3vw,38px)}
  .dog h3{font-size:27px;margin-bottom:2px}
  .dog .role{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
    display:block;margin-bottom:14px}
  .dog p{color:var(--muted);font-size:15px;margin:0 0 14px}
  .dog .health{border-top:1px solid var(--hair);padding-top:12px;margin:0;
    font-size:12.5px;color:var(--muted)}
  .dog .health b{font-weight:500;color:var(--ink)}
  .dog .stud{margin-top:10px;font-size:12.5px;color:var(--ink);border-left:2px solid var(--blush);padding-left:12px}

  /* ── empty state / cards ───────────────────────────────── */
  .card{border:1px solid var(--gold);background:var(--ivory);
    padding:clamp(40px,6vw,70px) clamp(24px,5vw,54px);text-align:center}
  .ring{width:66px;height:66px;border:1px solid var(--gold);border-radius:50%;
    margin:0 auto 24px;display:flex;align-items:center;justify-content:center}
  .ring svg{width:26px;height:auto}

  /* ── promise ───────────────────────────────────────────── */
  .promise{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--hair)}
  @media(max-width:760px){.promise{grid-template-columns:1fr}}
  .promise div{padding:32px 30px 32px 0;border-bottom:1px solid var(--hair)}
  .promise div:nth-child(odd){padding-right:44px}
  @media(min-width:761px){.promise div:nth-child(even){padding-left:44px;
    border-left:1px solid var(--hair)}}
  .promise h3{font-size:22px;margin-bottom:6px}
  .promise p{color:var(--muted);font-size:14.5px;margin:0}

  /* ── buttons ───────────────────────────────────────────── */
  .btn{display:inline-block;margin-top:32px;background:var(--rose);border:1px solid var(--rose);
    color:var(--ivory);padding:16px 42px;text-decoration:none;font-size:10.5px;
    letter-spacing:.28em;text-transform:uppercase;transition:.3s}
  .btn:hover{background:transparent;border-color:var(--rose);color:var(--rose)}
  .btn-outline{background:transparent;border-color:var(--rose);color:var(--rose)}
  .btn-outline:hover{background:var(--rose);border-color:var(--rose);color:var(--ivory)}

  /* ── closing band ──────────────────────────────────────── */
  .band{background:var(--blush);text-align:center}
  .band .caps{color:var(--rose)}
  .band p{color:var(--ink);max-width:56ch;margin:20px auto 0}

  /* ── footer ────────────────────────────────────────────── */
  footer{background:var(--cream);color:var(--muted);border-top:1px solid var(--gold)}
  .fgrid{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;
    align-items:center;padding:48px 0}
  footer nav{display:flex;gap:24px;flex-wrap:wrap}
  footer nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    text-decoration:none;color:var(--muted)}
  footer nav a:hover{color:var(--rose)}
  .credit{border-top:1px solid var(--hair);padding:20px 0 32px;font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;text-align:center;color:var(--taupe)}
  .credit a{color:var(--taupe);text-decoration:none;border-bottom:1px solid var(--hair)}
  .credit a:hover{color:var(--rose);border-bottom-color:var(--rose)}

  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(18px);
      transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
    .reveal.in{opacity:1;transform:none}
  }

/* ══════════════════════════════════════════════════════════════════
   Multi-page shell: navigation, page heads, and per-page components
   ══════════════════════════════════════════════════════════════════ */

/* ── navigation with dropdowns ─────────────────────────────────── */
.menu{display:flex;gap:clamp(14px,1.8vw,26px);list-style:none;margin:0;padding:0;align-items:center}
.menu > li{position:relative}
.menu a,.subtoggle{
  font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-weight:300;transition:color .22s;
  border-bottom:1px solid transparent;
}
.menu a:hover,.subtoggle:hover{color:var(--rose)}
.menu a.on,.subtoggle.on{color:var(--ink);border-bottom-color:var(--gold)}
.chev{width:9px;height:auto;transition:transform .22s}
.has-sub.open .chev{transform:rotate(180deg)}
.sub{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:230px;background:var(--ivory);border:1px solid var(--hair);
  box-shadow:0 20px 44px rgba(90,78,69,.13);
  list-style:none;margin:0;padding:10px 0;z-index:60;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
}
.sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.sub li{display:block}
.sub a{display:block;padding:9px 20px;letter-spacing:.14em;border-bottom:0;white-space:nowrap}
.sub a:hover{background:var(--blush-soft);color:var(--rose)}
.has-sub.open > .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (hover:hover) and (pointer:fine){
  .has-sub:hover > .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}

/* hamburger */
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.navtoggle span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0;
  transition:transform .25s,opacity .25s}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .navtoggle span:nth-child(2){opacity:0}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1080px){
  .navtoggle{display:block}
  .nav-right{
    position:fixed;inset:auto 0 0 0;top:var(--navh,96px);
    background:var(--ivory);border-top:1px solid var(--hair);
    flex-direction:column;align-items:stretch;gap:0;
    padding:14px var(--pad) 34px;overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .24s,transform .24s,visibility .24s;
  }
  body.nav-open .nav-right{opacity:1;visibility:visible;transform:none}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu > li{border-bottom:1px solid var(--hair)}
  .menu a,.subtoggle{padding:15px 0;width:100%;justify-content:space-between;font-size:12px}
  .sub{
    position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    border:0;box-shadow:none;background:transparent;padding:0 0 10px 14px;
    display:none;
  }
  .has-sub.open > .sub{display:block;transform:none}
  .sub a{padding:11px 0;color:var(--taupe)}
  .nav .cta{margin-top:20px;text-align:center}
}

/* ── page heads ────────────────────────────────────────────────── */
.page-head{padding:clamp(58px,7vw,92px) 0 clamp(34px,4.5vw,52px)}
.page-title{font-size:clamp(38px,6vw,62px);line-height:1.1;margin:0}
.page-head .divider{margin-inline:auto}
.wrap.narrow{max-width:820px}

/* ── home teasers ──────────────────────────────────────────────── */
.teasers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,32px)}
@media(max-width:980px){.teasers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.teasers{grid-template-columns:1fr}}
.teaser{
  display:block;text-decoration:none;background:var(--ivory);border:1px solid var(--hair);
  padding:clamp(26px,3vw,36px);transition:border-color .25s,transform .25s,box-shadow .25s;
}
.teaser:hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(90,78,69,.09)}
.teaser .ic{width:44px;height:auto;color:var(--gold);margin-bottom:16px}
.teaser h3{font-size:22px;margin-bottom:8px}
.teaser p{color:var(--muted);font-size:14.5px;margin:0}
.teaser .more{display:inline-block;margin-top:16px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rose)}

/* ── puppy rows ────────────────────────────────────────────────── */
.intro-seo{padding-top:clamp(28px,4vw,44px)}
.puppy{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start;background:var(--ivory);
  border:1px solid var(--hair);padding:clamp(22px,2.6vw,34px);margin-bottom:clamp(26px,3.4vw,44px)}
@media(max-width:860px){.puppy{grid-template-columns:1fr}}
.puppy-photo{margin:0}
.puppy-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.puppy-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.puppy-thumbs button{padding:0;border:1px solid var(--hair);background:none;cursor:pointer;display:block}
.puppy-thumbs button.on{border-color:var(--rose)}
.puppy-thumbs img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 20%;display:block}
.puppy-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.puppy-head h2{font-size:clamp(30px,3.6vw,42px);margin:0}
.tag{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;
  border:1px solid var(--gold);color:var(--ink);white-space:nowrap}
.tag-available{background:var(--blush);border-color:var(--blush)}
.price{font-family:'Playfair Display',serif;font-size:26px;color:var(--rose);margin:10px 0 0}
.specs{display:flex;flex-wrap:wrap;gap:0 30px;margin:18px 0 20px;padding:14px 0;
  border-block:1px solid var(--hair)}
.specs div{display:flex;gap:8px;align-items:baseline}
.specs dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin:0}
.specs dd{margin:0;font-size:14.5px}
.puppy-body p{color:var(--muted);font-size:15.5px;margin:0 0 14px}
.includes{list-style:none;margin:12px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:6px 20px}
@media(max-width:520px){.includes{grid-template-columns:1fr}}
.includes li{position:relative;padding-left:18px;font-size:14.5px;color:var(--muted)}
.includes li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--blush);transform:rotate(45deg)}
.note{font-size:13px;color:var(--muted);font-style:italic}
.puppy-body .note{margin-top:18px}

/* ── health status table ───────────────────────────────────────── */
.status-table{border:1px solid var(--hair);background:var(--ivory)}
.status-table .row{display:grid;grid-template-columns:1.1fr 1fr 1.4fr .8fr;gap:12px;
  padding:15px clamp(16px,2.2vw,26px);border-bottom:1px solid var(--hair);font-size:14.5px}
.status-table .row:last-child{border-bottom:0}
.status-table .head{background:var(--cream);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe)}
@media(max-width:640px){
  .status-table .row{grid-template-columns:1fr 1fr}
  .status-table .head{display:none}
}

/* ── gallery ───────────────────────────────────────────────────── */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px)}
@media(max-width:860px){.masonry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.masonry{grid-template-columns:1fr}}
.tile{margin:0;overflow:hidden;border:1px solid var(--hair);background:var(--ivory)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tile.wide{grid-column:span 2;aspect-ratio:auto}
.tile.wide img{aspect-ratio:16/9}
@media(max-width:520px){.tile.wide{grid-column:span 1}}
.tile:hover img{transform:scale(1.035)}

/* ── forms ─────────────────────────────────────────────────────── */
.notice{border:1px solid var(--gold);background:var(--blush-soft);padding:16px 20px;
  font-size:14px;color:var(--ink);margin-bottom:26px;line-height:1.65}
.notice strong{font-weight:500;display:block;margin-bottom:2px}
.form{background:var(--ivory);border:1px solid var(--hair);padding:clamp(26px,3.4vw,46px)}
.form .fs{font-size:23px;margin:34px 0 16px}
.form .fs:first-of-type{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.f{margin:0 0 18px;grid-column:1/-1}
.f.half{grid-column:auto}
.f label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.f label em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--taupe)}
.f input,.f textarea{
  width:100%;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--hair);padding:12px 14px;border-radius:0;
  transition:border-color .2s,box-shadow .2s;
}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(233,200,207,.4)}
.f textarea{resize:vertical;line-height:1.7}
.hint{display:block;font-size:12.5px;color:var(--taupe);margin-top:6px;line-height:1.55}
.f.check label{text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--muted);
  display:flex;gap:11px;align-items:flex-start;line-height:1.65}
.f.check input{width:auto;margin-top:4px;flex:none}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}
.terms{margin:0 0 8px;padding-left:22px;color:var(--muted);font-size:15px}
.terms li{margin-bottom:13px;line-height:1.72}
.terms strong{color:var(--ink);font-weight:500}
.sig{border:1px solid var(--hair);padding:22px;margin:28px 0 24px}
.sig legend{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
  padding:0 8px}
.sigpad{height:132px;background:#fff;border:1px dashed var(--taupe);display:flex;
  align-items:center;justify-content:center;margin:6px 0 10px}
.sigpad span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.sigrow{display:flex;justify-content:flex-end;margin-bottom:14px}
.linkish{background:none;border:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--taupe);cursor:pointer}
.form .btn[disabled]{opacity:.5;cursor:not-allowed}
.form .btn[disabled]:hover{background:var(--blush);border-color:var(--blush)}

/* ── testimonial quotes (for when they arrive) ─────────────────── */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,34px)}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--ivory);border:1px solid var(--hair);padding:clamp(26px,3vw,40px);margin:0}
.q-mark{width:22px;height:auto;color:var(--blush);margin-bottom:14px}
.quote blockquote{margin:0;font-family:'Playfair Display',serif;font-size:19px;line-height:1.7;
  color:var(--ink)}
.attrib{margin:20px 0 0}
.attrib strong{display:block;font-weight:500;font-size:15px}
.attrib em{font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe)}

/* ── footer ────────────────────────────────────────────────────── */
.fcols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr;
  gap:clamp(28px,4vw,56px);padding:clamp(46px,5.5vw,72px) 0}
@media(max-width:940px){.fcols{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:560px){.fcols{grid-template-columns:1fr;gap:36px}}
.fcol h2.fh{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--taupe);font-weight:400;margin:0 0 18px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:11px}
.fcol a{font-size:14.5px;color:var(--muted);text-decoration:none;transition:color .22s}
.fcol a:hover{color:var(--rose)}
.fbrand .footer-mark{margin-bottom:16px}
.ftag{font-family:'Adored Script','Snell Roundhand',cursive;color:var(--rose);
  font-size:26px;line-height:1.1;margin:0 0 20px}
.faddr{font-size:14.5px;color:var(--muted);margin:0 0 14px;line-height:1.7}
.faddr span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.fbtn{display:inline-block;margin-top:6px;border:1px solid var(--gold);color:var(--ink);
  padding:11px 20px;text-decoration:none;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;transition:.25s}
.fbtn:hover{background:var(--blush);border-color:var(--blush)}
.socials{display:flex;gap:12px}
.soc{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  transition:background .25s,color .25s,border-color .25s,transform .25s}
.soc svg{width:17px;height:17px}
.soc:hover{background:var(--blush);border-color:var(--blush);color:var(--ink);
  transform:translateY(-2px)}
.soc[aria-disabled="true"]{cursor:default}

/* ── drifting layer for pages without a hero ───────────────────── */
section.has-petals{position:relative}
section.has-petals > .wrap{position:relative;z-index:1}
.page-petals{position:sticky;top:0;height:100vh;margin-bottom:-100vh;
  overflow:hidden;pointer-events:none;z-index:0}

/* ── form submission: working signature pad + status messages (forms.js) ── */
.sigpad{position:relative}
.sigpad span{pointer-events:none}
.sigpad.signed span{display:none}
.sigpad .sigcanvas{position:absolute;top:0;left:0;width:100%;height:100%;
  touch-action:none;cursor:crosshair;display:block}
.linkish:not([disabled]):hover{color:var(--rose)}
.form-msg{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--rose);
  border-left:2px solid var(--rose);padding-left:12px}
.form-msg[hidden]{display:none}
.form-thanks{text-align:center}
.form-thanks .fs{margin-top:0}