/* site.css — chrome + the components DESIGN-SYSTEM.md §3 calls signature moves.
   Loaded after tokens.css on every page. Per-type sheets load after this. */

/* ============================================================ header (chrome, lifted) */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
       backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:50px;width:auto}
.brand b{font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:.02em;
         color:var(--teal-ink);white-space:nowrap}
.brand small{display:block;font-size:.76rem;font-weight:600;letter-spacing:.14em;
             color:var(--teal-deep);text-transform:uppercase}
nav.links{margin-left:auto;display:flex;gap:26px}
nav.links a{text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink-soft)}
nav.links a:hover{color:var(--teal-deep)}
/* the affordance is the underline alone -- changing the colour too made every page with an
   active nav item differ from the homepage under chrome parity. */
nav.links a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--lime)}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--teal-deep);color:#fff;
     text-decoration:none;white-space:nowrap;font-weight:700;font-size:.95rem;padding:12px 22px;
     border-radius:999px;border:none;cursor:pointer;transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--teal-ink);transform:translateY(-1px)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn.ghost{background:transparent;color:var(--teal-ink);border:2px solid var(--teal-ink);padding:10px 20px}
.btn.ghost:hover{background:var(--teal-ink);color:#fff}

/* --- mobile menu (delta 3). <details> = no JavaScript dependency. --- */
.mob{display:none;margin-left:auto;position:relative}
.mob summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;
             align-content:center;gap:5px;padding:0 9px;border:1px solid var(--line);border-radius:10px}
.mob summary::-webkit-details-marker{display:none}
.mob summary span{display:block;height:2px;background:var(--teal-ink);border-radius:2px}
.mob[open] summary{background:var(--mist)}
/* A closed <details> keeps an absolutely-positioned child measurable in Chrome, so the
   panel's links had real boxes and render_gate read the header nav as covered at 390px.
   Hiding it explicitly gives it zero client rects, which is what it should have had. */
.mob:not([open]) .mob-panel{display:none}
.mob-panel{position:absolute;right:0;top:52px;width:min(78vw,300px);background:#fff;
           border:1px solid var(--line);border-radius:var(--radius);padding:10px;
           box-shadow:0 18px 44px rgba(11,61,56,.16);display:grid}
.mob-panel a{padding:11px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;
             border-radius:8px}
.mob-panel a:hover{background:var(--mist);color:var(--teal-deep)}
.mob-panel a:nth-child(4){border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:14px}
@media(max-width:860px){
  nav.links{display:none}
  .mob{display:block}
  .nav{gap:10px}
  .brand{gap:8px}
  .brand img{height:40px}
  .btn{padding:11px 16px;font-size:.9rem}
  .brand small{display:none}
}
/* Only body CTAs may wrap. .btn is white-space:nowrap so a long label pushed the page
   sideways at 360px; letting the HEADER button wrap instead breaks chrome parity. */
@media(max-width:560px){ .btn.ghost{white-space:normal;text-align:center;max-width:100%} }
@media(max-width:400px){ .btn span.lbl{display:none} }

/* ================================================================ signature: wipe edge */
.wipe-edge{height:64px;background:var(--mist);clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.wipe-edge.up{background:var(--paper);clip-path:polygon(0 0,100% 0,100% 100%,0 0)}
@media(max-width:860px){.wipe-edge{height:38px}}

/* ==================================================================== hero + the swipe */
.hero{position:relative;overflow:hidden;padding:0}
.hero .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;
            padding-top:72px;padding-bottom:88px}
.hero.hero-solo .wrap{display:block;padding-top:64px;padding-bottom:56px;max-width:900px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
         color:var(--teal-deep);margin-bottom:18px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.06;
   letter-spacing:-.015em;color:var(--teal-ink)}
.swipe{position:relative;display:inline-block;white-space:nowrap}
.swipe::before{content:"";position:absolute;left:-.08em;right:-.12em;top:.14em;bottom:.05em;
  background:var(--lime);z-index:-1;transform:skewX(-8deg) rotate(-1.2deg);border-radius:.12em}
