/* ============================================================
   Novaclad — novaclad.com
   Design language: Verolio reference + Novaclad tokens.
   Rules: square corners, light weights only (never bold),
   white/light dominant, full-bleed photography, generous air.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Bitter';src:url('../fonts/bitter-latin-200-normal.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url('../fonts/bitter-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url('../fonts/bitter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url('../fonts/bitter-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Bitter';src:url('../fonts/bitter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-text-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-text-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --white:#ffffff;
  --paper:#fbfaf6;      /* barely-there warm white — the dominant canvas */
  --cream:#f1edde;      /* brand cream, now an accent not the base */
  --cream-deep:#e8e3d3;
  --forest:#1c2822;
  --forest-mid:#36553e;
  --yellow:#fbc31f;

  --ink:#1c2822;
  --ink-soft:#4f5a52;   /* AA on white and cream */
  --ink-faint:#8d968f;  /* decorative only — never body copy */
  --hair:rgba(28,40,34,.13);
  --hair-light:rgba(255,255,255,.26);

  --serif:'Bitter',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --pad:clamp(1.5rem,6vw,6rem);
  --max:1320px;
  --max-text:960px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.15,1);
  --slow:1100ms;

  --radius:0;           /* square. everywhere. */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:hidden on the body alone still leaves the page pannable a few
   pixels sideways on iOS, because a hidden box is a scroll container the
   browser is happy to scroll. clip is not a scroll container, so the drift
   goes away. hidden is declared first as the fallback for older engines. */
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  overflow-x:hidden;overflow-x:clip;
}
body{
  margin:0;
  max-width:100%;
  overscroll-behavior-x:none;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .22vw,1.09rem);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
strong,b{font-weight:500}          /* nothing on this page is bold */
::selection{background:var(--yellow);color:var(--forest)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-text{width:100%;max-width:var(--max-text);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.section-pad{padding-block:clamp(6rem,14vw,12rem)}
.section-pad-sm{padding-block:clamp(4.5rem,9vw,7rem)}
.bg-paper{background:var(--paper)}
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}

/* ---------- Type scale ---------- */
.h-display{
  font-size:clamp(2.35rem,5.6vw,5.2rem);
  font-weight:200;
  letter-spacing:-.035em;
  line-height:1.04;
}
/* The hero headline sits below the lockup, so it runs smaller than a
   standalone display line — the section should read calm, not shouty. */
.hero h1.h-display{font-size:clamp(2.05rem,4.35vw,3.9rem);line-height:1.08}
.h1{font-size:clamp(2.1rem,4.8vw,4.2rem);font-weight:300;letter-spacing:-.03em;line-height:1.06}
.h2{font-size:clamp(1.7rem,3.2vw,2.9rem);font-weight:300;letter-spacing:-.025em;line-height:1.12}
.h3{font-size:clamp(1.15rem,1.5vw,1.45rem);font-weight:400;letter-spacing:-.012em;line-height:1.25}
.h4{font-size:1.02rem;font-weight:400;letter-spacing:-.008em}

/* Roman + italic mixing is the signature — Bitter italic at the same weight */
em,.accent{font-style:italic;font-weight:inherit}

.lede{
  font-size:clamp(1.05rem,.95rem + .5vw,1.32rem);
  line-height:1.62;color:var(--ink-soft);font-weight:400;
}
.body-sm{font-size:.95rem;line-height:1.68;color:var(--ink-soft)}

/* The only place medium weight appears */
.label{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-soft);
  display:flex;align-items:center;gap:.85rem;margin:0 0 2rem;
}
.label::before{content:"";width:24px;height:1px;background:var(--yellow);flex:none}
.label.center{justify-content:center}
.on-dark .label{color:rgba(255,255,255,.82)}

/* ---------- Buttons — square, sentence case, no shouting ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.9rem;border-radius:var(--radius);
  font-family:var(--sans);font-size:.95rem;font-weight:500;
  letter-spacing:0;text-transform:none;
  transition:background-color 420ms var(--ease),color 420ms var(--ease),border-color 420ms var(--ease),opacity 420ms var(--ease);
}
.btn-primary{background:var(--yellow);color:var(--forest)}
.btn-primary:hover{background:#f5b800}
.btn-line{border:1px solid var(--hair);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-line-light{border:1px solid var(--hair-light);color:#fff}
.btn-line-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Text link with a hairline that draws in */
.link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;font-weight:400;position:relative;padding-bottom:.35rem;
}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.28;transition:opacity 420ms var(--ease)}
.link:hover::after{opacity:1}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.cta-note{font-size:.875rem;color:var(--ink-soft)}
.on-dark .cta-note{color:rgba(255,255,255,.72)}

/* ---------- Focus / skip ---------- */
:focus-visible{outline:1px solid var(--yellow);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:var(--forest);padding:.85rem 1.4rem}
.skip:focus{left:1rem;top:1rem}

/* ============================================================
   Header — sits over the imagery, no bar
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;height:88px;
  transition:background-color 600ms var(--ease),height 600ms var(--ease),border-color 600ms var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .wrap{display:flex;align-items:center;gap:2.5rem;width:100%}
.site-header.is-stuck{
  background:rgba(251,250,246,.92);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  height:72px;border-bottom-color:var(--hair);
}
.brand{display:flex;align-items:center;flex:none;position:relative;z-index:3}
.brand img{height:24px;width:auto;transition:opacity 400ms var(--ease)}
.brand .mark-dark{display:none}
.site-header.is-stuck .brand .mark-light{display:none}
.site-header.is-stuck .brand .mark-dark{display:block}

.site-nav{display:flex;align-items:center;gap:2.25rem;margin-left:auto}
.site-nav a{font-size:.95rem;font-weight:400;color:rgba(255,255,255,.9);position:relative;padding-block:.3rem}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width 450ms var(--ease)}
.site-nav a:hover::after{width:100%}
.site-header.is-stuck .site-nav a{color:var(--ink)}
.site-nav .btn{display:none}
.header-cta{padding:.7rem 1.35rem;font-size:.9rem}

.nav-toggle{display:none;margin-left:auto;color:#fff;padding:.5rem;position:relative;z-index:3}
.site-header.is-stuck .nav-toggle{color:var(--ink)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"]{color:var(--ink)}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

@media (max-width:960px){
  .site-nav{
    position:fixed;inset:0;background:var(--paper);
    flex-direction:column;justify-content:center;gap:1.75rem;
    margin:0;opacity:0;visibility:hidden;pointer-events:none;z-index:2;
    transition:opacity 480ms var(--ease),visibility 0s linear 480ms;
  }
  .site-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s}
  .site-nav a,.site-header.is-stuck .site-nav a{color:var(--ink);font-size:1.35rem;font-family:var(--serif);font-weight:300}
  .site-nav .btn{display:inline-flex}
  .nav-toggle{display:block}
  .header-cta{display:none}
}

/* ---------- The menu overlay vs. the frosted ribbon ----------
   A backdrop-filter makes the element a containing block for any fixed
   descendant. Once the header went .is-stuck, the full-screen nav stopped
   resolving against the viewport and collapsed into the 72px ribbon —
   the links piled on top of the wordmark and nothing was tappable.
   The filter comes off for as long as the menu is open; the nav's own
   opaque panel is doing the covering at that point anyway. */
