/* ============================================================
   pages.css - subpage components ONLY (work / services / about).
   Loaded after css/main.css on the three subpages; index.html
   never loads this file. Tokens, buttons, cards, plates, scene
   and nav/footer all come from main.css - nothing is forked.
   ============================================================ */

/* subpages sit under the always-visible fixed bar */
body.subpage{padding-top:var(--navh)}

/* ============ PAGE HERO BAND (shared by all three) ============ */
.page-hero{
  padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px);
  text-align:center;
}
.page-hero .micro{margin-bottom:22px}
.page-hero .page-title{font-size:clamp(40px,6.4vw,84px)}
.page-hero .sub{max-width:52ch;margin:26px auto 0;color:var(--muted)}
.page-hero .sub strong{font-weight:600;color:var(--ink)}

/* ============ CTA BAND (work + about close) ============ */
.cta-band{
  padding:var(--air) 0;text-align:center;
  background:radial-gradient(950px 640px at 50% -10%, rgba(224,138,60,.12), rgba(224,138,60,0) 62%);
}
.cta-band .micro{margin-bottom:20px}
.cta-band .display{font-size:clamp(34px,4.6vw,60px);max-width:18ch;margin-inline:auto}
.cta-band .btn{margin-top:clamp(30px,4vw,44px)}
.cta-band .note{margin-top:18px;color:var(--muted);font-size:15px}

/* ============================================================
   WORK - portfolio grid (js/projects.js renders into #projGrid)
   Card = the locked plate staging: AFTER dominant, BEFORE inset,
   pedestal glow, one umber drop-shadow, micro caption.
   ============================================================ */
