/* ============================================================
   BORG SITES, tryborgsites.com "scroll film" landing page
   A three act scroll film: The Reveal, The Street, From Blank
   to Brilliant, then the free preview form.

   Self contained: this is a SEPARATE deploy root, so the design
   system is inlined here and every asset is local. Values mirror
   site/assets/css/tokens.css (the LIGHT, premium system with the
   brand gradient used as accents only). No external hosts.
   ============================================================ */

/* ---------- Self hosted fonts (local only, no CDN) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/sora-800.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/fraunces-italic-var.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --brand-1:#2E7DF6; --brand-2:#7B3FE4; --brand-3:#E0359E; --brand-4:#F24BB5;
  --accent:#FF6B4A;

  --bg:#F5F6FB; --surface:#FFFFFF; --panel:#EEF1F9; --panel-2:#E4E8F4;
  /* --faint is one step darker than the shared token so every small caption and label
     clears WCAG AA (4.5:1) on both --bg and --surface. Same hue, same role. */
  --ink:#0B1031; --dim:#48527A; --faint:#626C93;
  --hairline:rgba(11,16,49,.10); --hairline-2:rgba(11,16,49,.06); --hairline-strong:rgba(11,16,49,.16);
  --dark:#0A0E27;

  --grad-brand:linear-gradient(115deg,var(--brand-1) 0%,var(--brand-2) 40%,var(--brand-3) 74%,var(--brand-4) 100%);
  --grad-brand-deep:linear-gradient(115deg,#2668CC 0%,#6634BD 40%,#BA2C83 74%,#C93E96 100%);
  --grad-text:linear-gradient(100deg,#2E7DF6 0%,#7B3FE4 40%,#E0359E 74%,#F24BB5 100%);
  --grad-soft:linear-gradient(120deg,rgba(46,125,246,.14),rgba(224,53,158,.12));

  --shadow-soft:0 30px 60px -30px rgba(20,26,60,.18);
  --shadow-lift:0 44px 90px -40px rgba(20,26,60,.30);
  --shadow-sm:0 12px 30px -18px rgba(20,26,60,.22);
  --glow-brand:0 24px 70px -24px rgba(123,63,228,.45);

  --font-display:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;

  --radius:18px; --radius-lg:24px; --radius-xl:30px; --radius-xs:10px; --radius-pill:999px;
  --container:1120px; --container-narrow:720px;
  --section-y:clamp(4rem,3rem + 6vw,7.5rem);
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.4rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.06;letter-spacing:-.022em;font-weight:700}
::selection{background:rgba(123,63,228,.18)}
:focus-visible{outline:2px solid var(--brand-1);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:var(--container-narrow)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.grad-text{color:var(--brand-2);-webkit-text-fill-color:currentColor}}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-2);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad-brand);flex:none}
.lead{color:var(--dim);font-size:clamp(1.02rem,.96rem + .4vw,1.22rem);line-height:1.6;max-width:56ch}
.skip-link{position:fixed;left:-999px;top:0;z-index:300;background:var(--surface);color:var(--ink);padding:.7rem 1.1rem;border-radius:0 0 var(--radius-xs) 0;box-shadow:var(--shadow-sm)}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1;
  padding:.92rem 1.5rem;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease-out),box-shadow .3s,background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--grad-brand-deep);color:#fff;box-shadow:var(--glow-brand);text-shadow:0 1px 2px rgba(11,16,49,.35)}
.btn-primary:hover{box-shadow:0 30px 80px -22px rgba(123,63,228,.6)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:rgba(11,16,49,.2);box-shadow:var(--shadow-soft)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.05rem}
.btn[disabled]{opacity:.55;pointer-events:none}

.link-arrow{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--brand-2);transition:gap .25s var(--ease-out),color .2s}
.link-arrow svg{width:1.05em;height:1.05em;flex:none}
.link-arrow:hover{gap:.65rem;color:var(--ink)}

/* ============================================================
   HEADER, minimal chrome
   The cold open has NO chrome: under motion the header starts
   hidden and is faded in by the film once the footage has
   settled into its browser frame.
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:120;
  border-bottom:1px solid transparent;
  transition:background .3s,box-shadow .3s,border-color .3s,color .3s;
}
.hdr.scrolled{background:rgba(245,246,251,.84);border-bottom-color:var(--hairline-2)}
@media (min-width:761px){
  .hdr.scrolled{-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
}
/* On the night street the chrome cannot sit there as a bright slab, so while
   act two is pinned the bar goes to night ink and the wordmark to light.
   Toggled by the act two ScrollTrigger, so it never applies without motion. */