body.nav-open .site-header,
body.nav-open .site-header.is-stuck{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
/* the wordmark is normally driven to zero opacity by the hero hand-off, so
   opening the menu at the top of the page would leave the panel unbranded */
body.nav-open .site-header .brand{
  opacity:1 !important;transform:none !important;pointer-events:auto;
}
body.nav-open .brand .mark-light{display:none}
body.nav-open .brand .mark-dark{display:block}
body.nav-open .nav-toggle{color:var(--ink)}

/* ============================================================
   Full-bleed photographic panels — the structural workhorse
   ============================================================ */
.panel{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:clip;
  background:var(--forest);
  color:#fff;
  isolation:isolate;
}
.panel--center{align-items:center}
.panel--short{min-height:76svh}
.panel h1,.panel h2,.panel h3,
.stack-sticky h1,.stack-sticky h2,.stack-sticky h3{color:#fff}

.panel-media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.panel-media img{
  position:relative;z-index:1;      /* must paint ABOVE the absolutely-positioned LQIP */
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
/* The fade is gated on html.js — with JS off, images are simply visible. */
.js .panel-media img{opacity:0;transition:opacity 1200ms var(--ease-soft)}
.js .panel-media img.is-loaded{opacity:1}
/* low-quality placeholder sits behind so there is never a flash of empty */
.js .panel-media img.is-loaded ~ .x-none{}
.panel-media::before{
  content:"";position:absolute;inset:0;
  background-image:var(--lqip);background-size:cover;background-position:center;
  filter:blur(18px);transform:scale(1.06);
}
.panel-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(28,40,34,.78) 0%,rgba(28,40,34,.4) 42%,rgba(28,40,34,.1) 72%,rgba(28,40,34,.3) 100%);
}
.panel-scrim--soft{background:linear-gradient(to top,rgba(28,40,34,.6) 0%,rgba(28,40,34,.26) 48%,rgba(28,40,34,.06) 80%,rgba(28,40,34,.24) 100%)}
.panel-scrim--side{background:linear-gradient(100deg,rgba(28,40,34,.86) 0%,rgba(28,40,34,.58) 46%,rgba(28,40,34,.16) 82%)}
/* framing overrides where the subject sits badly behind the copy */
.panel-media--right img{object-position:78% 34%}
.panel .wrap{position:relative;z-index:2;padding-block:clamp(4rem,10vh,8rem)}

/* Ken Burns only on the hero, and only when motion is welcome */
.js .hero .panel-media img.is-loaded{animation:drift 30s var(--ease-soft) infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}}

/* ---------- Hero lockup -> ribbon hand-off ----------
   At rest the wordmark lives large in the feature area and the ribbon has
   none. As you scroll the feature lockup fades DOWN and out while the ribbon
   mark fades UP and in, smaller. Driven by --logo-p (0 at top, 1 once the
   hand-off is complete), set once per frame in the scroll loop.
   Without JS, --logo-p never changes: both marks simply sit visible. */
.hero-lockup{
  width:min(335px,50vw);                                  /* 22% down from 430px */
  margin-bottom:clamp(4rem,13.5vh,9.25rem);               /* pushes it up, opens the gap to the headline */
  transform-origin:left bottom;
}
.hero-lockup img{width:100%;height:auto}
.js .hero-lockup{
  opacity:calc(1 - var(--logo-p,0));
  transform:translate3d(0,calc(var(--logo-p,0) * 26px),0);
  will-change:opacity,transform;
}
.js .site-header .brand{
  opacity:var(--logo-p,0);
  transform:translate3d(0,calc((1 - var(--logo-p,0)) * -12px),0);
  will-change:opacity,transform;
}
.js .site-header .brand[data-hidden="1"]{pointer-events:none}

/* ---------- Hero layout: copy left, device on its own layer ----------
   The device sits in an absolutely-positioned layer pinned to the bottom
   of the panel rather than in the content grid. That lets it be far
   larger than the copy column without stretching the grid row or pushing
   the headline around — it simply crops at the section's bottom edge. */
/* tighter than other panels: the hero must land at exactly one
   viewport so the device's base sits on the section's bottom edge */
.hero .wrap{padding-block:clamp(2.25rem,5vh,4rem)}
.hero-copy{max-width:min(60%,700px);min-width:0}
.device-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.device-layer > .wrap{
  height:100%;display:flex;align-items:flex-end;justify-content:flex-end;
  padding-block:0;
}
@media (max-width:1000px){.device-layer{display:none}}
/* The three mockups share identical hand/phone registration, so a plain
   crossfade reads as the screen changing rather than the image swapping.
   The box is height-capped to the viewport and clips: the phone keeps its
   top and the wrist runs off the bottom of the section. */
.hero-device{
  --dev-w:min(420px,32vw);
  position:relative;width:var(--dev-w);
  height:min(calc(100svh - 96px), calc(var(--dev-w) * 1.7544));
  overflow:hidden;
  filter:drop-shadow(0 40px 60px rgba(12,18,15,.55));
  pointer-events:none;
}
.hero-device img{position:absolute;top:0;left:0;width:100%;height:auto}
.js .hero-device img{opacity:0;transition:opacity 900ms var(--ease-soft)}
.js .hero-device img.is-showing{opacity:1}
html:not(.js) .hero-device img ~ img{display:none}
.js .hero-device{animation:deviceIn 1400ms var(--ease-soft) 900ms both}
@keyframes deviceIn{from{opacity:0;transform:translate3d(0,54px,0)}to{opacity:1;transform:none}}

@media (max-width:1000px){
  .hero-copy{max-width:none}
}

