/* ================= TOKENS =================
   Dark-first by intent. :root is dark; [data-theme="light"] redefines the same
   tokens. A light-OS visitor who has not chosen gets light via the media query,
   guarded so an explicit dark choice still wins. Every component reads tokens —
   no colour is defined only inside a theme block.                          */
:root{
  --ground:#070B14;
  --ink:#FFFFFF;
  --ink-2:#B7C1D6;
  --ink-3:#9AA3B5;
  --muted:#9a9a9a;

  /* cool accent — light, glow, focus */
  --accent:#A9C4FF;
  --accent-hi:#D5DEF2;
  --glow-1:rgba(170,200,255,.22);
  --glow-2:rgba(186,208,255,.38);
  --glow-3:rgba(186,208,255,.14);

  /* warm counter-accent — sequence, emphasis, the one word in the hero */
  --warm:#FF6A3D;
  --warm-ink:#FF7E56;   /* warm at small text sizes */
  --warm-soft:rgba(255,106,61,.13);
  --warm-line:rgba(255,106,61,.28);
  --warm-glow:rgba(255,106,61,.34);

  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --sel:rgba(169,196,255,.25);

  /* surfaces */
  --glass-base:rgba(255,255,255,.01);
  --glass-hi:rgba(255,255,255,.10);
  --glass-hi-2:rgba(255,255,255,.14);
  --edge-a:rgba(255,255,255,.45);
  --edge-b:rgba(255,255,255,.15);
  --surface:rgba(10,16,28,.44);
  --surface-2:rgba(255,255,255,.06);
  --surface-3:rgba(255,255,255,.04);
  --input-bg:rgba(255,255,255,.04);
  --input-bg-h:rgba(255,255,255,.06);
  --hdr-bg:#0A1220;

  /* field */
  --field-a:rgba(27,58,107,.42);
  --field-b:rgba(22,64,90,.34);
  --field-c:rgba(44,42,74,.30);
  --vignette:rgba(4,7,13,.74);
  --scrim-1:rgba(7,11,20,.90);
  --scrim-2:rgba(7,11,20,.62);
  --scrim-3:rgba(7,11,20,0);
  --grain-op:.05;

  /* particles (read by the canvases) */
  --p-r:238; --p-g:245; --p-b:255;
  --wave-op:.95;
  --p-gain:1;      /* ribbon + drift weight; the wordmark ignores it */

  /* buttons */
  --btn-a:#ffffff; --btn-b:#e7e7e7; --btn-c:#cfcfcf;
  --btn-fg:#0B111C; --btn-bd:#ffffff;
  --btn-ha:#ffffff; --btn-hb:#f3f6ff; --btn-hc:#d5def2; --btn-hbd:#f2f6ff;
  --btn-hi:rgba(255,255,255,.95);
  --ghost-a:rgba(255,255,255,.12); --ghost-b:rgba(0,0,0,.50); --ghost-c:rgba(150,170,200,.10);
  --ghost-bd:rgba(198,198,198,.55); --ghost-hi:rgba(255,255,255,.12);
  --ghost-ha:rgba(210,225,255,.18); --ghost-hb:rgba(0,0,0,.35); --ghost-hc:rgba(180,195,220,.16);
  --ghost-hbd:rgba(220,230,255,.80);
  --shine:rgba(255,255,255,.45);
  --badge-a:#5C6B8A; --badge-b:#26303F; --badge-c:#0A0E16; --badge-fg:#F2F2F2;

  --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif','Times New Roman',Times,serif;
  --expo:cubic-bezier(.16,1,.3,1);
}

:root[data-theme="light"]{
  --ground:#EEF1F7;
  --ink:#0B1220;
  --ink-2:#33405A;
  --ink-3:#5A6880;
  --muted:#5F6B7C;

  --accent:#2B57C4;
  --accent-hi:#1E43A6;
  --glow-1:rgba(43,87,196,.16);
  --glow-2:rgba(43,87,196,.26);
  --glow-3:rgba(43,87,196,.10);

  --warm:#D8451F;
  --warm-ink:#B83A16;   /* darker, clears AA at 11-14px */
  --warm-soft:rgba(216,69,31,.10);
  --warm-line:rgba(216,69,31,.26);
  --warm-glow:rgba(216,69,31,.26);

  --line:rgba(11,18,32,.16);
  --line-2:rgba(11,18,32,.09);
  --sel:rgba(43,87,196,.20);

  --glass-base:rgba(255,255,255,.40);
  --glass-hi:rgba(255,255,255,.95);
  --glass-hi-2:rgba(255,255,255,1);
  --edge-a:rgba(11,18,32,.20);
  --edge-b:rgba(11,18,32,.07);
  --surface:rgba(255,255,255,.64);
  --surface-2:rgba(11,18,32,.05);
  --surface-3:rgba(11,18,32,.035);
  --input-bg:rgba(255,255,255,.72);
  --input-bg-h:rgba(255,255,255,.92);
  --hdr-bg:#FFFFFF;

  --field-a:rgba(120,158,220,.30);
  --field-b:rgba(126,186,214,.24);
  --field-c:rgba(198,168,152,.24);
  --vignette:rgba(226,231,240,.66);
  --scrim-1:rgba(238,241,247,.92);
  --scrim-2:rgba(238,241,247,.64);
  --scrim-3:rgba(238,241,247,0);
  --grain-op:.035;

  --p-r:24; --p-g:38; --p-b:66;
  --wave-op:.88;
  --p-gain:.34;

  --btn-a:#1D2942; --btn-b:#141D31; --btn-c:#0B1220;
  --btn-fg:#F4F6FA; --btn-bd:#1D2942;
  --btn-ha:#26406F; --btn-hb:#1B3059; --btn-hc:#122145; --btn-hbd:#26406F;
  --btn-hi:rgba(255,255,255,.16);
  --ghost-a:rgba(255,255,255,.75); --ghost-b:rgba(255,255,255,.35); --ghost-c:rgba(43,87,196,.06);
  --ghost-bd:rgba(11,18,32,.20); --ghost-hi:rgba(255,255,255,.9);
  --ghost-ha:rgba(255,255,255,.95); --ghost-hb:rgba(238,243,255,.8); --ghost-hc:rgba(43,87,196,.10);
  --ghost-hbd:rgba(43,87,196,.55);
  --shine:rgba(255,255,255,.85);
  --badge-a:#33425E; --badge-b:#1C2739; --badge-c:#0B1220; --badge-fg:#F4F6FA;
}

