/* Wingman · The Helix
   Concept: one continuous scroll-driven journey. The hero's edge imagery becomes the walls of a helix the camera
   travels through; copy stays flat and centred while the worlds orbit around it. Near-black world, cobalt and violet light, white paper. */
/* Self-hosted web fonts (SIL Open Font License): Jost (variable, 400 to 600) and Cormorant Garamond, Latin and Latin Extended. Nothing is requested from Google. */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-italic-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:"Cormorant Garamond";font-style:normal;font-weight:600 700;font-display:swap;src:url(../fonts/cormorant-garamond-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600 700;font-display:swap;src:url(../fonts/cormorant-garamond-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:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jost-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}
/* Size-matched stand-ins used only while the web fonts load, so the swap to Jost and Cormorant Garamond does not move the page
   (measured against the loaded fonts; local fonts only, nothing is downloaded). */
@font-face{font-family:"Jost Fallback";src:local("Arial");font-weight:400;size-adjust:95.74%;ascent-override:111.76%;descent-override:39.69%;line-gap-override:0%}
@font-face{font-family:"Jost Fallback";src:local("Arial");font-weight:500;size-adjust:99.69%;ascent-override:107.34%;descent-override:38.12%;line-gap-override:0%}
@font-face{font-family:"Jost Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;size-adjust:95.30%;ascent-override:112.28%;descent-override:39.87%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman");font-weight:600;font-style:normal;size-adjust:91.23%;ascent-override:100.85%;descent-override:31.79%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT");font-weight:700;font-style:normal;size-adjust:91.61%;ascent-override:100.42%;descent-override:31.65%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT");font-weight:600;font-style:italic;size-adjust:86.52%;ascent-override:106.33%;descent-override:33.52%;line-gap-override:0%}
:root{
  --ink:#111318;   /* the dark surface, and the text on light surfaces */
  --line:#D4D8DF; --line-dark:rgba(255,255,255,.16);   /* neutral borders: on light surfaces, on dark surfaces */
  --cobalt:#3567D6; --violet:#8655C9;   /* the emblem only: left wing, right wing */
  --cobalt-light:#668CE0; --violet-light:#A783D8; --midnight:#142744; --nearblack:#111318;   /* new identity: type on dark; midnight is the Important occasions surface, near-black the homepage hero */
  --rose:#A53F4E; --ok:#2E7550;
  --f-display:"Cormorant Garamond","Cormorant Fallback","Cormorant",Garamond,"Times New Roman",serif;
  --f-body:"Jost","Jost Fallback","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --gutter:max(20px,4vw); --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --mk-l:var(--cobalt); --mk-r:var(--violet);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--cobalt-light);color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt-light);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.mk-l{fill:var(--mk-l)}.mk-r{fill:var(--mk-r)}

/* ---------- Type ---------- */
.eyebrow{font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt-light);margin:0}
.on-paper .eyebrow{color:var(--cobalt)}
.h-stage{font-family:var(--f-display);font-weight:700;font-size:clamp(2.7rem,6.6vw,6.4rem);line-height:.98;letter-spacing:-.012em;margin:0;text-wrap:balance}
.h-stage em,.h-section em,.h-reveal em{font-style:italic;font-weight:600;color:var(--violet-light)}
.on-paper .h-section em{color:var(--violet)}
.h-section{font-family:var(--f-display);font-weight:700;font-size:clamp(2.5rem,5.4vw,5rem);line-height:1;letter-spacing:-.012em;margin:0;text-wrap:balance}
.lede{font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.6;margin:0;max-width:34em}
.opt{font-weight:400;font-size:12px;letter-spacing:.04em;opacity:.85;margin-left:4px}

/* ---------- Buttons ---------- */
.btn{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 30px;border-radius:999px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--gold{--bg:var(--cobalt);--fg:#fff;--bd:var(--cobalt)}
.btn--gold:hover{--bg:var(--violet);--bd:var(--violet)}
.btn--ink{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--ink:hover{--bg:var(--cobalt);--bd:var(--cobalt)}
.btn--ghost{--fg:#fff}
.btn--ghost:hover{--bd:#fff}
.on-paper .btn--ghost{--fg:var(--ink);--bd:var(--line)}
.btn--ghost-light{--fg:#fff;--bd:rgba(255,255,255,.35)}
.btn--small{min-height:44px;padding:0 20px;font-size:14px}
.cta-text{display:inline-block;color:var(--cobalt-light);font-weight:500;font-size:16px;letter-spacing:.06em;text-decoration:none;padding:8px 0;background:none;border:0;border-radius:0;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 calc(100% - 4px);background-size:0 1px;transition:background-size .45s var(--ease),color .3s}
.cta-text:hover,.cta-text:focus-visible{background-size:100% 1px;color:var(--cobalt-light)}
.bar-nav .cta-text{font-size:14px;letter-spacing:.04em}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.linklike{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}

/* ---------- Skip links + bar ---------- */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--cobalt);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:16px}
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;transition:background-color .4s,border-color .4s,transform .5s var(--ease);border-bottom:1px solid transparent}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;transition:opacity .5s}
.brand svg{width:38px;height:auto}
.brand span{font-family:var(--f-display);font-weight:700;font-size:25px;line-height:1}
.bar-nav{display:flex;align-items:center;gap:28px}
.bar-nav>a:not(.btn):not(.cta-text){font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.bar-nav>a:not(.btn):not(.cta-text):hover,.bar-nav>a[aria-current]{border-color:currentColor}
.bar.is-solid,.bar:not(.at-hero){background:var(--nearblack);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line-dark)}
.bar.at-hero .brand{opacity:0;pointer-events:none}

/* ================= PAGE 1 · HOMEPAGE ================= */
.home{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--ink);isolation:isolate}
.home-pano{position:absolute;inset:0;z-index:-1}
.home-pano img{width:100%;height:100%;object-fit:cover}
.home-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:120px max(var(--gutter),env(safe-area-inset-left,0px)) 120px}
.lockup{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,22px)}
.lockup-mark{width:clamp(100px,10.5vw,156px);height:auto}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:clamp(3.8rem,8.6vw,7.8rem);line-height:.86;letter-spacing:-.005em;color:#fff}
.tagline{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.1;color:var(--violet-light);margin:6px 0 0}
.intro{max-width:30em;margin:0 0 12px;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.6}

/* ================= PAGES 2 TO 8 ================= */
/* Base: each page is a complete full-screen composition, read in order (reduced motion, no JavaScript) */
.pg{position:relative;min-height:100svh;overflow:hidden;background:var(--ink);color:#fff}
.pg-in{position:relative;min-height:100svh;max-width:1440px;margin:0 auto;padding:110px max(var(--gutter),env(safe-area-inset-left,0px)) 70px}
.h-page{font-family:var(--f-display);font-weight:700;font-size:clamp(2.8rem,5.8vw,5.8rem);line-height:.98;letter-spacing:-.012em;margin:0;text-wrap:balance}
.h-page em{font-style:italic;font-weight:600;color:var(--violet-light)}
.pg-text{margin:0;max-width:28em;font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.6}
.pg-copy{display:flex;flex-direction:column;gap:22px;position:relative;z-index:2}
.pg-photo{margin:0;overflow:hidden}
.pg--dates .pg-in,.pg--little .pg-in,.pg--people .pg-in{position:static}
.pg-photo img{width:100%;height:100%;object-fit:cover}
.glimpse{list-style:none;margin:6px 0 0;padding:16px 0;display:grid;gap:10px;max-width:420px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.glimpse li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;font-size:16px}
.glimpse time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--cobalt-light);letter-spacing:.04em}
.tags{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 15px;font-size:14px}