.hdr.on-dark,.hdr.on-dark.scrolled{
  background:rgba(8,11,30,.74);border-bottom-color:rgba(255,255,255,.1);color:#F4F6FF;
}
.hdr.on-dark .grad-text{--grad-text:linear-gradient(100deg,#79ADFF 0%,#B98CFF 42%,#FF6FC2 76%,#FF8ED2 100%)}
.hdr.on-dark .brand .mark{filter:drop-shadow(0 4px 12px rgba(224,53,158,.45))}
.hdr-in{display:flex;align-items:center;gap:1rem;height:70px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.025em}
.brand .mark{width:32px;height:32px;border-radius:50%;background:url("/assets/img/borg360-mark.png") center/contain no-repeat;position:relative;filter:drop-shadow(0 4px 10px rgba(123,63,228,.3));flex:none}
.brand .mark__orbit{position:absolute;inset:-3px;border-radius:50%;pointer-events:none}
.brand .mark__orbit::after{content:"";position:absolute;top:-2px;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:var(--grad-brand);box-shadow:0 0 5px 1px rgba(224,53,158,.55)}
@media (prefers-reduced-motion:no-preference){.brand .mark__orbit{animation:brandOrbit 8s linear infinite}}
@keyframes brandOrbit{to{transform:rotate(360deg)}}
.brand b{font-weight:800}
.hdr-spacer{margin-left:auto}
.hdr .btn{padding:.68rem 1.2rem;font-size:.9rem}
.motion .hdr{opacity:0;pointer-events:none}

/* ============================================================
   ACT SHELL
   ============================================================ */
.act{position:relative}
/* pinned acts use 100vh (the LARGE viewport unit on phones) so a retracting
   mobile URL bar can never expose the next act under the pinned stage */
.act-stage{position:relative;height:100vh;min-height:600px;overflow:hidden}

/* ============================================================
   ACT 1, THE REVEAL
   Opens full bleed inside the Bistro film, then the footage
   scales and insets into a browser frame: it was a website.
   ============================================================ */
.act1{background:var(--bg)}
.a1-stage{isolation:isolate}
.a1-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.a1-glow::before,.a1-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)}
.a1-glow::before{width:52vw;height:52vw;left:-10vw;top:-8vw;background:radial-gradient(circle at 40% 40%,rgba(46,125,246,.34),transparent 62%)}
.a1-glow::after{width:46vw;height:46vw;right:-8vw;top:4vh;background:radial-gradient(circle at 50% 50%,rgba(224,53,158,.3),rgba(123,63,228,.2) 45%,transparent 66%)}

.a1-inner{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.4rem,3.4vw,2.6rem);padding:5.5rem var(--gutter) 4rem;
}

.a1-browser{
  position:relative;width:min(1180px,92vw);flex:none;
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lift);
  will-change:transform;
}
.a1-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .95rem;background:linear-gradient(var(--panel),#e7ebf6);border-bottom:1px solid var(--hairline-2)}
.a1-bar i{width:11px;height:11px;border-radius:50%;background:#cfd6e8;flex:none}
.a1-bar i:nth-child(1){background:#ff6058}.a1-bar i:nth-child(2){background:#ffbd2e}.a1-bar i:nth-child(3){background:#28c93f}
.a1-url{margin-left:.6rem;flex:1;min-width:0;height:22px;border-radius:999px;background:var(--surface);border:1px solid var(--hairline-2);display:flex;align-items:center;padding:0 .7rem;font:500 .72rem/1 var(--font-body);color:var(--faint);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.a1-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dark)}
.a1-view video,.a1-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.a1-vig{position:absolute;inset:0;pointer-events:none;opacity:.2;
  background:radial-gradient(122% 100% at 50% 42%,transparent 42%,rgba(4,6,20,.62) 100%)}

/* The mock restaurant site that lives inside the stage from frame one:
   a translucent header and a hero line, drawn in OUR markup over the
   footage, so the opening frame reads as a real homepage and not as a
   video. It sits INSIDE .a1-view, so the pull back shrinks the header,
   the copy and the film together, as one website. Purely decorative:
   aria-hidden in the markup, never focusable, never clickable. */
.a1-site{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;pointer-events:none;color:#fff}
.a1-site-bar{
  flex:none;display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.4rem);
  padding:clamp(.62rem,1.4vw,1rem) clamp(.85rem,2.2vw,1.8rem);
  background:linear-gradient(180deg,rgba(6,9,26,.6) 0%,rgba(6,9,26,.14) 100%);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.a1-site-mark{
  font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:clamp(.8rem,.62rem + .64vw,1.2rem);letter-spacing:.005em;white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.a1-site-mark em{font-style:italic;color:#E9C97E}
.a1-site-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.75rem,1.8vw,1.6rem)}
.a1-site-link{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.5rem,.42rem + .28vw,.68rem);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(0,0,0,.55);white-space:nowrap;
}
.a1-site-burger{
  display:none;position:relative;width:17px;height:11px;
  border-top:2px solid rgba(255,255,255,.86);border-bottom:2px solid rgba(255,255,255,.86);
}
.a1-site-burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.86)}
.a1-site-pill{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.5rem,.42rem + .28vw,.68rem);letter-spacing:.14em;text-transform:uppercase;
  color:#2C1D07;background:linear-gradient(180deg,#F1D89D,#D9AE5F);
  border-radius:var(--radius-pill);padding:.46em 1.05em;white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.85);
}
.a1-site-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8% 4%}
.a1-site-h{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,.9rem + 2.9vw,3.6rem);line-height:1.04;letter-spacing:-.015em;
  text-shadow:0 4px 34px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5);
}
.a1-site-sub{
  margin-top:clamp(.7rem,1.4vw,1.1rem);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.54rem,.44rem + .3vw,.78rem);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.84);text-shadow:0 2px 16px rgba(0,0,0,.65);
}