@media(prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#EEF1F7;
    --ink:#0B1220; --ink-2:#33405A; --ink-3:#5A6880; --muted:#5F6B7C;
    --accent:#2B57C4; --accent-hi:#1E43A6;
    --glow-1:rgba(43,87,196,.16); --glow-2:rgba(43,87,196,.26); --glow-3:rgba(43,87,196,.10);
    --warm:#D8451F; --warm-ink:#B83A16; --warm-soft:rgba(216,69,31,.10);
    --warm-line:rgba(216,69,31,.26); --warm-glow:rgba(216,69,31,.26);
    --line:rgba(11,18,32,.16); --line-2:rgba(11,18,32,.09); --sel:rgba(43,87,196,.20);
    --glass-base:rgba(255,255,255,.40); --glass-hi:rgba(255,255,255,.95);
    --glass-hi-2:rgba(255,255,255,1);
    --edge-a:rgba(11,18,32,.20); --edge-b:rgba(11,18,32,.07);
    --surface:rgba(255,255,255,.64); --surface-2:rgba(11,18,32,.05);
    --surface-3:rgba(11,18,32,.035);
    --input-bg:rgba(255,255,255,.72); --input-bg-h:rgba(255,255,255,.92);
    --hdr-bg:#FFFFFF;
    --field-a:rgba(120,158,220,.30); --field-b:rgba(126,186,214,.24);
    --field-c:rgba(198,168,152,.24); --vignette:rgba(226,231,240,.66);
    --scrim-1:rgba(238,241,247,.92); --scrim-2:rgba(238,241,247,.64);
    --scrim-3:rgba(238,241,247,0); --grain-op:.035;
    --p-r:24; --p-g:38; --p-b:66; --wave-op:.88; --p-gain:.34;
    --btn-a:#1D2942; --btn-b:#141D31; --btn-c:#0B1220;
    --btn-fg:#F4F6FA; --btn-bd:#1D2942;
    --btn-ha:#26406F; --btn-hb:#1B3059; --btn-hc:#122145; --btn-hbd:#26406F;
    --btn-hi:rgba(255,255,255,.16);
    --ghost-a:rgba(255,255,255,.75); --ghost-b:rgba(255,255,255,.35);
    --ghost-c:rgba(43,87,196,.06); --ghost-bd:rgba(11,18,32,.20);
    --ghost-hi:rgba(255,255,255,.9);
    --ghost-ha:rgba(255,255,255,.95); --ghost-hb:rgba(238,243,255,.8);
    --ghost-hc:rgba(43,87,196,.10); --ghost-hbd:rgba(43,87,196,.55);
    --shine:rgba(255,255,255,.85);
    --badge-a:#33425E; --badge-b:#1C2739; --badge-c:#0B1220; --badge-fg:#F4F6FA;
  }
}
:root{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
@media(prefers-color-scheme: light){:root:not([data-theme="dark"]){color-scheme:light}}
html,body{transition:background-color .5s ease,color .5s ease}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;position:relative;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ================= BACKGROUND FIELD ================= */
.field{position:fixed;inset:0;z-index:0;overflow:hidden;
  /* static ambient wash. no filter, no animation — a blurred animating layer
     under a repainting canvas re-rasterises every frame and eats the budget */
  background:
    radial-gradient(70% 55% at 12% 4%,var(--field-a) 0%,transparent 62%),
    radial-gradient(60% 50% at 92% 26%,var(--field-b) 0%,transparent 62%),
    radial-gradient(55% 45% at 42% 96%,var(--field-c) 0%,transparent 64%),
    var(--ground)}
.field::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 6%,transparent 26%,var(--vignette) 100%)}
.grain{position:absolute;inset:-50%;opacity:var(--grain-op);pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;
  pointer-events:none;opacity:var(--wave-op,.95)}

#bgVideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.55}
.field-line{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;opacity:.45}

/* ================= LIQUID GLASS ================= */
.liquid-glass {
  background: var(--glass-base);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px var(--glass-hi);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    var(--edge-a) 0%, var(--edge-b) 20%,
    transparent 40%, transparent 60%,
    var(--edge-b) 80%, var(--edge-a) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass-solid{background:var(--surface);backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%)}

/* ================= GLOW ON HOVER (site-wide) =================
   Every hoverable surface lifts on a bloom of accent light from below. */
.glow{transition:box-shadow .45s var(--expo),transform .45s var(--expo),
  background-color .45s ease}
.glow:hover,.glow:focus-within{
  box-shadow:
    inset 0 1px 1px var(--glass-hi-2),
    inset 0 -70px 90px -70px var(--glow-2),
    0 26px 70px -34px var(--glow-1),
    0 0 0 1px var(--glow-1);
  transform:translateY(-3px);
}
/* Sections bloom from underneath the content, unclipped */
.bloom{position:relative}
.bloom::after{content:'';position:absolute;left:50%;bottom:-14%;width:64%;height:52%;
  transform:translateX(-50%);pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(ellipse at center,var(--glow-3) 0%,transparent 72%);
  filter:blur(30px);transition:opacity .55s ease}
.bloom:hover::after{opacity:1}

/* ================= SHELL ================= */
.shell{position:relative;z-index:10;width:100%;max-width:1280px;margin:0 auto;
  padding:0 clamp(16px,3.4vw,40px)}
main{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;
  align-items:center}

/* ================= TYPE ================= */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.mono{font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3)}
.h-sec{font-size:clamp(30px,4.2vw,54px);font-weight:500;letter-spacing:-.045em;line-height:1.1}
.h-card{font-size:clamp(23px,2.3vw,31px);font-weight:500;letter-spacing:-.035em}
.lede{font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;letter-spacing:-.015em;
  color:var(--muted);max-width:56ch}
.small{font-size:14.5px;line-height:1.6;color:var(--ink-3)}

/* ================= BUTTONS ================= */
.btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 20px;border-radius:8px;border:1px solid var(--btn-bd);
  font-size:14.5px;font-weight:500;letter-spacing:-.02em;line-height:1;
  white-space:nowrap;cursor:pointer;
  background:linear-gradient(180deg,var(--btn-a) 0%,var(--btn-b) 48%,var(--btn-c) 100%);
  color:var(--btn-fg);
  box-shadow:inset 0 1px 0 var(--btn-hi);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,
    color .35s ease,transform .35s var(--expo)}
.btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,var(--shine) 48%,transparent 76%);
  transform:translateX(-130%);transition:transform .65s ease}
.btn:hover{background:linear-gradient(180deg,var(--btn-ha) 0%,var(--btn-hb) 42%,var(--btn-hc) 100%);
  border-color:var(--btn-hbd);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--btn-hi),0 0 26px var(--glow-2),0 12px 26px -12px var(--glow-1)}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:15px;height:15px}

.btn-ghost{color:var(--ink);border:1px solid var(--ghost-bd);
  background:linear-gradient(135deg,var(--ghost-a),var(--ghost-b) 46%,var(--ghost-c));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--ghost-hi)}
.btn-ghost::after{background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 76%)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ghost-hbd);
  background:linear-gradient(135deg,var(--ghost-ha),var(--ghost-hb) 48%,var(--ghost-hc));
  box-shadow:inset 0 1px 0 var(--ghost-hi),0 0 24px var(--glow-1),
    0 12px 28px -12px var(--glow-2)}

