/* ==========================================================
   GLOBAL PRESENCE — BRANDWORKS
   Design tokens
   ========================================================== */
:root{
  --ink:#0E0F11;
  --ink-2:#2A2D33;
  --para-l:#4A4E56;
  --plat:#E4E6E9;
  --gr:#0F1013;
  --gr-2:#141519;
  --gr-3:#1B1D22;
  --chrome:#ECEEF1;
  --mute:#9A9FA8;
  --mute-2:#6E737C;
  --line:rgba(236,238,241,.10);
  --line-2:rgba(236,238,241,.22);
  --cobalt:#5470FF;
  --cobalt-hi:#9AABFF;
  --gold:#E0B15C;
  --gold-hi:#F7DCA4;
  --gold-deep:#A9762A;
  --bp:#1A56D6;
  --night:#05071C;

  --f-sans:'Familjen Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-display:'Bricolage Grotesque','Familjen Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-serif:'Cinzel','Trajan Pro',Georgia,'Times New Roman',serif;
  --f-mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,5vw,64px);

  --mono:url("assets/gp-mono.webp");
  
  
  
  
  --wordmark:url("assets/gp-wordmark.png");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--gr);
  color:var(--chrome);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--chrome);color:var(--ink);padding:10px 14px;font-weight:600;text-decoration:none;border-radius:4px;transition:top .2s var(--ease-out)}
.skip:focus{top:16px}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  --fg:var(--ink);--inv:#F2F3F5;--hair:rgba(14,15,17,.22);
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:72px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding-inline:clamp(16px,3.5vw,48px);
  color:var(--fg);
  transition:color .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.on-dark{--fg:var(--chrome);--inv:var(--ink);--hair:rgba(236,238,241,.28)}
.nav.solid{background:rgba(15,16,19,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(236,238,241,.07)}
.nav-links{display:flex;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0}
.nav-links a{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;position:relative;padding-block:6px;
}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.brand{display:block;width:clamp(170px,17vw,240px);aspect-ratio:1851/225;background:currentColor;-webkit-mask:var(--wordmark) center/contain no-repeat;mask:var(--wordmark) center/contain no-repeat}
.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.lang{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;padding:3px;gap:2px}
.lang button{
  border:0;background:transparent;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  padding:6px 9px;border-radius:999px;line-height:1;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out);
}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--inv)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-sans);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:13px 20px;border-radius:4px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease-out),background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.nav .btn-cta{background:var(--fg);color:var(--inv);padding:11px 16px;font-size:13px}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:transparent;cursor:pointer;place-items:center;padding:0}
.menu-btn span{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .3s var(--ease-out)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .3s var(--ease-out)}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:55;background:var(--gr);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:112px var(--gutter) 40px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility .3s;
}
.menu-open .mnav{opacity:1;visibility:visible}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mnav a{font-size:clamp(40px,11vw,64px);font-weight:700;letter-spacing:-.04em;text-decoration:none;line-height:1.1}
.mnav .btn{background:var(--chrome);color:var(--ink);width:100%;padding:18px}

@media (max-width:1150px){
  .nav-links{gap:16px}
  .nav-links a{font-size:11px;letter-spacing:.1em}
  .brand{width:clamp(140px,13vw,180px)}
}
@media (max-width:900px){
  .nav{grid-template-columns:auto 1fr;height:64px}
  .nav-links,.nav .btn-cta{display:none}
  .brand{width:150px}
  .menu-btn{display:grid}
  .menu-open .nav{--fg:var(--chrome);--inv:var(--ink);--hair:rgba(236,238,241,.28)}
}

/* ==========================================================
   FILM — the pinned, scroll-scrubbed product story
   ========================================================== */