.a1-say{text-align:center;width:min(820px,92vw);margin-inline:auto}
.a1-title{font-size:clamp(2.1rem,1.35rem + 3.4vw,4.2rem);font-weight:800;line-height:1.0;letter-spacing:-.035em}
.a1-title .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.a1-title .w{display:inline-block}
.a1-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font:600 .66rem/1 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  pointer-events:none;
}
.a1-cue .mouse{width:22px;height:34px;border:2px solid var(--hairline-strong);border-radius:14px;position:relative}
.a1-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:var(--brand-2);transform:translateX(-50%);animation:cueDrop 1.6s var(--ease-out) infinite}
@keyframes cueDrop{0%{opacity:0;transform:translate(-50%,-3px)}30%{opacity:1}70%{opacity:1;transform:translate(-50%,8px)}100%{opacity:0;transform:translate(-50%,10px)}}

/* motion pre states: the film starts full bleed with nothing around it */
.motion .a1-glow{opacity:0}
.motion .a1-inner{display:block;padding:0}
.motion .a1-browser{position:absolute;left:50%;top:0;border-radius:0;box-shadow:none}
.motion .a1-bar{opacity:0}
.motion .a1-vig{opacity:1}
/* The settled frame docks in the UPPER band and the headline rises in the clear
   space below it, so the two never share a pixel. The frame is anchored by its
   own centre (see restFrac/restScale in film.js); the headline is anchored by
   its top, which is why this is `top` and not `bottom`. */
.motion .a1-say{position:absolute;left:50%;top:57vh;transform:translateX(-50%);z-index:5;width:min(820px,92vw);opacity:0}
/* NOTE: no CSS transform pre-state on the title words. GSAP parses an existing computed
   transform into its own x/y and would keep it forever; the fromTo below owns it instead. */
.motion .a1-cue{opacity:0}

/* ============================================================
   ACT 2, THE STREET
   The concept board's night street, rebuilt in Borg Sites
   colour: a deep navy sky over a brand gradient horizon (blue,
   violet, pink ember, never amber), ink skyline silhouettes with
   lit window grids, awninged shopfronts on wet asphalt, each
   window playing a real template film. The last shop is dark
   until its neon comes on.
   The section head owns a band at the top of the stage that the
   street can never reach: --head-band is subtracted from the
   rail AND from the window height, so no plaque, awning or pane
   can ever share a pixel with the headline.
   ============================================================ */