/* ---------- Hero ---------- */
.hero h1{max-width:17ch}
.hero-sub{
  margin-top:1.75rem;max-width:40ch;
  font-size:clamp(.98rem,.93rem + .26vw,1.09rem);line-height:1.68;
  color:rgba(255,255,255,.88);
}
.hero-cta{margin-top:2.25rem}
.hero-meta{
  margin-top:clamp(1.75rem,4vh,3rem);padding-top:1.5rem;
  border-top:1px solid var(--hair-light);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;max-width:820px;
}
.hero-meta dt{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.025em;color:#fff;line-height:1}
.hero-meta dd{margin:.6rem 0 0;font-size:.8rem;color:rgba(255,255,255,.72);line-height:1.45}
/* ============================================================
   The hero on a phone
   A 16:9 photograph stretched over a whole portrait viewport shows a narrow
   vertical slice of itself and puts busy detail — the flowers, the glassware
   — directly behind every line of body copy. So on a phone the photograph
   becomes a band across the top instead: the lockup and the headline sit in
   its quiet upper air, the image dissolves into the section's own forest
   ground, and the sub, buttons and figures live on flat colour below it
   where nothing competes with them.
   ============================================================ */
@media (max-width:680px){
  .hero{
    min-height:0;                        /* height now comes from the content */
    align-items:flex-start;
    background:var(--forest);
  }
  .hero .panel-media{
    inset:0 0 auto 0;
    height:var(--hero-img,56svh);
    transform:none !important;           /* parallax would open a gap below it */
  }
  .hero .panel-media img{height:100%;object-position:center 42%}
  /* The scrim doubles as the dissolve: transparent enough at the top to read
     as a photograph, fully opaque forest by the bottom edge so there is no
     visible seam where the image stops. */
  .hero .panel-scrim{
    inset:0 0 auto 0;
    height:var(--hero-img,56svh);
    background:linear-gradient(to bottom,
      rgba(28,40,34,.58) 0%,
      rgba(28,40,34,.44) 30%,
      rgba(28,40,34,.60) 62%,
      rgba(28,40,34,.92) 88%,
      rgba(28,40,34,1)   100%);
  }
  .hero .wrap{padding-block:0 clamp(3rem,7vh,4.5rem)}

  .hero-lockup{
    width:min(234px,58vw);
    margin-top:clamp(3.25rem,7.6vh,4.5rem);   /* sits just under the ribbon */
    margin-bottom:clamp(3rem,7vh,4.5rem);     /* opens air before the headline */
  }
  .hero h1.h-display{max-width:none}
  .hero-sub{margin-top:clamp(1.75rem,4.5vh,2.75rem)}

  /* three facts as a stacked list, hairline-separated */
  .hero-meta{
    grid-template-columns:1fr;gap:0;max-width:none;
    margin-top:clamp(1.5rem,3.5vh,2.5rem);padding-top:0;border-top:0;
  }
  .hero-meta > div{
    padding-block:1.05rem;
    border-top:1px solid var(--hair-light);
  }
  .hero-meta > div:last-child{padding-bottom:0}
  .hero-meta dd{margin-top:.4rem}
}
/* Short phones get a shallower band so the headline still clears it. */
@media (max-width:680px) and (max-height:700px){
  .hero{--hero-img:64svh}
}

.scroll-cue{
  position:absolute;right:var(--pad);bottom:clamp(2rem,5vh,3rem);z-index:3;
  display:flex;align-items:center;gap:.85rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.scroll-cue .rail{width:1px;height:56px;background:rgba(255,255,255,.26);position:relative;overflow:hidden}
.scroll-cue .rail::after{content:"";position:absolute;inset:0 0 auto;height:20px;background:var(--yellow);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}62%,100%{transform:translateY(280%)}}
@media (max-width:960px){.scroll-cue{display:none}}
@media (min-width:1001px){.scroll-cue{display:none}}

/* ============================================================
   Dealer band (phase 2)
   ============================================================ */
.dealer-band{display:none;background:var(--cream);color:var(--ink);border-bottom:1px solid var(--hair)}
.dealer-band.is-active{display:block}
.dealer-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;padding-block:1.15rem}
.dealer-band p{font-size:.95rem;color:var(--ink-soft)}
.dealer-band strong{color:var(--ink)}
.dealer-band .dealer-logo{height:22px;width:auto}
.dealer-band .dealer-link{margin-left:auto;font-size:.9rem;border-bottom:1px solid var(--hair);padding-bottom:2px}
.dealer-band .dealer-link:hover{border-color:var(--ink)}

/* ============================================================
   Editorial statement — word-by-word scroll reveal
   ============================================================ */
.editorial{text-align:center}
.editorial .statement{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.7rem,4.1vw,3.4rem);
  line-height:1.24;letter-spacing:-.028em;
  max-width:22ch;margin-inline:auto;
}
.editorial .statement.wide{max-width:30ch}
.editorial .lede{margin-top:2.5rem;max-width:56ch;margin-inline:auto}
.editorial .rule{width:1px;height:64px;background:var(--hair);margin:3.5rem auto 0}

.js .word{color:var(--ink-faint);transition:color 600ms var(--ease)}
.js .word.lit{color:var(--ink)}
.js .panel .word,.js .on-dark .word{color:rgba(255,255,255,.34)}
.js .panel .word.lit,.js .on-dark .word.lit{color:#fff}

/* ============================================================
   Steps — hairline rows, no cards, no shadows
   ============================================================ */
/* The highlight bleeds past the text column on both sides, so the row
   reads as a lit band rather than a box butted against the numerals. */
.steps{--step-pad:clamp(1rem,2.2vw,2rem);margin-inline:calc(-1 * var(--step-pad));border-top:1px solid var(--hair)}
.step{
  display:grid;grid-template-columns:6rem 1fr 1.15fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:baseline;
  padding-block:clamp(2.5rem,4.5vw,3.75rem);
  padding-inline:var(--step-pad);
  border-bottom:1px solid var(--hair);
  transition:background-color 600ms var(--ease);
}
.step:hover{background:var(--white)}
@media (max-width:820px){
  .step{grid-template-columns:3.5rem 1fr;gap:1rem 1.5rem}
  .step .step-body{grid-column:2}
}
.step .num{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  color:var(--yellow);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  transition:transform 520ms var(--ease);
}
/* nudge right as the row lights, so the numeral gains a little left air */
.step:hover .num{transform:translateX(6px)}
.step h3{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:300;letter-spacing:-.02em}
.step .step-body{color:var(--ink-soft);font-size:.98rem;line-height:1.7}

/* ============================================================
   Split (image + text)
   ============================================================ */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
@media (max-width:900px){.split-grid{grid-template-columns:1fr}}
.split-media{position:relative;overflow:hidden;background:var(--cream-deep)}
/* height:auto is required, not cosmetic. These <img> tags carry width/height
   attributes, which map to a presentational height declaration — and
   aspect-ratio is ignored whenever height is definite. Without it the box
   silently fell back to the file's own 1400x781 and no crop happened at all. */
.split-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:opacity 1000ms var(--ease-soft),transform 1.6s var(--ease)}
.js .split-media img{opacity:0}
.js .split-media img.is-loaded{opacity:1}
.split-media:hover img{transform:scale(1.03)}
/* The 4:5 crop works beside a text column. Stacked on a phone it throws away
   everything the photograph is about — the newspaper, the coffee, the two
   pairs of hands are all on the left — and leaves a field of blank marble.
   Wider, and framed left. */
@media (max-width:900px){
  .split-media img{aspect-ratio:16/10;object-position:24% 50%}
}
.split-body .h2{margin-bottom:1.75rem}
.split-body p + p{margin-top:1.25rem}