.film{position:relative;height:520vh}
.stage{
  --s-fg:var(--ink);--s-mute:rgba(14,15,17,.5);--s-hair:rgba(14,15,17,.14);
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  perspective:1800px;perspective-origin:50% 50%;
  color:var(--s-fg);
  --base:min(66vh,46vw);
}
.stage.dark{--s-fg:var(--chrome);--s-mute:rgba(236,238,241,.55);--s-hair:rgba(236,238,241,.16)}
.bg{position:absolute;inset:0;pointer-events:none}
.bg-studio{background:radial-gradient(120% 95% at 50% 36%,#F7F8F9 0%,#E6E8EB 40%,#D0D4D9 76%,#BCC1C8 100%)}
.bg-studio::after{ /* soft floor sweep */
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(180,186,194,.35));
}
.bg-dark{background:radial-gradient(85% 75% at 50% 58%,#1D1F25 0%,#0F1013 58%,#07080A 100%);opacity:0;will-change:opacity}
.bg-night{background:radial-gradient(75% 62% at 50% 64%,#4C463B 0%,#2C2A26 30%,#15161A 58%,#06070A 100%);opacity:0;will-change:opacity}
.veil{background:radial-gradient(85% 75% at 50% 58%,#1D1F25 0%,#0F1013 58%,#07080A 100%);opacity:0;will-change:opacity;z-index:4}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:180px 180px}

.floor{
  position:absolute;left:50%;top:50%;
  width:var(--base);height:calc(var(--base)*.16);
  margin:calc(var(--base)*-.08) 0 0 calc(var(--base)/-2);
  background:radial-gradient(closest-side,rgba(24,26,31,.42),rgba(24,26,31,0));
  pointer-events:none;will-change:transform,opacity;
}

.rig{
  position:absolute;left:50%;top:50%;
  width:var(--base);height:var(--base);
  margin:calc(var(--base)/-2) 0 0 calc(var(--base)/-2);
  transform-style:preserve-3d;will-change:transform;
}
.obj{position:absolute;inset:0;transform-style:preserve-3d}
.lyr{position:absolute;inset:0;transform-style:preserve-3d}
.img{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat}
.lyr-chrome .img{background-image:var(--mono)}
.lyr-flat .img{background-image:var(--flat)}
.lyr-wire .img{background:var(--wire) center/contain no-repeat}
.lyr-flat,.lyr-wire{opacity:0}
.ext{position:absolute;inset:0;transform-style:preserve-3d}
.ext i{position:absolute;inset:0;background:var(--sil) center/contain no-repeat}
.plate{position:absolute;inset:-5% 2%;border-radius:16px;opacity:0}
.lyr-wire .plate{
  background:
    linear-gradient(rgba(26,86,214,.20) 1px,transparent 1px) 0 0/10% 10%,
    linear-gradient(90deg,rgba(26,86,214,.20) 1px,transparent 1px) 0 0/10% 10%,
    linear-gradient(rgba(26,86,214,.085) 1px,transparent 1px) 0 0/2.5% 2.5%,
    linear-gradient(90deg,rgba(26,86,214,.085) 1px,transparent 1px) 0 0/2.5% 2.5%,
    linear-gradient(160deg,#F1F6FF,#DCE7FC);
  border:1.5px solid rgba(26,86,214,.5);
  box-shadow:0 30px 60px -30px rgba(14,40,110,.5),inset 0 0 40px rgba(26,86,214,.05);
}
.crop{position:absolute;width:22px;height:22px;border-color:var(--bp);border-style:solid;border-width:0}
.crop:nth-child(1){left:10px;top:10px;border-left-width:2px;border-top-width:2px}
.crop:nth-child(2){right:10px;top:10px;border-right-width:2px;border-top-width:2px}
.crop:nth-child(3){left:10px;bottom:10px;border-left-width:2px;border-bottom-width:2px}
.crop:nth-child(4){right:10px;bottom:10px;border-right-width:2px;border-bottom-width:2px}
.lyr-flat .plate{background:linear-gradient(160deg,#FFFFFF,#EEF0F3);border:1px solid rgba(14,15,17,.12);box-shadow:0 30px 60px -30px rgba(10,12,18,.45)}
.lyr-chrome .plate{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 45%,rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(14,15,17,.06),0 30px 70px -30px rgba(10,12,18,.5)}
.lshadow{position:absolute;inset:0;background:var(--shadow) center/contain no-repeat;opacity:0;pointer-events:none}
.ltag{position:absolute;left:2%;top:-5%;transform:translateY(calc(-100% - 10px));display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:#0E0F11;color:#fff;font:600 12px/1 var(--f-mono);white-space:nowrap;opacity:0}
.ltag b{display:grid;place-items:center;height:22px;padding:0 7px;border-radius:999px;background:var(--bp);font-weight:600}
.lyr-flat .ltag b{background:#8A919C}
.lyr-chrome .ltag b{background:linear-gradient(135deg,#FFFFFF,#9BA2AC);color:#0E0F11}
.ldeco{position:absolute;opacity:0;pointer-events:none}
.ruler{left:2%;right:2%;bottom:-5%;height:18px;transform:translateY(100%);background:
  repeating-linear-gradient(90deg,var(--bp) 0 1px,transparent 1px 2.5%),
  repeating-linear-gradient(90deg,var(--bp) 0 1.5px,transparent 1.5px 10%);
  background-size:100% 8px,100% 16px;background-repeat:no-repeat;background-position:0 0,0 0;opacity:0}
.swatches{right:4%;bottom:-2%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.3)}
.swatches i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.swatches em{font:500 10px/1 var(--f-mono);font-style:normal;color:#575C65;letter-spacing:.02em;white-space:nowrap}
.specimen{left:5%;bottom:1%;display:grid;gap:2px;color:#0E0F11}
.specimen b{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:clamp(28px,5vmin,52px);line-height:1}
.specimen em{font:500 10px/1 var(--f-mono);font-style:normal;color:#6B7079}
.conn{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.conn i{position:absolute;top:0;width:2px;height:calc(var(--sz,200px)*2);margin-left:-1px;transform-origin:50% 0;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(26,86,214,.85) 0 7px,transparent 7px 13px)}
.conn i:nth-child(1){left:2%;top:-5%}
.conn i:nth-child(2){left:98%;top:-5%}
.conn i:nth-child(3){left:2%;top:105%}
.conn i:nth-child(4){left:98%;top:105%}
.sheen{position:absolute;inset:0;overflow:hidden;-webkit-mask:var(--mono) center/contain no-repeat;mask:var(--mono) center/contain no-repeat;mix-blend-mode:screen;opacity:.6;pointer-events:none}
.sheen span{position:absolute;top:-10%;bottom:-10%;left:-40%;width:36%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);will-change:transform}
.glow{position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(244,199,110,.62),rgba(214,158,68,.2) 55%,rgba(214,158,68,0));opacity:0;transform:translateZ(-80px);pointer-events:none}

.rings{position:absolute;inset:0;pointer-events:none}
.ring{
  position:absolute;left:50%;top:50%;
  width:calc(var(--base)*.24);aspect-ratio:1;
  margin:calc(var(--base)*-.12) 0 0 calc(var(--base)*-.12);
  opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 0 7px rgba(255,236,186,1)) drop-shadow(0 0 22px rgba(240,186,74,.85)) drop-shadow(0 0 46px rgba(214,146,32,.55));
}
.ring path,.ring line{fill:none;stroke:url(#goldGrad);stroke-width:7.5;stroke-linecap:round}
.ring line{stroke:#FFE9B0}

/* ---- copy blocks ---- */
.copy{position:absolute;z-index:5;max-width:min(40vw,520px)}
.copy.l{left:clamp(20px,6vw,104px);top:50%;transform:translateY(-50%)}
.copy.r{right:clamp(20px,6vw,104px);top:50%;transform:translateY(-50%)}
.copy.c0{top:52%}
.copy .ci{will-change:opacity,transform,filter}
.copy.on-light{--c-ink:var(--ink);--c-para:var(--para-l);--c-mute:rgba(14,15,17,.55);color:var(--c-ink)}
.copy.on-dark{--c-ink:var(--chrome);--c-para:#A9AEB8;--c-mute:rgba(236,238,241,.55);color:var(--c-ink)}
html.js .copy:not(.c0) .ci{opacity:0}

.eyebrow-s{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c-mute);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.eyebrow-s::before{content:"";width:26px;height:1px;background:currentColor}
.h-hero{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(42px,6.2vw,104px);line-height:.96;letter-spacing:.015em;margin:0;text-wrap:balance}
.h-hero .b{display:block;font-size:.34em;letter-spacing:.32em;margin-top:.7em;color:var(--ink-2)}
.lede{font-size:clamp(15px,1.2vw,18px);line-height:1.6;max-width:36ch;color:var(--c-para);margin:26px 0 0}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.btn-ink{background:var(--ink);color:#F2F3F5}
.btn-ink:hover{background:#26282E}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;text-decoration:none;padding-block:8px;border-bottom:1px solid currentColor}
.link-arrow svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.link-arrow:hover svg{transform:translateY(2px)}

.ch{margin:0;display:inline-grid;justify-items:center;font-weight:800;font-size:clamp(46px,6.6vw,112px);line-height:.9;letter-spacing:-.045em}
.ch small{font-size:.34em;font-weight:400;letter-spacing:-.01em;margin-top:.34em;opacity:.8}
.ch.lefty{justify-items:start}
.para{margin:26px 0 0;max-width:32ch;font-size:clamp(14px,1.1vw,16.5px);line-height:1.65;color:var(--c-para)}
.copy.r .para{margin-top:0}
.spec-l{margin:0;font-size:clamp(15px,1.3vw,20px);font-weight:400;color:var(--c-para)}
.spec-v{margin:.12em 0 0;font-weight:800;font-size:clamp(42px,5.4vw,88px);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.spec-v small{font-size:.4em;font-weight:500;letter-spacing:-.01em;margin-left:.12em}
.spec-n{margin:16px 0 0;max-width:30ch;font-size:14px;line-height:1.6;color:var(--c-para)}

.layers-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;min-width:260px}
.layers-list li{opacity:.35;transition:opacity .35s var(--ease-out)}
.layers-list li.on,.layers-list li.sel{opacity:1}
.layers-list .lay{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:baseline;width:100%;
  background:none;border:0;border-radius:12px;padding:8px 12px;margin-inline-start:-12px;text-align:start;cursor:pointer;color:inherit;
  transition:background .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.layers-list .lay:hover{background:rgba(14,15,17,.05)}
.layers-list .lay[aria-pressed="true"]{background:rgba(14,15,17,.07);box-shadow:inset 0 0 0 1px var(--s-hair)}
.stage.dark .layers-list .lay:hover{background:rgba(236,238,241,.07)}
.lyr{transition:filter .35s var(--ease-out)}
.stage[data-iso] .ext i{opacity:0!important}
.stage[data-iso="1"] .lyr-flat,.stage[data-iso="1"] .lyr-chrome,
.stage[data-iso="2"] .lyr-wire,.stage[data-iso="2"] .lyr-chrome,
.stage[data-iso="3"] .lyr-wire,.stage[data-iso="3"] .lyr-flat{opacity:.07!important}
.stage[data-iso="1"] .lyr-wire,.stage[data-iso="2"] .lyr-flat,.stage[data-iso="3"] .lyr-chrome{filter:drop-shadow(0 26px 40px rgba(12,14,20,.3))}
.layers-list .k{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--c-mute);border-top:1px solid currentColor;padding-top:8px}
.layers-list b{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;display:block}
.layers-list span.d{grid-column:2;font-size:14px;color:var(--c-para)}

.c7l .ch{font-size:clamp(44px,5.4vw,92px)}
.chrome-text{background:linear-gradient(180deg,#FFFFFF 0%,#D9DDE3 40%,#8C929C 62%,#E8EAEE 78%,#A3A9B2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-chrome{background:var(--chrome);color:var(--ink)}
.btn-chrome:hover{background:#fff}

/* ---- stage HUD ---- */
.chap{position:absolute;left:clamp(20px,6vw,104px);bottom:30px;z-index:6;display:flex;align-items:center;gap:14px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--s-mute)}
.chap .n{color:var(--s-fg);font-variant-numeric:tabular-nums}
.chap .bar{width:56px;height:1px;background:var(--s-hair);position:relative;overflow:hidden}
.chap .bar i{position:absolute;inset:0;background:var(--s-fg);transform-origin:left;transform:scaleX(0)}
.chaps{position:absolute;inset-inline-end:clamp(12px,2vw,30px);top:50%;transform:translateY(-50%);z-index:7;display:grid;gap:4px;justify-items:end}
.chaps-line{position:absolute;inset-inline-end:-9px;top:8px;bottom:8px;width:1px;background:var(--s-hair)}
.chaps-line i{position:absolute;inset:0;background:var(--s-fg);transform-origin:top;transform:scaleY(0)}
.ch-btn{display:flex;align-items:center;justify-content:flex-end;gap:10px;background:none;border:0;padding:6px 0 6px 20px;cursor:pointer;
  color:var(--s-mute);font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.6;
  transition:opacity .25s var(--ease-out),color .25s var(--ease-out)}
.ch-btn span{opacity:0;transform:translateX(8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);white-space:nowrap;max-width:26vw;overflow:hidden;text-overflow:ellipsis}
[dir="rtl"] .ch-btn span{transform:translateX(-8px)}
.ch-btn i{display:block;flex:none;width:16px;height:2px;border-radius:2px;background:currentColor;transition:width .3s var(--ease-out)}
.ch-btn:hover,.ch-btn:focus-visible{opacity:1;color:var(--s-fg)}
.ch-btn:hover span,.ch-btn:focus-visible span{opacity:1;transform:none}
.ch-btn.on{opacity:1;color:var(--s-fg)}
.ch-btn.on i{width:30px}
.stage.dark .ch-btn.on{color:var(--gold-hi)}
.stage.dark .ch-btn.on i{background:linear-gradient(90deg,var(--gold),var(--gold-hi))}

/* ---- live language chips (final chapter) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:34ch}
.chip{border:1px solid var(--s-hair);background:rgba(236,238,241,.07);color:inherit;border-radius:999px;padding:9px 15px;
  font:600 13px/1 var(--f-sans);cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease-out)}
.chip:hover{background:rgba(236,238,241,.18);transform:translateY(-1px)}
.chip[aria-current="true"]{background:var(--chrome);color:var(--ink);border-color:transparent}
.chip.more{font:600 11px/1 var(--f-mono);letter-spacing:.1em;padding-inline:13px}

/* ---- speed meter (measures this page) ---- */
.meter{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:330px}
.mt-btn{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:inherit;
  border:1px solid var(--s-hair);background:rgba(14,15,17,.04);transition:background .2s,transform .2s var(--ease-out)}
.mt-btn:hover{background:rgba(14,15,17,.09);transform:scale(1.06)}
.stage.dark .mt-btn{background:rgba(236,238,241,.08)}
.mt-btn .ic{width:17px;height:17px;fill:currentColor;stroke:none}
.mt-track{position:relative;flex:1;height:6px;border-radius:999px;background:var(--s-hair)}
.mt-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:linear-gradient(90deg,#9AA1AC,#E9EBEF)}
.mt-mark{position:absolute;left:50%;top:-7px;bottom:-7px;width:1px;background:currentColor;opacity:.4}
.mt-mark::after{content:"2.5s";position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font:500 9px/1 var(--f-mono);opacity:.75;letter-spacing:.06em}
.mt-val{font:700 15px/1 var(--f-mono);min-width:56px;text-align:end;font-variant-numeric:tabular-nums}
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:6;display:grid;justify-items:center;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--s-mute)}
.cue svg{width:14px;height:14px;animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ---- intro ---- */
html.js .c0 .ci > *{animation:rise 1s var(--ease-out) both}
html.js .c0 .ci > *:nth-child(2){animation-delay:.08s}
html.js .c0 .ci > *:nth-child(3){animation-delay:.16s}
html.js .c0 .ci > *:nth-child(4){animation-delay:.24s}
html.js .obj{animation:objIn 1.4s var(--ease-out) both .1s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes objIn{from{transform:translate3d(0,60px,0)}to{transform:none}}

@media (max-width:760px){
  .film{height:440vh}
  .stage{--base:min(50svh,82vw)}
  .copy{max-width:none;left:20px!important;right:28px!important}
  .copy.l{top:calc(64px + 5svh);transform:none}
  .copy.r{top:auto;bottom:calc(58px + 3svh);transform:none}
  .copy.c0{top:calc(64px + 4svh)}
  .h-hero{font-size:clamp(38px,11.5vw,56px)}
  .hero-ctas{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .hero-ctas .btn-ink{justify-content:center;min-height:54px;font-size:15px}
  .hero-ctas .link-arrow{justify-content:center;white-space:nowrap;border:1px solid var(--hair);border-bottom-color:var(--hair);border-radius:4px;min-height:54px;padding-inline:12px;font-size:15px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .copy.on-dark .hero-ctas .link-arrow{background:rgba(20,22,26,.5)}
  .lede{margin-top:16px;font-size:15px}
  .hero-ctas{margin-top:20px}
  .ch{font-size:clamp(44px,13vw,64px)}
  .ch.lefty,.ch{justify-items:start}
  .para{margin-top:14px;max-width:40ch}
  .spec-v{font-size:clamp(40px,12vw,60px)}
  .spec-n{margin-top:8px}
  .chaps{gap:2px;inset-inline-end:3px}
  .chaps-line{display:none}
  .ch-btn{padding:7px 0 7px 14px}
  .ch-btn span{display:none}
  .ch-btn i{width:10px}
  .ch-btn.on i{width:18px}
  .chap{bottom:22px;left:20px}
  .chips{gap:6px;margin-top:14px}
  .chip{padding:7px 12px;font-size:12px}
  .chip:nth-of-type(n+6){display:none}
  .meter{margin-top:12px;gap:10px}
  .mt-btn{width:38px;height:38px}
  .cue{display:none}
  .layers-list{gap:2px;min-width:0}
  .layers-list b{font-size:18px}
  .layers-list span.d{display:none}
  .layers-list .lay{padding:7px 10px;margin-inline-start:-10px;grid-template-columns:34px 1fr}
  .c7l .ch{font-size:clamp(38px,11vw,56px)}
}

/* ---- static fallback: no JS, or reduced motion ---- */
html:not(.js) .film,html.rm .film{height:auto}
html:not(.js) .stage,html.rm .stage{position:relative;height:auto;display:flex;flex-direction:column;gap:64px;padding:128px clamp(20px,6vw,104px) 96px;--base:min(62vh,84vw);color:var(--chrome)}
html:not(.js) .bg-studio,html.rm .bg-studio,
html:not(.js) .bg-night,html.rm .bg-night{display:none}
html:not(.js) .bg-dark,html.rm .bg-dark{opacity:1}
html:not(.js) .rig,html.rm .rig{position:relative;left:auto;top:auto;margin:0 auto;order:1}
html:not(.js) .c0,html.rm .c0{order:0}
html:not(.js) .copy,html.rm .copy{position:relative;inset:auto!important;transform:none;max-width:640px;order:2}
html:not(.js) .copy .ci,html.rm .copy .ci{opacity:1!important;transform:none!important;filter:none!important}
html:not(.js) .copy.on-light,html.rm .copy.on-light{--c-ink:var(--chrome);--c-para:#A9AEB8;--c-mute:rgba(236,238,241,.55)}
html:not(.js) .h-hero .b,html.rm .h-hero .b{color:#C9CDD3}
html:not(.js) .btn-ink,html.rm .btn-ink{background:var(--chrome);color:var(--ink)}
html:not(.js) .rings,html.rm .rings,html:not(.js) .floor,html.rm .floor,
html:not(.js) .chap,html.rm .chap,html:not(.js) .chaps,html.rm .chaps,
html:not(.js) .cue,html.rm .cue,html:not(.js) .c4l,html.rm .c4l,html:not(.js) .c4r,html.rm .c4r{display:none}


/* ==========================================================
   SECTIONS BELOW THE FILM
   ========================================================== */
:root{
  --t-slate:#A3B6D2;
  --t-teal:#3CCBAA;
  --t-blue:#6E9FFF;
  --t-gold:#EBC45C;
  --t-violet:#B69CFF;
  --ease-spring:cubic-bezier(.32,.72,0,1);
  --shell:rgba(236,238,241,.035);
  --shell-line:rgba(236,238,241,.085);
  --core:linear-gradient(180deg,#171920 0%,#101217 100%);
  --core-hi:inset 0 1px 0 rgba(255,255,255,.075);
}
/* scripts that need their own faces (loaded on demand) */
html{--fx:'Noto Sans';--f-sans:'Bricolage Grotesque','Familjen Grotesk',var(--fx),ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--f-serif:'Cinzel',var(--fx),Georgia,'Times New Roman',serif}
html[dir="rtl"]{--f-sans:var(--fx),'Bricolage Grotesque','Familjen Grotesk',Tahoma,sans-serif;--f-serif:var(--fx),Georgia,serif}
html.no-track body *{letter-spacing:normal!important}
html.tall :is(.h-hero,.ch,.h2,.pk-name,.spec-v,.mq span){line-height:1.3!important}
html.tall .h-hero .b{margin-top:.45em}
html.tall .ch small{margin-top:.2em}

.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
bdi{unicode-bidi:isolate}

/* ---------- nav additions ---------- */
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 12px;
  border-radius:999px;border:1px solid var(--hair);background:transparent;cursor:pointer;color:inherit;
  font:600 12px/1 var(--f-mono);letter-spacing:.06em;
  transition:background-color .3s var(--ease-spring),border-color .3s var(--ease-spring);
}
.lang-btn:hover{background:rgba(127,127,127,.12)}
.lang-btn .ic{width:18px;height:18px}
.lang-btn .lang-name{display:none}
.nav-call{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 13px;border-radius:999px;
  border:1px solid var(--hair);text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap;
  transition:background-color .3s var(--ease-spring);
}
.nav-call:hover{background:rgba(127,127,127,.12)}
.nav-call .ic{width:17px;height:17px}
.nav .btn-cta{border-radius:999px;height:42px;padding:0 18px}
@media (max-width:1240px){.nav-call{display:none}}
@media (max-width:900px){
  .nav-right{gap:8px}
  .lang-btn{height:44px}
}

/* mobile menu */
.mnav{padding:104px var(--gutter) calc(110px + env(safe-area-inset-bottom));gap:32px;overflow-y:auto;background:rgba(10,11,14,.92);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.mnav a{font-size:clamp(34px,9vw,56px);overflow-wrap:anywhere}
.mnav li{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-spring),transform .8s var(--ease-spring)}
.menu-open .mnav li{opacity:1;transform:none}
.menu-open .mnav li:nth-child(2){transition-delay:.05s}
.menu-open .mnav li:nth-child(3){transition-delay:.1s}
.menu-open .mnav li:nth-child(4){transition-delay:.15s}
.mnav-actions{display:grid;gap:10px}
.big-act{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:26px;text-decoration:none;background:rgba(236,238,241,.06);border:1px solid rgba(236,238,241,.12)}
.big-act:first-child{background:var(--chrome);color:var(--ink);border-color:var(--chrome)}
.big-act .ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(127,127,127,.16)}
.big-act .ico .ic{width:22px;height:22px}
.big-act b{display:block;font-size:13px;font-weight:600;opacity:.7}
.big-act bdi{display:block;font-weight:800;font-size:clamp(14px,4.2vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big-act > span:last-child{min-width:0}

/* ---------- film tweaks for the contact dock on phones ---------- */
@media (max-width:760px){
  .stage{--base:min(44svh,78vw)}
  .copy.r{bottom:calc(96px + 2svh + env(safe-area-inset-bottom))}
  .chap{display:none}
}

/* ---------- shared section chrome ---------- */
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
/* Section rhythm.

   This was clamp(96px,12vw,176px), which on a phone floors at 96px top
   AND bottom - 192px of nothing between every section, on a screen 844px
   tall. Nearly a quarter of the viewport spent on a gap, repeated nine
   times. Generous spacing reads as confidence on a desktop and as
   "nothing here" on a phone, because the phone cannot see what is
   coming next.

   The floor comes down and the vw term does the work sooner, so a
   desktop keeps most of its air while a phone stops scrolling through
   emptiness to get to the next thing. */
.sec{padding-block:clamp(46px,7.5vw,132px);position:relative}
.sec.first{background:linear-gradient(180deg,var(--night) 0,var(--gr) 460px)}
.pill-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border-radius:999px;
  font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#C9CDD4;
  background:rgba(236,238,241,.04);border:1px solid rgba(236,238,241,.13);
}
.pill-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 12px rgba(224,177,92,.9)}
/* hyphens:auto is here for the long compounds in German, Polish and Dutch,
   which genuinely do not fit a phone unbroken. Left unbounded it also
   breaks ordinary English words - "busi-ness" across two lines of a
   headline, which reads as the text being cut rather than wrapped.
   hyphenate-limit-chars puts a floor under it: nothing shorter than
   twelve letters may break at all, and a break must leave at least five
   letters on each side. Every word that needed hyphenating is longer
   than that; none of the words that did not are. */
.h2,.pk-name,.ch,.h-hero,.rl-top b,.bx-txt h3,.lang-tiers span{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;
  -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;
  hyphenate-limit-chars:12 5 5}
.h2{margin:22px 0 0;font-family:var(--f-display);font-weight:800;font-optical-sizing:auto;font-size:clamp(38px,5.6vw,88px);line-height:.98;letter-spacing:-.048em;max-width:15ch;text-wrap:balance}
/* The accent word. One word per headline - the one that carries the promise -
   set in a light italic serif against the heavy grotesk, and lit in gold. The
   contrast in weight and style is what pulls the eye; the colour just confirms it. */
.h2 em,.hero-h em{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.07em;line-height:.9;
  background:linear-gradient(165deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-deep) 110%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-inline-end:.04em}
.hero-h .chrome-text em{background:linear-gradient(165deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-deep) 110%);-webkit-background-clip:text;background-clip:text}
.sub{margin:22px 0 0;color:var(--mute);font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:50ch}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap}
.sec-head.split .sub{max-width:38ch}
.fine{margin:28px 0 0;color:var(--mute-2);font-size:13px;line-height:1.65;max-width:72ch}

/* buttons */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:58px;padding:8px 8px 8px 26px;border-radius:999px;border:0;cursor:pointer;
  background:var(--chrome);color:var(--ink);font-family:var(--f-sans);font-weight:700;font-size:16px;text-decoration:none;
  transition:transform .6s var(--ease-spring),background-color .3s var(--ease-spring),box-shadow .6s var(--ease-spring);
}
.btn-pill .bi{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(14,15,17,.1);transition:transform .6s var(--ease-spring)}
.btn-pill .bi .ic{width:18px;height:18px;stroke-width:1.8}
.btn-pill:hover .bi{transform:translate(2px,-2px) scale(1.06)}
.btn-pill:hover{box-shadow:0 18px 44px -18px rgba(224,177,92,.55)}
.btn-pill:active{transform:scale(.98)}
.btn-pill.wide{width:100%}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:0 24px 0 20px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--chrome);text-decoration:none;font-weight:700;font-size:16px;
  transition:background-color .3s var(--ease-spring),border-color .3s var(--ease-spring),transform .6s var(--ease-spring);
}
.btn-ghost:hover{background:rgba(236,238,241,.06);border-color:rgba(236,238,241,.4)}
.btn-ghost:active{transform:scale(.98)}


/* ==========================================================
   QUOTE BUILDER
   ========================================================== */
.est{margin-top:52px;display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(18px,2.2vw,30px);align-items:start}
.est-cols{display:grid;gap:22px}
.est-grp{border:0;margin:0;padding:0;min-width:0}
.est-grp legend{padding:0 0 12px;font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2)}
.est-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.est-adds{grid-template-columns:repeat(3,minmax(0,1fr))}
.est-opt{position:relative;display:block;cursor:pointer}
.est-opt input{position:absolute;opacity:0;width:0;height:0}
.eo-box{display:grid;gap:5px;padding:15px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(236,238,241,.03);
  transition:border-color .25s var(--ease-spring),background-color .25s var(--ease-spring),transform .4s var(--ease-spring)}
.eo-box b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.eo-box i{font-style:normal;font:500 12.5px/1.3 var(--f-mono);color:var(--mute)}
.est-opt:hover .eo-box{border-color:rgba(236,238,241,.26);transform:translateY(-2px)}
/* Selection has to be unmistakable, because it is the only thing on this
   form the visitor controls and the totals move with it. A solid rim plus
   a real fill, not a tint a few percent away from the resting state. The
   rim is an inset shadow rather than a thicker border so nothing reflows
   when a card is picked. */
.est-opt input:checked + .eo-box{
  border-color:var(--gold);
  background:rgba(224,177,92,.16);
  box-shadow:inset 0 0 0 1px rgba(224,177,92,.85),
             0 10px 26px -14px rgba(224,177,92,.5);
}
.est-opt input:checked + .eo-box b{color:#FFF6E4}
.est-opt input:checked + .eo-box i{color:var(--gold-hi)}
.est-opt input:focus-visible + .eo-box{outline:2px solid var(--gold);outline-offset:2px}
.est-out{position:sticky;top:96px;display:grid;gap:14px;padding:clamp(20px,2.2vw,28px);border-radius:24px;
  border:1px solid rgba(224,177,92,.28);background:linear-gradient(180deg,rgba(224,177,92,.08),rgba(236,238,241,.02))}
.est-tot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.et-l{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.et-v{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.est-out .btn-pill{width:100%;margin-top:4px}
.est-out .fine{margin-top:0;font-size:12px}
/* checkout: bundle saving, when monthly starts, the pay button's fallbacks */
.et-bundle .et-v{color:var(--gold);font-size:clamp(20px,2.2vw,26px)}
.et-bundle[hidden]{display:none}
.et-when{margin:0;font-size:13px;line-height:1.45;color:var(--mute)}
.et-err{margin:0;font-size:13.5px;line-height:1.45;color:#FF8A8A}
.et-err[hidden]{display:none}
.et-alt{background:none;border:0;padding:4px 0;color:var(--mute);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:center}
.et-alt:hover{color:var(--chrome)}
.et-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;font-size:12.5px;color:var(--mute)}
.et-secure .ic{width:14px;height:14px;color:var(--gold);flex:none}
#etPay[aria-busy="true"]{opacity:.7;pointer-events:none}
#etPay:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:1080px){
  .est{grid-template-columns:1fr}
  .est-out{position:static}
  .est-adds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .est-opts,.est-adds{grid-template-columns:1fr}
  .eo-box{padding:13px 14px}
}

/* page scroll progress */
.prog{position:fixed;inset:0 0 auto 0;height:2px;z-index:70;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi))}

/* clickable greetings in the language marquee */
.mq button{font:inherit;color:inherit;background:none;border:0;padding:0 2px;cursor:pointer;border-radius:6px;transition:color .2s,opacity .2s}
.mq button:hover{color:var(--gold-hi)}
.marquee:hover .mq{animation-play-state:paused}

/* ==========================================================
   FAQ
   ========================================================== */
.faq{margin-top:56px;display:grid;gap:10px;max-width:1000px}
.fq{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(236,238,241,.045),rgba(236,238,241,.015));
  transition:border-color .3s var(--ease-spring),background-color .3s var(--ease-spring)}
.fq:hover{border-color:rgba(236,238,241,.2)}
.fq[open]{border-color:rgba(224,177,92,.42);background:linear-gradient(180deg,rgba(224,177,92,.07),rgba(236,238,241,.02))}
.fq[open] .fq-n{color:var(--gold-hi)}
.fq-q{display:flex;align-items:center;gap:16px;padding:22px clamp(18px,2.2vw,28px);cursor:pointer;list-style:none;
  font-weight:700;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.015em}
.fq-q::-webkit-details-marker{display:none}
.fq-q:focus-visible{outline:2px solid var(--chrome);outline-offset:-4px;border-radius:20px}
.fq-n{flex:none;font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--mute-2);padding-top:3px}
.fq-t{flex:1}
.fq-i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--chrome);
  transition:transform .4s var(--ease-spring),background-color .3s var(--ease-spring)}
.fq-i .ic{width:17px;height:17px}
.fq:hover .fq-i{background:rgba(236,238,241,.08)}
.fq[open] .fq-i{transform:rotate(180deg);background:linear-gradient(160deg,var(--gold-hi),var(--gold));border-color:transparent;color:#2A1E08}
.fq-a{padding:0 clamp(18px,2.2vw,28px) 24px;max-width:74ch}
.fq-a p{margin:0;color:var(--mute);font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.72}
html.js:not(.rm) .fq[open] .fq-a{animation:fqIn .45s var(--ease-spring) both}
@keyframes fqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-foot{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;
  padding:26px clamp(18px,2.4vw,32px);border:1px solid var(--line);border-radius:24px;background:rgba(236,238,241,.03)}
.faq-foot p{margin:0;color:var(--chrome);font-size:clamp(16px,1.4vw,19px);font-weight:600;max-width:40ch;line-height:1.45}
.faq-acts{display:flex;gap:10px;flex-wrap:wrap}
.faq-acts .btn-pill,.faq-acts .btn-ghost{min-height:52px;font-size:15px}
.faq-acts .btn-pill{padding-inline:22px;gap:10px}
.faq-acts .ic{width:18px;height:18px}

/* scroll reveal — visible by default, animated only when JS runs */
html.js:not(.rm) .rv{opacity:0;transform:translate3d(0,48px,0);transition:opacity 1s var(--ease-spring),transform 1.2s var(--ease-spring)}
html.js:not(.rm) .rv.in{opacity:1;transform:none}
html.js:not(.rm) .reels .rl:nth-child(2){transition-delay:.06s}
html.js:not(.rm) .reels .rl:nth-child(3){transition-delay:.12s}
html.js:not(.rm) .reels .rl:nth-child(4){transition-delay:.18s}

/* ---------- PACKAGES ---------- */
.jumps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:52px}
.jump{
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:2px;
  padding:18px 20px;border-radius:24px;text-decoration:none;
  background:var(--shell);border:1px solid var(--shell-line);
  transition:transform .6s var(--ease-spring),border-color .3s var(--ease-spring),background-color .3s var(--ease-spring);
}
.jump:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tc) 55%,transparent);background:color-mix(in srgb,var(--tc) 7%,transparent)}
.j-dot{width:10px;height:10px;border-radius:50%;background:var(--tc);box-shadow:0 0 14px var(--tc)}
.j-name{font-weight:600;font-size:15px;line-height:1.25}
.j-price{font-family:var(--f-display);grid-column:1/-1;margin-top:12px;font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.j-mo{grid-column:1/-1;color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}

.stack{margin-top:40px;display:grid;gap:28px}
html.js:not(.rm) .pk{position:sticky;top:92px}
.pk-shell{padding:8px;border-radius:40px;background:rgba(18,19,24,.92);border:1px solid var(--shell-line);transform-origin:50% 50%;box-shadow:0 -30px 80px -40px rgba(0,0,0,.9)}
.pk-core{position:relative;overflow:hidden;border-radius:32px;background:var(--core);box-shadow:var(--core-hi);padding:clamp(22px,3.4vw,52px)}
.pk-core::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 65% at 0% 0%,color-mix(in srgb,var(--tc) 24%,transparent),transparent 72%)}
.pk-core::after{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--tc),transparent);opacity:.8}
.pk-dim{position:absolute;inset:0;z-index:4;background:#07080A;opacity:0;pointer-events:none}
.pk-head,.pk-grid,.pk-tagline{position:relative;z-index:1}
.pk-head{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
.pill-tag{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);border:1px solid color-mix(in srgb,var(--tc) 38%,transparent)}
.pk-banner{font:500 12px/1.45 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#C9CDD4}
.pk-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.38fr);gap:clamp(28px,4.4vw,72px);margin-top:30px}
.pk-name{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,3.8vw,58px);letter-spacing:-.045em;line-height:1;text-wrap:balance}
.pk-desc{margin:14px 0 0;color:var(--mute);font-size:16px;line-height:1.6;max-width:44ch}
.pk-price{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.pp{display:grid;align-content:start;gap:8px;padding:16px 18px;border-radius:22px;background:rgba(236,238,241,.04);border:1px solid rgba(236,238,241,.08)}
.pp.mo{background:color-mix(in srgb,var(--tc) 11%,transparent);border-color:color-mix(in srgb,var(--tc) 32%,transparent)}
.pp .amt{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,3.3vw,50px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp .amt small{font-size:.36em;font-weight:500;letter-spacing:0;color:var(--mute);margin-inline-start:4px}
.pp .lbl{font:500 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pk-chips{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pk-chips li{display:grid;align-content:start;gap:6px;padding:13px 14px;border-radius:18px;background:rgba(236,238,241,.03);border:1px solid rgba(236,238,241,.07)}
.pk-chips span{font:500 10px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tc)}
.pk-chips b{font-size:14px;font-weight:600;line-height:1.35}

/* ---------- AI AUTOMATION (same card language as the packages, no pinning) ---------- */
.sec-ak{background:linear-gradient(180deg,var(--gr) 0,#0C0B14 45%,var(--gr) 100%)}
.jumps.j3{grid-template-columns:repeat(3,1fr)}
.ak .pk-core::before{background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%)}
.ak-foot{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;padding:24px 28px;border-radius:30px;background:var(--shell);border:1px solid var(--shell-line)}
.ak-foot p{margin:0;max-width:54ch;color:#C9CDD4;font-size:16px;line-height:1.55}
.ak-acts{display:flex;flex-wrap:wrap;gap:10px}
/* contact form: send the same message by text or email instead */
.cf-alt{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13.5px;color:var(--mute)}
.cf-alt a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--chrome);text-decoration:none;background:var(--shell);border:1px solid var(--shell-line);transition:border-color .3s var(--ease-spring),background-color .3s var(--ease-spring),transform .5s var(--ease-spring)}
.cf-alt a:hover{border-color:var(--line-2);background:rgba(236,238,241,.07);transform:translateY(-1px)}
.cf-alt .ic{width:15px;height:15px}
.pk-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pk .btn-pill{background:var(--tc);color:#0B0C0F}
.pk .btn-pill:hover{box-shadow:0 18px 40px -16px color-mix(in srgb,var(--tc) 70%,transparent)}
.pk-lists{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;align-content:start}
.grp.g1{grid-column:1/-1}
.grp h4{margin:0 0 14px;padding-bottom:12px;font:600 12px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#DDE0E5;border-bottom:1px solid color-mix(in srgb,var(--tc) 34%,rgba(236,238,241,.06))}
.grp ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.grp.g1 ul{grid-template-columns:1fr 1fr;column-gap:26px}
.grp li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15px;line-height:1.45;color:#CDD1D8}
.grp li .ic{width:18px;height:18px;margin-top:1px;color:var(--tc);stroke-width:2.1}
/* The deciding phrase in each bullet, lifted in the card's own colour.
   --tc is already set on the card, so each tier highlights in its own
   hue with no extra rules: teal on Launch, blue on Growth, gold on VIP.
   Weight and colour only - no background, because a highlighter block
   in a list of ticks reads as a search result, not as emphasis. */
.grp li .hl{font-style:normal;font-weight:700;color:var(--tc)}
/* ---------- the collapsed feature list ---------- */
/* Collapsed, the remaining three lines read down a single column as
   highlights. Left in the authored two-column grid they sit as 2+1 with
   a hole beside them, which looks like something failed to load. */
.pk-lists.pkl-cut{grid-template-columns:1fr;gap:0}
.pk-lists.pkl-cut .grp ul,
.pk-lists.pkl-cut .grp.g1 ul{grid-template-columns:1fr}

/* The control is deliberately quiet: a full-width hairline strip, not a
   second button competing with "Get this package" a few pixels above
   it. It is a door, not an offer. */
.pkl-more{
  appearance:none;width:100%;margin-top:18px;
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:14px;cursor:pointer;
  background:rgba(236,238,241,.03);
  border:1px solid color-mix(in srgb,var(--tc) 22%,rgba(236,238,241,.1));
  color:#D5D9DF;font:600 13px/1 inherit;text-align:start;
  transition:background-color .3s var(--ease-spring),border-color .3s var(--ease-spring);
}
.pkl-more:hover{background:rgba(236,238,241,.06);border-color:color-mix(in srgb,var(--tc) 46%,rgba(236,238,241,.14))}
.pkl-more:focus-visible{outline:2px solid var(--tc);outline-offset:2px}
.pkl-more .pkl-n{margin-inline-start:auto;font:600 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--tc)}
.pkl-more .pkl-chev{
  width:9px;height:9px;flex:0 0 auto;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .32s var(--ease-spring);
}
/* The same control under the FAQ, which has no package accent colour of
   its own to borrow, so it is given the house gold. */
.faq-more{--tc:var(--gold);max-width:none;margin-top:14px}
.pkl-more[aria-expanded="false"] .pkl-b{display:none}
.pkl-more[aria-expanded="true"]  .pkl-a{display:none}
.pkl-more[aria-expanded="true"]  .pkl-n{display:none}
.pkl-more[aria-expanded="true"]  .pkl-chev{transform:rotate(-135deg) translate(-3px,-3px)}
@media (prefers-reduced-motion:reduce){.pkl-more,.pkl-more .pkl-chev{transition:none}}

.pk-tagline{margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(236,238,241,.07);font:600 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tc);text-align:end}

/* ---------- VIDEO PROMOS ---------- */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);margin-top:56px}
.rl{margin:0;display:grid;align-content:start;gap:18px}
.rl-shell{padding:6px;border-radius:36px;background:var(--shell);border:1px solid var(--shell-line);
  transition:transform .5s var(--ease-spring),border-color .35s var(--ease-spring),box-shadow .5s var(--ease-spring)}
.rl:hover .rl-shell{transform:translateY(-4px);border-color:rgba(224,177,92,.35);box-shadow:0 26px 50px -28px rgba(0,0,0,.7)}
.reel{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;isolation:isolate;container-type:inline-size;box-shadow:var(--core-hi);background:#0B0C0F}
.rl-play{position:absolute;z-index:6;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(10,11,14,.55);border:1px solid rgba(255,255,255,.25);color:#fff}
.rl-play .ic{width:16px;height:16px;fill:currentColor;stroke:none}
.rl-fb{position:absolute;inset:0;opacity:0}
.reel.vfail .rl-fb{opacity:1}
.rl-vid{position:absolute;inset:0;z-index:5;width:100%;height:100%;object-fit:cover;display:block;background:#0B0C0F}
.reel.vfail .rl-vid{display:none}
.rl-len{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.rl-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-top:10px}
.rl-top b{font-size:19px;letter-spacing:-.02em;line-height:1.2}
.rl-price{font-weight:800;font-size:21px;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rl-price small{font-size:12px;font-weight:500;color:var(--mute);letter-spacing:0}
.rl figcaption p{margin:8px 0 0;color:var(--mute);font-size:14px;line-height:1.55}
.reel *,.reel *::before,.reel *::after{animation-play-state:paused!important}
.reel.playing *,.reel.playing *::before,.reel.playing *::after{animation-play-state:running!important}

/* scene 1 — standard promo */
.r1{background:#0F1A33}
.r1 .s-bg{position:absolute;inset:-40%;background:conic-gradient(from 0deg,#1B2B55,#2F6DB5,#3CCBAA,#EBC45C,#1B2B55);opacity:.85;animation:spin 14s linear infinite}
.r1 .s-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(11,12,15,0) 20%,rgba(11,12,15,.85) 95%)}
.r1 .s-mono{position:absolute;left:50%;top:16%;width:46%;aspect-ratio:1;margin-left:-23%;background:var(--mono) center/contain no-repeat;animation:monoPop 6s var(--ease-spring) infinite}
.r1 .s-words{position:absolute;left:0;right:0;top:60%;height:1.1em;overflow:hidden;text-align:center;font-weight:900;font-size:13cqw;letter-spacing:-.03em;color:#fff}
.r1 .s-words b{display:block;height:1.1em;line-height:1.1em;animation:words 6s var(--ease-spring) infinite}
.r1 .s-btn{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);padding:3.4cqw 7cqw;border-radius:99px;background:#fff;color:#0E0F11;font:800 6cqw/1 var(--f-sans);white-space:nowrap;animation:pulse 2s var(--ease-io) infinite}

/* scene 2 — cinematic */
.r2{background:#07080A}
.r2 .s-light{position:absolute;left:-30%;top:12%;width:160%;height:78%;background:radial-gradient(closest-side,rgba(255,178,92,.6),rgba(255,120,40,.16) 55%,transparent);animation:drift 8s var(--ease-io) infinite alternate}
.r2 .s-bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,214,160,.75),rgba(255,214,160,0) 70%);animation:floatUp 9s var(--ease-io) infinite}
.r2 .s-bokeh i:nth-child(1){width:22%;aspect-ratio:1;left:8%;top:62%}
.r2 .s-bokeh i:nth-child(2){width:14%;aspect-ratio:1;left:66%;top:30%;animation-delay:-2s}
.r2 .s-bokeh i:nth-child(3){width:30%;aspect-ratio:1;left:52%;top:64%;animation-delay:-4s;opacity:.6}
.r2 .s-bokeh i:nth-child(4){width:10%;aspect-ratio:1;left:24%;top:24%;animation-delay:-6s}
.r2 .s-bokeh i:nth-child(5){width:18%;aspect-ratio:1;left:78%;top:70%;animation-delay:-1s;opacity:.7}
.r2 .s-bokeh i:nth-child(6){width:12%;aspect-ratio:1;left:40%;top:44%;animation-delay:-5s}
.r2 .s-sweep{position:absolute;inset:-10% -80%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);animation:sweep 5.5s var(--ease-io) infinite}
.r2 .s-title{position:absolute;inset:0;display:grid;place-items:center;font-family:'Cinzel',Georgia,serif;font-size:10.5cqw;letter-spacing:.22em;color:#F6E7D2;text-shadow:0 0 18px rgba(255,170,90,.45);animation:titleIn 6s var(--ease-io) infinite}
.r2 .s-bars{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000 0 10%,transparent 10% 90%,#000 90%)}
.r2 .s-rec{position:absolute;left:8%;top:13%;display:flex;align-items:center;gap:2.4cqw;font:600 4.6cqw/1 var(--f-mono);color:#fff}
.r2 .s-rec i{width:3.2cqw;height:3.2cqw;border-radius:50%;background:#FF3B30;animation:blink 1.2s steps(2,jump-none) infinite}
.r2 .s-tc{position:absolute;right:8%;bottom:13%;font:500 4.2cqw/1 var(--f-mono);color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}

/* scene 3 — cartoon */
.r3{background:#FFD23F}
.r3 .s-sun{position:absolute;right:-16%;top:-10%;width:66%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#FFA52E 0 9deg,transparent 9deg 18deg);animation:spin 16s linear infinite}
.r3 .s-sun::after{content:"";position:absolute;inset:24%;border-radius:50%;background:#FF7A1A}
.r3 .s-hill{position:absolute;left:-25%;right:-25%;bottom:-20%;height:46%;border-radius:50% 50% 0 0;background:#2EC4B6}
.r3 .s-hill::after{content:"";position:absolute;left:10%;right:30%;top:-12%;height:40%;border-radius:50% 50% 0 0;background:#25A99C;z-index:-1}
.r3 .s-buddy{position:absolute;left:50%;bottom:22%;width:46%;aspect-ratio:1;margin-left:-23%;border-radius:50% 50% 44% 44%;background:#FF5D8F;box-shadow:inset -4cqw -4cqw 0 rgba(0,0,0,.08);animation:bounce 1.4s var(--ease-spring) infinite}
.r3 .s-buddy .e1,.r3 .s-buddy .e2{position:absolute;top:28%;width:24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 55% 55%,#1B0B12 0 32%,#fff 34%);animation:blinkEye 3.2s infinite}
.r3 .s-buddy .e1{left:22%}.r3 .s-buddy .e2{right:22%}
.r3 .s-buddy .m{position:absolute;left:35%;right:35%;top:62%;height:14%;border-radius:0 0 50% 50%;background:#3A0D1C}
.r3 .s-bubble{position:absolute;left:9%;top:20%;padding:3cqw 4.4cqw;border-radius:6cqw;background:#fff;color:#1B0B12;font:900 7cqw/1 var(--f-sans);transform-origin:20% 100%;animation:pop 3s var(--ease-spring) infinite}
.r3 .s-bubble::after{content:"";position:absolute;left:18%;bottom:-2.6cqw;border:1.6cqw solid transparent;border-top:2.4cqw solid #fff;border-bottom:0}
.r3 .s-star{position:absolute;left:18%;top:48%;width:9%;aspect-ratio:1;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:twinkle 2.2s var(--ease-io) infinite}

/* scene 4 — extended multi-scene */
.r4 .s-strip{position:absolute;inset:0;display:flex;width:300%;animation:cuts 9s var(--ease-spring) infinite}
.r4 .sc{flex:0 0 33.3333%;position:relative;display:grid;place-items:center;align-content:center;gap:2cqw;text-align:center;color:#fff}
.r4 .sc b{font-weight:900;font-size:13cqw;letter-spacing:-.04em;line-height:1}
.r4 .sc span{font:500 4.4cqw/1 var(--f-mono);letter-spacing:.3em}
.r4 .sc1{background:linear-gradient(160deg,#0C3833,#1E9A82)}
.r4 .sc2{background:radial-gradient(circle at 50% 40%,#2B4BD8,#0B1150 72%)}
.r4 .sc2 .s-mono{width:62%;aspect-ratio:1;background:var(--mono) center/contain no-repeat}
.r4 .sc3{background:linear-gradient(160deg,#4E3A0C,#EBC45C);color:#171103}
.r4 .sc3 b{font-size:18cqw}
.r4 .s-tl{position:absolute;z-index:5;left:8%;right:22%;bottom:8%;height:1.8cqw;display:flex;gap:1.6cqw}
.r4 .s-tl i{flex:1;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.r4 .s-tl i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.r4 .s-tl i:nth-child(1)::after{animation:fill1 9s linear infinite}
.r4 .s-tl i:nth-child(2)::after{animation:fill2 9s linear infinite}
.r4 .s-tl i:nth-child(3)::after{animation:fill3 9s linear infinite}
.r4 .s-tl em{display:none}

@keyframes spin{to{transform:rotate(1turn)}}
@keyframes monoPop{0%{transform:scale(.6) translateY(10%);opacity:0}14%,86%{transform:none;opacity:1}100%{transform:scale(1.08);opacity:0}}
@keyframes words{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-100%)}66%,94%{transform:translateY(-200%)}100%{transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.07)}}
@keyframes drift{from{transform:translate3d(-6%,4%,0)}to{transform:translate3d(8%,-4%,0)}}
@keyframes floatUp{0%{transform:translate3d(0,12%,0);opacity:0}30%,70%{opacity:1}100%{transform:translate3d(0,-60%,0);opacity:0}}
@keyframes sweep{0%{transform:translateX(-40%)}60%,100%{transform:translateX(40%)}}
@keyframes titleIn{0%,8%{opacity:0;transform:scale(1.08)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes blink{50%{opacity:0}}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-22%) scale(.96,1.04)}55%{transform:translateY(-22%)}85%{transform:translateY(0) scale(1.06,.94)}}
@keyframes blinkEye{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes pop{0%,10%{transform:scale(0)}22%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(40deg);opacity:1}}
@keyframes cuts{0%,28%{transform:translateX(0)}33%,61%{transform:translateX(-33.3333%)}66%,94%{transform:translateX(-66.6666%)}100%{transform:translateX(0)}}
@keyframes fill1{0%{transform:scaleX(0)}31%,100%{transform:scaleX(1)}}
@keyframes fill2{0%,31%{transform:scaleX(0)}64%,100%{transform:scaleX(1)}}
@keyframes fill3{0%,64%{transform:scaleX(0)}97%,100%{transform:scaleX(1)}}

.xchips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.xchip{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;border-radius:28px;background:var(--shell);border:1px solid var(--shell-line)}
.xi{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(224,177,92,.10);color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(224,177,92,.22)}
.xchip > div{flex:1;min-width:0}
.xt{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:17px;line-height:1.3}
.xt b{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.xchip p:not(.xt){margin:6px 0 0;color:var(--mute);font-size:14px;line-height:1.55}
.vid-foot{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;margin-top:28px}
.vid-foot .fine{margin:0;max-width:60ch}

/* ---------- LANGUAGES ---------- */
.sec-lang{padding-block:clamp(80px,10vw,150px);overflow:hidden;background:radial-gradient(60% 70% at 50% 0%,rgba(84,112,255,.16),transparent 70%),var(--gr);border-block:1px solid var(--line)}
.mq{overflow:hidden;white-space:nowrap;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq + .mq{margin-top:4px}
.mq-track{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq-b .mq-track{animation-direction:reverse;animation-duration:80s}
.mq-set{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);padding-right:clamp(18px,2.6vw,40px)}
.mq span{font-weight:800;font-size:clamp(46px,8vw,128px);letter-spacing:-.04em;line-height:1.2;font-family:'Bricolage Grotesque','Familjen Grotesk','Noto Sans SC','Noto Sans KR','Noto Sans JP','Noto Sans Arabic','Noto Sans Devanagari',system-ui,sans-serif}
.mq-a span{background:linear-gradient(180deg,#FFFFFF 0%,#D5D9DF 40%,#7E848D 62%,#E6E8EC 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-b span{color:transparent;-webkit-text-stroke:1.2px rgba(236,238,241,.38)}
.mq i{font-style:normal;color:var(--gold-hi);font-size:clamp(16px,2vw,28px)}
@keyframes mq{to{transform:translateX(-50%)}}
.lang-body{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;align-items:end;margin-top:clamp(48px,6vw,80px)}
.lang-side .sub{margin-top:0}
.lang-tiers{list-style:none;margin:26px 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lang-tiers li{display:grid;gap:8px;align-content:start;padding:16px;border-radius:22px;background:var(--shell);border:1px solid var(--shell-line)}
.lang-tiers b{font-family:var(--f-display);font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--tc)}
.lang-tiers span{font-size:13px;line-height:1.35;color:#C9CDD4}

/* ---------- EXTRAS (bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:56px}
.bx-big{grid-column:span 7;grid-row:span 2}
.bx{grid-column:span 5}
.bx-big{grid-column:span 7}
.bx-note{grid-column:1/-1}
.bx-shell{height:100%;padding:7px;border-radius:36px;background:var(--shell);border:1px solid var(--shell-line)}
.bx-core{height:100%;display:flex;flex-direction:column;gap:26px;border-radius:29px;background:var(--core);box-shadow:var(--core-hi);padding:clamp(22px,2.6vw,36px)}
.bx-txt h3{margin:0;font-size:clamp(21px,2vw,28px);letter-spacing:-.025em;line-height:1.15}
.bx-price{margin:10px 0 0;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,3vw,46px);letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums}
.bx-price small{font-size:.4em;font-weight:500;letter-spacing:0;color:var(--mute)}
.bx-txt > p:last-child{margin:12px 0 0;color:var(--mute);font-size:15px;line-height:1.6;max-width:48ch}
.ba{position:relative;flex:1;min-height:0;aspect-ratio:16/10.4;border-radius:22px;overflow:hidden;container-type:inline-size;direction:ltr;
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* ----- BEFORE: a dated white site ----- */
.ba-old{position:absolute;inset:0;background:#fff;color:#3a3a3a;font-family:Arial,Helvetica,sans-serif;
  display:grid;grid-template-rows:auto auto auto 1fr auto;font-size:1.9cqw;line-height:1.45}
.o-bar{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1.8cqw 3cqw;border-bottom:1px solid #e3e3e3;background:#fff}
.o-brand{display:flex;align-items:center;gap:1.1cqw;font-size:2.5cqw;font-weight:700;color:#7a1f1f;letter-spacing:-.01em}
.o-logo{width:3cqw;height:3cqw;border-radius:50%;background:#7a1f1f;display:block;flex:none}
.o-nav{display:flex;gap:2.2cqw;font-size:1.5cqw;letter-spacing:.06em;color:#666}
.o-nav i{font-style:normal}
.o-tel{font-size:1.6cqw;color:#7a1f1f;font-weight:700}
.o-hero{position:relative;height:30cqw;overflow:hidden;display:grid;place-items:center;text-align:center}
.o-shot{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(40,44,52,.42),rgba(40,44,52,.52)),
  radial-gradient(60% 80% at 25% 30%,#8f9aa6,transparent 70%),
  radial-gradient(70% 90% at 78% 70%,#6d7480,transparent 70%),
  linear-gradient(120deg,#9aa4ae,#7b838f 55%,#5f666f);
  filter:saturate(.6)}
.o-hcopy{position:relative;color:#fff;display:grid;justify-items:center;gap:1.1cqw;padding:0 6cqw;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.o-hcopy b{font-size:3.4cqw;letter-spacing:.06em;font-weight:700}
.o-hcopy span{font-size:1.8cqw;opacity:.92}
.o-btn{font-style:normal;margin-top:.6cqw;font-size:1.5cqw;padding:1cqw 2.4cqw;border-radius:2px;background:#7a1f1f;color:#fff;letter-spacing:.04em}
.o-arrow{position:absolute;top:50%;transform:translateY(-50%);width:3.4cqw;height:3.4cqw;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.35);color:#333;font-size:2.2cqw;line-height:1}
.o-arrow.l{left:1.6cqw}.o-arrow.r{right:1.6cqw}
.o-dots{position:absolute;left:50%;bottom:1.6cqw;transform:translateX(-50%);display:flex;gap:.9cqw}
.o-dots u{width:1cqw;height:1cqw;border-radius:50%;background:rgba(255,255,255,.55);display:block;animation:oDot 6s steps(1,end) infinite}
.o-dots u:nth-child(2){animation-delay:-4s}.o-dots u:nth-child(3){animation-delay:-2s}
@keyframes oDot{0%,33%{background:#fff}34%,100%{background:rgba(255,255,255,.45)}}
.o-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;padding:3cqw 3cqw 2cqw}
.o-col b{display:block;font-size:2cqw;color:#7a1f1f;padding-bottom:.9cqw;margin-bottom:1.2cqw;border-bottom:1px solid #e3e3e3}
.o-lines{display:grid;gap:.9cqw}
.o-lines i{display:block;height:1.05cqw;border-radius:2px;background:#e6e6e6}
.o-lines i.short{width:62%}
.o-hours{display:block;font-size:1.55cqw;color:#555}
.o-map{position:relative;height:9.5cqw;border:1px solid #e0e0e0;background:#eceff1;display:grid;place-items:center;gap:.8cqw}
.o-map u{text-decoration:none;font-size:1.3cqw;color:#9aa0a6}
.o-spin{width:2.4cqw;height:2.4cqw;border-radius:50%;border:.35cqw solid #d4d7da;border-top-color:#9aa0a6;animation:spin 1.1s linear infinite;display:block}
.o-foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1.6cqw 3cqw 3.6cqw;
  border-top:1px solid #e3e3e3;background:#fafafa;font-size:1.3cqw;color:#8a8a8a}
.o-made{padding:.6cqw 1.2cqw;border:1px solid #dcdcdc;border-radius:3px;background:#fff;color:#7a7a7a}
.o-cookie{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  padding:1.3cqw 3cqw;background:#2f3336;color:#e7e7e7;font-size:1.35cqw}
.o-cookie i{font-style:normal;padding:.7cqw 1.6cqw;border-radius:2px;background:#6c7276;color:#fff;font-size:1.25cqw}

.ba-new{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut));background:
  radial-gradient(70% 90% at 85% 10%,rgba(232,118,58,.22),transparent 60%),
  radial-gradient(60% 70% at 0% 100%,rgba(84,112,255,.12),transparent 60%),#0E0C0B;
  color:#F3E9DC;font-family:var(--f-sans);display:grid;grid-template-rows:auto 1fr auto;padding:0 3.4cqw 3cqw}
.n-nav{display:flex;align-items:center;justify-content:space-between;gap:2cqw;height:8.4cqw;border-bottom:1px solid rgba(243,233,220,.1)}
.n-logo{display:flex;align-items:center;gap:1cqw;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:2.5cqw;letter-spacing:.14em}
.n-logo small{font-size:.6em;margin-left:.5cqw;color:#E8763A;letter-spacing:.1em}
.n-logo i{width:2.6cqw;height:3.2cqw;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#FFD08A,#E8763A 55%,#9E2F12);box-shadow:0 0 2cqw rgba(232,118,58,.6)}
.n-links{display:flex;gap:2.6cqw;font-size:1.7cqw;color:rgba(243,233,220,.72)}
.n-links i{font-style:normal}
.n-btn{font-size:1.6cqw;font-weight:700;padding:1.1cqw 2.2cqw;border-radius:99px;background:#F3E9DC;color:#0E0C0B}
.n-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:3cqw;align-items:center;padding-top:2.4cqw}
.n-eyebrow{display:inline-flex;align-items:center;gap:1cqw;font:600 1.35cqw/1 var(--f-mono);letter-spacing:.2em;color:#E8763A;padding:.9cqw 1.4cqw;border-radius:99px;background:rgba(232,118,58,.1);border:1px solid rgba(232,118,58,.35)}
.n-eyebrow i{width:.9cqw;height:.9cqw;border-radius:50%;background:#E8763A;box-shadow:0 0 1cqw #E8763A}
.n-copy h5{margin:2cqw 0 0;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:5.6cqw;line-height:1.02;letter-spacing:.01em;color:#FFF6EA}
.n-copy h5 em{font-style:normal;background:linear-gradient(90deg,#FFD08A,#E8763A);-webkit-background-clip:text;background-clip:text;color:transparent}
.n-copy p{margin:1.6cqw 0 0;font-size:1.75cqw;line-height:1.5;color:rgba(243,233,220,.7);max-width:34cqw}
.n-ctas{display:flex;gap:1.2cqw;margin-top:2.4cqw}
.n-b1{font-size:1.65cqw;font-weight:700;padding:1.3cqw 2.4cqw;border-radius:99px;background:linear-gradient(135deg,#F59A5B,#E8763A);color:#1A0C05;box-shadow:0 1.4cqw 3cqw -1cqw rgba(232,118,58,.7)}
.n-b1 i{font-style:normal;margin-left:.6cqw}
.n-b2{font-size:1.65cqw;font-weight:600;padding:1.3cqw 2.4cqw;border-radius:99px;border:1px solid rgba(243,233,220,.3)}
.n-info{display:flex;gap:2cqw;margin-top:2.4cqw;font:500 1.3cqw/1 var(--f-mono);color:rgba(243,233,220,.6)}
.n-info .dot{display:inline-block;width:.9cqw;height:.9cqw;border-radius:50%;background:#3CCBAA;margin-right:.7cqw;box-shadow:0 0 1cqw #3CCBAA}
.n-visual{position:relative;height:100%;min-height:30cqw}
.n-board{position:absolute;inset:0;border-radius:2.4cqw;overflow:hidden;background:
  radial-gradient(90% 80% at 30% 20%,#2B2521,#141110 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2cqw 5cqw -2cqw rgba(0,0,0,.8)}
.n-board::before{content:"";position:absolute;inset:0;opacity:.5;background:
  repeating-linear-gradient(95deg,rgba(255,255,255,.025) 0 .3cqw,transparent .3cqw 1.4cqw),
  repeating-linear-gradient(5deg,rgba(0,0,0,.25) 0 .2cqw,transparent .2cqw 2cqw)}
.n-glow{position:absolute;right:-20%;top:-30%;width:90%;height:90%;background:radial-gradient(closest-side,rgba(255,150,70,.35),transparent)}
.n-plate{position:absolute;left:50%;top:52%;width:27cqw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#F6F2EA 0 56%,#E9E3D7 57%,#FBF9F4 62%,#D9D2C3 69%,#C9C0AE 70.5%,transparent 71%);
  box-shadow:0 2.2cqw 4cqw -1cqw rgba(0,0,0,.75),inset 0 0 0 .2cqw rgba(255,255,255,.4)}
.n-plate i{position:absolute;display:block}
.n-plate .sauce{left:17%;top:17%;width:66%;height:66%;border-radius:50%;border:1.1cqw solid transparent;border-top-color:#6B2413;border-left-color:#7C2C17;transform:rotate(-28deg);filter:blur(.08cqw)}
.n-plate .steak{width:14cqw;height:3.6cqw;left:26%;border-radius:1.6cqw;
  background:
    repeating-linear-gradient(118deg,rgba(26,10,4,.55) 0 .45cqw,transparent .45cqw 2.1cqw),
    linear-gradient(90deg,#2E150B 0 6%,#7A3222 11%,#C7645A 24%,#E48C80 44%,#DB7C70 60%,#9C4331 84%,#2E150B 94%);
  box-shadow:0 .5cqw .9cqw rgba(0,0,0,.45),inset 0 .2cqw .2cqw rgba(255,255,255,.18)}
.n-plate .s1{top:32%;transform:rotate(-14deg)}.n-plate .s2{top:42%;left:24%;transform:rotate(-8deg)}.n-plate .s3{top:52%;left:23%;transform:rotate(-2deg)}.n-plate .s4{top:62%;left:25%;transform:rotate(5deg)}
.n-plate .herb{width:2.6cqw;height:1.2cqw;border-radius:50%/60%;background:linear-gradient(90deg,#3E7A2E,#7DB35A);box-shadow:inset 0 0 0 .1cqw rgba(0,0,0,.15)}
.n-plate .herb::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:rgba(20,50,10,.5)}
.n-plate .h1{left:66%;top:30%;transform:rotate(30deg)}.n-plate .h2{left:70%;top:44%;transform:rotate(-20deg)}.n-plate .h3{left:62%;top:60%;transform:rotate(55deg)}.n-plate .h4{left:20%;top:24%;transform:rotate(-40deg)}
.n-plate .chili{left:64%;top:70%;width:4cqw;height:1.1cqw;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:linear-gradient(90deg,#B3261E,#E4452E);transform:rotate(-30deg)}
.n-plate .salt{left:28%;top:28%;width:50%;height:50%;background:
  radial-gradient(circle at 20% 30%,#fff 0 .25cqw,transparent .3cqw),radial-gradient(circle at 60% 20%,#fff 0 .2cqw,transparent .25cqw),
  radial-gradient(circle at 80% 70%,#fff 0 .25cqw,transparent .3cqw),radial-gradient(circle at 40% 80%,#fff 0 .2cqw,transparent .25cqw),
  radial-gradient(circle at 70% 45%,#fff 0 .18cqw,transparent .22cqw)}
.n-board .ember{position:absolute;width:.8cqw;height:.8cqw;border-radius:50%;background:#FFB35C;box-shadow:0 0 1.2cqw #FF8A2B;animation:emb 4s var(--ease-io) infinite}
.n-board .e1{left:14%;bottom:18%}.n-board .e2{left:82%;bottom:30%;animation-delay:-1.4s}.n-board .e3{left:70%;bottom:10%;animation-delay:-2.6s}
@keyframes emb{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-10cqw);opacity:0}}
.n-card{position:absolute;left:-6%;bottom:-3%;display:grid;grid-template-columns:auto auto;column-gap:2cqw;align-items:center;padding:1.4cqw 1.8cqw;border-radius:1.6cqw;
  background:rgba(22,18,16,.82);border:1px solid rgba(243,233,220,.14);box-shadow:0 1.6cqw 3cqw -1cqw rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.n-card b{font-size:1.6cqw}.n-card span{grid-row:2;font-size:1.25cqw;color:rgba(243,233,220,.6)}
.n-card em{grid-row:1/3;grid-column:2;font-style:normal;font-weight:800;font-size:2.6cqw;color:#FFD08A}
.n-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding-top:2.2cqw;width:76%}
.n-item{display:grid;grid-template-columns:auto 1fr auto;gap:1.1cqw;align-items:center;padding:1.1cqw;border-radius:1.4cqw;background:rgba(243,233,220,.05);border:1px solid rgba(243,233,220,.08)}
.n-item b{display:block;font-size:1.35cqw}.n-item span{display:block;font-size:1.05cqw;color:rgba(243,233,220,.55)}
.n-item em{font-style:normal;font-weight:700;font-size:1.5cqw;color:#FFD08A}
.n-item .th{width:3.8cqw;height:3.8cqw;border-radius:50%}
.n-item .t1{background:radial-gradient(circle,#C7645A 0 30%,#F3EEE4 32% 60%,#D9D2C3 62% 70%,transparent 71%)}
.n-item .t2{background:radial-gradient(circle,#E8763A 0 34%,#F3EEE4 36% 60%,#D9D2C3 62% 70%,transparent 71%)}
.n-item .t3{background:radial-gradient(circle,#D9A25B 0 30%,#F3EEE4 32% 60%,#D9D2C3 62% 70%,transparent 71%)}
.n-phone{position:absolute;right:3cqw;bottom:2.2cqw;width:13cqw;aspect-ratio:9/19;border-radius:2.2cqw;padding:.6cqw;background:#050505;box-shadow:0 0 0 .25cqw #3A3A3E,0 2cqw 4cqw -1cqw rgba(0,0,0,.8)}
.np-screen{height:100%;border-radius:1.7cqw;overflow:hidden;background:radial-gradient(90% 60% at 80% 0%,rgba(232,118,58,.3),transparent),#110E0C;padding:1.2cqw .9cqw;display:grid;align-content:start;gap:.9cqw}
.np-nav{display:flex;justify-content:space-between;align-items:center}
.np-nav i{width:1.4cqw;height:1.7cqw;border-radius:50%;background:radial-gradient(circle at 50% 70%,#FFD08A,#E8763A)}
.np-nav b{width:3cqw;height:.5cqw;border-radius:9px;background:rgba(243,233,220,.5)}
.np-plate{width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#C7645A 0 22%,#E48C80 23% 30%,#F6F2EA 31% 56%,#D9D2C3 60% 68%,transparent 69%)}
.np-h{height:1cqw;border-radius:9px;background:#FFF6EA;width:90%}
.np-h.s{width:60%;background:rgba(243,233,220,.4);height:.7cqw}
.np-btn{margin-top:.4cqw;font-size:.95cqw;font-weight:700;text-align:center;padding:.8cqw;border-radius:99px;background:#E8763A;color:#1A0C05}
.ba-tag{position:absolute;top:50%;transform:translateY(-50%);z-index:3;font:600 1.4cqw/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:1cqw 1.5cqw;border-radius:99px;pointer-events:none;transition:opacity .3s}
.ba-tag.old{left:2.4cqw;background:#222;color:#fff}
.ba-tag.new{right:2.4cqw;background:#F3E9DC;color:#0E0C0B}
.ba-line{position:absolute;inset:0;z-index:4;transform:translateX(var(--cut));pointer-events:none}
.ba-line::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.9),0 0 3px rgba(0,0,0,.4)}
.ba-knob{position:absolute;left:0;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:#fff;color:#0E0F11;cursor:ew-resize;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 6px rgba(255,255,255,.18);transition:transform .4s var(--ease-spring)}
.ba-knob:hover,.ba.dragging .ba-knob{transform:scale(1.08)}
.ba-knob .ic{width:20px;height:20px;stroke-width:2}
@media (max-width:760px){.ba{aspect-ratio:16/12}}
.url{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:999px;background:#0A0B0E;border:1px solid rgba(236,238,241,.12);font:500 clamp(15px,1.4vw,18px)/1 var(--f-mono);color:#C9CDD4;direction:ltr;overflow:hidden}
.url .ic{color:var(--t-teal)}
.url b{color:var(--t-teal);font-weight:500}
.url span::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:3px;vertical-align:-3px;background:#C9CDD4;animation:blink 1.1s steps(2,jump-none) infinite}
.pages{position:relative;height:118px}
.pages i{position:absolute;top:6px;width:78px;height:100px;border-radius:10px;background:linear-gradient(#20232B 0 26%,#16181E 26%);border:1px solid rgba(236,238,241,.14)}
.pages i:nth-child(1){left:0;transform:rotate(-6deg)}
.pages i:nth-child(2){left:46px;transform:rotate(-1deg)}
.pages i:nth-child(3){left:92px;transform:rotate(5deg);border-color:var(--t-blue)}
.pages b{position:absolute;left:150px;top:30px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--chrome);color:var(--ink);font-weight:800}
.bx-note{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;padding:24px 30px;border-radius:30px;background:linear-gradient(90deg,rgba(84,112,255,.16),rgba(84,112,255,.04));border:1px solid rgba(84,112,255,.28)}
.bx-note b{font:600 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.bx-note p{margin:0;color:#D5D8DE;font-size:15px;line-height:1.55}

/* ---------- CONTACT ---------- */
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.acts{display:grid;gap:12px;margin-top:36px}
.act{
  display:flex;align-items:center;gap:16px;min-height:88px;padding:14px 14px 14px 14px;border-radius:30px;text-decoration:none;
  background:var(--chrome);color:var(--ink);
  transition:transform .6s var(--ease-spring),box-shadow .6s var(--ease-spring),background-color .3s;
}
.act:hover{box-shadow:0 24px 50px -24px rgba(236,238,241,.5)}
.act:active{transform:scale(.985)}
.act + .act{background:rgba(236,238,241,.05);color:var(--chrome);border:1px solid var(--line-2)}
.act:nth-child(3) .act-t bdi{font-size:clamp(14px,3.9vw,21px)}
.act + .act:hover{box-shadow:none;background:rgba(236,238,241,.09)}
.act .ico{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(127,127,127,.16)}
.act .ico .ic{width:24px;height:24px}
.act-t{display:grid;gap:3px;flex:1;min-width:0}
.act-t b{font-size:14px;font-weight:600;opacity:.7}
.act-t bdi{font-size:clamp(17px,2vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.act .bi{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(127,127,127,.14);transition:transform .6s var(--ease-spring)}
.act:hover .bi{transform:translate(2px,-2px) scale(1.06)}
.c-meta{margin:24px 0 0;color:var(--mute-2);font-size:14px}
.form-shell{padding:8px;border-radius:38px;background:var(--shell);border:1px solid var(--shell-line)}
form.cf{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(22px,3vw,40px);border-radius:30px;background:var(--core);box-shadow:var(--core-hi)}
.cf-title{grid-column:1/-1;margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.fld{display:grid;gap:8px}
.fld.full{grid-column:1/-1}
.fld label{font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--chrome);background:#0A0B0E;border:1px solid rgba(236,238,241,.14);border-radius:18px;padding:16px 16px;transition:border-color .3s var(--ease-spring),box-shadow .3s var(--ease-spring)}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9A9FA8 50%),linear-gradient(135deg,#9A9FA8 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:44px}
html[dir="rtl"] .fld select{background-position:22px 50%,17px 50%}
.fld textarea{min-height:120px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#5D626B}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(84,112,255,.22)}
.cf .btn-pill{grid-column:1/-1;margin-top:6px}
.req{color:#FF9C8A;font-family:var(--f-sans);font-weight:700}
.err{margin:0;font-size:13px;line-height:1.4;color:#FF9C8A;display:flex;gap:6px;align-items:flex-start}
.err::before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;background:#FF9C8A;color:#1A0E0B;font:800 11px/16px var(--f-sans);text-align:center}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#FF9C8A;box-shadow:0 0 0 4px rgba(255,156,138,.16)}
.cf-note{grid-column:1/-1;margin:-4px 0 0;font-size:13px;color:var(--mute);text-align:center}
.status:not(:empty){padding:14px 16px;border-radius:16px;background:rgba(236,238,241,.05);border:1px solid rgba(236,238,241,.1)}
.status.ok{background:rgba(60,203,170,.1);border-color:rgba(60,203,170,.35)}
.status.err{display:block}
.status.err::before{content:none}
.cf .btn-pill[disabled]{opacity:.6;cursor:progress}
.status{grid-column:1/-1;margin:0;min-height:1.4em;font-size:14px;color:var(--mute)}
.status.ok{color:#8FE3B5}.status.err{color:#FF9C8A}

/* ---------- FOOTER ---------- */
.foot{padding-block:clamp(72px,9vw,120px) 110px;border-top:1px solid var(--line)}
.foot-mark{width:100%;aspect-ratio:1851/225;background:linear-gradient(180deg,#FFFFFF 0%,#D5D9DF 38%,#7E848D 58%,#E6E8EC 74%,#969CA5 100%);-webkit-mask:var(--wordmark) center/contain no-repeat;mask:var(--wordmark) center/contain no-repeat}
.foot-grid{display:grid;grid-template-columns:1.2fr 1.1fr 1fr;gap:32px;margin-top:clamp(40px,5vw,64px);padding-top:32px;border-top:1px solid var(--line)}
.foot-tag{margin:0;font-weight:700;font-size:18px;letter-spacing:-.01em}
.foot-sub{margin:6px 0 0;color:var(--mute);font-size:14px}
.foot-links{display:grid;gap:14px;align-content:start}
.foot-links a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:16px;overflow-wrap:anywhere}
.foot-links a:hover{color:#fff}
.foot-nav{display:flex;flex-direction:column;gap:10px;color:var(--mute)}
.foot-nav a{text-decoration:none}.foot-nav a:hover{color:var(--chrome)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;color:var(--mute-2);font-size:13px}
.lang-btn.on-dark{--hair:rgba(236,238,241,.25);color:var(--chrome);height:46px;padding-inline:16px}
.lang-btn.on-dark .lang-name{display:inline;font-family:var(--f-sans);letter-spacing:0;font-size:14px}

/* ---------- CONTACT DOCK ---------- */
.dock{
  position:fixed;z-index:58;right:20px;bottom:20px;display:flex;gap:6px;padding:6px;border-radius:999px;
  background:rgba(14,15,18,.74);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(236,238,241,.14);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
  transition:transform .6s var(--ease-spring),opacity .4s var(--ease-spring);
}
.dock a{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;color:var(--chrome);background:rgba(236,238,241,.08);transition:background-color .25s var(--ease-spring),transform .4s var(--ease-spring)}
.dock a:active{transform:scale(.96)}
.dock a:hover{background:rgba(236,238,241,.16)}
.dock .d-call{background:var(--chrome);color:var(--ink)}
.dock .d-call:hover{background:#fff}
.dock .d-call .d-l{display:none}
.dock .d-text{background:rgba(60,203,170,.16)}
.dock .d-text:hover{background:rgba(60,203,170,.26)}
.dock .d-quote{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#2A1E08}
.dock .d-quote:hover{background:linear-gradient(160deg,#FFF0D0,#EFC275)}
.dock .ic{width:19px;height:19px}
html.menu-open .dock,html.lm-open .dock{transform:translateY(160%);opacity:0;pointer-events:none}

/* ---------- LANGUAGE PICKER ---------- */
[hidden]{display:none!important}
.lm{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.lm-back{position:absolute;inset:0;background:rgba(5,6,8,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lm-panel{position:relative;width:min(780px,100%);max-height:min(88vh,780px);overflow:auto;padding:clamp(20px,3vw,32px);border-radius:34px;background:#121419;border:1px solid rgba(236,238,241,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 100px -30px rgba(0,0,0,.85);animation:lmIn .6s var(--ease-spring)}
@keyframes lmIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.lm-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.lm-head h2{margin:0;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.lm-x{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:transparent;color:var(--chrome);cursor:pointer}
.lm-search{position:relative;margin-bottom:14px}
.lm-search .ic{position:absolute;left:16px;top:50%;margin-top:-10px;color:var(--mute)}
html[dir="rtl"] .lm-search .ic{left:auto;right:16px}
.lm-search input{width:100%;height:54px;padding:0 18px 0 48px;border-radius:999px;border:1px solid rgba(236,238,241,.16);background:#0A0B0E;color:var(--chrome);font:inherit;font-size:16px}
html[dir="rtl"] .lm-search input{padding:0 48px 0 18px}
.lm-search input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(84,112,255,.22)}
.lm-none{margin:16px 4px 0;color:var(--mute)}
.lm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lm-opt{display:grid;gap:4px;align-content:center;min-height:74px;padding:14px 18px;border-radius:22px;text-align:start;cursor:pointer;color:var(--chrome);background:rgba(236,238,241,.03);border:1px solid rgba(236,238,241,.1);font-family:var(--f-sans);transition:background-color .25s var(--ease-spring),border-color .25s var(--ease-spring),transform .4s var(--ease-spring)}
.lm-opt:hover{background:rgba(236,238,241,.08)}
.lm-opt:active{transform:scale(.98)}
.lm-opt b{font-size:18px;font-weight:700;font-family:'Bricolage Grotesque','Familjen Grotesk','Noto Sans SC','Noto Sans KR','Noto Sans Arabic','Noto Sans Devanagari',system-ui,sans-serif}
.lm-opt span{font-size:13px;color:var(--mute)}
.lm-opt[aria-current="true"]{border-color:var(--chrome);background:rgba(236,238,241,.1)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .pk-grid{grid-template-columns:1fr}
  .reels{grid-template-columns:repeat(2,1fr)}
  .bx-big,.bx{grid-column:1/-1}
  .bx-big{grid-row:auto}
  .c-grid{grid-template-columns:1fr}
  .lang-body{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sec{padding-block:50px}
  .faq{margin-top:36px;gap:8px}
  .fq-q{padding:18px 16px;gap:12px;font-size:16px}
  .fq-i{width:32px;height:32px}
  .fq-a{padding:0 16px 20px}
  .faq-foot{padding:20px 16px}
  .faq-acts{width:100%}
  .faq-acts .btn-pill,.faq-acts .btn-ghost{flex:1;justify-content:center;padding-inline:14px}
  .h2{font-size:clamp(36px,10.5vw,54px)}
  .jumps{grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
  .jump{padding:16px}
  .stack{gap:22px}
  .jumps.j3{grid-template-columns:1fr 1fr}
  .ak-foot{padding:20px 18px}
  .ak-acts{width:100%}
  .ak-acts .btn-pill,.ak-acts .btn-ghost{flex:1;justify-content:center;padding-inline:14px}
  .pk-shell{border-radius:32px;padding:6px}
  .pk-core{border-radius:27px}
  .pk-price{grid-template-columns:1fr}
  .pk-chips{grid-template-columns:1fr;gap:8px}
  /* Label ABOVE the value, not beside it.

     Side by side, the label column is sized to its own text, so the two
     longest labels - "Launch bonus" and "Social media" - squeezed the
     value into a column too narrow to hold it. Those two values wrapped
     onto a second line while every other chip's fitted on one, and the
     result was a ragged hole beside the label exactly where the eye
     expects the answer to be. It read as a layout fault, because it was.

     Stacked, every value gets the full width of the card. Nothing wraps,
     nothing is ragged, and the chips that used to be two lines tall are
     the same height they were. */
  .pk-chips li{grid-template-columns:1fr;align-items:start;gap:4px;padding:11px 13px}
  .pk-lists{grid-template-columns:1fr}
  .grp.g1 ul{grid-template-columns:1fr}
  .pk-ctas > *{flex:1 1 100%;justify-content:space-between}
  .pk-ctas .btn-ghost{justify-content:center}
  .pk-tagline{text-align:start}
  .reels{gap:14px}
  .rl-shell{border-radius:28px;padding:4px}
  .reel{border-radius:24px}
  .rl-top b{font-size:16px}
  .rl-price{font-size:18px}
  .rl figcaption p{font-size:13px}
  .xchips{grid-template-columns:1fr}
  .vid-foot .btn-pill{width:100%}
  .lang-tiers{grid-template-columns:1fr 1fr}
  .lang-side .btn-pill{width:100%}
  .ba{min-height:210px}
  form.cf{grid-template-columns:1fr}
  .act{min-height:80px;border-radius:26px}
  .act .ico{width:50px;height:50px}
  .act .bi{display:none}
  .foot{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .foot-grid{grid-template-columns:1fr}
  .dock{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .dock a{height:58px;padding:0 4px;font-size:12.5px;flex-direction:column;gap:3px;line-height:1.1;text-align:center}
  .dock .ic{width:20px;height:20px}
  .dock .d-call .d-l{display:inline}
  .dock .d-num{display:none}
  .lm{place-items:end center;padding:10px}
  .lm-panel{border-radius:30px;max-height:86svh}
  .lm-grid{grid-template-columns:1fr 1fr}
  .lm-opt{min-height:66px;padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .reel *,.reel *::before,.reel *::after,.ember{animation:none!important}
}

/* ==========================================================
   HERO — logo at the core, our work orbiting it
   ========================================================== */
.hero{position:relative;min-height:100svh;display:grid;justify-items:center;align-content:center;
  gap:clamp(8px,1.5vh,18px);text-align:center;overflow:hidden;isolation:isolate;
  padding:clamp(88px,10vh,118px) var(--gutter) clamp(104px,12vh,132px)}
.hero-bg{position:absolute;inset:0;z-index:-4;
  background:radial-gradient(110% 80% at 50% 38%,#212329 0%,#121318 46%,#08090C 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.55;
  background:radial-gradient(34% 26% at 50% 40%,rgba(224,177,92,.16),transparent 72%)}
.hero > .pill-eyebrow{position:relative;z-index:2}
.hero-in{position:relative;z-index:2;display:grid;justify-items:center;max-width:820px}
.hero-in::before{content:"";position:absolute;inset:-14% -34% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%,rgba(8,9,12,.92) 0%,rgba(8,9,12,.74) 46%,rgba(8,9,12,0) 100%)}
.hero > .pill-eyebrow{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-h{margin:0;font-family:var(--f-display);font-weight:800;font-optical-sizing:auto;letter-spacing:-.05em;line-height:.94;
  font-size:clamp(32px,4vw,58px);text-wrap:balance}
.hero-h span{display:block}
.hero-h .chrome-text{margin-top:.06em}
.hero-lede{margin:14px 0 0;max-width:52ch;color:var(--mute);font-size:clamp(14.5px,1vw,16.5px);line-height:1.5}
.hero-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.btn-pill.gold{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#2A1E08}
.btn-pill.gold .bi{background:rgba(42,30,8,.14)}
.btn-pill.gold:hover{background:linear-gradient(160deg,#FFF3D6,#EFC275)}
.hero-acts .btn-ghost{gap:12px;font-variant-numeric:tabular-nums}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:14px 0 0;padding:0}
.hero-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(236,238,241,.04);color:var(--mute);font-size:13px;font-weight:600}
.hero-chips li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
/* The same chips, now carrying the three steps. A dot says "another item
   in a list"; a number says "this one comes first", which is the entire
   point of putting the steps here. Counter rather than typed-in digits so
   the order cannot drift away from the markup. */
.hero-steps{counter-reset:hs}
.hero-steps li{counter-increment:hs}
.hero-steps li::before{
  content:counter(hs);
  width:auto;height:auto;border-radius:0;background:none;
  font:700 10px/1 var(--f-mono);letter-spacing:.06em;color:var(--gold);
}
.hero-mono,.hero-cue{display:none}

/* ---------- DESCENT: the entrance (JS section 6d) ----------
   The hero sits inside a tall pin. It sticks to the top of the viewport while
   the visitor scrolls through the pin, and the scroll position drives the
   scene: earth alone -> camera pulls back -> the wall flies in -> the headline
   lands. The pin's real height is set from JS (hero height + extra travel);
   the value here is only a first paint. With reduced motion, or without JS,
   there is no pin and everything is simply at rest. */
/* The pin is retired. It used to run 260svh of scroll-linked descent — the
   earth alone, a wall of tiles flying in, the headline arriving line by
   line. Good work, but the Iris reveal is now the page's one signature
   moment, and two of them in the first two screens fight each other: the
   visitor is still reading the reveal when the descent starts competing for
   the same attention. The hero now simply sits at rest, and the globe turns.
   The markup is unchanged so this is one value to put back if wanted. */
.hero-pin{position:relative;height:auto}

/* ------------------------------------------------------------
   THE IRIS — the page's one signature moment.

   A visitor lands on the site as it would have looked in 2009. On their
   first scroll, tap or key the old page is cut away by a circle opening
   out of the globe, and the real site is underneath it, already running.
   The brand mark is what clears the old web out of the way; that is the
   whole pitch, performed rather than described.

   The hole is a masked radial gradient whose radius is a single registered
   custom property, so one value drives both the mask and the ring that
   rides its edge. Registering it is what makes it interpolatable at all —
   an unregistered custom property would jump from 0 to the end value.

   Everything here is injected by script. If script never runs, the bitmap
   cannot be fetched, or the visitor asked for reduced motion, the site is
   simply the site. Nothing is ever hidden waiting to be revealed.
   ------------------------------------------------------------ */
/* The old page: a flat 115KB bitmap that moves only by transform and
   opacity. Both decisions were measured, not assumed.

   This began as a circle opening in the old page to reveal the new one.
   Against a rock-steady 60fps idle, every progressive-uncover version of
   that collapsed:

     radial-gradient mask over a live iframe ....  6fps
     clip-path hole over a live iframe ..........  6fps
     clip-path circle over the whole site .......  6fps
     clip-path hole over a flat bitmap ..........  4fps
     ...the same, with the 71-tile wall hidden ..  5fps
     clip-path hole over one solid-colour div ... 60fps
     opacity + transform on the bitmap .......... 30fps

   The clip was never the cost. Uncovering the hero progressively was: a
   region that has never been rasterised must be painted as it is exposed,
   and spreading that across an animation means repainting it every frame.
   The solid-div result is the proof - the same clip is free when there is
   nothing underneath worth painting.

   So the gesture is built from the two properties that never touch layout
   or paint. The old page recedes toward the globe and fades while a ring
   pulses out of the globe. It still reads as an iris opening from the
   mark, and it delivers thirty-odd real frames instead of four.

   One bitmap serves both orientations; only the anchor changes. A phone
   render was tried and thrown away: dated.html carries mobile styles, so
   it produced a clean single-column layout with large readable type - a
   competent mobile site, which is the opposite of the point. Fitting the
   whole desktop capture to phone width was authentic but the capture is
   only 1000px tall, so it left most of the screen empty and read as a
   bug. Anchoring the desktop capture top-left is what works: the logo,
   the beveled nav, the services sidebar and the gold estimate box all
   land at readable size, with the slate background strip down the left -
   the fixed-width centred shell being the clearest tell of the era. */
.gp-dated{
  position:fixed;inset:0;z-index:9000;background:#5b6472;
  background-image:url("assets/dated.webp");
  background-size:cover;background-position:top center;background-repeat:no-repeat;
  will-change:transform,opacity;
}
/* Phones get their own capture, not a crop of the desktop one.

   Cropping the 1600-wide desktop capture was wrong twice over. Centred, it
   landed mid-page and cut off the logo. Anchored top-left, it showed the
   slate margin beside the fixed-width shell, so on a real handset two
   thirds of the screen was empty background and the page ran off the right
   edge - which is what it was doing live.

   This capture is the page at its own 980px width, so the shell fills the
   frame edge to edge with no margins to waste. Fitted to width, the whole
   2011 homepage is visible at the top and the slate tile it actually sits
   on fills below it. That is genuinely what a fixed-width site looks like
   on a phone: zoomed out to fit, with body background under it. */
@media (max-width:900px){
  .gp-dated{
    background-image:url("assets/dated-phone.webp?v=2");
    background-size:100% auto;
    background-position:top center;
    background-color:#5b6472;
  }
}

/* The ring is a soft annulus rather than a hard 2px line, because it is
   scaled rather than resized - a drawn border would thicken as it grew,
   while a glow reading as a shockwave does not care. Scaling also keeps it
   off the layout path; the first version animated left/top/width/height
   and put four layout-triggering properties on every frame. */
.gp-ring{
  position:fixed;z-index:9001;pointer-events:none;
  left:var(--gp-x,50%);top:var(--gp-y,42%);
  width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(201,162,39,0) 58%, rgba(201,162,39,.50) 70%,
    rgba(255,240,200,.80) 76%, rgba(201,162,39,.32) 84%, rgba(201,162,39,0) 94%);
  opacity:0;transform:scale(.08);
  will-change:transform,opacity;
}

/* The prompt. A real button, so it is reachable by keyboard and announced;
   any input at all triggers the reveal, this just tells people that.

   It starts hidden and is not shown until the old page has actually
   decoded. On a slow connection the overlay is a plain slate rectangle
   for a moment, and inviting someone to dismiss that means they can skip
   the 2009 site without ever seeing it - which is the entire opening.

   One word and a shaft of light. The label used to read "Scroll to see the
   difference", which explains the joke before the joke has happened - and
   a sentence set in wide-tracked mono is a paragraph, not a cue.

   The glow is carried by the frame, never by the type. Lit letters go
   muddy at small sizes because the halo eats the counters; the pill and
   the hairline hold the light instead and the word stays crisp on top of
   it. The light itself breathes on opacity alone - a pulsing box-shadow
   would repaint a blurred rectangle sixty times a second. */
.gp-cue{
  opacity:0;pointer-events:none;
  position:fixed;z-index:9002;left:50%;bottom:clamp(26px,6vh,54px);
  transform:translateX(-50%);
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  transition:opacity .42s cubic-bezier(.32,.72,0,1);
}

/* The hairline draws itself down into the pill and then clears out through
   the bottom, so the cue points downward without an arrow being there. It is
   a scaleY on a one-pixel box: a single composited property, no repaint. */
.gp-cue .ln{
  position:relative;display:block;width:1px;height:46px;
  background:linear-gradient(180deg,
    rgba(224,177,92,0) 0%, rgba(224,177,92,.5) 54%, rgba(236,206,150,.95) 100%);
  transform-origin:top;transform:scaleY(0);
}

/* Glass, not neon.

   The light here is a specular highlight travelling across a surface - a
   narrow white band, hard in the middle and soft at the edges - rather than
   a coloured halo bleeding out past the element's own edge. That outer
   bloom is what makes a button read as a light fixture instead of an
   object, and it was the tacky part.

   Gold survives only in the rim, where a warm metal edge belongs. Every
   part that reads as "lit" is white at low alpha, because that is what a
   reflection actually is: the room, not the thing. */
.gp-cue .pill{
  position:relative;display:block;border-radius:999px;padding:1px;
  background:linear-gradient(180deg,
    rgba(240,214,164,.52) 0%, rgba(224,177,92,.17) 48%, rgba(255,255,255,.1) 100%);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.88), 0 1px 0 rgba(255,255,255,.05);
  transition:transform .34s cubic-bezier(.32,.72,0,1),
             box-shadow .34s cubic-bezier(.32,.72,0,1);
}
.gp-cue .pill > span{
  position:relative;display:block;overflow:hidden;
  border-radius:999px;padding:12px 28px;
  background:linear-gradient(180deg,rgba(26,31,39,.72),rgba(9,11,15,.84));
  -webkit-backdrop-filter:blur(14px) saturate(155%);backdrop-filter:blur(14px) saturate(155%);
  /* the two rims that make a pane of glass look like one: a bright top edge
     where the light lands and a faint bottom edge where it comes back */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.05);
  color:#F4E9D2;
  font:500 10px/1 var(--f-mono,ui-monospace,monospace);
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
}
/* the reflection itself, clipped to the glass so it never leaks outside it */
.gp-cue .pill > span::after{
  content:'';position:absolute;top:0;bottom:0;left:-58%;width:46%;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.09) 36%,
    rgba(255,255,255,.46) 50%, rgba(255,255,255,.09) 64%, rgba(255,255,255,0) 100%);
  transform:translateX(0) skewX(-14deg);
}

/* nothing animates until the cue is actually offered, so a hidden button is
   not burning battery while the bitmap is still downloading */
.gp-cue.is-ready{opacity:1;pointer-events:auto}
.gp-cue.is-ready .ln{
  animation:gpCueDrop 2.6s cubic-bezier(.45,0,.2,1) infinite;
}
.gp-cue.is-ready .pill > span::after{
  animation:gpCueSheen 4.6s cubic-bezier(.42,0,.12,1) infinite;
}
/* down from the top, hold, then out through the bottom */
@keyframes gpCueDrop{
  0%{transform:scaleY(0);transform-origin:top}
  42%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}
  92%,100%{transform:scaleY(0);transform-origin:bottom}
}
/* sits still off the left edge, then crosses. The long pause is what stops
   it reading as a loading shimmer. */
@keyframes gpCueSheen{
  0%,56%{transform:translateX(0) skewX(-14deg)}
  100%{transform:translateX(360%) skewX(-14deg)}
}

.gp-cue:hover .pill,.gp-cue:focus-visible .pill{
  transform:translateY(-2px);
  box-shadow:0 18px 38px -16px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.08);
}
.gp-cue:focus-visible{outline:none}
.gp-cue:focus-visible .pill > span{box-shadow:inset 0 0 0 1px rgba(224,177,92,.9)}
.gp-cue:active .pill{transform:scale(.965)}
/* Must out-rank .gp-cue.is-ready, which is the same specificity and comes
   earlier. Without the extra class here the cue kept its infinite bob
   running all the way through the reveal - measured as a frame time of
   33-50ms across the whole animation instead of a steady 16.7ms. */
.gp-going .gp-cue,
.gp-going .gp-cue.is-ready{opacity:0;pointer-events:none;animation:none}

/* The wall is NOT hidden while the intro is up, and that is the fix.

   It used to be. The reasoning was sound on paper: the wall is the most
   expensive thing on the page - 71 tiles, ~1,760 elements, 46 images -
   and none of it can be seen behind an opaque overlay, so why paint it.
   The columns were held at visibility:hidden and then flipped to
   visible-but-transparent a moment later, on the theory that opacity:0
   still rasterises while visibility:hidden does not.

   That theory does not hold. Chrome is free to skip painting a fully
   transparent subtree, and it does. So nothing was rasterised early, the
   entire wall was painted in the frame the overlay was removed, and the
   result on a phone was about a second of black between the transition
   finishing and the hero appearing - the exact thing all the machinery
   existed to prevent.

   Doing nothing is better. Left alone, the wall paints during page load,
   behind an overlay, several seconds before anyone taps. The work still
   happens; it just happens while a static picture of a 2009 website is
   on screen and there is no animation for it to interrupt. By the time
   the reveal runs the layers are on the compositor and the frame is
   free. */
/* Scroll is NOT held with overflow:hidden. Toggling overflow back at the
   end was measured at a 300ms frame on its own - by far the largest cost
   in the whole sequence, larger than the reveal and the teardown put
   together - because restoring it makes the browser lay out the entire
   scrollable document it had been allowed to ignore. The overlay is
   fixed, so it covers the viewport at any scroll offset anyway; the page
   underneath is simply asked not to move, by cancelling the events that
   would move it. No layout mode ever changes. */
@media (prefers-reduced-motion:reduce){
  /* the light stays, it just stops moving */
  .gp-cue.is-ready .ln{animation:none;transform:scaleY(1)}
  .gp-cue.is-ready .pill > span::after{
    animation:none;transform:translateX(160%) skewX(-14deg);opacity:.5}
}
.hero-stage,.hero-in,.hero-in > *,.hero-h span,.wall-note{backface-visibility:hidden}

/* --- holographic earth (canvas) --- */
.hero-stage{position:relative;z-index:1;width:min(34vh,360px);aspect-ratio:1;margin-block:0}
.globe{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.globe.dragging{cursor:grabbing}
.gl-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* --- maker's plate: seated in the cartouche cut at the foot of the
       instrument ring. Engraved brass on a precision instrument, not a
       badge floating over the earth. Geometry is tied to the canvas:
       the ring sits at R*1.160 with R = 0.748 of the half-width, so the
       arc crosses the bottom of the stage at 50% + 43.4% = 93.4%. --- */
.gl-mark{position:absolute;left:50%;top:93.4%;width:24%;height:11%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:4;
  --cart:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
  clip-path:var(--cart);
  background:linear-gradient(180deg,#F8E6BC 0%,#E0B15C 44%,#B58C43 72%,#8C6B2E 100%);
  filter:drop-shadow(0 0 12px rgba(224,177,92,.34)) drop-shadow(0 3px 7px rgba(0,0,0,.66))}
.gl-mark::before{content:"";position:absolute;inset:1.3px;clip-path:var(--cart);
  background:linear-gradient(180deg,#1B2028 0%,#0E1116 56%,#05070A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.gl-mark::after{content:"";position:absolute;inset:14% 18%;
  background:linear-gradient(152deg,#FFFFFF 0%,#E6EBF1 18%,#98A2AE 40%,#FFFFFF 56%,#AEB7C2 74%,#F4F7FA 100%);
  -webkit-mask:var(--mono) center/contain no-repeat;mask:var(--mono) center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.gl-halo{position:absolute;inset:-24%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(224,177,92,.13),rgba(90,120,190,.06) 48%,transparent 74%)}

@media (max-width:900px){
  /* The eyebrow is a label, and a label that wraps stops being one - the
     second line loses the dot, loses the alignment, and the last word
     ends up sitting on its own under the pill looking like it fell off.

     Shortening the English copy fixes English. It does not fix the other
     51 languages, several of which are half again as long, so the pill
     is also told to hold one line and scale its own tracking down until
     that line fits. Tracking is the right thing to give up here: at this
     size it is decoration, and the alternative is a wrap. */
  .hero > .pill-eyebrow{
    max-width:calc(100% - 4px);
    padding:7px 13px;
    font-size:10px;letter-spacing:.11em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hero > .pill-eyebrow::before{flex:0 0 auto;width:6px;height:6px}
  /* The bottom padding exists to keep the last chips clear of the fixed
     contact dock, which is about 80px tall. 116px was 36px more than the
     job needs, and on a phone that reads as the hero trailing off into
     nothing before the packages arrive. */
  .hero{min-height:100svh;padding:clamp(76px,9vh,96px) var(--gutter) 94px;gap:8px}
  .hero-stage{width:min(58vw,248px)}
  .hero-h{font-size:clamp(30px,8.4vw,44px)}
  .hero-lede{margin-top:12px;font-size:14.5px;max-width:none}
  .hero-acts{margin-top:20px;width:100%;display:grid;grid-template-columns:1fr;gap:10px}
  .hero-acts .btn-pill,.hero-acts .btn-ghost{width:100%;justify-content:center;min-height:54px}
  .hero-acts .btn-pill{justify-content:space-between}
  .hero-chips{margin-top:14px;gap:6px}
  .hero-chips li{font-size:12px;padding:7px 11px}
}
@media (max-width:900px) and (max-height:720px){
  .hero-lede{display:none}
  .hero-stage{width:min(50vw,208px)}
}

/* ==========================================================
   ABOUT US
   ========================================================== */
.ab-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,72px);align-items:start}
.ab-left .h2{max-width:12ch;font-size:clamp(34px,4.2vw,64px)}
.ab-right p{margin:0 0 18px;color:var(--mute);font-size:clamp(15px,1.2vw,17.5px);line-height:1.72;max-width:60ch}
.ab-right p:first-child{color:#D5D9DF}
.ab-stats{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.ab-st{flex:1 1 150px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(236,238,241,.03)}
.ab-st b{display:block;font-family:var(--f-display);font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(180deg,#FFF,#C6CCD4);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-st span{display:block;margin-top:6px;color:var(--mute-2);font-size:12.5px;line-height:1.4}
.ab-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:900px){
  .ab-grid{grid-template-columns:1fr}
  .ab-acts{width:100%}
  .ab-acts .btn-pill,.ab-acts .btn-ghost{flex:1;justify-content:center}
}

/* fallback links inside the form status line */
.status.err a{color:var(--gold-hi);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-inline-start:8px}
.est-none .eo-box{border-style:dashed}
.est-none input:checked + .eo-box{border-style:solid}

/* --- more life on the "after" side --- */
.n-b1{position:relative;overflow:hidden}
.n-b1 .sheen{position:absolute;top:0;bottom:0;left:-40%;width:35%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:nSheen 3.6s var(--ease-io) infinite}
@keyframes nSheen{0%{left:-45%}55%,100%{left:115%}}
.n-stars{color:#FFD08A;letter-spacing:.08em}
.n-stars u{text-decoration:none;color:rgba(243,233,220,.75);margin-left:.5cqw}
.n-revs{margin-top:2cqw;width:76%;overflow:hidden;border-top:1px solid rgba(243,233,220,.10);border-bottom:1px solid rgba(243,233,220,.10);
  padding:1.1cqw 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent)}
.nr-track{display:flex;gap:3.4cqw;width:max-content;animation:nRev 22s linear infinite}
.nr-track span{font-size:1.25cqw;color:rgba(243,233,220,.62);white-space:nowrap}
@keyframes nRev{to{transform:translateX(-50%)}}
.np-toast{position:absolute;left:6%;right:6%;top:8%;display:flex;align-items:center;gap:.8cqw;
  padding:.9cqw 1.1cqw;border-radius:1cqw;background:rgba(20,16,13,.92);border:1px solid rgba(255,208,138,.35);
  color:#FFE9C4;font-size:1cqw;box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.8);animation:npToast 7s var(--ease-io) infinite}
.np-toast i{width:.9cqw;height:.9cqw;border-radius:50%;background:#3CCBAA;box-shadow:0 0 .9cqw #3CCBAA;flex:none}
@keyframes npToast{0%,8%{opacity:0;transform:translateY(-140%)}16%,52%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(-140%)}}
/* the two sides drift a touch as the handle moves */
.ba .n-hero,.ba .n-row,.ba .n-revs{transform:translateX(calc((var(--cut) - 50%) * -.07))}
.ba .ba-old .o-hero,.ba .ba-old .o-cols{transform:translateX(calc((var(--cut) - 50%) * .05))}
.ba.dragging .n-hero,.ba.dragging .n-row,.ba.dragging .n-revs,.ba.dragging .o-hero,.ba.dragging .o-cols{transition:none}

/* fake browser bar on both mockups */
.w-chrome{display:flex;align-items:center;gap:1.4cqw;height:4.6cqw;padding:0 2cqw}
.w-chrome.old{background:#e9ebee;border-bottom:1px solid #d7dade}
.w-chrome.new{background:rgba(243,233,220,.07);border-bottom:1px solid rgba(243,233,220,.10)}
.w-dots{display:flex;gap:.7cqw;flex:none}
.w-dots u{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#c6cad0;display:block}
.w-chrome.new .w-dots u{background:rgba(243,233,220,.3)}
.w-url{flex:1;max-width:60%;padding:.5cqw 1.4cqw;border-radius:99px;font-size:1.15cqw;letter-spacing:.01em;
  background:#fff;border:1px solid #d7dade;color:#8a8f96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-chrome.new .w-url{background:rgba(14,12,11,.5);border-color:rgba(243,233,220,.14);color:rgba(243,233,220,.75)}
.w-chrome.new .w-url b{color:#3CCBAA;font-weight:400;margin-right:.5cqw}

/* promo cards are buttons now */
.rl-hit{display:block;text-decoration:none;color:inherit;border-radius:36px;outline-offset:6px}
.rl-pick{position:absolute;inset:auto 0 0 0;z-index:7;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 14px 18px;color:#0B0C0F;font-weight:800;font-size:14px;letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(224,177,92,0),rgba(224,177,92,.92) 45%,rgba(214,158,68,.98));
  transform:translateY(101%);transition:transform .4s var(--ease-spring)}
.rl-pick em{font-style:normal}
.rl-plus{width:20px;height:20px;border-radius:50%;background:#0B0C0F;position:relative;flex:none}
.rl-plus::before,.rl-plus::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--gold-hi)}
.rl-plus::before{width:10px;height:2px}.rl-plus::after{width:2px;height:10px}
.rl-hit:hover .rl-pick,.rl-hit:focus-visible .rl-pick{transform:none}
.rl-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;font-size:14px;color:var(--gold-hi);
  transition:gap .3s var(--ease-spring)}
.rl-cta i{font-style:normal;transition:transform .3s var(--ease-spring)}
.rl-hit:hover .rl-cta i{transform:translateX(4px)}
.lg-hint{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:none;color:var(--mute-2);margin-left:6px}
.est-opt.just-added .eo-box{animation:justAdded 1.4s var(--ease-spring)}
@keyframes justAdded{0%{box-shadow:0 0 0 0 rgba(224,177,92,.75)}70%{box-shadow:0 0 0 12px rgba(224,177,92,0)}100%{box-shadow:0 0 0 0 rgba(224,177,92,0)}}
@media (max-width:760px){.rl-pick{transform:none;padding:12px 10px 13px;font-size:13px}}

/* --- "after" mockup: real footage, real photography --- */
.n-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#140F0B}
.n-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(14,10,8,.35) 0%,rgba(14,10,8,0) 30%,rgba(14,10,8,.55) 100%),
  radial-gradient(70% 60% at 30% 40%,rgba(255,150,70,.18),transparent 70%)}
.n-board .n-glow,.n-board .ember{z-index:2}
.n-live{position:absolute;z-index:3;left:1.6cqw;top:1.6cqw;display:inline-flex;align-items:center;gap:.7cqw;
  padding:.7cqw 1.2cqw;border-radius:99px;background:rgba(14,10,8,.6);border:1px solid rgba(243,233,220,.2);
  font:600 1.05cqw/1 var(--f-mono);letter-spacing:.14em;color:#F3E9DC;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.n-live i{width:.8cqw;height:.8cqw;border-radius:50%;background:#FF5A47;box-shadow:0 0 .9cqw #FF5A47;animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.n-badge{position:absolute;right:-2%;top:6%;display:flex;align-items:center;gap:1cqw;padding:1cqw 1.4cqw;border-radius:1.3cqw;
  background:rgba(18,14,11,.9);border:1px solid rgba(255,208,138,.32);box-shadow:0 1.6cqw 3cqw -1.4cqw rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.n-badge b{font-size:2.2cqw;font-weight:800;color:#FFD08A;line-height:1}
.n-badge span{font-size:.95cqw;line-height:1.35;color:rgba(243,233,220,.75);letter-spacing:.02em}
.n-item .t1{background:url(videos/dish1.jpg?v=2) center/cover}
.n-item .t2{background:url(videos/dish2.jpg?v=2) center/cover}
.n-item .t3{background:url(videos/dish3.jpg?v=2) center/cover}
.n-item{background:rgba(243,233,220,.06);border-color:rgba(243,233,220,.12);
  box-shadow:0 1.2cqw 2.4cqw -1.6cqw rgba(0,0,0,.8)}
.np-plate{background:url(videos/dish1.jpg?v=2) center/cover!important}
.np-row{display:flex;align-items:center;gap:.7cqw;margin-top:.7cqw}
.np-row i{width:1.6cqw;height:1.6cqw;border-radius:.4cqw;background:url(videos/dish2.jpg?v=2) center/cover;flex:none}
.np-row i.b{background-image:url(videos/dish3.jpg?v=2)}
.np-row b{flex:1;height:.55cqw;border-radius:99px;background:rgba(243,233,220,.22)}

/* tighter section headings so the right half isn't dead space */
.sec-vid .h2,.sec-est .h2,.sec-faq .h2,.sec-steps .h2{max-width:15ch}
.sec-vid .sec-head.split,.sec-est .sec-head.split{align-items:flex-end}

@media (min-width:901px) and (max-height:820px){
  .hero{gap:6px;padding-block:clamp(80px,10vh,100px) clamp(92px,11vh,110px)}
  .hero-stage{width:min(29vh,268px)}
  .hero-h{font-size:clamp(30px,3.4vw,46px)}
  .hero-lede{margin-top:12px;font-size:15px}
  .hero-acts{margin-top:16px}
  .hero-chips{margin-top:12px}
}
@media (max-width:900px) and (max-height:900px){
  .hero{padding-bottom:94px;gap:6px}
  .hero-stage{width:min(48vw,196px)}
  .hero-h{font-size:clamp(28px,7.6vw,40px)}
  .hero-lede{margin-top:10px;font-size:14px;line-height:1.45}
  .hero-acts{margin-top:16px}
  .hero-acts .btn-pill,.hero-acts .btn-ghost{min-height:50px}
  .hero-chips{margin-top:10px}
  .hero-chips li{padding:6px 10px;font-size:11.5px}
}
@media (max-width:900px) and (max-height:740px){
  .hero-stage{width:min(42vw,168px)}
  .hero-lede{display:none}
}

/* scroll motion */
.nav{transition:color .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),
  backdrop-filter .35s,transform .45s var(--ease-spring)}
.nav.tucked{transform:translateY(-102%)}
html.js:not(.rm) .rl-shell,html.js:not(.rm) .bx-core,html.js:not(.rm) .est-out{
  transform:translate3d(0,var(--par,0),0)}
html.js:not(.rm) .rl:hover .rl-shell{transform:translate3d(0,calc(var(--par,0px) - 4px),0)}
@media (prefers-reduced-motion:reduce){.nav.tucked{transform:none}}

/* ==========================================================
   HOW IT WORKS  ·  conversion furniture
   ========================================================== */
.sec-steps{padding-block:clamp(72px,10vh,132px)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  margin:clamp(30px,4vh,52px) 0 0;padding:0;counter-reset:st}
.step{position:relative;padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,32px) clamp(28px,3vw,40px);
  border-radius:26px;border:1px solid var(--line);overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,rgba(236,238,241,.055),rgba(236,238,241,.018) 58%,rgba(236,238,241,.005));
  transition:transform .55s var(--ease-spring),border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
.step::before{content:"";position:absolute;inset:-1px -1px auto;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(224,177,92,.85),transparent);
  transform:scaleX(.18);transform-origin:left;transition:transform .8s var(--ease-out)}
.step::after{content:"";position:absolute;right:-18%;top:-34%;width:62%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(224,177,92,.16),transparent 72%);opacity:0;transition:opacity .5s var(--ease-out)}
.step:hover{transform:translateY(-6px);border-color:var(--line-2)}
.step:hover::before{transform:scaleX(1)}
.step:hover::after{opacity:1}
.st-n{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border-radius:14px;
  font-family:var(--f-mono);font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--gold-hi);
  border:1px solid rgba(224,177,92,.34);background:rgba(224,177,92,.08)}
.st-h{margin:20px 0 0;font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(21px,2vw,29px);text-wrap:balance}
.st-d{margin:12px 0 0;color:var(--mute);font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;max-width:36ch}
.steps-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vh,40px)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:12px}
  .st-d{max-width:none}
  .steps-cta{display:grid;grid-template-columns:1fr}
  .steps-cta .btn-pill,.steps-cta .btn-ghost{width:100%;justify-content:center;min-height:54px}
  .steps-cta .btn-pill{justify-content:space-between}
}

/* most-popular flag */
.pk-pop{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:#2A1E08;background:linear-gradient(160deg,var(--gold-hi),var(--gold));
  box-shadow:0 6px 18px -8px rgba(224,177,92,.9)}
.pk-pop::before{content:"";width:6px;height:6px;border-radius:50%;background:#2A1E08;opacity:.55}
.jump.pop{border-color:rgba(224,177,92,.45);background:rgba(224,177,92,.07)}
.jump.pop .j-dot{box-shadow:0 0 0 4px rgba(224,177,92,.18)}
.eo-pop{position:absolute;top:-9px;inset-inline-end:14px;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:999px;color:#2A1E08;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold))}
.est-opt{position:relative}

/* assurance row */
.assure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0}
.assure li{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-size:13.5px;font-weight:600}
.assure .ic{width:15px;height:15px;color:var(--gold);flex:none}
.assure.sm{margin-top:12px;gap:6px 14px}
.assure.sm li{font-size:12.5px}

/* ---- section heads: use the whole width, never leave a dead column ---- */
@media (min-width:1024px){
  .sec-head.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:end;gap:20px 56px}
  .sec-head.split>div{min-width:0}
  .sec-head.split .h2{max-width:18ch}
  .sec-head.split .sub{max-width:42ch;margin-bottom:.4em}
}

/* ---- most-popular in the quote builder ---- */
.eo-pop{position:static;display:block;margin-top:7px;padding:0;background:none;border-radius:0;
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-hi)}
/* The recommended card used to be painted gold - a warm border and a warm
   fill. So did the SELECTED card. The two differed by about four percent
   of alpha, which meant two of the options arrived on screen already
   looking chosen, and the one the visitor had actually tapped was almost
   impossible to pick out from them. The form gave no reliable answer to
   "what have I got selected?", which on a page whose totals move with
   that answer is the worst place to be vague.

   So the recommendation is carried by MOTION now, and colour is handed
   back to selection, which is the only state the visitor controls.

   The light is a conic gradient rotated around a one-pixel rim: two
   linear-gradient masks composited to cut the middle out, leaving only
   the border. Masking rather than stacking an opaque inner panel means
   it works over whatever is behind the card without having to match a
   background colour by hand. */
.est-opt.pop .eo-box{border-color:var(--line);background:rgba(236,238,241,.03)}
@property --eo-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.est-opt.pop .eo-box::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;
  /* a dim ring all the way round so the card still reads as special when
     the bright head is on the far side, and a hot white point leading it */
  background:conic-gradient(from var(--eo-ang),
    rgba(224,177,92,.13) 0deg,
    rgba(224,177,92,.13) 248deg,
    rgba(224,177,92,.55) 304deg,
    #FFF3D6 338deg,
    rgba(224,177,92,.55) 352deg,
    rgba(224,177,92,.13) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:eoOrbit 6.8s linear infinite;
}
@keyframes eoOrbit{to{--eo-ang:360deg}}
/* Once it is chosen the recommendation has done its job, and a light
   still crawling around a selected card just competes with the rim that
   is telling you it is selected. */
.est-opt.pop input:checked + .eo-box::before{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){
  .est-opt.pop .eo-box::before{animation:none}
}

/* ---- AI Automation: the door on the main page ---- */
.sec-akb{padding-block:clamp(40px,5vw,72px)}

/* The strip above the band.

   Deliberately NOT gold. Everything around it - the packages, the
   prices, the buttons - is gold, so one more gold thing would read as
   more of the same and be scrolled past. The two automation colours,
   teal into violet, are the only place those hues appear on this page,
   which is exactly why the eye stops on them.

   Thin on purpose. A tall banner reads as an advert; a hairline strip
   with one sentence in it reads as a statement someone made. */
.akb-strip{
  position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  margin:0 0 clamp(14px,1.8vw,22px);
  padding:clamp(15px,1.7vw,20px) clamp(18px,2.2vw,26px);
  border-radius:16px;overflow:hidden;text-decoration:none;
  border:1px solid rgba(236,238,241,.1);
  background:linear-gradient(90deg,rgba(60,203,170,.07),rgba(182,156,255,.07) 58%,rgba(236,238,241,.02));
  transition:border-color .3s var(--ease-spring),transform .45s var(--ease-spring);
}
.akb-strip:hover{border-color:rgba(182,156,255,.34);transform:translateY(-2px)}
/* the hairline along the top edge, and the light that runs down it */
.akb-strip::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--t-teal) 22%,var(--t-violet) 62%,transparent);
  opacity:.5;
}
.akb-strip-glint{
  position:absolute;inset:0 auto 0 -30%;width:26%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(182,156,255,.16) 46%,rgba(255,255,255,.1) 54%,transparent);
  transform:skewX(-14deg);
  animation:akbGlint 7.2s cubic-bezier(.42,0,.12,1) infinite;
}
@keyframes akbGlint{0%,62%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(560%) skewX(-14deg)}}
.akb-strip-txt{
  position:relative;flex:1 1 auto;min-width:0;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(17px,2.1vw,27px);line-height:1.15;color:#EFF1F4;
}
/* the turn of the sentence, set in the italic serif and lit in violet -
   the same trick the headlines use, in the one colour they never use */
.akb-strip-txt em{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.1em;letter-spacing:-.005em;
  background:linear-gradient(120deg,var(--t-teal),var(--t-violet) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-inline-end:.05em;
}
.akb-strip .bi{
  position:relative;flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#EFF1F4;
  background:rgba(236,238,241,.06);border:1px solid rgba(236,238,241,.12);
  transition:transform .4s var(--ease-spring),background-color .3s var(--ease-spring);
}
.akb-strip:hover .bi{transform:translate(2px,-2px);background:rgba(182,156,255,.18)}
.akb-strip .ic{width:15px;height:15px}
@media (max-width:640px){
  .akb-strip{gap:12px;padding:14px 15px;border-radius:14px}
  .akb-strip .bi{width:30px;height:30px}
  /* Break between the two sentences, not inside the second one.
     Left to wrap naturally the line came out as "...isn't better. They"
     / "just answered.", stranding the subject at the end of the first
     line and splitting the half that carries the turn. One sentence per
     line costs about six pixels and reads the way it was written. */
  .akb-strip-txt em::before{content:"\A";white-space:pre}
}
@media (prefers-reduced-motion:reduce){.akb-strip-glint{animation:none}}
.akb{
  position:relative;display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;
  align-items:center;
  padding:clamp(22px,2.6vw,34px);
  border-radius:26px;border:1px solid var(--line);
  background:rgba(236,238,241,.03);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .3s var(--ease-spring),transform .45s var(--ease-spring);
}
.akb:hover{border-color:rgba(236,238,241,.22);transform:translateY(-2px)}
/* the same travelling light as the recommended plan, so the two read as
   one idea rather than two decorations */
.akb::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;
  background:conic-gradient(from var(--eo-ang),
    rgba(224,177,92,.12) 0deg,
    rgba(224,177,92,.12) 250deg,
    rgba(182,156,255,.5) 300deg,
    #FFF3D6 336deg,
    rgba(224,177,92,.5) 352deg,
    rgba(224,177,92,.12) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:eoOrbit 8.6s linear infinite;
}
.akb-glow{position:absolute;inset:-40% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(48% 60% at 22% 40%,rgba(182,156,255,.14),transparent 70%),
             radial-gradient(42% 56% at 80% 30%,rgba(224,177,92,.1),transparent 72%)}
.akb-txt{position:relative;display:grid;gap:10px;justify-items:start;min-width:0}
.akb-eyes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* The price on this product is four figures, and a visitor who meets that
   cold reads it as "too expensive for me". The tag is there to change what
   the number means before it is seen: not an expensive website, a
   different class of thing. Light type on a dark plate, the way a tier
   marker is set on anything that costs real money - it is not trying to
   be a sale badge. */
.akb-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  font:600 10.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:#F6EAD2;
  background:linear-gradient(180deg,rgba(224,177,92,.16),rgba(224,177,92,.05));
  border:1px solid rgba(224,177,92,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.akb-tag::before{
  content:"";width:5px;height:5px;flex:none;
  transform:rotate(45deg);
  background:linear-gradient(140deg,#FFF3D6,var(--gold));
  box-shadow:0 0 9px rgba(224,177,92,.75);
}
.akb-h{margin:0;font-size:clamp(24px,2.6vw,38px);max-width:16ch}
.akb-sub{color:var(--mute);font-size:clamp(13.5px,1vw,15.5px);line-height:1.5;max-width:44ch}
.akb-tiers{position:relative;display:grid;gap:8px;min-width:0}
.akb-t{display:flex;align-items:baseline;gap:10px;padding:9px 13px;border-radius:12px;
  border:1px solid var(--line);background:rgba(236,238,241,.025)}
.akb-t::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tc);flex:none;
  align-self:center;box-shadow:0 0 10px color-mix(in srgb,var(--tc) 60%,transparent)}
.akb-t b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akb-t i{font-style:normal;margin-inline-start:auto;font:600 13px/1 var(--f-mono);color:var(--gold-hi)}
.akb-go{position:relative;flex:none;white-space:nowrap}
@media (max-width:1023px){
  .akb{grid-template-columns:1fr;align-items:stretch}
  .akb-go{justify-content:space-between;width:100%}
}
@media (prefers-reduced-motion:reduce){ .akb::before{animation:none} }

/* ---- ambient depth so no section is flat ---- */
.sec-steps,.sec-est{position:relative;isolation:isolate}
.sec-steps::before,.sec-est::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 42% at 14% 6%,rgba(224,177,92,.07),transparent 68%),
             radial-gradient(48% 38% at 92% 78%,rgba(84,112,255,.07),transparent 70%)}

/* ---- hover physics ---- */
.rl-shell,.bx-core{overflow:hidden}
.rl:hover .rl-vid,.rl:focus-within .rl-vid{transform:scale(1.045)}
.rl-vid{transition:transform .8s var(--ease-out)}
.xchip{transition:transform .5s var(--ease-spring),border-color .4s var(--ease-out)}
.xchip:hover{transform:translateY(-4px);border-color:var(--line-2)}
.act{transition:transform .45s var(--ease-spring),border-color .4s var(--ease-out),background-color .4s var(--ease-out)}
.act:hover{transform:translateY(-3px)}
.fq{transition:border-color .35s var(--ease-out)}
.fq:hover{border-color:var(--line-2)}
@media (hover:none){
  .step:hover,.xchip:hover,.act:hover{transform:none}
}

/* ---- staggered reveal ---- */
html.js:not(.rm) .steps .rv:nth-child(1){transition-delay:0s}
html.js:not(.rm) .steps .rv:nth-child(2){transition-delay:.09s}
html.js:not(.rm) .steps .rv:nth-child(3){transition-delay:.18s}

/* ==========================================================
   HERO WALL — the work, moving, behind everything
   ========================================================== */
.hero-wall{position:absolute;inset:-14% -5%;z-index:-3;pointer-events:none;overflow:hidden}

/* --- near layer: the real wall, tipped like a control-room screen --------- */
/* No perspective and no 3D here on purpose. A column with will-change:transform
   inside a preserve-3d/perspective chain gets flattened into one layer, and
   moving that layer re-projects it non-linearly - which breaks the loop seam.
   Depth comes from scale, brightness and shadow on each tile instead, which is
   immune to how far the column has travelled. */
.hw-stage{position:absolute;inset:-4% -3%}
/* Seven independent columns. Each holds its list twice and travels exactly
   one copy, so the loop point is always a seam - no jump at any width.
   Spacing is margin, not gap: with `gap` the halfway mark lands half a gap
   short of the seam and you see the cut. */
.hw-cols{display:flex;align-items:flex-start;height:100%;
  gap:clamp(15px,1.5vw,24px)}
/* The travel is driven from JS with exact pixel keyframes - see head.js.
   A percentage, or calc(var()) inside @keyframes, does not land on the seam. */
.hw-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  will-change:transform}
.hw-col > *{margin-bottom:clamp(15px,1.5vw,24px)}
.hw-col > *{margin-bottom:clamp(15px,1.5vw,24px)}
/* --shift is measured in JS as the exact height of one copy. A percentage
   here does not land on the seam: flex rounding and the last item's margin
   push -50% a few pixels off, and a few pixels is a visible jump. */
@keyframes hwUp{from{transform:translate3d(0,0,0)}
                  to{transform:translate3d(0,calc(var(--shift,50%) * -1),0)}}
@keyframes hwDn{from{transform:translate3d(0,calc(var(--shift,50%) * -1),0)}
                  to{transform:translate3d(0,0,0)}}

/* --- per-tile casing ----------------------------------------------------- */
.hwt{position:relative;width:100%;aspect-ratio:3/4}
/* JS pins these to whole pixels so the loop seam is exact */
.hw-col .hwt{height:var(--tileH,auto)}
.hw-col > *{margin-bottom:var(--tileGap,clamp(15px,1.5vw,24px))}
/* Depth, faked on the inner panel so the tile's own box never moves.
   Recessed tiles sit smaller and darker inside their frame; forward ones
   overfill it and throw a longer shadow. */
.hwt > .wp,.hwt > .wad{transition:none}
.hwt.z0 > .wp,.hwt.z0 > .wad{transform:scale(.930);filter:brightness(.74) saturate(.84);
  box-shadow:0 6px 14px -10px rgba(0,0,0,.9)}
.hwt.z1 > .wp,.hwt.z1 > .wad{transform:scale(.966);filter:brightness(.87) saturate(.93);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.9)}
.hwt.z2 > .wp,.hwt.z2 > .wad{transform:scale(1)}
.hwt.z3 > .wp,.hwt.z3 > .wad{transform:scale(1.022);filter:brightness(1.04);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.95)}
.hwt.z4 > .wp,.hwt.z4 > .wad{transform:scale(1.046);filter:brightness(1.09);
  box-shadow:0 26px 50px -20px rgba(0,0,0,1)}
.hwt.z0 .hwt-c,.hwt.z1 .hwt-c{opacity:.55}
.hwt.z4{z-index:2}.hwt.z3{z-index:1}
.hw-col > *{width:100%}
.hwt > .wp,.hwt > .wad{position:absolute;inset:0;width:100%;height:100%;
  border-radius:11px;overflow:hidden;border:1px solid rgba(236,238,241,.13);
  background:#111319;box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}
.hwt-c{position:absolute;width:9px;height:9px;z-index:4;pointer-events:none;
  border:1px solid rgba(180,204,236,.5)}
.hwt-c.tl{top:-3px;left:-3px;border-right:0;border-bottom:0}
.hwt-c.tr{top:-3px;right:-3px;border-left:0;border-bottom:0}
.hwt-c.bl{bottom:-3px;left:-3px;border-right:0;border-top:0}
.hwt-c.br{bottom:-3px;right:-3px;border-left:0;border-top:0}
.hwt-tag{position:absolute;left:0;bottom:-15px;z-index:4;display:inline-flex;align-items:center;
  gap:5px;font-family:var(--f-mono);font-size:8px;letter-spacing:.16em;
  color:rgba(150,172,200,.55);white-space:nowrap}
.hwt-live{width:4px;height:4px;border-radius:50%;background:#6FDF9B;
  box-shadow:0 0 5px rgba(111,223,155,.9);animation:hwtBlink 3.4s ease-in-out infinite}
.hwt-on .hwt-c{border-color:rgba(224,177,92,.55)}
@keyframes hwtBlink{0%,72%{opacity:1}80%{opacity:.15}88%,100%{opacity:1}}

/* The tiles carry the same live furniture as the real sample panels - blinking
   cursors, toasts, status lamps. Inside the wall that furniture is a few pixels
   tall and nobody can read it, but each animation repaints the column it sits
   in, and a column is a very large moving layer. 250-odd of them was holding
   the whole hero at ~14fps and stuttering the globe. The wall keeps its own HUD
   animation; everything inside the moving columns is frozen. */
.hw-stage *{animation:none!important;transition:none!important}
.hw-stage .hwt-live{opacity:.92}
/* On a phone the four corner ticks per tile are ~400 extra boxes to raster on
   a layer that never stops moving, at a size where they are one pixel. Gone. */
@media (max-width:640px){
  .hw-stage .hwt-c{display:none}
  /* At phone size a tile is ~90px wide: the depth shadow and the brightness
     filter are invisible there and cost a repaint each. Scale alone still
     reads as depth. */
  .hw-stage .hwt > .wp,.hw-stage .hwt > .wad{box-shadow:none!important;filter:none!important}
  .hw-stage .hwt.z0 > .wp,.hw-stage .hwt.z0 > .wad{opacity:.74}
  .hw-stage .hwt.z1 > .wp,.hw-stage .hwt.z1 > .wad{opacity:.87}
}

/* --- HUD over the whole wall --------------------------------------------- */
.hw-hud{position:absolute;inset:0;pointer-events:none;z-index:3}
.hud-grid,.hud-scan,.hud-sweep{position:absolute;inset:0;display:block}
.hud-grid{background-image:
  linear-gradient(90deg,rgba(150,180,220,.05) 1px,transparent 1px),
  linear-gradient(0deg,rgba(150,180,220,.05) 1px,transparent 1px);
  background-size:clamp(66px,6.5vw,98px) clamp(66px,6.5vw,98px)}
.hud-scan{background-image:repeating-linear-gradient(0deg,
  rgba(6,8,12,.20) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.6}
.hud-sweep{background:linear-gradient(180deg,transparent 0%,
  rgba(150,196,255,.055) 44%,rgba(190,220,255,.085) 50%,
  rgba(150,196,255,.055) 56%,transparent 100%);
  height:38%;top:-38%;animation:hudSweep 13s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hudSweep{0%{top:-38%}70%,100%{top:100%}}
.hud-br{position:absolute;width:38px;height:38px;border:1.5px solid rgba(186,210,242,.42)}
.hud-br.tl{top:14.5%;left:5.5%;border-right:0;border-bottom:0}
.hud-br.tr{top:14.5%;right:5.5%;border-left:0;border-bottom:0}
.hud-br.bl{bottom:14.5%;left:5.5%;border-right:0;border-top:0}
.hud-br.br{bottom:14.5%;right:5.5%;border-left:0;border-top:0}
.hud-tel{position:absolute;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;
  color:rgba(176,200,232,.5);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.hud-tel.t1{top:15.2%;left:calc(5.5% + 50px)}
.hud-tel.t2{bottom:15.2%;left:calc(5.5% + 50px)}
.hud-tel.t3{top:15.2%;right:calc(5.5% + 50px)}
.wv{width:100%;height:100%;object-fit:cover;display:block}
.n-vid{background:url(videos/after-hero.jpg) center/cover no-repeat}
.hero-veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 36% at 50% 47%,rgba(8,9,12,.95) 0%,rgba(8,9,12,.66) 58%,rgba(8,9,12,0) 100%),
    radial-gradient(76% 64% at 50% 50%,rgba(8,9,12,0) 26%,rgba(8,9,12,.44) 72%,rgba(8,9,12,.82) 100%),
    linear-gradient(180deg,rgba(8,9,12,.97) 0%,rgba(8,9,12,.72) 9%,rgba(8,9,12,.14) 24%,rgba(8,9,12,.18) 62%,rgba(8,9,12,.94) 100%)}
.hero-wall{filter:saturate(.92) brightness(1.02)}
.wall-note{position:absolute;left:var(--gutter);bottom:14px;z-index:2;margin:0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(154,159,168,.5)}

/* ----------------------------------------------------------
   Sample site panels. Designed on a 100cqw grid so every panel
   renders identically and stays sharp at any tile size.
   Three archetypes: (a) dark restaurant, (b) light service
   business, (c) editorial studio.
   ---------------------------------------------------------- */
.wp{position:relative;container-type:inline-size;overflow:hidden;
  background:#0C0E12;color:#E9ECF1;line-height:1.25;
  /* the hero centres its own text and these mockups must not inherit that,
     and they stay left-to-right even when the site is in Arabic or Hebrew */
  text-align:left;direction:ltr;
  font-family:var(--f-sans);font-feature-settings:"ss01","cv01"}
.wp *{box-sizing:border-box}
.wp b,.wp em,.wp i,.wp u{font-style:normal;text-decoration:none;font-weight:inherit}

/* --- browser chrome --------------------------------------- */
.wp-chrome{display:flex;align-items:center;gap:1.1cqw;height:6.6cqw;flex:none;
  padding:0 2.4cqw;background:#15181E;border-bottom:.25cqw solid rgba(255,255,255,.07)}
.wc-d{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#333944;flex:none}
.wc-d:first-of-type{background:#3F4650}
.wp-url{display:flex;align-items:center;gap:.9cqw;margin-left:1.6cqw;flex:1;min-width:0;
  height:4.2cqw;padding:0 2.4cqw;border-radius:2.1cqw;background:#0B0D11;
  color:#7C8695;font-family:var(--f-mono);font-size:2cqw;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden}
.wp-lock{width:2cqw;height:2cqw;flex:none;fill:none;stroke:#6E8F72;stroke-width:2.2}
.wc-menu{display:flex;flex-direction:column;gap:.45cqw;margin-left:1.4cqw;flex:none}
.wc-menu i{width:2.6cqw;height:.35cqw;background:#3B424D;border-radius:.2cqw}
.wp-site{display:flex;flex-direction:column;flex:1;min-height:0}
.wp{display:flex;flex-direction:column}

/* ==========================================================
   ARCHETYPE A — dark restaurant
   ========================================================== */
.wa{background:#0C0E12}
.wa-nav{display:flex;align-items:center;gap:2.6cqw;height:9.4cqw;flex:none;padding:0 3.6cqw;
  border-bottom:.25cqw solid rgba(233,236,241,.09)}
.wa-mark{display:flex;align-items:baseline;gap:.9cqw;font-family:var(--f-serif);
  font-size:3.6cqw;font-weight:600;letter-spacing:.15em;white-space:nowrap}
.wa-mark i{font-size:1.9cqw;letter-spacing:.14em;color:var(--gold);opacity:.95}
.wa-links{display:flex;gap:2.8cqw;margin-left:auto;font-size:2.3cqw;color:#9BA4B1;white-space:nowrap}
.wa-btn{flex:none;padding:1.5cqw 3.2cqw;border-radius:5cqw;font-size:2.3cqw;font-weight:700;
  letter-spacing:.01em;color:#2A1E08;position:relative;
  background:linear-gradient(158deg,var(--gold-hi),var(--gold));
  box-shadow:0 1.2cqw 3cqw -1.4cqw rgba(224,177,92,.85)}
.wa-hero{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:1.5cqw;padding:5cqw 4cqw 4.4cqw;overflow:hidden;isolation:isolate}
.wa-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--shot) center/cover no-repeat;transform:scale(1.04)}
.wa-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,14,.62) 0%,rgba(8,10,14,.24) 34%,rgba(8,10,14,.88) 82%,rgba(8,10,14,.96) 100%),
             radial-gradient(70% 55% at 78% 22%,rgba(224,177,92,.2),transparent 70%)}
.wa-eyebrow{display:inline-flex;align-items:center;gap:1.2cqw;font-family:var(--f-mono);
  font-size:1.85cqw;letter-spacing:.2em;text-transform:uppercase;color:#F0DDB4}
.wa-eyebrow::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--gold)}
.wa-h{display:block;font-family:var(--f-display);font-weight:800;font-size:8.6cqw;
  line-height:.94;letter-spacing:-.045em;color:#FFF;text-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.55)}
.wa-h i{display:block;color:#EBD3A2}
.wa-p{display:block;max-width:34ch;font-size:2.5cqw;line-height:1.45;color:#C6CCD5}
.wa-cta{align-self:flex-start;margin-top:1.4cqw;padding:2cqw 4cqw;border-radius:6cqw;
  background:#F4F6F8;color:#101319;font-size:2.5cqw;font-weight:700;
  box-shadow:0 1.6cqw 3.6cqw -1.6cqw rgba(0,0,0,.8)}
.wa-open{position:absolute;top:4cqw;right:4cqw;display:inline-flex;align-items:center;gap:1.1cqw;
  padding:1.2cqw 2.4cqw;border-radius:4cqw;font-size:1.95cqw;font-weight:600;color:#CFE8D6;
  background:rgba(10,14,12,.62);border:.25cqw solid rgba(143,240,181,.3);
  backdrop-filter:blur(2cqw);-webkit-backdrop-filter:blur(2cqw)}
.wa-open i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#6FDF9B;
  box-shadow:0 0 1.6cqw rgba(111,223,155,.9)}
.wa-menu{flex:none;display:flex;flex-direction:column;padding:2.2cqw 3.6cqw;gap:.4cqw;
  background:#0C0E12}
.wa-item{display:flex;align-items:center;gap:2.4cqw;padding:1.7cqw 0;
  border-bottom:.25cqw solid rgba(233,236,241,.07)}
.wa-item:last-child{border-bottom:0}
.wa-item > i{width:8cqw;height:8cqw;flex:none;border-radius:2cqw;background-size:cover;
  background-position:center;box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.1)}
.wa-txt{display:flex;flex-direction:column;gap:.35cqw;min-width:0;flex:1}
.wa-txt b{font-size:2.5cqw;font-weight:600;color:#E9ECF1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.wa-txt u{font-size:2.05cqw;color:#8B94A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-item em{font-size:2.6cqw;font-weight:700;color:#EBD3A2;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.wa-bar{flex:none;display:flex;align-items:center;gap:1.6cqw;height:8cqw;padding:0 3.6cqw;
  border-top:.25cqw solid rgba(233,236,241,.08);background:#0A0C10;font-size:2.1cqw;color:#98A1AE}
.wa-stars{color:var(--gold);letter-spacing:.06em;font-size:2.2cqw}
.wa-rev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-lang{margin-left:auto;font-family:var(--f-mono);font-size:1.85cqw;letter-spacing:.09em;
  color:#78818E;white-space:nowrap}

/* ==========================================================
   ARCHETYPE B — light service business
   ========================================================== */
.wb{background:#F6F4F0;color:#101720}
.wb-nav{display:flex;align-items:center;gap:2.6cqw;height:9.6cqw;flex:none;padding:0 3.6cqw;
  background:#FFF;border-bottom:.25cqw solid rgba(16,23,32,.09)}
.wb-mark{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.wb-mark{font-family:var(--f-display);font-size:3.3cqw;font-weight:800;letter-spacing:-.02em}
.wb-mark i{font-size:1.7cqw;font-weight:600;letter-spacing:.17em;color:#14427A;margin-top:.5cqw}
.wb-links{display:flex;gap:2.8cqw;margin-left:auto;font-size:2.25cqw;color:#5C6773;white-space:nowrap}
.wb-tel{flex:none;padding:1.5cqw 3cqw;border-radius:5cqw;background:#14427A;color:#FFF;
  font-size:2.25cqw;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  position:relative;box-shadow:0 1.2cqw 3cqw -1.4cqw rgba(20,66,122,.9)}
.wb-hero{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr .95fr;gap:3.2cqw;
  padding:4.2cqw 3.6cqw;align-items:center}
.wb-copy{display:flex;flex-direction:column;gap:1.5cqw;min-width:0}
.wb-eyebrow{font-family:var(--f-mono);font-size:1.8cqw;letter-spacing:.17em;text-transform:uppercase;
  color:#14427A}
.wb-h{display:block;font-family:var(--f-display);font-weight:800;font-size:6.4cqw;line-height:1.02;
  letter-spacing:-.04em;text-wrap:balance}
.wb-p{display:block;font-size:2.35cqw;line-height:1.5;color:#5C6773}
.wb-cta{align-self:flex-start;margin-top:.8cqw;padding:2cqw 3.6cqw;border-radius:5cqw;
  background:#101720;color:#FFF;font-size:2.4cqw;font-weight:700;
  box-shadow:0 1.6cqw 3.4cqw -1.6cqw rgba(16,23,32,.7)}
.wb-shot{position:relative;height:100%;min-height:0;border-radius:3cqw;background-size:cover;
  background-position:center;box-shadow:0 2.4cqw 5cqw -2cqw rgba(16,23,32,.42),
  inset 0 0 0 .25cqw rgba(16,23,32,.1)}
.wb-badge{position:absolute;left:-1.6cqw;bottom:2.4cqw;display:flex;flex-direction:column;
  gap:.3cqw;padding:1.6cqw 2.4cqw;border-radius:2.2cqw;background:#FFF;
  box-shadow:0 1.8cqw 4cqw -1.6cqw rgba(16,23,32,.5)}
.wb-badge b{font-family:var(--f-display);font-size:3cqw;font-weight:800;letter-spacing:-.03em;
  color:#14427A;line-height:1}
.wb-badge u{font-size:1.75cqw;color:#6C7683;white-space:nowrap}
.wb-trust{flex:none;display:flex;gap:3cqw;padding:0 3.6cqw 2.6cqw;font-size:2.05cqw;color:#3E4A57}
.wb-trust i{display:inline-flex;align-items:center;gap:1cqw;color:#3E4A57;white-space:nowrap}
.wb-trust i::before{content:"";width:2.2cqw;height:2.2cqw;border-radius:50%;flex:none;
  background:#14427A url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/62% no-repeat}
.wb-svcs{flex:none;display:flex;flex-direction:column;gap:1.2cqw;padding:0 3.6cqw 3cqw}
.wb-svc{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4cqw 2cqw;
  padding:2.2cqw 2.6cqw;border-radius:2.4cqw;background:#FFF;
  box-shadow:0 1cqw 2.6cqw -1.4cqw rgba(16,23,32,.3)}
.wb-svc b{font-size:2.45cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-svc u{grid-column:1;font-size:2cqw;color:#6C7683;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.wb-svc em{grid-column:2;grid-row:1/3;font-size:2.7cqw;font-weight:800;color:#14427A;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-foot{flex:none;display:flex;align-items:center;height:7.4cqw;padding:0 3.6cqw;
  background:#101720;color:#9AA6B4;font-size:2cqw;white-space:nowrap;overflow:hidden}

/* ==========================================================
   ARCHETYPE C — editorial studio / boutique
   ========================================================== */
.wc{background:#FAF7F2;color:#151210}
.wc-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2cqw;
  height:9.4cqw;flex:none;padding:0 3.6cqw;border-bottom:.25cqw solid rgba(21,18,16,.12)}
.wc-l,.wc-r{display:flex;align-items:center;gap:2.6cqw;font-size:2.2cqw;color:#6B6259;
  white-space:nowrap}
.wc-r{justify-content:flex-end}
.wc-mark{font-family:var(--f-serif);font-size:3.1cqw;font-weight:600;letter-spacing:.2em;
  white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
.wc-btn{padding:1.3cqw 2.8cqw;border-radius:5cqw;border:.3cqw solid #151210;color:#151210;
  font-size:2.1cqw;font-weight:700;position:relative}
.wc-hero{flex:1;min-height:0;background-size:cover;background-position:center;
  border-bottom:.25cqw solid rgba(21,18,16,.1)}
.wc-card{flex:none;margin:-9cqw 3.6cqw 0;padding:3.4cqw 3.4cqw 3.8cqw;background:#FAF7F2;
  display:flex;flex-direction:column;gap:1.4cqw;position:relative;z-index:2;
  box-shadow:0 -1cqw 4cqw -2cqw rgba(21,18,16,.25)}
.wc-eyebrow{font-family:var(--f-mono);font-size:1.8cqw;letter-spacing:.2em;text-transform:uppercase;
  color:#B4552F}
.wc-h{display:block;font-family:var(--f-serif);font-weight:500;font-size:6.2cqw;line-height:1.04;
  letter-spacing:.005em;text-wrap:balance}
.wc-p{display:block;font-size:2.3cqw;line-height:1.5;color:#6B6259;max-width:36ch}
.wc-cta{display:inline-flex;align-items:center;gap:1.4cqw;align-self:flex-start;margin-top:.6cqw;
  padding-bottom:.9cqw;border-bottom:.35cqw solid #B4552F;color:#B4552F;font-size:2.35cqw;
  font-weight:700;position:relative}
.wc-grid{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:0 3.6cqw 3cqw}
.wc-grid i{aspect-ratio:1;background-size:cover;background-position:center;border-radius:1.4cqw;
  box-shadow:inset 0 0 0 .25cqw rgba(21,18,16,.12)}
.wc-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  height:7.6cqw;padding:0 3.6cqw;border-top:.25cqw solid rgba(21,18,16,.12);
  font-size:2.1cqw;color:#6B6259;white-space:nowrap}
.wc-price{font-family:var(--f-display);font-weight:800;font-size:2.5cqw;color:#151210;
  font-variant-numeric:tabular-nums}

/* --- the cursor that keeps clicking the main button ------- */
.wp-cur{position:absolute;z-index:8;width:3.4cqw;height:3.4cqw;left:24%;top:70%;
  background:#fff;clip-path:polygon(0 0,100% 62%,54% 66%,34% 100%);
  filter:drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.65));
  animation:wpCur 6.4s cubic-bezier(.55,0,.2,1) infinite}
.wa-btn::after,.wb-tel::after,.wc-btn::after{content:"";position:absolute;inset:-1.6cqw;
  border-radius:6cqw;border:.4cqw solid currentColor;opacity:0;
  animation:wpRing 6.4s linear infinite}
.wa-btn::after{border-color:var(--gold-hi)}
.wb-tel::after{border-color:#14427A}
.wp-toast{position:absolute;z-index:9;right:3cqw;top:13cqw;padding:1.5cqw 2.4cqw;
  border-radius:1.8cqw;background:#10331F;color:#8FF0B5;border:.25cqw solid rgba(143,240,181,.3);
  font-size:1.95cqw;font-weight:700;opacity:0;white-space:nowrap;
  box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.7);
  animation:wpToast 6.4s linear infinite}
@keyframes wpCur{
  0%{left:24%;top:72%}
  30%{left:78%;top:12%}
  40%{left:78%;top:12%;transform:scale(.82)}
  46%{transform:scale(1)}
  70%{left:78%;top:12%}
  100%{left:28%;top:66%}}
@keyframes wpRing{
  0%,36%{opacity:0;transform:scale(.72)}
  42%{opacity:.9;transform:scale(1)}
  56%{opacity:0;transform:scale(1.45)}
  100%{opacity:0}}
@keyframes wpToast{
  0%,46%{opacity:0;transform:translateY(-1.4cqw)}
  54%,84%{opacity:1;transform:none}
  92%,100%{opacity:0}}
.d2 .wp-cur,.d2 .wa-btn::after,.d2 .wb-tel::after,.d2 .wc-btn::after,.d2 .wp-toast{animation-delay:-1.1s}
.d3 .wp-cur,.d3 .wa-btn::after,.d3 .wb-tel::after,.d3 .wc-btn::after,.d3 .wp-toast{animation-delay:-2.2s}
.d4 .wp-cur,.d4 .wa-btn::after,.d4 .wb-tel::after,.d4 .wc-btn::after,.d4 .wp-toast{animation-delay:-3.3s}
.d5 .wp-cur,.d5 .wa-btn::after,.d5 .wb-tel::after,.d5 .wc-btn::after,.d5 .wp-toast{animation-delay:-4.4s}
.d6 .wp-cur,.d6 .wa-btn::after,.d6 .wb-tel::after,.d6 .wc-btn::after,.d6 .wp-toast{animation-delay:-5.5s}
.d7 .wp-cur,.d7 .wa-btn::after,.d7 .wb-tel::after,.d7 .wc-btn::after,.d7 .wp-toast{animation-delay:-.6s}
.d8 .wp-cur,.d8 .wa-btn::after,.d8 .wb-tel::after,.d8 .wc-btn::after,.d8 .wp-toast{animation-delay:-2.8s}
.d9 .wp-cur,.d9 .wa-btn::after,.d9 .wb-tel::after,.d9 .wc-btn::after,.d9 .wp-toast{animation-delay:-4.9s}
.d10 .wp-cur,.d10 .wa-btn::after,.d10 .wb-tel::after,.d10 .wc-btn::after,.d10 .wp-toast{animation-delay:-3.7s}

/* container queries carry the whole panel system */
@supports not (container-type:inline-size){ .hero-wall{display:none} }

@media (max-width:900px){
  .hero-wall{inset:-10% -8%}
  .hw-cols{gap:12px}
  .hw-col > *{margin-bottom:12px}
  .hw-col.c5,.hw-col.c6{display:none}
  .hwt.z0 > .wp,.hwt.z0 > .wad{transform:scale(.952)}
  .hwt.z1 > .wp,.hwt.z1 > .wad{transform:scale(.978)}
  .hwt.z3 > .wp,.hwt.z3 > .wad{transform:scale(1.014)}
  .hwt.z4 > .wp,.hwt.z4 > .wad{transform:scale(1.03)}
  .hwt-tag{font-size:7px;bottom:-12px;letter-spacing:.12em}
  .hwt-c{width:7px;height:7px}
  .hud-br{width:26px;height:26px;left:auto}
  .hud-br.tl,.hud-br.bl{left:4%} .hud-br.tr,.hud-br.br{right:4%}
  .hud-tel{font-size:8px;letter-spacing:.16em}
  .hud-tel.t1{left:calc(4% + 34px)} .hud-tel.t2{left:calc(4% + 34px)}
  .hud-tel.t3{right:calc(4% + 34px)}
  .hud-grid{background-size:54px 54px}
  .hero-veil{background:
    radial-gradient(44% 27% at 50% 42%,rgba(8,9,12,.95) 0%,rgba(8,9,12,.68) 62%,rgba(8,9,12,0) 100%),
    radial-gradient(90% 56% at 50% 50%,rgba(8,9,12,0) 20%,rgba(8,9,12,.5) 72%,rgba(8,9,12,.86) 100%),
    linear-gradient(180deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.2) 20%,rgba(8,9,12,.26) 58%,rgba(8,9,12,.95) 100%)}
  .wall-note{position:static;margin-top:16px;text-align:center;font-size:9.5px;z-index:2}
}
@media (max-width:1100px){ .hw-col.c6{display:none} }
@media (max-width:860px){ .hw-col.c5{display:none} }
@media (max-width:620px){
  .wp{font-size:7px}
  .wp-hero b{font-size:12px}
}
html.rm .hw-col,html.rm .hud-sweep,html.rm .hwt-live,
html.rm .wp-cur,html.rm .wp-toast,html.rm .wp-nav em::after{animation:none}

/* ----------------------------------------------------------
   Ad creatives in the wall. Stills, moved in code — a slow
   push and drift plus one pass of light. No video decoding.
   ---------------------------------------------------------- */
.wad{position:relative;overflow:hidden;background:#0A0B0E;isolation:isolate}
.wad i{position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;transform:scale(1.04);
  animation:adDrift 26s ease-in-out infinite}
.wad u{position:absolute;inset:-40% -20%;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.16) 49%,
    rgba(255,255,255,.04) 53%,transparent 62%);
  transform:translate3d(-130%,0,0);
  animation:adSweep 11s cubic-bezier(.4,0,.25,1) infinite}
.wad::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 -6cqw 12cqw -6cqw rgba(0,0,0,.5)}
@keyframes adDrift{
  0%,100%{transform:scale(1.04) translate3d(0,0,0)}
  50%{transform:scale(1.12) translate3d(-1.4%,-1.8%,0)}}
@keyframes adSweep{
  0%,58%{transform:translate3d(-130%,0,0)}
  80%,100%{transform:translate3d(130%,0,0)}}
.wad1 i{animation-delay:-0.98s} .wad1 u{animation-delay:-0.41s}
.wad2 i{animation-delay:-1.96s} .wad2 u{animation-delay:-0.82s}
.wad3 i{animation-delay:-2.94s} .wad3 u{animation-delay:-1.23s}
.wad4 i{animation-delay:-3.92s} .wad4 u{animation-delay:-1.64s}
.wad5 i{animation-delay:-4.90s} .wad5 u{animation-delay:-2.05s}
.wad6 i{animation-delay:-5.88s} .wad6 u{animation-delay:-2.46s}
.wad7 i{animation-delay:-6.86s} .wad7 u{animation-delay:-2.87s}
.wad8 i{animation-delay:-7.84s} .wad8 u{animation-delay:-3.28s}
.wad9 i{animation-delay:-8.82s} .wad9 u{animation-delay:-3.69s}
.wad10 i{animation-delay:-9.80s} .wad10 u{animation-delay:-4.10s}
.wad11 i{animation-delay:-10.78s} .wad11 u{animation-delay:-4.51s}
.wad12 i{animation-delay:-11.76s} .wad12 u{animation-delay:-4.92s}
.wad13 i{animation-delay:-12.74s} .wad13 u{animation-delay:-5.33s}
.wad14 i{animation-delay:-13.72s} .wad14 u{animation-delay:-5.74s}
.wad15 i{animation-delay:-14.70s} .wad15 u{animation-delay:-6.15s}
.wad16 i{animation-delay:-15.68s} .wad16 u{animation-delay:-6.56s}
.wad17 i{animation-delay:-16.66s} .wad17 u{animation-delay:-6.97s}
.wad18 i{animation-delay:-17.64s} .wad18 u{animation-delay:-7.38s}
.wad19 i{animation-delay:-18.62s} .wad19 u{animation-delay:-7.79s}
.wad20 i{animation-delay:-19.60s} .wad20 u{animation-delay:-8.20s}
.wad21 i{animation-delay:-20.58s} .wad21 u{animation-delay:-8.61s}
.wad22 i{animation-delay:-21.56s} .wad22 u{animation-delay:-9.02s}
.wad23 i{animation-delay:-22.54s} .wad23 u{animation-delay:-9.43s}
.wad24 i{animation-delay:-23.52s} .wad24 u{animation-delay:-9.84s}
.wad25 i{animation-delay:-24.50s} .wad25 u{animation-delay:-10.25s}
.wad26 i{animation-delay:-25.48s} .wad26 u{animation-delay:-10.66s}
html.rm .wad i,html.rm .wad u{animation:none}

/* ---------------------------------------------------------------------
   Reflection pass over the two gold tiers

   Only VIP Full Growth (packages) and AI Front Desk (automation) get it.
   Every other tier holds still, so the sweep reads as "this is the top
   one" rather than as decoration on everything.

   Lighting individual letters means clipping a gradient to the glyphs
   and making the fill transparent. That pair hides the text completely
   where background-clip:text is unsupported, so it sits behind @supports
   and the plain gold colour stays as the fallback.

   The band parks off-frame for most of the cycle and crosses in about
   two seconds, which is what makes it read as a reflection catching the
   light rather than as a looping animation.
   --------------------------------------------------------------------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #pk-vip-full-growth .grp li .hl,
  #pk-vip-full-growth .pk-tagline,
  #ak-frontdesk .grp li .hl,
  #ak-frontdesk .pk-tagline{
    background-image:linear-gradient(100deg,
      var(--tc) 0%,
      var(--tc) 41%,
      #FFF4D6 50%,
      var(--tc) 59%,
      var(--tc) 100%);
    background-size:280% 100%;
    background-repeat:no-repeat;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:goldSheen 6.5s cubic-bezier(.42,0,.22,1) infinite;
  }
}

@keyframes goldSheen{
  0%,64%   {background-position:100% 0}
  94%,100% {background-position:0% 0}
}

@media (prefers-reduced-motion:reduce){
  #pk-vip-full-growth .grp li .hl,
  #pk-vip-full-growth .pk-tagline,
  #ak-frontdesk .grp li .hl,
  #ak-frontdesk .pk-tagline{animation:none}
}

/* ---------------------------------------------------------------------
   The run-up to the AI band

   The packages section and the band below it were each padding
   generously on their facing edges - 7.5vw below the packages and 5vw
   above the band - so the two stacked into roughly 128px of empty
   screen before the "competition" line. Neither value was wrong on its
   own; the problem was only that they met. So the facing edges are
   pulled in and every other edge is left where it was.
   --------------------------------------------------------------------- */
#packages{padding-bottom:clamp(26px,3.2vw,48px)}
.sec-akb{padding-block:clamp(12px,1.6vw,22px) clamp(40px,5vw,72px)}

/* the band carries more weight now that it sits closer */
.akb-h{font-size:clamp(27px,3.1vw,44px)}

/* ---------------------------------------------------------------------
   One line of plain English per tier

   The tile was a single baseline row - name, then price pushed right.
   A three-column grid instead: the dot and the price each span both
   rows and stay vertically centred, so adding the summary line does not
   knock either of them out of alignment.
   --------------------------------------------------------------------- */
.akb-t{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:10px;
  row-gap:1px;
  padding:10px 13px;
}
.akb-t::before{grid-column:1;grid-row:1 / span 2;align-self:center}
.akb-t b{grid-column:2;grid-row:1}
.akb-t em{
  grid-column:2;grid-row:2;
  font-style:normal;
  font-size:11.5px;
  line-height:1.35;
  color:var(--mute);
}
.akb-t i{grid-column:3;grid-row:1 / span 2;align-self:center;margin-inline-start:0}

@media (max-width:560px){
  .akb-t em{font-size:11px}
}

/* ---------------------------------------------------------------------
   "VIP" burns a little brighter than the gold around it

   The word is highlighted on its own, separately from "priority
   support", so it can take a brighter pair of gradient stops and a soft
   bloom while still riding the same reflection sweep as the rest of the
   card - it stays part of the pass rather than becoming a second effect
   competing with it.

   Targeted through the span's data-i rather than a position, because
   the highlighter rebuilds the span's children on every language
   change and only the span itself survives.
   --------------------------------------------------------------------- */
#ak-frontdesk .grp li [data-i="a3_g3_4"] .hl:first-child,
#ak-frontdesk .grp li span[data-i="a3_g3_4"] em.hl:first-of-type{
  background-image:linear-gradient(100deg,
    var(--gold-hi) 0%,
    var(--gold-hi) 41%,
    #FFFFFF 50%,
    var(--gold-hi) 59%,
    var(--gold-hi) 100%);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--gold-hi) 42%,transparent));
  letter-spacing:.015em;
}

/* =====================================================================
   AI band: headline over three tiers, CTA lifted out below
   ===================================================================== */

/* The button used to be the third column, which squeezed the tiers into
   a narrow stack. With it gone the band becomes two stacked rows and the
   tiers spread across the full width. */
.akb{grid-template-columns:1fr;align-items:start}
.akb-tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.akb-t{align-content:start}

/* three across needs room; below that they stack again */
@media (max-width:860px){
  .akb-tiers{grid-template-columns:1fr}
}

/* ---- bigger type in the band ---- */
.akb-h{font-size:clamp(30px,4.3vw,58px)}
.akb .pill-eyebrow{font-size:12.5px;letter-spacing:.18em;padding:10px 16px}
.akb .pill-eyebrow::before{width:8px;height:8px}
.akb .akb-tag{font-size:11.5px;padding:9px 15px}
.akb-t b{font-size:15.5px}
.akb-t em{font-size:12.5px}
.akb-t i{font-size:14px}

/* ---------------------------------------------------------------------
   The band catches the light on the same cadence as the strip above it

   Same skewed band, same 7.2s loop and easing as .akb-strip-glint, so
   the two read as one pass down the page rather than two effects firing
   independently. .akb already clips its overflow, so nothing escapes the
   rounded corners.
   --------------------------------------------------------------------- */
.akb-glint{
  position:absolute;inset:0 auto 0 -30%;width:26%;
  pointer-events:none;z-index:0;
  background:linear-gradient(100deg,
    transparent,
    rgba(182,156,255,.14) 46%,
    rgba(255,255,255,.09) 54%,
    transparent);
  transform:skewX(-14deg);
  animation:akbGlint 7.2s cubic-bezier(.42,0,.12,1) infinite;
}
.akb-txt,.akb-tiers{z-index:1}

/* ---------------------------------------------------------------------
   "system" reflects like glass

   Keyed off data-i rather than a class so the one headline definition
   covers both the home page band and the automation page hero. It keeps
   the gold of every other .h2 em on the site and adds a white highlight
   that crosses on the same 7.2s beat as the glare above.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   The CTA, now its own row

   Right-aligned in the gap that sat empty above "Choose your plan", and
   filled with the same teal-to-violet the strip uses on "They just
   answered" - the only filled gradient on the page, so nothing competes
   with it.
   --------------------------------------------------------------------- */
.akb-cta{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  width:max-content;max-width:100%;
  margin-block:clamp(18px,2.4vw,30px) 0;
  margin-inline:auto 0;
  padding:clamp(13px,1.4vw,18px) clamp(20px,2.2vw,30px);
  border-radius:999px;
  font-family:var(--f-sans);
  font-weight:700;
  font-size:clamp(15px,1.5vw,19px);
  line-height:1;
  letter-spacing:-.01em;
  color:#0B0C10;
  text-decoration:none;
  background:linear-gradient(120deg,var(--t-teal),var(--t-violet) 70%);
  box-shadow:
    0 16px 44px -20px rgba(140,150,255,.8),
    inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-spring);
}
.akb-cta .bi{
  width:clamp(34px,3.2vw,42px);height:clamp(34px,3.2vw,42px);
  background:rgba(11,12,16,.16);
}
.akb-cta .ic{color:#0B0C10}
.akb-cta:hover{
  transform:translateY(-2px);
  box-shadow:
    0 22px 54px -20px rgba(140,150,255,.92),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.akb-cta:hover .bi{transform:translate(2px,-1px)}
.akb-cta:active{transform:translateY(0) scale(.988)}

@media (max-width:640px){
  .akb-cta{width:100%;justify-content:space-between;margin-inline:0}
}

@media (prefers-reduced-motion:reduce){
  .akb-glint{animation:none}
}

/* =====================================================================
   One light source for every piece of gradient text on the site

   Everywhere the type switches from flat colour to a gradient - the gold
   italics in headlines, the chrome wordmark, the teal-to-violet line
   above the AI band, the about-page figures - now catches the same
   reflection on the same 7.2s beat, so the page reads as one surface
   rather than a set of separate tricks.

   The highlight is a SECOND background layer sliding over the original
   gradient, not a replacement for it. That matters: the chrome look
   depends on its vertical banding and the gold on its 165deg fall, and
   rewriting either into a horizontal sweep would have flattened them.
   Layering also removes the failure mode where a sweep slides off the
   glyphs and leaves them unpainted - the base layer always covers.

   Deliberately left alone:
     .mq-a span  - the marquee already moves; a sweep on top reads as noise
     .grp li .hl - package bullets stay still except the two VIP tiers,
                   which is what makes those two feel like the top of the
                   ladder
   ===================================================================== */
@keyframes gpSheen{
  0%,64%   {background-position:100% 0, 0 0}
  94%,100% {background-position:0% 0, 0 0}
}

/* chrome: white highlight over the metal banding */
.chrome-text{
  background-image:
    linear-gradient(100deg,transparent 42%,rgba(255,255,255,.90) 50%,transparent 58%),
    linear-gradient(180deg,#FFFFFF 0%,#D9DDE3 40%,#8C929C 62%,#E8EAEE 78%,#A3A9B2 100%);
}

/* the gold italics that accent headlines across the whole site */
.h2 em,.hero-h em,.hero-h .chrome-text em{
  background-image:
    linear-gradient(100deg,transparent 42%,rgba(255,248,230,.92) 50%,transparent 58%),
    linear-gradient(165deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-deep) 110%);
}

/* warm accent in the notice copy */
.n-copy h5 em{
  background-image:
    linear-gradient(100deg,transparent 42%,rgba(255,236,208,.90) 50%,transparent 58%),
    linear-gradient(90deg,#FFD08A,#E8763A);
}

/* the about figures */
.ab-st b{
  background-image:
    linear-gradient(100deg,transparent 42%,rgba(255,255,255,.90) 50%,transparent 58%),
    linear-gradient(180deg,#FFF,#C6CCD4);
}

/* "They just answered" */
.akb-strip-txt em{
  background-image:
    linear-gradient(100deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%),
    linear-gradient(120deg,var(--t-teal),var(--t-violet) 70%);
}

.chrome-text,
.h2 em,.hero-h em,.hero-h .chrome-text em,
.n-copy h5 em,
.ab-st b,
.akb-strip-txt em{
  background-size:280% 100%, 100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:100% 0, 0 0;
  animation:gpSheen 7.2s cubic-bezier(.42,0,.22,1) infinite;
}

@media (prefers-reduced-motion:reduce){
  .chrome-text,
  .h2 em,.hero-h em,.hero-h .chrome-text em,
  .n-copy h5 em,
  .ab-st b,
  .akb-strip-txt em{animation:none}
}

/* =====================================================================
   AI band, three columns: headline / the two entry tiers / Front Desk

   Starter and Role stack in the middle at a glance-able size, and
   AI Front Desk takes the whole right column at the height of both of
   them together. The two small tiles drop their summary line - with the
   top tier beside them at twice the type size, the band now says which
   one matters without three paragraphs competing for the same second.
   ===================================================================== */
.akb{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) minmax(0,.86fr);
  align-items:stretch;
}

/* middle column: two tiles, one above the other, centred as a pair */
.akb-tiers{
  grid-template-columns:1fr;
  grid-auto-rows:1fr;
  gap:10px;
  align-content:center;
}

/* no summary line here any more, so the tile collapses to a single row */
.akb-tiers .akb-t{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  row-gap:0;
  padding:clamp(13px,1.4vw,18px) clamp(14px,1.5vw,18px);
}
.akb-tiers .akb-t::before{grid-row:1}
.akb-tiers .akb-t b{grid-row:1;font-size:clamp(15px,1.45vw,18px);white-space:normal}
.akb-tiers .akb-t i{grid-row:1;font-size:clamp(15px,1.45vw,18px)}

/* ---------------------------------------------------------------------
   The right column

   Same materials as the small tiles - same border, same fill, same dot -
   so it reads as the top of one ladder rather than a different component.
   It earns its weight from size alone: the name and price run roughly
   half again as large, and it stands as tall as the pair beside it.
   --------------------------------------------------------------------- */
.akb-feature{
  position:relative;z-index:1;
  display:grid;align-content:center;justify-items:start;
  gap:clamp(6px,.7vw,10px);
  padding:clamp(18px,2vw,26px);
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(236,238,241,.03);
  min-width:0;
}
.akb-feature::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:var(--tc);
  box-shadow:0 0 14px color-mix(in srgb,var(--tc) 70%,transparent);
}
.akb-feature b{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(19px,2vw,27px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.akb-feature em{
  font-style:normal;
  font-size:clamp(12px,1.1vw,13.5px);
  line-height:1.4;
  color:var(--mute);
}
.akb-feature i{
  font-style:normal;
  font:600 clamp(21px,2.2vw,30px)/1 var(--f-mono);
  color:var(--gold-hi);
  margin-top:2px;
}

/* stacked layout: the feature sits under the pair and stops being tall */
@media (max-width:1023px){
  .akb{grid-template-columns:1fr}
  .akb-tiers{grid-auto-rows:auto}
  .akb-feature{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    justify-items:stretch;
    column-gap:12px;
    padding:clamp(14px,3vw,18px);
  }
  .akb-feature::before{grid-row:1 / span 2;align-self:center}
  .akb-feature b{grid-column:2;grid-row:1;font-size:17px}
  .akb-feature em{grid-column:2;grid-row:2}
  .akb-feature i{grid-column:3;grid-row:1 / span 2;align-self:center;margin-top:0;font-size:19px}
}

/* =====================================================================
   The band's parts are individually clickable now

   Each tier links straight to its own card on the automation page, so
   the band itself is no longer one big link and stops lifting as a
   whole - otherwise hovering a single tile would move everything and
   nothing would read as the thing you are about to click.
   ===================================================================== */
.akb-txt,.akb-t,.akb-feature{
  text-decoration:none;
  color:inherit;
  transition:
    transform .38s var(--ease-spring),
    border-color .38s var(--ease-spring),
    background-color .38s var(--ease-spring),
    box-shadow .38s var(--ease-spring);
}
.akb:hover{transform:none}

/* each tile lifts and warms toward its own colour on hover */
.akb-t:hover,.akb-feature:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--tc) 45%,transparent);
  background-color:color-mix(in srgb,var(--tc) 9%,rgba(236,238,241,.03));
  box-shadow:0 18px 40px -24px color-mix(in srgb,var(--tc) 80%,transparent);
}
.akb-t:active,.akb-feature:active{transform:translateY(-1px) scale(.995)}
.akb-feature:hover{transform:translateY(-4px)}

/* keyboard users get the same affordance */
.akb-txt:focus-visible,.akb-t:focus-visible,.akb-feature:focus-visible{
  outline:2px solid var(--tc,var(--gold-hi));
  outline-offset:3px;
}

/* =====================================================================
   Footer wordmark: a light that follows the cursor

   The mark is already a chrome gradient masked to the letterforms. The
   highlight is a second masked layer on top, so the glow only ever
   appears inside the letters - it never spills into the box around
   them. Position comes from --mx/--my, written by a pointermove
   listener; with no pointer it simply never fades in.
   ===================================================================== */
.foot-mark{position:relative;isolation:isolate}
.foot-mark::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(
    circle 170px at var(--mx,50%) var(--my,50%),
    rgba(255,248,230,.95) 0%,
    rgba(247,220,164,.55) 32%,
    transparent 62%);
  -webkit-mask:var(--wordmark) center/contain no-repeat;
  mask:var(--wordmark) center/contain no-repeat;
  opacity:0;
  transition:opacity .45s var(--ease-out);
}
.foot-mark.lit::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .akb-t:hover,.akb-feature:hover{transform:none}
  .foot-mark::after{transition:none}
}

/* the jump target clears the sticky header */
.pk[id],.sec[id]{scroll-margin-top:clamp(84px,12vh,124px)}

/* =====================================================================
   Tier tiles: a line of plain English back, and prices that read as
   an offer rather than an invoice

   The prices were set in the mono face, which is right for timestamps
   and reference numbers and wrong for a figure you want someone to feel
   good about. They move to the display face at a real size, with
   tabular figures so the three still line up down the column.
   ===================================================================== */

/* the two stacked tiers carry a short line again, so the tile goes back
   to two rows - dot and price span both and stay centred */
.akb-tiers .akb-t{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  /* the pair stretches to match the feature panel beside it, so the
     rows must sit in the middle of that height - left at start they
     bunch at the top and drag the price off centre with them */
  align-content:center;
  row-gap:2px;
  column-gap:12px;
  padding:clamp(12px,1.3vw,16px) clamp(14px,1.5vw,18px);
}
.akb-tiers .akb-t::before{grid-column:1;grid-row:1 / span 2;align-self:center}
.akb-tiers .akb-t b{grid-column:2;grid-row:1;font-size:clamp(15px,1.45vw,17px)}
.akb-tiers .akb-t em{
  grid-column:2;grid-row:2;
  font-style:normal;
  font-size:clamp(11.5px,1.05vw,12.5px);
  line-height:1.35;
  color:var(--mute);
}
.akb-tiers .akb-t i{grid-column:3;grid-row:1 / span 2;align-self:center}

/* ---- the prices ---- */
.akb-t i,.akb-feature i{
  font-family:var(--f-display);
  font-weight:700;
  font-style:normal;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--gold-hi);
  text-shadow:0 0 22px color-mix(in srgb,var(--gold) 26%,transparent);
}
.akb-tiers .akb-t i{font-size:clamp(19px,1.95vw,24px);line-height:1}
.akb-feature i{font-size:clamp(28px,3vw,40px);line-height:1;margin-top:4px}

/* on the phone the pair stops being a pair, so the feature price
   should not tower over the two above it */
@media (max-width:1023px){
  .akb-feature i{font-size:clamp(20px,5.2vw,24px);margin-top:0}
  .akb-tiers .akb-t i{font-size:clamp(18px,4.6vw,21px)}
}

/* ---------------------------------------------------------------------
   Hero particle field
   Sits between the ad wall (-3) and the headline (2), so the points read
   as floating in front of the scene without ever covering the words.
   --------------------------------------------------------------------- */
.hero-fx{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  display:block;
}

/* ---------------------------------------------------------------------
   The opening hold

   The hero opens quiet - dark ground, particles, headline - and the wall
   of work fades up a beat later. That beat is what the reference sites
   buy their presence with: one object in empty space.

   The wall is NOT hidden to do this. An earlier attempt set it to
   opacity:0; Chrome skips painting fully transparent subtrees, so the
   whole wall painted in the one frame it reappeared - a black screen,
   then everything popping at once. Here the wall renders from the first
   frame and a cover above it fades away instead.

   Named hero-hold, not hero-veil: .hero-veil is already the hero's
   vignette and reusing it would have quietly inherited those styles.
   --------------------------------------------------------------------- */
.hero-hold{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(110% 80% at 50% 38%,#212329 0%,#121318 46%,#08090C 100%);
  opacity:1;
  transition:opacity 1.5s var(--ease-out);
}
.hero-hold.lift{opacity:0}
.hero-fx{z-index:-1}

@media (prefers-reduced-motion:reduce){
  .hero-hold{display:none}
}

/* ---------------------------------------------------------------------
   The founder, in About

   A face is the strongest thing a one-person studio has, so it sits
   directly under the About headline rather than buried at the bottom.
   Muted, looping, no controls: it reads as a portrait that happens to
   move, not as a video asking to be played.
   --------------------------------------------------------------------- */
.ab-face{
  margin:26px 0 0;
  max-width:300px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--gr-2);
}
.ab-face-vid{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:var(--gr-3);
}
.ab-face figcaption{
  display:flex;flex-direction:column;gap:2px;
  padding:13px 15px;
  border-top:1px solid var(--line);
}
.ab-face figcaption b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ab-face figcaption span{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

@media (max-width:900px){
  .ab-face{max-width:240px}
}

/* ---------------------------------------------------------------------
   Showreel strip

   A rail that scrolls sideways under the price tiers: the tiers say what
   a promo costs, this says what one looks like for a business like
   yours. Labelled by trade rather than by style, because the owner
   reading it is looking for themselves, not for a technique.

   Each tile only loads its video when it is scrolled near (preload=none
   plus the observer in gp-app.js), so nine clips cost one poster image
   each until someone actually looks.
   --------------------------------------------------------------------- */
.reel-strip{margin-top:clamp(34px,5vw,54px)}
.rs-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:16px}
.rs-head h3{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.02em}
.rs-head p{margin:0;color:var(--mute);font-size:13.5px}

.rs-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,170px);
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(236,238,241,.22) transparent;
}
.rs-rail::-webkit-scrollbar{height:6px}
.rs-rail::-webkit-scrollbar-thumb{background:rgba(236,238,241,.22);border-radius:99px}

.rs-item{
  margin:0;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--gr-2);
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.rs-item:hover{border-color:var(--line-2);transform:translateY(-3px)}
.rs-item video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--gr-3)}
.rs-item figcaption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font:600 11px/1.3 var(--f-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
}

/* =====================================================================
   Scroll-scrubbed film band

   The section is three screens tall and the picture inside it sticks.
   Scrolling does not move the footage past you - it moves the footage
   itself, a frame at a time, because the scroll position is wired
   straight to the video's currentTime. That is the whole effect from
   the reference clips: the page stops being a document you scroll and
   becomes a thing you operate.

   The clip is encoded with every frame a keyframe, so a seek lands
   instantly. With ordinary spacing the decoder has to walk from the
   previous keyframe on every single scroll event and the picture
   lurches instead of flowing.
   ===================================================================== */
.scrub{
  position:relative;
  height:300vh;              /* the scroll runway; the picture stays put */
  background:var(--ink);
}
.scrub-stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.scrub-vid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--ink);
}
/* a grade over the footage so white type always holds, whatever frame
   the visitor happens to stop on */
.scrub-grade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 55% at 50% 50%,rgba(8,9,12,.18) 0%,rgba(8,9,12,.72) 100%),
    linear-gradient(180deg,rgba(8,9,12,.62) 0%,rgba(8,9,12,.12) 38%,rgba(8,9,12,.78) 100%);
}
.scrub-copy{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  text-align:center;
  padding-inline:var(--gutter);
  width:100%;
}
.scrub-line{
  grid-area:1/1;             /* all three stacked, one fades to the next */
  margin:0;
  max-width:16ch;
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.02;
  font-size:clamp(30px,6.4vw,76px);
  color:#F6F7F9;
  text-wrap:balance;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
  text-shadow:0 2px 40px rgba(8,9,12,.65);
}
.scrub-line.is-on{opacity:1;transform:none}

.scrub-hint{
  position:absolute;
  left:50%;
  bottom:clamp(18px,4vh,38px);
  transform:translateX(-50%);
  z-index:2;
  width:1px;height:46px;
  background:linear-gradient(180deg,transparent,rgba(246,247,249,.5));
  overflow:hidden;
}
.scrub-hint i{
  position:absolute;left:0;top:-46px;
  width:1px;height:46px;
  background:linear-gradient(180deg,transparent,var(--gold-hi));
  animation:scrubHint 2.4s var(--ease-io) infinite;
}
@keyframes scrubHint{
  0%{transform:translateY(0);opacity:0}
  28%{opacity:1}
  100%{transform:translateY(92px);opacity:0}
}
.scrub.is-done .scrub-hint{opacity:0;transition:opacity .4s}

/* A phone has less height to give; two screens of runway is enough and
   keeps the band from feeling like a hostage situation. */
@media (max-width:760px){
  .scrub{height:220vh}
  .scrub-line{max-width:13ch}
}

@media (prefers-reduced-motion:reduce){
  .scrub{height:auto}
  .scrub-stage{position:static;height:auto;padding-block:clamp(70px,14vh,130px)}
  .scrub-vid{position:absolute}
  .scrub-line{opacity:1;transform:none;position:static}
  .scrub-line[data-beat="1"],.scrub-line[data-beat="2"]{display:none}
  .scrub-hint{display:none}
}

/* =====================================================================
   Cursor light

   A warm pool that follows the pointer, sitting under the content and
   over the page ground. It only exists on devices with a real pointer:
   on a phone there is no cursor to follow, and drawing one anyway just
   costs battery.
   ===================================================================== */
.cursor-glow{
  position:fixed;
  left:0;top:0;
  width:520px;height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:0;
  background:radial-gradient(circle,
    rgba(224,177,92,.13) 0%,
    rgba(224,177,92,.06) 38%,
    rgba(224,177,92,0) 70%);
  transition:opacity .6s var(--ease-out);
  will-change:transform;
}
.cursor-glow.on{opacity:1}

/* The sections that sit on the dark ground get a stacking context so the
   glow reads behind their content instead of washing over it. */
.sec-pk,.sec-akb,.sec-vid,.sec-x{position:relative;z-index:1}

/* =====================================================================
   Scroll-driven rail

   On a pointer device the showreel travels sideways as the page scrolls
   down, which is the move the reference site uses on its service cards.
   Touch is left alone: a thumb already swipes the rail directly, and
   hijacking that is how these effects start feeling broken.
   ===================================================================== */
@media (hover:hover) and (min-width:900px){
  .reel-strip{position:relative}
  .rs-rail{scroll-behavior:auto}      /* JS sets scrollLeft; smooth would fight it */
}

@media (prefers-reduced-motion:reduce){
  .cursor-glow{display:none}
}