/* ===== fonts (vendored subsets, SIL OFL 1.1 — see assets/fonts/*.txt) ===== */
@font-face{font-family:"Vaylo Latin";src:url(assets/fonts/inter-tight-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2192}
@font-face{font-family:"Vaylo Serif SC";src:url(assets/fonts/vaylo-display-serif-sc.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Vaylo Serif Text";src:url(assets/fonts/vaylo-serif-light-sc.woff2) format("woff2");font-weight:300;font-display:swap}

/* ===== base ===== */
:root{
  --ink:#0b1a14; --ink-2:#13261e; --ink-3:#1b3229; --text:#0b1a14; --muted:#5b6a63; --muted-2:#8b978f;
  --line:rgba(11,26,20,.12); --line-d:rgba(255,255,255,.12);
  --paper:#f5f4ee; --white:#fff; --green:#0b3d2e; --green-2:#125a43; --lime:#c8f560;
  --r-lg:32px; --r-md:24px; --r-sm:16px; --max:1240px;
  --sec:clamp(96px,11vw,168px);
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Vaylo Serif SC","Songti SC","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:var(--white);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
section{padding:var(--sec) 0;scroll-margin-top:72px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.15;font-kerning:normal}
.j-txt strong{font-family:var(--display)}
.logo,.how-n{font-family:"Vaylo Latin",system-ui,sans-serif}
/* display headings: no punctuation — each phrase is its own line, list items separated by a gap */
:is(h1,h2,h3) .ln{display:block}
:is(h1,h2,h3) .gap{display:inline-block;width:.5em}
/* services heading keeps 、 — set proportionally so it doesn't leave a half-em hole */
.svc-h{font-feature-settings:"palt"}
.svc-h .nw{display:inline-block}
.svc-h .pc{display:inline-block;margin:0 .14em 0 .02em}
h2{font-size:clamp(36px,4.8vw,68px);line-height:1.1;letter-spacing:-.03em;margin-bottom:24px}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.75;color:var(--muted);max-width:620px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--green-2);margin-bottom:22px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(200,245,96,.28)}
.eyebrow.on-dark{color:var(--lime)}
.sec-head{margin-bottom:clamp(48px,6vw,88px)}
.sec-head.split{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:end}
.nw{display:inline-block}
h2,.lead{text-wrap:pretty}
.contact-box .lead{text-wrap:balance}
.sec-head.split h2{margin-bottom:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .15s ease,background .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--lime);color:var(--ink)}
.btn-primary:hover{box-shadow:0 10px 30px -10px rgba(200,245,96,.8)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-dark{background:var(--ink);color:#fff}
.btn-sm{height:42px;padding:0 20px;font-size:15px}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s,color .3s,backdrop-filter .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.03em}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--green);display:grid;place-items:center}
.nav-links{display:flex;gap:36px;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--green-2)}
.nav-cta{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}

