/*
Theme Name: Ronas Network
Theme URI: https://ronasnetwork.com/
Author: Ronas Network & Services
Description: Custom theme for ronasnetwork.com: a scroll-driven 3D journey through a company network, with blog templates in the same style.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: ronas
*/

/* base reset */
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: a fixed full-screen WebGL world; the page scrolls over it in chapters, each chapter flies the camera to one zone of a company network, then solid sections follow. Single deliberate dark look. */
:root{
  --bg:#061018;
  --bg-2:#0B1B26;
  --panel:rgba(6,16,24,.66);
  --ink:#E8EEF2;
  --ink-dim:#A3B5C2;
  --amber:#FFB547;
  --ice:#8FD3FF;
  --threat:#FF6257;
  --line:rgba(143,211,255,.2);
  --pill:#E6ECEF;
  --pill-ink:#061018;
  --f-display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));overflow-x:hidden}
a{color:var(--amber)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{text-wrap:balance}

#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.no-webgl #scene{display:none}
.no-webgl body{background:radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg))}
.veil{position:fixed;inset:0;background:var(--bg);opacity:0;pointer-events:none;z-index:1}

/* top bar: brand left, navigation drawn as a network route with a packet marking where you are */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:calc(14px + env(safe-area-inset-top, 0px));padding-bottom:34px;padding-left:max(20px, calc(env(safe-area-inset-left, 0px) + 16px));padding-right:max(20px, calc(env(safe-area-inset-right, 0px) + 16px));background:linear-gradient(180deg, var(--bg) 0%, rgba(6,16,24,.82) 50%, rgba(6,16,24,0) 100%);pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
.mark{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--bg)}
/* Wi-Fi mark: the signal arcs light up outward from the amber source, then rest */
.wifi-mark path{opacity:.35;animation:wave 2.6s ease-in-out infinite}
.wifi-mark .a2{animation-delay:.25s}
.wifi-mark .a3{animation-delay:.5s}
@keyframes wave{0%,55%,100%{opacity:.35;stroke:#8FD3FF}15%,30%{opacity:1;stroke:#FFB547}}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font-family:var(--f-display);font-weight:800;font-size:25px;letter-spacing:.04em;text-transform:uppercase}
.wordmark small{font-family:var(--f-mono);font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-dim);margin-top:3px}
.route{position:relative;display:flex;align-items:center;gap:34px}
.route-line{position:absolute;top:50%;height:1px;background:var(--line);left:4px;right:4px}
.route a{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--ink-dim);text-decoration:none;font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color .25s}
.route a i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(143,211,255,.55);background:var(--bg);flex:0 0 auto;transition:transform .25s,border-color .25s}
.route a span{background:var(--bg);padding:2px 6px;margin-left:-6px;border-radius:4px}
.route a:hover,.route a[aria-current="true"],.route a[aria-current="page"]{color:var(--ink)}
.route a[aria-current="page"] i{background:var(--amber);border-color:var(--amber);box-shadow:0 0 10px rgba(255,181,71,.7)}
.route a:hover i{transform:scale(1.5);border-color:var(--amber)}
.packet{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,181,71,.18),0 0 18px 2px rgba(255,181,71,.6);transition:transform .7s cubic-bezier(.65,0,.25,1);pointer-events:none;z-index:1}
.help{min-height:44px;padding:0 20px;font-size:15px;white-space:nowrap}
@media (max-width:600px){.topbar .help{display:none}}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:rgba(6,16,24,.8);color:var(--ink);font:600 12.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-btn i{display:flex;flex-direction:column;gap:4px}
.menu-btn i::before,.menu-btn i::after{content:"";width:16px;height:1.5px;background:var(--amber);display:block}
@media (max-width:980px){.route{display:none}.topbar .help{margin-left:auto}.menu-btn{display:inline-flex}}
@media (min-width:981px){.chapter.right .card{margin-right:52px}}
.topbar .help{min-height:44px;padding:0 16px;font-size:14px;gap:8px}
@media (min-width:981px){.topbar .help{min-height:38px;padding:0 16px;font-size:13.5px}}

