/* 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;
}
/* soft cream scrim behind the docked mark so copy scrolling under it (mainly on mobile, where
   the column runs full-width) is masked rather than messy — the radial fade keeps it from
   reading as a hard box. Cream-on-cream, so it's invisible until real content passes behind. */
.corner::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:50%;width:175%;height:175%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, var(--cream) 56%, rgba(245,241,232,0));
}
.corner-mark{height:48px;width:auto;display:block;overflow:visible;}
.corner.visible{opacity:1;}

/* 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 I am */
.who-wrap{max-width:52rem;margin:0 auto;display:flex;gap:clamp(2rem,4.5vw,3.4rem);align-items:flex-start;text-align:left;}
.who-portrait{flex:0 0 34%;max-width:282px;align-self:flex-start;aspect-ratio:4/5;border-radius:10px;overflow:hidden;}
.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-body{flex:1;min-width:0;}
.who-lead{font-size:clamp(1.25rem,2.6vw,1.55rem);font-weight:500;margin-bottom:1.4rem;letter-spacing:-0.005em;}
.who-wrap p{font-size:clamp(1.02rem,1.5vw,1.13rem);line-height:1.68;margin-bottom:1.25rem;}
.facts{list-style:none;margin:2.1rem 0;display:grid;grid-template-columns:1fr 1fr;gap:0.75rem 2rem;}
.facts li{font-size:0.86rem;line-height:1.45;color:rgba(31,41,55,0.72);padding-left:1.1rem;position:relative;}
.facts li::before{content:"";position:absolute;left:0;top:0.5em;width:6px;height:6px;border-radius:50%;background:var(--charcoal);opacity:0.55;}

/* 7 — what time back looks like */
.s-time{padding-block:clamp(5rem,13vh,8.5rem);}
.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;}

/* 8 — CTA */
.s-cta{text-align:center;}
.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 */
.footer{padding:4rem var(--pad-x) 3rem;text-align:center;border-top:1px solid rgba(31,41,55,0.08);}
.footmark{width:34px;height:auto;display:block;margin:0 auto 1.4rem;overflow:visible;}
.footer .name{font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:0.6rem;}
.footer .meta{font-size:0.78rem;color:var(--muted);line-height:1.95;}
.footer .email-link{font-size:0.78rem;}

@media (max-width:720px){
  html.anim .hero-track{height:250vh;}   /* shorter now the resolve autoplays; scroll handles flight → lede → belief */
  /* the close (emotional beat + CTA) sizes to content on phones — less scroll than full-screen */
  .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;}
  .facts{grid-template-columns:1fr;}
  .who-wrap{flex-direction:column;gap:1.9rem;}
  .who-portrait{flex:none;max-width:220px;}
}
/* 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;}
}