/* Self-hosted variable fonts (latin). */
@font-face{font-family:'Nunito';src:url(fonts/Nunito-var.woff2) format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url(fonts/NunitoSans-var.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url(fonts/NunitoSans-italic-var.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-var.woff2) format('woff2');font-weight:400 600;font-display:swap}

/* base.css (mockups/src) */
/* YOZA homepage mockups. Tokens and components lifted from docs/sales/company-deck/deck.html (v5); web sizes from Brand Guidelines v3.0 §5–7. */
:root{
  --navy:#002454; --navy-deep:#0c2461; --navy-700:#001d44; --navy-900:#000f23; --royal:#1e3a8a;
  --blue:#2563eb; --blue-700:#1d4ed8; --sky:#93c5fd; --sky2:#60a5fa;
  --ink:#0f172a; --ink2:#334155; --ink3:#64748b; --line:#e2e8f0; --slate:#f8fafc; --tint:#eff6ff;
  --gold:#f59e0b; --ok:#15803d; --ok-soft:#f0fdf4;
  --hero:linear-gradient(135deg,#002454 0%,#0c2461 35%,#1e3a8a 70%,#2563eb 100%);
  --display:'Nunito',system-ui,sans-serif; --body:'Nunito Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px; --gut:24px; --sy:112px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink2);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.navy a:focus-visible,.hero a:focus-visible,.foot a:focus-visible{outline-color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--sy) 0;position:relative}
.slate{background:var(--slate)}
.navy{background:var(--navy);color:#c7d7f3}
.hero{background:radial-gradient(circle at 20% 30%,rgba(59,130,246,.28),transparent 40%),radial-gradient(circle at 80% 70%,rgba(59,130,246,.28),transparent 45%),var(--hero);color:#c7d7f3}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy);padding:10px 16px;border-radius:999px;z-index:99}
.skip:focus{left:16px}

/* type */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-bottom:18px}
.eyebrow .plain{color:var(--ink3);letter-spacing:.04em;text-transform:none}
.navy .eyebrow,.hero .eyebrow{color:var(--sky)}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.015em}
h1{font-weight:800;font-size:clamp(40px,5.6vw,76px);line-height:1.05}
h2{font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.12;max-width:20ch}
h3{font-weight:800;font-size:clamp(21px,2vw,25px);line-height:1.25}
.navy h1,.navy h2,.navy h3,.hero h1,.hero h2,.hero h3{color:#fff}
.ac{color:var(--blue)}
.navy .ac,.hero .ac{background:linear-gradient(120deg,#93c5fd,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--ink2);max-width:60ch}
.navy .lead,.hero .lead{color:#c7d7f3}
.mono{font-family:var(--mono)}
.sub{font-size:19px;color:var(--ink2);margin-top:14px;max-width:62ch}
.head{margin-bottom:48px}

/* chips, status */
.status,.illu{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;font-weight:600;white-space:nowrap;display:inline-block;line-height:1.4}
.st-av{background:var(--ok-soft);color:var(--ok);border:1px solid #bbf7d0}
.st-pilot{background:var(--tint);color:var(--blue);border:1px solid #bfdbfe}
.st-soon{background:#f1f5f9;color:#475569;border:1px solid var(--line)}
.illu{background:var(--tint);color:var(--blue);border:1px solid #bfdbfe}
.chip{display:inline-block;font-family:var(--mono);font-size:12.5px;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #bfdbfe;color:var(--blue);font-weight:600}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:17px;text-decoration:none;border:1.5px solid transparent;transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn.pri{background:var(--blue);color:#fff}
.btn.pri:hover{background:var(--blue-700);box-shadow:0 8px 20px rgba(37,99,235,.25)}
.btn.sec{border-color:var(--line);color:var(--ink);background:#fff}
.navy .btn.pri,.hero .btn.pri{background:#fff;color:var(--navy)}
.navy .btn.pri:hover,.hero .btn.pri:hover{background:var(--tint)}
.navy .btn.sec,.hero .btn.sec{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn svg{flex:none}
.btn small{font-family:var(--mono);font-weight:500;font-size:12.5px;opacity:.75}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.14em;color:var(--navy);text-decoration:none}
.logo img{height:28px;width:auto}
.top nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.top nav>a,.ddb{color:var(--ink2);text-decoration:none;font-weight:600;font-size:15px}
.top nav>a:hover,.ddb:hover{color:var(--blue)}
.ddb{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-family:var(--body);padding:8px 0}
.dd{position:relative}
.ddm{position:absolute;top:calc(100% + 16px);left:-24px;width:620px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 40px rgba(12,36,97,.10);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.dd:hover .ddm,.dd:focus-within .ddm,.dd.open .ddm{opacity:1;visibility:visible;transform:none}
.dd.open .ddb svg{transform:rotate(180deg)}
.ddi{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:14px;border-radius:14px;text-decoration:none;color:var(--ink2);transition:background .2s var(--ease)}
.ddi:hover{background:var(--tint)}
.ddi b{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)}
.ddi small{grid-column:1/-1;font-size:13.5px;line-height:1.45}
.ddall{grid-column:1/-1;padding:8px 14px 2px;font-weight:600;font-size:14px;text-decoration:none}
.menub{display:none;margin-left:auto;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:var(--display);font-weight:800;color:var(--ink);cursor:pointer}
.more{display:inline-block;margin-top:14px;font-weight:700;font-size:15px;text-decoration:none}
.more:hover{text-decoration:underline}
.navy .more,.hero .more{color:var(--sky)}
.push .more{margin-left:18px}
.door{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.door:hover{border-color:#bfdbfe;box-shadow:0 20px 40px rgba(12,36,97,.10)}
.islimg{position:relative;margin:0}
.islimg img{position:relative;width:100%;mix-blend-mode:multiply}
.islimg svg{position:absolute;inset:4%;width:92%;height:92%;opacity:.8}
.case .fits{font-size:16px;color:var(--ink2);margin-top:6px}
/* page transitions between yoza.co.id pages (cross-document View Transitions; ignored by browsers without support) */
@view-transition{navigation:auto}
.top{view-transition-name:site-header}
::view-transition-old(root){animation:.28s var(--ease) both vt-out}
::view-transition-new(root){animation:.45s var(--ease) both vt-in}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
.lang{font-family:var(--mono);font-size:13px;display:flex;gap:6px;color:var(--ink3)}
.lang b{color:var(--ink)}
.lang a{color:var(--ink3);text-decoration:none}
.top .btn{min-height:44px;padding:0 18px;font-size:15px}

/* story frame (deck v5): soft, round, feathered; never a card */
.story{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0}
.story .kick{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink3);display:flex;align-items:center;gap:10px;text-transform:uppercase;white-space:nowrap;margin-bottom:18px}
.trail{display:flex;gap:5px;align-items:center}
.trail i{width:6px;height:6px;border-radius:50%;border:1px solid #b6c6de;display:block}
.trail i.p{background:#b6c6de}
.trail i.c{background:var(--blue);border-color:var(--blue);width:8px;height:8px;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.story .orb{position:relative;width:var(--d,240px);height:var(--d,240px);flex:none}
.story .orb::before{content:"";position:absolute;inset:-32px;border-radius:50%;background:radial-gradient(circle,rgba(147,197,253,.38) 0%,rgba(147,197,253,.12) 45%,transparent 70%)}
.story .orb img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 50%,rgba(0,0,0,.55) 61%,transparent 70.5%);
          mask-image:radial-gradient(circle at 50% 50%,#000 50%,rgba(0,0,0,.55) 61%,transparent 70.5%)}
.story .orb svg{position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);transform:rotate(var(--rot,-30deg));overflow:visible}
.story .cap{margin-top:14px;font-style:italic;font-weight:300;font-size:18px;line-height:1.4;color:var(--ink2);text-align:center;max-width:280px}
.story .cap b{display:block;font-family:var(--mono);font-style:normal;font-weight:600;font-size:11.5px;letter-spacing:.22em;color:var(--blue);margin-bottom:2px}
.navy .story .kick,.hero .story .kick{color:rgba(191,214,250,.8)}
.navy .trail i,.hero .trail i{border-color:rgba(147,197,253,.5)}
.navy .trail i.p,.hero .trail i.p{background:rgba(147,197,253,.5)}
.navy .trail i.c,.hero .trail i.c{background:#fff;border-color:#fff;box-shadow:0 0 0 3px rgba(147,197,253,.25)}
.navy .story .orb::before,.hero .story .orb::before{background:radial-gradient(circle,rgba(191,219,254,.30) 0%,rgba(147,197,253,.10) 45%,transparent 70%)}
.navy .story .cap,.hero .story .cap{color:rgba(219,231,251,.88)}
.navy .story .cap b,.hero .story .cap b{color:var(--sky)}

/* credibility strip */
.cred{padding:36px 0;border-bottom:1px solid var(--line)}
.cred .wrap{display:grid;grid-template-columns:auto 1fr;gap:20px 36px;align-items:center}
.cred .me{display:flex;align-items:center;gap:16px}
.cred .me img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 0 5px #fff,0 0 0 6px #bfdbfe}
.cred .me b{display:block;font-family:var(--display);font-weight:800;color:var(--ink);font-size:17px;line-height:1.2}
.cred .me span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--blue)}
.cred .recs{display:grid;grid-template-columns:repeat(3,auto);gap:10px 28px;align-items:center;justify-content:start}
.cred .rec{font-family:var(--display);font-weight:800;font-size:15px;line-height:1.3;color:var(--navy);text-decoration:none;display:flex;gap:8px;align-items:center}
.cred .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sky2)}
.cred .rec:hover{color:var(--blue)}
.cred .also{grid-column:2;font-family:var(--mono);font-size:12.5px;color:var(--ink3);line-height:1.6}
.cred .also b{color:var(--ink2)}
.cred .also a{margin-left:8px;white-space:nowrap}

/* season */
.wins{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.win{border-radius:16px;padding:28px 24px;background:linear-gradient(180deg,rgba(147,197,253,.10),rgba(147,197,253,.03));border:1px solid rgba(147,197,253,.22);position:relative}
.win::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,rgba(191,219,254,0),rgba(191,219,254,.75),rgba(191,219,254,0))}
.win .n{font-family:var(--mono);font-size:12.5px;color:var(--sky);letter-spacing:.14em}
.win h3{font-size:21px;margin:10px 0 8px}
.win p{font-size:16px;line-height:1.55;color:#b9cbea}
.bottomline{margin-top:40px;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:#fff}
.bottomline em{font-style:normal;color:var(--sky)}
.note{font-style:italic;font-weight:300;font-size:20px;color:#b9cbea;margin-top:18px}

/* islands */
.isl .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.sea{position:relative;height:440px;border-radius:28px;background:radial-gradient(ellipse at 50% 55%,#e3eefc,#f3f8ff 60%,#fff 100%)}
.sea svg{position:absolute;inset:0;width:100%;height:100%}
.islet{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.islet .land{width:150px;height:52px;border-radius:48% 52% 45% 55%/62% 58% 42% 38%;background:radial-gradient(ellipse at 50% 30%,#e3edfc 0%,#bcd1f1 55%,#9ab6e4 100%);box-shadow:0 0 0 8px rgba(147,197,253,.20),0 0 0 18px rgba(147,197,253,.08)}
.islet .chip{position:relative;z-index:2;margin-bottom:-22px;font-family:var(--mono);font-size:13px;padding:7px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 4px 14px rgba(15,23,42,.06);white-space:nowrap;font-weight:500}
.isl .body>p{font-size:19px;line-height:1.6}
.gap{margin-top:28px}
.gap h3,.kl{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--ink3);font-weight:500;margin-bottom:8px;text-transform:uppercase}
.g{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line);align-items:baseline}
.g:last-child{border-bottom:1px solid var(--line)}
.g b{font-family:var(--display);font-weight:800;font-size:19px;color:var(--navy)}
.g span{font-size:16.5px;line-height:1.5}
.stat{margin-top:28px;padding:22px 24px;border-radius:16px;background:var(--slate);border:1px solid var(--line)}
.stat .big{display:flex;gap:32px}
.stat .big div{font-family:var(--display);font-weight:800;font-size:46px;color:var(--navy);line-height:1}
.stat .big small{display:block;font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ink2);margin-top:8px;line-height:1.4;max-width:240px}
.stat .src{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--ink3)}

/* one island */
.one .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.map img{width:100%;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
.map .mapcap{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink3);text-align:center;margin-top:4px}
.zone{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 16px;border-top:1px solid var(--line);position:relative}
.zone:last-child{border-bottom:1px solid var(--line)}
.zone .zl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;padding-top:5px}
.zone .zl em{display:block;font-style:normal;color:var(--blue);font-weight:600;margin-top:3px}
.zone .zt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zone .zt b{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink)}
.zone .zline{font-size:16px;margin-top:2px}
.zone .ztech{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:4px;line-height:1.5}
.zone .assist{font-family:var(--mono);font-size:11.5px;color:var(--blue);margin-top:6px}
.mrk{display:flex;margin-top:8px;gap:12px}
.mrk span{position:relative;flex:1;padding:5px 8px 5px 10px;font-family:var(--mono);font-size:11px;color:var(--ink3);background:#fff;border:1px solid #bfdbfe;border-radius:8px;line-height:1.35}
.mrk span:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:11px;border-top:2px solid var(--sky2)}
.mrk b{display:block;font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy)}
.zone.grow{background:linear-gradient(90deg,var(--tint),transparent 80%);border-left:3px solid var(--blue)}
.bed{margin-top:40px;border-radius:14px;background:var(--navy);color:#dbe7fb;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 22px;font-size:15px}
.bed b{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--sky);font-weight:600}
.bed i{font-style:normal;font-family:var(--display);font-weight:800;color:#fff;margin-left:auto}

/* growth */
.growth .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.omap{padding:24px 26px}
.omap .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.omap .hd b{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
.omap table{width:100%;border-collapse:collapse}
.omap th{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.omap td{font-size:15.5px;padding:11px 10px;border-bottom:1px solid var(--line)}
.omap td:first-child{font-family:var(--display);font-weight:800;color:var(--ink);white-space:nowrap}
.omap tr:nth-child(2) td{background:var(--tint)}
.omap .rk{font-family:var(--mono);font-size:12px;color:var(--blue);margin-right:8px}
.conf{font-family:var(--mono);font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.conf.h{color:var(--ok);background:var(--ok-soft);border-color:#bbf7d0}
.steps{display:grid;gap:18px}
.step{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:baseline}
.step b{font-family:var(--display);font-weight:800;font-size:24px;color:var(--blue)}
.step p{font-size:17px;line-height:1.55}
.lighter{margin-top:28px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy);line-height:1.4;padding-left:18px;border-left:3px solid var(--sky2)}
.runs{margin-top:28px;font-family:var(--mono);font-size:13px;color:var(--ink3);line-height:1.7}
.runs b{color:var(--ink2);font-weight:600;letter-spacing:.14em;margin-right:8px}

/* products */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.door{padding:30px 28px;display:flex;flex-direction:column}
.door .dc{display:flex;flex-direction:column;flex:1}
.door .eyebrow{margin-bottom:12px}
.door h3{margin-bottom:12px}
.door .intro{font-weight:600;color:var(--ink);font-size:16px}
.door ul{list-style:none;display:grid;gap:10px;margin:14px 0}
.door li{font-size:15.5px;line-height:1.5;padding:12px 14px 12px 44px;position:relative;border-radius:12px;background:var(--slate);border:1px solid var(--line)}
.door li::before{content:attr(data-n);position:absolute;left:14px;top:13px;font-family:var(--mono);font-size:12.5px;color:var(--blue);font-weight:600}
.door li b{color:var(--ink)}
.door .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.door .tags i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--blue);padding:2px 9px;border-radius:999px;background:#fff;border:1px solid #bfdbfe}
.door .fact{align-self:flex-start;font-family:var(--mono);font-size:12.5px;color:var(--ink2);padding:8px 12px;border-radius:10px;border:1px solid var(--line);align-self:flex-start}
.door .btn{margin-top:auto;align-self:flex-start}
.door .push{margin-top:auto;padding-top:18px}
.bound{margin-top:6px;padding:14px 16px;border-radius:12px;border:1px solid #cbd5e1;background:var(--slate);font-size:14.5px;color:var(--ink);line-height:1.5}
.bound b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink3);margin-bottom:4px}
.pk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.pk .kl{margin:0 4px 0 0}
.pkg{font-family:var(--display);font-weight:800;font-size:14px;color:var(--navy);padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
.pil{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line)}
.pil b{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--ink)}
.pil p{grid-column:1/-1;font-size:14.5px;line-height:1.45}
.peek{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;margin-top:14px;padding:14px;border-radius:14px;background:var(--slate);border:1px solid var(--line)}
.peek img{border-radius:16px;border:4px solid #0f172a}
.peek p{font-size:14px;line-height:1.5}
.peek .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bline{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--navy)}

/* proof */
.rhythm{display:flex;align-items:center;margin:22px 0 8px;max-width:760px}
.rhythm .p{font-family:var(--mono);font-size:14px;color:var(--navy);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:8px}
.rhythm .p i{width:10px;height:10px;border-radius:50%;background:var(--blue)}
.rhythm .p:nth-child(3) i{background:var(--sky2)}.rhythm .p:nth-child(5) i{background:var(--sky)}
.rhythm .l{flex:1;height:2px;background:linear-gradient(90deg,var(--blue),var(--sky));margin:0 14px;min-width:24px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pc{padding:26px 24px}
.pc .n{font-family:var(--mono);font-size:12.5px;color:var(--blue);letter-spacing:.12em;font-weight:600}
.pc h3{font-size:21px;margin:10px 0 8px}
.pc p{font-size:15.5px;line-height:1.55}
.terms{margin-top:28px;padding:22px 26px;border-radius:16px;background:var(--navy);display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;max-width:900px}
.terms b{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--sky)}
.terms p{font-size:18px;line-height:1.5;color:#fff}

/* hire */
.hire .top2{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:40px}
.hire .face{display:flex;align-items:center;gap:14px}
.hire .face img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 0 6px #fff,0 0 0 7px #bfdbfe}
.hire .face b{display:block;font-family:var(--display);font-weight:800;color:var(--ink)}
.hire .face span{font-size:14px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.col{padding:26px 28px 14px}
.col h3{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--blue);text-transform:uppercase;margin-bottom:4px;font-weight:600}
.col h3 span{color:var(--ink3);font-weight:400;letter-spacing:.04em;text-transform:none}
.it{padding:13px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.it:first-of-type{border-top:none}
.it b{color:var(--ink);font-family:var(--display);font-weight:800;font-size:17px}
.tools{margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--ink3)}
.tools b{color:var(--ink2);letter-spacing:.14em;margin-right:8px}
.vals{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.val{padding:16px 18px;border-radius:14px;background:var(--navy);color:#c7d7f3;font-size:14.5px;line-height:1.45}
.val b{display:block;color:#fff;font-family:var(--display);font-weight:800;font-size:16px;margin-bottom:4px}
.hire .end{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.hire .end span{font-family:var(--display);font-weight:700;color:var(--blue)}

/* about */
.about h2{max-width:26ch}
.about .grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.about .me img{width:100%;max-width:260px;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 0 9px #fff,0 0 0 10px #bfdbfe}
.about .me .nm{margin-top:26px;font-family:var(--display);font-weight:800;font-size:26px;color:var(--ink)}
.about .me .rl{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-top:4px}
.about .me .ln{margin-top:14px;font-size:17px}
.about .me .so{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--display);font-weight:700;font-style:italic;font-size:19px;color:var(--navy)}
.tiles{display:grid;grid-template-columns:1.15fr 1.05fr 1fr;gap:14px;height:210px}
.tile{position:relative;border-radius:16px;overflow:hidden;display:block;text-decoration:none;background:var(--navy)}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,84,.05) 25%,rgba(0,36,84,.94) 100%)}
.tile .t{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;color:#fff}
.tile .t b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--sky);font-weight:600}
.tile .t span{display:block;font-size:14.5px;line-height:1.3;margin-top:3px;font-weight:600}
.tile .go{position:absolute;right:12px;top:10px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#fff;background:rgba(0,36,84,.6);border:1px solid rgba(255,255,255,.3);padding:3px 9px;border-radius:999px}
.about .also{margin:12px 0 28px;font-family:var(--mono);font-size:12.5px;color:var(--ink3)}
.about .also b{color:var(--ink2)}
.row{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:12px 0 12px 16px;border-top:1px solid var(--line);align-items:baseline}
.row.hi{border-left:3px solid var(--blue);padding-left:13px;background:linear-gradient(90deg,var(--tint),transparent 70%)}
.row .co{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);line-height:1.2}
.row .co small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.row p{font-size:15.5px;line-height:1.5}
.row p strong{color:var(--ink)}
.row .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.row .fn{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:6px}
.clients{margin-top:24px;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--ink3)}
.clients b{display:block;color:var(--ink2);font-weight:600;letter-spacing:.14em;font-size:11.5px}

/* case */
.case .box{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:30px 32px}
.case .box p{font-size:18px;color:var(--ink)}
.case .box small{display:block;font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:6px}

/* faq */
.faq .grid{display:grid;grid-template-columns:1fr 1.6fr;gap:56px}
details{border-top:1px solid var(--line);padding:4px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:10px;height:10px;margin-top:7px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .25s var(--ease)}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 0 18px;font-size:16px;max-width:62ch}

/* final cta */
.cta .path{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 32px}
.ps{padding:22px 24px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.ps .n{font-family:var(--mono);font-size:12.5px;color:var(--sky);letter-spacing:.12em}
.ps h3{font-size:20px;margin:6px 0}
.ps p{font-size:15.5px;line-height:1.5;color:#c7d7f3}
.contact{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:14px}
.contact .btn{justify-content:flex-start;min-height:64px;font-size:17px}
.contact .bt{display:flex;flex-direction:column;line-height:1.25}
.contact .bt small{margin-top:2px}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.socials .btn{min-height:48px;font-size:15px;padding:0 20px}
.socials .btn.s3{border-color:rgba(255,255,255,.22);color:#dbe7fb;font-size:14px;min-height:44px}
.legacy{margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.legacy p{font-style:italic;font-weight:300;font-size:19px;line-height:1.6;color:#dbe7fb;max-width:64ch}
.legacy .illu{margin-bottom:12px;background:rgba(255,255,255,.08);color:var(--sky);border-color:rgba(147,197,253,.4)}
.endcard{margin-top:44px;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--sky)}

/* footer */
.foot{background:var(--navy-900);color:rgba(219,231,251,.72);padding:40px 0;font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.foot .logo{color:#fff}
.foot a{color:rgba(219,231,251,.85);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
.foot .legal{flex-basis:100%;font-family:var(--mono);font-size:12px;color:rgba(219,231,251,.6)}
.ph{background:#fff3c4;color:#5b4300;padding:0 4px;border-radius:4px;font-family:var(--mono);font-size:.85em}

/* ---------- phone ---------- */
@media (max-width:1023px){
  .top nav{display:none}
  .menub{display:inline-flex;align-items:center}
  .lang{margin-left:0}
  .top.open .mainnav{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;top:100%;left:0;right:0;background:#fff;padding:12px 16px 20px;border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(12,36,97,.10)}
  .top.open .mainnav>a{padding:12px 4px;border-top:1px solid var(--line)}
  .ddb{display:none}
  .ddm{position:static;width:auto;grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0}
  .wins,.strip,.vals{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:1fr}
  .isl .grid,.one .grid,.growth .grid,.about .grid,.faq .grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  :root{--sy:64px;--gut:16px}
  body{font-size:16px}
  .top .wrap{gap:12px;height:60px}
  .top .btn{display:none}
  .cred .wrap{grid-template-columns:1fr}
  .cred .also{grid-column:1}
  .cred .recs{grid-template-columns:1fr;gap:8px}
  .wins,.strip,.vals,.cols,.cta .path,.contact{grid-template-columns:1fr}
  .btns .btn{width:100%}
  .sea{height:380px}
  .islet .chip{font-size:11px;padding:5px 9px}
  .islet .land{width:110px;height:40px}
  .stat .big{flex-direction:column;gap:18px}
  .g,.row{grid-template-columns:1fr;gap:4px}
  .zone{grid-template-columns:1fr;gap:4px}
  .mrk{flex-direction:column;gap:6px}
  .mrk span:not(:last-child)::after{display:none}
  .bed i{margin-left:0}
  .omap{padding:16px 14px}
  .omap th:nth-child(4),.omap td:nth-child(4){display:none}
  .omap td{font-size:14px;padding:9px 6px}
  .terms{grid-template-columns:1fr;gap:8px}
  .hire .top2{grid-template-columns:1fr}
  .about .me{text-align:center}
  .about .me img{margin:0 auto;max-width:180px}
  .tiles{grid-template-columns:1fr;height:auto}
  .tile{height:170px}
  .case .box,.legacy{grid-template-columns:1fr}
  .rhythm .p{font-size:11px;gap:6px}
  .rhythm .l{min-width:12px;margin:0 8px}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Direction B page styles (homepage-b.html) */
/* Direction B · Story-led: "Lights off" runs down the page in soft round frames (deck v5 treatment) */
.heroB{padding:110px 0 120px}
.heroB .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.heroB h1{font-size:clamp(40px,5.2vw,72px);max-width:16ch}
.heroB .lead{margin:26px 0 36px;max-width:52ch}
.heroB .scan-note{margin-top:20px;font-family:var(--mono);font-size:13px;color:rgba(219,231,251,.8);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.season{background:linear-gradient(90deg,rgba(0,20,48,.97) 0%,rgba(0,24,58,.9) 45%,rgba(0,24,58,.72) 100%),url(img/office-11pm.webp) right 40%/cover}
.hrow{display:flex;justify-content:space-between;gap:48px;align-items:center}
.hrow>div{flex:1}
.kickline{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink3);display:flex;align-items:center;gap:10px;text-transform:uppercase;margin-bottom:10px}
.capline{font-style:italic;font-weight:300;font-size:18px;color:var(--ink2);margin-bottom:22px}
.capline b{font-family:var(--mono);font-style:normal;font-weight:600;font-size:11.5px;letter-spacing:.22em;color:var(--blue);margin-right:8px}
.doors{display:block}
.door{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center;padding:48px 48px 48px 32px;margin-bottom:20px}
.door .dc{max-width:640px}
.cta .hrow{align-items:flex-start}
.cta .story{order:-1}
@media (max-width:1023px){.heroB .grid{grid-template-columns:1fr}.hrow{flex-direction:column;align-items:flex-start}.door{grid-template-columns:1fr;gap:28px;padding:32px 22px}.door .story{justify-self:center}.hrow .story{order:-1;align-self:center}}
@media (max-width:640px){.heroB{padding:56px 0 72px}.heroB .story{--d:220px!important}}