.work-grid-sec{padding:12px 0 var(--air)}
.proj-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(40px,5vw,64px) 28px;align-items:start;
}
.proj-card{grid-column:span 6;text-decoration:none;display:block}
.proj-media{position:relative;padding:9% 0 0 12%}
.proj-after{position:relative}
.proj-after .plate{
  aspect-ratio:4/3;border:1px solid var(--line);
  background:var(--ivory-hi);box-shadow:var(--sh-plate);
}
/* pedestal glow - the porch light under every AFTER plate */
.proj-after::before{
  content:"";position:absolute;left:-3%;right:-3%;bottom:-13%;height:42%;z-index:-1;
  background:radial-gradient(52% 58% at 50% 26%, rgba(224,138,60,.26), rgba(224,138,60,0) 72%);
}
.proj-before{
  position:absolute;left:0;top:0;width:44%;z-index:2;
}
.proj-before .plate{
  aspect-ratio:4/3;border-radius:12px;border:1px solid #CFC5B0;
  box-shadow:var(--sh-soft);
}
.proj-before .plate::after{content:"";position:absolute;inset:0;background:rgba(13,10,6,.18)}
.proj-card .chip{
  background:rgba(23,19,13,.55);color:#EADFC9;
  top:10px;left:10px;padding:5px 10px;font-size:10px;
}
.proj-after .chip{
  top:auto;left:auto;right:14px;bottom:12px;
  background:rgba(30,23,13,.42);border:1px solid rgba(255,225,174,.38);color:#FFE3B0;
}
.proj-cap{
  margin-top:20px;color:var(--muted);display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;
}
.proj-cap::before{content:"";width:22px;height:1px;background:var(--amber);opacity:.85;flex:none}
.proj-card:hover .proj-after .plate{transform:translateY(-3px)}
.proj-after .plate,.proj-before .plate{transition:transform 240ms var(--ease-out)}
.proj-card:hover .proj-before .plate{transform:translateY(-1px)}
/* the featured break - 1.6x, off the template rhythm */
.proj-card.featured{grid-column:1/9;grid-row:span 2}
.proj-card.n2{grid-column:9/13;margin-top:clamp(48px,6vw,92px)}
.proj-card.n3{grid-column:9/13}
.proj-card.n4{grid-column:1/7}
.proj-card.n5{grid-column:7/13;margin-top:clamp(40px,5vw,72px)}
.proj-card.n6{grid-column:4/10}
.proj-card.n7{grid-column:1/7}
.proj-card.n8{grid-column:7/13;margin-top:clamp(40px,5vw,72px)}
.proj-tag{
  position:absolute;z-index:3;right:14px;top:14px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-family:Inter,"Inter Fallback",sans-serif;line-height:1.4;
  color:var(--amber);border:1px solid rgba(196,102,31,.38);
  background:var(--ivory-hi);padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.proj-noscript{color:var(--muted);max-width:52ch;padding:40px 0}

/* ============ WORK - dark showcase band with the compare slider ============ */
.showcase{
  background:
    radial-gradient(72% 52% at 50% 108%, rgba(196,102,31,.17), rgba(196,102,31,0) 70%),
    radial-gradient(60% 40% at 18% -6%, rgba(58,50,37,.5), rgba(58,50,37,0) 60%),
    var(--ink-2);
  color:var(--ivory-hi);
  padding:var(--air) 0;
}
.showcase .sec-head{margin-inline:auto;text-align:center}
.showcase .sec-title{color:var(--ivory-hi)}
.showcase .sec-sub{color:var(--muted-dark);margin-inline:auto}
.cmp-wrap{
  position:relative;margin-top:clamp(56px,7vw,92px);
  max-width:920px;margin-inline:auto;      /* the plate is 4:3 like every other */
}
/* pedestal glow under the whole comparison plate */
.cmp-wrap::before{
  content:"";position:absolute;left:2%;right:2%;bottom:-12%;height:38%;z-index:0;
  background:radial-gradient(52% 58% at 50% 26%, rgba(224,138,60,.3), rgba(224,138,60,0) 72%);
}
.cmp{
  --cx:55;
  position:relative;z-index:1;border-radius:18px;overflow:hidden;
  aspect-ratio:4/3;border:1px solid rgba(255,225,174,.28);
  box-shadow:var(--sh-plate);touch-action:pan-y;
}
.cmp-layer{position:absolute;inset:0}
/* AFTER rides on the LEFT of the seam - same clip mechanism as the intro wipe */
.cmp-layer.is-after{clip-path:inset(0 calc((100 - var(--cx))*1%) 0 0)}
.cmp-bar{
  position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;
  left:calc(var(--cx)*1%);width:3px;margin-left:-1.5px;
  background:var(--amber-hi);
  box-shadow:0 0 18px 2px rgba(224,138,60,.8), 0 0 64px 12px rgba(196,102,31,.35);
}
.cmp-bar::before{
  content:"";position:absolute;right:100%;top:0;bottom:0;width:40px;
  background:linear-gradient(to left, rgba(255,227,176,.22), rgba(255,227,176,0));
}
.cmp-handle{
  position:absolute;z-index:5;top:50%;left:calc(var(--cx)*1%);
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:var(--amber-deep);border:1px solid rgba(255,225,174,.55);
  display:flex;align-items:center;justify-content:center;gap:3px;
  color:#FFF7EA;cursor:grab;
  box-shadow:0 10px 26px -8px hsl(30 35% 8% / .55), 0 0 0 6px rgba(224,138,60,.14);
  transition:transform 120ms var(--ease-move);
}
.cmp-handle svg{width:9px;height:12px;flex:none}
.cmp.is-dragging .cmp-handle,.cmp-handle:active{cursor:grabbing;transform:scale(.96)}
.cmp-handle:focus-visible{
  outline:2px solid var(--amber-hi);outline-offset:4px;
  box-shadow:0 10px 26px -8px hsl(30 35% 8% / .55), 0 0 0 6px rgba(224,138,60,.38);
}
.cmp .chip,.cmp .anno,.cmp .anno-line{pointer-events:none}
.cmp .chip{
  top:14px;font-size:10.5px;
}
.cmp .chip.chip-after{left:16px;background:rgba(30,23,13,.46);border:1px solid rgba(255,225,174,.34);color:#FFE3B0}
.cmp .chip.chip-before{left:auto;right:16px;background:rgba(23,19,13,.6);color:#D8CDBA}
/* B-style annotation on the AFTER side - self-hides when the seam
   passes left of it (it describes the coating, not the before) */
.cmp .anno{left:26%;bottom:38%;transform:translateX(-50%)}
.cmp .anno-line{left:26%;bottom:16%;height:20%}
.cmp .anno,.cmp .anno-line{opacity:clamp(0, calc((var(--cx) - 26)/8), 1)}
.cmp-hint{
  margin-top:22px;text-align:center;color:var(--muted-dark);
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.cmp-hint::before,.cmp-hint::after{content:"";width:22px;height:1px;background:var(--line-dark)}

/* ============================================================
   SERVICES - sticky index rail + six deep sections
   ============================================================ */
.sp-chips-bar{display:none}
.sp-body{position:relative}
.sp-rail{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  max-width:1180px;margin-inline:auto;padding-inline:var(--pad);
}
.sp-rail-in{
  position:sticky;top:calc(var(--navh) + 44px);width:168px;
  display:flex;flex-direction:column;gap:2px;pointer-events:auto;
  padding-top:clamp(40px,5vw,72px);
}
.sp-rail a{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.4;
  color:var(--muted);padding:7px 0 7px 14px;position:relative;
  transition:color 240ms var(--ease-out),transform 120ms var(--ease-move);
}
.sp-rail a::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--amber);opacity:0;transition:opacity 240ms var(--ease-out);
}
.sp-rail a:hover{color:var(--ink)}
.sp-rail a:active,.sp-rail a.is-pressed{transform:scale(.97)}
.sp-rail a.is-active{color:var(--ink)}
.sp-rail a.is-active::before{opacity:1}
.sp-rail a .n{color:var(--amber);opacity:.9}
/* on the dark 01 band the rail sits on ink - flip to the dark register */
.sp-rail.on-dark a{color:var(--muted-dark)}
.sp-rail.on-dark a:hover,.sp-rail.on-dark a.is-active{color:var(--ivory-hi)}
.sp-rail.on-dark a .n{color:var(--amber-hi)}

.sp-sec{padding:clamp(64px,8vw,116px) 0;scroll-margin-top:calc(var(--navh) + 58px)}
.sp-sec .wrap{
  display:grid;grid-template-columns:208px minmax(0,1fr);
}
.sp-sec .sp-in{
  grid-column:2;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,5vw,72px);align-items:center;
}
.sp-num{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:640;letter-spacing:-.02em;
  font-size:clamp(15px,1.4vw,18px);color:var(--amber);
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.sp-num::after{content:"";width:34px;height:1px;background:var(--line);opacity:.9}
.sp-title{font-size:clamp(30px,3.4vw,44px)}
.sp-p{color:var(--muted);margin-top:20px;max-width:54ch}
.sp-p strong{font-weight:600;color:var(--ink)}
/* "How it goes" - 3-step ledger register */
.sp-how{margin-top:clamp(28px,3.5vw,40px)}
.sp-how .micro{color:var(--muted);opacity:.8}
.sp-steps{list-style:none;margin-top:6px}
.sp-steps li{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line);
}
.sp-steps li:first-child{border-top:0}
.sp-steps .sn{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.09em;color:var(--amber);
}
.sp-steps .st{font-size:15.5px;line-height:1.55;color:var(--ink)}
.sp-steps .st em{font-style:normal;color:var(--muted)}
/* materials / spec line - the ledger total */
.sp-spec{
  margin-top:4px;padding-top:15px;border-top:4px double var(--line);
  display:flex;gap:14px;align-items:baseline;
}
.sp-spec .micro{color:var(--amber);flex:none}
.sp-spec p{font-size:14.5px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}
.sp-cta{margin-top:clamp(26px,3vw,36px)}
/* the scene-detail illustration plate */
.sp-fig{position:relative}
.sp-fig .plate{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-ambient);
  aspect-ratio:var(--fig-ar,4/3);
}
.sp-fig figcaption{
  margin-top:14px;color:var(--muted);display:flex;align-items:center;gap:10px;
}
.sp-fig figcaption::before{content:"";width:22px;height:1px;background:var(--amber);opacity:.85}
/* band rhythm: 02/06 lifted paper, 04 plain, 01 the ONE dark chapter */
.sp-sec.tone-hi{background:var(--ivory-hi);border-block:1px solid var(--line)}
.sp-sec.dark{
  background:
    radial-gradient(72% 52% at 50% 108%, rgba(196,102,31,.17), rgba(196,102,31,0) 70%),
    radial-gradient(60% 40% at 18% -6%, rgba(58,50,37,.5), rgba(58,50,37,0) 60%),
    var(--ink-2);
  color:var(--ivory-hi);
}
.sp-sec.dark .sp-title{color:var(--ivory-hi)}
.sp-sec.dark .sp-p{color:var(--muted-dark)}
.sp-sec.dark .sp-p strong{color:var(--ivory-hi)}
.sp-sec.dark .sp-num::after{background:var(--line-dark)}
.sp-sec.dark .sp-num{color:var(--amber-hi)}
.sp-sec.dark .sp-how .micro{color:var(--muted-dark)}
.sp-sec.dark .sp-steps li{border-top-color:var(--line-dark)}
.sp-sec.dark .sp-steps .sn{color:var(--amber-hi)}
.sp-sec.dark .sp-steps .st{color:var(--ivory-hi)}
.sp-sec.dark .sp-steps .st em{color:var(--muted-dark)}
.sp-sec.dark .sp-spec{border-top-color:var(--line-dark)}
.sp-sec.dark .sp-spec .micro{color:var(--amber-hi)}
.sp-sec.dark .sp-spec p{color:var(--muted-dark)}
.sp-sec.dark .txtlink{color:var(--amber-hi)}
.sp-sec.dark .txtlink::after{background:var(--amber-hi)}
.sp-sec.dark .sp-fig .plate{
  border-color:rgba(255,225,174,.28);box-shadow:var(--sh-plate);
}
.sp-sec.dark .sp-fig figcaption{color:var(--muted-dark)}
/* pedestal glow on the dark showcase figure */
.sp-sec.dark .sp-fig::before{
  content:"";position:absolute;left:-3%;right:-3%;bottom:-14%;height:44%;
  background:radial-gradient(52% 58% at 50% 26%, rgba(224,138,60,.3), rgba(224,138,60,0) 72%);
}

