/* Self-hosted Montserrat — variable weight 300–500, no third-party font request.
   latin covers normal content; latin-ext is unicode-range-gated, so it only downloads
   if an accented glyph actually appears on the page. font-display:swap keeps text visible. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --cream:#F5F1E8;
  --charcoal:#1F2937;
  --orange:#F26B3A;
  --muted:rgba(31,41,55,0.55);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --pad-x:clamp(1.5rem,5vw,2.5rem);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--cream);color:var(--charcoal);
  font-family:var(--font);font-weight:400;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(242,107,58,0.22);}

/* Lenis smooth scroll (motion visitors only; class added by main.js) */
html.lenis,html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* visually hidden — read by screen readers and counted in the heading outline for SEO */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* orange "difference" underline — a clean orange rule marking the lines about how we're
   different. Wipes in left-to-right on scroll via clip-path (see main.js); shown drawn by
   default, so reduced-motion is covered. */
.diff{position:relative;display:inline-block;}
.diff::after{content:"";position:absolute;left:0;right:0;bottom:-0.16em;height:2px;background:var(--orange);
  clip-path:inset(0 0 0 0);transition:clip-path 0.6s var(--ease);}
html.anim .diff::after{clip-path:inset(0 100% 0 0);}
html.anim .diff.drawn::after{clip-path:inset(0 0 0 0);}

.section{padding:clamp(5rem,12vh,8.5rem) var(--pad-x);}
/* statement sections that hold the screen alone — the lede, the belief headline, the
   emotional beat, the close — sit centered in a full viewport so each lands by itself */