.link-q{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:15px;
  color:var(--ink-2);padding:12px 2px;transition:color .3s ease,text-shadow .3s ease}
.link-q::after{content:'';position:absolute;left:2px;right:2px;bottom:6px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--expo);opacity:.8}
.link-q:hover{color:var(--ink);text-shadow:0 0 18px var(--glow-2)}
.link-q:hover::after{transform:scaleX(1)}
.link-q svg{width:15px;height:15px;transition:transform .3s var(--expo)}
.link-q:hover svg{transform:translateX(4px)}

/* ================= HEADER ================= */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;
  padding:clamp(10px,1.6vw,20px) clamp(12px,3vw,32px);transition:padding .45s var(--expo)}
.hdr.shrunk{padding-top:8px;padding-bottom:8px}
.hdr-inner{width:100%;max-width:1280px;border-radius:999px;display:flex;align-items:center;
  gap:20px;padding:10px 10px 10px 22px;
  /* solid from the top, and solid wins over .liquid-glass here on purpose: the
     hero's pale sheet sits directly under this pill, and a translucent one puts
     light nav text on a light ground */
  background:var(--hdr-bg)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:inset 0 0 0 1px var(--line-2),0 18px 40px -28px var(--glow-1);
  transition:padding .45s var(--expo),background .45s ease,box-shadow .45s ease}
.hdr.shrunk .hdr-inner{padding:6px 6px 6px 18px}
/* the supplied artwork is black-on-transparent, so it is used as a mask and
   painted with the current ink — one asset, correct in both themes */
.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  transition:filter .35s ease}
.brand i{display:block;flex:0 0 auto;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.brand .b-mark{width:23px;height:calc(23px / 1.226);color:var(--accent);
  -webkit-mask-image:url("img/7b42fb374b.png");mask-image:url("img/7b42fb374b.png");
  transition:filter .35s ease}
.brand .b-word{width:calc(17px * 5.1143);height:17px;color:var(--ink);
  -webkit-mask-image:url("img/3c01787cf5.png");mask-image:url("img/3c01787cf5.png")}
.brand:hover{filter:drop-shadow(0 0 14px var(--glow-2))}
.hdr.shrunk .brand .b-mark{width:21px;height:calc(21px / 1.226)}
.hdr.shrunk .brand .b-word{width:calc(15.5px * 5.1143);height:15.5px}
@media(max-width:560px){
  .brand .b-word{width:calc(15px * 5.1143);height:15px}
}
.hdr-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.hdr-nav a{position:relative;font-size:14px;color:var(--ink-2);padding:9px 15px;
  border-radius:8px;overflow:hidden;
  transition:color .3s ease,background .3s ease,box-shadow .35s ease}
.hdr-nav a::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,var(--glow-2) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.hdr-nav a:hover{color:var(--ink);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--glow-2),0 0 20px -4px var(--glow-1)}
.hdr-nav a:hover::after{transform:translateX(120%)}
/* the header is a 999px pill with 10px of inset; a square-cornered button
   pressed into its right end read as a foreign object, so the CTA takes the
   same geometry and sits concentric inside it */
.hdr .btn{height:38px;padding:0 20px;font-size:13.5px;border-radius:999px;font-weight:500}
.hdr-nav+.theme-btn,.hdr .theme-btn{margin-left:2px}
.hdr .btn svg{width:14px;height:14px}
/* theme toggle — sun and moon stacked, one swaps out as the other swaps in */
.theme-btn{width:38px;height:38px;flex:0 0 auto;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;position:relative;overflow:hidden;color:var(--ink);
  border:1px solid var(--ghost-bd);background:var(--surface-3);
  transition:border-color .3s ease,background .3s ease,box-shadow .35s ease,transform .3s var(--expo)}
.theme-btn:hover{border-color:var(--warm);background:var(--warm-soft);
  box-shadow:0 0 20px -4px var(--warm-glow);transform:translateY(-1px)}
.theme-btn svg{grid-area:1/1;width:17px;height:17px;
  transition:opacity .35s var(--expo),transform .45s var(--expo)}
.theme-btn .i-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
.theme-btn .i-moon{opacity:1;transform:none}
:root[data-theme="light"] .theme-btn .i-sun{opacity:1;transform:none}
:root[data-theme="light"] .theme-btn .i-moon{opacity:0;transform:rotate(70deg) scale(.5)}
@media(prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-btn .i-sun{opacity:1;transform:none}
  :root:not([data-theme="dark"]) .theme-btn .i-moon{opacity:0;transform:rotate(70deg) scale(.5)}
}
:root[data-theme="dark"] .theme-btn .i-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
:root[data-theme="dark"] .theme-btn .i-moon{opacity:1;transform:none}
.hdr-burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:8px;
  align-items:center;justify-content:center;background:var(--surface-2);cursor:pointer;
  border:1px solid var(--line);transition:box-shadow .35s ease,border-color .35s ease}
.hdr-burger:hover{border-color:var(--glow-2);box-shadow:0 0 20px -4px var(--glow-1)}
.hdr-burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.hdr-burger span::before,.hdr-burger span::after{content:'';position:absolute;left:0;width:17px;
  height:1.5px;background:var(--ink)}
.hdr-burger span::before{top:-5px}.hdr-burger span::after{top:5px}

/* ================= HERO (two-zone split) =================
   A pale sheet carrying the headline, a hard horizontal cut, then the open
   field below where the supporting copy sits. The sheet fades out on the
   right so the particles cross the split instead of stopping at it. */
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero-in{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,3.4vw,40px)}

.hero-top{position:relative;flex:0 0 auto;color:var(--ink);
  padding:clamp(120px,17vh,210px) 0 clamp(26px,3.4vw,44px)}
.hero-top>.hero-in{position:relative;z-index:1}

.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:0;
  border-radius:6px;color:var(--badge-fg);font-size:12.5px;font-weight:400;
  letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--badge-a) 0%,var(--badge-b) 52%,var(--badge-c) 100%);
  transition:box-shadow .45s ease,transform .45s var(--expo)}
.badge:hover{transform:translateY(-2px);
  box-shadow:0 0 26px -4px var(--warm-glow),0 12px 26px -14px var(--warm-glow)}
.badge-star{width:17px;height:19px;flex:0 0 auto;
  filter:drop-shadow(0 0 3px rgba(186,208,255,.6))}
.hero .badge{margin-bottom:clamp(22px,2.6vw,34px)}
.hero h1{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  font-size:clamp(38px,8.2vw,116px);font-weight:650;letter-spacing:-.052em;line-height:.88;
  color:var(--ink)}
/* overflow:hidden is what the mask reveal clips against, so the descenders need
   padding to survive the tighter leading; the negative margin takes it back */
