/* ============================================================
   Make My Edits — palette + type sampled from the hero video
   ============================================================ */

/* Real headings that carry the page's structure for search engines and
   screen readers, where the visual design already says it another way. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

:root{
  --ink:        #08060a;
  --ink-2:      #0e0b12;
  --ink-3:      #141019;

  /* the three moods the hero video cycles through */
  --flame:      #e2561c;
  --flame-hot:  #ff7a2f;
  --azure:      #1f4ecd;
  --azure-hot:  #3d82ff;
  --violet:     #7b3fa0;
  --magenta:    #e0457b;

  --paper:      #ffffff;
  --paper-70:   rgba(255,255,255,.70);
  --paper-46:   rgba(255,255,255,.46);
  --paper-16:   rgba(255,255,255,.16);
  --paper-08:   rgba(255,255,255,.08);
  --paper-04:   rgba(255,255,255,.045);

  --shell:      min(1180px, 100% - 2.5rem);
  --r-lg:       26px;
  --r-pill:     999px;

  --ease:       cubic-bezier(.22,.9,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the ambient wash that keeps every section related to the video */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(70vw 60vh at 12% 4%,  rgba(226,86,28,.26), transparent 62%),
    radial-gradient(70vw 60vh at 92% 40%, rgba(31,78,205,.24), transparent 62%),
    radial-gradient(80vw 60vh at 45% 105%,rgba(224,69,123,.20), transparent 60%),
    var(--ink);
}
/* the faint concentric arcs that sit behind the video subject */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background:
    repeating-radial-gradient(circle at 50% 78%,
      transparent 0 118px,
      rgba(255,255,255,.035) 118px 119px);
  mask-image:radial-gradient(circle at 50% 78%, #000 12%, transparent 72%);
}

img,svg,video{ display:block; max-width:100%; }
svg{ width:100%; height:100%; }

h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
p{ margin:0; }

::selection{ background:var(--flame); color:#fff; }

:focus-visible{
  outline:2px solid var(--flame-hot);
  outline-offset:3px;
  border-radius:6px;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  --bd:#111;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.72rem .82rem .72rem 1.45rem;
  border:0; border-radius:var(--r-pill);
  font:inherit; font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  color:var(--paper); background:rgba(12,10,14,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--paper-16);
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), 0 14px 34px -14px rgba(0,0,0,.9); }
.btn:active{ transform:scale(.97); }

.btn-dot{
  display:grid; place-items:center;
  width:30px; height:30px; padding:7px;
  border-radius:var(--r-pill);
  background:var(--paper); color:#0b0a0d;
  transition:transform .4s var(--ease);
}
.btn .btn-dot{ transform:translateX(calc(var(--near, 0) * 3px)); }

.btn-solid{
  background:linear-gradient(100deg, var(--flame) 0%, var(--flame-hot) 55%, #ff9a4d 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 18px 40px -20px rgba(226,86,28,.95);
}
.btn-solid .btn-dot{ background:#120a06; color:#fff; }

.btn-ghost{
  padding:.72rem 1.5rem;
  background:var(--paper-04);
}

/* ── Nav stripe ────────────────────────────────────────── */
.stripe{
  position:sticky; top:0; z-index:60;
  background:rgba(9,7,11,.86);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border-bottom:1px solid var(--paper-08);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* the thin colour rule that ties the bar to the film below it */
.stripe::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--flame), var(--magenta) 38%, var(--violet) 62%, var(--azure));
  opacity:.85;
}
.stripe.is-stuck{
  box-shadow:0 18px 40px -28px #000;
  border-color:var(--paper-16);
}

.stripe-inner{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; gap:1.25rem;
  min-height:64px;
  padding:.55rem 0;
}

.brand{ display:flex; align-items:center; gap:.6rem; color:var(--paper); text-decoration:none; }
.brand-mark{
  display:grid; place-items:center; width:32px; height:32px; padding:7px;
  border-radius:11px; color:#fff;
  background:linear-gradient(140deg, var(--flame), var(--magenta) 55%, var(--azure));
}
.brand-name{ font-weight:800; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; }