.s-full{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* corner mark — the only persistent chrome; the flown logo lands here (see main.js) */
.corner{
  position:fixed;top:0;left:0;z-index:100;
  padding:1.15rem clamp(1.4rem,4vw,2rem);
  line-height:0;opacity:0;transition:opacity 0.45s ease;
}
.corner-mark{height:48px;width:auto;display:block;overflow:visible;}
.corner.visible{opacity:1;}
/* on widths where the middle content reaches the top-left, the mark hides for that whole stretch
   (gone before the belief paragraph, back after the second bio); on wide screens it stays put.
   main.js (cornerOverlapGuard) toggles this — reduced-motion path; full motion fades via GSAP. */
.corner.over-media{opacity:0;}

/* HERO */
.hero-track{position:relative;height:100vh;}
html.anim .hero-track{height:280vh;}    /* the resolve now autoplays on load; scroll drives only the flight → lede → cross-fade to belief */
.hero-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.lockup{display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform,opacity;}
.mark{width:clamp(148px,25vw,200px);height:auto;overflow:visible;margin-bottom:2.4rem;}
.mark .dot{transform-box:fill-box;transform-origin:center;}
#heroDot{fill:var(--orange);}
/* Resting state (reduced motion / no JS): the orange dot sits risen, set via CSS.
   For motion, GSAP drives the rise on the SVG transform ATTRIBUTE — so CSS must not set a
   transform on #heroDot for .anim, or the CSS property would override the attribute and the
   dot would never actually rise. */
html:not(.anim) #heroDot{transform:translate(36px,-36px);}

.wm-mask{overflow:hidden;padding:0.1em 0.05em;}
.wordmark{
  font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:0.18em;line-height:1;font-weight:500;
  display:inline-block;white-space:nowrap;will-change:transform,opacity;
}
/* the ampersand inherits the wordmark weight (300) — a heavier amp read as a different glyph */
.rule{width:46px;height:2px;background:var(--orange);margin:1.6rem auto 1.1rem;transform:scaleX(1);transform-origin:center;}
.tagline{font-size:clamp(0.72rem,2vw,0.86rem);letter-spacing:0.28em;}

/* staged panels — desktop only (html.stage): each is absolutely centered in the hero, hidden
   until the timeline fades it in (the lede as the mark docks, then the belief as the lede fades
   out). Mobile / reduced-motion keep these hidden and use the standalone sections instead. */
.hero-lede,.hero-belief{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;text-align:center;opacity:0;display:none;
}
.hero-lede{width:min(19em,88vw);font-size:clamp(1.45rem,3.4vw,2.05rem);line-height:1.42;letter-spacing:-0.01em;}
.hero-belief{width:min(13em,90vw);font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.22;font-weight:500;letter-spacing:-0.01em;}
html.stage .hero-lede,html.stage .hero-belief{display:block;}
html.stage #what-this-is,html.stage #belief-stmt{display:none;}

.cue{
  /* fades in at the bottom of the hero once the intro autoplay has resolved the logo (main.js) */
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.55rem;pointer-events:none;
  color:var(--muted);font-size:0.64rem;letter-spacing:0.26em;opacity:0;
}
.cue svg{animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* hero pre-animation states (motion only, prevents flash before GSAP) */
html.anim .mark .dot{opacity:0;}
html.anim #heroDot{fill:#1F2937;}
html.anim .wordmark{opacity:0;}
html.anim .rule{transform:scaleX(0);}
html.anim .tagline{opacity:0;}

/* 2 — what this is */
.lede{
  font-size:clamp(1.45rem,3.4vw,2.05rem);line-height:1.42;font-weight:400;
  max-width:19em;margin:0 auto;text-align:center;letter-spacing:-0.01em;
}

/* 3 — the belief */
.belief-wrap{max-width:34rem;margin:0 auto;text-align:left;}
.belief-head{
  font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:500;line-height:1.22;
  text-align:center;margin:0 auto;max-width:13em;letter-spacing:-0.01em;
}
.belief-head .w{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25;}
.belief-head .wi{display:inline-block;}
.belief-wrap p{font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.68;margin-bottom:1.25rem;}
.belief-wrap p:last-child{margin-bottom:0;}
.belief-wrap p.belief-punch{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.4;font-weight:400;letter-spacing:-0.01em;margin-top:1.9rem;}

/* 4 — what we do */
.do-intro{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;text-align:center;max-width:30em;margin:0 auto;}
.offers{max-width:60rem;margin:3rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.2rem);}
.offer-num{display:block;font-size:1.7rem;font-weight:300;line-height:1;letter-spacing:0.04em;color:rgba(31,41,55,0.3);margin-bottom:1rem;}
.offer h3{font-size:1.22rem;font-weight:500;letter-spacing:0.01em;margin-bottom:0.55rem;}
.offer p{font-size:1rem;line-height:1.55;color:rgba(31,41,55,0.74);}

/* 5 — social proof (testimonial carousel: one centred, neighbours peeking and fading at the edges) */
.carousel{position:relative;max-width:56rem;margin:0 auto;}
.car-viewport{position:relative;overflow:hidden;}
.car-track{display:flex;align-items:center;gap:2rem;will-change:transform;}
.quote{flex:0 0 min(31rem,78vw);margin:0;text-align:left;opacity:0.38;transition:opacity 0.5s var(--ease);}
.quote.is-active{opacity:1;}
.quote-rule{width:30px;height:2px;background:var(--orange);margin:0 0 1.5rem;}
.quote blockquote{margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;font-weight:400;letter-spacing:-0.005em;color:rgba(31,41,55,0.92);}
.quote-cite{margin-top:1.5rem;font-style:normal;line-height:1.45;}
.quote-cite .who{display:block;font-weight:500;font-size:0.9rem;letter-spacing:0.02em;color:var(--charcoal);}
.quote-cite .org{display:block;font-size:0.82rem;letter-spacing:0.04em;color:var(--muted);margin-top:0.15rem;}
/* the edges fade the peeking neighbours into the page */
.car-viewport::before,.car-viewport::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,14%,130px);z-index:2;pointer-events:none;}
.car-viewport::before{left:0;background:linear-gradient(to right,var(--cream),rgba(245,241,232,0));}
.car-viewport::after{right:0;background:linear-gradient(to left,var(--cream),rgba(245,241,232,0));}
/* arrows sit in the faded edges */
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:none;color:var(--charcoal);opacity:0.4;cursor:pointer;transition:opacity 0.2s ease,color 0.2s ease;-webkit-tap-highlight-color:transparent;}
.car-arrow:hover{opacity:1;color:var(--orange);}
.car-arrow:focus-visible{outline:2px solid var(--orange);outline-offset:2px;opacity:1;border-radius:50%;}
.car-prev{left:-6px;}
.car-next{right:-6px;}
.car-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:2.4rem;}
.car-dots button{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(31,41,55,0.22);cursor:pointer;transition:background 0.25s ease,transform 0.25s ease;-webkit-tap-highlight-color:transparent;}
.car-dots button.is-active{background:var(--orange);transform:scale(1.25);}
.car-dots button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.quote{transition:none;}}

/* 6 — who we are: two founders, side by side as a matched pair */
.who-set{max-width:48rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,4rem);align-items:start;text-align:left;}
.who-portrait{width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;margin-bottom:1.6rem;}
.who-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;display:block;
  /* light, natural grade — keeps skin tone (no brightening/wash-out), just a touch of richness */
  filter:saturate(0.95) contrast(1.02);}