/* Page 2 · Dates: photograph left, dissolving into ink; copy right */
.pg--dates .pg-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,70px)}
.pg--dates .pg-photo{position:absolute;left:0;top:0;bottom:0;width:58%}
.pg--dates{background:var(--nearblack)}   /* near-black page: warm-white text and hairlines from the dark-page defaults; label, times and emphasis in the new blues and violet below */
.pg--dates .pg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,19,24,0) 38%,rgba(17,19,24,.10) 50%,rgba(17,19,24,.32) 62%,rgba(17,19,24,.62) 75%,rgba(17,19,24,.88) 88%,var(--nearblack) 99%),linear-gradient(0deg,rgba(17,19,24,.55),transparent 30%)}
.pg--dates .pg-copy{grid-column:2}

/* Page 3 · Away: warm dusk ground, copy left, a tall framed photograph with an inset */
.pg--away{background:var(--ink)}
.pg--away .pg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,90px)}
/* The three scenes keep their photographic proportions at every window shape: the box is as tall as the page allows and exactly as wide as the image needs (never cropped). */
.away-scene{position:absolute;z-index:1;left:0;top:72px;height:calc(100% - 72px);width:auto;aspect-ratio:1264/1800;max-width:46%;display:block;pointer-events:none}
.away-scene img{display:block;width:100%;height:100%;object-fit:contain;object-position:left top}
/* The Wingman symbol sits behind the words as a relief in the near-black background, centred on the text column */
.away-emboss{position:absolute;z-index:0;pointer-events:none;left:43%;top:50%;translate:0 -50%;width:56%;--k:7}
.away-emboss svg{display:block;width:100%;height:auto;overflow:visible}
.pg--away .pg-in{position:static}
.pg--away .h-page{font-size:clamp(2.52rem,5.22vw,5.22rem)}
.pg--away .pg-copy{grid-column:2;position:relative;z-index:2;padding-bottom:34px}

/* Page 4 · Different: headline across the top, a moving photo carousel below */
.pg--different .pg-in{display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(24px,3.5vw,50px);padding-top:120px}
.pg--different .pg-copy{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:16px 60px}
.pg--different .eyebrow{grid-column:1/-1}
.pg--different .pg-text{justify-self:end}
.car{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:0;height:100%;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.car.is-drag{cursor:grabbing}
.car:focus-visible{outline:2px solid var(--cobalt-light);outline-offset:-6px;border-radius:18px}
.car-track{list-style:none;margin:0;padding:0 0 0 max(var(--gutter),env(safe-area-inset-left,0px));height:100%;display:flex;gap:16px;width:max-content;will-change:transform;backface-visibility:hidden}
.car-card{position:relative;flex:none;height:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--ink)}
.car-card img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.car-card::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(0deg,rgba(8,9,12,.72) 0,rgba(8,9,12,0) 100%);pointer-events:none}
.car-label{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,1.55vw,1.5rem);line-height:1.15;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.car:not(.is-js){overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}

/* Page 5 · Little things: a white page, photograph bleeding off the right */
.pg--little{background:#fff;color:var(--ink)}
.pg--little .eyebrow{color:var(--cobalt)}
.pg--little .h-page em{color:var(--violet)}
.pg--little .note-line{border-left-color:var(--cobalt)}
.pg--little .note-line span{color:var(--violet)}
.pg--little .pg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,90px)}
.pg--little .pg-photo{position:absolute;right:0;top:0;bottom:0;width:46%}
.little-emboss{position:absolute;z-index:0;pointer-events:none;left:-30%;top:-12%;width:104%;--k:14}
.little-emboss svg{display:block;width:100%;height:auto;overflow:visible}
.le-o{transform:translate(0,0)}
.le-o-s0{transform:translate(calc(2.7px / var(--k)),calc(2.7px / var(--k)))}
.le-o-s1{transform:translate(calc(1.65px / var(--k)),calc(1.65px / var(--k)))}
.le-o-s2{transform:translate(calc(.83px / var(--k)),calc(.83px / var(--k)))}
.le-o-h0{transform:translate(calc(-1.65px / var(--k)),calc(-1.65px / var(--k)))}
.le-o-h1{transform:translate(calc(-.75px / var(--k)),calc(-.75px / var(--k)))}
.pg--little .pg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 22%)}
.note-line{margin:8px 0 0;font-family:var(--f-display);font-style:italic;font-weight:600;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.3;color:var(--ink);border-left:2px solid var(--cobalt);padding-left:18px;max-width:22em}
.note-line span{display:block;font-style:normal;color:var(--violet)}

/* Page 6 · People: centred, framed by two photographs at the edges (the homepage's composition, warmer) */
.pg--occasions{background:var(--ink)}
.occ-scene{position:absolute;inset:0;display:block}
.occ-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pg--occasions .pg-in{position:static;display:flex;align-items:flex-start;justify-content:center;text-align:center;padding-top:clamp(118px,19svh,190px);padding-bottom:0}
.pg--occasions .pg-copy{align-items:center;max-width:820px;gap:clamp(14px,2.2svh,22px)}
.pg--occasions .h-page{font-size:clamp(2.125rem,4.08vw,4.08rem);margin-bottom:calc(clamp(2.5rem,4.8vw,4.8rem) * .294);text-shadow:0 2px 28px rgba(0,0,0,.55)}
.pg--occasions .eyebrow,.pg--occasions .occasions,.pg--occasions .pg-text{text-shadow:0 1px 18px rgba(0,0,0,.7)}
.pg--occasions .pg-text{max-width:30em;position:relative}
.pg--occasions .pg-text::before{content:"";position:absolute;z-index:-1;left:-26%;right:-26%;top:-60%;bottom:-60%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(10,22,40,.58) 0%,rgba(10,22,40,.46) 40%,rgba(10,22,40,.2) 72%,rgba(10,22,40,0) 100%)}
.occasions{display:flex;flex-wrap:wrap;justify-content:center;gap:.15em .5em;margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,2.7vw,2.5rem);line-height:1.15}
.occasions em{color:var(--violet-light)}