/* phone and tablet menu: the journey as a route map */
.menu-panel{position:fixed;inset:0;z-index:30;background:rgba(6,16,24,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-y:auto;padding-top:calc(18px + env(safe-area-inset-top, 0px));padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));padding-left:max(20px, calc(env(safe-area-inset-left, 0px) + 16px));padding-right:max(20px, calc(env(safe-area-inset-right, 0px) + 16px))}
.menu-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.menu-groups{display:flex;flex-wrap:wrap;gap:40px;margin-top:36px}
.menu-group{flex:1 1 280px;min-width:0}
.menu-group h2{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 10px}
.map{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--line)}
.map a{position:relative;display:flex;align-items:baseline;gap:14px;min-height:48px;padding:6px 0;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:30px;text-transform:uppercase;line-height:1.1}
.map a::before{content:"";position:absolute;left:-23px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ice)}
.map a:hover::before{background:var(--amber);border-color:var(--amber)}
.map a small{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--ink-dim);letter-spacing:.1em}

/* desktop zone rail: one stop per zone of the journey */
.rail{position:fixed;right:max(18px, calc(env(safe-area-inset-right, 0px) + 14px));top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:2px;transition:opacity .3s}
.rail::before{content:"";position:absolute;right:21px;top:22px;bottom:22px;width:1px;background:var(--line)}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;height:30px;text-decoration:none}
.rail a i{width:7px;height:7px;margin-right:18px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(143,211,255,.55);transition:transform .25s,background .25s,border-color .25s}
.rail a.on i{background:var(--amber);border-color:var(--amber);transform:scale(1.6);box-shadow:0 0 12px rgba(255,181,71,.7)}
.rail a span{position:absolute;right:48px;white-space:nowrap;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(6,16,24,.85);border:1px solid var(--line);border-radius:6px;padding:4px 10px;opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
@media (max-width:980px){.rail{display:none}}
@media (prefers-reduced-motion: reduce){.wifi-mark path{animation:none;opacity:1}.packet{transition:none}}

/* HUD */
.hud{position:fixed;left:max(20px, calc(env(safe-area-inset-left, 0px) + 16px));bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:5;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);display:flex;flex-direction:column;gap:8px;width:220px;pointer-events:none;transition:opacity .3s}
.hud strong{color:var(--ink);font-weight:600}
.hud-track{height:2px;background:var(--line);overflow:hidden}
.hud-bar{height:100%;background:var(--amber);transform-origin:left;transform:scaleX(0)}
@media (max-width:640px){.hud{display:none}}

main{position:relative;z-index:2}
.eyebrow{font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1240px;margin:0 auto;padding-block:120px 80px}
.hero h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(42px,6vw,96px);line-height:.92;letter-spacing:.005em;margin:20px 0 0;max-width:12.5em}
.hero h1 .amp{color:var(--ice);font-weight:700}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lede{font-size:clamp(17px,1.4vw,20px);max-width:32em;color:var(--ink);margin:26px 0 0;text-shadow:0 1px 18px rgba(6,16,24,.9)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:16px;border:0;cursor:pointer;font-family:var(--f-body)}
.btn-amber{background:var(--amber);color:var(--pill-ink)}
.btn-amber:hover{background:#FFC870}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:rgba(6,16,24,.4)}
.btn-ghost:hover{background:var(--ink);color:var(--pill-ink)}
.cue{margin-top:56px;display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.cue span.line{width:64px;height:1px;background:var(--line);position:relative;overflow:hidden}
.cue span.line::after{content:"";position:absolute;inset:0;background:var(--amber);transform:translateX(-100%);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{to{transform:translateX(100%)}}

/* chapters */
.chapter{min-height:130vh;display:flex;align-items:center;max-width:1240px;margin:0 auto}
.chapter.right{justify-content:flex-end}
.card{max-width:460px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:14px}
.card h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,4.2vw,56px);line-height:.92;letter-spacing:.005em;margin:0}
.card p{margin:0;color:var(--ink)}
.uses{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-dim);letter-spacing:.03em;border-top:1px solid var(--line);padding-top:12px}
.legend{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-dim)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
@media (max-width:640px){.chapter,.chapter.right{align-items:flex-end;justify-content:center;padding-block:0 10vh}.card{padding:20px;gap:10px}.card h2{font-size:clamp(28px,8vw,34px)}.card p{font-size:15.5px}.card .uses{font-size:11.5px}}
@media (max-width:420px){.map a{font-size:24px;min-height:44px}}