/* ============================================================
   ABOUT - story, ledger, crew, Illinois & Indiana map, licenses
   ============================================================ */
.ab-story{padding:12px 0 var(--air)}
.ab-story .wrap{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,6vw,90px);align-items:start;
}
/* the lede column carries the story plate, so the copy floats centred
   against it instead of leaving a hole under the paragraphs */
.ab-story-copy{align-self:center}
.ab-story .micro{margin-bottom:18px}
.ab-lede{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:620;letter-spacing:-.015em;
  font-size:clamp(24px,2.6vw,32px);line-height:1.3;
}
.ab-lede strong{font-weight:680;color:var(--amber-deep)}
.ab-story-copy p{color:var(--muted)}
.ab-story-copy p + p{margin-top:20px}
/* the story plate - a real job, same staging as every other plate */
.ab-fig{margin-top:clamp(30px,4vw,44px)}
.ab-fig .plate{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);box-shadow:var(--sh-ambient);
}
.ab-fig figcaption,.crew-shot figcaption{
  margin-top:14px;color:var(--muted);display:flex;align-items:center;gap:10px;
}
.ab-fig figcaption::before,.crew-shot figcaption::before{
  content:"";width:22px;height:1px;background:var(--amber);opacity:.85;flex:none;
}
.ab-story-copy p strong{font-weight:600;color:var(--ink)}