/* tabs */
.tabs{
  display:flex; align-items:center; gap:.3rem;
  margin-left:auto;
  padding:.28rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--paper-08);
}
.tab{
  position:relative;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .95rem;
  border-radius:var(--r-pill);
  color:var(--paper-70); text-decoration:none;
  font-size:.8rem; font-weight:600; white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.tab-ico{ display:grid; place-items:center; width:16px; height:16px; opacity:.75; transition:opacity .3s var(--ease); }
.tab:hover{ color:var(--paper); background:rgba(255,255,255,.08); }
.tab:hover .tab-ico{ opacity:1; }
.tab.is-active{
  color:var(--paper);
  background:linear-gradient(140deg, rgba(226,86,28,.9), rgba(224,69,123,.75));
  box-shadow:0 12px 26px -16px rgba(226,86,28,.95);
}
.tab.is-active .tab-ico{ opacity:1; }

.stripe-cta{ padding:.5rem .5rem .5rem 1.1rem; font-size:.7rem; }
.stripe-cta .btn-dot{ width:26px; height:26px; padding:6px; }

/* ── Hero: full-bleed film, no overlay ─────────────────── */
.hero{
  position:relative;
  height:calc(100svh - var(--stripe-h, 64px));
  min-height:420px;
  overflow:hidden;
  background:#000;
}
.hero-video{
  width:100%; height:100%;
  object-fit:cover;
}

/* ── Hero copy ───────────────────────────────────────────
   `--u` is one displayed frame-height, set by the script. Every
   size below is a fraction of it, so the type keeps its place in
   the composition no matter how the film is cropped.            */
.hero{
  --u:720px;
  --accent:  #12a6ad;   /* first scene, until the script takes over */
  --accent-2:#f0308a;
}

.hero-stage{
  position:absolute; left:50%; top:12%;
  transform:translateX(-50%);
  /* no max-width: the box must shrink-wrap the longest line so the
     script can measure it and scale `--u` down until it fits */
  width:max-content;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.hero-stage.is-live{ opacity:1; }

.hero-title{
  font-size:calc(var(--u) * var(--title, .1));
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.94;
  text-transform:uppercase;
  color:#fff;
  /* the same soft extrude the artwork used */
  text-shadow:
    0 .012em 0 rgba(0,0,0,.4),
    0 .028em 0 rgba(0,0,0,.3),
    0 .05em .09em rgba(0,0,0,.45),
    0 .16em .32em rgba(0,0,0,.5);
}
.hero-title .line{ display:block; white-space:nowrap; }

.hero-sub{
  margin-top:calc(var(--u) * .028);
  font-size:calc(var(--u) * var(--sub, .032));
  font-weight:500;
  line-height:1.45;
  color:rgba(255,255,255,.94);
  text-shadow:0 .06em .18em rgba(0,0,0,.6);
}

/* ── Hero CTA ──────────────────────────────────────────── */
.hero-cta{
  position:relative;
  margin-top:calc(var(--u) * .042);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.75em;
  height:calc(var(--u) * .058);
  padding:0 .42em 0 1.55em;
  border-radius:var(--r-pill);
  text-decoration:none;
  white-space:nowrap;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    #0d0b10;
  color:var(--paper);
  font-size:calc(var(--u) * .0185);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 18px 40px -18px rgba(0,0,0,.95);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* the accent glow picks up whichever scene is on screen */
.hero-cta::before{
  content:""; position:absolute; inset:-2px;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  opacity:0; filter:blur(9px);
  transition:opacity .4s var(--ease);
}
.hero-cta:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 24px 50px -18px rgba(0,0,0,1);
}

.hero-cta-label{ position:relative; z-index:1; }
.hero-cta-dot{
  position:relative; z-index:1;
  flex:none;
  display:grid; place-items:center;
  width:2.1em; height:2.1em; padding:.58em;
  border-radius:var(--r-pill);
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  color:#fff;
  transition:transform .4s var(--ease);
}
.hero-cta .hero-cta-dot{ transform:translateX(calc(var(--near, 0) * 3px)); }

/* ── Scene arrows ──────────────────────────────────────── */
.hero-nav{
  position:absolute; top:50%; z-index:3;
  transform:translateY(-50%);
  display:grid; place-items:center;
  width:clamp(42px, 4vw, 56px); aspect-ratio:1;
  padding:clamp(11px, 1.1vw, 15px);
  border:0; border-radius:var(--r-pill);
  background:rgba(10,8,12,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  color:var(--paper);
  cursor:pointer;
  transition:background .3s var(--ease), box-shadow .3s var(--ease),
             transform .3s var(--ease), opacity .3s var(--ease);
}
.hero-nav-prev{ left:clamp(.75rem, 2.4vw, 2rem); }
.hero-nav-next{ right:clamp(.75rem, 2.4vw, 2rem); }

.hero-nav:hover{
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 16px 34px -16px rgba(0,0,0,.9);
}
.hero-nav:active{ transform:translateY(-50%) scale(.94); }

/* ── Scene dots ────────────────────────────────────────── */
.hero-dots{
  position:absolute; left:50%; bottom:clamp(1.1rem, 3vh, 2.2rem); z-index:3;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .6rem;
  border-radius:var(--r-pill);
  background:rgba(10,8,12,.45);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.hero-dot{
  width:28px; height:5px;
  padding:0; border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition:background .35s var(--ease), width .35s var(--ease);
}
.hero-dot:hover{ background:rgba(255,255,255,.6); }
.hero-dot.is-active{
  width:44px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ── Corner pill ───────────────────────────────────────── */
.hero-corner{
  position:absolute; top:calc(var(--u) * .038); right:calc(var(--u) * .04);
  z-index:2;
  display:inline-flex; align-items:center; gap:.7em;
  height:calc(var(--u) * .05);
  padding:0 .35em 0 1.35em;
  border-radius:var(--r-pill);
  background:rgba(10,8,12,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  color:var(--paper); text-decoration:none;
  font-size:calc(var(--u) * .0155);
  font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transition:opacity .5s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hero-corner.is-live{ opacity:1; }
.hero-corner:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.hero-corner-dot{
  display:grid; place-items:center;
  width:1.95em; height:1.95em; padding:.55em;
  border-radius:var(--r-pill);
  background:#fff; color:#0b0a0d;
}
/* only a soft blend into the page beneath — the film itself stays untouched */
.hero-fade{
  position:absolute; inset:auto 0 0; height:22%;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(8,6,10,.55) 55%, var(--ink) 100%);
}

/* ── Panels (the minimise / maximise stack) ────────────── */
.stack{
  width:var(--shell);
  margin:clamp(3.5rem, 8vw, 6.5rem) auto 5rem;
  display:flex; flex-direction:column;
  gap:1.1rem;
}

.panel{
  position:relative;
  scroll-margin-top:calc(var(--stripe-h, 64px) + 18px);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px var(--paper-08);
  overflow:hidden;
  transition:box-shadow .5s var(--ease), transform .5s var(--ease), background .5s var(--ease);
}
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(226,86,28,.18), transparent 45%, rgba(31,78,205,.16));
  opacity:0; transition:opacity .55s var(--ease);
}
.panel:hover{ box-shadow:inset 0 0 0 1px var(--paper-16); }
.panel.is-open{
  background:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 40px 80px -50px #000;
}
.panel.is-open::before{ opacity:1; }

.panel-head{
  display:flex; align-items:flex-start; gap:1.35rem;
  width:100%;
  padding:clamp(1.5rem, 3.2vw, 2.4rem);
  border:0; background:none; color:inherit;
  font:inherit; text-align:left;
  cursor:pointer;
}
.panel-head-static{ cursor:default; }

.panel-index{
  flex:none;
  font-size:.74rem; font-weight:800;
  letter-spacing:.2em;
  color:var(--flame-hot);
  padding-top:.45rem;
}

.panel-heads{ display:block; flex:1 1 auto; min-width:0; }

.panel-title{
  display:block;
  font-size:clamp(1.25rem, 3.1vw, 2.15rem);
  font-weight:800; letter-spacing:-.028em; line-height:1.12;
  text-wrap:balance;
}
.panel-teaser{
  display:block;
  margin-top:.6rem;
  max-width:52ch;
  font-size:.94rem; font-weight:500;
  color:var(--paper-70);
  text-wrap:pretty;
}

.panel-toggle{
  flex:none;
  display:grid; place-items:center;
  width:44px; height:44px; padding:11px;
  border-radius:var(--r-pill);
  color:var(--paper);
  background:var(--paper-08);
  box-shadow:inset 0 0 0 1px var(--paper-16);
  transition:transform .55s var(--ease), background .4s var(--ease);
}
.panel-head:hover .panel-toggle{ background:rgba(255,255,255,.16); }
.panel.is-open .panel-toggle{
  transform:rotate(135deg);
  background:linear-gradient(140deg, var(--flame), var(--flame-hot));
}

/* height animation without a fixed max-height */
.panel-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .62s var(--ease);
}
.panel-body > *{ overflow:hidden; }
.panel.is-open .panel-body{ grid-template-rows:1fr; }
.panel-body-static{ grid-template-rows:1fr; }

.panel-body-inner{
  padding:0 clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.9rem, 3.5vw, 2.8rem);
}
.panel-head-static + .panel-body .panel-body-inner{ padding-top:.25rem; }

.lede{
  max-width:60ch;
  margin-bottom:2.2rem;
  font-size:1.02rem;
  color:rgba(255,255,255,.78);
  text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════
   Service pages — same shell as the home page, no film. The
   headline is real text here, so it can be the h1 directly.
   ══════════════════════════════════════════════════════════ */
.phero{
  position:relative;
  padding:clamp(3rem, 7vw, 5.5rem) 0 clamp(2.2rem, 5vw, 3.5rem);
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--accent, #e2561c) 34%, transparent), transparent 62%),
    radial-gradient(120% 140% at 88% 10%, color-mix(in srgb, var(--accent-2, #ff8f3d) 28%, transparent), transparent 60%),
    var(--ink);
}
.phero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(to bottom, transparent, var(--ink));
  pointer-events:none;
}
.phero-inner{ position:relative; z-index:1; width:var(--shell); margin-inline:auto; }

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-bottom:1.1rem;
  font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.crumb a{ color:rgba(255,255,255,.78); text-decoration:none; }
.crumb a:hover{ color:#fff; }
.crumb span[aria-current]{ color:#fff; }

.phero h1{
  max-width:19ch;
  font-size:clamp(2.1rem, 6.2vw, 3.9rem);
  font-weight:900; line-height:1.02;
  letter-spacing:-.03em; text-transform:uppercase;
  text-wrap:balance;
  margin-bottom:1.1rem;
}
.phero .lede{ font-size:clamp(1rem, 2vw, 1.14rem); margin-bottom:1.7rem; }
.phero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* content blocks reuse the panel shell so the pages feel like one site */
.block{
  border-radius:22px;
  background:rgba(255,255,255,.028);
  box-shadow:inset 0 0 0 1px var(--paper-08);
  padding:clamp(1.7rem, 3.4vw, 2.6rem) clamp(1.5rem, 3.2vw, 2.4rem);
}
.block > h2{
  font-size:clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight:800; letter-spacing:-.015em;
  margin-bottom:.8rem;
}
.block > h3{ font-size:1.02rem; margin:1.6rem 0 .4rem; }
.block p{ max-width:68ch; color:rgba(255,255,255,.78); text-wrap:pretty; }
.block p + p{ margin-top:.9rem; }
.block .cards{ margin-top:1.6rem; margin-bottom:.2rem; }

.ticks{ list-style:none; margin-top:1.3rem; display:grid; gap:.7rem; }
.ticks li{
  position:relative; padding-left:1.7rem;
  color:rgba(255,255,255,.8); max-width:66ch;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:.6rem; height:.6rem; border-radius:50%;
  background:linear-gradient(145deg, var(--flame), var(--magenta));
}

/* FAQ — plain details/summary, styled to match the panels */
.faq{ margin-top:1.4rem; display:grid; gap:.6rem; }
.faq details{
  border-radius:14px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--paper-08);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:1rem 1.2rem;
  font-weight:700; font-size:.97rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; float:right; font-weight:600; opacity:.6;
}
.faq details[open] summary::after{ content:"−"; }
.faq details > p{ padding:0 1.2rem 1.1rem; font-size:.92rem; }

/* ── Services: always-open hub linking the three service pages ── */
.services{
  position:relative;
  border-radius:22px;
  background:rgba(255,255,255,.028);
  box-shadow:inset 0 0 0 1px var(--paper-08);
  overflow:hidden;
}
.services-inner{
  padding:clamp(1.7rem, 3.4vw, 2.6rem) clamp(1.5rem, 3.2vw, 2.4rem) clamp(.6rem, 1.6vw, 1rem);
}
.services-h{
  font-size:clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight:800;
  letter-spacing:-.015em;
  margin-bottom:.6rem;
}
.services-lede{ margin-bottom:1.7rem; }

/* the whole card is the target; the visible link keeps the keyword in text */
.services .card{ position:relative; display:flex; flex-direction:column; }
.services .card h3 a{
  color:inherit; text-decoration:none;
}
.services .card h3 a::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
}
.services .card p{ flex:1; }
/* A label, not a link — the h3's stretched anchor already covers the card,
   and a second anchor underneath it would sit dead below the overlay. */
.card-link{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
  color:var(--flame-hot, #ff7a2f);
}
.card:hover .card-link{ color:#fff; }

/* ── Cards ─────────────────────────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  gap:.9rem;
  margin-bottom:2.4rem;
}
.card{
  padding:1.5rem 1.35rem;
  border-radius:18px;
  background:rgba(255,255,255,.038);
  box-shadow:inset 0 0 0 1px var(--paper-08);
  transition:transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--paper-16), 0 26px 46px -30px #000;
}
.card-icon{
  display:grid; place-items:center;
  width:44px; height:44px; padding:11px;
  margin-bottom:1rem;
  border-radius:14px; color:#fff;
  background:linear-gradient(145deg, rgba(226,86,28,.9), rgba(224,69,123,.75));
  box-shadow:0 14px 30px -16px rgba(226,86,28,.9);
}
.card:nth-child(2) .card-icon{ background:linear-gradient(145deg, rgba(224,69,123,.9), rgba(123,63,160,.8)); box-shadow:0 14px 30px -16px rgba(224,69,123,.9); }
.card:nth-child(3) .card-icon{ background:linear-gradient(145deg, rgba(123,63,160,.9), rgba(31,78,205,.85)); box-shadow:0 14px 30px -16px rgba(123,63,160,.9); }
.card:nth-child(4) .card-icon{ background:linear-gradient(145deg, rgba(31,78,205,.95), rgba(61,130,255,.85)); box-shadow:0 14px 30px -16px rgba(31,78,205,.9); }

.card h3{ font-size:1.02rem; margin-bottom:.45rem; }
.card p{ font-size:.88rem; color:var(--paper-70); }

/* ── Stats ─────────────────────────────────────────────── */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1rem;
  padding-top:1.9rem;
  border-top:1px solid var(--paper-08);
}
.stat b{
  display:block;
  font-size:clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight:900; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(120deg, #fff, #ffb283);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{
  display:block; margin-top:.4rem;
  font-size:.76rem; font-weight:600;
  letter-spacing:.06em;
  color:var(--paper-46);
}

/* ── Form ──────────────────────────────────────────────── */
.form{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem 1.15rem;
  margin-top:1.6rem;
}
@media (min-width: 700px){
  .form{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.field{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.field-wide{ grid-column:1 / -1; }

.field label{
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-70);
}
.field .hint{
  font-weight:500; letter-spacing:.02em; text-transform:none;
  color:var(--paper-46);
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:.85rem 1rem;
  border:0; border-radius:14px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--paper-08);
  color:var(--paper);
  font:inherit; font-size:.94rem; font-weight:500;
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.32); }

.field input:hover,
.field select:hover,
.field textarea:hover{ background:rgba(255,255,255,.07); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1.5px var(--flame-hot), 0 0 0 4px rgba(255,122,47,.14);
}

.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:16px;
  padding-right:2.6rem;
}
.field select option{ background:#141019; color:#fff; }

/* date pickers read as white on the dark shell */
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1); opacity:.55; cursor:pointer;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  box-shadow:inset 0 0 0 1.5px rgba(255,94,94,.85);
}
.err{
  min-height:0; font-size:.72rem; font-weight:600;
  color:#ff8d8d; opacity:0;
  transition:opacity .25s var(--ease);
}
.field.is-invalid .err{ opacity:1; }

.form-foot{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  margin-top:.5rem;
}
.form-note{ font-size:.8rem; color:var(--paper-46); }

.form-success{
  grid-column:1 / -1;
  margin-top:.4rem; padding:.95rem 1.2rem;
  border-radius:14px;
  background:rgba(255,122,47,.14);
  box-shadow:inset 0 0 0 1px rgba(255,122,47,.4);
  font-size:.92rem; font-weight:600;
}
.form-success[hidden]{ display:none; }

/* ── Steps ─────────────────────────────────────────────── */
.steps{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; gap:.5rem;
}
.step{
  position:relative;
  display:flex; align-items:flex-start; gap:1.15rem;
  padding:1.1rem 1.15rem;
  border-radius:18px;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.step:hover{ background:rgba(255,255,255,.05); transform:translateX(4px); }

/* the connecting rail */
.step::after{
  content:""; position:absolute;
  left:calc(1.15rem + 23px); top:calc(1.1rem + 46px); bottom:-.5rem;
  width:1px;
  background:linear-gradient(var(--paper-16), transparent);
}
.step:last-of-type::after{ display:none; }

.step-icon{
  flex:none;
  display:grid; place-items:center;
  width:46px; height:46px; padding:12px;
  border-radius:15px; color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--paper-16);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}


.step h3{
  display:flex; align-items:baseline; gap:.65rem;
  font-size:1.02rem; margin-bottom:.3rem;
}
.step-n{
  font-size:.68rem; font-weight:800;
  letter-spacing:.16em;
  color:var(--flame-hot);
}
.step p{ font-size:.9rem; color:var(--paper-70); max-width:62ch; text-wrap:pretty; }

.process-cta{ margin-top:2rem; }

/* ── Cinematic plate ─────────────────────────────
   Edge-to-edge looping plane after the process section. The
   spec's edge fades are applied as a mask rather than a black
   overlay, so the film dissolves into the page's own wash
   instead of sitting on a hard #050505 slab.                  */
.plate{
  /* how far the plate reaches back up behind the "How it works" panel */
  --overlap:clamp(220px, 32vh, 430px);

  position:relative;
  z-index:-1;                 /* the panel keeps painting on top of it */
  width:100%;
  height:calc(clamp(320px, 54vh, 620px) + var(--overlap));
  margin-top:calc(-1 * var(--overlap));
  overflow:hidden;
  pointer-events:none;
}
.plate-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;

  /* vertical: measured bottom fade from the comp, plus a top fade
     so the plate reads as background rather than a cut-in block */
  --fade-y:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.28) 9%,
      rgba(0,0,0,.72) 18%,
      #000 27%,
      #000 78.8%,
      rgba(0,0,0,.77) 79.6%,
      rgba(0,0,0,.55) 81.4%,
      rgba(0,0,0,.25) 83.3%,
      rgba(0,0,0,.16) 85.2%,
      rgba(0,0,0,.112) 88%,
      rgba(0,0,0,.095) 91%,
      rgba(0,0,0,.04) 95%,
      transparent 100%);
  /* side letterbox, widened from the comp's 4.6% — this clip is far
     brighter than the reference, so a narrow ramp leaves a hard edge */
  --fade-x:linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.55) 4%,
      #000 11%,
      #000 89%,
      rgba(0,0,0,.55) 96%,
      transparent 100%);

  -webkit-mask-image:var(--fade-y), var(--fade-x);
  mask-image:var(--fade-y), var(--fade-x);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

@media (max-aspect-ratio: 11/10){
  .plate{ height:clamp(300px, 42vh, 520px); }
  .plate-video{ object-position:43% center; }
}
@media (max-aspect-ratio: 11/10) and (min-width: 600px){
  .plate-video{ object-position:44% center; }
}

/* ── Footer ────────────────────────────────────────────── */
.foot{
  width:var(--shell); margin:0 auto;
  padding:2.4rem 0 3rem;
  display:flex; flex-wrap:wrap; gap:.6rem;
  border-top:1px solid var(--paper-08);
  font-size:.78rem; font-weight:600;
  letter-spacing:.06em;
  color:var(--paper-46);
}
.foot-sep{ color:var(--flame-hot); }

/* ── Reveal animations ─────────────────────────────────── */
.reveal,
.stagger{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.reveal[data-delay="1"]{ transition-delay:120ms; }
.reveal[data-delay="2"]{ transition-delay:240ms; }
.reveal[data-delay="3"]{ transition-delay:360ms; }
.reveal.in,
.stagger.in{ opacity:1; transform:none; }

.panel-head{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.panel.in .panel-head{ opacity:1; transform:none; }

/* ── Proximity ───────────────────────────────────────────
   The script writes `--near` (0 → 1 as the pointer closes in) and
   `--px` / `--py` (pointer position inside the box) onto each
   registered element. Everything below reads only those, so the
   whole page reacts before you even reach it.                   */

/* every button: lifts, swells and picks up a light under the cursor */
.btn, .tab, .hero-cta, .hero-corner, .hero-nav, .panel-toggle, .hero-dot,
.hero-title, .panel, .step-icon{ --near:0; }

.btn{
  position:relative;
  transform:translateY(calc(var(--near) * -3px)) scale(calc(1 + var(--near) * .035));
}
.btn::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(9rem circle at var(--px, 50%) var(--py, 50%),
    rgba(255,255,255,.26), transparent 68%);
  opacity:var(--near);
  transition:opacity .3s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn-solid::before{ background:radial-gradient(9rem circle at var(--px,50%) var(--py,50%), rgba(255,255,255,.4), transparent 66%); }

.tab{
  transform:translateY(calc(var(--near) * -2px)) scale(calc(1 + var(--near) * .04));
  transition:color .3s var(--ease), background .3s var(--ease), transform .35s var(--ease);
}

.hero-cta{
  transform:translateY(calc(var(--near) * -2px)) scale(calc(1 + var(--near) * .05));
}
.hero-cta::before{ opacity:calc(var(--near) * .8); }

.hero-corner{
  transform:translateY(calc(var(--near) * -2px)) scale(calc(1 + var(--near) * .045));
}

.hero-nav{
  transform:translateY(-50%) scale(calc(1 + var(--near) * .10));
}
.hero-nav-prev{ transform:translateY(-50%) translateX(calc(var(--near) * -4px)) scale(calc(1 + var(--near) * .10)); }
.hero-nav-next{ transform:translateY(-50%) translateX(calc(var(--near) *  4px)) scale(calc(1 + var(--near) * .10)); }

.hero-dot{
  box-shadow:0 0 calc(var(--near) * 14px) rgba(255,255,255,calc(var(--near) * .55));
}

.panel-toggle{ transform:scale(calc(1 + var(--near) * .12)); }
.panel.is-open .panel-toggle{ transform:rotate(135deg) scale(calc(1 + var(--near) * .12)); }

/* the hero headline picks up a bloom and a slow sheen */
.hero-title{
  position:relative;
  transform:scale(calc(1 + var(--near) * .014));
  text-shadow:
    0 .012em 0 rgba(0,0,0,.4),
    0 .028em 0 rgba(0,0,0,.3),
    0 .05em .09em rgba(0,0,0,.45),
    0 .16em .32em rgba(0,0,0,.5),
    0 0 calc(var(--near) * .38em) rgba(255,255,255,calc(var(--near) * .55)),
    0 0 calc(var(--near) * .9em)  rgba(255,196,146,calc(var(--near) * .40));
  transition:transform .55s var(--ease), text-shadow .55s var(--ease);
}
.hero-title::after{
  content:""; position:absolute; inset:-8% -14%;
  pointer-events:none;
  background:linear-gradient(104deg,
    transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  mix-blend-mode:overlay;
  opacity:calc(var(--near) * .85);
  animation:sheen 3.4s ease-in-out infinite;
}
@keyframes sheen{
  0%       { transform:translateX(-75%); }
  60%,100% { transform:translateX(75%); }
}

/* panel headings — "How it works" leans in as you approach */
.panel-title{
  display:block;
  transform:translateX(calc(var(--near) * 5px));
  text-shadow:0 0 calc(var(--near) * 26px) rgba(255,255,255,calc(var(--near) * .45));
  transition:transform .5s var(--ease), text-shadow .5s var(--ease);
}
.panel-index{
  transform:translateY(calc(var(--near) * -3px));
  opacity:calc(.65 + var(--near) * .35);
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.panel{
  box-shadow:inset 0 0 0 1px rgba(255,255,255, calc(.08 + var(--near) * .12));
}

/* the seven step marks: light up near the cursor, drift the rest of the time */
.step-icon{
  transform:scale(calc(1 + var(--near) * .14)) rotate(calc(var(--near) * -6deg));
  background:
    linear-gradient(145deg,
      rgba(226,86,28, var(--near)),
      rgba(255,122,47, var(--near))),
    rgba(255,255,255,.06);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255, calc(.16 + var(--near) * .2)),
    0 calc(var(--near) * 16px) calc(var(--near) * 32px) calc(var(--near) * -16px) rgba(226,86,28,.95);
  transition:transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.step-icon svg{ animation:float 4.6s ease-in-out infinite; }
.step:nth-of-type(2) .step-icon svg{ animation-delay:-.6s; }
.step:nth-of-type(3) .step-icon svg{ animation-delay:-1.2s; }
.step:nth-of-type(4) .step-icon svg{ animation-delay:-1.8s; }
.step:nth-of-type(5) .step-icon svg{ animation-delay:-2.4s; }
.step:nth-of-type(6) .step-icon svg{ animation-delay:-3.0s; }
.step:nth-of-type(7) .step-icon svg{ animation-delay:-3.6s; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-2.5px); }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1040px){
  :root{ --shell: calc(100% - 1.6rem); }
  .stripe-cta{ display:none; }
  .tabs{ margin-left:auto; }
}
@media (max-width: 860px){
  .panel-head{ gap:.9rem; }
  .panel-index{ display:none; }
  .tab{ padding:.5rem .75rem; }
}
@media (max-width: 700px){
  .stripe-inner{ flex-wrap:wrap; gap:.7rem; padding:.7rem 0; }
  .tabs{ margin:0; width:100%; justify-content:space-between; }
  .tab{ flex:1; justify-content:center; }
  .form-foot{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 460px){
  .tab-label{ display:none; }
  .tab{ padding:.6rem 0; }
  .tab-ico{ width:18px; height:18px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal,.stagger,.panel-head{ opacity:1; transform:none; }
  /* the film is held on a still frame by the script rather than hidden */
  .hero-stage,.hero-corner{ opacity:1; }
}