/* after the journey */
.after{position:relative;max-width:1240px;margin:0 auto;padding-block:40px 0;display:flex;flex-direction:column;gap:120px}
.block h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.2vw,58px);line-height:.95;margin:14px 0 0;max-width:15em}
.block .intro{max-width:36em;color:var(--ink-dim);font-size:19px;margin:18px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:44px}
.tile{background:rgba(9,22,32,.94);padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile .zone{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.tile h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:28px;line-height:1;margin:0}
.tile p{margin:0;color:var(--ink-dim)}
.tile .uses{margin-top:auto}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin-top:44px}
.step{border-top:2px solid var(--amber);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.step .n{font-family:var(--f-mono);font-size:13px;color:var(--amber);letter-spacing:.1em}
.step h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:32px;line-height:1;margin:0}
.step p{margin:0;color:var(--ink-dim)}
.ai{border:1px solid var(--amber);border-radius:20px;padding:clamp(28px,5vw,60px);background:linear-gradient(180deg, rgba(255,181,71,.10), rgba(6,16,24,.92) 60%);display:flex;flex-wrap:wrap;gap:40px}
.ai > div{flex:1 1 380px;min-width:0}
.ai ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ai li{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:rgba(6,16,24,.7)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pill-ink);background:var(--amber);border-radius:999px;padding:4px 12px}
.split{display:flex;flex-wrap:wrap;gap:48px}
.split > div{flex:1 1 420px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;background:rgba(9,22,32,.85)}
.flow{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;position:relative}
.flow::before{content:"";position:absolute;top:36px;left:16.66%;right:16.66%;height:1px;background:var(--line)}
.flow::after{content:"";position:absolute;top:31px;left:16.66%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px rgba(255,181,71,.8);animation:hop 4.5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hop{0%{left:16.66%;opacity:0}8%{opacity:1}45%,55%{left:50%}92%{opacity:1}100%{left:83.33%;opacity:0}}
.flow li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.flow-node{width:72px;height:72px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--amber);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-bottom:10px}
.flow h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.6vw,34px);line-height:1;margin:0}
.flow p{margin:0;color:var(--ink-dim)}
@media (max-width:640px){.flow{grid-template-columns:1fr;gap:20px}.flow::before,.flow::after{display:none}.flow li{flex-direction:row;text-align:left;gap:18px;flex-wrap:wrap}.flow-node{margin:0;width:60px;height:60px}.flow li h3{flex:1 1 60%}.flow li p{flex:1 1 100%;padding-left:78px;margin-top:-8px}}
.v-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.g-rating{margin:0;display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;padding:10px 20px;background:rgba(9,22,32,.9)}
.g-score{font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1}
.g-stars{color:var(--amber);font-size:18px;letter-spacing:2px}
.g-count{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin-top:40px}
.v-quote{margin:0;display:flex;flex-direction:column;gap:22px;padding:30px 30px 26px;border:1px solid var(--line);border-radius:16px;background:rgba(9,22,32,.9);min-width:0;transition:border-color .3s,transform .3s}
.v-quote:hover{border-color:rgba(255,181,71,.55);transform:translateY(-2px)}
.v-quote blockquote{margin:0;position:relative;padding-top:34px}
.v-quote blockquote::before{content:"\201C";position:absolute;top:-10px;left:-2px;font-family:Georgia,"Times New Roman",serif;font-size:76px;line-height:1;color:var(--amber)}
.v-quote p{margin:0;font-size:clamp(18px,1.5vw,20px);line-height:1.55;font-weight:500;color:var(--ink);text-wrap:pretty}
.v-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.v-av{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:600;font-size:14px;color:var(--amber);flex:0 0 auto}
.v-quote figcaption b{display:block;font-size:17px}
.v-quote figcaption small{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-top:2px}
@media (prefers-reduced-motion: reduce){.v-quote{transition:none}.v-quote:hover{transform:none}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{display:flex;flex-direction:column;gap:6px;padding:26px 24px 26px 0;min-width:0}
.fact + .fact{border-left:1px solid var(--line);padding-left:24px}
.fact-k{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.fact-v{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,3.4vw,44px);line-height:1;color:var(--ink);letter-spacing:.02em}
.facts{grid-template-columns:minmax(220px,1fr) minmax(0,2fr)}
.countries{display:grid;grid-template-columns:repeat(3,max-content);gap:14px 44px;margin-top:2px}
@media (max-width:520px){.countries{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}.countries .cname{font-size:10.5px;letter-spacing:.05em}}
.country{display:flex;flex-direction:column;gap:6px}
.cname{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.marquee{margin-top:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{display:flex;width:max-content;animation:marq 48s linear infinite}
.marquee-row.rev{animation-direction:reverse;animation-duration:56s}
.marquee:hover .marquee-row{animation-play-state:paused}
.m-track{list-style:none;margin:0;padding:0 12px 0 0;display:flex;gap:12px}
.m-track{gap:0}
.m-track li{display:inline-flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}
.marquee-row{animation-duration:70s}
.m-track li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.marquee{-webkit-mask-image:none;mask-image:none}.marquee-row{animation:none;width:auto}.marquee-row .m-track{flex-wrap:wrap}.marquee-row .m-track[aria-hidden]{display:none}}
@media (max-width:760px){.fact + .fact{border-left:0;padding-left:0;border-top:1px solid var(--line)}}
.stack{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stack li{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:10px 18px;background:rgba(9,22,32,.85);font-weight:600}
.stack li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 8px rgba(143,211,255,.7)}
.scan-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;border:1px solid var(--line);border-radius:16px;padding:26px 30px;background:rgba(9,22,32,.92)}
.scan-strip > div{flex:1 1 380px;min-width:0}
.scan-strip h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.8vw,36px);line-height:1;margin:8px 0 0}
@media (prefers-reduced-motion: reduce){.flow::after{animation:none;display:none}}
.contact{border:1px solid var(--line);border-radius:20px;background:rgba(9,22,32,.94);padding:clamp(28px,5vw,60px);display:flex;flex-wrap:wrap;gap:48px}
.contact > div{flex:1 1 360px;min-width:0}
.channels{display:flex;flex-direction:column;gap:12px}
.contact > .channels{flex:1.5 1 440px}
.channel{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg)}
.channel.wa{border-color:var(--amber);background:rgba(255,181,71,.07)}
.ch-icon{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ice);flex:0 0 auto}
.channel.wa .ch-icon{color:var(--amber);border-color:var(--amber)}
.ch-body{flex:1 0 min(270px, 100%);min-width:0}
#v-email{font-size:clamp(19px,1.7vw,24px)}
@media (min-width:521px){.ch-body{flex:1 0 auto}.ch-value{white-space:nowrap}}
.ch-label{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.ch-value{margin:2px 0 0;font-family:var(--f-display);font-weight:800;font-size:clamp(21px,2vw,26px);letter-spacing:.02em;user-select:all;overflow-wrap:anywhere}
.ch-actions{display:flex;flex-wrap:wrap;gap:8px}
.ch-actions .btn{min-height:44px;padding:0 18px;font-size:15px}
.contact dl{margin:28px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px}
.contact dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);padding-top:3px}
.contact dd{margin:0;user-select:all}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
input,textarea{min-height:46px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--bg);color:var(--ink);font:400 16px var(--f-body)}
textarea{resize:vertical}
.status{font-family:var(--f-mono);font-size:13px;color:var(--ice);min-height:1.4em;margin:0}
footer{border-top:1px solid var(--line);padding-block:36px 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;color:var(--ink-dim);font-size:15px}
footer .socials{display:flex;flex-wrap:wrap;gap:4px 18px}
footer .socials a{display:inline-flex;align-items:center;min-height:44px}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.cue span.line::after{animation:none}}