.headline-line{display:block;overflow:hidden;padding:.08em .14em .17em 0;
  margin-bottom:-.13em}
.headline-line:last-child{margin-bottom:0}
.headline-line>span{display:block;will-change:transform,opacity}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em;
  letter-spacing:-.03em;color:var(--warm)}

.hero-bot{position:relative;flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:flex-end;gap:clamp(28px,4vw,54px);
  padding:clamp(40px,6vw,86px) 0 clamp(22px,2.6vw,34px)}
.hero-bot-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.hero .lede{max-width:44ch;margin:0;color:var(--muted);
  font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55;letter-spacing:-.015em;text-align:left}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin-top:clamp(24px,3vw,36px)}
.hero-actions .btn{height:46px;padding:0 20px;font-size:14.5px}

/* corner crop marks — the measured, drawing-sheet language again */
.crop{position:relative;display:inline-flex}
.crop::before{content:'';position:absolute;inset:-9px;pointer-events:none;
  border:1px solid var(--warm);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 0/13px 13px no-repeat,
    linear-gradient(#000 0 0) 0 100%/13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 100%/13px 13px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0/13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 0/13px 13px no-repeat,
    linear-gradient(#000 0 0) 0 100%/13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 100%/13px 13px no-repeat}

.hero-coords{display:flex;flex-direction:column;gap:4px;text-align:right;
  font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);
  border-top:1px solid var(--line-2);padding-top:clamp(18px,2.2vw,26px)}
.hero-stats div{position:relative;padding-left:clamp(12px,1.4vw,20px)}
.hero-stats div:first-child{padding-left:0}
.hero-stats div+div::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--line-2)}
.hero-stats b{display:block;font-size:clamp(20px,2.1vw,30px);font-weight:500;
  letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:6px}
.hero-stats .mono{font-size:10px;letter-spacing:.14em;display:block}

@media(max-width:900px){
  .hero-bot-grid{grid-template-columns:1fr}
  .hero-coords{text-align:left;flex-direction:row;gap:14px}
  .hero-stats{grid-template-columns:1fr 1fr;row-gap:22px}
  .hero-stats div:nth-child(3){padding-left:0}
  .hero-stats div:nth-child(3)::before{display:none}
  .hero-actions{width:100%}
  .hero-actions .btn,.crop{width:100%}
  .hero-actions .crop .btn{width:100%}
}

/* ================= SECTION FRAME ================= */
.sec{padding:clamp(70px,9vw,126px) 0}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,5vw,68px);
  max-width:58ch}

/* ================= EDGE / USP ================= */
.edge{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border-radius:22px;overflow:hidden}
.edge article{background:var(--surface);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;gap:14px;min-height:290px;
  transition:background .45s ease,box-shadow .45s ease}
.edge article:hover{background:var(--surface);
  box-shadow:inset 0 -80px 100px -80px var(--warm-glow),inset 0 0 0 1px var(--warm-line)}
.edge-media{position:relative;margin:-6px 0 20px;border-radius:14px;overflow:hidden;
  aspect-ratio:16/9;background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.edge-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--expo),opacity .5s ease}
.edge article:hover .edge-media img{transform:scale(1.04)}
/* the renders are dark-ground. In light mode they read as a photographic
   plate rather than a hole, so give them a defined edge and pull the
   contrast back slightly */
:root[data-theme="light"] .edge-media{
  box-shadow:inset 0 0 0 1px rgba(11,18,32,.18),0 10px 24px -16px rgba(11,18,32,.5)}
:root[data-theme="light"] .edge-media img{filter:saturate(.92) brightness(1.06)}
@media(prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .edge-media{
    box-shadow:inset 0 0 0 1px rgba(11,18,32,.18),0 10px 24px -16px rgba(11,18,32,.5)}
  :root:not([data-theme="dark"]) .edge-media img{filter:saturate(.92) brightness(1.06)}
}
.edge .idx{font-size:11.5px;font-weight:500;color:var(--warm-ink);letter-spacing:.15em;
  transition:text-shadow .4s ease}
.edge article:hover .idx{text-shadow:0 0 16px var(--warm-glow)}
.edge h3{font-size:clamp(20px,1.85vw,25px);font-weight:500;letter-spacing:-.03em;line-height:1.2}
.edge p{color:var(--ink-3);font-size:15px;line-height:1.6;margin-top:auto}


/* ================= INVERTED BAND =================
   Everything on this page is token-driven, so flipping a section is a matter
   of remapping the tokens inside it. .invert always carries the palette the
   page is NOT currently wearing — a light slab on a dark page, a dark slab on
   a light one. */