.hero p.lead{margin-top:18px;color:var(--ink-soft);max-width:34em;font-size:1.05rem}
.hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:.86rem;color:var(--ink-soft);margin-top:16px}
.hero-photo{position:relative}
.hero-photo .frame{position:relative;border-radius:var(--radius);overflow:hidden;
  clip-path:polygon(0 0,100% 6%,100% 100%,0 94%)}
.hero-photo img{width:100%;height:520px;object-fit:cover}
.hero-photo .tag{position:absolute;left:18px;bottom:40px;background:rgba(255,255,255,.94);
  border-radius:10px;padding:10px 16px;font-size:.82rem;font-weight:600;color:var(--teal-ink);
  box-shadow:0 8px 24px rgba(11,61,56,.18)}
.hero-photo .tag span{color:var(--teal-deep);display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:52px}
  .hero-photo img{height:360px}
}

/* ============================================================== the answer-first block */
.answer{border-left:6px solid var(--lime);background:var(--mist);border-radius:0 var(--radius) var(--radius) 0;
        padding:26px 30px;margin:0 0 34px;max-width:var(--measure-read)}
.answer p{font-size:1.12rem;line-height:1.66;color:var(--ink)}

/* ================================================================== sections + rhythm */
.band{padding:var(--section) 0}
.band.mist{background:var(--mist)}
.band.invert{background:var(--teal-ink);color:#fff}
.band.invert h2,.band.invert h3{color:#fff}
.band.invert p{color:rgba(255,255,255,.80)}
.band.invert .kicker{color:var(--lime)}
.band.invert a{color:var(--lime)}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
        color:var(--teal-deep);margin-bottom:14px}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.14;
   letter-spacing:-.01em;color:var(--teal-ink);max-width:18em}
h3{font-family:var(--disp);font-weight:700;font-size:1.18rem;color:var(--teal-ink)}
.secnum{font-size:.62em;color:var(--teal-deep);margin-right:.6em;font-variant-numeric:tabular-nums}
.sub{margin-top:14px;color:var(--ink-soft);max-width:var(--measure)}
.prose p{margin-top:16px;max-width:var(--measure-read)}
.prose h2{margin-top:44px}
.prose h3{margin-top:28px}
.prose ul,.prose ol{margin-top:14px;padding-left:1.15em;max-width:var(--measure-read)}
.prose li{margin-top:8px}
.small{font-size:.84rem;color:var(--ink-soft)}

/* ==================================================================== signature: tick */
.ticks{list-style:none;margin-top:18px;max-width:var(--measure-read)}
.ticks li{font-size:.98rem;color:var(--ink-soft);padding:11px 0 11px 30px;position:relative;
          border-top:1px dashed var(--line)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";position:absolute;left:3px;top:18px;width:13px;height:9px;
  border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(-48deg)}

/* ============================================================ before/after split pairs */
.pairs{margin-top:34px;display:grid;gap:28px}
.pairs.two{grid-template-columns:repeat(2,1fr)}
/* One composite, centred, as the lead exhibit. Capped at 660px because these are
   square: full container width would make it 1110px tall. */