/* ---------- site chrome outside the journey ---------- */
body:not(.home) .packet{display:none}
body.admin-bar .topbar{top:32px}
@media (max-width:782px){body.admin-bar .topbar{top:46px}}
.page-wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding-block:150px 80px}
.page-head h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,84px);line-height:.92;margin:14px 0 0;max-width:14em}
.page-head .intro{max-width:36em;color:var(--ink-dim);font-size:19px;margin:18px 0 0}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;margin-top:48px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(9,22,32,.92);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s;min-width:0}
.post-card:hover{border-color:rgba(255,181,71,.55);transform:translateY(-2px)}
.post-card img,.pc-noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.pc-noimg{background:radial-gradient(120% 120% at 20% 0%,rgba(143,211,255,.18),transparent 60%),radial-gradient(80% 80% at 90% 100%,rgba(255,181,71,.16),transparent 60%),var(--bg-2)}
.pc-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px}
.pc-date{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.post-card h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.02;margin:0}
.post-card p{margin:0;color:var(--ink-dim);font-size:15.5px}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:40px}
.article{position:relative;z-index:2;max-width:760px;margin:0 auto;padding-block:150px 80px}
.article .back{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.article h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,5.2vw,64px);line-height:.95;margin:18px 0 0}
.article .meta{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin:16px 0 0}
.article .hero-img{display:block;width:100%;border-radius:16px;margin:32px 0 8px;border:1px solid var(--line)}
.prose{font-size:18px;line-height:1.75;color:var(--ink);margin-top:28px;overflow-wrap:break-word}
.prose > *{max-width:100%}
.prose p{margin:0 0 1.2em}
.prose h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3vw,36px);line-height:1;margin:1.8em 0 .6em}
.prose h3,.prose h4{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1.05;margin:1.6em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose img{border-radius:12px}
.prose figure{margin:1.6em 0}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--amber);color:var(--ink-dim)}
.prose table{display:block;overflow-x:auto;border-collapse:collapse}
.prose td,.prose th{border:1px solid var(--line);padding:8px 12px}
.prose code{font-family:var(--f-mono);font-size:.9em}
.post-cta{margin-top:56px;border:1px solid var(--amber);border-radius:16px;padding:28px;background:rgba(255,181,71,.07);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.post-cta p{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.05;max-width:18em}
.site-footer{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.notfound{position:relative;z-index:2;max-width:1240px;margin:0 auto;min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding-block:140px 80px}
.notfound h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(56px,10vw,140px);line-height:.88;margin:14px 0 0}

/* ---------- Insights: filters, cards, article extras ---------- */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.cat-filter a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);text-decoration:none;font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(9,22,32,.85);transition:color .2s,border-color .2s}
.cat-filter a span{color:var(--ink-dim);opacity:.7;font-weight:500}
.cat-filter a:hover{color:var(--ink);border-color:rgba(143,211,255,.5)}
.cat-filter a[aria-current="page"]{color:var(--pill-ink);background:var(--amber);border-color:var(--amber)}
.cat-filter a[aria-current="page"] span{color:var(--pill-ink)}
.pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pc-cat{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.pc-new{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pill-ink);background:var(--amber);border-radius:999px;padding:3px 10px}
.pc-more{margin-top:auto;padding-top:6px;font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.post-card .pc-body{flex:1}
.post-card.lead{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.post-card.lead img,.post-card.lead .pc-noimg{height:100%;aspect-ratio:auto;min-height:320px}
.post-card.lead .pc-body{padding:34px 36px;justify-content:center;gap:14px}
.post-card.lead h2{font-size:clamp(30px,3vw,42px);line-height:.98}
.post-card.lead p{font-size:17px}
@media (max-width:820px){.post-card.lead{display:flex}.post-card.lead img,.post-card.lead .pc-noimg{aspect-ratio:16/9;min-height:0;height:auto}.post-card.lead .pc-body{padding:22px 24px 26px}}
.post-cta.wide{margin-top:64px}
.post-cta .cta-sub{display:block;margin-top:8px;font-family:var(--f-body);font-weight:400;font-size:16px;text-transform:none;color:var(--ink-dim);max-width:34em}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.crumbs span{color:var(--ink-dim)}
.article .standfirst{font-size:20px;line-height:1.55;color:var(--ink-dim);margin:22px 0 0}
.article .hero-img{aspect-ratio:16/9;object-fit:cover;height:auto}
.prose a{color:var(--amber)}
.prose .wp-block-image img{height:auto!important;max-width:100%}
.prose .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.prose .has-text-align-center{text-align:center}
.related{margin-top:72px;border-top:1px solid var(--line);padding-top:40px}
.related h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:32px;line-height:1;margin:0 0 22px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px}
.related-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(9,22,32,.92);color:var(--ink);text-decoration:none;padding-bottom:16px;transition:border-color .3s}
.related-card:hover{border-color:rgba(255,181,71,.55)}
.related-card img,.related-card .pc-noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.rc-date{padding:0 16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.rc-title{padding:0 16px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.05}

/* ---------- languages ---------- */
.top-actions{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;align-items:center;gap:2px;font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:0 8px;border-radius:999px;color:var(--ink-dim);text-decoration:none;transition:color .2s,background .2s}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current="page"]{color:var(--amber);background:rgba(255,181,71,.1)}
.lang-switch a + a{position:relative}
.menu-lang{margin-top:26px;gap:8px;font-size:13px}
.menu-lang a{min-height:44px;min-width:52px;border:1px solid var(--line)}
@media (max-width:980px){.topbar .top-actions{margin-left:auto}}
@media (max-width:600px){.topbar .lang-switch{display:none}}
@media (min-width:981px){.menu-lang{display:none}}
@media (min-width:981px) and (max-width:1180px){.route{gap:24px}.route a{letter-spacing:.1em}}
body.lang-ms .route a{letter-spacing:.08em}
@media (min-width:981px) and (max-width:1180px){body.lang-ms .route{gap:16px}body.lang-ms .route a{font-size:11.5px;letter-spacing:.04em}}