.checklist{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--hair)}
.checklist li{
  padding-block:1.05rem;border-bottom:1px solid var(--hair);
  font-size:.98rem;color:var(--ink-soft);
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
}
.checklist li::before{content:"";width:5px;height:5px;background:var(--yellow);translate:0 -.2em}

/* ============================================================
   Benefit grid — hairlines only
   ============================================================ */
.benefits{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);
}
@media (max-width:900px){.benefits{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.benefits{grid-template-columns:1fr}}
.benefit{
  padding:clamp(2rem,3.5vw,3rem) clamp(1.5rem,2.5vw,2.5rem);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background-color 600ms var(--ease);
}
.benefit:hover{background:var(--white)}
.benefit .mark{width:24px;height:24px;color:var(--forest-mid);margin-bottom:2rem}
.benefit .mark svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.benefit h3{margin-bottom:.85rem}
.benefit p{font-size:.94rem;line-height:1.68;color:var(--ink-soft)}

/* ============================================================
   App showcase — devices over a photographic panel
   ============================================================ */
.devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:clamp(3rem,6vw,5rem)}
@media (max-width:860px){.devices{grid-template-columns:1fr;max-width:320px;margin-inline:auto;gap:3.5rem}}
.device{text-align:left}
.phone{
  position:relative;width:100%;max-width:264px;
  aspect-ratio:1320/2868;padding:7px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(2px);
}
.phone .screen{position:relative;width:100%;height:100%;overflow:hidden;background:rgba(28,40,34,.4)}
.phone .screen img{width:100%;height:100%;object-fit:cover;transition:opacity 900ms var(--ease-soft)}
.js .phone .screen img{opacity:0}
.js .phone .screen img.is-loaded{opacity:1}
.device figcaption{margin-top:1.75rem;max-width:30ch}
.device figcaption strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:300;letter-spacing:-.015em;color:#fff}
.device figcaption span{display:block;margin-top:.6rem;font-size:.9rem;color:rgba(255,255,255,.76);line-height:1.6}

/* ============================================================
   Materials
   ============================================================ */
.mat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(3rem,6vw,4.5rem)}
@media (max-width:880px){.mat-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.mat-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep)}
.mat-img img{width:100%;height:100%;object-fit:cover;transition:opacity 1000ms var(--ease-soft),transform 1.6s var(--ease)}
.js .mat-img img{opacity:0}
.js .mat-img img.is-loaded{opacity:1}
.mat:hover .mat-img img{transform:scale(1.04)}
.mat-body{padding-top:1.5rem}
.mat-body .kind{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);font-weight:500}
.mat-body h3{margin:.85rem 0 .75rem;font-size:1.35rem;font-weight:300}
.mat-body p{font-size:.94rem;line-height:1.68;color:var(--ink-soft)}
.mat-note{margin-top:clamp(3rem,6vw,4rem);font-size:.92rem;color:var(--ink-soft);max-width:58ch}
.mat-attrib{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hair);
  font-size:.82rem;line-height:1.6;color:var(--ink-faint);max-width:66ch;
}
.mat-attrib .link{font-size:.82rem;color:var(--ink-soft)}

/* ============================================================
   FAQ — the same hairline-row language as the steps.
   Everything stays visible: an accordion would hide the answers
   from the extraction that makes this section worth having.
   ============================================================ */
.faq{--faq-pad:clamp(1rem,2.2vw,2rem);margin-inline:calc(-1 * var(--faq-pad));border-top:1px solid var(--hair)}
.faq-item{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding-block:clamp(2.25rem,4vw,3.25rem);
  padding-inline:var(--faq-pad);
  border-bottom:1px solid var(--hair);
  transition:background-color 600ms var(--ease);
}
.faq-item:hover{background:var(--white)}
.faq-item h3{
  font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.22;max-width:22ch;
}
.faq-a p{font-size:.98rem;line-height:1.72;color:var(--ink-soft);max-width:62ch}
.faq-a p + p{margin-top:1rem}
@media (max-width:820px){
  .faq-item{grid-template-columns:1fr;gap:1rem}
}

/* ============================================================
   Accuracy ladder
   ============================================================ */
.ladder{border-top:1px solid var(--hair)}
.rung{
  display:grid;grid-template-columns:minmax(9rem,14vw) 1fr;
  gap:clamp(1.5rem,5vw,5rem);align-items:start;
  padding-block:clamp(2.75rem,5vw,4.25rem);
  border-bottom:1px solid var(--hair);
}
@media (max-width:780px){.rung{grid-template-columns:1fr;gap:1.25rem}}
.rung .pct{
  font-family:var(--serif);font-weight:200;letter-spacing:-.04em;
  font-size:clamp(3rem,7.5vw,5.5rem);line-height:.9;color:var(--ink);
}
.rung .pct sup{font-size:.34em;vertical-align:super;letter-spacing:0;color:var(--ink-faint)}
.rung h3{font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:300;margin-bottom:1rem}
.rung p{font-size:.99rem;line-height:1.72;color:var(--ink-soft);max-width:62ch}
.rung .meter{margin-top:2rem;height:1px;background:var(--hair);position:relative;overflow:hidden}
.rung .meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--yellow);transition:width 1.8s var(--ease-soft)}
.rung.is-visible .meter i{width:var(--fill,0%)}

.safety{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding:clamp(2rem,4vw,3.25rem);
  background:var(--cream);
  border-left:1px solid var(--yellow);
}
.safety h3{font-size:1.35rem;font-weight:300;margin-bottom:1.1rem}
.safety p{font-size:.99rem;line-height:1.72;color:var(--ink-soft);max-width:66ch}
.safety p + p{margin-top:1.1rem}

/* what a work order delivers — hairline rows, same grammar as the perks */
.deliver{margin-top:clamp(3.5rem,7vw,5rem)}
.deliver h3{
  font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:300;
  letter-spacing:-.02em;margin-bottom:clamp(1.5rem,3vw,2.25rem);max-width:26ch;
}
.deliver ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.deliver li{
  display:grid;grid-template-columns:minmax(12rem,.55fr) 1fr;
  gap:1rem clamp(1.5rem,4vw,4rem);align-items:baseline;
  padding-block:clamp(1.5rem,2.6vw,2.1rem);border-bottom:1px solid var(--hair);
}
@media (max-width:700px){.deliver li{grid-template-columns:1fr;gap:.4rem}}
.deliver strong{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.012em;color:var(--ink)}
.deliver span{font-size:.95rem;line-height:1.68;color:var(--ink-soft);max-width:56ch}
.deliver-pilot{
  margin-top:1.75rem;font-size:.92rem;line-height:1.7;color:var(--ink-soft);max-width:74ch;
}
.pilot-tag{
  display:inline-block;margin-right:.75rem;padding:.25rem .6rem;
  font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest);border:1px solid var(--yellow);
}