.act2{background:linear-gradient(180deg,#05070F 0%,#0A0E27 44%,#0C1231 100%)}
.a2-stage{
  isolation:isolate;
  --ground-h:clamp(88px,19vh,190px);
  --head-band:clamp(250px,33vh,340px);
  --plaque-block:2.75rem;                 /* plaque height plus its margin */
  --awning-h:clamp(10px,1.5vh,16px);
  --pool-h:clamp(20px,3.4vh,40px);
  --track-lift:clamp(10px,2vh,22px);
  --winh-max:clamp(230px,44vh,420px);
  /* the stage is 100vh but never shorter than .act-stage's min-height, and the
     fit maths has to use the same number the layout does */
  --stage-h:max(100vh,600px);
  /* the pane can never grow tall enough to reach the head band */
  --winh:min(
    var(--winh-max),
    calc(var(--stage-h) - var(--head-band) - var(--plaque-block) - var(--awning-h)
         - var(--pool-h) - var(--ground-h) + var(--track-lift) - 14px)
  );
}

/* night sky: stars, a cold moon, a brand gradient horizon */
.a2-sky{position:absolute;left:0;right:0;top:0;height:44%;z-index:0;pointer-events:none;overflow:hidden}
.a2-sky::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(118% 84% at 50% 100%,rgba(224,53,158,.34) 0%,rgba(123,63,228,.24) 32%,rgba(46,125,246,.13) 58%,transparent 82%),
    linear-gradient(180deg,rgba(3,5,14,.6) 0%,transparent 52%)}
.a2-stars{position:absolute;left:0;right:0;top:0;height:82%;z-index:0;opacity:.5;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(198,216,255,.6) 0 1px,transparent 1.6px);
  background-size:53px 47px,89px 71px;
  background-position:0 0,23px 17px;
  -webkit-mask-image:linear-gradient(180deg,#000 4%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 4%,transparent 94%)}
.a2-moon{position:absolute;right:11%;top:11%;z-index:0;width:clamp(10px,1.5vw,16px);aspect-ratio:1;border-radius:50%;
  background:#EAF0FF;box-shadow:0 0 14px 4px rgba(234,240,255,.4),0 0 74px 26px rgba(123,63,228,.16)}

/* ink silhouettes with lit window grids, two tone: cold panes and warm ones */
.a2-skyline{position:absolute;left:0;bottom:0;width:180%;height:100%;will-change:transform}
.a2-skyline span{position:absolute;bottom:0;background:#04060F;border-radius:3px 3px 0 0}
.a2-skyline span::after{content:"";position:absolute;inset:7% 9% 0;opacity:var(--lit,.3);
  background-image:
    radial-gradient(circle,rgba(200,222,255,.85) 0 24%,transparent 26%),
    radial-gradient(circle,rgba(255,206,238,.7) 0 24%,transparent 26%);
  background-size:5px 7px,10px 14px;
  background-position:0 0,2px 3px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),#000 42%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),#000 42%)}
.a2-skyline .s1{left:2%;width:6%;height:38%;opacity:.94;--lit:.3}
.a2-skyline .s2{left:9%;width:4%;height:53%;opacity:.86;--lit:.24}
.a2-skyline .s3{left:14%;width:8%;height:29%;opacity:.97;--lit:.34}
.a2-skyline .s4{left:23%;width:5%;height:46%;opacity:.9;--lit:.26}
.a2-skyline .s5{left:29%;width:7%;height:34%;opacity:.94;--lit:.32}
.a2-skyline .s6{left:37%;width:4%;height:58%;opacity:.82;--lit:.2}
.a2-skyline .s7{left:42%;width:9%;height:32%;opacity:.97;--lit:.36}
.a2-skyline .s8{left:52%;width:5%;height:48%;opacity:.88;--lit:.26}
.a2-skyline .s9{left:58%;width:7%;height:36%;opacity:.94;--lit:.3}
.a2-skyline .s10{left:66%;width:4%;height:55%;opacity:.84;--lit:.22}
.a2-skyline .s11{left:71%;width:8%;height:30%;opacity:.97;--lit:.34}
.a2-skyline .s12{left:81%;width:5%;height:44%;opacity:.9;--lit:.26}
.a2-skyline .s13{left:87%;width:7%;height:38%;opacity:.94;--lit:.3}
/* the brand wash that pools at the buildings' feet, along the whole horizon */
.a2-haze{position:absolute;left:0;right:0;bottom:0;height:56%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(46,125,246,.17) 0%,rgba(123,63,228,.15) 44%,rgba(224,53,158,.2) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 44%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 44%,#000 100%)}

/* wet asphalt */
.a2-ground{position:absolute;left:0;right:0;bottom:0;height:var(--ground-h);z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px),
    linear-gradient(180deg,#141830 0%,#0A0D20 58%,#05070F 100%);
  border-top:1px solid rgba(123,63,228,.22)}
.a2-ground::before{content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:linear-gradient(90deg,transparent,rgba(198,214,255,.5) 44%,transparent)}
.a2-ground::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px)}

/* The head's own band, above the street from top to bottom. The box stops
   28px short of the band so the 26px rise it enters on can never dip a single
   pixel into the row below. */
.a2-head{
  position:absolute;left:0;right:0;top:0;height:calc(var(--head-band) - 28px);z-index:3;
  padding:clamp(4.6rem,10vh,6.6rem) var(--gutter) 0;text-align:center;pointer-events:none;
}
.a2-head::before{content:"";position:absolute;inset:0 -6% -26%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 86% at 50% 44%,rgba(4,7,22,.8),rgba(4,7,22,.42) 54%,transparent 78%)}
.a2-head .eyebrow{color:#C7A9FF}
.a2-head h2{
  font-size:clamp(1.6rem,1.15rem + 2vw,2.7rem);font-weight:800;letter-spacing:-.03em;color:#F5F7FF;
  --grad-text:linear-gradient(100deg,#79ADFF 0%,#B98CFF 42%,#FF6FC2 76%,#FF8ED2 100%);
}
.a2-head p{margin-top:.7rem;color:rgba(219,226,255,.76);font-size:clamp(.95rem,.9rem + .25vw,1.06rem)}

/* the gliding row, below the head band */
.a2-rail{position:absolute;left:0;right:0;bottom:0;top:var(--head-band);z-index:2;display:flex;align-items:flex-end;overflow:hidden}
.a2-track{display:flex;align-items:flex-end;gap:clamp(18px,3vw,46px);width:max-content;padding-bottom:calc(var(--ground-h) - var(--track-lift));will-change:transform}
.a2-lead{flex:none;width:10vw}
/* the trail parks the vacant window in the centre of the screen at the end of the run */
.a2-trail{flex:none;width:38vw}

.win{
  position:relative;flex:none;display:flex;flex-direction:column;align-items:stretch;
  width:calc(var(--winh) * .8);
}
/* a storefront whose picture has not been delivered yet never renders */
.win[hidden]{display:none}
/* the sign plaque: a lit plate, legible against the night */
.win-plaque{
  align-self:center;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,#FBFCFF,#E8ECF9);
  border:1px solid rgb(var(--glow) / .55);border-radius:var(--radius-pill);
  padding:.42rem .9rem;margin-bottom:.55rem;white-space:nowrap;max-width:100%;
  box-shadow:0 0 18px rgb(var(--glow) / .35),0 10px 22px -14px rgba(0,0,0,.9);
}
.win-plaque b{font-family:var(--font-display);font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.win-plaque span{font-size:.74rem;color:var(--faint);font-weight:500}
.win-plaque i{width:7px;height:7px;border-radius:50%;background:rgb(var(--glow));flex:none}
.win-awning{
  flex:none;height:var(--awning-h);border-radius:5px 5px 0 0;
  clip-path:polygon(2.5% 0,97.5% 0,100% 100%,0 100%);
  background:repeating-linear-gradient(90deg,rgb(var(--glow) / .62) 0 8px,rgba(8,11,28,.92) 8px 16px);
  box-shadow:0 3px 10px -3px rgba(0,0,0,.75);
}
.win-glass{
  position:relative;flex:none;height:var(--winh);overflow:hidden;border-radius:3px 3px 5px 5px;
  background:#05070F;
  border:1px solid rgba(123,63,228,.55);
  box-shadow:
    0 0 0 4px rgba(6,9,24,.9),
    0 0 30px rgb(var(--glow) / .34),
    0 0 84px rgb(var(--glow) / .16),
    inset 0 0 26px rgba(0,0,0,.5);
}
.win-glass video,.win-glass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.95)}
/* the glass itself: a raking highlight, then the warm spill that keeps the film readable */
.win-sheen{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(114deg,rgba(255,255,255,.2) 0 15%,rgba(255,255,255,.03) 33%,transparent 52%),
    radial-gradient(118% 56% at 50% 114%,rgba(255,243,231,.24),transparent 62%),
    radial-gradient(132% 64% at 50% 112%,rgb(var(--glow) / .36),transparent 70%)}
.win-sheen::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,240,224,.18) calc(50% - .5px),rgba(255,240,224,.18) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(36% - .5px),rgba(255,240,224,.13) calc(36% - .5px),rgba(255,240,224,.13) calc(36% + .5px),transparent calc(36% + .5px))}
/* THE SHOP'S OWN WEBSITE, behind the glass.
   Act one's trick at window scale: a slim translucent nav, a hero line over
   the middle of the film, a thin footer strip. Everything is sized in em off
   one root that scales with the pane, so it reads at any window size and
   still sits under the film rather than over it. Decorative: aria-hidden in
   the markup, never focusable, never clickable. */