.who-lead{font-size:clamp(1.25rem,2.6vw,1.55rem);font-weight:500;margin-bottom:1.1rem;letter-spacing:-0.005em;}
.who-col p{font-size:clamp(1.02rem,1.5vw,1.13rem);line-height:1.68;margin-bottom:1.2rem;}

/* 7 + 8 — the close: a fully pinned, staged sequence (mirrors the staged open). The page does not
   travel — scroll cross-fades the stages in place: the beat holds and dissolves, the CTA fades into
   the same centre, then the footer dissolves in at the bottom while the CTA stays put.
   Default (reduced motion / no JS): the stages are normal stacked, centred blocks + the footer. */
.close-track{position:relative;}
.close-stage{max-width:34rem;margin:0 auto;text-align:center;padding:clamp(3rem,9vh,6rem) var(--pad-x);}
/* staged (motion): pin the whole close; overlay the beat + CTA in the centre and the footer at the
   bottom, all in one fixed frame — main.js scrubs their opacity in turn so nothing else moves. The
   track is kept tall (close to the hero's) so the staged fades get room to breathe at the same pace
   as the opening — the beat holds, then everything dissolves slowly rather than rushing. */
html.stage .close-track{height:260vh;}
html.stage .close-pin{position:sticky;top:0;height:100vh;overflow:hidden;}
html.stage .close-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(34rem,90vw);margin:0;padding:0 var(--pad-x);}
html.stage .close-cta{opacity:0;}
/* footer — a single quiet line tucked at the bottom of the pinned frame */
html.stage .close-foot{position:absolute;left:0;right:0;bottom:0;margin:0;opacity:0;}

.time-wrap{max-width:34rem;margin:0 auto;text-align:center;}
.time-wrap p{font-size:clamp(1.2rem,2.7vw,1.6rem);line-height:1.5;margin-bottom:1.8rem;}
.time-wrap p:last-child{margin-bottom:0;}
.cta-wrap{max-width:34rem;margin:0 auto;}
.cta-head{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:500;margin-bottom:1.3rem;}
.cta-wrap p{font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.65;margin:0 auto 2.2rem;max-width:30em;text-wrap:pretty;}
.btn{
  display:inline-flex;align-items:center;gap:0.5em;
  background:var(--charcoal);color:var(--cream);
  padding:0.95rem 1.9rem;border-radius:3px;
  font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;transition:background 0.25s ease;
}
.btn .arrow{color:var(--orange);transition:transform 0.25s var(--ease);}
.btn:hover{background:#2b3645;}
.btn:hover .arrow{transform:translateX(4px);}
.btn:active{transform:scale(0.98);}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}
/* the CTA button now opens an email — show the address in natural lowercase rather than the
   uppercase tracking used for worded labels, so it reads as an address */
.btn-email{text-transform:none;letter-spacing:0.01em;}
.email-link{color:var(--charcoal);text-decoration:none;border-bottom:1px solid rgba(31,41,55,0.25);}
.email-link:hover{border-color:var(--orange);}

/* footer — one quiet line: locale + copyright (the email is the CTA button above, not repeated) */
.footer{padding:3.5rem var(--pad-x) 2.5rem;text-align:center;font-size:0.78rem;letter-spacing:0.04em;color:var(--muted);}
.foot-sep{margin:0 0.7em;opacity:0.5;}

@media (max-width:720px){
  html.anim .hero-track{height:250vh;}   /* shorter now the resolve autoplays; scroll handles flight → lede → belief */
  html.stage .close-track{height:240vh;} /* the staged close: a touch shorter on phones, mirroring the hero track */
  /* full-screen statement sections size to content on phones — less dead scroll */
  .s-full{min-height:0;}
  .offers{grid-template-columns:1fr;gap:2.6rem;}
  /* testimonials on phones: one at a time — full width, no peek, no edge fade; arrows sit in
     the side margins so nothing gets squished */
  .quote{flex-basis:100%;opacity:1;padding:0 2.4rem;}
  .car-viewport::before,.car-viewport::after{display:none;}
  .car-arrow{width:36px;height:36px;}
  .car-prev{left:-4px;}
  .car-next{right:-4px;}
  .who-set{grid-template-columns:1fr;gap:clamp(2.8rem,9vw,4rem);}
}
/* very small phones (~320px): keep the wordmark from overflowing its line */
@media (max-width:359px){
  .wordmark{font-size:6.3vw;letter-spacing:0.12em;}
}
@media (prefers-reduced-motion:reduce){
  .cue svg{animation:none;}
  .corner{transition:none;}
  .btn,.btn .arrow{transition:none;}
  .btn:active{transform:none;}
}