/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */

/* ---------------------------------------------------------------- layout -- */
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

/* scrub / sequence media */
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */

/* kinetic split */
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */

/* horizontal rail */

/* reveal + parallax */

/* flow reveal (fires once) */

/* pointer devices */
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */

/* The track. Empty on purpose. */

/* scroll progress */

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  /* A wipe is a position change too. Show reveal content settled. */
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
}

@font-face{font-family:Geist;src:url('assets/geist-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Barlow;src:url('assets/barlow-condensed-500.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--bg:#eae7df;--ink:#252527;--muted:#62615f;--line:#25252729;--paper:#f4f2ec;--signal:#d9682e;--sc-canvas:var(--bg);--sc-surface:var(--bg);--sc-ink:var(--ink);--sc-ink-soft:var(--muted);--sc-accent:var(--ink);--sc-accent-ink:var(--paper);--sc-font-display:Geist,sans-serif;--sc-font-text:Geist,sans-serif;--gutter:clamp(24px,4.5vw,84px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 Geist,sans-serif}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:430;letter-spacing:-.055em;line-height:1.05}p{text-wrap:pretty}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #b45024;outline-offset:5px}.skip{position:fixed;top:-70px;left:20px;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:100}.skip:focus{top:16px}.header{height:90px;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:32px;border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--bg)}.header nav{display:flex;gap:36px;font-size:12px}.header nav a{padding:16px 0}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:52px;padding:15px 23px;background:var(--ink);color:var(--paper);border-radius:40px;font-size:12px;transition:transform .25s,background .25s}.button span{font-size:20px;line-height:1}.text-link{display:inline-flex;gap:36px;align-items:center;font-size:12px;padding:12px 0;border-bottom:1px solid var(--line)}.text-link span{font-size:21px}.insights{padding:100px var(--gutter) 90px;border-top:1px solid var(--line);position:relative;background:var(--bg)}.muted{color:var(--muted);font-size:12px;line-height:1.7;margin-top:15px}table{width:100%;border-collapse:collapse;font-size:10px;font-variant-numeric:tabular-nums}th,td{text-align:right;padding:12px 10px;border-bottom:1px solid #c3c7c3;white-space:nowrap}th:first-child,td:first-child{text-align:left}th{font-weight:500;color:#535956;font-size:9px}th small{font-size:8px;color:#666b68;font-weight:400}tbody tr:last-child td{border-bottom:0}.experience{background:#28292a;color:#f0eee8;padding:110px var(--gutter) 84px;position:relative;overflow:hidden;isolation:isolate}.eyebrow{font-size:9px;letter-spacing:.12em;display:flex;align-items:center;gap:8px;line-height:1.7}.experience .eyebrow{color:#b5b5b0;margin-bottom:30px}.experience h2{font-size:clamp(46px,6.4vw,100px);line-height:1.07;letter-spacing:-.06em}.experience h2 span{color:#b5b5b0}.build{padding:110px var(--gutter) 0;display:grid;grid-template-columns:1.15fr 1fr;gap:0 10vw}.youtube{display:block;width:fit-content;font-size:11px;text-decoration:underline;text-underline-offset:5px;margin-top:22px}details{border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}summary{list-style:none;min-height:72px;padding:19px 0;display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:13px;cursor:pointer}summary::-webkit-details-marker{display:none}summary span{font-size:22px;line-height:1;font-weight:300;transition:transform .2s}details[open] summary span{transform:rotate(45deg)}details p{font-size:13px;line-height:1.7;color:var(--muted);padding:0 22px 24px 0}footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:35px 0;margin-top:100px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}footer>a{font-size:23px;letter-spacing:-.07em;font-weight:600;color:var(--ink)}footer>a span{font-weight:400;margin-left:16px}@keyframes analyze-pulse{to{opacity:.2}}
@media(hover:hover){.button:hover{transform:translateY(-2px);background:#414143}.text-link:hover{border-color:var(--ink)}.header nav a:hover{color:#a84d26}summary:hover{color:#a84d26}}
@media(max-width:1100px) and (min-width:701px){.header nav{gap:22px}.build{gap:0 6vw}}
@media(max-width:700px){.header{height:76px;padding:0 24px;gap:16px}.header nav{display:none}.insights{padding:62px 24px}.muted{font-size:11px;margin-top:12px}th,td{padding:10px 8px;font-size:9px}th{font-size:8px}th small{font-size:7px}.experience{padding:68px 24px 56px}.experience .eyebrow{font-size:7px;margin-bottom:24px}.experience h2{font-size:11.3vw;line-height:1.12}.build{display:block;padding:64px 24px 0}summary{font-size:12px;min-height:68px}details p{font-size:12px}footer{margin-top:60px;flex-wrap:wrap;gap:16px;padding:26px 0;font-size:9px}footer>a{font-size:21px}footer>span:nth-child(2){order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}footer{padding-bottom:78px}
@media(max-width:700px){footer{padding-bottom:75px}}
/* The badge resolves into the same sample shown in the working analysis surface. */

:root{--bg:#111516;--ink:#e7edef;--muted:#a4b0b4;--line:#b3c1c42b;--paper:#111516;--signal:#ed9667;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.11' filter='url(%23n)'/%3E%3C/svg%3E")}
body{background-color:var(--bg);background-image:var(--grain)}
.header{background:#111516;border-color:var(--line)}
.insights{background-color:#1a2022;background-image:var(--grain),linear-gradient(145deg,#a0b6bd0a,transparent 55%)}.button{box-shadow:0 3px 12px #0002}.skip{background:var(--ink);color:var(--bg)}
.build{background-color:#141819;background-image:var(--grain),radial-gradient(ellipse at 0 100%,#72899212,transparent 65%);border-top:1px solid var(--line)}
.experience{background-color:#101415;background-image:var(--grain);padding-block:110px}.experience h2{font-size:clamp(45px,5.1vw,78px)}.experience h2 span{color:var(--muted)}.experience .eyebrow{color:var(--muted)}
.plans{padding:100px var(--gutter) 74px;background-color:#1c2427;background-image:var(--grain),repeating-linear-gradient(132deg,transparent 0 6px,#9eafb407 6px 7px);border-block:1px solid var(--line);overflow:hidden}
@media(hover:hover){.button:hover{background:#fff;color:#111516}.header nav a:hover,summary:hover{color:#e8ab83}}
@media(max-width:1100px) and (min-width:701px){.header nav{gap:18px}.experience h2{font-size:5.1vw}}
@media(max-width:700px){.experience{padding:66px 24px}.experience h2{font-size:11.3vw}.plans{padding:65px 24px 54px}}


/* Slate analysis surfaces keep the data inside the site's material palette. */.youtube>span:first-of-type{text-decoration:underline;text-underline-offset:5px}

/* First-fold composition uses available height as well as width. */

/* Native cursors stay crisp and track immediately; touch has no custom pointer. */
@media(hover:hover) and (pointer:fine){
 body{cursor:url('assets/golf-cursor.svg') 16 16,auto}
 a,button,summary,[role="button"],label[for],input[type="checkbox"]{cursor:url('assets/golf-cursor-link.svg') 16 16,pointer}
 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]){cursor:text}
 button:disabled,input:disabled{cursor:not-allowed}
}

/* Fine-stroke icons are drawn consistently on desktop and mobile. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;overflow:visible}
.ui-icon path{vector-effect:non-scaling-stroke}
.button>span[aria-hidden],.text-link>span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.text-link .ui-icon{width:24px;height:24px}
footer .ui-icon{width:32px;height:32px}
@media(hover:hover) and (pointer:fine){a:hover>.ui-icon,a:hover>span>.ui-icon{transform:translateX(2px)}.ui-icon{transition:transform .18s ease-out}}
@media(max-width:700px){.button .ui-icon,.text-link .ui-icon{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.ui-icon{transition:none!important;transform:none!important}}

/* The shot studio: graphite, woven range, machined edges, copper flight. */
/* Match the arrow box to the first line of the mobile metric description. */
@keyframes typing-breathe{to{opacity:.3;transform:translateY(-2px)}}
/* An evening unfolds along a single rail. */
.experience{--journey-progress:0;background:radial-gradient(ellipse at 78% 48%,#44566022,transparent 57%),repeating-linear-gradient(125deg,#ffffff02 0 1px,transparent 1px 4px),#161d20}
/* Restrained metal edges on the two primary opening-list actions. */

.waitlist{padding:100px var(--gutter);border-block:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 15%,#986c4930,transparent 55%),repeating-linear-gradient(135deg,#ffffff02 0 1px,transparent 1px 4px),#1a2225;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.waitlist .eyebrow{color:#c49c7a;margin-bottom:25px}.waitlist h2{font-size:clamp(45px,5.6vw,84px);line-height:1.07}.waitlist h2 span{color:#a7b4b9}.waitlist [hidden]{display:none!important}@media(max-width:800px){.waitlist{grid-template-columns:1fr;gap:35px;padding-block:75px}}@media(max-width:420px){.waitlist h2{font-size:46px}.waitlist{padding-inline:24px}}.waitlist{isolation:isolate}
.location{padding:110px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;border-top:1px solid #879aa425;background-color:#151d21;background-image:var(--grain);isolation:isolate}.location h2{font-size:clamp(42px,4.5vw,70px);line-height:1.06;letter-spacing:-.05em}.location h2 span{color:#a7bbc6}.location a:focus-visible{outline:2px solid #deb28f;outline-offset:5px}
@keyframes map-arrive{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:700px){.location{padding:70px 24px;grid-template-columns:1fr;gap:32px}.location h2{font-size:11vw}}
/* Leave a clear lane for the optional ambient-motion control. */.signup-character{position:relative;flex:0 0 116px;height:86px;--gaze-x:0px;--gaze-y:0px;filter:drop-shadow(4px 8px 5px #0003)}@keyframes signup-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}@keyframes signup-consider{to{transform:translateY(-3px)}}
@media(max-width:420px){.signup-character{flex-basis:106px}}

/* One material and motion language, from the machined mark to the opening list. */
:root{--bg:#101617;--paper:#101617;--ink:#e7edef;--muted:#a9b8be;--signal:#dca681;--surface-low:#162023;--surface-raised:#28363c;--edge:#8ca3ac55;--edge-light:#d2e1e32c;--ease-settle:cubic-bezier(.22,.8,.2,1);--metal:linear-gradient(130deg,#56697120 0%,#1c282c00 38%,#0d151840 100%);--brush:repeating-linear-gradient(0deg,#e2eef203 0 1px,transparent 1px 3px);--felt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='.72 .92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.055'/%3E%3C/svg%3E");--depth-shadow:0 22px 48px #050b0e66,inset 0 1px var(--edge-light)}
body{background:var(--bg)}.header{position:absolute;inset:0 0 auto;background:transparent;border-bottom-color:transparent;height:90px}.header nav a{color:#c2cdd2}.header nav a:hover{color:var(--ink)}.button{border-radius:10px}.button:active,.text-link:active{transform:translateY(1px)}a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#ecc3a2}
.opening{position:relative;height:440svh;background:var(--bg)}
/* The same frame carries the first shot into the complete working studio. */
.insights{position:relative;background:var(--bg);padding-top:54px;padding-bottom:110px;border:0}.waitlist h2,.location h2{font-size:clamp(42px,5.1vw,78px);line-height:1.06;font-weight:440;letter-spacing:-.06em}.waitlist h2 span,.location h2 span{color:#a6b8c0}
/* A softer fabric background changes the pace; metal hardware remains familiar. */
.experience{background:var(--felt),radial-gradient(ellipse at 80% 45%,#435b6520,transparent 65%),#151f22;border-block:1px solid #73899419;padding-block:110px}.experience .eyebrow{color:#b3c1c7;letter-spacing:.1em}
/* Memberships feel like passes to the same place, with engraved rings and warm edges. */
.plans{background:var(--felt),radial-gradient(ellipse at 65% 45%,#6c51402b,transparent 65%),#172124;border:0;padding-top:100px}
.waitlist{background:var(--felt),radial-gradient(ellipse at 15% 50%,#67524125,transparent 60%),#151f23;border-block-color:#839aa32e}.signup-character{filter:drop-shadow(0 9px 8px #08111755)}.location{background:var(--felt),#141e21}.build{background:#101617;border-top:1px solid #8198a026}.build .button,.youtube{border-radius:10px}.build footer{border-color:var(--edge)}
@media(max-width:700px){.header{height:78px}.opening{height:410svh}.insights{padding-top:38px;padding-bottom:65px}.waitlist h2,.location h2{font-size:clamp(35px,10.5vw,48px);line-height:1.08}.experience,.plans{padding-block:68px}}
@media(prefers-reduced-motion:reduce){.opening{height:100svh}}
html:not(.enhanced) .opening{height:100svh}

/* The opening ends at impact. The full studio is the first data interface. */

.skip:not(:focus){clip-path:inset(100%);width:1px;height:1px;padding:0;overflow:hidden}
/* A failed 3D context must not retain the long phone scroll track. */

/* A shared final viewport: the impact screen recedes beneath the working studio. */

/* Give the range its full width instead of letterboxing it inside a capped SVG. */
/* Keep the summer benefit aligned with the pricing content. */

/* A drawn target, so mobile cannot substitute a colored emoji. */

/* Compact social hardware, adapted from the shared reference for our two channels. */

/* Approved Cast Graphite material rendering; original badge remains the load-error fallback. */

/* A short, native-scroll opening. All geometry below remains normal document flow. */
.header{position:fixed!important;inset:0 0 auto;z-index:100;height:82px;background:#101617dd!important;backdrop-filter:blur(18px);border-bottom:1px solid #c6d8df10}
.simple-opening{position:relative;height:286svh;background:#101617}
.simple-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#202b30 0,#101617 65%);--title:0;--intro:1;--film:1;--zoom:1;--rise:50px;--rx:0deg;--ry:0deg}
.simple-grain{position:absolute;inset:0;z-index:-1;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.simple-film{position:absolute;left:50%;top:48%;width:min(94svh,86vw);aspect-ratio:1;opacity:var(--film);transform:translate(-50%,-50%) perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--zoom));will-change:transform;mask-image:radial-gradient(ellipse,#000 48%,#000e 59%,transparent 73%);mix-blend-mode:lighten}
.simple-film video{display:block;width:100%;height:100%;object-fit:contain}
.simple-intro{position:absolute;left:6vw;bottom:12svh;opacity:var(--intro);transform:translateY(calc((1 - var(--intro))*-18px));pointer-events:none}
.simple-intro>p:last-child{font-size:clamp(19px,2.2vw,32px);line-height:1.25;letter-spacing:-.035em;margin-top:18px;color:#d9e2e6}
.simple-stage .eyebrow{font-size:10px;letter-spacing:.19em;color:#a7bbc4}
.simple-title{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:var(--title);transform:translateY(var(--rise));padding:100px 6vw 75px;visibility:hidden;pointer-events:none}
.simple-title.is-visible{visibility:visible;pointer-events:auto}
.simple-title h1{display:flex;flex-direction:column;font-size:clamp(65px,10vw,155px);font-weight:450;line-height:.91;letter-spacing:-.065em;text-align:center;margin:25px 0 28px;color:#e6edf0}
.simple-title h1 span:last-child{color:#bf9778}
.simple-title-bottom{width:min(690px,100%);display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:15px}
.simple-title-bottom p{font-size:14px;line-height:1.65;color:#a7bbc4}
.simple-title-bottom .text-link{font-size:13px;gap:35px}
.simple-scroll{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;opacity:var(--intro);font-size:9px;letter-spacing:.17em;color:#a7bbc4}
.simple-scroll>div{width:60px;height:1px;background:#b2c1c633;overflow:hidden}.simple-scroll i{display:block;width:22px;height:1px;background:#caa485;animation:scroll-mark 2.6s ease-in-out infinite}
@keyframes scroll-mark{0%,100%{transform:translateX(0)}50%{transform:translateX(38px)}}
.simple-skip{position:absolute;bottom:32px;right:6vw;font-size:11px;color:#a7bbc4;opacity:var(--intro);padding:8px}.simple-skip span{margin-left:12px}
#insights{scroll-margin-top:100px;margin-top:0!important;padding-top:90px}
@media(max-width:700px){.header{height:70px}.simple-opening{height:251svh}.simple-film{width:118vw;top:42%}.simple-intro{bottom:20svh;left:7vw}.simple-intro>p:last-child{font-size:25px}.simple-title{padding:85px 7vw 80px}.simple-title h1{font-size:clamp(62px,17.8vw,115px);margin:24px 0}.simple-title .eyebrow{font-size:8px;letter-spacing:.12em}.simple-title-bottom{flex-direction:column;gap:8px;text-align:center;margin-top:18px}.simple-title-bottom p{font-size:13px}.simple-title-bottom .text-link{font-size:12px}.simple-scroll{bottom:35px;left:7vw;transform:none;font-size:8px;gap:10px}.simple-scroll>div{width:40px}.simple-skip{right:6vw;bottom:26px;font-size:9px}#insights{padding-top:50px}}
@media(max-height:660px) and (min-width:701px){.simple-title h1{font-size:15svh;margin:16px 0}.simple-title-bottom{margin-top:0}.simple-title{padding-top:90px}.simple-intro{bottom:16svh}}
@media(prefers-reduced-motion:reduce){.simple-opening{height:auto}.simple-stage{height:auto;min-height:100svh;padding-top:85px}.simple-film{position:relative;left:0;top:0;transform:none;width:min(55vw,260px);margin:0 auto;opacity:1}.simple-title{position:relative;opacity:1;visibility:visible;transform:none;padding:15px 7vw 60px;pointer-events:auto}.simple-title h1{font-size:clamp(60px,9vw,110px)}.simple-intro,.simple-scroll,.simple-skip{display:none}.simple-scroll i{animation:none}}
@media(max-width:700px){.header{padding-inline:5vw}}
html:not(.simple-ready) .simple-opening{height:auto}html:not(.simple-ready) .simple-stage{height:auto;min-height:100svh}html:not(.simple-ready) .simple-title{position:relative;min-height:100svh;opacity:1;visibility:visible;transform:none;pointer-events:auto}html:not(.simple-ready) .simple-intro,html:not(.simple-ready) .simple-film,html:not(.simple-ready) .simple-scroll,html:not(.simple-ready) .simple-skip{display:none}
.simple-stage::after{content:'';position:absolute;inset:auto 0 0;height:85px;background:linear-gradient(transparent,#101617);pointer-events:none;z-index:-1}
@media(max-width:700px){.simple-scroll{bottom:92px}.simple-skip{bottom:31px}}
/* Palette refinement: deeper neutral graphite, softer silver, retained copper. */
:root{--bg:#0d1113;--paper:#0d1113;--ink:#dce3e6;--muted:#a5b1b7;--surface-low:#141b1e;--surface-raised:#222d32;--edge:#82959d42;--edge-light:#c5d2d51f}
.header{background:#0d1113ed!important}
.simple-opening{background:var(--bg)}
.simple-stage{background:radial-gradient(ellipse at 50% 45%,#192125 0,var(--bg) 65%)}
.simple-grain{opacity:.11}
.simple-film video{filter:brightness(.92) contrast(1.045)}
.simple-intro>p:last-child,.simple-title h1{color:#dce3e6}
.simple-title h1 span:last-child{color:#bf9778}
.simple-stage::after{background:linear-gradient(transparent,var(--bg))}
/* Neutral graphite throughout the preview, matched to the logo material. */
:root{--bg:#111112;--paper:#111112;--ink:#e2e0dd;--muted:#b1afad;--surface-low:#1b1b1c;--surface-raised:#303031;--edge:#aaa7a342;--edge-light:#e0dcd61f;--line:#aaa7a32b;--metal:linear-gradient(130deg,#8a878320 0%,#28282700 38%,#11111240 100%);--brush:repeating-linear-gradient(0deg,#eee9e203 0 1px,transparent 1px 3px);--depth-shadow:0 22px 48px #05050566,inset 0 1px var(--edge-light)}
.header{background:#111112ed!important}.header nav a{color:#c5c2be}.simple-stage{background:radial-gradient(ellipse at 50% 45%,#242425 0,var(--bg) 65%)}
.simple-title h1,.simple-intro>p:last-child{color:var(--ink)}.simple-title h1 span:last-child{color:#bf9778}.simple-stage .eyebrow,.simple-title-bottom p,.simple-scroll,.simple-skip{color:var(--muted)}
.waitlist h2 span,.location h2 span{color:#b1afad}
.experience .eyebrow{color:#b8b5b1}
.experience{background:var(--felt),radial-gradient(ellipse at 80% 45%,#68625a16,transparent 65%),#1b1b1c;border-block-color:#a39e9819}
.plans{background:var(--felt),radial-gradient(ellipse at 65% 45%,#6c514018,transparent 65%),#1c1c1d}
.waitlist{background:var(--felt),radial-gradient(ellipse at 15% 50%,#67524119,transparent 60%),#1b1b1c;border-block-color:var(--edge)}.location{background:var(--felt),#19191a}.build{background:var(--bg);border-color:var(--edge)}

/* A decoded still remains visible until the scroll video has a usable frame. */
.simple-film .simple-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.simple-film video{position:relative;opacity:0}
.simple-film.has-video-frame video{opacity:1}
@media(prefers-reduced-motion:reduce){.simple-film.has-video-frame video{opacity:0}}

/* Approved clarity, readability and membership refinements. */
body.review-refined .simple-intro .eyebrow{font-size:12px;letter-spacing:.1em;color:#c8c1b8}
body.review-refined .simple-intro small{display:block;font-size:15px;line-height:1.5;letter-spacing:0;margin-top:16px;color:#c1bbb4}


.authentic-analysis{padding:110px 6vw 90px;background:#19191a;scroll-margin-top:80px}.authentic-analysis p{font-size:16px;line-height:1.7;color:#c0bab2;max-width:60ch}.authentic-analysis a{color:#dbb393;text-decoration:underline;text-underline-offset:5px}.authentic-analysis :focus-visible{outline:2px solid #d9ad86;outline-offset:5px}@media(max-width:700px){.authentic-analysis{padding:65px 6vw}}

/* Approved flow refinements, scoped to this preview. */


.simple-film.uses-frames video{opacity:0!important}
@media(max-width:700px){
 body.review-refined .header{padding-inline:16px;gap:10px}
 .simple-film{width:106vw;top:39%}
 .simple-intro{bottom:22svh}.simple-intro>p:last-child{font-size:22px}
 .simple-title-bottom .text-link{min-height:44px}
}
@media(max-width:360px){body.review-refined .header{padding-inline:12px;gap:8px}}

.lotfore-story{display:grid;grid-template-columns:1fr 1.15fr;gap:8vw;padding:100px 6vw;background:var(--felt),#1b1b1c;border-bottom:1px solid var(--line)}.lotfore-story .eyebrow{font-size:12px;letter-spacing:.1em;color:#b9b5b0;margin-bottom:22px}.lotfore-story h2{font-size:clamp(36px,4.7vw,68px);font-weight:450;letter-spacing:-.035em;line-height:1.08}.lotfore-story h2 span{color:#b1afad}@media(max-width:700px){.lotfore-story{grid-template-columns:1fr;gap:30px;padding:65px 7vw}}

/* Original opening duration, logo geometry and title reveal come from the unchanged baseline styles. */.design-refined .header{top:0!important;height:76px;padding-inline:4.5vw}.design-refined .header nav{gap:30px}.design-refined .header nav a{font-size:14px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #e8bc99!important;outline-offset:5px!important}#plans,#location,#questions,#build,#waitlist,#insights{scroll-margin-top:128px!important}
@media(max-width:1000px){.design-refined .header nav{gap:16px}.design-refined .header nav a{font-size:13px}}
@media(max-width:700px){.design-refined .header{height:70px;padding-inline:16px;gap:10px}.design-refined .header nav{display:none}}
@media(max-width:360px){.design-refined .header{padding-inline:12px;gap:6px}}