.win-site{
  position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;color:#fff;
  font-size:clamp(6px,calc(var(--winh) / 36),11px);
}
.win-site-bar{
  flex:none;display:flex;align-items:center;gap:.9em;padding:.62em .85em;white-space:nowrap;
  background:linear-gradient(180deg,rgba(6,9,26,.62) 0%,rgba(6,9,26,.06) 100%);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.win-site-mark{
  display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--font-serif);font-style:italic;font-weight:600;font-size:1.5em;letter-spacing:.005em;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.win-site-mark::before{content:"";width:.36em;height:.36em;border-radius:50%;background:rgb(var(--glow));box-shadow:0 0 .5em rgb(var(--glow) / .9)}
.win-site-nav{margin-left:auto;display:flex;align-items:center;gap:.95em}
.win-site-nav i{
  font-style:normal;font-family:var(--font-display);font-weight:600;font-size:.92em;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);text-shadow:0 1px 5px rgba(0,0,0,.6);
}
.win-site-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 7%}
.win-site-h{
  font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:2.35em;line-height:1.06;letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.68),0 1px 3px rgba(0,0,0,.5);
}
.win-site-h::after{content:"";display:block;width:2.4em;height:.16em;margin:.6em auto .55em;border-radius:.16em;
  background:rgb(var(--glow));box-shadow:0 0 .7em rgb(var(--glow) / .85)}
.win-site-tag{
  font-family:var(--font-display);font-weight:600;font-size:.92em;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.win-site-foot{
  flex:none;display:flex;align-items:center;justify-content:center;gap:1.1em;padding:.75em 0;
  background:linear-gradient(0deg,rgba(6,9,26,.6) 0%,rgba(6,9,26,0) 100%);
}
.win-site-foot i{width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 0 .5em rgb(var(--glow) / .95)}

/* the reflection pool on the wet asphalt, tinted by its own shop */
.win-pool{position:relative;height:var(--pool-h);flex:none}
.win-pool::before{content:"";position:absolute;left:-14%;right:-14%;top:0;bottom:-10px;
  opacity:.8;filter:blur(7px);
  background:
    linear-gradient(180deg,rgb(var(--glow) / .55) 0%,rgb(var(--glow) / .18) 44%,transparent 84%),
    radial-gradient(58% 96% at 50% 0%,rgb(var(--glow) / .36),transparent 74%)}
.win-pool::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-10px;
  background:repeating-linear-gradient(180deg,rgba(4,6,16,.6) 0 1px,transparent 1px 4px);
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 10%,transparent 92%)}