/* Page 7 · Reveal: the brand environment */
.pg--reveal{background:var(--ink)}
.pg--reveal .pg-in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px}
.reveal-mark{width:clamp(100px,10vw,150px);height:auto}
.h-reveal{font-family:var(--f-display);font-weight:700;margin:0;display:flex;flex-direction:column;gap:.2em;line-height:1}
.h-reveal .r1{font-size:clamp(2rem,3.8vw,3.4rem);font-weight:600}
.h-reveal .r2{font-size:clamp(3rem,8vw,7.4rem);letter-spacing:-.015em}
.h-reveal em{font-style:italic;font-weight:600;color:var(--violet-light)}
.reveal-actions{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:center}
.reveal-actions .btn{min-height:0;padding:6px 0;border:0;border-radius:0;background:none;gap:0;font-size:17px;letter-spacing:.04em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:7px;transition:text-decoration-color .3s,color .3s}
.reveal-actions .btn:hover{transform:none;text-decoration-color:currentColor}
.reveal-actions .btn--gold{color:var(--cobalt-light)}
.reveal-actions .btn--ghost{color:#fff}

/* Page 8 · Try */
.pg--try{background:var(--ink)}
.pg--try .pg-in{display:grid;grid-template-columns:minmax(0,34rem) auto;justify-content:center;grid-template-areas:"head phone" "ctrl phone";grid-template-rows:1fr 1fr;column-gap:clamp(40px,7vw,130px);padding-top:76px;padding-bottom:26px}
.try-head{grid-area:head;align-self:end;translate:0 clamp(70px,9vh,90px);display:grid;gap:20px;justify-self:stretch;padding-bottom:clamp(22px,3.4vh,40px)}
.try-ctrl{grid-area:ctrl;align-self:start;translate:0 clamp(70px,9vh,90px);display:grid;gap:18px}
.pg--try .pg-text{text-wrap:balance}
.demo-tabs{display:grid;gap:2px;justify-items:start}
.demo-tabs button{position:relative;appearance:none;background:none;border:0;padding:9px 0;margin:0;font:inherit;font-weight:600;font-size:16px;letter-spacing:.03em;color:rgba(255,255,255,.62);cursor:pointer;text-align:left;transition:color .3s}
.demo-tabs button:hover{color:#fff}
.demo-tabs button[aria-selected="true"]{color:var(--cobalt-light)}
.demo-note{margin:0;position:absolute;left:50%;top:100%;transform:translateX(-50%);padding-top:8px;white-space:nowrap;font-size:13px;line-height:1.4;color:rgba(255,255,255,.8);text-align:center}
.mphone{grid-area:phone;align-self:center;position:relative;margin:0;height:min(calc(100svh - 112px),940px);aspect-ratio:1264/2638;justify-self:start}
.mphone-screen{position:absolute;left:3.639%;top:1.895%;width:92.72%;height:96.25%;overflow:hidden;background:#fff;border-radius:9% / 4.2%}
.mphone-screen img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .28s linear}
.mphone-screen img.is-on{opacity:1}
.mphone-screen img[data-f="h6"]{-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent 86.6%);mask-image:linear-gradient(180deg,#000 85%,transparent 86.6%)}
.mphone-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.035) 22%,rgba(255,255,255,0) 42%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.05) 100%)}
.mphone-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mphone-screen img{transition:none}}