.ab-numbers{padding:0 0 var(--air)}
.ab-numbers .num-k{margin-bottom:30px}
.ab-numbers .stat-row{margin-top:0;justify-content:space-between}
.ab-numbers .stat .num em{font-style:normal;color:var(--amber)}

.ab-crew{padding:var(--air) 0;background:var(--ivory-hi);border-block:1px solid var(--line)}
.crew-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  margin-top:clamp(44px,6vw,64px);max-width:880px;
}
.crew-card{display:flex;gap:24px;align-items:flex-start}
.crew-card .card-body{padding-top:4px}
.monogram{
  flex:none;width:86px;height:86px;border-radius:50%;position:relative;
  background:
    radial-gradient(120% 120% at 30% 22%, #FBF8F1, #EFE7D6 70%);
  border:1px solid var(--line);box-shadow:var(--sh-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:640;font-size:27px;
  letter-spacing:-.01em;color:var(--amber-deep);
}
.monogram::after{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(196,102,31,.28);
}
.crew-card h3{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:620;letter-spacing:-.01em;
  font-size:22px;line-height:1.2;
}
.crew-card .role{margin-top:7px;color:var(--amber)}
.crew-card .bio{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:34ch}
/* two real work photos under the crew cards - no stock, no stand-ins */
.crew-shots{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px);
  margin-top:clamp(48px,6vw,72px);
}
.crew-shot .plate{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);box-shadow:var(--sh-ambient);
}