.control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:clamp(3.5rem,7vw,5rem)}
@media (max-width:900px){.control{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.control{grid-template-columns:1fr}}
.control div{padding:clamp(1.75rem,3vw,2.5rem);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.control h4{font-family:var(--serif);font-size:1.1rem;font-weight:300;letter-spacing:-.015em;margin-bottom:.75rem}
.control p{font-size:.92rem;line-height:1.68;color:var(--ink-soft)}

/* ---------- Founder-Partner ---------- */
.founder{
  margin-top:clamp(4.5rem,9vw,7rem);padding-top:clamp(3.5rem,6vw,5rem);
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
@media (max-width:900px){.founder{grid-template-columns:1fr}}
.perks{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--hair)}
.perks li{padding-block:1.4rem;border-bottom:1px solid var(--hair)}
.perks strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.4rem}
.perks span{display:block;font-size:.93rem;color:var(--ink-soft);line-height:1.65}
.founder-card{background:var(--white);border:1px solid var(--hair);padding:clamp(2rem,3.5vw,2.75rem)}
.founder-card h3{font-size:1.5rem;font-weight:300;margin-bottom:1rem}
.founder-card p{font-size:.97rem;color:var(--ink-soft);line-height:1.7}
.founder-card .btn{margin-top:2rem;width:100%}
.founder-card .fine{margin-top:1.5rem;font-size:.85rem;color:var(--ink-soft);line-height:1.6}

/* ============================================================
   Trust
   ============================================================ */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
@media (max-width:900px){.trust-grid{grid-template-columns:1fr}}
.partner-mark{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem}
.partner-mark img{height:26px;width:auto}
.partner-mark span{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);font-weight:500}
.trust-media{overflow:hidden;background:var(--cream-deep)}
.trust-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:opacity 1000ms var(--ease-soft)}
.js .trust-media img{opacity:0}
.js .trust-media img.is-loaded{opacity:1}

/* ============================================================
   Oversized wordmark moment
   ============================================================ */
.bigmark{background:var(--forest);overflow:clip;padding-block:clamp(4rem,9vw,7rem)}
.bigmark img{width:100%;max-width:none;opacity:.96}
.bigmark .wrap{overflow:clip}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--forest);color:rgba(255,255,255,.74);padding-block:clamp(4rem,8vw,6rem) 2.5rem}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,4rem);border-bottom:1px solid var(--hair-light)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}.foot-brand{grid-column:span 1}}
.foot-brand img{height:44px;width:auto;margin-bottom:2rem}
.foot-brand p{font-size:.95rem;line-height:1.7;max-width:32ch}
.foot-brand .btn{margin-top:2rem}
.foot-col h4{font-family:var(--sans);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.58);margin-bottom:1.5rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.foot-col a{font-size:.95rem;transition:color 400ms var(--ease)}
.foot-col a:hover{color:#fff}
/* One line, always: copyright left, Privacy and Terms hard right. */
.foot-bottom{
  display:flex;flex-wrap:nowrap;gap:1rem;align-items:baseline;
  padding-top:2rem;font-size:.85rem;color:rgba(255,255,255,.58);
}
.foot-bottom > span:first-child{min-width:0}
.foot-bottom .legal,
.foot-bottom .legal-links{margin-left:auto;display:flex;gap:1.5rem;flex:none;white-space:nowrap}
/* the homepage bottom bar carries two links and stays on one line; the legal
   pages carry four, one of which is a sentence, so they are allowed to wrap */
.legal-page .foot-bottom{flex-wrap:wrap}
.legal-page .foot-bottom .legal-links{white-space:normal;flex:1 1 auto;flex-wrap:wrap;gap:.6rem 1.5rem}
@media (max-width:700px){
  .legal-page .foot-bottom .legal-links{margin-left:0}
}
@media (max-width:420px){
  .foot-bottom{font-size:.78rem;gap:.75rem}
  .foot-bottom .legal,
  .foot-bottom .legal-links{gap:1.1rem}
}

/* ============================================================
   Reveal on scroll — gated on html.js so no-JS shows everything
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--slow) var(--ease-soft),transform var(--slow) var(--ease-soft)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal-delay="1"]{transition-delay:120ms}
.js [data-reveal-delay="2"]{transition-delay:240ms}
.js [data-reveal-delay="3"]{transition-delay:360ms}
.js [data-reveal-delay="4"]{transition-delay:480ms}

/* Hero entrance — CSS animation, never JS-gated (rAF does not run in
   background tabs, which previously left the headline invisible) */
@keyframes lineUp{from{transform:translateY(104%)}to{transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block}
.js .hero-lockup img{animation:riseIn 1100ms var(--ease-soft) both}
.js .hero h1 .line > span{animation:lineUp 1250ms var(--ease-soft) 200ms both}
.js .hero h1 .line:nth-child(2) > span{animation-delay:340ms}
.js .hero h1 .line:nth-child(3) > span{animation-delay:480ms}
.js .hero .hero-sub{animation:riseIn 1000ms var(--ease-soft) 660ms both}
.js .hero .hero-cta{animation:riseIn 1000ms var(--ease-soft) 790ms both}
.js .hero .hero-meta{animation:riseIn 1000ms var(--ease-soft) 920ms both}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0ms !important}
  .js .hero .panel-media img.is-loaded{animation:none}
  .panel-media{transform:none !important}
  .js [data-reveal],.js .hero h1 .line > span,.js .hero .hero-sub,.js .hero .hero-cta,.js .hero .hero-meta{animation:none !important;opacity:1 !important;transform:none !important}
  .js .hero-lockup img,.js .hero-device{animation:none !important;opacity:1 !important;transform:none !important}
  .js .hero-device img{transition:none}
  .js .hero-lockup{transform:none !important}
  .js .site-header .brand{transform:none !important}
  .js .word{color:var(--ink) !important}
  /* .on-dark has to be listed too. The fabricator panel is .hold-inner.on-dark,
     not .panel — without it, every visitor with Reduce Motion switched on saw
     "The number holds" in forest green over a sunlit photograph. */
  .js .panel .word,
  .js .on-dark .word,
  .js .hold-inner .word{color:#fff !important}
  .panel-media img,.split-media img,.mat-img img,.trust-media img,.phone .screen img{opacity:1 !important}
}


/* ============================================================
   Sample estimate — overlays the transparency image
   ============================================================ */
.split-media{position:relative}
.estimate{
  position:absolute;right:-1px;bottom:-1px;z-index:2;margin:0;
  width:min(340px,82%);
  background:var(--paper);border:1px solid var(--hair);
  padding:1.5rem 1.5rem 1.35rem;
  box-shadow:0 30px 60px -34px rgba(12,18,15,.45);
}
.estimate .est-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.85rem;margin-bottom:.35rem;border-bottom:1px solid var(--hair);
}
.estimate .est-kicker{
  font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);
}
.estimate .est-live{
  font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:.45rem;
}
.estimate .est-live::before{content:"";width:5px;height:5px;background:var(--yellow)}
.estimate .est-title{
  font-family:var(--serif);font-weight:300;font-size:1.02rem;letter-spacing:-.015em;
  line-height:1.3;margin-bottom:.9rem;
}
.estimate dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:0 1rem}
.estimate dt,.estimate dd{
  margin:0;padding-block:.44rem;font-size:.78rem;line-height:1.35;
  border-bottom:1px solid rgba(28,40,34,.07);
}
.estimate dt{color:var(--ink-soft)}
.estimate dd{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.estimate dt span{display:block;font-size:.68rem;color:var(--ink-faint)}
.estimate .est-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--hair);
}
.estimate .est-total span{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);font-weight:500}
.estimate .est-total strong{font-family:var(--serif);font-weight:300;font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.estimate .est-note{margin-top:.85rem;font-size:.64rem;line-height:1.5;color:var(--ink-faint)}

@media (max-width:900px){
  .estimate{position:static;width:100%;margin-top:-1px;box-shadow:none}
}

/* ============================================================
   Pinned app section
   A tall track with a sticky pane. Copy and screenshot both move
   as clean vertical slides inside clipped windows — nothing fades
   across anything else, and nothing overlaps at partial opacity.
   ============================================================ */
.stack{position:relative}
.stack-track{height:320svh}
.stack-sticky{
  position:sticky;top:0;height:100svh;overflow:clip;
  display:flex;align-items:center;background:var(--forest);color:#fff;isolation:isolate;
}
.stack-sticky > .wrap{position:relative;z-index:2;width:100%}
.stack-sticky .panel-scrim{background:linear-gradient(100deg,rgba(20,30,25,.93) 0%,rgba(20,30,25,.8) 46%,rgba(20,30,25,.58) 100%)}
.stack-grid{display:block}
.stack-copy{max-width:min(52%,620px)}

.stack-copy .h2{margin-bottom:clamp(2rem,4vw,3rem);max-width:18ch}

/* clipped window — the step copy slides through it */
.stack-steps{position:relative;height:12.5rem;overflow:hidden}
.stack-step{
  position:absolute;inset:0;
  transform:translateY(100%);
  transition:transform 820ms var(--ease-soft);
  pointer-events:none;
}
.stack-step.is-current{transform:translateY(0);pointer-events:auto}
.stack-step.is-past{transform:translateY(-100%)}
.stack-step .step-n{
  display:block;font-size:.65rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:1rem;
}
.stack-step h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-.02em;margin-bottom:.85rem}
.stack-step p{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.8);max-width:36ch}