.pairs.one{grid-template-columns:minmax(0,660px);justify-content:center}
.pair{border-radius:var(--radius);overflow:hidden;position:relative;background:#fff;border:1px solid var(--line)}
.pair .frames{display:grid;grid-template-columns:1fr 1fr}
.pair .frames.one{grid-template-columns:1fr}
.pair .frames img{height:250px;width:100%;object-fit:cover}
/* A client-labelled composite is published WHOLE. object-fit:cover at a fixed height would
   crop straight through Chloey's BEFORE/AFTER lettering and the watermark -- the exact defect
   that made the sliced half-crops look broken. Square box, contain, never cropped. The two
   side-by-side composites are both 1:1 so they align; a wider one letterboxes onto the card's
   own white, which is invisible. */
.pair .frames.one img.whole{height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
/* A solo photograph sits in the SAME row as a composite (glass, commercial), and at the
   inherited 250px it was less than half the composite's height -- so its caption floated in
   the middle of a stretched card with dead space under it. Same square box, cropped rather
   than letterboxed, because a solo has no lettering that a crop could damage. */
.pair .frames.one img:not(.whole){height:auto;aspect-ratio:1/1;object-fit:cover}
.pair figcaption{padding:14px 18px;font-size:.9rem;color:var(--ink-soft)}
.pair figcaption b{color:var(--teal-ink)}
.mini{position:absolute;top:12px;font-size:.76rem;font-weight:700;letter-spacing:.12em;
      padding:4px 9px;border-radius:4px;text-transform:uppercase}
.mini.b{left:12px;background:rgba(23,51,47,.86);color:#fff}
.mini.a{left:calc(50% + 12px);background:var(--lime);color:var(--teal-ink)}
@media(max-width:860px){.pairs.two{grid-template-columns:1fr}.pair .frames img{height:190px}}

/* ========================================================================== key boxes */
.keybox{background:var(--lime-soft);border-radius:var(--radius);padding:24px 28px;margin-top:26px;
        max-width:var(--measure-read)}
.keybox .kbhead{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
           margin-bottom:8px;font-family:var(--body);font-weight:700}
.keybox p{color:var(--ink)}

/* ============================================================= gutter rail (Q4 answer) */
.railed{display:grid;grid-template-columns:1fr;gap:0}
.rail{display:none}
@media(min-width:1140px){
  .railed{grid-template-columns:230px 1fr;gap:56px;align-items:start}
  .rail{display:block;position:sticky;top:104px}
  .rail h2{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
           font-family:var(--body);font-weight:700;margin-bottom:12px}
  .rail ol{list-style:none;counter-reset:r}
  .rail li{counter-increment:r;border-top:1px solid var(--line)}
  .rail li:first-child{border-top:0}
  .rail a{display:block;padding:9px 0 9px 26px;position:relative;text-decoration:none;
          color:var(--ink-soft);font-size:.9rem;line-height:1.35}
  .rail a::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:9px;
                  font-size:.76rem;color:var(--teal-deep);font-variant-numeric:tabular-nums}
  .rail a:hover{color:var(--teal-deep)}
}

/* =============================================================================== CTA */
.cta{background:var(--mist);padding:var(--section) 0}
.cta .box{background:var(--teal);border-radius:calc(var(--radius) + 6px);padding:56px 52px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;position:relative;overflow:hidden}
.cta .box::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  border-radius:50%;background:rgba(214,224,31,.16)}
.cta .ctahead{color:#fff;max-width:16em;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.14;letter-spacing:-.01em}
.cta p{color:rgba(255,255,255,.86);margin-top:12px;max-width:36em}
.cta .small{color:rgba(255,255,255,.7);margin-top:10px}
.cta .box .btn{background:var(--lime);color:var(--teal-ink);justify-self:start;position:relative;z-index:1}
.cta .box .btn:hover{background:#c3cd15}
@media(max-width:860px){.cta .box{grid-template-columns:1fr;padding:36px 26px}}

/* ============================================================================ footer */
footer.site{background:var(--teal-ink);color:rgba(255,255,255,.74);padding:52px 0 26px;font-size:.88rem}
footer.site .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;align-items:start}
footer.site b{color:#fff;font-family:var(--disp);font-size:1rem}
footer.site .fhead{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
               font-family:var(--body);font-weight:700;margin-bottom:12px}
footer.site p{margin-top:10px;line-height:1.7}
footer.site ul{list-style:none}
footer.site li{margin-top:9px}
footer.site a{color:rgba(255,255,255,.82);text-decoration:none}
footer.site a:hover{color:var(--lime);text-decoration:underline}
footer.site .fcol .small{color:rgba(255,255,255,.55)}
.legal-line{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:18px}
.legal-line p{font-size:.8rem;color:rgba(255,255,255,.55)}
@media(max-width:860px){footer.site .wrap{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){footer.site .wrap{grid-template-columns:1fr}}