/* ============================================================
   Vs One Corporation - "Golden Hour Restoration"
   Locked direction: mockup C "The Porch Light" + B's squeegee
   intro / job ticket / annotated plate / double-rule ledger.
   Targets: docs/target/target-base-c.html (LAW),
            docs/target/target-intro-donor-b.html (donor).
   ============================================================ */

/* ============ TOKENS (from .claude/skills/trailer-restoration-premium) ============ */
:root{
  --ivory:#F4EFE6; --ivory-hi:#FBF8F1; --ink:#221D15; --ink-2:#17130D;
  --muted:#6E6353; --muted-dark:#B3A48E; --line:#E2D9C8; --line-dark:#3A3225;
  --amber:#C4661F; --amber-hi:#E08A3C; --amber-deep:#B25717; /* CTA fill, AA */
  --amber-ink:#A0521A;                  /* amber for SMALL text - 4.9:1 on ivory. --amber itself is only 3.5:1 and fails AA below 18.66px */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-move:cubic-bezier(.6,0,.2,1);
  /* umber shadows only - never black rgba */
  --sh-ambient:0 14px 34px -18px hsl(30 35% 12% / .18);
  --sh-soft:0 8px 22px -14px hsl(30 35% 12% / .12);
  --sh-plate:0 44px 90px -38px hsl(30 35% 12% / .25);
  /* radius tiers - nesting formula: child = parent - gap */
  --r-xl:30px; --r-lg:26px; --r-md:14px; --r-sm:8px;
  --frame:clamp(0px, 1.1vw, 16px);      /* inset page frame; 0 on phones */
  --air:clamp(64px, 10vw, 140px);          /* 96-140 desktop, 64-96 mobile */
  --pad:clamp(20px, 5vw, 48px);
}

/* ============ SELF-HOSTED FONTS ============ */
@font-face{
  font-family:"Fraunces";
  src:url("../assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* metric-matched local fallbacks - keeps swap reflow quiet */
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia");
  size-adjust:104%; ascent-override:96%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  size-adjust:107%; ascent-override:90.5%; descent-override:22.5%; line-gap-override:0%;
}

/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:Inter,"Inter Fallback",system-ui,sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* warm radial field under everything light - ONE light source, upper-left.
   It drifts, very slowly, so the light reads as present rather than printed.
   Oversized by 12% so the transform never exposes an edge; transform-only so
   the whole thing stays on the compositor and never repaints. */
body::before{
  content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:radial-gradient(130vmax 85vmax at 12% -12%, rgba(255,227,176,.55), rgba(255,227,176,0) 60%);
  will-change:transform;
  animation:light-drift 72s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes light-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%    {transform:translate3d(1.7%,1.2%,0) scale(1.035)}
  67%    {transform:translate3d(-.8%,2%,0) scale(1.018)}
}
/* 4% grain on every stage */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
/* Inset page frame - a rounded window onto the site, ivory outside it.
   Drawn as one fixed overlay: the rounded rect is the hole, and a huge
   box-shadow spread fills everything outside it, clipped back to the
   viewport. No markup, no relayout, no effect on scrolling. */
html::after{
  content:"";position:fixed;inset:var(--frame);z-index:75;pointer-events:none;
  border-radius:calc(var(--frame) * 1.6);
  box-shadow:0 0 0 100vmax var(--ivory);
  clip-path:inset(calc(var(--frame) * -1));
}
@media (max-width:640px){
  /* width is precious on phones - the frame is the first thing to go */
  html::after{display:none}
}
::selection{background:rgba(196,102,31,.22)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
/* Skip link - WCAG 2.4.1. Sits above the inset frame (z-75) so it is not
   clipped, and only appears once it takes focus. */
.skip-link{
  position:fixed;top:var(--frame);left:var(--frame);z-index:90;
  /* clear the top edge whatever the text length makes it - a percentage
     translate leaves a sliver on screen once the frame inset is added */
  transform:translateY(calc(-100% - var(--frame) - 10px));
  background:var(--ink);color:var(--ivory-hi);
  font-family:Inter,"Inter Fallback",sans-serif;font-size:14px;font-weight:600;
  padding:12px 18px;border-radius:0 0 8px 0;text-decoration:none;
  transition:transform 160ms var(--ease-out);
}
.skip-link:focus{transform:none;outline:2px solid var(--amber-hi);outline-offset:-4px}
@media (prefers-reduced-motion: reduce){.skip-link{transition:none}}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline:none}

/* ============ TYPE - two regimes, one 22px middle ============ */
.display{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:640;
  letter-spacing:-.02em;line-height:1.04;
}
.micro{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.5;
}
.micro.amber{color:var(--amber-ink)}
.micro.mut{color:var(--muted)}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}