.stack-rail{display:flex;gap:.5rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.stack-rail i{display:block;width:44px;height:1px;background:rgba(255,255,255,.26);position:relative;overflow:hidden}
.stack-rail i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--yellow);transition:width 480ms var(--ease-soft)}
.stack-rail i.on::after{width:100%}

/* the screenshot window — 4:5, same as every other image on the site.
   No frame, no border: the app's own cream ground reads as the card. */
.shots-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.shots-layer > .wrap{height:100%;display:flex;align-items:flex-end;justify-content:flex-end;padding-block:0}
.stack-shots{
  --dev-w:min(420px,32vw);            /* matched to the hero mockup exactly */
  position:relative;width:var(--dev-w);
  height:min(calc(100svh - 88px), calc(var(--dev-w) * 1.7544));
  overflow:hidden;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.6));
}
.shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 900ms var(--ease-soft)}
.shot,.shot img{will-change:opacity}
.shot.is-current{opacity:1}
.shot img{position:absolute;top:0;left:0;width:100%;height:auto}

/* No JS, or narrow: no pinning, everything simply listed. */
html:not(.js) .stack-track,
html:not(.js) .stack-sticky{height:auto;position:static}
html:not(.js) .stack-sticky{padding-block:clamp(4rem,9vw,7rem)}
html:not(.js) .stack-steps{height:auto;overflow:visible}
html:not(.js) .stack-step{position:static;transform:none;margin-bottom:2.25rem}
html:not(.js) .shots-layer{position:static;inset:auto}
html:not(.js) .shots-layer > .wrap{display:block;height:auto}
html:not(.js) .shot{position:static;opacity:1;margin-bottom:1.5rem}
html:not(.js) .shot img{position:static}
html:not(.js) .stack-shots{width:auto;height:auto;overflow:visible;filter:none}

/* ---------- The app section on a phone ----------
   Same behaviour as desktop, restacked: the pane pins, the hand and phone
   are anchored to the bottom edge, and one step of copy at a time occupies
   the air above them. Scrolling advances the copy and crossfades the
   screenshot underneath it to match.

   position:relative — not static — on the pane is load-bearing: the
   photographic layer inside is absolutely positioned, and with a static
   parent its containing block escapes to .stack, so the image bleeds up
   over the section above and overflow:clip cannot catch it. */
@media (max-width:960px){
  .stack-track{height:340svh}
  .stack-sticky{
    position:sticky;top:0;height:100svh;overflow:clip;
    display:block;padding-block:0;
  }
  .stack-sticky > .wrap{
    position:relative;z-index:3;
    padding-top:calc(72px + clamp(1rem,3.5vh,2rem));
  }
  .stack-grid{display:block}
  .stack-copy{max-width:none}
  .stack-copy .h2{
    font-size:clamp(1.5rem,6.4vw,2.1rem);
    max-width:none;margin-bottom:clamp(1.5rem,4vh,2.25rem);
  }
  .stack-steps{height:14.5rem;overflow:hidden}
  .stack-step{position:absolute;inset:0;margin:0}
  .stack-step p{max-width:none}
  .stack-rail{display:flex}
  .stack-sticky .cta-row{margin-top:clamp(1.5rem,3.5vh,2.25rem) !important}

  /* The device band, locked to the bottom of the pane. The band is taller
     than the artwork so the mockup can be anchored by its bottom edge —
     the wrist lands exactly on the section's bottom edge and the phone
     rides as high in the frame as the image allows. */
  .shots-layer{position:absolute;inset:auto 0 0 0;height:64svh;z-index:1}
  .shots-layer > .wrap{
    display:flex;height:100%;align-items:flex-end;justify-content:center;
    padding-inline:0;
  }
  /* The artwork is hand-to-bottom-edge, so with the image anchored by its
     base the only lever that lifts the phone up the frame is scale.

     The top edge is feathered with a mask rather than covered by a dark
     overlay. An overlay can only ever approach the ground colour — it never
     reaches it — so the clipped edge of the artwork stayed faintly visible
     as a hard horizontal seam straight across the section. Masking removes
     those pixels outright, so the device genuinely emerges out of the
     background with no line to catch. */
  .stack-shots{
    position:relative;width:min(338px,86vw);height:100%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.18) 12%,
      rgba(0,0,0,.62) 30%,
      rgba(0,0,0,.92) 44%,
      #000 56%);
    mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.18) 12%,
      rgba(0,0,0,.62) 30%,
      rgba(0,0,0,.92) 44%,
      #000 56%);
  }
  .shot{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--ease-soft)}
  .shot.is-current{opacity:1}
  .shot img{
    position:absolute;bottom:0;top:auto;left:0;width:100%;height:auto;
    /* knocked back so body copy can cross the screen and the hand without
       either one fighting the other */
    filter:brightness(.74) contrast(.94) saturate(.88);
  }
  /* With the artwork masked instead of overlaid, one uniform ground carries
     the copy — no second darkening layer to create a step. */
  .stack-sticky .panel-scrim{
    background:linear-gradient(to bottom,
      rgba(20,30,25,.93) 0%,
      rgba(20,30,25,.90) 45%,
      rgba(20,30,25,.86) 100%);
  }
}