.invert{
  --ground:#EEF1F7;
  --ink:#0B1220;
  --ink-2:#33405A;
  --ink-3:#5A6880;
  --muted:#5F6B7C;
  --accent:#2B57C4;
  --accent-hi:#1E43A6;
  --glow-1:rgba(43,87,196,.16);
  --glow-2:rgba(43,87,196,.26);
  --glow-3:rgba(43,87,196,.10);
  --warm:#D8451F;
  --warm-ink:#B83A16;
  --warm-soft:rgba(216,69,31,.10);
  --warm-line:rgba(216,69,31,.26);
  --warm-glow:rgba(216,69,31,.26);
  --line:rgba(11,18,32,.16);
  --line-2:rgba(11,18,32,.09);
  --sel:rgba(43,87,196,.20);
  --glass-base:rgba(255,255,255,.40);
  --glass-hi:rgba(255,255,255,.95);
  --glass-hi-2:rgba(255,255,255,1);
  --edge-a:rgba(11,18,32,.20);
  --edge-b:rgba(11,18,32,.07);
  --surface:rgba(255,255,255,.64);
  --surface-2:rgba(11,18,32,.05);
  --surface-3:rgba(11,18,32,.035);
  --input-bg:rgba(255,255,255,.72);
  --input-bg-h:rgba(255,255,255,.92);
  --btn-a:#1D2942;
  --btn-b:#141D31;
  --btn-c:#0B1220;
  --btn-fg:#F4F6FA;
  --btn-bd:#1D2942;
  --btn-ha:#26406F;
  --btn-hb:#1B3059;
  --btn-hc:#122145;
  --btn-hbd:#26406F;
  --btn-hi:rgba(255,255,255,.16);
  --ghost-a:rgba(255,255,255,.75);
  --ghost-b:rgba(255,255,255,.35);
  --ghost-c:rgba(43,87,196,.06);
  --ghost-bd:rgba(11,18,32,.20);
  --ghost-hi:rgba(255,255,255,.9);
  --ghost-ha:rgba(255,255,255,.95);
  --ghost-hb:rgba(238,243,255,.8);
  --ghost-hc:rgba(43,87,196,.10);
  --ghost-hbd:rgba(43,87,196,.55);
  --shine:rgba(255,255,255,.85);
  --badge-a:#33425E;
  --badge-b:#1C2739;
  --badge-c:#0B1220;
  --badge-fg:#F4F6FA;
}
:root[data-theme="light"] .invert{
  --ground:#070B14;
  --ink:#FFFFFF;
  --ink-2:#B7C1D6;
  --ink-3:#9AA3B5;
  --muted:#9a9a9a;
  --accent:#A9C4FF;
  --accent-hi:#D5DEF2;
  --glow-1:rgba(170,200,255,.22);
  --glow-2:rgba(186,208,255,.38);
  --glow-3:rgba(186,208,255,.14);
  --warm:#FF6A3D;
  --warm-ink:#FF7E56;
  --warm-soft:rgba(255,106,61,.13);
  --warm-line:rgba(255,106,61,.28);
  --warm-glow:rgba(255,106,61,.34);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --sel:rgba(169,196,255,.25);
  --glass-base:rgba(255,255,255,.01);
  --glass-hi:rgba(255,255,255,.10);
  --glass-hi-2:rgba(255,255,255,.14);
  --edge-a:rgba(255,255,255,.45);
  --edge-b:rgba(255,255,255,.15);
  --surface:rgba(10,16,28,.44);
  --surface-2:rgba(255,255,255,.06);
  --surface-3:rgba(255,255,255,.04);
  --input-bg:rgba(255,255,255,.04);
  --input-bg-h:rgba(255,255,255,.06);
  --btn-a:#ffffff;
  --btn-b:#e7e7e7;
  --btn-c:#cfcfcf;
  --btn-fg:#0B111C;
  --btn-bd:#ffffff;
  --btn-ha:#ffffff;
  --btn-hb:#f3f6ff;
  --btn-hc:#d5def2;
  --btn-hbd:#f2f6ff;
  --btn-hi:rgba(255,255,255,.95);
  --ghost-a:rgba(255,255,255,.12);
  --ghost-b:rgba(0,0,0,.50);
  --ghost-c:rgba(150,170,200,.10);
  --ghost-bd:rgba(198,198,198,.55);
  --ghost-hi:rgba(255,255,255,.12);
  --ghost-ha:rgba(210,225,255,.18);
  --ghost-hb:rgba(0,0,0,.35);
  --ghost-hc:rgba(180,195,220,.16);
  --ghost-hbd:rgba(220,230,255,.80);
  --shine:rgba(255,255,255,.45);
  --badge-a:#5C6B8A;
  --badge-b:#26303F;
  --badge-c:#0A0E16;
  --badge-fg:#F2F2F2;
}
@media(prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .invert{
    --ground:#070B14;
    --ink:#FFFFFF;
    --ink-2:#B7C1D6;
    --ink-3:#9AA3B5;
    --muted:#9a9a9a;
    --accent:#A9C4FF;
    --accent-hi:#D5DEF2;
    --glow-1:rgba(170,200,255,.22);
    --glow-2:rgba(186,208,255,.38);
    --glow-3:rgba(186,208,255,.14);
    --warm:#FF6A3D;
    --warm-ink:#FF7E56;
    --warm-soft:rgba(255,106,61,.13);
    --warm-line:rgba(255,106,61,.28);
    --warm-glow:rgba(255,106,61,.34);
    --line:rgba(255,255,255,.12);
    --line-2:rgba(255,255,255,.07);
    --sel:rgba(169,196,255,.25);
    --glass-base:rgba(255,255,255,.01);
    --glass-hi:rgba(255,255,255,.10);
    --glass-hi-2:rgba(255,255,255,.14);
    --edge-a:rgba(255,255,255,.45);
    --edge-b:rgba(255,255,255,.15);
    --surface:rgba(10,16,28,.44);
    --surface-2:rgba(255,255,255,.06);
    --surface-3:rgba(255,255,255,.04);
    --input-bg:rgba(255,255,255,.04);
    --input-bg-h:rgba(255,255,255,.06);
    --btn-a:#ffffff;
    --btn-b:#e7e7e7;
    --btn-c:#cfcfcf;
    --btn-fg:#0B111C;
    --btn-bd:#ffffff;
    --btn-ha:#ffffff;
    --btn-hb:#f3f6ff;
    --btn-hc:#d5def2;
    --btn-hbd:#f2f6ff;
    --btn-hi:rgba(255,255,255,.95);
    --ghost-a:rgba(255,255,255,.12);
    --ghost-b:rgba(0,0,0,.50);
    --ghost-c:rgba(150,170,200,.10);
    --ghost-bd:rgba(198,198,198,.55);
    --ghost-hi:rgba(255,255,255,.12);
    --ghost-ha:rgba(210,225,255,.18);
    --ghost-hb:rgba(0,0,0,.35);
    --ghost-hc:rgba(180,195,220,.16);
    --ghost-hbd:rgba(220,230,255,.80);
    --shine:rgba(255,255,255,.45);
    --badge-a:#5C6B8A;
    --badge-b:#26303F;
    --badge-c:#0A0E16;
    --badge-fg:#F2F2F2;
  }
}

/* full-bleed slab, breaking the 1280 column the rest of the page sits in */
.bleed{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background:var(--ground);color:var(--ink);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:clamp(70px,9vw,126px) 0;
  transition:background-color .5s ease,color .5s ease}
.bleed::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 60% at 14% 0%,var(--glow-3) 0%,transparent 62%),
    radial-gradient(50% 60% at 88% 100%,var(--warm-soft) 0%,transparent 64%)}
.bleed-in{position:relative;max-width:1280px;margin:0 auto;
  padding:0 clamp(16px,3.4vw,40px)}

/* the loop itself, drawn between the two services */
.loop{position:relative;width:clamp(52px,6vw,88px);display:flex;align-items:center;
  justify-content:center}
.loop::before,.loop::after{content:'';position:absolute;left:50%;width:1px;
  transform:translateX(-50%)}
.loop::before{top:0;height:calc(50% - 34px);
  background:linear-gradient(var(--line-2),var(--warm-line))}
.loop::after{bottom:0;height:calc(50% - 34px);
  background:linear-gradient(var(--warm-line),var(--line-2))}
.loop-glyph{position:relative;width:52px;height:52px;border-radius:999px;
  display:grid;place-items:center;color:var(--warm);
  background:var(--warm-soft);box-shadow:inset 0 0 0 1px var(--warm-line)}
.loop-glyph svg{width:22px;height:22px;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1024px){
  .loop{width:auto;height:82px}
  .loop::before,.loop::after{width:calc(50% - 44px);height:1px;top:50%;bottom:auto;
    transform:translateY(-50%)}
  .loop::before{left:0;background:linear-gradient(90deg,var(--line-2),var(--warm-line))}
  .loop::after{left:auto;right:0;background:linear-gradient(90deg,var(--warm-line),var(--line-2))}
}
@media(prefers-reduced-motion:reduce){.loop-glyph svg{animation:none}}