.ab-area{padding:var(--air) 0}
.ab-area .wrap{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(40px,6vw,90px);align-items:center;
}
.ab-area .sec-sub strong{font-weight:600;color:var(--ink)}
/* licenses ledger under the area copy */
.lic-k{margin-top:clamp(34px,4.5vw,52px)}
.lic-ledger{list-style:none;margin-top:16px;max-width:460px}
.lic-ledger li{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line);
}
.lic-ledger li:last-child{border-bottom:4px double var(--line)}
.lic-ledger .lk{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.lic-ledger .lv{font-size:15px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
/* the service-area map plate (Illinois + Indiana) */
.map-plate{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--ivory-hi);box-shadow:var(--sh-ambient);
  padding:clamp(22px,3vw,38px);
}
.map-plate svg{width:100%;height:auto;display:block}
.map-land{fill:var(--ink);opacity:.92}
.map-dot{fill:var(--amber-hi)}
.map-halo{fill:none;stroke:var(--amber-hi);stroke-width:1;opacity:.5}
.map-lbl{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;fill:#FBF8F1;
}
.map-lbl.out{fill:#6E6353}
.map-plate .plate-cap{
  margin-top:16px;color:var(--muted);display:flex;align-items:center;gap:10px;
}
.map-plate .plate-cap::before{content:"";width:22px;height:1px;background:var(--amber);opacity:.85}

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px){
  .sp-rail{display:none}
  .sp-sec .wrap{grid-template-columns:minmax(0,1fr)}
  .sp-sec .sp-in{grid-column:1}
  .sp-chips-bar{
    display:block;position:sticky;top:var(--navh);z-index:45;
    background:var(--ivory);border-bottom:1px solid var(--line);
  }
  .sp-chips{
    display:flex;gap:8px;overflow-x:auto;padding:12px var(--pad);
    max-width:1180px;margin-inline:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .sp-chips::-webkit-scrollbar{display:none}
  .sp-chip{
    flex:none;text-decoration:none;white-space:nowrap;
    font-family:Inter,"Inter Fallback",sans-serif;font-size:11px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;line-height:1;
    color:var(--muted);background:var(--ivory-hi);border:1px solid var(--line);
    border-radius:999px;padding:9px 14px;
    transition:color 240ms var(--ease-out),border-color 240ms var(--ease-out),
               background-color 240ms var(--ease-out),transform 120ms var(--ease-move);
  }
  .sp-chip .n{color:var(--amber-ink);margin-right:6px}
  .sp-chip:active,.sp-chip.is-pressed{transform:scale(.96)}
  .sp-chip.is-active{color:#FFF7EA;background:var(--ink);border-color:var(--ink)}
  .sp-chip.is-active .n{color:var(--amber-hi)}
}
@media (max-width: 980px){
  .sp-sec .sp-in{grid-template-columns:1fr;gap:34px;align-items:start}
  .sp-fig{max-width:560px}
  .ab-story .wrap{grid-template-columns:1fr;gap:30px}
  .ab-story-copy{align-self:start}
  .ab-fig{max-width:560px}
  .ab-area .wrap{grid-template-columns:1fr;gap:44px}
  .map-plate{max-width:560px}
  .crew-grid{grid-template-columns:1fr;gap:36px}
  .crew-shots{grid-template-columns:1fr;gap:34px;max-width:560px}
}
@media (max-width: 860px){
  .proj-grid{grid-template-columns:1fr;gap:44px}
  .proj-card.featured,.proj-card.n2,.proj-card.n3,.proj-card.n4,
  .proj-card.n5,.proj-card.n6,.proj-card.n7,
  .proj-card.n8{grid-column:1;grid-row:auto;margin-top:0}
  /* no leader line on a phone-width plate - the chip sits on the skirting
     it names, and still self-hides when the seam passes it */
  .cmp .anno{left:28%;right:auto;bottom:11%;transform:translateX(-50%);
    opacity:clamp(0, calc((var(--cx) - 30)/8), 1)}
  .cmp .anno-line{display:none}
}
@media (max-width: 620px){
  .proj-media{padding:11% 0 0 0}
  .proj-before{width:52%}
  .crew-card{gap:18px}
  .monogram{width:72px;height:72px;font-size:23px}
  .cta-band .btn{width:min(100%,340px)}
  .sp-steps li{grid-template-columns:28px minmax(0,1fr);gap:10px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .proj-after .plate,.proj-before .plate,.sp-chip,.sp-rail a,.cmp-handle{transition:none}
  .proj-card:hover .proj-after .plate,.proj-card:hover .proj-before .plate{transform:none}
}

/* ============ PRINT ============ */
@media print{
  .showcase,.sp-sec.dark{background:none;color:var(--ink)}
  .showcase .sec-title,.sp-sec.dark .sp-title,.sp-sec.dark .sp-steps .st{color:var(--ink)}
  .cmp-bar,.cmp-handle,.sp-chips-bar,.sp-rail{display:none}
  .cmp-layer.is-after{clip-path:none}
  .proj-after .plate,.sp-fig .plate,.map-plate{box-shadow:none;break-inside:avoid}
}


/* ============ LEGAL PAGES - privacy, accessibility ============ */
/* Long prose earns a narrower measure and more leading than marketing copy.
   Headings use the design law's ONE intermediate size, 22px. */
.legal-sec{padding:0 0 clamp(30px,4vw,44px)}
.legal-sec:first-of-type{padding-top:clamp(22px,3vw,34px)}
.legal-sec:last-of-type{padding-bottom:clamp(64px,8vw,112px)}
.legal-h{font-size:22px;line-height:1.28;color:var(--ink);margin-bottom:13px}
.legal-p{max-width:66ch;color:var(--ink);font-size:17px;line-height:1.72}
.legal-p + .legal-p{margin-top:15px}
.legal-updated{color:var(--muted);margin-top:24px}
.legal-updated time{font-variant-numeric:tabular-nums}