/* ============================================================
   CASSAVONA v2 — Section layouts & responsive reflow
   ============================================================ */
@layer sections {

  :where(section[id],div[id].section){scroll-margin-top:calc(var(--nav-h) + var(--space-3))}

  /* ---------- Mobile nav panel ---------- */
  .nav__menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);
    padding:var(--space-5) var(--gutter) var(--space-6);background:var(--c-paper);border-bottom:1px solid var(--line-on-paper);
    box-shadow:0 16px 32px rgba(33,30,26,.16);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
  .site-header[data-open="true"] .nav__menu{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__menu .nav__links{flex-direction:column;align-items:stretch;gap:var(--space-2)}
  .nav__menu .nav__link{padding-block:.7rem;font-size:.95rem}
  .nav__menu .nav__actions{flex-direction:column;align-items:stretch;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--line-on-paper)}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;color:var(--text-on-paper)}
  .nav__toggle:hover{background:rgba(33,30,26,.06)}
  .burger,.burger::before,.burger::after{display:block;width:22px;height:2px;background:currentColor}
  .burger{position:relative;transition:background-color var(--t)}
  .burger::before,.burger::after{content:"";position:absolute;left:0;transition:transform var(--t) var(--ease)}
  .burger::before{top:-7px}.burger::after{top:7px}
  .nav__toggle[aria-expanded="true"] .burger{background:transparent}
  .nav__toggle[aria-expanded="true"] .burger::before{transform:translateY(7px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] .burger::after{transform:translateY(-7px) rotate(-45deg)}
  @media (min-width:52rem){
    .nav__menu{position:static;flex-direction:row;align-items:center;gap:var(--space-5);padding:0;background:none;border:0;box-shadow:none;
      transform:none;opacity:1;visibility:visible;pointer-events:auto}
    .nav__menu .nav__links{flex-direction:row;gap:clamp(1rem,2.2vw,1.75rem)}
    .nav__menu .nav__link{padding-block:.4rem;font-size:var(--fs-mono)}
    .nav__menu .nav__actions{flex-direction:row;padding-top:0;border:0}
    .nav__toggle{display:none}
  }

  /* ---------- Hero ---------- */
  .hero{padding-block:var(--space-8) var(--space-7)}
  .hero .container{display:grid;gap:var(--space-7);align-items:center;grid-template-columns:1fr}
  .hero .container>*{min-width:0}
  @media (min-width:60rem){.hero .container{grid-template-columns:1.02fr 1.05fr;gap:var(--space-8)}}
  .hero h1{margin-top:var(--space-3);max-width:min(14ch,100%)}
  .hero__lead{margin:var(--space-4) 0 var(--space-5);max-width:min(42ch,100%)}
  .hero__ctas{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
  @media (max-width:30rem){.hero__ctas{flex-direction:column;align-items:stretch}.hero__ctas .btn{width:100%}.hero__ctas .link-draw{align-self:center}}
  .hero__frame{--ar:4/3}
  .hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
  html.js .hero__slide{transition:opacity var(--t-cross) var(--ease)}
  .hero__slide.is-active{opacity:1}
  .hero__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.3rem .9rem;margin-top:.6rem}
  .hero__meta .stamp:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* proof at the point of action */
  .hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;margin-top:var(--space-4);
    font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;color:var(--text-on-paper-soft)}
  .hero__proof .rated__stars{margin-right:0}
  @media (max-width:30rem){.hero__proof{justify-content:center;text-align:center}}

  /* ---------- Gallery ---------- */
  .gallery__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
  .gallery__head img.jackalope{width:clamp(72px,10vw,120px);opacity:.9;flex-shrink:0}
  .gallery__feature{display:grid;gap:var(--space-3);grid-template-columns:1fr}
  @media (min-width:48rem){.gallery__feature{grid-template-columns:2fr 1fr}}
  .gallery__stack{display:grid;gap:var(--space-3);grid-template-columns:1fr 1fr}
  @media (min-width:48rem){.gallery__stack{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}
  .gallery__row{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr);margin-top:var(--space-3)}
  @media (min-width:48rem){.gallery__row{grid-template-columns:repeat(4,1fr)}}
  .gallery__feature .keyline{--ar:16/11}

  /* ---------- Founder ---------- */
  .founder .container{display:grid;gap:var(--space-6);align-items:center;grid-template-columns:1fr}
  @media (min-width:54rem){.founder .container{grid-template-columns:.85fr 1.15fr;gap:var(--space-8)}}
  .founder__photo{position:relative;width:100%;max-width:24rem;margin-inline:auto;margin-bottom:var(--space-6)}
  @media (min-width:54rem){.founder__photo{margin-inline:0;margin-bottom:0}}
  .founder__portrait{--ar:4/5}
  .founder__body p+p{margin-top:var(--space-4)}
  /* taped childhood snapshot — "down-home roots" */
  .snapshot{position:absolute;right:-1.1rem;bottom:-1.6rem;width:44%;max-width:11rem;rotate:-4deg;
    background:#FBF7EE;padding:7px 7px 22px;box-shadow:0 12px 26px rgba(33,30,26,.30);border:1px solid rgba(33,30,26,.10);z-index:2}
  .snapshot__win{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;background:var(--hatch)}
  .snapshot__win img{width:100%;height:100%;object-fit:cover}
  .snapshot__date{position:absolute;right:10px;bottom:6px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.04em;color:#C2742E}
  .tape{position:absolute;top:-9px;width:52px;height:18px;background:rgba(201,154,63,.34);mix-blend-mode:multiply}
  .tape--l{left:10px;rotate:-9deg}
  .tape--r{right:10px;rotate:8deg}
  @media (max-width:54rem){.snapshot{right:-.35rem;bottom:-1.2rem;width:40%}}

  /* ---------- Mission ---------- */
  .mission{position:relative;overflow:hidden}
  .mission .container{max-width:54rem;text-align:center}
  .mission__mark{width:34px;margin:0 auto var(--space-4);color:var(--c-paper)}
  .mission__mark .star-ico{width:100%}
  .mission__statement{font-family:var(--ff-display);font-size:clamp(1.5rem,1.1rem + 1.9vw,2rem);line-height:1.35;max-width:26ch;margin:0 auto}
  .mission__statement b{color:var(--c-terracotta);font-weight:400}
  .mission__sign{font-family:var(--ff-italic);font-style:italic;font-size:clamp(1.6rem,1.2rem + 1.6vw,2rem);margin-top:var(--space-5)}
  .mission__cap{margin-top:.35rem}

  /* ---------- Woven divider ---------- */
  .weave-bar{height:7px;background:var(--weave);background-size:96px 100%;transform-origin:left}
  html.js .weave-bar[data-reveal]{transform:scaleX(0);opacity:1!important}
  html.js .weave-bar[data-reveal].is-in{transform:scaleX(1);transition:transform var(--t-slow) var(--ease-veil)}

  /* ---------- Membership ---------- */
  .membership__head{text-align:center;max-width:60ch;margin:0 auto var(--space-6)}
  @media (min-width:48rem){.tiers{grid-template-columns:repeat(3,1fr)}}
  @media (min-width:48rem){.brokerage{grid-template-columns:1fr 1.3fr auto;gap:var(--space-6)}.brokerage__feat{grid-template-columns:1fr 1fr}}

  /* ---------- Pricing: table + instant-estimate calculator ---------- */
  .price-duo{display:grid;gap:var(--space-6);grid-template-columns:1fr;align-items:start;margin-top:var(--space-7)}
  @media (min-width:64rem){.price-duo{grid-template-columns:1.05fr .95fr;gap:var(--space-7)}}

  /* hammock illustration (now lives at the end of Membership) */
  #membership{position:relative}
  .pricing__art{position:absolute;right:var(--gutter);bottom:var(--space-7);width:clamp(110px,14vw,190px);opacity:.85;pointer-events:none}
  @media (max-width:60rem){.pricing__art{display:none}}

  /* ---------- Before/after (inside Work) ---------- */
  .ba{margin-top:var(--space-9)}
  .ba__frame{--ar:3/2;max-width:56rem}

  /* ---------- Comparison ---------- */
  .compare{display:grid;gap:var(--space-4);grid-template-columns:1fr;max-width:54rem;margin:var(--space-7) auto 0}
  @media (min-width:44rem){.compare{grid-template-columns:1fr 1fr}}
  .compare__note{font-family:var(--ff-mono);font-size:var(--fs-caption);color:var(--text-on-paper-soft);line-height:1.7;
    text-align:center;max-width:70ch;margin:var(--space-5) auto 0}

  /* ---------- Testimonials ---------- */
  .quotes{display:grid;gap:var(--space-4);grid-template-columns:1fr}
  @media (min-width:48rem){.quotes{grid-template-columns:repeat(3,1fr)}}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:52rem;margin-inline:auto}

  /* ---------- CTA ---------- */
  .cta{text-align:center}
  .cta__mark{width:32px;margin:0 auto var(--space-4);color:var(--c-paper)}
  .cta h2{font-size:clamp(2.5rem,1.8rem + 3.4vw,3.5rem);line-height:1.02}
  .cta__sub{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;
    color:#F3DCCD;margin:var(--space-3) 0 var(--space-5)}

  /* ---------- Footer ---------- */
  .footer .container{display:grid;gap:var(--space-6);grid-template-columns:1fr}
  @media (min-width:48rem){.footer .container{grid-template-columns:1.4fr 1fr 1.1fr}}
  .footer__brand .nav__logo b{color:var(--c-paper)}
  .footer__brand .star-ico{color:var(--c-paper)}
  .footer__brand p{font-family:var(--ff-mono);font-size:var(--fs-caption);color:var(--text-on-ink-soft);line-height:1.7;margin-top:var(--space-4);max-width:34ch}
  .footer__col h2{font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-ink-soft);margin-bottom:var(--space-3);font-weight:400}
  .footer__list{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-family:var(--ff-mono);font-size:var(--fs-small)}
  .footer__list a{background:linear-gradient(var(--c-gold),var(--c-gold)) 0 100%/0% 1px no-repeat;transition:background-size var(--t) var(--ease)}
  .footer__list a:hover{background-size:100% 1px;color:var(--c-gold)}
  .footer__social{display:flex;gap:var(--space-4)}
  .footer__bottom{border-top:1px solid var(--line-on-ink);text-align:center;margin-top:var(--space-7);padding:var(--space-4) var(--gutter);
    font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.08em;color:var(--text-on-ink-soft)}
  .footer__bottom a{color:var(--text-on-ink-soft);border-bottom:1px solid var(--line-on-ink)}
  .footer__bottom a:hover{color:var(--c-gold)}

  /* ---------- Services grid ---------- */
  .services{display:grid;gap:var(--space-4);grid-template-columns:1fr;margin-top:var(--space-7)}
  @media (min-width:40rem){.services{grid-template-columns:1fr 1fr}}
  @media (min-width:64rem){.services{grid-template-columns:repeat(3,1fr)}}

  /* ---------- How it works ---------- */
  .steps{list-style:none;display:grid;gap:var(--space-6);grid-template-columns:1fr;margin-top:var(--space-7)}
  @media (min-width:48rem){.steps{grid-template-columns:repeat(3,1fr)}}

  /* ---------- Mission signature ---------- */
  .mission__signature{width:clamp(160px,28vw,230px);height:auto;margin:var(--space-5) auto 0;
    filter:brightness(0) invert(1);opacity:.92}

  /* ---------- Multi-page: compact page hero ---------- */
  .page-hero{padding-block:var(--space-8) var(--space-7)}
  .page-hero h1{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-h1);line-height:var(--lh-head);
    letter-spacing:-.01em;color:var(--text-on-paper);margin-top:var(--space-2);max-width:20ch}
  .page-hero .lead{margin-top:var(--space-4);max-width:var(--measure)}
  .page-hero__answer{margin-top:var(--space-4);max-width:var(--measure);color:var(--text-body)}

  /* ---------- Add-on menu (services page) ---------- */
  .addons{display:grid;gap:0;margin-top:var(--space-7);border-top:1px solid var(--line-soft)}
  .addon{display:grid;gap:var(--space-2) var(--space-6);padding:var(--space-5) 0;border-bottom:1px solid var(--line-soft)}
  @media (min-width:48rem){.addon{grid-template-columns:minmax(14rem,18rem) 1fr auto;align-items:baseline}}
  .addon__name{font-family:var(--ff-display);font-size:var(--fs-h3);line-height:1.15}
  .addon__desc{color:var(--text-body);max-width:52ch}
  .addon__price{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;
    color:var(--c-rust);white-space:nowrap}
  .addon--soon .addon__price{color:var(--text-on-paper-soft)}

  /* ---------- Credentials band (about) ---------- */
  .creds{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
  .creds .stamp{border:1px solid var(--line-on-paper);padding:.45em .8em}

  /* ---------- Ask an AI (AEO block) ---------- */
  .askai{margin-top:var(--space-8);border:1px solid var(--hair);padding:var(--card-pad);background:var(--c-paper)}
  .askai__row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
  .askai__link{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ff-mono);font-size:var(--fs-mono);
    letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--hair);padding:.6em 1em;color:var(--text-on-paper)}
  .askai__link:hover,.askai__link:focus-visible{background:var(--c-ink);color:var(--c-paper)}
  .askai__fine{margin-top:var(--space-3);font-size:var(--fs-small);color:var(--text-on-paper-soft)}

  /* ---------- Contact block (about) ---------- */
  .contact{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
  @media (min-width:48rem){.contact{grid-template-columns:1fr 1fr}}
  .contact__card{border:1px solid var(--hair);padding:var(--card-pad);background:var(--c-paper)}
  .contact__card h3{font-family:var(--ff-display);font-size:var(--fs-h3)}
  .contact__card p{margin-top:var(--space-3);color:var(--text-body)}
  .contact__card .btn{margin-top:var(--space-4)}

  /* ---------- Cross-page next step ---------- */
  .nextstep{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);
    margin-top:var(--space-8);border-top:1px solid var(--line-soft);padding-top:var(--space-6)}
  .nextstep p{font-family:var(--ff-italic);font-style:italic;font-size:var(--fs-lead);color:var(--text-on-paper)}

  /* ---------- Placeholder frames (assets in production) ---------- */
  .ph--frame{aspect-ratio:16/10;border:1px solid var(--hair);padding:var(--keyline-pad);background:var(--c-paper)}
  .ph--frame .ph{width:100%;height:100%;border:1px solid var(--line-on-paper)}
}