/* ================= CASE STUDIES: SCROLL-DRIVEN WHEEL =================
   A tall track holds a sticky stage. Scroll distance through the track maps
   straight onto the wheel's rotation, so the cards turn under the scroll
   rather than on a timer. */
.cs-track{position:relative;width:100%}
/* the header is fixed, so the stage reserves its height as top padding and
   centres what is left — otherwise the eyebrow and the first headline line
   pin underneath it */
.cs-stage{position:sticky;top:0;height:100vh;height:100svh;
  padding-top:var(--hdr-h,96px);padding-bottom:clamp(18px,3vh,40px);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,3.4vh,48px);overflow:hidden}
.cs-head{text-align:center;padding:0 clamp(16px,3.4vw,40px)}
.cs-head .mono{display:block;margin-bottom:clamp(8px,1.2vh,14px)}
.cs-head .h-sec{max-width:19ch;margin:0 auto}

.cs-wheel{position:relative;
  --R:clamp(560px,64vw,1080px);
  --cw:clamp(236px,25vw,370px);
  --ch:clamp(320px,33vw,438px);
  --drop:clamp(16px,2.4vw,38px);
  --fade:clamp(34px,12vw,250px);
  height:calc(var(--ch) + var(--drop) + clamp(40px,6vw,110px));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
    #000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
    #000 calc(100% - var(--fade)),transparent 100%)}

.cs-card{position:absolute;left:50%;top:calc(var(--R) + var(--ch)/2 + var(--drop));
  width:var(--cw);height:var(--ch);border-radius:26px;overflow:hidden;
  padding:clamp(18px,1.9vw,26px);display:flex;flex-direction:column;
  transform-origin:50% 50%;will-change:transform,opacity;
  background:var(--surface);
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:inset 0 1px 1px var(--glass-hi),0 30px 70px -40px rgba(0,0,0,.8)}
/* each card carries its own gradient wash, so colour shifts along the rim
   as the wheel turns */
.cs-card::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.9;
  background:radial-gradient(120% 90% at 50% -20%,var(--g1) 0%,transparent 62%),
             linear-gradient(180deg,transparent 40%,var(--g2) 130%)}
.cs-card>*{position:relative;z-index:1}
.cs-card.on{box-shadow:inset 0 1px 1px var(--glass-hi-2),
  inset 0 -80px 100px -80px var(--glow-2),
  0 34px 80px -36px var(--glow-1),0 0 0 1px var(--glow-1)}

.cs-media{position:relative;flex:0 0 auto;height:clamp(84px,9.5vw,132px);
  border-radius:16px;overflow:hidden;margin-bottom:14px;
  background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2);
  display:grid;place-items:center}
.cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s ease}
.cs-media.has-img img{opacity:1}
.cs-media.has-img .cs-mark{opacity:0}
.cs-mark{width:42px;height:42px;opacity:.45;color:var(--ink-2);
  transition:opacity .4s ease}

.cs-card .mono{font-size:10.5px;letter-spacing:.14em}
.cs-card h3{font-size:clamp(16px,1.5vw,22px);margin:10px 0 8px;letter-spacing:-.03em}
.cs-card p{font-size:clamp(12.5px,.98vw,14.5px);line-height:1.5;color:var(--ink-3);margin:0}
.cs-tags{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.cs-tags span{border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-size:clamp(10.5px,.84vw,12px);color:var(--ink-3);white-space:nowrap;
  background:var(--surface-3)}


@media(max-width:760px){
  .cs-wheel{--R:clamp(420px,150vw,780px);--cw:min(250px,68vw);--ch:372px;--drop:14px;
    --fade:clamp(24px,7vw,40px)}
  .cs-head .h-sec{font-size:clamp(26px,7vw,34px)}
}
/* Fallback for reduced motion: the wheel becomes a plain stack, so all six
   cards are readable without any of them depending on scroll position. */
.cs-wheel.stacked{height:auto;mask-image:none;-webkit-mask-image:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;padding:0 clamp(16px,3.4vw,40px)}
.cs-wheel.stacked .cs-card{position:static;width:auto;height:auto;min-height:330px;
  transform:none!important;opacity:1!important}
.cs-track:has(.stacked){height:auto!important}
.cs-stage:has(.stacked){position:static;height:auto;padding:clamp(40px,7vw,80px) 0}

/* ================= SERVICES ================= */
.svcs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,1.6vw,22px);
  align-items:stretch}
.svc{border-radius:26px;padding:clamp(28px,3.2vw,46px);display:flex;flex-direction:column;
  min-height:520px}
/* Service illustration band. The Services slab is inverted, so the polarity
   here is the opposite of the page theme: a pale-ground render belongs on the
   DARK site, a deep-ground render on the light one. */
.svc-media{position:relative;margin:0 0 26px;border-radius:16px;overflow:hidden;
  aspect-ratio:16/9;background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.svc-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--expo)}
.svc:hover .svc-media img{transform:scale(1.035)}
/* the renders are pale-ground, which is right for the dark site (where this
   slab is pale). On the light site the slab is deep navy, so they read as a
   luminous plate — give them an edge and pull the brightness back a touch */
:root[data-theme="light"] .svc-media{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 30px -18px rgba(0,0,0,.6)}
:root[data-theme="light"] .svc-media img{filter:brightness(.88) saturate(1.05)}
@media(prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .svc-media{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 30px -18px rgba(0,0,0,.6)}
  :root:not([data-theme="dark"]) .svc-media img{filter:brightness(.88) saturate(1.05)}
}
.svc:has(.svc-media) .svc-ico{display:none}

.svc-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:var(--warm-soft);color:var(--warm);
  box-shadow:inset 0 0 0 1px var(--warm-line);margin-bottom:26px;
  transition:box-shadow .45s ease,background .45s ease}
.svc:hover .svc-ico{background:var(--warm-soft);
  box-shadow:inset 0 0 0 1px var(--warm),0 0 24px -4px var(--warm-glow)}
.svc-ico svg{width:21px;height:21px}
.svc h3{margin-bottom:14px}
.svc .lede{font-size:16px;max-width:44ch}
.svc ul{margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:14px}
.svc li{display:grid;grid-template-columns:16px 1fr;gap:13px;font-size:14.5px;
  color:var(--ink-2);line-height:1.5}
.svc li svg{width:15px;height:15px;margin-top:4px;color:var(--accent)}
.svc .foot{margin-top:auto;padding-top:32px}

/* ================= PROCESS (slider) ================= */
.proc-card{display:grid;grid-template-columns:1fr 1.04fr;border-radius:28px;overflow:hidden;
  min-height:clamp(400px,44vw,540px)}