.nav.over:not(.open){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.nav.dark:not(.over):not(.open){background:rgba(11,26,20,.78);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom-color:rgba(255,255,255,.08)}
:is(.nav.over,.nav.dark):not(.open){backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;color:#fff}
:is(.nav.over,.nav.dark):not(.open) .nav-links{color:rgba(255,255,255,.88)}
:is(.nav.over,.nav.dark):not(.open) .nav-links a:hover{color:var(--lime)}
:is(.nav.over,.nav.dark):not(.open) .logo-mark{background:rgba(255,255,255,.14)}
:is(.nav.over,.nav.dark):not(.open) .btn-dark{background:#fff;color:var(--ink)}
:is(.nav.over,.nav.dark):not(.open) .menu-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
:is(.nav.over,.nav.dark):not(.open) .menu-btn span,:is(.nav.over,.nav.dark):not(.open) .menu-btn span::before,:is(.nav.over,.nav.dark):not(.open) .menu-btn span::after{background:#fff}
.nav.open{color:var(--ink)}

/* hero — full-bleed video */
.hero{position:relative;min-height:640px;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;padding:0;background:#0a1f18 url(assets/hero-poster.jpg) center/cover no-repeat;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 52%,rgba(6,22,16,.72) 0%,rgba(6,22,16,.36) 58%,rgba(6,22,16,0) 100%),
    linear-gradient(rgba(6,22,16,.1),rgba(6,22,16,.1)),
    linear-gradient(180deg,rgba(6,22,16,.55) 0%,rgba(6,22,16,.12) 26%,rgba(8,32,24,.35) 60%,rgba(6,22,16,.88) 100%)}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:72px;padding-bottom:40px;animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-pill{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.06em;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:28px}
.hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(200,245,96,.3)}
.hero h1{font-size:clamp(40px,6.4vw,92px);line-height:1.08;letter-spacing:-.02em;max-width:1040px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .lead{color:rgba(255,255,255,.86);margin:28px auto 0;max-width:640px;text-shadow:0 1px 16px rgba(0,0,0,.3)}
.hero-ctas{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap;justify-content:center}
.hero .btn-ghost{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,.5)}
.hero-toggle{position:absolute;right:32px;bottom:32px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,31,24,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.hero-toggle:hover{background:rgba(10,31,24,.6);border-color:#fff}
.hero-toggle:focus-visible,.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.hero-toggle .i-play{display:none}
.hero-toggle.is-paused .i-play{display:block}.hero-toggle.is-paused .i-pause{display:none}
.hero-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll span{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,0));animation:scrollCue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes scrollCue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.reduce-motion .hero-video{display:none}

/* ===== intro (dark, continuous with hero → journey) — editorial display type ===== */
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,21,15,0),#07150f)}
.intro{position:relative;overflow:hidden;color:#fff;padding:clamp(96px,10vw,156px) 0 clamp(72px,7vw,112px);
  background:linear-gradient(180deg,#07150f 0%,#09180f 40%,var(--ink) 100%)}
.intro-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 10% 46%,rgba(200,245,96,.06),transparent 70%),radial-gradient(900px 420px at 90% 64%,rgba(18,90,67,.24),transparent 70%)}
.intro-mark{position:absolute;right:-.06em;top:clamp(300px,30vw,440px);font-family:"Vaylo Latin",system-ui,sans-serif;font-weight:900;font-size:clamp(150px,25vw,400px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;user-select:none;white-space:nowrap;transform:translate3d(var(--mx,0px),0,0);will-change:transform}
.intro .wrap{position:relative}
.intro-top{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:13px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.55);margin-bottom:clamp(40px,4.6vw,72px)}
.intro-idx{display:inline-flex;align-items:center;gap:14px}
.intro-idx b{font-family:"Vaylo Latin",system-ui,sans-serif;font-weight:600;color:var(--lime);letter-spacing:.06em}
.intro-idx i{width:40px;height:1px;background:rgba(255,255,255,.3)}
.intro-tags em{font-style:normal;margin:0 .7em;color:rgba(200,245,96,.6)}
.intro-head{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.1vw,88px);line-height:1.12;letter-spacing:-.035em;margin:0;max-width:none;text-wrap:balance;font-feature-settings:"palt"}
.intro-head .wm{font-family:"Vaylo Latin",system-ui,sans-serif;font-weight:800;letter-spacing:-.045em;margin-right:.02em}
.intro-head .g-d{width:.32em}
.intro-rule{height:1px;margin:clamp(44px,5vw,76px) 0 clamp(32px,3.4vw,48px);background:linear-gradient(90deg,rgba(200,245,96,.55),rgba(255,255,255,.14) 22%,rgba(255,255,255,.06));transform-origin:left;transform:scaleX(var(--rule,1))}
.intro-row{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,4vw,64px);align-items:start}
.intro-meta{font-size:14px;line-height:1.9;letter-spacing:.06em;color:rgba(255,255,255,.42);padding-top:.5em}
.intro-sub{font-family:"Vaylo Serif Text",var(--font);font-weight:300;font-size:clamp(19px,1.9vw,27px);line-height:1.65;letter-spacing:.005em;text-wrap:pretty;max-width:780px}
.intro-copy .ch{color:rgba(255,255,255,.16);transition:color .45s var(--ease)}
.intro-copy .ch.on{color:#fff}
.intro-sub .ch.on{color:rgba(255,255,255,.8)}
.intro-head .hl .ch.on{color:var(--lime)}
.intro-copy.static .ch{transition:none}
.v-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(64px,7vw,104px)}
.v-card{position:relative;padding:28px 26px 30px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:transform .5s var(--ease),border-color .4s,background .4s,opacity .9s var(--ease);transition-delay:0s,0s,0s,var(--d,0ms)}
.v-card.reveal{transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),border-color .4s,background .4s}
.v-card.reveal.in:hover{transform:translateY(-4px);transition-delay:0s}
.v-card:hover{border-color:rgba(200,245,96,.32);background:linear-gradient(180deg,rgba(200,245,96,.07),rgba(255,255,255,.02))}
.v-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--lime);background:rgba(200,245,96,.08);border:1px solid rgba(200,245,96,.18);transition:background .4s,color .4s}
.v-card:hover .v-ico{background:var(--lime);color:var(--ink)}
.v-no{position:absolute;top:30px;right:26px;font-family:"Vaylo Latin",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.32);font-variant-numeric:tabular-nums}
.v-card h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:28px 0 10px}
.v-card p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.6);text-wrap:pretty}
.intro-next{display:flex;align-items:center;gap:18px;margin-top:clamp(56px,6vw,88px);font-size:15px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.62);width:max-content;max-width:100%;transition:color .3s}
.intro-next .line{width:56px;height:1px;background:linear-gradient(90deg,var(--lime),rgba(200,245,96,.15));transform-origin:left;transition:width .5s var(--ease)}
.intro-next:hover{color:#fff}.intro-next:hover .line{width:88px}
.intro+.journey{padding-top:clamp(48px,5vw,88px)}
.intro+.journey::before{background:radial-gradient(800px 420px at 85% 340px,rgba(200,245,96,.08),transparent 70%);height:820px}
@media (max-width:1100px){.v-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .intro-head{font-size:clamp(38px,10.4vw,46px);line-height:1.16;letter-spacing:-.03em}
  .intro-head .ln-m{display:block}
  .intro-head .g-d{display:none}
  .intro-tags{display:none}
  .intro-row{grid-template-columns:1fr;gap:20px}
  .intro-meta{order:2;padding-top:0;font-size:13px}
  .intro-sub{font-size:19px;line-height:1.7}
  .intro-mark{top:auto;bottom:clamp(380px,100vw,520px);font-size:42vw}
  .v-grid{grid-template-columns:1fr;gap:12px}
  .v-card{display:grid;grid-template-columns:46px 1fr;column-gap:18px;padding:22px 20px}
  .v-ico{grid-row:1/3}
  .v-card h3{margin:0 0 4px;font-size:18px;line-height:1.4}
  .v-card p{font-size:14.5px}
  .v-no{top:24px;right:20px}
}
@media (prefers-reduced-motion:reduce){
  .intro-copy .ch{transition:none;color:#fff}
  .intro-sub .ch{color:rgba(255,255,255,.8)}
  .intro-head .hl .ch{color:var(--lime)}
  .intro-mark{transform:none}
  .v-card,.v-card.reveal{transition:none}
}

/* ===== journey (sticky storytelling) ===== */
.journey{background:var(--ink);color:#fff;padding-bottom:var(--sec);position:relative}
.journey::before{content:"";position:absolute;inset:0 0 auto 0;height:520px;background:radial-gradient(800px 420px at 85% 0%,rgba(200,245,96,.10),transparent 70%);pointer-events:none}
.j-head{position:relative}
.j-head h2{max-width:900px}
.j-head .lead{color:rgba(255,255,255,.66)}
.j-track{position:relative;height:380vh;margin-top:clamp(24px,3vw,48px)}
.j-marker{position:absolute;left:0;width:1px;top:calc(50vh + var(--i) * 56vh);height:56vh;pointer-events:none}
.j-stage{position:sticky;top:0;height:100vh;min-height:620px;display:flex;align-items:center;padding-top:72px}
.j-grid{display:grid;grid-template-columns:minmax(280px,.72fr) 1.6fr;gap:clamp(40px,5vw,80px);align-items:center;width:100%}
.j-list{position:relative;padding-left:34px}
.j-rail{position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--line-d);overflow:hidden}
.j-rail i{position:absolute;inset:0;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .15s linear}
.j-steps{list-style:none;display:flex;flex-direction:column;gap:6px}
.j-step button{all:unset;cursor:pointer;display:flex;gap:18px;align-items:flex-start;padding:14px 0;width:100%}
.j-step button:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:8px}
.j-num{font-size:13px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.35);padding-top:12px;font-variant-numeric:tabular-nums;transition:color .4s}
.j-txt{display:flex;flex-direction:column}
.j-txt strong{font-size:clamp(26px,2.4vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:rgba(255,255,255,.28);transition:color .45s var(--ease)}
.j-txt em{font-style:normal;font-size:15px;color:rgba(255,255,255,.6);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .5s var(--ease)}
.j-step:hover .j-txt strong{color:rgba(255,255,255,.55)}
.j-step.is-done .j-num{color:rgba(200,245,96,.55)}
.j-step.is-active .j-num{color:var(--lime)}
.j-step.is-active .j-txt strong{color:#fff}
.j-step.is-active .j-txt em{max-height:30px;opacity:1;margin-top:6px}
.j-frame{position:relative;height:min(calc(100vh - 190px),660px);min-height:440px;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3);box-shadow:0 40px 120px -40px rgba(0,0,0,.6);isolation:isolate}
.j-layer{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 0s linear 1s}
.j-layer.is-active{opacity:1;visibility:visible;transition:opacity 1s var(--ease),visibility 0s}
.j-media{position:absolute;inset:0;overflow:hidden;transform:scale(1.06);transition:transform 1.8s var(--ease)}
.j-layer.is-active .j-media{transform:scale(1)}
.j-media video{width:100%;height:100%;object-fit:cover}
.j-layer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,16,12,.18) 0%,rgba(6,16,12,0) 30%,rgba(6,16,12,.25) 55%,rgba(6,16,12,.88) 100%)}
.j-cap{position:absolute;left:clamp(24px,3vw,44px);right:clamp(24px,3vw,44px);bottom:clamp(24px,3vw,40px);z-index:2;transform:translateY(14px);opacity:0;transition:transform .9s var(--ease) .15s,opacity .8s .15s}
.j-layer.is-active .j-cap{transform:none;opacity:1}
.j-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px 0 6px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:13.5px;font-weight:700;margin-bottom:16px}
.j-pill b{display:grid;place-items:center;height:20px;min-width:28px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--lime);font-size:11.5px;letter-spacing:.04em}
.j-cap h3{font-size:clamp(28px,2.8vw,42px);color:#fff;letter-spacing:-.02em;margin-bottom:8px}
.j-cap p{color:rgba(255,255,255,.82);font-size:16.5px;max-width:580px;text-wrap:pretty}
.j-note{margin-top:36px;padding-left:74px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.42)}
.j-count{position:absolute;top:22px;right:22px;z-index:3;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.75);padding:7px 14px;border-radius:999px;background:rgba(6,16,12,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);font-variant-numeric:tabular-nums}
.j-count b{color:#fff;font-weight:700}
/* unified grade for all five stage videos */
.j-video{filter:saturate(.86) contrast(1.06) brightness(.9)}
.j-layer[data-i="2"] .j-video{filter:saturate(.78) contrast(1.08) brightness(.76)}
.j-layer[data-i="3"] .j-video{filter:saturate(.8) contrast(1.08) brightness(.84)}

/* ===== services ===== */
.services{background:var(--paper)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.svc{position:relative;padding:44px 40px 48px;border-top:1px solid var(--line);border-radius:0;transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-radius .35s,border-color .35s}
.svc:hover{background:#fff;border-radius:var(--r-md);border-top-color:transparent;transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(11,26,20,.28)}
.svc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.svc-ico{width:48px;height:48px;border-radius:14px;background:var(--ink);color:var(--lime);display:grid;place-items:center;transition:transform .35s var(--ease)}
.svc:hover .svc-ico{transform:rotate(-6deg) scale(1.05)}
.svc-n{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);font-variant-numeric:tabular-nums}
.svc h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:12px}
.svc p{color:var(--muted);max-width:460px}
.svc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin-top:24px;font-size:14px;font-weight:600;color:var(--ink)}
.svc-tags li+li::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--muted-2);margin:0 12px;vertical-align:middle}