/* ============================================================
   Sticky hold — the fabricator panel stays put while the section
   after it scrolls up over the top.
   ============================================================ */
/* A tall section with a viewport-height sticky pane inside. The pane —
   image, scrim and headline together — holds still for most of a screen
   of scrolling, then the next section rises over the top of it. Keeping
   the photograph inside the sticky box means it is always cropped to one
   viewport rather than stretched over the whole track. */
.hold{position:relative;min-height:190svh}
.hold-inner{
  position:sticky;top:0;height:100svh;overflow:clip;
  display:flex;align-items:center;
  background:var(--forest);color:#fff;isolation:isolate;
}
.hold-inner h1,.hold-inner h2,.hold-inner h3{color:#fff}
.hold .h-display{font-size:clamp(2.6rem,6.4vw,6rem)}
/* Centred white type over a bright photograph needs a flatter, deeper
   scrim than the bottom-weighted one the other panels use. */
.hold .panel-scrim{background:linear-gradient(to bottom,rgba(18,27,22,.62) 0%,rgba(18,27,22,.5) 45%,rgba(18,27,22,.66) 100%)}
/* Same containing-block trap as the app section: static would hand the
   absolutely-positioned photograph over to .hold, and it would then bleed
   out of the top and bottom of the section over the neighbours. */
@media (max-width:820px){
  .hold{min-height:0}
  .hold-inner{position:relative;height:auto;min-height:86svh;padding-block:clamp(4rem,10vh,6rem)}
  /* A 16:9 frame cropped to portrait shows about a third of its width, so
     the crop moves right to keep both figures in shot — and the scrim goes
     considerably deeper, because centred white type over a bright, sunlit
     kitchen needs more than the desktop gradient gives it. */
  .hold .panel-media img{object-position:64% 52%}
  .hold .panel-scrim{
    background:linear-gradient(to bottom,rgba(18,27,22,.62) 0%,rgba(18,27,22,.8) 42%,rgba(18,27,22,.8) 62%,rgba(18,27,22,.68) 100%);
  }
}

/* ============================================================
   Founders
   ============================================================ */
.founders{padding-block:calc(88px + clamp(3rem,7vw,6rem)) clamp(4rem,9vw,7rem)}
.founders .h1{max-width:20ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.f-photo{margin:0 0 clamp(3rem,6vw,4.5rem)}
.f-photo img{width:100%;height:auto;background:var(--cream-deep)}
.f-photo figcaption,.f-heads figcaption{
  margin-top:.9rem;font-size:.82rem;letter-spacing:.04em;color:var(--ink-faint);
}
.f-body h2{
  font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:300;letter-spacing:-.02em;
  margin:clamp(2.75rem,5vw,3.75rem) 0 1rem;padding-top:1.75rem;border-top:1px solid var(--hair);
}
.f-body p{margin-bottom:1.15rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.78;max-width:62ch}
.f-body strong{color:var(--ink);font-weight:500}
.f-body .lede{color:var(--ink-soft);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:56ch;margin-bottom:1rem}
.f-sig{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.75rem 2rem;
  background:var(--cream);border-left:1px solid var(--yellow);
  font-family:var(--serif);font-weight:300;font-size:1.15rem;line-height:1.6;color:var(--ink) !important;
  max-width:none !important;
}
.f-sig span{display:block;margin-top:1rem;font-family:var(--sans);font-size:.85rem;letter-spacing:.08em;color:var(--ink-soft)}
.f-heads{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  margin:clamp(3.5rem,7vw,5rem) 0;
}
.f-heads figure{margin:0}
.f-head-img{aspect-ratio:3/4;overflow:hidden;background:var(--cream-deep)}
.f-head-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.f-heads figcaption strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.1rem;letter-spacing:-.01em;color:var(--ink)}
.f-heads figcaption span{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
@media (max-width:560px){.f-heads{grid-template-columns:1fr}}
/* founders — photo + LinkedIn block */
.f-connect{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  margin:clamp(3.5rem,7vw,5rem) 0;
}
@media (max-width:700px){.f-connect{grid-template-columns:1fr}}
.f-connect-photo{margin:0;position:relative}
/* The joke, set as type rather than a caption. Bitter italic in forest so it
   can run off the photograph onto the page's own paper without losing itself —
   it crosses the sky, the photo's edge, and the whitespace in one gesture. */
.f-quote{position:static;margin:0;pointer-events:none}
/* the line breaks the photo's frame to the LEFT, into the page margin —
   paper there is empty, so the forest type never fights the photograph's
   subjects, and the frame-break reads instantly */
.f-quote p{
  position:absolute;top:6%;left:-18%;width:150%;z-index:2;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--forest);
}
/* attribution sits at the photo's foot, on the white rooftop deck */
.f-quote cite{
  position:absolute;left:7%;bottom:5%;right:44%;z-index:2;
  font-family:var(--sans);font-style:normal;font-size:.76rem;
  letter-spacing:.05em;line-height:1.5;color:var(--ink-soft);
}
@media (max-width:700px){
  .f-quote p{left:5%;width:100%;font-size:clamp(1.6rem,7.5vw,2rem);top:4%}
}
.f-connect-photo img{width:100%;height:auto;background:var(--cream-deep)}
.f-connect-body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.02em;margin-bottom:1rem}
.f-connect-body > p{color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:42ch}
.f-linkedin{list-style:none;margin:1.75rem 0 0;padding:0;border-top:1px solid var(--hair)}
.f-linkedin a{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
  padding-block:1.1rem;border-bottom:1px solid var(--hair);
  transition:background-color 400ms var(--ease);
}
.f-linkedin a:hover{background:var(--white)}
.f-linkedin svg{width:22px;height:22px;color:var(--forest-mid)}
.f-linkedin strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink)}
.f-linkedin em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-soft);margin-top:.15rem}
.f-li-note{margin-top:1.25rem;font-size:.8rem;line-height:1.6;color:var(--ink-faint);max-width:44ch}

.f-cta{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--hair)}
.f-fine{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--hair);
  font-size:.82rem;line-height:1.65;color:var(--ink-faint);max-width:66ch;
}
.f-fine a{border-bottom:1px solid var(--hair)}

/* ============================================================
   Legal pages
   ============================================================ */