/* the vacant shop: the one unlit window on the street */
.win--vacant .win-plaque{background:linear-gradient(180deg,rgba(21,26,54,.92),rgba(11,15,36,.92));border-color:rgba(255,255,255,.14);box-shadow:none}
.win--vacant .win-plaque b{color:rgba(226,232,255,.44)}
.win--vacant .win-plaque span{color:rgba(226,232,255,.32)}
.win--vacant .win-plaque i{background:rgba(226,232,255,.22)}
.win--vacant .win-awning{background:repeating-linear-gradient(90deg,rgba(150,158,190,.5) 0 8px,rgba(8,11,28,.95) 8px 16px);opacity:.34}
.win--vacant .win-glass{
  background:linear-gradient(180deg,#0B0E22 0%,#05070F 72%);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(6,9,24,.9),0 0 26px rgb(var(--glow) / .12),inset 0 0 30px rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
}
.win-neon{
  position:relative;z-index:1;padding:0 8%;text-align:center;
  font-family:var(--font-display);font-weight:800;line-height:1.15;letter-spacing:-.02em;
  font-size:clamp(1rem,.7rem + 1.1vw,1.5rem);
  color:#E0359E;
  text-shadow:0 0 5px rgba(255,255,255,.55),0 0 14px rgba(224,53,158,.95),0 0 34px rgba(224,53,158,.6),0 0 70px rgba(224,53,158,.32);
}
/* the flicker lives on the INNER span so the scrubbed timeline keeps sole
   ownership of the neon's own opacity (no property fight) */
.win-neon i{font-style:normal;display:inline-block}
@media (prefers-reduced-motion:no-preference){.win-neon i{animation:a2Flick 7s linear infinite}}
@keyframes a2Flick{0%,92%,100%{opacity:1}93%{opacity:.42}94%{opacity:1}95.5%{opacity:.5}96.5%{opacity:1}}
.win--vacant .win-pool::before{opacity:.5}
.win-lit{position:absolute;inset:-2px;pointer-events:none;border-radius:6px;
  box-shadow:0 0 0 1px rgba(224,53,158,.55),0 0 34px rgba(224,53,158,.45),0 0 90px rgba(123,63,228,.34)}

/* motion pre states */
.motion .win{will-change:opacity}
.motion .win-neon{opacity:0}
.motion .win-lit{opacity:0}
.motion .win--vacant .win-pool{opacity:0}

/* ============================================================
   ACT 3, FROM BLANK TO BRILLIANT
   A white card assembles itself as the visitor scrolls.
   ============================================================ */
.act3{--dawn:1;background:linear-gradient(180deg,#E7EBF7 0%,var(--bg) 26%,var(--bg) 100%)}
/* THE DAWN. Act two's night does not cut to act three's white page, it breaks
   into morning: the band starts on the exact navy act two ends on, passes
   through a violet hour and arrives at #E7EBF7 by 16.5vh, with a brand ember
   burning at the horizon. It rides up the screen as act three rises, then the
   film scrubs --dawn to 0 while the card assembles, so no stripe is left
   behind. Without motion --dawn stays 1 and the blend simply holds. */
.act3::before{
  content:"";position:absolute;left:0;right:0;top:0;height:34vh;z-index:0;pointer-events:none;
  opacity:var(--dawn,1);
  background:
    radial-gradient(126% 15vh at 50% 0%,rgba(224,53,158,.24),rgba(123,63,228,.12) 46%,transparent 78%),
    linear-gradient(180deg,#0C1231 0,#1A1740 4vh,#3A2A62 8vh,#7B6BA7 11.5vh,#C4C6E0 14vh,#E7EBF7 16.5vh,rgba(231,235,247,0) 30vh);
}
.a3-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.4rem,3vw,2.4rem);padding:5.5rem var(--gutter) 4rem}
.a3-stage::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(78vw,900px);aspect-ratio:1.5;pointer-events:none;
  background:radial-gradient(closest-side,rgba(123,63,228,.13),rgba(46,125,246,.06) 52%,transparent 76%);filter:blur(10px)}

.a3-card{
  position:relative;z-index:1;width:min(760px,100%);overflow:hidden;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
}
.a3-accent{position:absolute;left:0;right:0;top:0;height:4px;z-index:2;background:#DCE1EE}
.a3-accent i{position:absolute;inset:0;background:var(--grad-brand);transform-origin:left center}
.a3-top{display:flex;gap:.42rem;padding:1rem 1.15rem .1rem}
.a3-top i{width:9px;height:9px;border-radius:50%;background:#E2E6F1}
.a3-body{padding:clamp(1rem,2.6vw,1.7rem) clamp(1.15rem,3vw,2.1rem) clamp(1.3rem,3vw,2.1rem)}
.a3-eyebrow{display:block;font-family:var(--font-display);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.a3-h{margin-top:.75rem;font-size:clamp(1.3rem,.95rem + 1.7vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;min-height:1.25em}
.a3-caret{display:inline-block;width:2px;height:.82em;margin-left:.08em;vertical-align:-.04em;background:var(--brand-2);opacity:0}
.motion .a3-card.is-typing .a3-caret{opacity:1;animation:a3Blink 1s steps(1,end) infinite}
@keyframes a3Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.a3-sub{margin-top:.85rem;color:var(--dim);font-size:clamp(.94rem,.9rem + .25vw,1.04rem);max-width:48ch}
.a3-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.3vw,13px);margin-top:clamp(1.1rem,2.4vw,1.7rem)}
.a3-grid figure{position:relative;margin:0}
.a3-grid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--panel)}
.a3-grid figcaption{
  position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:var(--radius-pill);
  padding:.24rem .55rem;box-shadow:0 4px 12px -6px rgba(20,26,60,.5);
  font:700 .56rem/1.1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.a3-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;opacity:0;
  background:linear-gradient(102deg,transparent 0 28%,rgba(46,125,246,.42) 40%,rgba(255,255,255,.95) 50%,rgba(224,53,158,.4) 62%,transparent 78%)}

/* THE SHOWCASE, four different kinds of business.
   Wide 16:9 plates that cascade in one after another, each stepped off the
   one above so the stack reads as a deck of real sites rather than a grid of
   tiles. Hidden until every plate exists (see the gate in film.js), and then
   it simply takes the gallery's place. */
.a3-show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.5vw,15px);margin-top:clamp(1.1rem,2.4vw,1.7rem)}
.a3-show[hidden]{display:none}
.a3-show figure{position:relative;margin:0;transform:translateY(calc(var(--i,0) * 3px))}
.a3-show img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;
  border-radius:9px;background:var(--panel);border:1px solid var(--hairline);
  box-shadow:0 18px 34px -22px rgba(20,26,60,.55);
}
.a3-show figcaption{
  position:absolute;left:7px;bottom:7px;max-width:calc(100% - 14px);
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:var(--radius-pill);
  padding:.24rem .58rem;box-shadow:0 4px 12px -6px rgba(20,26,60,.5);
  font:700 .56rem/1.1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.a3-promise{
  position:relative;z-index:1;max-width:34ch;text-align:center;
  font-size:clamp(1.15rem,.9rem + 1.05vw,1.85rem);font-weight:800;letter-spacing:-.028em;line-height:1.2;
}
.a3-promise .serif{font-weight:500;display:block;margin-top:.35rem;font-size:.94em}

/* motion pre states (opacity only; transforms are owned by the fromTo tweens) */
.motion .a3-card{opacity:0}
.motion .a3-accent i{opacity:0}
.motion .a3-grid figure,.motion .a3-show figure{opacity:0}
.motion .a3-promise{opacity:0}

/* ============================================================
   FINALE, the free preview form
   ============================================================ */
.sec{padding:var(--section-y) 0;position:relative}
.sec--tight{padding:clamp(2.5rem,2rem + 3vw,4.5rem) 0}
.finale{background:linear-gradient(180deg,var(--bg) 0%,var(--panel) 46%,var(--bg) 100%)}
.sec-head{max-width:60ch}
.sec-head.center{text-align:center;margin:0 auto}
.sec-head h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.1rem);font-weight:800;margin-top:.6rem;letter-spacing:-.03em}
.sec-head p{margin-top:1.05rem}
.sec-head.center p{margin-left:auto;margin-right:auto}

