/* ============================================================
     SHANICE POWNALL, Infant Feeding Specialist  (light concept)
     Photos in /images are FREE Pexels stock used as PLACEHOLDERS.
     Replace copy, reviews & contact details marked <!-- EDIT -->.
     ============================================================ */

  :root{
    color-scheme: light;
    /* Warm rose-gold / cream / taupe palette drawn from the "Held by Shanice" logo.
       Token names are legacy (euc/honey) but the VALUES are the warm brand colours. */
    --paper:#FBF6EF;        /* warm cream ground */
    --cream:#F5EBDE;        /* deeper cream band */
    --sage-wash:#EDE2D4;    /* soft taupe wash */
    --surface:#FFFCF7;      /* warm-white cards */
    --ink:#3D2F28;          /* espresso-brown text */
    --ink-soft:#6F6058;     /* muted taupe-brown */
    --euc:#9C6047;          /* clay-rose: buttons, icons, accents (dark enough for cream text) */
    --euc-deep:#573A2E;     /* deep espresso-brown: footer, hovers */
    --euc-tint:#F2E6DB;     /* soft rose-cream tint */
    --honey:#C08A78;        /* rose-gold: decorative accent (straight from the logo) */
    --honey-deep:#A9705B;
    --line:rgba(61,47,40,.12);
    --line-soft:rgba(61,47,40,.06);
    --shadow:0 2px 6px rgba(61,47,40,.05), 0 24px 48px -24px rgba(61,47,40,.24);
    --shadow-sm:0 1px 2px rgba(61,47,40,.05), 0 10px 24px -14px rgba(61,47,40,.18);

    --serif:"Palatino Linotype","Iowan Old Style",Palatino,"Book Antiqua","Sitka Text",Georgia,serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    --maxw:1160px;
    --r-sm:10px; --r:18px; --r-lg:26px; --pill:999px;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:1.0625rem; line-height:1.7;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; line-height:1.1; text-wrap:balance; margin:0}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  img,svg{display:block; max-width:100%}

  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}
  .eyebrow{font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--euc); display:inline-flex; align-items:center; gap:.55em}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--honey); display:inline-block}

  .btn{display:inline-flex; align-items:center; gap:.55em; cursor:pointer; font-family:var(--sans); font-size:.98rem; font-weight:600; padding:.85em 1.4em; border-radius:var(--pill); border:1px solid transparent; transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease}
  .btn svg{width:16px;height:16px}
  .btn-primary{background:var(--euc); color:#FBFBF7; box-shadow:var(--shadow-sm)}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(120,74,54,.45)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--euc); color:var(--euc); transform:translateY(-2px)}

  .textlink{display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--euc); border-bottom:1px solid transparent; transition:gap .2s ease, border-color .2s ease}
  .textlink svg{width:15px;height:15px; transition:transform .2s ease}
  .textlink:hover{border-color:var(--honey)} .textlink:hover svg{transform:translateX(3px)}

  a:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2.5px solid var(--honey); outline-offset:3px; border-radius:6px}
  .skip{position:absolute; left:-999px; top:0; background:var(--euc); color:#fff; padding:.6em 1em; border-radius:0 0 var(--r-sm) 0; z-index:200}
  .skip:focus{left:0}

  .mark{width:1em;height:1em; color:var(--euc); flex:none}
  .mark .baby{fill:var(--honey)}

  /* ---------- NAV (centered logo, split links) ---------- */
  header.nav{position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--paper) 88%, transparent); backdrop-filter:blur(12px) saturate(1.3); transition:background .3s ease, box-shadow .3s ease}
  header.nav.scrolled{background:color-mix(in srgb,var(--paper) 94%, transparent); box-shadow:0 1px 0 var(--line-soft)}
  .nav-in{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; min-height:136px; padding-top:10px; padding-bottom:28px}
  .nav-logo{position:absolute; left:50%; top:10px; transform:translateX(-50%); display:flex}
  .nav-logo img{height:120px; width:auto; transition:height .3s ease}
  header.nav.scrolled .nav-in{min-height:100px; padding-bottom:18px}
  header.nav.scrolled .nav-logo img{height:86px}
  .nav-side{display:flex; align-items:center; gap:1.7rem; font-size:.94rem}
  .nav-side a{color:var(--ink-soft); font-weight:500; letter-spacing:.01em; white-space:nowrap; position:relative; transition:color .2s ease}
  .nav-side a:hover, .nav-side a.active{color:var(--euc)}
  .nav-side a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px; background:var(--honey); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
  .nav-side a:not(.btn):hover::after, .nav-side a.active::after{transform:scaleX(1)}
  .nav-side .btn-primary, .nav-side .btn-primary:hover{color:#FBFBF7}
  .btn-sm{padding:.6em 1.05em; font-size:.86rem}
  .nav-toggle, .nav-book-m{display:none}
  .nav-toggle{background:none; border:0; cursor:pointer; padding:8px; color:var(--ink)}
  .nav-toggle svg{width:26px;height:26px}
  .nav-menu{display:none}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding-top:clamp(24px,4vw,52px); padding-bottom:clamp(40px,7vw,84px); overflow:hidden}
  .hero-blob{position:absolute; z-index:0; width:min(680px,80vw); aspect-ratio:1; right:-12%; top:-14%; background:radial-gradient(closest-side, rgba(192,138,120,.26), rgba(192,138,120,.07) 60%, transparent 74%); pointer-events:none; filter:blur(4px)}
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,68px); align-items:center}
  .hero-copy{max-width:35rem}
  .hero h1{font-size:clamp(2.5rem,5.4vw,4.15rem); margin:1rem 0 0}
  .hero h1 em{font-style:italic; color:var(--euc)}
  .hero .sub{margin-top:1.35rem; font-size:1.12rem; color:var(--ink-soft); max-width:33rem}
  .hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem}
  .hero-note{margin-top:1.35rem; font-size:.85rem; color:var(--ink-soft); display:flex; align-items:center; gap:.6em; flex-wrap:wrap}
  .hero-note .dot{width:4px;height:4px;border-radius:50%;background:var(--honey);display:inline-block}

  .hero-media{position:relative}
  .hero-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/4.6; background:var(--euc-tint)}
  .hero-frame img{width:100%; height:100%; object-fit:cover}
  .hero-chip{position:absolute; left:-14px; bottom:22px; background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:.75rem 1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.7rem; max-width:16rem}
  .hero-chip .mark{font-size:30px}
  .hero-chip strong{display:block; font-size:.92rem; font-weight:600}
  .hero-chip span{display:block; font-size:.78rem; color:var(--ink-soft)}

  /* ---------- value strip ---------- */
  .valuestrip{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--cream)}
  .valuestrip .row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.2rem; padding-block:16px; justify-content:center}
  .valuestrip .row span{display:inline-flex; align-items:center; gap:.6em; text-transform:uppercase; font-weight:600; font-size:.72rem; letter-spacing:.13em; color:var(--ink-soft)}
  /* value-strip separator dots removed (no decorative dots) */

  /* ---------- sections ---------- */
  .band{padding-block:clamp(60px,8vw,112px)}
  .sec-head{max-width:42rem}
  .sec-head h2{font-size:clamp(2rem,3.8vw,3rem); margin-top:.9rem}
  .sec-head .lead{margin-top:1.05rem; color:var(--ink-soft); font-size:1.1rem}

  /* media frame util */
  .frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:var(--euc-tint)}
  .frame img{width:100%; height:100%; object-fit:cover; display:block}
  .frame .tag{position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.86); backdrop-filter:blur(4px); border-radius:var(--pill); padding:.4em .8em; font-size:.72rem; letter-spacing:.02em; color:var(--ink-soft); box-shadow:var(--shadow-sm)}

  /* ---------- ABOUT ---------- */
  .about{background:var(--surface)}
  .about-grid{display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(32px,6vw,76px); align-items:center}
  .about-media{aspect-ratio:4/3.4}
  .about h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
  .about .body{color:var(--ink-soft); font-size:1.08rem; margin-top:1.1rem}
  .about .body p+p{margin-top:1rem}
  .sig{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--euc); margin-top:1.3rem}
  .creds{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}
  .cred{display:inline-flex; align-items:center; gap:.6em; background:var(--paper); border:1px solid var(--line); border-radius:var(--pill); padding:.55em 1em; font-size:.86rem; box-shadow:var(--shadow-sm)}
  .cred svg{width:16px;height:16px;color:var(--euc)}

  /* ---------- SERVICES ---------- */
  .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:3rem}
  .svc{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:1.6rem 1.5rem 1.7rem; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .25s ease, border-color .25s ease}
  .svc:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line)}
  .svc .ic{width:44px;height:44px;border-radius:12px; background:var(--euc-tint); display:grid; place-items:center; color:var(--euc); margin-bottom:1.1rem}
  .svc .ic svg{width:23px;height:23px}
  .svc h3{font-size:1.22rem}
  .svc p{margin-top:.5rem; color:var(--ink-soft); font-size:.96rem}
  .svc-more{margin-top:1.8rem; font-size:.95rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.4em .9em; align-items:center}
  .svc-more b{color:var(--ink); font-weight:600} .svc-more .sep{color:var(--honey)}

  /* ---------- CARE band (light, warm: the "whatever the hour" beat) ---------- */
  .care{background:var(--cream); position:relative; overflow:hidden}
  .care::before{content:""; position:absolute; z-index:0; width:560px;height:560px; left:-8%; bottom:-30%; background:radial-gradient(closest-side, rgba(192,138,120,.18), transparent 70%); pointer-events:none}
  .care-grid{position:relative; z-index:1; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,6vw,76px); align-items:center}
  .care-media{aspect-ratio:5/5.4}
  .care h2{font-size:clamp(2rem,4vw,3rem); margin-top:.9rem}
  .care .body{color:var(--ink-soft); font-size:1.1rem; margin-top:1.15rem}
  .care .body p+p{margin-top:.9rem}
  .care-points{margin-top:1.6rem; display:flex; flex-direction:column; gap:.8rem}
  .care-point{display:flex; gap:.7rem; align-items:flex-start; font-size:1rem}
  .care-point svg{width:22px;height:22px;color:var(--euc);flex:none;margin-top:2px}

  /* ---------- APPROACH ---------- */
  .approach{background:var(--sage-wash)}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:3rem}
  .step{position:relative; padding-top:1.4rem; border-top:2px solid var(--euc)}
  .step .n{font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--euc); display:block; margin-bottom:.7rem; font-variant-numeric:tabular-nums}
  .step h3{font-size:1.24rem}
  .step p{margin-top:.5rem; color:var(--ink-soft); font-size:.96rem}

  /* ---------- VOICES (light testimonials) ---------- */
  .voices-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap}
  .voices{display:grid; grid-template-columns:0.82fr 1.18fr; gap:20px; margin-top:2.6rem; align-items:stretch}
  .voices .ph{position:relative; min-height:260px}
  .voices .ph .frame{position:absolute; inset:0; height:100%}
  .voices .quotes{display:flex; flex-direction:column; gap:20px}
  .q{margin:0; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:1.6rem 1.6rem 1.4rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
  .q .quote{font-family:var(--serif); color:var(--ink); line-height:1.5}
  .q .quote{font-size:1.15rem}
  .q .stars-row{color:var(--honey); font-size:.82rem; letter-spacing:.14em; margin-top:.9rem}
  .q .who{display:flex; align-items:center; gap:.7rem; margin-top:1.1rem}
  .q .av{width:34px;height:34px;border-radius:50%; background:var(--euc); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:600; font-family:var(--serif); flex:none}
  .q cite{font-style:normal; font-size:.85rem; color:var(--ink-soft)}
  .q .av{overflow:hidden}
  .q .av img{width:100%; height:100%; object-fit:cover; border-radius:50%}
  /* shown only when live Google reviews load */
  .gsource{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:1rem; font-size:.88rem; color:var(--ink-soft)}
  .gsource .grating{font-weight:600; color:var(--ink)}
  .gsource .gstars{color:var(--honey); letter-spacing:.1em}
  .gsource a{color:var(--euc); font-weight:600; text-decoration:underline; text-underline-offset:3px}

  /* ---------- FAQ ---------- */
  .faq{background:var(--surface)}
  .faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start}
  .faq-list{border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line)}
  summary{list-style:none; cursor:pointer; padding:1.15rem 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--ink)}
  summary::-webkit-details-marker{display:none}
  summary .pm{flex:none; width:26px;height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:transform .25s ease, background .25s ease, border-color .25s ease; color:var(--euc)}
  summary .pm svg{width:14px;height:14px}
  details[open] summary .pm{background:var(--euc); border-color:var(--euc); color:#fff; transform:rotate(45deg)}
  details .ans{padding:0 0 1.3rem; color:var(--ink-soft); max-width:54ch}
  details[open] summary{color:var(--euc)}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--sage-wash)}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start}
  .contact h2{font-size:clamp(2rem,4vw,3rem)}
  .contact .lead{margin-top:1.05rem; color:var(--ink-soft); font-size:1.1rem; max-width:34ch}
  .contact-media{aspect-ratio:16/10; margin-top:1.8rem}
  .detail-list{margin-top:1.8rem; display:flex; flex-direction:column; gap:1.05rem}
  .detail{display:flex; gap:.9rem; align-items:flex-start}
  .detail .di{width:40px;height:40px;border-radius:12px;background:var(--surface); border:1px solid var(--line); display:grid;place-items:center;color:var(--euc); flex:none; box-shadow:var(--shadow-sm)}
  .detail .di svg{width:19px;height:19px}
  .detail .dk{display:block; margin-bottom:3px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}
  .detail .dv{font-size:1.02rem}
  .detail a.dv:hover{color:var(--euc); text-decoration:underline; text-underline-offset:3px}

  form.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow)}
  .field{margin-bottom:1.1rem}
  .field label{display:block; font-size:.8rem; font-weight:600; letter-spacing:.03em; margin-bottom:.45rem; color:var(--ink)}
  .field input,.field textarea{width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:.8em .9em; transition:border-color .2s ease, box-shadow .2s ease}
  .field input::placeholder,.field textarea::placeholder{color:var(--ink-soft)}
  .field input:focus,.field textarea:focus{outline:none; border-color:var(--euc); box-shadow:0 0 0 3px color-mix(in srgb,var(--euc) 20%, transparent)}
  .field textarea{resize:vertical; min-height:110px}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
  form .btn-primary{width:100%; justify-content:center; margin-top:.4rem}
  .form-note{margin-top:.9rem; font-size:.8rem; color:var(--ink-soft); text-align:center}
  .form-ok{margin-top:1rem; font-size:.92rem; color:var(--euc); background:var(--euc-tint); border:1px solid var(--line); border-radius:var(--r-sm); padding:.8em 1em; display:none}
  .form-ok.show{display:block}

  /* ---------- FOOTER ---------- */
  footer.site{background:var(--euc-deep); color:#E9DBCE}
  footer.site a{color:#E9DBCE} footer.site a:hover{color:var(--honey)}
  .foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; padding-block:clamp(46px,7vw,70px)}
  .foot-brand{max-width:26rem}
  .foot-logo img{height:120px; width:auto}
  .foot-tag{margin-top:1.1rem; color:#C6B2A2; font-size:.96rem}
  .foot-cols{display:flex; gap:clamp(2rem,6vw,5rem); flex-wrap:wrap}
  .foot-col h4{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#B39C8B; margin:0 0 1rem; font-family:var(--sans); font-weight:600}
  .foot-col a{display:block; margin-bottom:.6rem; font-size:.95rem; color:#E0D2C4}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding-block:20px; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.78rem; color:#B39C8B}

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

  /* ===================== EFFECTS (motivated, reduced-motion-safe) ===================== */
  /* tactile press + hover micro-interactions */
  .btn:active{transform:translateY(1px) scale(.985)}
  .nav-links a{position:relative}
  .nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:var(--honey); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
  .nav-links a:hover::after{transform:scaleX(1)}

  /* service cards: a soft honey spotlight follows the cursor */
  .svc{position:relative; isolation:isolate}
  .svc::before{content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(192,138,120,.18), transparent 60%)}
  .svc:hover::before{opacity:1}
  .svc>*{position:relative; z-index:1}

  @media (prefers-reduced-motion:no-preference){
    /* hero entrance choreography (leads the eye through the hero on load) */
    .hero-copy>*{animation:heroRise .85s cubic-bezier(.2,.7,.2,1) both}
    .hero-copy .eyebrow{animation-delay:.05s}
    .hero-copy h1{animation-delay:.15s}
    .hero-copy .sub{animation-delay:.29s}
    .hero-copy .hero-actions{animation-delay:.43s}
    .hero-media{animation:heroRise 1s cubic-bezier(.2,.7,.2,1) both; animation-delay:.2s}
    .hero-chip{animation:chipPop .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:.75s}
    @keyframes heroRise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
    @keyframes chipPop{from{opacity:0; transform:translateY(12px) scale(.94)} to{opacity:1; transform:none}}

    /* ambient lamplight glow drifts behind the hero */
    .hero-blob{animation:blobDrift 14s ease-in-out infinite}
    @keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1); opacity:.8} 50%{transform:translate(-16px,12px) scale(1.07); opacity:1}}

    /* photos: gentle zoom + a light sheen on hover */
    .hero-frame img,.frame img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
    .hero-frame:hover img,.frame:hover img{transform:scale(1.05)}
    .hero-frame::after,.frame::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
      background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 62%);
      transform:translateX(-130%); transition:transform 1s cubic-bezier(.2,.7,.2,1)}
    .hero-frame:hover::after,.frame:hover::after{transform:translateX(130%)}
  }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:2.2rem}
    .hero-media{max-width:460px; margin-inline:auto; width:100%}
    .hero-copy{max-width:none}
    .about-grid{grid-template-columns:1fr; gap:2.2rem}
    .about-media{max-width:520px; aspect-ratio:4/3}
    .svc-grid{grid-template-columns:1fr 1fr}
    .care-grid{grid-template-columns:1fr; gap:2rem}
    .care-media{max-width:460px; order:-1; aspect-ratio:4/3.4}
    .steps{grid-template-columns:1fr 1fr; gap:26px}
    .voices{grid-template-columns:1fr; gap:22px}
    .voices .ph{min-height:0; aspect-ratio:16/10}
    .faq-grid{grid-template-columns:1fr; gap:1.5rem}
    .contact-grid{grid-template-columns:1fr}
    /* nav collapses to a centered logo + hamburger below (see 980px block) */
  }
  @media (max-width:560px){
    .svc-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .hero-actions .btn{flex:1 1 auto; justify-content:center}
    .nav-cta .btn-primary{display:none}
    .hero-chip{left:8px; right:8px; max-width:none}
  }

  /* ===================== ADDED: multi-page + brand features ===================== */

  /* --- nav collapses: centered logo + hamburger --- */
  @media (max-width:980px){
    .nav-side{display:none}
    .nav-toggle{display:inline-flex}
    .nav-book-m{display:inline-flex}
    .nav-in{align-items:center; padding-top:0; padding-bottom:0; min-height:84px}
    .nav-logo{top:50%; transform:translate(-50%,-50%)}
    .nav-logo img{height:66px}
    header.nav.scrolled .nav-logo img{height:56px}
    .nav-menu.open{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow); padding:.4rem clamp(20px,5vw,44px) 1.1rem; z-index:99}
    .nav-menu a{padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:1.05rem; color:var(--ink); font-weight:500}
    .nav-menu a:last-child{border-bottom:0}
    .nav-menu a.active{color:var(--euc)}
  }
  @media (max-width:420px){ .nav-book-m{display:none} }

  /* --- WhatsApp floating button (site-wide) --- */
  .wa-float{position:fixed; right:18px; bottom:18px; z-index:95; width:58px; height:58px; border-radius:50%; background:var(--honey); color:var(--ink); display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(61,47,40,.42); transition:transform .2s ease}
  .wa-float:hover{transform:scale(1.07)}
  .wa-float svg{width:30px; height:30px}
  .wa-float .lbl{position:absolute; right:66px; background:var(--ink); color:#fff; font-size:.8rem; font-weight:600; padding:.4em .7em; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease}
  .wa-float:hover .lbl{opacity:1}
  @media (max-width:560px){ .wa-float .lbl{display:none} }

  /* --- WhatsApp inline button --- */
  .btn-whatsapp{background:var(--honey); color:var(--ink)}
  .btn-whatsapp:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(192,138,120,.55)}

  /* --- interior page hero --- */
  .page-hero{position:relative; overflow:hidden; padding-top:clamp(34px,5vw,64px); padding-bottom:clamp(34px,5vw,60px); background:var(--cream)}
  .page-hero::before{content:""; position:absolute; z-index:0; width:640px;height:640px; right:-12%; top:-42%; background:radial-gradient(closest-side, rgba(192,138,120,.22), transparent 70%); pointer-events:none}
  .page-hero .wrap{position:relative; z-index:1}
  .page-hero h1{font-size:clamp(2.3rem,5vw,3.5rem); margin-top:.8rem; max-width:20ch}
  .page-hero .lead{margin-top:1.15rem; color:var(--ink-soft); font-size:1.15rem; max-width:56ch}
  .page-hero h1 em{font-style:italic; color:var(--euc)}

  /* --- prose (story, articles) --- */
  .prose{max-width:66ch}
  .prose p{margin-top:1.1rem; color:var(--ink-soft); font-size:1.08rem}
  .prose p:first-child{margin-top:0}
  .prose p:first-child::first-letter{}
  .prose h3{font-size:1.5rem; color:var(--ink); margin-top:2.2rem}
  .prose strong{color:var(--ink); font-weight:600}
  .prose .lead-in{font-size:1.2rem; color:var(--ink)}

  /* --- about page: sticky portrait + story --- */
  .about-page-grid{display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(32px,6vw,72px); align-items:start}
  .about-portrait{position:sticky; top:104px}
  .about-portrait .frame{aspect-ratio:4/5}
  .about-portrait .tag{position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.86); backdrop-filter:blur(4px); border-radius:var(--pill); padding:.4em .8em; font-size:.72rem; color:var(--ink-soft); box-shadow:var(--shadow-sm)}

  /* --- timeline (career progression) --- */
  .timeline{margin-top:1.5rem; display:flex; flex-direction:column}
  .tl-item{position:relative; padding:0 0 1.6rem 2rem; border-left:2px solid var(--euc-tint)}
  .tl-item:last-child{padding-bottom:0}
  .tl-item::before{content:""; position:absolute; left:-8px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--euc); box-shadow:0 0 0 4px var(--paper)}
  .tl-item h4{font-family:var(--serif); font-size:1.18rem; margin:0; color:var(--ink)}
  .tl-item .yr{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--honey-deep); font-weight:600}
  .tl-item p{margin-top:.35rem; color:var(--ink-soft); font-size:.98rem}

  .quals{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem}

  /* --- generic auto card grid --- */
  .cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:2.4rem}

  /* --- event / workshop cards --- */
  .events{margin-top:2.4rem; display:flex; flex-direction:column; gap:18px}
  .event{display:grid; grid-template-columns:auto 1fr; gap:1.3rem; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:1.5rem 1.6rem; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .25s ease}
  .event:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
  .event .date{text-align:center; background:var(--euc-tint); border-radius:14px; padding:.7rem .6rem; align-self:start; min-width:80px}
  .event .date .d{font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--euc); line-height:1; display:block}
  .event .date .m{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.25rem; display:block}
  .event h3{font-size:1.24rem}
  .event .meta{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.5rem; font-size:.85rem; color:var(--ink-soft)}
  .event .meta span{display:inline-flex; align-items:center; gap:.4em}
  .event .meta svg{width:15px;height:15px;color:var(--euc)}
  .event p{margin-top:.7rem; color:var(--ink-soft); font-size:.98rem}
  .event .ev-actions{margin-top:1rem; display:flex; gap:.7rem; flex-wrap:wrap}
  .empty-note{margin-top:1.8rem; padding:2rem; text-align:center; border:1px dashed var(--line); border-radius:var(--r); color:var(--ink-soft); background:var(--surface)}

  /* --- resource category cards --- */
  .res-cat{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:1.5rem 1.6rem; box-shadow:var(--shadow-sm)}
  .res-cat .ic{width:44px;height:44px;border-radius:12px;background:var(--euc-tint);display:grid;place-items:center;color:var(--euc);margin-bottom:1rem}
  .res-cat .ic svg{width:23px;height:23px}
  .res-cat h3{font-size:1.2rem}
  .res-cat ul{list-style:none; margin:.8rem 0 0; padding:0}
  .res-cat li{border-top:1px solid var(--line-soft)}
  .res-cat li:first-child{border-top:0}
  .res-cat li a{color:var(--ink); font-size:.98rem; display:flex; align-items:center; gap:.5em; padding:.55rem 0}
  .res-cat li a:hover{color:var(--euc)}
  .res-cat li a svg{width:15px;height:15px;color:var(--honey-deep);flex:none}

  /* --- article list (written work) --- */
  .articles{margin-top:2.4rem; display:flex; flex-direction:column}
  .article{display:flex; gap:1.5rem; padding:1.7rem 0; border-top:1px solid var(--line); align-items:baseline}
  .article:first-child{border-top:0; padding-top:0}
  .article .art-meta{flex:none; width:132px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--euc); font-weight:600; line-height:1.5}
  .article h3{font-size:1.3rem}
  .article p{margin-top:.5rem; color:var(--ink-soft); font-size:1rem; max-width:62ch}
  .article .art-link{margin-top:.7rem}

  /* --- booking embed (Acuity) --- */
  .booking-wrap{margin-top:2.4rem; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
  .booking-wrap iframe{width:100%; height:820px; border:0; display:block}
  .booking-placeholder{padding:clamp(2rem,5vw,3.5rem); text-align:center}
  .booking-placeholder .ic{width:58px;height:58px;border-radius:16px;background:var(--euc-tint);color:var(--euc);display:grid;place-items:center;margin:0 auto 1.2rem}
  .booking-placeholder .ic svg{width:28px;height:28px}
  .booking-placeholder h3{font-size:1.4rem}
  .booking-placeholder p{margin-top:.7rem; color:var(--ink-soft); max-width:46ch; margin-inline:auto}
  .booking-placeholder .ev-actions{margin-top:1.4rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}

  /* --- responsive for added components --- */
  @media (max-width:900px){
    .about-page-grid{grid-template-columns:1fr; gap:2.2rem}
    .about-portrait{position:static}
    .about-portrait .frame{max-width:420px; aspect-ratio:4/4.4}
    .article{flex-direction:column; gap:.4rem}
    .article .art-meta{width:auto}
  }
  @media (max-width:560px){
    .event{grid-template-columns:1fr}
    .event .date{justify-self:start; display:inline-flex; gap:.4em; align-items:baseline; min-width:0; padding:.5rem .8rem}
    .event .date .m{margin-top:0}
  }