/* ---- Motion: one sticky stage, every page an absolutely placed surface in a shared 3D space ---- */
.helix-on .helix{position:relative;background:var(--ink)}
.helix-on .helix-vp{position:sticky;top:0;height:100svh;overflow:hidden;perspective-origin:50% 50%;background:radial-gradient(80% 70% at 50% 50%,var(--ink) 0%,#08090C 100%)}
.helix-world{position:absolute;inset:0;transform-style:preserve-3d}
.helix-on .pg{position:absolute;inset:0;overflow:hidden;min-height:0;height:100%;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;box-shadow:0 60px 120px -40px rgba(0,0,0,.85);visibility:hidden}
.helix-on .pg-in{height:100%;min-height:0}
.helix-on .pg.is-held{display:none}                      /* a page the reader is not yet near: out of layout, so its photographs are not fetched early */
.helix-on .pg::after{content:"";position:absolute;inset:0;background:#08090C;opacity:var(--shade,0);pointer-events:none;z-index:5}
.helix-on .pg--try .pg-in{overflow-y:auto;overscroll-behavior:auto}


.join-venues{margin:6px 0 0;font-size:15px}
.join-venues a{color:var(--ink);font-weight:600;text-underline-offset:3px}

/* ================= JOIN + FORMS ================= */
.join,.page-body,.prefs,.form,.done{color-scheme:light}
.join{background:#fff;color:var(--ink);padding-block:clamp(100px,12vw,170px)}
.join .eyebrow{color:var(--cobalt)}
.join .h-section em{color:var(--violet)}
.join-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
.join-head{display:grid;gap:22px;justify-items:start}
.join-mark{width:64px;height:auto}
.form{display:grid;gap:22px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,38px);color:var(--ink);min-width:0}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.interests legend{font-size:14px;font-weight:600;letter-spacing:.02em}
.field input,.field select,.field textarea{min-height:54px;border-radius:14px;border:1px solid var(--line);background:#fff;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);width:100%}
.field textarea{padding:14px 16px;min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);background:#fff;box-shadow:0 0 0 3px rgba(53,103,214,.2)}
[aria-invalid="true"]{border-color:var(--rose)!important}
.err{font-size:13px;color:var(--rose);font-weight:500}
.err:empty{display:none}
.interests{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.interests legend{margin-bottom:10px;padding:0}
.interests label{position:relative;cursor:pointer}
.interests input{position:absolute;opacity:0;inset:0}
.interests label span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;transition:background .25s,border-color .25s}
.interests label input:checked+span{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.interests label input:focus-visible+span{outline:2px solid var(--cobalt);outline-offset:2px}
.consents{display:grid;gap:12px}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.5;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--cobalt)}
.check a{color:var(--ink);text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{margin:0;font-size:14px;line-height:1.5}
.form-note a{color:var(--ink);text-underline-offset:3px}
.form-status{margin:0;font-size:15px;font-weight:500}
.form-status.is-error{color:var(--rose)}
.done{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(28px,4vw,48px);display:grid;gap:12px;justify-items:start;color:var(--ink)}
.done svg{width:62px;height:auto}
.done h3{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.05;margin:0}
.done p{margin:0;max-width:30em}
.stores{display:flex;gap:12px;flex-wrap:wrap}

/* ================= FOOTER ================= */
.foot{background:var(--ink);color:#fff;padding-block:clamp(70px,8vw,110px) calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-dark)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px;padding-bottom:50px}
.foot-brand svg{width:54px;height:auto}
.foot-word{font-family:var(--f-display);font-weight:700;font-size:34px;line-height:1;margin:14px 0 6px}
.foot-line{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:22px;color:var(--violet-light);margin:0}
.foot h2{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt-light);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a,.foot .linklike{color:#fff;text-decoration:none;font-size:15px}
.foot a:hover,.foot .linklike:hover{color:var(--cobalt-light);text-decoration:underline}
.foot-legal{border-top:1px solid var(--line-dark);padding-top:24px;display:grid;gap:6px;font-size:13px;line-height:1.6}
.foot-legal p{margin:0}
.tbc{border:1px dashed rgba(167,131,216,.6);border-radius:6px;padding:0 6px;color:var(--violet-light)}
.on-paper .tbc{border-color:var(--violet);color:var(--violet)}

/* ================= CONSENT ================= */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:0 max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.consent-in{max-width:1100px;margin:0 auto;background:var(--ink);border:1px solid var(--line-dark);border-radius:20px;padding:18px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.consent-in p{margin:0;font-size:14px;line-height:1.5;max-width:44em}
.consent-in a{color:var(--cobalt-light)}
.consent-actions{display:flex;gap:8px;flex-wrap:wrap}
.prefs{border:0;padding:0;border-radius:24px;background:#fff;color:var(--ink);width:min(560px,calc(100vw - 24px));max-height:calc(100svh - 24px)}
.prefs::backdrop{background:rgba(17,19,24,.7)}
.prefs-in{padding:clamp(22px,4vw,34px);display:grid;gap:16px}
.prefs h2{font-family:var(--f-display);font-weight:700;font-size:2rem;margin:0;line-height:1.1}
.prefs p{margin:0;font-size:15px;line-height:1.5}
.pref{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.pref h3{margin:0 0 2px;font-size:16px;font-weight:600}
.pref-fixed{font-size:13px;font-weight:600;white-space:nowrap}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:30px;border-radius:999px;background:#8B919C;position:relative;cursor:pointer;transition:background .3s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.switch:checked{background:var(--cobalt)}
.switch:checked::after{transform:translateX(22px)}
.prefs-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:6px}
.prefs-meta{font-size:12px!important;opacity:.85}

/* ================= INNER PAGES (venues, legal, unsubscribe) ================= */
.page{background:#fff;color:var(--ink)}
.page-hero{background:var(--ink);color:#fff;padding:clamp(140px,16vw,210px) 0 clamp(60px,7vw,100px);position:relative;overflow:hidden}
.page-hero .wrap{position:relative;display:grid;gap:22px;justify-items:start}
.page-hero .lede{color:#fff}
.page-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32}
.page-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 15%,rgba(17,19,24,.7) 55%,rgba(17,19,24,.25))}
.page-body{padding-block:clamp(70px,9vw,120px)}
.venue-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
.venue-points{display:grid;gap:0;border-top:1px solid var(--line)}
.venue-points div{padding:20px 0;border-bottom:1px solid var(--line)}
.venue-points h3{font-family:var(--f-display);font-weight:700;font-size:1.6rem;margin:0 0 4px;line-height:1.1}
.venue-points p{margin:0}
.types{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.types li{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 14px;font-size:14px}
.legal{max-width:760px}
.legal h2{font-family:var(--f-display);font-weight:700;font-size:2rem;margin:40px 0 10px}
.legal p,.legal li{font-size:17px;line-height:1.7}
.draft-slot{border:2px dashed var(--cobalt);border-radius:20px;padding:clamp(22px,3vw,34px);background:#fff;display:grid;gap:12px}
.draft-slot h2{margin:0;font-size:1.7rem}
.draft-slot p{margin:0}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:rgba(102,140,224,.16);color:var(--cobalt-light);border:1px solid rgba(102,140,224,.4);padding:7px 12px;border-radius:999px}

/* ================= RESPONSIVE ================= */
/* ---- Final screen on desktop: the waitlist and the footer share one viewport. Smaller screens scroll as normal. ---- */
@media (min-width:900px){
  .join{padding-block:90px 20px;min-height:calc(100svh - 279px);display:flex;align-items:center}
  .join>.wrap{width:100%}
  .join-head{gap:18px}
  .form{gap:14px;padding:20px 32px}
  .field input{min-height:50px}
  .interests label span{min-height:40px}
  .check{line-height:1.45}
  .fields{gap:12px}
  .field{gap:6px}
  .interests legend{margin-bottom:8px}
  .consents{gap:8px}
  .foot{padding-block:22px calc(14px + env(safe-area-inset-bottom,0px))}
  .foot li{line-height:1.35}
  .foot-top{padding-bottom:14px;gap:30px}
  .foot-word{margin:10px 0 4px}
  .foot h2{margin-bottom:12px}
  .foot ul{gap:6px}
  .foot-legal{padding-top:12px;gap:4px}
}
@media (max-width:980px){
  .join-grid,.venue-grid{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px) and (min-height:501px),(max-width:900px) and (max-aspect-ratio:3/2){
  .pg-in{padding:96px max(var(--gutter),env(safe-area-inset-left,0px)) 48px}
  .pg--dates .pg-in,.pg--away .pg-in,.pg--little .pg-in,.pg--try .pg-in{grid-template-columns:minmax(0,1fr);align-content:end}
  .pg--dates .pg-photo{width:100%;bottom:auto;height:52%}
  .pg--dates .pg-photo::after{background:linear-gradient(180deg,rgba(17,19,24,0) 40%,var(--nearblack) 98%)}
  .pg--dates .pg-copy{grid-column:1}
  .pg--away .pg-in{gap:28px}
  .away-emboss{left:-16%;top:calc(100% - 215px);width:132%;--k:5}
  .away-scene{top:64px;width:100%;max-width:none;height:min(calc(100vw * 852 / 780),48svh)}
  .away-scene img{object-position:center top}
  .pg--away .pg-in{align-content:end;padding-bottom:44px}
  .pg--away .pg-copy{grid-column:1;padding-bottom:64px}
  .pg--away .pg-copy{grid-row:2}
  .pg--different .pg-copy{grid-template-columns:minmax(0,1fr)}
  .pg--different .pg-text{justify-self:start}
  .pg--different .pg-in{align-content:center}
  .pg--little .pg-photo{width:100%;height:44%;bottom:auto}
  .little-emboss{left:-48%;top:26%;width:190%;--k:5}
  .pg--little .pg-photo::after{background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 40%)}
  .pg--try .pg-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "phone" "ctrl";grid-template-rows:auto auto auto;align-content:start;justify-items:center;row-gap:10px;padding-top:72px;padding-bottom:14px;overflow-y:auto}
  .pg--try .pg-text{display:none}
  .try-head{justify-self:center;text-align:center;gap:8px;padding-bottom:0;translate:none}
  .pg--try .h-page{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .mphone{height:min(calc(100svh - 352px),540px);justify-self:center}
  .try-ctrl{justify-self:center;justify-items:center;text-align:center;gap:6px;translate:none}
  .demo-tabs{display:flex;justify-content:center;gap:0 14px}
  .demo-tabs button{padding:8px 0;font-size:12.5px;letter-spacing:.01em;white-space:nowrap}
  .demo-tabs button[aria-selected="true"]{text-decoration:underline;text-decoration-color:var(--cobalt-light);text-decoration-thickness:1px;text-underline-offset:6px}
    .mphone{margin-bottom:40px}
  .demo-note{width:min(340px,92vw);white-space:normal;font-size:12px;padding-top:6px}
}
@media (max-width:720px){
  body:has(#helix){font-size:16px}
  .bar-in{height:64px}
  .bar-nav{gap:14px}
  .bar-nav>a:not(.btn):not(.cta-text){display:none}
  .brand span{font-size:22px}
  .brand svg{width:32px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1 1 auto}
  .glimpse li{font-size:15px}
  .pg--occasions .pg-in{padding-top:100px}
  .pg--occasions .occasions{display:flex;font-size:1.45rem}
  .occasions{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:2px 14px;font-size:1.45rem}
  .h-page{font-size:clamp(2.4rem,10.5vw,3.4rem)}
  .pg--away .h-page{font-size:clamp(2.16rem,9.45vw,3.06rem)}
  .stop{grid-template-columns:62px minmax(0,1fr) auto;gap:10px;padding:9px 0}
  .stop b{font-size:17px}
  .stop span{display:none}
  .h-reveal .r2{font-size:clamp(2.8rem,13vw,4.4rem)}
}
@media (max-width:420px){
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .bar-nav .btn{padding:0 14px;font-size:13px}
  .bar-nav .cta-text{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ================= HOMEPAGE · CINEMATIC PHONE HERO (scoped to .home--stage) =================
   The original panorama is the background, untouched. In the dark centre, one balanced composition: the Wingman identity and
   copy on the left, the static phone on the right (about two thirds of the hero height). Nothing here moves. */
.home--stage{min-height:max(100svh,600px);padding:clamp(56px,7svh,76px) var(--gutter) clamp(28px,4svh,44px);display:flex;align-items:center;justify-content:center}
.stage-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(8px,1.4svh,16px);width:100%}
.stage-text{display:contents}
.home--stage .lockup{order:1;flex-direction:column;align-items:center;gap:clamp(4px,.8svh,8px);margin:0}
.home--stage .lockup-mark{width:clamp(56px,5.2vw,86px)}
.home--stage .wordmark{font-size:clamp(3rem,4.9vw,5rem)}
.stage-phone{order:3;margin:0;flex:none}
.stage-phone img{display:block;height:clamp(300px,50svh,675px);width:auto;
  filter:drop-shadow(0 46px 56px rgba(0,0,0,.65)) drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.home--stage .stage-kicker{order:2;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.home--stage .tagline{order:4;margin:0;font-size:clamp(1.5rem,2.3vw,2.2rem);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.home--stage .intro{order:5;margin:0;max-width:34em;font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.6;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.home--stage .cta-text{order:6}
@media (max-width:899px){
  .home--stage .lockup-mark{width:64px}
  .home--stage .wordmark{font-size:3.4rem}
  .home--stage .tagline{font-size:1.7rem}
  .home--stage .intro{font-size:1rem;max-width:26rem}
  .home--stage .tagline,.home--stage .intro,.home--stage .cta-text{margin-top:-8px}
  .home--stage{padding-top:84px;padding-bottom:40px}
  .stage-row{position:relative;gap:16px}
  .stage-row::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:-84px;bottom:-40px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(17,19,24,.7) 0,rgba(17,19,24,.82) 24%,rgba(17,19,24,0) 38%,rgba(17,19,24,0) 66%,rgba(17,19,24,.86) 76%,rgba(17,19,24,1) 100%)}
  .stage-phone img{height:auto;width:min(56.4vw,293px)}
}

/* ================= LEGAL DOCUMENTS (native pages: website and app) ================= */
.doc-hero{padding:clamp(120px,13vw,170px) 0 clamp(40px,5vw,64px)}
.doc-hero .wrap{gap:16px}
.doc-hero .h-section{font-size:clamp(2.3rem,4.6vw,4rem)}
.doc-hero .lede{max-width:42em}
.doc-back{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--cobalt-light);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.doc-back:hover{border-bottom-color:currentColor}
.doc-body .doc-back{color:var(--cobalt)}
.doc-meta{display:flex;flex-wrap:wrap;gap:6px 36px;margin:4px 0 0}
.doc-meta div{display:flex;gap:10px;align-items:baseline}
.doc-meta dt{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cobalt-light)}
.doc-meta dd{margin:0;font-size:16px}
.doc-note{margin:6px 0 0;max-width:46em;font-size:15px;line-height:1.6;color:#fff;opacity:.88;border-left:2px solid var(--cobalt);padding-left:14px}
.doc-body{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.doc-grid{display:grid;grid-template-columns:260px minmax(0,740px);gap:clamp(36px,6vw,90px);justify-content:center;align-items:start}
.doc-toc{position:sticky;top:96px;max-height:calc(100svh - 120px);overflow:auto;padding-right:6px}
.doc-toc .eyebrow{color:var(--cobalt);margin-bottom:12px}
.doc-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doc-toc li{border-bottom:1px solid var(--line)}
.doc-toc a{display:flex;gap:12px;padding:9px 0;font-size:14px;line-height:1.4;color:var(--ink);text-decoration:none}
.doc-toc a span{flex:0 0 auto;min-width:2ch;font-weight:600;color:var(--cobalt);font-variant-numeric:tabular-nums}
.doc-toc a:hover{color:var(--cobalt)}
.doc{color:var(--ink);min-width:0}
.doc h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.65rem,2.4vw,2.1rem);line-height:1.1;margin:0 0 14px;color:var(--ink);scroll-margin-top:96px}
.doc h3{font-family:var(--f-body);font-weight:600;font-size:17px;line-height:1.4;margin:22px 0 8px;color:var(--ink)}
.doc p,.doc li,.doc dd,.doc dt,.doc td,.doc th{font-size:16.5px;line-height:1.7}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:1.35em}
.doc li{margin:0 0 6px}
.doc a{color:var(--cobalt);text-underline-offset:3px}
.doc .legal-section,.doc section{padding:34px 0;border-top:1px solid var(--line)}
.doc .legal-num{display:inline-block;min-width:2.2ch;margin-right:.55em;font-family:var(--f-body);font-weight:600;font-size:.52em;letter-spacing:.14em;color:var(--cobalt);vertical-align:.32em}
.doc .legal-summary{background:rgba(17,19,24,.04);border-left:3px solid var(--cobalt);padding:22px 26px;margin:0 0 6px}
.doc .legal-summary .eyebrow{color:var(--cobalt);margin-bottom:6px}
.doc .legal-summary h2{font-size:1.5rem;margin-bottom:10px}
.doc .legal-summary li:last-child,.doc .legal-summary p:last-child{margin-bottom:0}
.doc .legal-fields{margin:0 0 16px;border-top:1px solid var(--line)}
.doc .legal-fields div{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:6px 20px;padding:10px 0;border-bottom:1px solid var(--line)}
.doc .legal-fields dt{font-weight:600}
.doc .legal-fields dd{margin:0}
.doc mark.tbc,.doc-meta mark.tbc{background:var(--violet-light);color:var(--ink);padding:0 .3em}
.doc .status{background:var(--ink);color:var(--cobalt-light);font-size:.72em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.15em .5em;white-space:nowrap}
.doc .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.doc-scroll{overflow-x:auto;margin:6px 0 20px;-webkit-overflow-scrolling:touch}
.doc-scroll:focus-visible{outline-color:var(--cobalt)}
.doc table{width:100%;min-width:560px;border-collapse:collapse}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 14px;border:1px solid var(--line)}
.doc th{background:rgba(17,19,24,.04);font-weight:600}
.doc caption{caption-side:top;text-align:left;font-weight:600;padding-bottom:8px}
.doc-end{margin-top:8px;max-width:1090px}
@media (max-width:900px){
  .doc-grid{grid-template-columns:minmax(0,1fr)}
  .doc-toc{position:static;max-height:none;overflow:visible}
  .doc-body{padding-top:32px}
}
@media (max-width:640px){
  .doc .legal-fields div{grid-template-columns:1fr}
  .doc .legal-summary{padding:18px 18px}
  .doc p,.doc li,.doc dd,.doc dt,.doc td,.doc th{font-size:16px}
}

/* ================= HELIX TRANSITION BACKGROUNDS (behind the pages, only seen while they turn) ================= */
.helix-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 50%,#000 50%,rgba(0,0,0,.3) 100%);mask-image:radial-gradient(ellipse 90% 85% at 50% 50%,#000 50%,rgba(0,0,0,.3) 100%)}
.helix-bg-i{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0}
.helix-bg-i:nth-child(3){background-size:201% auto;background-position:10% 11%}
@media (max-width:759px){.helix-bg-i:nth-child(3){background-size:cover;background-position:50% 50%}}

/* ================= PRIMARY WAITLIST LINKS (homepage hero and final reveal): text-only, cobalt, fine underline that extends on hover ================= */
.home .cta-text,.reveal-actions .btn--gold{position:relative;font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--cobalt-light);background-image:none;text-decoration:none;padding:8px 0 9px}
.home .cta-text::after,.reveal-actions .btn--gold::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:var(--cobalt-light);transition:width .45s var(--ease)}
.home .cta-text:hover::after,.home .cta-text:focus-visible::after,.reveal-actions .btn--gold:hover::after,.reveal-actions .btn--gold:focus-visible::after{width:calc(100% + 18px)}
.home .cta-text:focus-visible,.reveal-actions .btn--gold:focus-visible{outline:2px solid var(--cobalt-light);outline-offset:8px;border-radius:2px}
@media (max-width:759px){.home .cta-text,.reveal-actions .btn--gold{font-size:17px}}
.reveal-actions .btn--ghost{font-size:16px;font-weight:500}

/* ================= MOBILE REFINEMENTS (26 October 2026) =================
   Phones and tablets only. Every rule is scoped to a touch pointer or a width of 900px or less, so a desktop browser is unchanged. */

/* Touch targets: enlarge the tappable area (invisible) without moving anything */
@media (pointer:coarse){
  .brand,.bar-nav .cta-text,.reveal-actions .btn--ghost,.doc-back{position:relative}
  .brand::before,.doc-back::before{content:"";position:absolute;inset:-10px -8px}
  .bar-nav .cta-text::before,.reveal-actions .btn--ghost::before{content:"";position:absolute;inset:-4px -8px}
  .demo-tabs button::before{content:"";position:absolute;inset:-4px}
}
@media (max-width:899px){
  .interests label span{min-height:44px}
  .doc-toc a{min-height:44px;align-items:center}
  .foot ul{gap:0}
  .foot a,.foot .linklike{display:inline-flex;align-items:center;min-height:44px}
  .demo-tabs{flex-wrap:wrap;gap:0 10px}                                   /* wrap, never clip, on narrow phones */
  .demo-tabs button{font-size:13px;min-height:44px}
  .demo-note{font-size:13px}
}
@media (min-width:721px) and (max-width:899px){.pg--try .pg-in{padding-top:88px}}   /* clear the taller header on tablets */

/* The homepage header sits over a photograph: keep its link legible */
@media (max-width:720px){
  .bar.at-hero .cta-text{text-shadow:0 1px 10px rgba(0,0,0,.7)}
  /* Cookie banner: the same wording and choices, in about half the height */
  .consent{padding:0 max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .consent-in{padding:12px 14px;gap:10px;border-radius:16px}
  .consent-in p{font-size:13px;line-height:1.4}
  .consent-actions{gap:6px}
  .consent-actions .btn{min-height:44px;padding:0 12px;font-size:13px}
}

/* Activities carousel on portrait phones: one comfortable card with a slice of the next showing, so it is clear there is more.
   Same 4:5 photograph; the card is the screen width less the gutter, the gap and about 40px of the next card (never taller than the old card). */

/* Short portrait phones (320x568, 360x640, 375x667): fit each page without the copy running over its photograph */
@media (min-width:760px) and (max-width:900px) and (max-height:700px) and (max-aspect-ratio:3/2){
  .pg-in{padding-top:76px;padding-bottom:28px}
  .h-page{font-size:clamp(2rem,9.4vw,2.7rem)}
  .pg--away .h-page{font-size:clamp(1.95rem,8.8vw,2.5rem)}
  .pg-text{font-size:.95rem;line-height:1.5}
  .pg-copy{gap:12px}
  .glimpse{padding:10px 0;gap:6px;margin-top:2px}
  .glimpse li{font-size:14px}
  .pg--away .pg-in{padding-bottom:28px;gap:14px}
  .pg--away .pg-copy{padding-bottom:22px}
  .away-scene{top:54px}
  .pg--dates .pg-photo{height:40%}
  .pg--try .pg-in{padding-top:68px}
  .mphone{height:min(calc(100svh - 350px),540px)}
}

/* ================= PHONES · natural scrolling =================
   Under 760px wide the Helix is off (helix.js): the pages are ordinary sections that take the height of their content and scroll with the
   browser's own momentum. Every photograph sits in the flow with its own reserved proportions, so nothing shifts as it loads.
   Landscape phones keep the landscape block below; tablets keep the Helix. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (max-aspect-ratio:3/2){
  .pg,.pg-in{min-height:0}
  .pg-in{padding-top:72px;padding-bottom:64px}
  /* Important occasions: the words, then three softly blended scenes */
  .pg--occasions{display:flex;flex-direction:column}
  .pg--occasions .pg-in{order:1;padding-top:84px;padding-bottom:0}
  .occ-scene{position:relative;inset:auto;order:2;margin-top:24px}
  .occ-scene img{width:100%;height:auto;aspect-ratio:900/1230;object-fit:cover}
  .pg--occasions .h-page,.pg--occasions .eyebrow,.pg--occasions .occasions,.pg--occasions .pg-text{text-shadow:none}
  .pg--occasions .pg-text::before{display:none}
  /* Flowers and gifts: photograph first, then the words */
  .pg--little .pg-in{display:flex;flex-direction:column;padding:0 0 64px}
  .pg--little .pg-photo{position:relative;order:-1;top:auto;right:auto;bottom:auto;width:100%;height:min(95vw,380px)}
  .pg--little .pg-copy{padding:28px max(var(--gutter),env(safe-area-inset-left,0px)) 0}
  /* Activities: the carousel keeps its card size, with the next card peeking in */
  .pg--different .pg-in{padding-top:72px;padding-bottom:64px}
  .pg--different .pg-in{grid-template-rows:auto auto}
  .car,.car-track{height:auto}
  .car-card{height:calc((100vw - 76px) * 1.25)}
  /* Spa and weekend breaks: the three scenes, then the words over the symbol */
  .pg--away{display:flex;flex-direction:column}
  .away-scene{position:relative;top:auto;order:0;width:100%;max-width:none;height:auto;aspect-ratio:auto;margin-top:64px}
  .away-scene img{width:100%;height:auto;aspect-ratio:780/852;object-fit:contain}
  .pg--away .pg-in{padding-top:24px;padding-bottom:72px;align-content:start}
  .pg--away .pg-copy{padding-bottom:0}
  .away-emboss{top:calc(100% - 215px)}
  /* Restaurants and Saturday night: photograph first, fading into the dark, then the words */
  .pg--dates .pg-in{display:flex;flex-direction:column;padding:0 0 64px}
  .pg--dates .pg-photo{position:relative;top:auto;bottom:auto;left:auto;width:100%;height:min(105vw,420px)}
  .pg--dates .pg-copy{padding:0 max(var(--gutter),env(safe-area-inset-left,0px))}
  /* The brand reveal */
  .pg--reveal .pg-in{padding-top:96px;padding-bottom:96px}
  /* The app demonstration: the page scrolls, never an inner scroller */
  .pg--try .pg-in{overflow:visible;padding-top:72px;padding-bottom:48px}
  .mphone{height:min(560px,calc(100vw * 1.38))}
}

/* ================= LANDSCAPE PHONES (short and wide) =================
   Under 500px of height and at least 3:2, Helix's pinned pages cannot fit, so helix.js leaves Helix off here (same query). The pages then follow
   one another as ordinary sections that grow to fit their content, using the desktop two-column compositions. Nothing below applies to a
   portrait phone, a tablet or a desktop window. */
@media (max-height:500px) and (min-aspect-ratio:3/2){
  .bar-in{height:56px}
  .brand svg{width:30px}
  .brand span{font-size:22px}
  .pg-in{min-height:100svh;padding:78px max(var(--gutter),env(safe-area-inset-left,0px)) 40px}
  .h-page{font-size:clamp(2.1rem,5.4vw,3.2rem)}
  .pg-text{font-size:1rem;line-height:1.55}
  .pg-copy{gap:14px}
  .pg--away .pg-in{min-height:max(100svh,calc(72px + 40vw * 1800 / 1264))}
  /* homepage */
  .home-in{padding:76px max(var(--gutter),env(safe-area-inset-left,0px)) 40px;gap:10px}
  .lockup{gap:8px}
  .lockup-mark{width:68px}
  .wordmark{font-size:3.3rem}
  .tagline{font-size:1.55rem;margin-top:2px}
  .intro{font-size:.95rem;margin:0 0 4px}
  /* occasions: keep the words in the dark centre of the photograph, away from the faces */
  .pg--occasions .pg-in{padding-top:84px;padding-bottom:40px}
  .pg--occasions .pg-copy{max-width:min(42%,400px)}
  .pg--occasions .h-page{font-size:clamp(1.8rem,4.4vw,2.6rem)}
  .pg--occasions .occasions{font-size:1.35rem;display:flex}
  /* activities: a carousel of comfortable cards, the page grows to fit */
  .pg--different .pg-in{padding-top:80px;gap:16px}
  .pg--different .pg-copy{gap:10px 40px}
  .car{height:min(300px,74svh)}
  /* app demonstration: the phone at a readable size beside the words; the page grows to fit */
  .pg--try .pg-in{grid-template-rows:auto auto;column-gap:clamp(24px,5vw,64px);padding-top:80px;padding-bottom:56px;align-content:center}
  .try-head{translate:none;padding-bottom:12px}
  .try-ctrl{translate:none}
  .mphone{height:clamp(400px,118svh,540px)}
  .demo-tabs button{font-size:15px}
  .demo-note{left:auto;right:0;transform:none;width:min(300px,52vw);white-space:normal;text-align:right}
  /* cookie banner: same wording and choices, less height */
  .consent{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .consent-in{padding:8px 14px;gap:8px}
  .consent-in p{font-size:13px;line-height:1.35}
  /* the final brand reveal */
  .pg--reveal .pg-in{gap:20px}
  .reveal-mark{width:84px}
  .h-reveal .r2{font-size:clamp(2.4rem,7vw,3.8rem)}
}

/* ================= BRAND TRIAL · homepage near-black, Important occasions midnight blue =================
   Homepage: the hero panorama files themselves dissolve into #111318 (see build_images.py), so the page behind them is the same colour and no overlay is needed.
   Important occasions: its approved photograph still fades to the old dark brown, so it lays a midnight-blue fade over the same area of the photograph
   (box and gradients in the photograph's own proportions, so it follows the cover crop). Nothing else changes. */
.home{background:var(--nearblack)}
.pg--occasions{background:var(--midnight)}
.home--stage .stage-kicker,.pg--occasions .eyebrow{color:var(--cobalt-light)}
.home--stage .tagline{color:var(--violet-light)}
/* the shared header's waitlist link: same hover underline and focus ring as before, new colour */
.bar-nav .cta-text,.bar-nav .cta-text:hover,.bar-nav .cta-text:focus-visible{color:var(--cobalt-light)}
.bar.at-hero .bar-nav .cta-text{text-shadow:0 0 3px rgba(0,0,0,.85),0 1px 10px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.6)}   /* over the hero's sunset sky: the phone-width shadow, now at every width */
.home--stage .intro,.pg--occasions{color:#fff}
.pg--occasions .h-page em{color:var(--violet-light)}
.home .cta-text,.home .cta-text:hover,.home .cta-text:focus-visible{color:var(--cobalt-light)}
.home .cta-text::after{background:var(--cobalt-light)}
.home .cta-text:focus-visible{outline-color:var(--cobalt-light)}
/* legibility over the Important occasions photograph: the same shadows as before, tinted midnight and a little deeper where the type crosses bright areas */
.pg--occasions .h-page{position:relative;text-shadow:0 2px 26px rgba(6,14,28,.85),0 0 10px rgba(6,14,28,.6);isolation:isolate}
.pg--occasions .h-page::before{content:"";position:absolute;z-index:-1;inset:-16% -4%;border-radius:40px;background:rgba(10,22,40,.62);filter:blur(18px);pointer-events:none}
.pg--occasions .eyebrow{text-shadow:0 1px 14px rgba(6,14,28,.9),0 0 8px rgba(6,14,28,.6)}
@media (max-aspect-ratio:4/5){
  .occ-scene::after{content:"";position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;aspect-ratio:1080/1920;min-width:100%;pointer-events:none;
    background:linear-gradient(180deg,rgb(20 39 68 / 1) 0%,rgb(20 39 68 / 1) 17%,rgb(20 39 68 / 0.9) 20%,rgb(20 39 68 / 0.75) 24%,rgb(20 39 68 / 0.55) 28%,rgb(20 39 68 / 0.3) 32%,rgb(20 39 68 / 0.1) 36%,rgb(20 39 68 / 0) 40%)}
}
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (max-aspect-ratio:3/2){
  .pg--occasions .h-page,.pg--occasions .eyebrow{text-shadow:none}
  .pg--occasions .h-page::before{display:none}
  .occ-scene::after{inset:0;left:0;translate:none;aspect-ratio:auto;min-width:0;
    background:linear-gradient(180deg,rgb(20 39 68 / 1) 0%,rgb(20 39 68 / 1) 3.6%,rgb(20 39 68 / 0.55) 5%,rgb(20 39 68 / 0.2) 7%,rgb(20 39 68 / 0) 10%,rgb(20 39 68 / 0) 93%,rgb(20 39 68 / 0.35) 95.5%,rgb(20 39 68 / 0.8) 98%,rgb(20 39 68 / 1) 99.2%,rgb(20 39 68 / 1) 100%),linear-gradient(90deg,rgb(20 39 68 / 1) 0%,rgb(20 39 68 / 1) 2.2%,rgb(20 39 68 / 0.55) 3.4%,rgb(20 39 68 / 0.2) 4.8%,rgb(20 39 68 / 0) 7%,rgb(20 39 68 / 0) 93%,rgb(20 39 68 / 0.2) 95.2%,rgb(20 39 68 / 0.55) 96.6%,rgb(20 39 68 / 1) 97.8%,rgb(20 39 68 / 1) 100%)}
}
/* Activities: near-black ground (the carousel's faded edges show it), cobalt-light label, violet-light emphasis */
.pg--different{background:var(--nearblack)}
.pg--different .eyebrow{color:var(--cobalt-light)}
.pg--different .h-page em{color:var(--violet-light)}
/* Spa and weekend breaks: near-black ground, cobalt-light label, violet-light emphasis */
.pg--away{background:var(--nearblack)}
.pg--away .eyebrow{color:var(--cobalt-light)}
.pg--away .h-page em{color:var(--violet-light)}
/* Restaurants and nights out: label and itinerary times cobalt-light, emphasis violet-light */
.pg--dates .eyebrow,.pg--dates .glimpse time{color:var(--cobalt-light)}
.pg--dates .h-page em{color:var(--violet-light)}
/* Final brand reveal: near-black ground (no glow), "Wingman." violet-light, waitlist link cobalt-light with its underline and focus ring */
.pg--reveal{background:var(--nearblack)}
.h-reveal em{color:var(--violet-light)}
.reveal-actions .btn--gold,.reveal-actions .btn--gold:hover,.reveal-actions .btn--gold:focus-visible{color:var(--cobalt-light)}
.reveal-actions .btn--gold::after{background:var(--cobalt-light)}
.reveal-actions .btn--gold:focus-visible{outline-color:var(--cobalt-light)}
/* App demonstration: near-black ground (no gradient), cobalt-light label and selected tab, violet-light emphasis. The phone is not touched. */
.pg--try{background:var(--nearblack)}
.pg--try .eyebrow,.demo-tabs button[aria-selected="true"]{color:var(--cobalt-light)}
.pg--try .h-page em{color:var(--violet-light)}
@media (max-width:899px){.demo-tabs button[aria-selected="true"]{text-decoration-color:var(--cobalt-light)}}
/* Waitlist (scoped to #join, so the venue enquiry form and other pages keep their styling): clean white, violet emphasis, restrained cobalt accents */
#join{background:#fff}
#join .h-section em{color:var(--violet)}
#join .form,#join .done{background:#fff;border-color:#D4D8DF}
#join .field input,#join .field select,#join .field textarea{background:#fff;border-color:#8B919C}
#join .field input:focus,#join .field select:focus,#join .field textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(53,103,214,.2)}
#join .interests label span{border-color:#8B919C}
#join .interests label input:checked+span{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
#join .interests label input:focus-visible+span{outline-color:var(--cobalt)}
#join .check input{accent-color:var(--cobalt)}
#join .btn--ink{--bg:var(--nearblack);--fg:#fff;--bd:var(--nearblack)}
#join .btn--ink:hover{--bg:var(--cobalt);--bd:var(--cobalt)}
#join .btn--ink:focus-visible{outline-color:var(--cobalt)}
/* Footer (shared by every page): near-black, cobalt-light headings and link states, violet-light tagline */
.foot{background:var(--nearblack)}
.foot h2{color:var(--cobalt-light)}
.foot-line{color:var(--violet-light)}
.foot a:hover,.foot .linklike:hover,.foot a:focus-visible,.foot .linklike:focus-visible{color:var(--cobalt-light)}
.foot a:focus-visible,.foot .linklike:focus-visible{outline-color:var(--cobalt-light)}
/* Cookie banner (shared by every page): near-black panel, neutral border, filled cobalt Accept all (violet on hover), cobalt-light link and focus ring. Colour only: size, spacing and type are unchanged. */
.consent-in{background:var(--nearblack);border-color:var(--line-dark)}
.consent-in a{color:var(--cobalt-light)}
.consent-in :focus-visible{outline-color:var(--cobalt-light)}
.consent-in .btn--ghost-light{--fg:#fff;--bd:#8B919C}
.consent-in .btn--ghost-light:hover{--bd:#fff}
.consent-in .btn--gold{--bg:var(--cobalt);--fg:#fff;--bd:var(--cobalt)}
.consent-in .btn--gold:hover{--bg:var(--violet);--bd:var(--violet)}
/* Cookie preferences dialog and the other light surfaces (colour only; size, spacing and wording unchanged): Reject non-essential readable on white, Save choices filled cobalt (violet on hover), neutral off switches, cobalt on switches and focus rings */
.prefs :focus-visible,.join :focus-visible,.page-body :focus-visible{outline-color:var(--cobalt)}
.prefs .btn--ghost{--fg:var(--ink);--bd:#8B919C}
.prefs .btn--ghost:hover{--bd:var(--ink)}
.prefs .btn--ink{--bg:var(--cobalt);--fg:#fff;--bd:var(--cobalt)}
.prefs .btn--ink:hover{--bg:var(--violet);--bd:var(--violet)}
.switch:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

/* ANSWERS: "Wingman at a glance" under the waitlist (what it is, who it is for, where, what joining means), and "coming soon" in the hero eyebrow. */
.soon-tag::before{content:" · ";white-space:pre}
.soon-tag[hidden]{display:none}
@media (max-width:759px){.soon-tag{display:block}.soon-tag::before{content:none}}
.join:has(+ .faq){padding-bottom:clamp(40px,5vw,70px)}
.faq{background:#fff;color:var(--ink);color-scheme:light;padding-bottom:clamp(90px,11vw,150px)}
.faq .eyebrow{color:var(--cobalt)}
.faq .h-section{font-size:clamp(2.2rem,4vw,3.4rem);margin-top:12px}
.faq .h-section em{color:var(--violet)}
.faq .venue-points{margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(36px,6vw,90px)}
.faq .venue-points a{color:var(--ink);font-weight:600;text-underline-offset:3px}
@media (max-width:899px){.faq .venue-points{grid-template-columns:minmax(0,1fr)}}
.page-hero h1[tabindex="-1"]:focus{outline:none}
.page-hero .form-status.is-error{color:#ff9aa6}   /* the default rose is 3.0:1 on the near-black hero (confirm and unsubscribe pages); this is 8:1 */