/* Chinese: system CJK fonts behind the Latin ones, calmer spacing, taller lines */
html[lang^="zh"]{
  --f-display:"Big Shoulders Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --f-body:"Hanken Grotesk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",Arial,sans-serif;
  --f-mono:"JetBrains Mono","PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",ui-monospace,monospace;
}
html[lang^="zh"] body{line-height:1.75}
html[lang^="zh"] .hero h1{font-size:clamp(36px,5vw,76px);line-height:1.18;letter-spacing:.02em;max-width:11em}
html[lang^="zh"] .card h2,html[lang^="zh"] .block h2{line-height:1.22;letter-spacing:.02em}
html[lang^="zh"] .card h2{font-size:clamp(28px,3.2vw,44px)}
html[lang^="zh"] .block h2{font-size:clamp(28px,3.4vw,46px)}
html[lang^="zh"] .tile h3,html[lang^="zh"] .flow h3,html[lang^="zh"] .step h3{line-height:1.25;font-size:24px}
html[lang^="zh"] .map a{font-size:26px;line-height:1.3}
html[lang^="zh"] .m-track li{letter-spacing:.06em}
html[lang^="zh"] .eyebrow,html[lang^="zh"] .route a,html[lang^="zh"] .menu-group h2,html[lang^="zh"] .cue,html[lang^="zh"] .fact-k,html[lang^="zh"] .ch-label,html[lang^="zh"] .cname,html[lang^="zh"] .hud{letter-spacing:.06em}
html[lang^="zh"] .route a{font-size:13.5px}
html[lang^="zh"] .card p,html[lang^="zh"] .block p{line-height:1.8}
html[lang^="zh"] blockquote[lang="en"]{font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;line-height:1.55}
/* Malay runs longer than English: keep big headlines from towering */
html[lang^="ms"] .hero h1{font-size:clamp(38px,5.4vw,86px)}
html[lang^="ms"] .card h2{font-size:clamp(32px,3.8vw,50px)}
@media (min-width:981px) and (max-width:1180px){.topbar{gap:14px}.top-actions{gap:8px}.lang-switch a{min-width:32px;padding:0 6px}}
html[lang^="zh"] .hero h1 em{white-space:nowrap}
html[lang^="zh"] p{text-wrap:pretty}
/* touch screens: every tap target at least 44px; tablets in landscape use the menu, leaving room for bigger targets */
@media (pointer:coarse){.lang-switch a{min-height:44px;min-width:44px}.topbar .help{min-height:44px}.rail a{height:44px}}
@media (pointer:coarse) and (max-width:1180px){.route{display:none}.topbar .top-actions{margin-left:auto}.topbar .menu-btn{display:inline-flex}.menu-lang{display:flex}}