.legal-page{background:var(--paper)}
.legal-page .site-header{
  background:rgba(251,250,246,.94);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--hair);height:72px;
}
.legal-page .site-nav a{color:var(--ink)}
.legal-page .brand .mark-light{display:none}
.legal-page .brand .mark-dark{display:block}
.legal-page .nav-toggle{color:var(--ink)}
.legal{padding-block:calc(88px + clamp(3rem,7vw,6rem)) clamp(4rem,9vw,7rem)}
.legal .h1{margin-bottom:clamp(2.5rem,5vw,3.5rem);max-width:18ch}
.legal-draft{
  background:var(--cream);border-left:1px solid var(--yellow);
  padding:1.35rem 1.5rem;margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.legal-draft p{font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.legal-draft p + p{margin-top:.5rem}
.legal-draft strong{color:var(--ink)}

/* document metadata — version, last updated, effective date */
.legal-meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  margin:-1.5rem 0 clamp(2.5rem,5vw,3.5rem);
  font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);
}
.legal-meta b{font-weight:500;color:var(--ink)}
.legal-meta .is-unresolved{color:#9a5b1e}
.legal-archive,.legal-callout{
  background:var(--cream);border-left:1px solid var(--yellow);
  padding:1.35rem 1.5rem;margin-bottom:clamp(2rem,4vw,2.75rem);
}
.legal-callout{margin-block:2rem}
.legal-archive p,.legal-callout p{font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.legal-callout p + p{margin-top:.6rem}
.legal-archive strong,.legal-callout strong{color:var(--ink)}

/* Preview builds only — never rendered in production. */
.preview-banner{
  position:relative;z-index:120;background:#3a2f12;color:#f6e6bd;
  padding:.7rem var(--pad);font-size:.82rem;line-height:1.5;text-align:center;
}
.preview-banner strong{color:#fbc31f;font-weight:500}
.legal-page:has(.preview-banner) .site-header{position:static}

/* Deep-link targets. The app links to #section-6-3, so the anchor has to be
   findable by a reader who arrives cold. */
.legal-sub{position:relative;scroll-margin-top:96px}
.legal-body h2,.legal-body h3{scroll-margin-top:96px}
.legal-anchor{
  position:absolute;left:-1.35rem;top:.1rem;
  color:var(--ink-faint);text-decoration:none;font-size:.9em;
  opacity:0;transition:opacity 300ms var(--ease);
}
.legal-sub:hover .legal-anchor,.legal-anchor:focus{opacity:1}
.legal-sub:target,.legal-body h2:target,.legal-body h3:target{
  background:linear-gradient(to right,rgba(251,195,31,.18),rgba(251,195,31,0) 70%);
}
@media (max-width:820px){.legal-anchor{display:none}}

/* ---------- /do-not-sell ---------- */
.gpc-state{
  background:var(--forest);color:rgba(255,255,255,.86);
  padding:1.5rem 1.65rem;margin-bottom:clamp(2rem,4vw,2.75rem);
  border-left:1px solid var(--yellow);
}
.gpc-state p{font-size:.94rem;line-height:1.65}
.gpc-state p + p{margin-top:.65rem}
.gpc-state strong{color:#fff;font-weight:500}
.gpc-state a{border-bottom:1px solid rgba(255,255,255,.35)}
.dns-h{margin:clamp(3rem,6vw,4.5rem) 0 1.75rem;font-size:clamp(1.5rem,2.6vw,2rem)}
.dns-form{max-width:34rem}
.dns-form .field{margin-bottom:1.75rem;border:0;padding:0}
.dns-form label,.dns-form legend{
  display:block;font-size:.9rem;font-weight:500;margin-bottom:.55rem;color:var(--ink);
}
.dns-form input[type=email],.dns-form input[type=text]{
  width:100%;padding:.85rem 1rem;border:1px solid var(--hair);border-radius:0;
  font:inherit;font-size:.95rem;background:var(--white);color:var(--ink);
}
.dns-form input:focus-visible{outline:1px solid var(--yellow);outline-offset:2px;border-color:var(--ink)}
.dns-form .hint{margin-top:.5rem;font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.dns-form .check{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-weight:400;font-size:.93rem;line-height:1.55;color:var(--ink-soft);margin-bottom:.85rem;
}
.dns-form .check input{margin-top:.28rem;accent-color:var(--forest)}
.dns-error{
  margin-bottom:1.5rem;padding:.85rem 1rem;font-size:.9rem;
  background:#fdf1e3;border-left:1px solid #c8791f;color:#7a4712;
}
.dns-confirm{border-top:1px solid var(--hair);padding-top:clamp(2.5rem,5vw,3.5rem)}
.dns-confirm .h2{margin:.5rem 0 1.5rem}
.dns-confirm p{font-size:.97rem;line-height:1.7;color:var(--ink-soft);margin-bottom:1rem}
.dns-copy{
  background:var(--cream);padding:1.25rem;margin:1.5rem 0;overflow-x:auto;
  font-size:.8rem;line-height:1.6;white-space:pre-wrap;color:var(--ink-soft);
}

.legal-body{max-width:68ch}
.legal-body h2{
  font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:300;letter-spacing:-.02em;
  margin:clamp(2.75rem,5vw,3.75rem) 0 1rem;padding-top:1.75rem;border-top:1px solid var(--hair);
}
.legal-body h3{font-size:1.1rem;font-weight:400;margin:2rem 0 .75rem}
.legal-body h4{font-size:1rem;font-weight:400;margin:1.5rem 0 .5rem}
.legal-body p{margin-bottom:1.15rem;color:var(--ink-soft);font-size:.98rem;line-height:1.78}
.legal-body strong{color:var(--ink);font-weight:500}
.legal-body a{border-bottom:1px solid var(--hair);transition:border-color 300ms var(--ease)}
.legal-body a:hover{border-color:var(--ink)}
.legal-body ul,.legal-body ol{margin:0 0 1.25rem;padding-left:1.15rem;color:var(--ink-soft)}
.legal-body li{margin-bottom:.5rem;font-size:.98rem;line-height:1.72}
.legal-body hr{border:0;border-top:1px solid var(--hair);margin:2.5rem 0}
.legal-body table{width:100%;border-collapse:collapse;margin:0 0 1.75rem;font-size:.9rem}
.legal-body th,.legal-body td{
  text-align:left;vertical-align:top;padding:.7rem .85rem .7rem 0;
  border-bottom:1px solid var(--hair);color:var(--ink-soft);line-height:1.6;
}
.legal-body th{color:var(--ink);font-weight:500}
.legal-body blockquote{margin:0 0 1.25rem;padding-left:1.25rem;border-left:1px solid var(--hair);color:var(--ink-soft)}
.legal-body code{font-size:.88em;background:var(--cream);padding:.1em .35em}
.legal-foot{margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--hair);font-size:.95rem;color:var(--ink-soft)}