/* ============ SCENE (hoisted from assets/scene/scene.svg + scene-vars.css) ============ */
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .sky1{stop-color:var(--sc-sky1,#EFB668)}
.scene .sky2{stop-color:var(--sc-sky2,#F7DCA8)}
.scene .glow1{stop-color:var(--sc-glow,#FFE3B0);stop-opacity:.9}
.scene .glow2{stop-color:var(--sc-glow,#FFE3B0);stop-opacity:0}
.scene .sun{opacity:var(--sc-sun,1)}
.scene .clouds{opacity:var(--sc-clouds,0)}
.scene .grass{fill:var(--sc-grass,#7FA05E)}
.scene .grass2{fill:var(--sc-grass2,#74935C)}
.scene .siding{fill:var(--sc-siding,#F3EEE2)}
.scene .lap{stroke:var(--sc-lap,#E3DCCB)}
.scene .trim{fill:var(--sc-trim,#FBF8F1)}
.scene .roof{fill:var(--sc-roof,#F7F3E8)}
.scene .fascia{fill:var(--sc-fascia,#E8E2D2)}
.scene .skirt{fill:var(--sc-skirt,#DAD4C6)}
.scene .skirtline{stroke:var(--sc-skirtline,#C8C0AE)}
.scene .door{fill:var(--sc-door,#C4661F)}
.scene .glass{fill:var(--sc-glass,#5E6E75)}
.scene .glassrefl{opacity:var(--sc-refl,.55)}
.scene .grime{opacity:var(--sc-grime,0)}
.scene .damage{opacity:var(--sc-damage,0)}
.scene .rim{opacity:var(--sc-rim,1)}
.scene .trunk{fill:var(--sc-trunk,#8A6B4A)}
.scene .frond{fill:var(--sc-frond,#6E8F52)}
.scene .shadow{fill:var(--sc-shadow,#3A2B18);opacity:var(--sc-shadowo,.18)}
.scene .ac{fill:var(--sc-ac,#D9D2C2)}
.scene-after{
  --sc-sky1:#EFB668; --sc-sky2:#F7DCA8; --sc-sun:1; --sc-clouds:0;
  --sc-grass:#7FA05E; --sc-grass2:#74935C; --sc-siding:#F3EEE2; --sc-lap:#E3DCCB;
  --sc-trim:#FBF8F1; --sc-roof:#F7F3E8; --sc-fascia:#E8E2D2; --sc-skirt:#DAD4C6;
  --sc-skirtline:#C8C0AE; --sc-door:#C4661F; --sc-glass:#5E6E75; --sc-refl:.55;
  --sc-grime:0; --sc-damage:0; --sc-rim:1; --sc-trunk:#8A6B4A; --sc-frond:#6E8F52;
  --sc-shadow:#3A2B18; --sc-shadowo:.18; --sc-ac:#D9D2C2; --sc-glow:#FFE3B0;
}
.scene-before{
  --sc-sky1:#A9AEB0; --sc-sky2:#C9CBC6; --sc-sun:0; --sc-clouds:1;
  --sc-grass:#99A078; --sc-grass2:#8C9370; --sc-siding:#B7B2A4; --sc-lap:#A39E8F;
  --sc-trim:#8F8B80; --sc-roof:#8A8578; --sc-fascia:#7E7A6E; --sc-skirt:#9A948A;
  --sc-skirtline:#847E72; --sc-door:#7E7A70; --sc-glass:#4C5458; --sc-refl:.2;
  --sc-grime:1; --sc-damage:1; --sc-rim:0; --sc-trunk:#7C6547; --sc-frond:#5E7248;
  --sc-shadow:#2A2620; --sc-shadowo:.22; --sc-ac:#9B9587; --sc-glow:#FFE3B0;
}
/* pair 2 reads as a second home - slight siding/sky shift (like target C's second job) */
.pair-2 .scene-after{
  --sc-sky1:#E8A954; --sc-sky2:#F6D89B; --sc-siding:#EDE6D4; --sc-lap:#DBD1BA;
  --sc-trim:#FFFDF7; --sc-grass:#7A9A5B; --sc-grass2:#6F8E55;
}
.pair-2 .scene-before{
  --sc-sky1:#B2B4B0; --sc-sky2:#CBCCC5; --sc-siding:#B0AB9C; --sc-lap:#9B9584;
  --sc-grass:#939A74; --sc-grass2:#878E6C;
}

/* ============ LOAD CHOREOGRAPHY (one, max 6, once) ============ */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fadein{from{opacity:0}}
.lc{animation:rise 600ms var(--ease-out) backwards;animation-delay:calc(var(--i,0)*70ms)}
.lc-fade{animation:fadein 600ms var(--ease-out) backwards;animation-delay:calc(var(--i,0)*70ms)}

/* ============ IO REVEALS (once, 70ms stagger via --i, capped at 6 in markup) ============ */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.is-on{
  opacity:1;transform:none;
  transition:opacity 600ms var(--ease-out) calc(var(--i,0)*70ms),
             transform 600ms var(--ease-out) calc(var(--i,0)*70ms);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:999px;padding:17px 32px;cursor:pointer;
  font-family:Inter,"Inter Fallback",sans-serif;font-size:16px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;
  transition:transform 120ms var(--ease-move),background-color 240ms var(--ease-out),
             border-color 240ms var(--ease-out),box-shadow 240ms var(--ease-out);
}
.btn:active,.btn.is-pressed{transform:scale(.96)}
.btn-primary{background:var(--amber-deep);color:#FFF7EA;box-shadow:var(--sh-ambient)}
.btn-primary:hover{background:var(--amber)}
.btn-ghost{
  background:var(--ivory-hi);color:var(--ink);border:1px solid var(--line);
  box-shadow:var(--sh-soft);
}
.btn-ghost:hover{border-color:#D3C7B0}
.btn-ghost svg{width:16px;height:16px;color:var(--amber);flex:none}

/* ============ LANGUAGE PILL (fixed, minimal, top-right) ============ */
.lang-pill{
  position:fixed;z-index:70;top:clamp(18px,4svh,40px);right:var(--pad);
  display:inline-flex;align-items:center;gap:2px;
  background:var(--ivory-hi);border:1px solid var(--line);border-radius:999px;
  padding:4px;box-shadow:var(--sh-soft);
}
.lang-btn{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;line-height:1;color:var(--muted);
  padding:8px 12px;border-radius:999px;
  transition:color 240ms var(--ease-out),background-color 240ms var(--ease-out),
             transform 120ms var(--ease-move);
}
.lang-btn:hover{color:var(--ink)}
.lang-btn:active,.lang-btn.is-pressed{transform:scale(.96)}
.lang-btn.is-active{color:#FFF7EA;background:var(--ink)}

/* ============ 1. SIGNATURE INTRO - the finished job at dusk ============ */
.intro{height:220svh;position:relative}
.intro-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink-2);
}
/* The photograph. JS writes the scale push straight onto the <img>, so a
   scroll frame invalidates ONE element - not an inherited custom property
   cascading into the whole stage subtree. */
.intro-photo{position:absolute;inset:0;z-index:0}
.intro-photo picture{display:block;width:100%;height:100%}
.intro-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  transform:scale(1.06);transform-origin:50% 58%;
  will-change:transform;
}
/* phone recomposition (law): hold the door, porch light and steps in frame */
@media (max-width:640px){.intro-photo img{object-position:34% 50%}}
@media (max-width:480px){.intro-photo img{object-position:30% 48%}}

/* Warm umber scrim - carries the type and keeps ONE light source, upper-left.
   Thins to .06 across the middle band so the lit porch stays the focal point. */
.intro-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(23,19,13,.74) 0%, rgba(23,19,13,.64) 30%,
      rgba(23,19,13,.56) 46%, rgba(23,19,13,.22) 70%,
      rgba(23,19,13,.14) 84%, rgba(23,19,13,.50) 100%),
    radial-gradient(120vmax 80vmax at 12% -10%, rgba(255,227,176,.16), rgba(255,227,176,0) 58%);
}
/* soft handoff into the ivory hero - opacity driven by JS */
.intro-fade{
  position:absolute;left:0;right:0;bottom:0;height:190px;z-index:2;pointer-events:none;
  /* eased stops, not a linear ramp - a straight ramp bands at its top edge
     and reads as fog instead of the ivory stage arriving */
  background:linear-gradient(to bottom,
    rgba(244,239,230,0) 0%, rgba(244,239,230,.10) 36%,
    rgba(244,239,230,.40) 64%, rgba(244,239,230,.78) 85%, var(--ivory) 100%);
  opacity:0;
}
/* 'concept' renderer (dormant) - a REAL before wiped into a GENERATED after.
   The badge is created by js/intro.js next to the image, never by markup, so
   a concept render cannot reach the page without its label attached. */
.intro-concept-after{position:absolute;inset:0;z-index:0;clip-path:inset(0 100% 0 0)}
.intro-concept-after img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.intro-concept-before{position:absolute;inset:0;z-index:0}
.intro-concept-before img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.intro-stage.concept-on .intro-photo img{transform:none}
/* only once BOTH endpoints exist does the dusk photograph step aside */
.intro-stage.concept-paired .intro-photo{display:none}
.intro-concept-badge{
  position:absolute;z-index:5;left:var(--pad);bottom:clamp(18px,4svh,40px);
  color:var(--ivory-hi);background:rgba(23,19,13,.66);
  border:1px solid rgba(251,248,241,.34);border-radius:4px;
  padding:8px 12px;letter-spacing:.12em;
}
@media (max-width:520px){
  .intro-concept-badge{font-size:9.5px;letter-spacing:.08em;padding:7px 10px}
}
/* frames renderer canvas (dormant until INTRO_RENDERER='frames') */
.intro-frames{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.intro-stage.frames-on .intro-photo{display:none}

/* boxed job-ticket plate, top-left */
.intro-job{
  position:absolute;z-index:4;top:clamp(18px,4svh,40px);left:var(--pad);
  color:var(--ivory-hi);
  /* the ticket carries its own umber backing - 11.5px micro type must clear AA
     wherever the photograph happens to be bright behind it */
  background:rgba(23,19,13,.62);
  border:1px solid rgba(251,248,241,.34);border-radius:4px;
  padding:10px 14px 11px;letter-spacing:.12em;
}
.intro-job .l2{
  display:block;opacity:.74;margin-top:3px;
  padding-top:5px;border-top:1px solid rgba(251,248,241,.22);
}
/* hint fades by p = .1 (JS-driven) */
.intro-hint-wrap{
  position:absolute;z-index:4;left:0;right:0;bottom:clamp(26px,5svh,48px);text-align:center;
  pointer-events:none;
}
.intro-hint{
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ivory-hi);letter-spacing:.14em;
}
.intro-hint .bar{width:1px;height:34px;background:var(--ivory-hi);opacity:.5}
/* three-fragment headline, staggered release at p .8-1 */
.intro-headline{
  position:absolute;z-index:4;left:0;right:0;top:20%;
  text-align:center;padding-inline:var(--pad);
  font-size:clamp(42px,8.2vw,108px);color:var(--ivory-hi);
  text-shadow:0 1px 30px hsl(30 35% 12% / .38);
}
.intro-headline span{
  display:inline-block;opacity:0;transform:translateY(30px);
  transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);
}
.intro.released .intro-headline span{opacity:1;transform:none}
.intro.released .intro-headline span:nth-child(2){transition-delay:70ms}
.intro.released .intro-headline span:nth-child(3){transition-delay:140ms}
@media (prefers-reduced-motion:reduce){
  .intro-photo img{transform:none}
  .intro-headline span{transition:opacity 200ms linear}
}

/* ============ 2. HERO ============ */
.hero{padding:clamp(72px,7.5vw,108px) 0 clamp(56px,5.5vw,76px);text-align:center}
/* the photograph carries the drama; the hero is a tight typographic bridge,
   so it does not stack its own bottom air on top of the next stage's top air */
.hero + .services{padding-top:clamp(52px,6vw,88px)}
.hero .micro{margin-bottom:30px}
.hero p.sub{
  max-width:52ch;margin:0 auto;color:var(--muted);
  font-size:clamp(19px,1.5vw,22px);line-height:1.55;   /* the law's ONE intermediate size */
}
.hero p.sub strong{font-weight:600;color:var(--ink)}
.hero .cta-row{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,52px);
}

/* ============ SECTION HEADERS - kicker on every section ============ */
.sec-head{max-width:760px}
.sec-head .micro{margin-bottom:18px}
.sec-title{font-size:clamp(36px,4.8vw,64px)}
.sec-sub{color:var(--muted);margin-top:20px;max-width:52ch}

/* ============ 3. SERVICES - broken grid, DOM reads 01-06 ============ */
.services{padding:var(--air) 0 calc(var(--air) + 20px)}
.svc-grid{
  display:grid;grid-template-columns:7fr 5fr;gap:28px;
  margin-top:clamp(48px,6vw,76px);align-items:start;
}
.svc-colA{display:grid;gap:28px}
.svc-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.svc-colB{display:grid;gap:28px;align-content:start;padding-top:76px}
.card{
  background:var(--ivory-hi);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 30px 30px;box-shadow:var(--sh-ambient);
  transition:transform 240ms var(--ease-out);
}
.card:hover{transform:translateY(-3px)}
.card .micro{color:var(--muted);opacity:.75}
.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;margin-top:12px;      /* the ONE 22px */
}
.card .rule{height:1px;background:var(--line);margin:16px 0 14px}
.card p{color:var(--muted);font-size:17px;line-height:1.6}
.card-hero{padding:40px 38px 38px;display:flex;flex-direction:column}
.card-hero h3{font-size:22px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-tag{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(196,102,31,.38);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.card-hero .detail{
  position:relative;margin-top:30px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:640/250;
}
/* deliberate offsets, not masonry accidents */
.svc-off-1{margin-top:38px}   /* second card of the duo */
.svc-off-2{margin-top:22px}   /* last card of column B */

/* ============ 4. GALLERY - the evening chapter ============ */
.gallery{
  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 calc(var(--air) + 30px);
}
.gallery .sec-head{margin-inline:auto;text-align:center}
.gallery .sec-title{color:var(--ivory-hi)}
.gallery .sec-sub{color:var(--muted-dark);margin-inline:auto}
.pair{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0;align-items:center;
  margin-top:clamp(76px,9vw,128px);
}
.plate{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
/* real client photos sit in the same staging the illustrated plates had:
   the plate owns the 4:3 + radius + shadow, the photo just fills it */
.plate picture{position:absolute;inset:0;display:block}
.plate img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:var(--line);
}
.chip{
  position:absolute;z-index:3;top:14px;left:14px;
  padding:6px 12px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  font-family:Inter,"Inter Fallback",sans-serif;line-height:1.4;
}
.pw-before{grid-column:1/6;grid-row:1;z-index:1;transform:translateY(-11%)}
.pw-before .plate{border-radius:12px;border:1px solid var(--line-dark)}
.pw-before .plate::after{content:"";position:absolute;inset:0;background:rgba(13,10,6,.34)}
.pw-before .chip{background:rgba(23,19,13,.6);color:#D8CDBA}
.pw-after{grid-column:4/13;grid-row:1;z-index:2;position:relative}
.pw-after .plate{
  border:1px solid rgba(255,225,174,.28);
  box-shadow:var(--sh-plate);           /* the ONE big umber drop-shadow */
}
.pw-after .chip{
  left:auto;right:16px;
  background:rgba(30,23,13,.46);border:1px solid rgba(255,225,174,.34);color:#FFE3B0;
}
/* pedestal glow under the AFTER plate - the porch light */
.pw-after::before{
  content:"";position:absolute;left:-4%;right:-4%;bottom:-16%;height:44%;z-index:-1;
  background:radial-gradient(52% 58% at 50% 26%, rgba(224,138,60,.34), rgba(224,138,60,0) 72%);
}
.pair .caption{margin-top:20px;color:var(--muted-dark);display:flex;align-items:center;gap:10px}
.pair .caption::before{content:"";width:22px;height:1px;background:var(--amber);opacity:.85}
.pair.rev .pw-before{grid-column:8/13;transform:translateY(11%)}
.pair.rev .pw-after{grid-column:1/10}
.pair.rev .caption{justify-content:flex-end}
.pair.rev .caption::before{order:2}
/* B's amber annotation - pair 1 AFTER plate only: leader line, dot terminal, chip */
.anno{
  position:absolute;z-index:3;left:62%;bottom:38%;
  transform:translateX(-50%);white-space:nowrap;max-width:92%;
  font-size:10.5px;letter-spacing:.1em;
  color:var(--amber-hi);background:rgba(23,19,13,.86);
  border:1px solid rgba(224,138,60,.45);border-radius:4px;
  padding:5px 10px 6px;
}
.anno-line{
  position:absolute;z-index:2;left:62%;bottom:16%;height:20%;width:1px;
  background:var(--amber-hi);
}
.anno-line::after{
  content:"";position:absolute;left:-3px;bottom:-3px;
  width:7px;height:7px;border-radius:50%;
  background:var(--amber-hi);box-shadow:0 0 10px 2px rgba(224,138,60,.7);
}


/* ---- 4b. work marquee - the closing band of the evening chapter --------
   Autoplays on a timer. It is deliberately NOT scroll-driven: the intro is
   the one scroll moment on this site, and a second one would cost the first
   its impact. Pauses on hover and on keyboard focus, and under
   prefers-reduced-motion it stops being motion at all and becomes a plain
   swipeable strip.                                                      */
.mq-head{margin:clamp(56px,7vw,90px) 0 20px;color:var(--muted-dark)}
.mq{--mq-gap:16px}
.mq{
  position:relative;overflow:hidden;
  /* break out of .wrap to the full viewport - a strip that stops at the text
     column reads as a boxed carousel; one that runs off both edges reads as
     "there is more of this". html/body already carry overflow-x:clip, so the
     100vw breakout cannot create a horizontal scrollbar. */
  width:100vw;margin-inline:calc(50% - 50vw);
  padding-block:2px;                 /* room for the item shadow */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* paused by main.js whenever the strip is off screen - no perpetual
   compositor work (and no battery drain) for a band nobody is looking at */
.mq.is-idle .mq-track{animation-play-state:paused}
.mq-track{display:flex;gap:var(--mq-gap);width:max-content;animation:mq 64s linear infinite}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
.mq-item{flex:none;margin:0}
.mq-item img{
  display:block;width:260px;height:195px;object-fit:cover;
  border-radius:var(--r-md);border:1px solid var(--line-dark);
  box-shadow:var(--sh-ambient);
}
/* One full set + one gap, so the second copy lands exactly where the first
   began. -50% of the track is one set plus HALF a gap, hence the extra half.
   Derived from --mq-gap so changing the gap can never desync the seam. */
@keyframes mq{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--mq-gap) / 2))}
}

@media (max-width: 620px){
  .mq-item img{width:190px;height:143px}
  .mq-track{animation-duration:46s}
}
@media (prefers-reduced-motion: reduce){
  .mq-track{animation:none}
  .mq{
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-mask-image:none;mask-image:none;
  }
  .mq-item{scroll-snap-align:start}
}

/* ============ 5. TRUST - C's 200+ arrangement + B's double-rule ledger close ============ */
.trust{padding:var(--air) 0}
.trust-grid{
  display:grid;grid-template-columns:7fr 4fr;gap:clamp(44px,7vw,110px);
  margin-top:clamp(44px,6vw,72px);align-items:start;
}
.stat-hero .num{font-size:clamp(72px,8.5vw,94px);line-height:1}
.stat-hero .num em{font-style:normal;color:var(--amber)}
.stat-hero .micro{margin-top:14px;color:var(--muted)}
.stat-row{
  display:flex;gap:clamp(34px,4.5vw,60px);flex-wrap:wrap;
  margin-top:clamp(44px,5vw,64px);
  padding-bottom:clamp(28px,3.5vw,40px);
  border-bottom:4px double var(--line);   /* B's ledger total rule */
}
.stat .num{font-size:clamp(40px,4vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.stat .micro{margin-top:12px;color:var(--muted);max-width:150px}
/* Real communities, in place of the fabricated stat row. Set in the display
   face at the design law's one intermediate size, so the section keeps its
   weight without inventing a number to carry it. */
.where-k{color:var(--muted);margin-bottom:20px}
.where-list{list-style:none;margin:0;padding:0}
.where-list li{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:620;
  font-size:22px;line-height:1.3;color:var(--ink);
  padding:13px 0;border-bottom:1px solid var(--line);
}
.where-list li:first-child{padding-top:0}
.where-list li:last-child{border-bottom:0;padding-bottom:0}
.foreman{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,38px);margin-top:10px}
.foreman .micro{margin-bottom:16px}
.foreman p{color:var(--muted)}

/* ============ 6. OUR STANDARD - A's dark stage, oversized lead statement ============ */
.quotes{
  background:
    radial-gradient(1200px 720px at 50% 114%, rgba(196,102,31,.16), rgba(196,102,31,0) 64%),
    radial-gradient(1000px 640px at 12% -10%, rgba(255,227,176,.05), rgba(255,227,176,0) 55%),
    var(--ink);
  color:var(--ivory);
  padding:var(--air) 0;position:relative;overflow:hidden;
}
.quotes .wrap{position:relative}
.q-kicker{margin-bottom:clamp(36px,5vw,56px)}
.q-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,90px)}
.qstmt{border:0;margin:0}
.qt{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:620;letter-spacing:-.015em;
  text-wrap:balance;
}
.q1 .qt{font-size:clamp(27px,4.2vw,54px);line-height:1.16;color:var(--ivory-hi);max-width:24ch}
.q2{margin-top:clamp(64px,9vw,132px)}
.q2 .qt{font-size:clamp(22px,2.4vw,29px);line-height:1.3;color:var(--ivory)}
.qsub{
  margin-top:clamp(18px,2vw,26px);color:var(--muted-dark);
  font-size:17px;line-height:1.6;max-width:46ch;
}
.qname{margin-top:26px;color:var(--muted-dark);display:flex;align-items:center;gap:10px}
.qname::before{content:"";width:22px;height:1px;background:var(--amber-hi);opacity:.85}

/* ============ 7. FORM - C's visible bordered inputs, matte paper ============ */
.estimate{
  padding:var(--air) 0 calc(var(--air) + 10px);
  background:radial-gradient(950px 640px at 82% 4%, rgba(224,138,60,.1), rgba(224,138,60,0) 62%);
}
.estimate .sec-head{margin-inline:auto;text-align:center}
.estimate .sec-sub{margin-inline:auto}
.form-card{
  max-width:780px;margin:clamp(40px,5vw,60px) auto 0;
  background:var(--ivory-hi);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,4.5vw,52px);box-shadow:var(--sh-ambient);
}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.f-field{display:flex;flex-direction:column;gap:9px}
.f-field.full{grid-column:1/-1}
.f-field label{color:var(--muted)}
.f-field input,.f-field textarea{
  font:400 17px/1.5 Inter,"Inter Fallback",sans-serif;color:var(--ink);
  background:#F6F1E7;border:1px solid var(--line);
  border-radius:var(--r-md);            /* 30 card - 16 gap = 14 */
  padding:14px 17px;width:100%;outline:none;
  transition:border-color 240ms var(--ease-out),box-shadow 240ms var(--ease-out);
}
.f-field textarea{min-height:120px;resize:none}   /* no resize grip - hard rule */
.f-field input::placeholder,.f-field textarea::placeholder{color:#A79A85}
.f-field input:focus,.f-field textarea:focus{
  border-color:var(--amber);box-shadow:0 0 0 4px rgba(196,102,31,.12);
}
/* honeypot - never visible, never focusable */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* TCPA consent - conspicuous by construction: body size, AA contrast on the
   card, and above the control it governs rather than under it. */
.f-consent{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:14px;line-height:1.6;max-width:64ch;
}
.f-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.f-consent a:hover{color:var(--amber-ink)}
.f-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.f-consent + .f-actions{margin-top:20px}
.f-actions .note{color:var(--muted);font-size:15px;line-height:1.5;max-width:34ch}
.form-alert{
  margin-top:18px;color:var(--amber-deep);font-size:15px;line-height:1.55;
}
.form-alert[hidden]{display:none}
.form-success{display:none;text-align:center;padding:clamp(20px,4vw,44px) 0}
.form-success .big{font-size:clamp(26px,3vw,36px);margin-bottom:14px;color:var(--ink)}
.form-success p{color:var(--muted);max-width:40ch;margin-inline:auto}
.form-card.sent .form-body{display:none}
.form-card.sent .form-success{display:block;animation:successin 420ms var(--ease-out) both}
@keyframes successin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


/* ---- 7b. stepped estimate form ----------------------------------------
   Progressive enhancement: with JS off every .fstep is on screen and the
   single submit posts natively. main.js adds .stepped, which is the only
   thing that turns this into a 3-step flow.                            */

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ledger rule - step counter + the run of amber */
.f-prog{margin-bottom:clamp(26px,3.4vw,36px)}
.f-prog[hidden]{display:none}
.f-prog-line{color:var(--amber-deep);margin-bottom:12px}
.f-prog-track{height:2px;background:var(--line);border-radius:999px;overflow:hidden}
.f-prog-fill{
  display:block;height:100%;width:33.333%;border-radius:999px;
  background:var(--amber-deep);
  transition:width 200ms var(--ease-move);   /* click response, not an entrance */
}

/* one step */
.fstep-t{
  font-size:22px;font-weight:640;letter-spacing:-.01em;line-height:1.2;
  color:var(--ink);margin-bottom:22px;outline:none;
}
.form-body.stepped .fstep{display:none}
.form-body.stepped .fstep.is-live{
  display:block;animation:stepin 240ms var(--ease-out) both;
}
@keyframes stepin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes opin{from{opacity:0}to{opacity:1}}

/* option groups - visible bordered controls, no icon pills (skill rule 7) */
.f-opts{border:0;padding:0;margin:0;min-width:0}
.f-opts + .f-field,.f-opts + .f-grid,.f-grid + .f-opts,.f-recap + .f-grid{margin-top:26px}
.f-opts-l{display:block;color:var(--muted);margin-bottom:14px;padding:0}
/* a GRID, not wrap - flex-wrap produced orphaned chips and ragged rows,
   which is exactly the accidental-masonry the skill forbids */
.f-opt-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-opt{
  display:flex;align-items:center;gap:11px;
  padding:13px 19px 13px 15px;
  background:#F6F1E7;border:1px solid var(--line);border-radius:var(--r-md);
  font-size:16px;line-height:1.3;color:var(--ink);cursor:pointer;
  transition:border-color 240ms var(--ease-out),background-color 240ms var(--ease-out),
             transform 120ms var(--ease-move);
}
.f-opt.wide{grid-column:1/-1}
.f-opt:hover{border-color:#CFC2AC}
.f-opt:active{transform:scale(.96)}
.f-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.f-opt-mark{
  flex:none;width:20px;height:20px;position:relative;
  background:#FFF;border:1.5px solid #CFC2AC;
  transition:background-color 240ms var(--ease-out),border-color 240ms var(--ease-out);
}
.f-opt.one .f-opt-mark{border-radius:50%}
.f-opt.many .f-opt-mark{border-radius:6px}
.f-opt.one .f-opt-mark::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:#FFF7EA;
  transform:scale(0);transition:transform 240ms var(--ease-out);
}
.f-opt.many .f-opt-mark::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #FFF7EA;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform 240ms var(--ease-out);
}
.f-opt.is-on{background:#F7E9DA;border-color:var(--amber)}
.f-opt.is-on .f-opt-mark{background:var(--amber-deep);border-color:var(--amber-deep)}
.f-opt.one.is-on .f-opt-mark::after{transform:scale(1)}
.f-opt.many.is-on .f-opt-mark::after{transform:rotate(45deg) scale(1)}
/* sibling combinator = guaranteed ring; :has() upgrades it to the whole chip */
.f-opt input:focus-visible ~ .f-opt-mark{outline:2px solid var(--amber);outline-offset:3px}
.f-opt:has(input:focus-visible){border-color:var(--amber)}

/* foreman's ledger recap on step 3 - same 4px double rule as the trust total */
@media (max-width: 480px){
  /* one column on phones - big thumb targets and no mid-chip wrapping */
  .f-opt-row{grid-template-columns:1fr}
}

.f-recap{padding-bottom:16px;border-bottom:4px double var(--line);margin-bottom:28px}
.f-recap[hidden]{display:none}
.f-recap-l{color:var(--muted);margin-bottom:9px}
.f-recap-body{font-size:17px;line-height:1.5;color:var(--ink)}
.f-recap-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px}
.f-recap-line + .f-recap-line{margin-top:3px}
.f-recap-body .sep{color:var(--amber);opacity:.8}

/* control row - Back / Continue / Submit share the one .f-actions row,
   left-aligned like the locked target. Hidden buttons collapse out. */
.f-actions .btn[hidden],.f-actions .note[hidden]{display:none}

/* text-photos line on the success state */
.form-ok-photos{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted);max-width:40ch;margin-inline:auto;
}

@media (max-width: 620px){
  .f-opt{padding:12px 16px 12px 13px;font-size:15.5px}
  /* Control row on phones: the primary action leads, full width; Back sits
     beneath it as the quieter option. Long CTA labels ("Request my free
     estimate") will not share a row at 320px, and a full-width Back above
     the CTA inverts the hierarchy. This block owns the row outright - the
     old single-button `.f-actions .btn{width:100%}` was deleted. */
  .f-actions{gap:12px}
  .f-actions .btn{padding:16px 18px}
  .f-actions .f-next,.f-actions .f-submit{order:1;flex:1 0 100%}
  .f-actions .f-back{order:2;flex:0 0 auto;margin-inline:auto}
  .f-actions .note{order:3;flex:1 0 100%;max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .form-body.stepped .fstep.is-live{animation:opin 200ms linear both}
  .f-prog-fill{transition:none}
  .f-opt,.f-opt-mark,.f-opt .f-opt-mark::after{transition-duration:200ms}
  .f-opt:active{transform:none}
}

/* ============ 8. FOOTER - ink band, porch light ============ */
.site-foot{
  background:
    radial-gradient(56% 60% at 50% -10%, rgba(196,102,31,.14), rgba(196,102,31,0) 68%),
    var(--ink-2);
  color:var(--muted-dark);text-align:center;
  padding:clamp(64px,8vw,104px) 0 46px;
}
.porch{position:relative;width:8px;height:8px;margin:0 auto 30px}
.porch::before{
  content:"";position:absolute;left:50%;top:50%;width:140px;height:140px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,214,156,.5), rgba(255,214,156,0) 70%);
}
.porch::after{content:"";position:absolute;inset:0;border-radius:50%;background:#FFE3B0}
.foot-name{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:620;font-size:22px;
  color:var(--ivory-hi);letter-spacing:-.01em;
}
/* the client's own mark, monochrome ivory: the full-colour lockup is navy
   on #17130D at 1.38:1 - illegible on every dark chapter of the site */
.foot-name img{height:clamp(42px,5.2vw,56px);width:auto;margin-inline:auto}
.foot-tag{margin-top:9px;color:var(--muted-dark);font-size:10.5px;letter-spacing:.14em}
.foot-line{margin-top:22px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;align-items:center}
.foot-line a{text-decoration:none;color:var(--ivory-hi);transition:transform 120ms var(--ease-move)}
.foot-line a:active,.foot-line a.is-pressed{transform:scale(.96)}
.foot-line .dot{width:3px;height:3px;border-radius:50%;background:var(--line-dark)}
/* the shop's local time - a small sign that someone is actually there */
.foot-clock{
  margin-top:26px;display:inline-flex;gap:9px;align-items:baseline;
  color:var(--muted-dark);opacity:.72;
}
.foot-clock time{
  color:var(--ivory-hi);opacity:.9;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:13px;color:#8A7C66}

/* ============ NO-JS FALLBACKS ============ */
html:not(.js) .site-nav.nav-home{
  position:static;transform:none;opacity:1;pointer-events:auto;transition:none;
}
html:not(.js) .intro{height:auto}
html:not(.js) .intro-stage{position:relative;height:100svh}
html:not(.js) .intro-hint-wrap{display:none}
/* .solo is normally hidden by body.nav-in, which only JS sets - with JS off
   the static nav already carries its own pill, so the two would overlap */
html:not(.js) .lang-pill.solo{display:none}
html:not(.js) .intro-photo img{transform:none}
html:not(.js) .intro-headline span{opacity:1;transform:none}
html:not(.js) .intro-fade{opacity:1}

/* ============ REDUCED MOTION - static AFTER at 100svh, 200ms opacity ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .intro{height:100svh}
  .intro-hint-wrap{display:none}
  .intro-photo img{transform:none !important}
  .intro-fade{opacity:1}
  .intro-headline span{
    opacity:1 !important;transform:none !important;
    transition:opacity 200ms linear !important;
  }
  body::before{animation:none}
  .lc,.lc-fade{animation:none}
  .js .rv{opacity:1;transform:none;transition:opacity 200ms linear}
  .card,.btn,.lang-btn{transition:none}
  .form-card.sent .form-success{animation:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .svc-grid{grid-template-columns:1fr;gap:22px}
  .svc-colA{gap:22px}
  .svc-duo{gap:22px}
  .svc-colB{padding-top:0;gap:22px}
  .svc-off-1,.svc-off-2{margin-top:0}
  .trust-grid{grid-template-columns:1fr;gap:52px}
  .foreman{max-width:480px}
  .q-grid{grid-template-columns:1fr}
  .q2{margin-top:56px;justify-self:end;max-width:520px}
}
@media (max-width: 760px){
  .pair{grid-template-columns:1fr;align-items:start}
  .pw-before{grid-column:1;grid-row:1;width:60%;transform:none;margin-bottom:-12%;z-index:2}
  .pw-after{grid-column:1;grid-row:2;z-index:1}
  .pw-after .chip{right:14px}
  /* the overlapping BEFORE plate owns the top-left corner on mobile -
     the annotation moves right, line still terminating on the skirting */
  .anno{left:auto;right:10px;top:auto;bottom:32%;transform:none;max-width:none}
  .anno-line{left:auto;right:36%;top:auto;bottom:11%;height:17%}
  .pair.rev .pw-before{grid-column:1;justify-self:end;transform:none}
  .pair.rev .pw-after{grid-column:1}
  .pair.rev .caption{justify-content:flex-start}
  .pair.rev .caption::before{order:0}
  .pair .caption{margin-top:18px}
}
@media (max-width: 620px){
  .svc-duo{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:18px}
  .hero .cta-row .btn{width:min(100%,340px)}
  .stat-row{gap:30px}
  .foot-line{flex-direction:column;gap:10px}
  .foot-line .dot{display:none}
}
@media (max-width: 520px){
  /* the fixed language pill owns the top-right corner on small phones -
     the job ticket drops below it and tightens so line 1 never wraps */
  .intro-job{
    top:calc(clamp(18px,4svh,40px) + 50px);
    font-size:9.5px;letter-spacing:.08em;
  }
}
@media (max-width: 480px){
  .anno{font-size:9.5px;letter-spacing:.08em}
}
/* ============ PRINT - quiet defaults ============ */
@media print{
  body::before,body::after{display:none}
  .lang-pill,.intro-hint-wrap{display:none !important}
  .intro{height:auto}
  .intro-stage{position:static;height:52vh}
  .intro-photo img{transform:none !important}
  .intro-headline span{opacity:1 !important;transform:none !important}
  .js .rv{opacity:1 !important;transform:none !important}
  .gallery,.quotes,.site-foot{background:none;color:var(--ink)}
  .gallery .sec-title,.q1 .qt,.q2 .qt,.foot-name{color:var(--ink)}
  .sec-sub,.qname,.pair .caption{color:var(--muted)}
  .card,.form-card,.plate{box-shadow:none;break-inside:avoid}
  .btn{box-shadow:none}
}

/* ============================================================
   SHARED NAV + FOOTER EXTENSION (all four pages)
   Slim fixed bar - matte paper, hairline, umber shadow. No blur.
   On index it stays off-canvas until the intro releases (js adds
   .is-in); on subpages it is present from load (.nav-static).
   ============================================================ */
:root{--navh:64px}
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--navh);
  background:var(--ivory-hi);border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -22px hsl(30 35% 12% / .22);
}
.site-nav.nav-home{
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform 420ms var(--ease-out),opacity 420ms var(--ease-out);
}
.site-nav.nav-home.is-in{transform:none;opacity:1;pointer-events:auto}
.nav-inner{
  max-width:1180px;margin-inline:auto;padding-inline:var(--pad);
  height:100%;display:flex;align-items:center;gap:26px;
}
.nav-brand{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:640;letter-spacing:-.01em;
  font-size:20px;line-height:1;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:baseline;gap:8px;
  transition:transform 120ms var(--ease-move);
}
.nav-brand:active,.nav-brand.is-pressed{transform:scale(.96)}
/* micro-label beside the wordmark, amber dot as the separator */
.nav-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:Inter,"Inter Fallback",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--muted);
}
.nav-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);margin-left:auto}
.nav-link{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1;
  color:var(--muted);text-decoration:none;position:relative;padding:6px 0;
  transition:color 240ms var(--ease-out),transform 120ms var(--ease-move);
}
.nav-link:hover{color:var(--ink)}
.nav-link:active,.nav-link.is-pressed{transform:scale(.96)}
.nav-link[aria-current="page"]{color:var(--ink)}
.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:0;bottom:-2px;width:16px;height:2px;
  border-radius:2px;background:var(--amber);
}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-links + .nav-actions{margin-left:0}
.nav-cta{
  display:inline-flex;align-items:center;border-radius:999px;
  background:var(--amber-deep);color:#FFF7EA;text-decoration:none;
  font-family:Inter,"Inter Fallback",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.02em;line-height:1;padding:11px 18px 12px;white-space:nowrap;
  box-shadow:var(--sh-soft);
  transition:background-color 240ms var(--ease-out),transform 120ms var(--ease-move);
}
.nav-cta:hover{background:var(--amber)}
.nav-cta:active,.nav-cta.is-pressed{transform:scale(.96)}
/* the EN/ES pill lives inside the bar on subpages (and after slide-in on home) */
.lang-pill.in-nav{position:static;box-shadow:none;padding:3px}
.lang-pill.in-nav .lang-btn{padding:7px 11px}
/* standalone fixed pill (index intro) hides once the bar owns the top */
body.nav-in .lang-pill.solo,body.menu-open .lang-pill.solo{opacity:0;pointer-events:none}
.lang-pill.solo{transition:opacity 240ms var(--ease-out)}
.nav-menu-btn{
  display:none;font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--ink);padding:10px 2px;
  transition:transform 120ms var(--ease-move);
}
.nav-menu-btn:active,.nav-menu-btn.is-pressed{transform:scale(.96)}

/* ---- full-screen overlay menu (mobile) - the ink stage ---- */
.nav-overlay{
  position:fixed;inset:0;z-index:76;display:none;flex-direction:column;
  background:
    radial-gradient(80% 55% at 50% 112%, rgba(196,102,31,.18), rgba(196,102,31,0) 68%),
    radial-gradient(70% 45% at 12% -8%, rgba(255,227,176,.06), rgba(255,227,176,0) 55%),
    var(--ink-2);
  color:var(--ivory-hi);padding:0 var(--pad) clamp(28px,6svh,52px);
  overflow-y:auto;
}
.nav-overlay.is-open{display:flex}
.menu-top{
  height:var(--navh);display:flex;align-items:center;justify-content:space-between;
  flex:none;
}
.menu-brand{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:640;font-size:20px;line-height:1;
  color:var(--ivory-hi);text-decoration:none;letter-spacing:-.01em;
  display:inline-flex;align-items:baseline;gap:8px;
}
.menu-brand::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber-hi);transform:translateY(-1px)}
.menu-close{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--muted-dark);padding:10px 2px;
  transition:color 240ms var(--ease-out),transform 120ms var(--ease-move);
}
.menu-close:hover{color:var(--ivory-hi)}
.menu-close:active,.menu-close.is-pressed{transform:scale(.96)}
.menu-list{
  list-style:none;display:flex;flex-direction:column;gap:2px;
  margin-top:clamp(26px,7svh,64px);
}
.menu-list a{
  font-family:Fraunces,"Fraunces Fallback",Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 100;font-weight:640;letter-spacing:-.015em;
  font-size:clamp(34px,10vw,44px);line-height:1.3;color:var(--ivory-hi);
  text-decoration:none;display:inline-flex;align-items:baseline;gap:14px;
  padding:6px 0;transition:transform 120ms var(--ease-move);
}
.menu-list a:active,.menu-list a.is-pressed{transform:scale(.98)}
.menu-list a .micro{color:var(--muted-dark);letter-spacing:.12em}
.menu-list a[aria-current="page"]{color:var(--amber-hi)}
.menu-foot{
  margin-top:auto;padding-top:clamp(26px,6svh,48px);
  display:flex;flex-direction:column;gap:22px;align-items:flex-start;
}
.menu-foot .btn-primary{width:min(100%,340px)}
.menu-foot .lang-pill{position:static;background:rgba(251,248,241,.06);border-color:var(--line-dark)}
.menu-foot .lang-btn{color:var(--muted-dark)}
.menu-foot .lang-btn:hover{color:var(--ivory-hi)}
.menu-foot .lang-btn.is-active{color:var(--ink);background:var(--ivory-hi)}
.menu-tel{color:var(--muted-dark);text-decoration:none;font-size:15px}
.menu-tel strong{color:var(--ivory-hi);font-weight:500}
/* staggered entrance - first open only (js gates with .stagger) */
.nav-overlay.stagger .menu-list li{animation:rise 600ms var(--ease-out) backwards;animation-delay:calc(var(--i,0)*70ms)}
.nav-overlay.stagger .menu-foot{animation:fadein 600ms var(--ease-out) 360ms backwards}
body.menu-open{overflow:hidden}

@media (max-width: 1100px){
  .nav-tag{display:none}
}
@media (max-width: 920px){
  :root{--navh:56px}
  .nav-links,.nav-cta,.site-nav .lang-pill{display:none}
  .nav-menu-btn{display:inline-block;margin-left:auto}
}

/* ---- footer nav row + license line (identical on all pages) ---- */
.foot-nav{
  margin-top:30px;display:flex;justify-content:center;align-items:center;
  gap:10px 26px;flex-wrap:wrap;
}
.foot-nav a{
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.6;
  color:var(--muted-dark);text-decoration:none;
  transition:color 240ms var(--ease-out),transform 120ms var(--ease-move);
}
.foot-nav a:hover{color:var(--ivory-hi)}
.foot-nav a:active,.foot-nav a.is-pressed{transform:scale(.96)}
.foot-nav a[aria-current="page"]{color:var(--ivory-hi)}
.foot-legal .foot-licno{display:block;margin-top:6px}
.foot-legal-links{display:block;margin-top:10px}
.foot-legal-links a{color:var(--muted-dark);text-decoration:underline;text-underline-offset:3px}
.foot-legal-links a:hover{color:var(--ivory-hi)}
.foot-legal-links a + a{margin-left:16px}

/* ---- quiet text link (gallery "See all projects", per-section CTAs) ---- */
.txtlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:Inter,"Inter Fallback",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.5;
  color:var(--amber);text-decoration:none;
  transition:color 240ms var(--ease-out),transform 120ms var(--ease-move);
}
.txtlink::after{
  content:"";width:22px;height:1px;background:var(--amber);opacity:.85;
  transition:width 240ms var(--ease-out);
}
.txtlink:hover::after{width:34px}
.txtlink:active,.txtlink.is-pressed{transform:scale(.96)}
.gallery .gal-more{display:flex;justify-content:center;margin-top:clamp(56px,7vw,88px)}
.gallery .txtlink{color:var(--amber-hi)}
.gallery .txtlink::after{background:var(--amber-hi)}

@media (prefers-reduced-motion: reduce){
  .site-nav.nav-home{transform:none;transition:opacity 200ms linear}
  .nav-overlay.stagger .menu-list li,.nav-overlay.stagger .menu-foot{animation:none}
  .nav-brand,.nav-link,.nav-cta,.nav-menu-btn,.menu-close,.foot-nav a,.txtlink{transition:none}
}
@media print{
  .site-nav,.nav-overlay{display:none !important}
}