/* ===== how it works ===== */
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.how-step{position:relative;padding-top:36px;border-top:1px solid var(--line)}
.how-step::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--lime);border-radius:2px}
.how-n{display:block;font-size:clamp(56px,5.4vw,80px);font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--ink);margin-bottom:28px;font-variant-numeric:tabular-nums}
.how-step h3{font-size:22px;margin-bottom:10px}
.how-step p{color:var(--muted);font-size:16px}

/* ===== why (dark) ===== */
.why{background:var(--ink);color:#fff}
.why-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(48px,7vw,120px);align-items:start}
.why-head{position:sticky;top:130px}
.why-head h2{font-size:clamp(36px,4.2vw,60px)}
.why-head .lead{color:rgba(255,255,255,.66)}
.why-head .btn{margin-top:36px}
.why-list{list-style:none}
.why-list li{display:grid;grid-template-columns:40px 1fr;gap:24px;padding:34px 0;border-top:1px solid var(--line-d)}
.why-list li:last-child{border-bottom:1px solid var(--line-d)}
.why-ck{width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center}
.why-list h3{font-size:24px;margin-bottom:8px}
.why-list p{color:rgba(255,255,255,.62)}

/* ===== about ===== */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,120px);align-items:start}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--muted);padding-top:2px}
.facts dd{font-size:18px;font-weight:700;letter-spacing:-.01em}