.proc-copy{position:relative;padding:clamp(26px,3vw,44px);display:flex;flex-direction:column}
.proc-copy::after{content:'';position:absolute;right:0;top:clamp(26px,3vw,44px);
  bottom:clamp(26px,3vw,44px);width:1px;background:var(--line-2)}
.proc-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:999px;font-size:11.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--warm-ink);
  background:var(--warm-soft);box-shadow:inset 0 0 0 1px var(--warm-line)}
.proc-slides{position:relative;flex:1;margin-top:26px;display:grid}
/* all slides share one grid cell, so the card sizes to the tallest and
   never jumps height between steps */
.proc-slide{grid-area:1/1;opacity:0;transform:translateY(12px);visibility:hidden;
  transition:opacity .42s var(--expo),transform .42s var(--expo),visibility .42s}
.proc-slide.on{opacity:1;transform:none;visibility:visible}
.proc-slide h3{font-size:clamp(24px,2.6vw,36px);font-weight:500;letter-spacing:-.04em;
  line-height:1.1;max-width:15ch}
.proc-slide p{margin-top:18px;font-size:15px;line-height:1.62;color:var(--muted);max-width:40ch}
.proc-slide .detail{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:40ch}
.proc-bar{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--line-2)}
.proc-dots{display:flex;gap:7px;margin-right:auto}
.proc-dots button{width:26px;height:4px;border-radius:2px;background:var(--line);
  cursor:pointer;padding:0;border:0;transition:background .35s ease,box-shadow .35s ease,width .35s var(--expo)}
.proc-dots button[aria-current="true"]{width:40px;background:var(--warm);
  box-shadow:0 0 16px var(--warm-glow)}
.proc-dots button:hover{background:var(--warm)}
.proc-count{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.proc-nav{display:flex;gap:8px}
.proc-nav button{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--ink);
  border:1px solid var(--ghost-bd);background:var(--surface-3);
  transition:border-color .3s ease,background .3s ease,box-shadow .35s ease,transform .3s var(--expo)}
.proc-nav button:hover{border-color:var(--ghost-hbd);background:var(--surface-2);
  box-shadow:0 0 22px -4px var(--glow-2);transform:translateY(-1px)}
.proc-nav button svg{width:15px;height:15px}

.proc-stage{position:relative;overflow:hidden;min-height:0}
#procCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Media slot. Drop a Google Flow render in and it covers the canvas:
   <img class="proc-media" data-step="0" src="step-01.webp" alt="">   (or <video>)
   Anything with a src shows for its step; the canvas is the fallback. */
.proc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;transition:opacity .5s var(--expo),visibility .5s}
.proc-media.on{opacity:1;visibility:visible}
.proc-stage-label{position:absolute;left:22px;bottom:20px;z-index:2;
  font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3)}
.proc-stage-label b{color:var(--warm-ink);font-weight:500}

/* ================= FAQ ================= */
.faq{display:grid;grid-template-columns:minmax(240px,34%) 1fr;gap:clamp(28px,5vw,72px);
  align-items:start}
.faq-aside h2{max-width:11ch}
.faq-note{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--ink-3);max-width:30ch}
.acc{display:flex;flex-direction:column;gap:10px}
.qa{border-radius:16px;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;font-size:clamp(15.5px,1.4vw,17.5px);font-weight:500;letter-spacing:-.02em;
  line-height:1.4;color:var(--ink);transition:color .3s ease}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa .mark{margin-left:auto;flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:2px}
.qa .mark::before,.qa .mark::after{content:'';position:absolute;left:50%;top:50%;
  background:var(--warm);border-radius:2px;transform:translate(-50%,-50%);
  transition:transform .35s var(--expo),opacity .35s ease}
.qa .mark::before{width:13px;height:1.5px}
.qa .mark::after{width:1.5px;height:13px}
.qa[open] .mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa .ans{overflow:hidden;height:0;transition:height .38s var(--expo)}
.qa .ans p{padding:0 22px 22px;margin:0;font-size:14.5px;line-height:1.65;color:var(--muted);
  max-width:62ch}
.qa .ans p+p{padding-top:0;margin-top:-8px}

/* ================= CONTACT ================= */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3vw,56px);
  align-items:start}
.contact-aside ul{margin:28px 0 0;display:flex;flex-direction:column}
.contact-aside li{padding:16px 0;border-top:1px solid var(--line-2);font-size:14.5px;
  color:var(--ink-2);display:grid;grid-template-columns:15px 1fr;gap:12px;line-height:1.5}
.contact-aside li:last-child{border-bottom:1px solid var(--line-2)}
.contact-aside svg{width:14px;height:14px;margin-top:4px;color:var(--accent)}
.accent-link{color:var(--accent);transition:text-shadow .35s ease}
.accent-link:hover{text-shadow:0 0 18px var(--glow-2)}
.form-card{border-radius:26px;padding:clamp(24px,3vw,40px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:8px}
.f.wide{grid-column:1/-1}
.f label{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.f label i{font-style:normal;color:var(--warm-ink)}
.f input,.f textarea,.f select{background:var(--input-bg);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;font-size:15px;min-height:48px;width:100%;
  transition:border-color .3s ease,background .3s ease,box-shadow .35s ease}
.f textarea{min-height:118px;resize:vertical;line-height:1.55}
.f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA3B5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.f select option{background:var(--ground);color:var(--ink)}
:root[data-theme="light"] .f select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6880' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media(prefers-color-scheme: light){:root:not([data-theme="dark"]) .f select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6880' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3);opacity:.55}
.f input:hover,.f textarea:hover,.f select:hover{border-color:var(--glow-2)}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--accent);
  background:var(--input-bg-h);outline:none;
  box-shadow:0 0 0 3px var(--glow-1),0 0 26px -8px var(--glow-2)}
.f .help{font-size:12.5px;color:var(--ink-3)}
.f .err{font-size:12.5px;color:#F2846B;display:none}
.f.invalid input,.f.invalid textarea{border-color:#F2846B}
.f.invalid .err{display:block}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line-2)}
.form-note{font-size:12.5px;color:var(--ink-3);max-width:34ch}
.ok{display:none;align-items:center;gap:10px;font-size:14.5px;color:var(--warm-ink)}
.ok svg{width:16px;height:16px}
.form-card.sent .ok{display:flex}
.form-card.sent .btn-submit{opacity:.4;pointer-events:none}

/* ================= FOOTER (editorial) ================= */
.ftr{backdrop-filter:none;-webkit-backdrop-filter:none;   /* the wordmark forms
     behind this card — a 4px backdrop blur turns it to mush */
  width:100%;border-radius:24px;padding:clamp(26px,3vw,44px) clamp(24px,3vw,40px) 0;
  color:var(--ink-2);margin-top:clamp(80px,10vw,150px);margin-bottom:clamp(16px,2vw,28px)}