.lead-card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lift);padding:clamp(1.6rem,1.2rem + 2vw,2.8rem);position:relative;overflow:hidden;
}
.lead-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-brand)}
.lead-head{margin-bottom:1.6rem}
.lead-head h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-top:.5rem}
.lead-head p{color:var(--dim);margin-top:.8rem;font-size:1.02rem}

.form-grid{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
.field{display:grid;gap:.45rem}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink)}
.field label .opt{color:var(--faint);font-weight:500;font-size:.82rem}
.field .req{color:var(--brand-3)}
.input,.textarea{
  width:100%;padding:.9rem 1rem;background:var(--surface);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-xs);
  font-family:var(--font-body);font-size:1rem;line-height:1.45;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.textarea:focus{outline:none;border-color:var(--brand-1);box-shadow:0 0 0 4px rgba(46,125,246,.16)}
.textarea{resize:vertical;min-height:120px}
.field-error{color:#A8380F;font-size:.82rem;font-weight:500;margin-top:.1rem}
.input.invalid,.textarea.invalid{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,107,74,.14)}

/* honeypot: visually and programmatically hidden, never shown to people */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.form-foot{margin-top:1.6rem;display:flex;flex-direction:column;gap:1rem}
.form-submit-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.form-fine{color:var(--faint);font-size:.86rem;line-height:1.55;max-width:52ch}
.form-fine b{color:var(--dim);font-weight:600}
.form-status{display:none;border-radius:var(--radius-xs);padding:.9rem 1.1rem;font-size:.94rem;line-height:1.5}
.form-status.is-error{display:block;background:#FDECE6;border:1px solid #F6C9B6;color:#8E2A0B}
.form-status.is-busy{display:block;background:var(--panel);border:1px solid var(--hairline);color:var(--dim)}

.assure-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.assure{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--dim);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:.5rem .95rem}
.assure svg{width:15px;height:15px;color:var(--brand-2)}

/* secondary contact: for people who would rather write than fill in a form.
   Same caption type as .form-fine; the address takes the .link-arrow
   treatment (Sora 600, brand-2 -> ink on hover). Contrast on --surface:
   --faint 5.1:1, --brand-2 5.7:1, both clear WCAG AA. */
.mail-alt{margin-top:1.15rem;color:var(--faint);font-size:.86rem;line-height:1.55}
.mail-alt a{font-family:var(--font-display);font-weight:600;color:var(--brand-2);transition:color .2s}
.mail-alt a:hover{color:var(--ink)}

/* trust strip: built, hosted, handled */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
.trio .titem{border-top:2px solid var(--hairline);padding-top:1.2rem;position:relative}
.trio .titem::before{content:"";position:absolute;top:-2px;left:0;width:46px;height:2px;background:var(--grad-brand)}
.trio .titem .n{font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)}
.trio .titem h3{font-size:1.28rem;margin:.55rem 0 .5rem}
.trio .titem p{color:var(--dim);font-size:.96rem}
.explore-foot{margin-top:clamp(2rem,4vw,3rem);text-align:center}