/* ===== contact ===== */
.contact{padding-bottom:clamp(64px,7vw,104px)}
.contact-box{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(64px,8vw,120px) clamp(28px,7vw,104px);text-align:center;display:flex;flex-direction:column;align-items:center;isolation:isolate}
.contact-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 50% 0%,rgba(200,245,96,.22),transparent 70%),radial-gradient(500px 300px at 100% 100%,rgba(18,90,67,.6),transparent 70%)}
.contact-box h2{max-width:900px}
.contact-box .lead{color:rgba(255,255,255,.7);margin:0 auto}
.contact-rows{display:grid;grid-template-columns:1.6fr 1fr 1fr;width:100%;max-width:960px;margin:56px 0 44px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.c-row{padding:24px 20px;display:flex;flex-direction:column;gap:6px}
.c-row+.c-row{border-left:1px solid var(--line-d)}
.c-row span{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.c-row strong{font-size:16px;font-weight:600}
.c-row .pending{color:rgba(255,255,255,.55);font-weight:500}

/* ===== footer ===== */
footer{padding:72px 0 40px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:48px}
.foot p{color:var(--muted);font-size:15px;margin-top:14px;max-width:360px}
.foot h5{font-size:14px;font-weight:700;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:15px}
.foot ul a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media (max-width:1100px){
  .how-steps{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .j-grid{grid-template-columns:minmax(240px,.7fr) 1.5fr}
}
@media (max-width:900px){
  .nav-links,.nav-cta .btn{display:none}
  .menu-btn{display:flex}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px;color:var(--ink)}
  .nav.open .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav.open .nav-links a:last-child{border-bottom:0}
  .sec-head.split{grid-template-columns:1fr;gap:24px}
  /* journey becomes stacked cards */
  .j-track{height:auto;margin-top:8px}
  .j-marker,.j-nav,.j-count{display:none}
  .j-stage{position:static;height:auto;min-height:0;padding:0;display:block}
  .j-grid{display:block}
  .j-frame{height:auto;min-height:0;background:none;box-shadow:none;border-radius:0;overflow:visible;display:grid;gap:16px}
  .j-layer,.j-layer.is-active{position:relative;inset:auto;opacity:1;visibility:visible;aspect-ratio:4/4.4;border-radius:var(--r-md);overflow:hidden;transition:none}
  .j-media,.j-layer.is-active .j-media{transform:none}
  .j-cap{transform:none;opacity:1}
  .svc-grid{grid-template-columns:1fr}
  .why-grid,.about-grid{grid-template-columns:1fr}
  .why-head{position:static}
  .contact-rows{grid-template-columns:1fr}
  .c-row+.c-row{border-left:0;border-top:1px solid var(--line-d)}
  .foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  h2{font-size:32px;line-height:1.18}
  .hero-ctas{width:100%;gap:12px}
  .hero-ctas .btn{flex:1 1 100%}
  .hero h1{font-size:34px;line-height:1.22}
  .hero .lead{font-size:16px;margin-top:20px}
  .hero-pill{font-size:12.5px;padding:7px 14px;margin-bottom:22px}
  .hero-toggle{right:20px;bottom:20px;width:40px;height:40px}
  .hero-scroll{display:none}
  .values{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
  .values li{font-size:17px}
  .j-layer,.j-layer.is-active{aspect-ratio:4/5}
  .j-cap h3{font-size:26px}
  .j-cap p{font-size:15px}
  .svc{padding:36px 4px 40px}
  .svc:hover{padding-left:20px;padding-right:20px}
  .how-steps{grid-template-columns:1fr;row-gap:44px}
  .facts div{grid-template-columns:88px 1fr;gap:16px}
  .facts dd{font-size:16px}
  .contact-box{border-radius:var(--r-md)}
  .c-row{padding:18px 4px}
  .foot{grid-template-columns:1fr 1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-inner,.hero-scroll span{animation:none!important}
  .hero-video{display:none}
  .j-layer,.j-media,.j-cap,.j-rail i{transition:none!important}
}
.reduce-motion .hero-video{display:none}

/* ===== globe ===== */
.globe-sec{position:relative;overflow:hidden;color:#fff;padding:clamp(80px,9vw,140px) 0;
  background:radial-gradient(900px 700px at 30% 50%,#0e3a2b 0%,#08211a 42%,#050f0b 75%,#040c09 100%)}
.globe-sec::before{content:"";position:absolute;inset:0 0 auto 0;height:220px;background:linear-gradient(180deg,var(--ink),rgba(11,26,20,0));pointer-events:none;z-index:0}
.globe-sec::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(180deg,transparent,rgba(4,12,9,.6));pointer-events:none}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;inset:0;background-repeat:repeat}
.stars i:nth-child(1){background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 140px 90px,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 260px 170px,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 90px 230px,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 300px 40px,rgba(255,255,255,.25),transparent);background-size:340px 280px;opacity:.7}
.stars i:nth-child(2){background-image:radial-gradient(1.4px 1.4px at 60px 120px,rgba(220,255,200,.7),transparent),radial-gradient(1.2px 1.2px at 410px 60px,rgba(255,255,255,.55),transparent),radial-gradient(1.2px 1.2px at 230px 330px,rgba(255,255,255,.5),transparent);background-size:520px 420px;animation:twinkle 6s ease-in-out infinite}
.stars i:nth-child(3){background-image:radial-gradient(1px 1px at 180px 200px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 520px 330px,rgba(255,255,255,.45),transparent),radial-gradient(1.6px 1.6px at 380px 520px,rgba(200,245,96,.55),transparent);background-size:640px 600px;animation:twinkle 9s ease-in-out infinite -3s}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
.globe-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.globe-stage{position:relative;margin-left:-110px}
.globe-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:780px;cursor:grab;touch-action:pan-y}
.globe-wrap.grabbing{cursor:grabbing}
.globe-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
.globe-wrap.ready .globe-canvas{opacity:1}
.globe-fallback{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1b5a44,#0a2a20 60%,#06160f);box-shadow:0 0 80px 10px rgba(92,242,176,.18);transition:opacity .8s}
.globe-wrap.ready .globe-fallback{opacity:0}
.ticker{position:absolute;right:2%;bottom:12%;z-index:2;min-width:230px;padding:16px 18px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 20px 60px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.tk-top{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.tk-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(200,245,96,.6);animation:tkPulse 1.8s ease-out infinite}
@keyframes tkPulse{0%{box-shadow:0 0 0 0 rgba(200,245,96,.55)}100%{box-shadow:0 0 0 9px rgba(200,245,96,0)}}
.tk-tag{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:1px 8px}
.tk-route{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-top:8px;white-space:nowrap}
.tk-arr{color:var(--lime);margin:0 10px;font-weight:600}
.tk-sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:2px}
.ticker.swap .tk-route,.ticker.swap .tk-sub{animation:tkIn .6s var(--ease)}
@keyframes tkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.globe-copy h2{font-size:clamp(40px,5vw,72px)}
.globe-copy .lead{color:rgba(255,255,255,.7)}
.globe-points{list-style:none;margin-top:44px;border-top:1px solid var(--line-d)}
.globe-points li{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-d)}
.globe-points strong{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.globe-points strong::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.globe-points span{font-size:15px;color:rgba(255,255,255,.6)}
@media (max-width:900px){
  .globe-grid{grid-template-columns:1fr;gap:8px}
  .globe-stage{margin:0 -20px}
  .globe-wrap{max-width:560px;margin:0 auto}
  .ticker{right:50%;transform:translateX(50%);bottom:-6px}
  .globe-stage{padding-bottom:40px}
  .globe-points li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:560px){
  .globe-sec{padding:64px 0 88px}
  .globe-copy{margin-top:28px}
  .globe-copy h2{font-size:36px}
  .ticker{min-width:0;width:calc(100% - 80px);max-width:270px;padding:13px 16px}
  .tk-route{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.stars i,.tk-dot,.ticker.swap .tk-route,.ticker.swap .tk-sub{animation:none!important}.globe-canvas{transition:none}}

/* ===== display serif retune (Noto Serif SC Black): serifs want a touch more air than the tight grotesk ===== */
h1,h2,h3{font-weight:900}
h2{letter-spacing:-.012em;line-height:1.16}
.hero h1{letter-spacing:-.01em;line-height:1.14}
.intro-head{font-weight:900;letter-spacing:-.012em;line-height:1.16}
.intro-head .wm{font-family:inherit;font-weight:900;letter-spacing:-.02em;margin-right:0}
.intro-head .g-d{width:.26em}
.intro-sub{font-family:"Vaylo Serif Text",var(--font);font-weight:300;letter-spacing:.01em;line-height:1.75}
.j-txt strong{font-weight:900;letter-spacing:0}
.j-cap h3{letter-spacing:-.005em}
.v-card h3,.svc h3,.how-step h3,.why h3{font-weight:900;letter-spacing:0}
@media (max-width:560px){
  h2{line-height:1.22;letter-spacing:-.005em}
  .hero h1{line-height:1.26}
  .intro-head{line-height:1.2;letter-spacing:-.005em}
}