/* measured rule — hairline with tick marks along it, like a drawing sheet */
.ftr-rule{position:relative;height:1px;background:var(--line-2);margin:0 0 clamp(30px,3.4vw,48px)}
.ftr-rule::after{content:'';position:absolute;left:0;right:0;top:-4px;height:9px;
  pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%}
.ftr-rule.tight{margin:clamp(40px,5vw,64px) 0 clamp(20px,2.2vw,28px)}

.ftr-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);
  align-items:start}
.ftr-lead .lab{display:block;margin-bottom:16px}
.ftr-say{font-size:clamp(19px,2vw,26px);font-weight:400;letter-spacing:-.035em;
  line-height:1.24;color:var(--ink);max-width:19ch}
.ftr-lead .btn{margin-top:24px;height:40px;padding:0 20px;font-size:13.5px}

.ftr-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.ftr-cols h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-3);font-weight:500;margin-bottom:14px}
.ftr-cols ul{display:flex;flex-direction:column;gap:1px}
.ftr-cols a{display:inline-block;font-size:13px;letter-spacing:-.01em;padding:5px 0;
  color:var(--ink-2);
  transition:color .3s ease,text-shadow .3s ease,transform .3s var(--expo)}
.ftr-cols a:hover{color:var(--warm-ink);text-shadow:0 0 16px var(--warm-glow);
  transform:translateX(3px)}

.ftr-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap}
.ftr-meta .left{display:flex;align-items:center;gap:14px}
.ftr-legal{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3)}
.ftr-legal-links{display:flex;align-items:center;gap:22px}
.ftr-legal-links a{font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-3);transition:color .3s ease}
.ftr-legal-links a:hover{color:var(--warm-ink)}
.socials{display:flex;align-items:center;gap:2px}
.socials a{opacity:.65;padding:9px;border-radius:999px;display:flex;color:var(--ink-2);
  transition:opacity .3s ease,color .3s ease,background .3s ease,box-shadow .35s ease}
.socials a:hover{opacity:1;color:var(--warm-ink);background:var(--warm-soft);
  box-shadow:0 0 20px -4px var(--warm-glow),inset 0 0 0 1px var(--warm-line)}
.socials svg{width:15px;height:15px}

/* the wordmark — particles on the left resolving into solid letterforms on the
   right, cropped by the card edges */
.ftr-meta .mark{display:block;flex:0 0 auto;color:var(--accent);width:19px;height:calc(19px / 1.226);
  background:currentColor;opacity:.75;
  -webkit-mask:url("img/7b42fb374b.png") center/contain no-repeat;
  mask:url("img/7b42fb374b.png") center/contain no-repeat}
/* The particle field renders at ~780px and is stretched across the viewport,
   so the logo it draws can never be sharper than that upscale allows. The
   dust still does the converging; this plate carries the crisp edges and
   resolves in underneath it as they settle. --conv is written by the field. */
.ftr-mark::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:currentColor;color:var(--ink);
  opacity:calc(var(--conv,0) * .92);
  -webkit-mask:url("img/b7a1b6cdc1.png") center/contain no-repeat;
  mask:url("img/b7a1b6cdc1.png") center/contain no-repeat}
.ftr-mark{position:relative;color:var(--ink);
  margin:clamp(24px,2.8vw,40px) auto clamp(14px,2vw,26px);
  width:min(100%,860px);aspect-ratio:4.7778;height:auto;overflow:visible}


/* ================= ENTRANCE: hero (.appear) ================= */
.appear{opacity:1;animation-duration:1.05s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,1,.3,1);animation-delay:var(--d,.08s)}
.appear.is-in{animation:none;opacity:1;transform:none;clip-path:none;filter:none}
.appear--scale{animation-name:in-scale}
.appear--soft{animation-name:in-soft}
.appear--mask{animation-name:in-mask}
.appear--pop{animation-name:in-pop}
.appear--btn{animation-name:in-btn}
.appear--side{animation-name:in-side}
.appear--stat{animation-name:in-stat}
@keyframes in-scale{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:none}}
@keyframes in-soft{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes in-mask{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes in-pop{0%{opacity:0;transform:scale(.9)}70%{opacity:1;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}}
@keyframes in-btn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes in-side{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes in-stat{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.badge-star{animation:in-star .9s cubic-bezier(.16,1,.3,1) .28s both}
@keyframes in-star{0%{opacity:0;transform:scale(.2) rotate(-50deg)}
  65%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:none}}
.hero h1 em{animation:in-em 1.2s cubic-bezier(.16,1,.3,1) .72s both}
@keyframes in-em{from{opacity:.35;filter:blur(4px)}to{opacity:1;filter:blur(0)}}

/* ================= ENTRANCE: rest of page (scroll) ================= */
[data-r]{opacity:0;transform:translateY(28px);
  transition:opacity .85s var(--expo),transform .85s var(--expo)}
[data-r].in{opacity:1;transform:none}
#ftr{opacity:0;transform:translateY(40px);
  transition:opacity 1s cubic-bezier(0,0,.2,1) .4s,transform 1s cubic-bezier(0,0,.2,1) .4s}
#ftr.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .hdr-nav{display:none}
  .hdr-burger{display:flex}
  .hdr .btn{margin-left:auto}
  .edge{grid-template-columns:1fr 1fr}
  .svcs{grid-template-columns:1fr}
  .proc-card{grid-template-columns:1fr;min-height:0}
  .proc-stage{order:-1;height:min(62vw,360px)}   /* visual on top on narrow screens */
  .proc-copy::after{right:auto;top:0;bottom:auto;left:clamp(26px,3vw,44px);
    width:auto;right:clamp(26px,3vw,44px);height:1px}
  .contact,.faq{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:640px){
  .theme-btn{width:34px;height:34px}
  .theme-btn svg{width:15px;height:15px}
  .proc-bar{gap:12px}
  .proc-dots{gap:5px}
  .proc-dots button{width:18px}
  .proc-dots button[aria-current="true"]{width:28px}
  .proc-count{white-space:nowrap;font-size:11px;letter-spacing:.1em}
  .proc-nav button{width:38px;height:38px}
  .hdr-burger{display:none}
  .hdr .btn{margin-left:auto;height:36px;padding:0 17px;font-size:13px;border-radius:999px}
  .brand{font-size:15px}
}
@media(max-width:760px){
  .edge{grid-template-columns:1fr}
  .svc{min-height:0}
  .fgrid{grid-template-columns:1fr}
  .ftr-cols{grid-template-columns:1fr 1fr;gap:26px}
  .ftr-meta{flex-direction:column;align-items:flex-start;gap:20px}
  .ftr-rule::after{background-size:calc(100% / 6) 100%}
  .field-line{background-size:calc(100% / 3) 100%}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .appear,.hero h1 em,.badge-star{opacity:1!important;transform:none!important;
    clip-path:none!important;filter:none!important}
  [data-r],#ftr{opacity:1;transform:none}
}