/* ---------- scroll reveal for the finale (no pinning here) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
[data-stagger] > *{transition-delay:calc(var(--i,0) * 70ms)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--hairline);padding:3rem 0 2.4rem}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot .brand{font-size:1.14rem}
.foot-tag{color:var(--dim);margin-top:.85rem;max-width:38ch;font-size:.93rem}
.foot-addr{color:var(--faint);margin-top:.85rem;font-size:.84rem;line-height:1.6;font-style:normal}
.foot-links{display:flex;flex-wrap:wrap;gap:1.6rem}
.foot-links a{color:var(--dim);font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:var(--ink)}
.foot .mail-alt{margin-top:.85rem;font-size:.84rem;line-height:1.6}
.foot-bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--hairline-2);color:var(--faint);font-size:.84rem}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.thanks{min-height:72vh;display:grid;place-items:center;text-align:center;padding:clamp(4.5rem,7vw,7rem) 0 clamp(3rem,6vw,6rem)}
.thanks-inner{max-width:640px;margin:0 auto}
.thanks-badge{width:82px;height:82px;border-radius:50%;margin:0 auto 1.8rem;display:grid;place-items:center;background:var(--grad-brand);box-shadow:var(--glow-brand);color:#fff}
.thanks-badge svg{width:38px;height:38px}
.thanks h1{font-size:clamp(2.1rem,1.5rem + 2.8vw,3.4rem);font-weight:800;letter-spacing:-.03em}
.thanks .lead{margin:1.2rem auto 0}
.thanks-steps{list-style:none;margin:2.4rem auto 0;max-width:460px;text-align:left;display:grid;gap:.9rem}
.thanks-steps li{display:flex;gap:.85rem;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:1rem 1.15rem;box-shadow:var(--shadow-sm)}
.thanks-steps .tn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.85rem}
.thanks-steps .tt{font-size:.96rem;color:var(--dim)}
.thanks-steps .tt b{color:var(--ink);font-weight:600;font-family:var(--font-display)}
.thanks-cta{margin-top:2.6rem;display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .trio{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:760px){
  .act-stage{min-height:540px}
  .a1-view{aspect-ratio:3/4}
  .a1-browser{width:94vw}
  /* the mock site collapses its nav to a burger, the way a real one would */
  .a1-site-link{display:none}
  .a1-site-burger{display:block}
  .a1-cue{bottom:5vh}
  .a2-sky{height:40%}
  .a2-stage{--head-band:clamp(253px,32vh,306px);--winh-max:clamp(210px,38vh,340px);--stage-h:max(100vh,540px)}
  .a2-head{padding-top:clamp(4rem,9vh,5.4rem)}
  .a2-lead{width:6vw}
  /* narrower screen, so a smaller trail still parks the vacant window centre stage */
  .a2-trail{width:18vw}
  /* the act three card must fit one phone screen: square tiles, tighter stage */
  .a3-stage{padding-top:4.6rem;padding-bottom:2rem;gap:1.1rem}
  .a3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a3-grid img{aspect-ratio:1/1}
  .a3-h{min-height:2.4em}
  .a3-sub{font-size:.9rem;margin-top:.7rem}
  .a3-sweep{mix-blend-mode:normal;opacity:0}
}
@media (max-width:620px){
  .form-grid{grid-template-columns:1fr}
  .form-submit-row .btn{width:100%}
}
/* very narrow phones: the mock header keeps its wordmark and its Reserve
   pill on one line by dropping the burger, the same way it dropped the three
   links at 760px */
@media (max-width:380px){
  .a1-site-burger{display:none}
}
/* narrow phones: the header must fit the wordmark and one CTA on a single line */
@media (max-width:440px){
  .hdr-in{height:64px;gap:.6rem}
  .brand{font-size:1.02rem;gap:.45rem}
  .brand .mark{width:27px;height:27px}
  .hdr .btn{padding:.58rem .9rem;font-size:.8rem}
}
/* short viewports: keep every pinned act inside one screen */
@media (max-height:760px) and (min-width:761px){
  .a3-stage{gap:1.1rem;padding-top:4.5rem;padding-bottom:2.5rem}
  .a3-card{width:min(660px,100%)}
  .a3-sub{display:none}
  .a3-h{min-height:1.25em}
  /* the deck lies down into a single row so the whole act still fits one screen */
  .a3-show{grid-template-columns:repeat(4,minmax(0,1fr))}
  .a3-show figure{transform:none}
}
@media (max-height:640px){
  .a3-sub{display:none}
  .a3-h{min-height:1.25em}
  .a3-stage{gap:.9rem;padding-top:4.2rem;padding-bottom:2rem}
  .a3-show{grid-template-columns:repeat(4,minmax(0,1fr))}
  .a3-show figure{transform:none}
}

/* ============================================================
   REDUCED MOTION, the film holds still and stays readable
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  /* height must be free to grow, but the decorative glows still have to be
     clipped sideways or the page gains a horizontal scrollbar (clip, not
     hidden, so the vertical axis stays visible) */
  .act-stage{height:auto;min-height:0;overflow:visible;overflow-x:clip;padding-top:clamp(5.5rem,9vw,7rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
  .a1-inner{height:auto;padding-top:0;padding-bottom:0}
  .a1-cue{display:none}
  .a1-vig{opacity:.16}
  .a2-stage{padding:clamp(5.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem)}
  .a2-sky,.a2-ground{display:none}
  .a2-head{position:static;height:auto;text-align:center;padding:0 var(--gutter) clamp(1.6rem,3vw,2.4rem)}
  .a2-head::before{display:none}
  .a2-rail{position:static;overflow:visible}
  .a2-track{width:100%;flex-wrap:wrap;justify-content:center;padding:0 var(--gutter);gap:clamp(1.4rem,3vw,2.4rem)}
  .a2-lead,.a2-trail{display:none}
  .win{--winh:clamp(240px,34vw,340px)}
  .win-pool{display:none}
  .a3-sweep{display:none}
  .reveal{opacity:1;transform:none}
}