:root{
  --ink: oklch(0.185 0.014 55);
  --ink-2: oklch(0.24 0.018 55);
  --ink-3: oklch(0.32 0.02 55);
  --bg: oklch(0.988 0.003 60);
  --surface: oklch(0.965 0.006 60);
  --line: oklch(0.88 0.012 60);
  --line-dark: oklch(0.34 0.02 55);
  --brand: oklch(0.665 0.185 45);
  --brand-deep: oklch(0.56 0.165 42);
  --brand-tint: oklch(0.955 0.025 55);
  --text: oklch(0.26 0.015 55);
  --text-soft: oklch(0.42 0.018 55);
  --on-ink: oklch(0.94 0.008 60);
  --on-ink-soft: oklch(0.78 0.015 60);
  --radius: 12px;
  --z-nav: 50; --z-fab: 60;
  --ease: cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",sans-serif;
  font-size:16px;line-height:1.6;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Inter",sans-serif;font-weight:500;line-height:1.12;color:var(--ink);text-wrap:balance;letter-spacing:-0.01em}
p{text-wrap:pretty}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ── Top bar ── */
.topbar{background:var(--ink);color:var(--on-ink-soft);font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.topbar a{color:var(--on-ink);transition:color .2s}
.topbar a:hover{color:oklch(0.78 0.14 55)}
.topbar .loc{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:720px){.topbar .addr{display:none}}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--bg);border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s}
.nav.scrolled{border-color:var(--line);box-shadow:0 1px 8px oklch(0.2 0.01 55 / .05)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:"Inter",sans-serif;font-size:27px;font-weight:560;color:var(--ink);letter-spacing:-0.015em;display:flex;align-items:baseline;gap:2px}
.logo em{font-style:normal;color:var(--brand)}
.logo small{font-family:"Inter";font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-left:8px;transform:translateY(-2px)}
.nav-links{display:flex;align-items:center;gap:18px;font-size:14px;font-weight:450}
.nav-links>a,.has-sub>a{position:relative;padding:6px 0;color:var(--ink-3);transition:color .2s;white-space:nowrap}
.nav-links>a::after,.has-sub>a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links>a:hover,.has-sub>a:hover{color:var(--ink)}
.nav-links>a:hover::after,.has-sub>a:hover::after{transform:scaleX(1)}
/* dropdowns */
.has-sub{position:relative}
.has-sub>a{display:inline-flex;align-items:center;gap:5px}
.has-sub .caret{transition:transform .25s var(--ease);color:var(--brand)}
.has-sub:hover .caret,.has-sub.open .caret{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);min-width:230px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px oklch(0.2 0.02 55/.12);padding:12px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:calc(var(--z-nav) + 1)}
.has-sub:hover .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink-3);transition:background .2s,color .2s;white-space:nowrap}
.sub a:hover{background:var(--brand-tint);color:var(--brand-deep)}
.sub-wide{padding:20px 22px}
.sub-cols{display:grid;grid-template-columns:auto auto auto;gap:4px 30px}
.sub-cols h5{font-family:"Inter";font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);padding:6px 12px 8px;grid-row:1}
.sub-cols>div{display:flex;flex-direction:column}
@media(max-width:1449px){.nav .logo small{display:none}}
.nav .btn{padding:11px 20px;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"Inter";font-size:15px;font-weight:500;padding:13px 26px;border-radius:100px;border:none;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,transform .25s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-brand{background:var(--brand);color:oklch(0.99 0.005 60)}
.btn-brand:hover{background:var(--brand-deep)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--on-ink);border:1px solid var(--line-dark)}
.btn-ghost:hover{border-color:oklch(0.6 0.06 55);background:oklch(0.24 0.02 55/.6)}
.nav .btn{padding:11px 22px;font-size:14.5px}
.nav-right{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;place-items:center}
.burger svg{color:var(--ink)}
.m-menu{display:none;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px 20px;max-height:calc(100vh - 120px);overflow-y:auto}
.m-menu>a,.m-menu summary{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.m-menu summary::-webkit-details-marker{display:none}
.m-menu summary svg{color:var(--brand);transition:transform .25s var(--ease)}
.m-menu details[open] summary svg{transform:rotate(180deg)}
.m-menu .m-sub{padding:4px 0 10px}
.m-menu .m-sub a{display:block;padding:9px 16px;font-size:14.5px;color:var(--text-soft)}
.m-menu .m-sub a:hover{color:var(--brand-deep)}
.m-menu .m-sub h6{font-family:"Inter";font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);padding:10px 16px 4px}
@media(max-width:1079px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav.open .m-menu{display:block}
  .nav .btn{display:none}
}

/* ── Hero ── */
.hero{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:48px;padding-top:96px;padding-bottom:150px;align-items:center}
.hero h1{color:oklch(0.965 0.006 60);font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:500;letter-spacing:-0.018em}
.hero h1 em{font-style:italic;color:oklch(0.76 0.155 50)}
.hero .lede{margin-top:22px;font-size:17.5px;line-height:1.65;color:var(--on-ink-soft);max-width:54ch}
.hero-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:13.5px;color:oklch(0.62 0.02 60)}
.hero-note strong{color:var(--on-ink);font-weight:500}
/* consultation card */
.quote-card{background:oklch(0.225 0.016 55);border:1px solid var(--line-dark);border-radius:16px;padding:30px 30px 26px;position:relative}
.quote-card h3{color:oklch(0.95 0.008 60);font-size:21px;margin-bottom:4px}
.quote-card .sub{font-size:13.5px;color:var(--on-ink-soft);margin-bottom:20px}
.quote-card ul{display:grid;gap:12px;font-size:14.5px;color:var(--on-ink)}
.quote-card li{display:flex;gap:11px;align-items:flex-start}
.quote-card li svg{flex:none;margin-top:4px}
.quote-card .btn{width:100%;justify-content:center;margin-top:24px}
.quote-tag{position:absolute;top:-13px;right:24px;background:var(--brand);color:oklch(0.99 0.005 60);font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 14px;border-radius:100px}
/* skyline */
.skyline{position:absolute;left:0;right:0;bottom:0;color:oklch(0.29 0.03 50);pointer-events:none}
.skyline svg{width:100%;height:auto;display:block}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;padding-top:64px;padding-bottom:120px}
  .quote-card{max-width:480px}
}

/* ── Partner strip ── */
.partners{background:var(--ink);border-top:1px solid var(--line-dark)}
.partners .wrap{display:flex;align-items:center;gap:12px 40px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.partners .cap{font-size:12.5px;letter-spacing:.02em;color:oklch(0.58 0.02 60);flex:none}
.partners ul{display:flex;gap:12px 36px;flex-wrap:wrap;font-family:"Inter",sans-serif;font-size:16.5px;color:oklch(0.72 0.02 60)}
.partners li{white-space:nowrap}

/* ── Section scaffolding ── */
section{scroll-margin-top:80px}
.sec{padding:104px 0}
.sec-head{max-width:640px;margin-bottom:60px}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.sec-head p{margin-top:16px;color:var(--text-soft);font-size:16.5px}
.rule{width:44px;height:3px;background:var(--brand);border-radius:2px;margin-bottom:26px}

/* ── Services ── */
.services .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
.services .sticky{position:sticky;top:110px}
.services .sticky h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.services .sticky p{margin-top:18px;color:var(--text-soft)}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:baseline;padding:26px 6px;border-bottom:1px solid var(--line);transition:background .25s,padding-left .3s var(--ease)}
.svc:hover{background:var(--brand-tint);padding-left:16px}
.svc .glyph{color:var(--brand);align-self:center}
.svc h3{font-size:20px;font-weight:500}
.svc p{font-size:14.5px;color:var(--text-soft);margin-top:5px;max-width:52ch}
.svc .arr{color:var(--brand);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s var(--ease);align-self:center}
.svc:hover .arr{opacity:1;transform:none}
@media(max-width:880px){.services .wrap{grid-template-columns:1fr}.services .sticky{position:static}}

/* ── Jurisdictions ── */
.juris{background:var(--surface)}
.juris-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.jur{border-radius:16px;padding:36px 32px;display:flex;flex-direction:column}
.jur.dark{background:var(--ink);color:var(--on-ink)}
.jur.dark h3{color:oklch(0.95 0.008 60)}
.jur.light{background:var(--bg);border:1px solid var(--line)}
.jur.tint{background:var(--brand-tint);border:1px solid oklch(0.86 0.06 55)}
.jur .k{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--brand);margin-bottom:14px}
.jur.dark .k{color:oklch(0.76 0.15 50)}
.jur h3{font-size:24px;margin-bottom:12px}
.jur>p{font-size:14.5px;line-height:1.65;color:var(--text-soft);margin-bottom:22px}
.jur.dark>p{color:var(--on-ink-soft)}
.jur ul{display:grid;gap:9px;font-size:14px;margin-bottom:28px}
.jur li{display:flex;gap:10px;align-items:baseline}
.jur li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--brand);transform:translateY(-2px)}
.jur .go{margin-top:auto;font-size:14.5px;font-weight:500;color:var(--brand-deep);display:inline-flex;gap:8px;align-items:center}
.jur.dark .go{color:oklch(0.78 0.14 50)}
.jur .go:hover{gap:12px}
.jur .go{transition:gap .3s var(--ease)}

/* ── Cost calculator ── */
.calc{background:var(--ink);color:var(--on-ink)}
.calc .sec-head h2{color:oklch(0.96 0.006 60)}
.calc .sec-head p{color:var(--on-ink-soft)}
.calc-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.calc-panel{display:grid;gap:30px}
.calc-q .q-label{font-size:14px;font-weight:600;color:oklch(0.9 0.01 60);margin-bottom:12px;display:block}
.calc-q .q-hint{font-weight:400;color:oklch(0.62 0.02 60);font-size:12.5px;margin-left:8px}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{font-family:"Inter";font-size:14px;font-weight:500;color:var(--on-ink);background:oklch(0.24 0.018 55);border:1px solid var(--line-dark);border-radius:100px;padding:11px 20px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pill:hover{border-color:oklch(0.55 0.08 50)}
.pill[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:oklch(0.99 0.005 60)}
.pill:disabled{opacity:.35;cursor:not-allowed}
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-dark);border-radius:100px;overflow:hidden}
.stepper button{width:46px;height:46px;background:oklch(0.24 0.018 55);border:none;color:var(--on-ink);font-size:20px;cursor:pointer;transition:background .2s}
.stepper button:hover{background:oklch(0.3 0.025 52)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:64px;text-align:center;font-family:"Inter",sans-serif;font-size:22px;color:oklch(0.95 0.008 60)}
.calc-card{background:oklch(0.985 0.004 60);color:var(--text);border-radius:16px;padding:30px 30px 26px;position:sticky;top:104px}
.calc-card h3{font-size:15px;font-weight:600;font-family:"Inter";letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft)}
.calc-lines{margin:18px 0;display:grid;gap:11px;font-size:14.5px}
.calc-lines .ln{display:flex;justify-content:space-between;gap:16px}
.calc-lines .ln span:last-child{font-weight:500;color:var(--ink);white-space:nowrap}
.calc-total{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc-total .lbl{font-size:14px;color:var(--text-soft)}
.calc-total .amt{font-family:"Inter",sans-serif;font-size:40px;font-weight:500;color:var(--ink);letter-spacing:-0.015em}
.calc-total .amt small{font-family:"Inter";font-size:15px;font-weight:450;color:var(--text-soft);letter-spacing:0}
.calc-card .btn{width:100%;justify-content:center;margin-top:20px}
.calc-disc{margin-top:14px;font-size:12px;line-height:1.55;color:var(--text-soft)}
@media(max-width:880px){.calc-grid{grid-template-columns:1fr}.calc-card{position:static}}

/* ── Industries ── */
.inds{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ind{border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;transition:border-color .25s,background .25s}
.ind:hover{border-color:oklch(0.72 0.12 50);background:var(--brand-tint)}
.ind h3{font-size:17px;font-family:"Inter";font-weight:600;letter-spacing:0}
.ind p{margin-top:7px;font-size:13.5px;color:var(--text-soft)}

/* ── Packages ── */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.pkg{border:1px solid var(--line);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;background:var(--bg);transition:border-color .25s,transform .3s var(--ease)}
.pkg:hover{border-color:oklch(0.72 0.12 50);transform:translateY(-3px)}
.pkg .zone{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft)}
.pkg h3{font-size:19px;margin-top:10px;min-height:2.4em}
.pkg .price{margin:18px 0 4px;font-family:"Inter",sans-serif;font-size:38px;font-weight:500;color:var(--ink);letter-spacing:-0.015em}
.pkg .price span{font-size:15px;font-family:"Inter";font-weight:450;color:var(--text-soft);letter-spacing:0}
.pkg .per{font-size:12.5px;color:var(--text-soft);margin-bottom:20px}
.pkg ul{display:grid;gap:9px;font-size:13.8px;color:var(--text);border-top:1px solid var(--line);padding-top:20px;margin-bottom:26px}
.pkg li{display:flex;gap:9px;align-items:flex-start}
.pkg li svg{flex:none;margin-top:4px;color:var(--brand)}
.pkg .btn{margin-top:auto;justify-content:center}
.pkg.feat{background:var(--ink);border-color:var(--ink)}
.pkg.feat .zone{color:oklch(0.74 0.13 50)}
.pkg.feat h3,.pkg.feat .price{color:oklch(0.96 0.006 60)}
.pkg.feat .price span,.pkg.feat .per{color:var(--on-ink-soft)}
.pkg.feat ul{color:var(--on-ink);border-color:var(--line-dark)}
.pkg-note{margin-top:34px;font-size:14px;color:var(--text-soft);max-width:70ch}
.pkg-note a{color:var(--brand-deep);font-weight:500;border-bottom:1px solid oklch(0.8 0.08 50)}

/* ── Process ── */
.process{background:var(--ink);color:var(--on-ink)}
.process .sec-head h2{color:oklch(0.96 0.006 60)}
.process .sec-head p{color:var(--on-ink-soft)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:0;border-top:1px solid var(--line-dark)}
.step{padding:36px 28px 40px 0;border-bottom:1px solid var(--line-dark);position:relative}
.step+.step{padding-left:28px;border-left:1px solid var(--line-dark)}
.step .n{font-family:"Inter",sans-serif;font-size:17px;color:oklch(0.75 0.15 50);font-style:italic}
.step h3{color:oklch(0.95 0.008 60);font-size:20px;margin:14px 0 10px}
.step p{font-size:14.2px;line-height:1.65;color:var(--on-ink-soft)}
@media(max-width:980px){.step+.step{border-left:none;padding-left:0}}

/* ── Testimonials ── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px}
.tq{position:relative;padding-top:38px}
.tq::before{content:"“";position:absolute;top:-8px;left:-4px;font-family:"Inter",sans-serif;font-size:74px;line-height:1;color:var(--brand);opacity:.85}
.tq blockquote{font-family:"Inter",sans-serif;font-size:18.5px;line-height:1.55;color:var(--ink-2)}
.tq figcaption{margin-top:18px;font-size:13.5px;color:var(--text-soft)}
.tq figcaption strong{display:block;font-weight:600;color:var(--ink);font-size:14px}

/* ── FAQ ── */
.faq{background:var(--surface)}
.faq .wrap{display:grid;grid-template-columns:1fr 1.7fr;gap:64px;align-items:start}
.faq .sec-head{margin-bottom:0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:500;font-size:16.5px;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-deep)}
.faq summary .x{flex:none;width:22px;height:22px;position:relative;color:var(--brand)}
.faq summary .x::before,.faq summary .x::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;transition:transform .35s var(--ease)}
.faq summary .x::before{width:14px;height:1.6px}
.faq summary .x::after{width:1.6px;height:14px}
.faq details[open] summary .x::after{transform:rotate(90deg)}
.faq .a{padding:0 44px 24px 4px;font-size:15px;color:var(--text-soft);max-width:68ch}
@media(max-width:880px){.faq .wrap{grid-template-columns:1fr}}

/* ── CTA band ── */
.cta{background:var(--brand)}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:76px;padding-bottom:76px}
.cta h2{color:oklch(0.995 0.005 60);font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:20ch}
.cta p{color:oklch(0.95 0.03 55);margin-top:12px;font-size:16px;max-width:48ch}
.cta .btn{background:var(--ink);color:var(--on-ink);flex:none}
.cta .btn:hover{background:var(--ink-2)}

/* ── Footer ── */
footer{background:var(--ink);color:var(--on-ink-soft);font-size:14.5px}
.foot-top{display:grid;grid-template-columns:1.9fr 1fr 1.1fr 1fr 1.1fr;gap:36px;padding:72px 0 56px;border-bottom:1px solid var(--line-dark)}
@media(max-width:1080px){.foot-top{grid-template-columns:1fr 1fr 1fr}}
footer .logo{color:oklch(0.95 0.008 60)}
.foot-about{margin-top:18px;max-width:38ch;line-height:1.7}
footer h4{font-family:"Inter";font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:oklch(0.6 0.02 60);margin-bottom:18px}
footer ul{display:grid;gap:11px}
footer ul a{transition:color .2s}
footer ul a:hover{color:oklch(0.85 0.1 55)}
.foot-contact li{display:flex;gap:12px;align-items:flex-start}
.foot-contact svg{flex:none;margin-top:4px;color:var(--brand)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0;font-size:13px;color:oklch(0.56 0.02 60)}
.foot-bottom a{color:oklch(0.7 0.02 60)}
.foot-bottom a:hover{color:var(--on-ink)}
@media(max-width:920px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ── WhatsApp FAB ── */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:var(--z-fab);width:56px;height:56px;border-radius:50%;background:oklch(0.72 0.19 148);display:grid;place-items:center;box-shadow:0 4px 14px oklch(0.2 0.02 150/.3);transition:transform .3s var(--ease)}
.wa-fab:hover{transform:scale(1.07)}

/* ── Reveal motion ── */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-d1.in{transition-delay:.08s}
html.js .rv-d2.in{transition-delay:.16s}
html.js .rv-d3.in{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ── Inner pages ── */
.page-hero{background:var(--ink);color:var(--on-ink);padding:76px 0 70px}
.page-hero h1{color:oklch(0.965 0.006 60);font-size:clamp(2.1rem,4.4vw,3.3rem);letter-spacing:-0.015em;max-width:22ch}
.page-hero .lede{margin-top:18px;font-size:17px;line-height:1.65;color:var(--on-ink-soft);max-width:62ch}
.page-hero .hero-cta{margin-top:30px}
.crumb{font-size:13px;color:oklch(0.6 0.02 60);margin-bottom:20px}
.crumb a{color:oklch(0.76 0.11 55)}
.crumb a:hover{color:oklch(0.85 0.12 55)}
.prose{max-width:70ch}
.prose p{margin-bottom:16px;color:var(--text-soft);font-size:16px;line-height:1.7}
.prose strong{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.two-col .sticky-col{position:sticky;top:110px}
@media(max-width:880px){.two-col{grid-template-columns:1fr}.two-col .sticky-col{position:static}}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.check{display:flex;gap:11px;align-items:flex-start;padding:15px 17px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;background:var(--bg)}
.check svg{color:var(--brand);flex:none;margin-top:3px}
.check b{font-weight:600;color:var(--ink)}
.sec-alt{background:var(--surface)}
.doc-list{counter-reset:doc;display:grid;gap:14px;max-width:74ch}
.doc{border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--bg)}
.doc h3{font-size:16.5px;font-family:"Inter";font-weight:600;letter-spacing:0;margin-bottom:10px}
.doc ul{display:grid;gap:7px;font-size:14.5px;color:var(--text-soft)}
.doc li{display:flex;gap:9px;align-items:baseline}
.doc li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--brand);transform:translateY(-2px)}
.svc-anchor{scroll-margin-top:90px}
/* contact */
.c-form{display:grid;gap:14px;max-width:520px}
.c-form label{font-size:13.5px;font-weight:600;color:var(--ink)}
.c-form input,.c-form select,.c-form textarea{width:100%;margin-top:6px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;transition:border-color .2s}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{outline:none;border-color:var(--brand)}
.c-form textarea{min-height:120px;resize:vertical}
.office-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.office{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--bg)}
.office h3{font-size:17px;margin-bottom:8px}
.office p{font-size:14px;color:var(--text-soft)}

/* ── Images & logo ── */
.logo-img{height:44px;width:auto;display:block}
footer .logo-img{height:52px;filter:brightness(0) invert(1);opacity:.95}
@media(max-width:560px){.logo-img{height:36px}}
.hero,.page-hero{position:relative;overflow:hidden}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,oklch(0.185 0.014 55/.94) 20%,oklch(0.185 0.014 55/.62)),linear-gradient(to top,oklch(0.185 0.014 55/.96),transparent 45%)}
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:1}
.jur{overflow:hidden}
.jur-img{width:calc(100% + 64px);height:168px;object-fit:cover;display:block;margin:-36px -32px 26px}
.side-img{width:100%;max-height:280px;object-fit:cover;border-radius:14px;margin-top:30px;display:block}
.gov-strip{display:flex;flex-wrap:wrap;gap:30px 48px;align-items:center;justify-content:center}
.gov-strip img{height:54px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.72);transition:filter .3s}
.gov-strip img:hover{filter:none}
@media(max-width:560px){.gov-strip{gap:20px 28px}.gov-strip img{height:40px}}

/* ── Brand hero (old-site style orange banner) ── */
.hero-brand{background:var(--brand)}
.hero-brand .hero-photo{opacity:1;object-position:center bottom}
.hero-brand .hero-scrim{background:linear-gradient(90deg,oklch(0.5 0.155 42/.88) 12%,oklch(0.54 0.16 43/.38) 55%,oklch(0.56 0.165 42/.12)),linear-gradient(to top,oklch(0.46 0.15 40/.55),transparent 40%)}
.hero-brand h1{color:oklch(0.995 0.005 60)}
.hero-brand h1 em{color:var(--ink)}
.hero-brand .lede{color:oklch(0.97 0.02 55)}
.hero-brand .hero-note{color:oklch(0.95 0.035 55)}
.hero-brand .hero-note strong{color:oklch(0.995 0.005 60)}
.btn-light{background:oklch(0.99 0.005 60);color:var(--ink)}
.btn-light:hover{background:oklch(0.93 0.01 60)}
.hero-brand .btn-ghost{border-color:oklch(0.97 0.03 55/.55);color:oklch(0.995 0.005 60)}
.hero-brand .btn-ghost:hover{border-color:oklch(0.99 0.005 60);background:oklch(0.5 0.15 42/.45)}
.hero-brand .quote-card{background:oklch(0.21 0.016 55);border-color:oklch(0.3 0.03 50)}
.hero-brand .quote-tag{background:var(--ink);color:var(--on-ink)}

/* ── Services v2: tile grid ── */
.svc2-head{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap;margin-bottom:46px}
.svc2-head .sec-head{margin-bottom:0;max-width:560px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px}
.svc-tile{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:26px 24px 22px;transition:border-color .25s,background .25s,transform .3s var(--ease)}
.svc-tile:hover{border-color:oklch(0.72 0.13 50);background:var(--brand-tint);transform:translateY(-3px)}
.svc-tile .icon{width:46px;height:46px;border-radius:12px;background:var(--brand-tint);display:grid;place-items:center;color:var(--brand-deep);margin-bottom:16px;transition:background .25s,color .25s}
.svc-tile:hover .icon{background:var(--brand);color:oklch(0.99 0.005 60)}
.svc-tile h3{font-family:"Inter";font-size:16.5px;font-weight:600;letter-spacing:0;color:var(--ink)}
.svc-tile p{font-size:13.8px;line-height:1.6;color:var(--text-soft);margin-top:7px}
.svc-tile .go{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:500;color:var(--brand-deep);display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .3s var(--ease)}
.svc-tile:hover .go{opacity:1;transform:none}
@media(hover:none){.svc-tile .go{opacity:1;transform:none}}

/* ── Process timeline v2 ── */
.tline{display:grid;grid-template-columns:repeat(5,1fr);gap:0 26px}
.tl-step{position:relative;padding-top:6px}
.tl-num{width:52px;height:52px;border-radius:50%;background:var(--brand);color:oklch(0.99 0.005 60);display:grid;place-items:center;font-family:"Inter",sans-serif;font-size:21px;font-weight:500;position:relative;z-index:1}
.tl-step::before{content:"";position:absolute;top:31px;left:66px;right:-14px;height:1.5px;background:linear-gradient(90deg,oklch(0.62 0.14 48/.55),var(--line-dark))}
.tl-step:last-child::before{display:none}
.tl-step h3{color:oklch(0.95 0.008 60);font-size:19px;margin:22px 0 9px}
.tl-step p{font-size:14px;line-height:1.68;color:var(--on-ink-soft)}
@media(max-width:980px){
  .tline{grid-template-columns:1fr}
  .tl-step{display:grid;grid-template-columns:52px 1fr;column-gap:20px;padding:0 0 36px}
  .tl-step::before{top:60px;bottom:8px;left:25px;right:auto;width:1.5px;height:auto;background:linear-gradient(180deg,oklch(0.62 0.14 48/.55),var(--line-dark))}
  .tl-step:last-child{padding-bottom:0}
  .tl-num{grid-row:1}
  .tl-step h3{grid-column:2;grid-row:1;align-self:center;margin:0}
  .tl-step p{grid-column:2;margin-top:10px}
}

/* ── Process zigzag timeline (reference style) ── */
.process .sec-head.centered{margin:0 auto 0;text-align:center;max-width:720px}
.process .sec-head.centered .rule{margin:0 auto 26px}
.zig{position:relative;display:grid;grid-template-columns:repeat(6,1fr);column-gap:16px;height:430px;margin-top:10px}
.zig::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,oklch(0.64 0.16 48) 5%,oklch(0.64 0.16 48) 95%,transparent)}
.zig-step{position:relative}
.zig-step::after{content:"";position:absolute;left:12px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px oklch(0.64 0.16 48/.22)}
.zc{position:absolute;left:0;right:0;bottom:calc(50% + 36px)}
.zig-step:nth-child(even) .zc{bottom:auto;top:calc(50% + 36px)}
.zn{position:absolute;z-index:0;font-family:"Inter",sans-serif;font-size:164px;font-weight:500;line-height:.8;color:oklch(0.97 0.01 60/.08);top:-52px;left:-4px;user-select:none;pointer-events:none}
.zc h3{position:relative;z-index:1;font-family:"Inter",sans-serif;font-size:15.5px;font-weight:600;letter-spacing:.01em;color:oklch(0.96 0.006 60);line-height:1.5;max-width:170px;margin:0}
.zig-skip{text-align:center;margin-top:26px}
.zig-skip h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:oklch(0.96 0.006 60);margin-bottom:24px}
@media(max-width:979px){
  .zig{display:block;height:auto;margin-top:44px;padding-left:2px}
  .zig::before{left:7px;right:auto;top:4px;bottom:4px;width:2px;height:auto;background:linear-gradient(180deg,oklch(0.64 0.16 48),oklch(0.64 0.16 48/.25))}
  .zig-step{padding:0 0 30px 38px}
  .zig-step:last-child{padding-bottom:0}
  .zig-step::after{left:2px;top:4px}
  .zc{position:static}
  .zig-step:nth-child(even) .zc{position:static}
  .zn{display:none}
  .zc h3{max-width:none;font-size:16px}
}

/* ── Process section background treatment ── */
.process{position:relative;overflow:hidden;background:
  radial-gradient(640px 420px at 10% 12%, oklch(0.46 0.13 45/.20), transparent 70%),
  radial-gradient(760px 520px at 90% 88%, oklch(0.5 0.15 45/.16), transparent 70%),
  linear-gradient(135deg, oklch(0.19 0.014 55), oklch(0.155 0.022 45))}
.process::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(oklch(0.97 0.01 60/.055) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(900px 560px at 50% 42%, black, transparent);
  mask-image:radial-gradient(900px 560px at 50% 42%, black, transparent)}
.process::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:120px;pointer-events:none;opacity:.06;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23ffffff' d='M0 120V96h28V78h10v18h22V60h12v36h20V88h26v8h16V44l10-14 10 14v52h18V70h14v26h24V80h12V52h10v28h12v16h22V30h8l4-18 4 18h8v66h20V84h26v12h18V64h12v32h24v-8h14V60h12v36h26V74h16v22h20V40h10V20l8-12 8 12v20h10v56h22V80h24v16h18V50h12v46h22v-6h26v6h16V70h12v26h22V36h8l4-16 4 16h8v60h18V78h26v18h20V58h12v38h24V84h28v36z'/%3E%3C/svg%3E") bottom center/cover no-repeat}
.process .wrap{position:relative;z-index:1}

/* ── Hero v3: dark premium + arch photo + floating chips ── */
.hero-v3{position:relative;overflow:hidden;color:var(--on-ink);background:
  radial-gradient(720px 480px at 88% 8%, oklch(0.44 0.12 45/.24), transparent 70%),
  radial-gradient(620px 420px at 6% 92%, oklch(0.46 0.13 45/.18), transparent 70%),
  linear-gradient(150deg, oklch(0.19 0.014 55), oklch(0.15 0.02 45))}
.hero-v3::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(oklch(0.97 0.01 60/.05) 1px, transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(820px 520px at 30% 30%, black, transparent);
  mask-image:radial-gradient(820px 520px at 30% 30%, black, transparent)}
.hero-v3 .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;padding-top:84px;padding-bottom:104px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:oklch(0.92 0.025 55);background:oklch(0.27 0.028 50/.65);border:1px solid oklch(0.4 0.06 48);border-radius:100px;padding:8px 18px;margin-bottom:28px}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.hero-v3 h1{color:oklch(0.97 0.005 60);font-size:clamp(2.4rem,4.8vw,3.9rem);font-weight:500;letter-spacing:-0.018em}
.hero-v3 h1 em{font-style:italic;color:oklch(0.76 0.155 50)}
.hero-v3 .lede{margin-top:22px;font-size:17px;line-height:1.7;color:var(--on-ink-soft);max-width:52ch}
.hero-v3 .hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-v3 .hero-note{margin-top:26px;font-size:13.5px;color:oklch(0.66 0.02 60)}
.hero-v3 .hero-note strong{color:var(--on-ink);font-weight:500}
.hero-visual{position:relative;padding:0 26px 26px 12px}
.hero-visual .arch{width:100%;aspect-ratio:1/1.06;object-fit:cover;object-position:30% 50%;display:block;border-radius:999px 999px 24px 24px;border:1px solid oklch(0.36 0.045 50)}
.chip{position:absolute;display:flex;align-items:center;gap:11px;background:oklch(0.23 0.02 52/.93);border:1px solid oklch(0.4 0.055 50);border-radius:14px;padding:12px 18px;font-size:13.5px;font-weight:500;color:oklch(0.96 0.006 60);box-shadow:0 6px 14px oklch(0.1 0.02 50/.4);animation:floaty 5.5s ease-in-out infinite;white-space:nowrap}
.chip .ic{width:30px;height:30px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:oklch(0.99 0.005 60);flex:none}
.chip-1{top:9%;left:-14px}
.chip-2{bottom:20%;right:-6px;animation-delay:1.4s}
.chip-3{bottom:-18px;left:10%;animation-delay:2.8s;background:var(--brand);border-color:var(--brand);color:oklch(0.99 0.005 60)}
.chip-3 strong{font-family:"Inter",sans-serif;font-size:17px;font-weight:500;margin-left:5px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.chip{animation:none}}
@media(max-width:920px){
  .hero-v3 .wrap{grid-template-columns:1fr;gap:56px;padding-top:56px;padding-bottom:88px}
  .hero-visual{max-width:460px;margin:0 auto;padding:0 8px 24px}
  .chip-1{left:-4px}.chip-2{right:-4px}
}

/* ── Process: orange gradient variant (replaces dark) ── */
.process{background:
  radial-gradient(720px 460px at 88% 6%, oklch(0.99 0.02 60/.16), transparent 65%),
  radial-gradient(660px 460px at 6% 94%, oklch(0.4 0.14 40/.45), transparent 70%),
  linear-gradient(135deg, oklch(0.71 0.165 48), oklch(0.54 0.17 40))}
.process::before{background-image:radial-gradient(oklch(0.99 0.01 60/.13) 1px, transparent 1.4px)}
.process::after{opacity:.1}
.process .sec-head.centered h2{color:oklch(0.995 0.005 60)}
.process .sec-head.centered p{color:oklch(0.98 0.025 55)}
.zig::before{background:linear-gradient(90deg,transparent,oklch(0.99 0.008 60/.9) 5%,oklch(0.99 0.008 60/.9) 95%,transparent)}
.zig-step::after{background:oklch(0.99 0.005 60);box-shadow:0 0 0 5px oklch(0.99 0.01 60/.28)}
.zn{color:oklch(0.99 0.01 60/.15)}
.zc h3{color:oklch(0.995 0.005 60)}
.zig-skip h3{color:oklch(0.995 0.005 60)}
.zig-skip .btn{background:oklch(0.99 0.005 60);color:var(--ink)}
.zig-skip .btn:hover{background:oklch(0.92 0.012 60)}
@media(max-width:979px){.zig::before{background:linear-gradient(180deg,oklch(0.99 0.008 60/.9),oklch(0.99 0.008 60/.3))}}

/* ── Process refinements: no skyline, brighter numbers, readable text ── */
.process::after{content:none}
.zn{color:oklch(1 0 0/.32);text-shadow:0 2px 20px oklch(0.34 0.13 40/.55)}
.zc h3{font-size:16.5px;font-weight:700;text-shadow:0 1px 12px oklch(0.32 0.13 40/.75),0 1px 3px oklch(0.32 0.13 40/.6)}
.process .sec-head.centered h2{text-shadow:0 2px 16px oklch(0.34 0.13 40/.5)}
.process .sec-head.centered p{color:oklch(0.995 0.01 55);text-shadow:0 1px 8px oklch(0.34 0.13 40/.6)}
.zig-skip h3{text-shadow:0 1px 12px oklch(0.34 0.13 40/.5)}

/* ── Process: white variant ── */
.process{background:oklch(0.998 0.001 60)}
.process::before{content:none}
.process .sec-head.centered h2{color:var(--ink);text-shadow:none}
.process .sec-head.centered p{color:var(--text-soft);text-shadow:none}
.zig::before{background:linear-gradient(90deg,transparent,var(--brand) 4%,var(--brand) 96%,transparent)}
.zig-step::after{background:var(--brand);box-shadow:0 0 0 5px oklch(0.66 0.185 45/.16)}
.zn{color:oklch(0.55 0.09 45/.14);text-shadow:none}
.zc h3{color:var(--ink);text-shadow:none;font-weight:600}
.zig-skip h3{color:var(--ink);text-shadow:none}
.zig-skip .btn{background:var(--brand);color:oklch(0.99 0.005 60)}
.zig-skip .btn:hover{background:var(--brand-deep)}
@media(max-width:979px){.zig::before{background:linear-gradient(180deg,var(--brand),oklch(0.66 0.185 45/.3))}}

/* ── Process: label text centered on top of ghost number ── */
.zn{top:50%;left:2px;transform:translateY(-50%)}

/* ══ Site-wide animations ══ */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes waPulse{to{box-shadow:0 0 0 20px oklch(0.72 0.19 148/0)}}
@keyframes marq{to{transform:translateX(-50%)}}

/* hero entrance sequence */
html.js .hero-v3 .hero-badge{animation:rise .7s var(--ease) both .05s}
html.js .hero-v3 h1{animation:rise .85s var(--ease) both .16s}
html.js .hero-v3 .lede{animation:rise .85s var(--ease) both .3s}
html.js .hero-v3 .hero-cta{animation:rise .85s var(--ease) both .44s}
html.js .hero-v3 .hero-note{animation:rise .85s var(--ease) both .58s}
html.js .hero-visual .arch{animation:pop 1.05s var(--ease) both .3s}
html.js .chip-1{animation:pop .6s var(--ease) both .95s,floaty 5.5s ease-in-out 1.6s infinite}
html.js .chip-2{animation:pop .6s var(--ease) both 1.15s,floaty 5.5s ease-in-out 2.6s infinite}
html.js .chip-3{animation:pop .6s var(--ease) both 1.35s,floaty 5.5s ease-in-out 3.6s infinite}

/* inner page hero entrance */
html.js .page-hero .crumb{animation:rise .6s var(--ease) both .05s}
html.js .page-hero h1{animation:rise .8s var(--ease) both .14s}
html.js .page-hero .lede{animation:rise .8s var(--ease) both .28s}
html.js .page-hero .hero-cta{animation:rise .8s var(--ease) both .42s}

/* buttons: arrow nudge + lift */
.btn{transition:background .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* icons: micro-interactions */
.svc-tile .icon svg{transition:transform .35s var(--ease)}
.svc-tile:hover .icon svg{transform:scale(1.15) rotate(-6deg)}
.chip .ic svg,.check svg{transition:transform .3s var(--ease)}
.check:hover svg{transform:scale(1.25)}
.foot-contact svg{transition:transform .3s var(--ease)}
.foot-contact li:hover svg{transform:scale(1.2)}

/* partner strip marquee */
.marq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent);mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent)}
.marq ul{flex-wrap:nowrap;width:max-content;animation:marq 32s linear infinite}
.marq ul:hover{animation-play-state:paused}

/* process timeline: draw line, pop dots, rise labels */
html.js .zig::before{transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease) .15s}
html.js .zig.in::before{transform:scaleX(1)}
html.js .zig .zig-step::after{transform:scale(0);transition:transform .5s var(--ease)}
html.js .zig.in .zig-step::after{transform:scale(1)}
html.js .zig .zc{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .zig.in .zc{opacity:1;transform:none}
.zig-step:nth-child(1)::after{transition-delay:.25s}.zig-step:nth-child(1) .zc{transition-delay:.3s}
.zig-step:nth-child(2)::after{transition-delay:.45s}.zig-step:nth-child(2) .zc{transition-delay:.5s}
.zig-step:nth-child(3)::after{transition-delay:.65s}.zig-step:nth-child(3) .zc{transition-delay:.7s}
.zig-step:nth-child(4)::after{transition-delay:.85s}.zig-step:nth-child(4) .zc{transition-delay:.9s}
.zig-step:nth-child(5)::after{transition-delay:1.05s}.zig-step:nth-child(5) .zc{transition-delay:1.1s}
.zig-step:nth-child(6)::after{transition-delay:1.25s}.zig-step:nth-child(6) .zc{transition-delay:1.3s}

/* FAQ smooth open */
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq details[open] .a{animation:faqIn .4s var(--ease)}

/* WhatsApp fab pulse */
.wa-fab{box-shadow:0 4px 14px oklch(0.2 0.02 150/.3),0 0 0 0 oklch(0.72 0.19 148/.45);animation:waPulse 2.6s ease-out infinite}

/* calculator total bump */
.calc-total .amt.bump{animation:pop .35s var(--ease)}

/* gov logos: gentle rise handled via .rv decoration */
@media (prefers-reduced-motion: reduce){
  html.js .hero-v3 .hero-badge,html.js .hero-v3 h1,html.js .hero-v3 .lede,html.js .hero-v3 .hero-cta,html.js .hero-v3 .hero-note,
  html.js .hero-visual .arch,html.js .chip-1,html.js .chip-2,html.js .chip-3,
  html.js .page-hero .crumb,html.js .page-hero h1,html.js .page-hero .lede,html.js .page-hero .hero-cta{animation:none}
  .marq ul{animation:none}
  .wa-fab{animation:none}
  html.js .zig::before{transform:none;transition:none}
  html.js .zig .zc{opacity:1;transform:none;transition:none}
  html.js .zig .zig-step::after{transform:none;transition:none}
}

/* ══ Hero v4: bright, vibrant, attention-grabbing ══ */
@keyframes drift{to{transform:translate(34px,26px) scale(1.09)}}
@keyframes sweep{0%{left:-60%}55%{left:135%}100%{left:135%}}
@keyframes rotUp{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}
@keyframes offerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hero-v4{position:relative;overflow:hidden;background:
  radial-gradient(760px 520px at 88% 0%, oklch(0.9 0.06 55/.55), transparent 65%),
  radial-gradient(680px 480px at 0% 100%, oklch(0.92 0.05 60/.5), transparent 70%),
  linear-gradient(160deg, oklch(0.99 0.008 60), oklch(0.965 0.02 58))}
.blob{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
.blob.b1{width:440px;height:440px;background:oklch(0.76 0.15 50/.32);top:-140px;right:6%}
.blob.b2{width:360px;height:360px;background:oklch(0.82 0.11 60/.3);bottom:-120px;left:-70px;animation-delay:-8s}
.hero-v4 .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;padding-top:72px;padding-bottom:92px}
.hero-badge2{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--brand-deep);background:oklch(0.95 0.035 55);border:1px solid oklch(0.86 0.07 55);border-radius:100px;padding:8px 18px;margin-bottom:26px}
.hero-badge2 svg{color:var(--brand)}
.hero-v4 h1{color:var(--ink);font-size:clamp(2.5rem,5vw,4rem);font-weight:500;letter-spacing:-0.018em}
.hero-v4 h1 em{font-style:italic;color:var(--brand-deep)}
.rot{display:inline-grid;text-align:left;color:var(--brand)}
.rot>span{grid-area:1/1;opacity:0;white-space:nowrap}
.rot>span.on{opacity:1;animation:rotUp .5s var(--ease)}
.hero-v4 .lede{margin-top:20px;font-size:17px;line-height:1.7;color:var(--text-soft);max-width:52ch}
.hero-v4 .hero-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;background:linear-gradient(105deg,transparent,oklch(1 0 0/.4),transparent);animation:sweep 3.4s ease infinite}
.hero-v4 .btn-ghost{border-color:oklch(0.8 0.06 55);color:var(--ink-2)}
.hero-v4 .btn-ghost:hover{border-color:var(--brand);background:var(--brand-tint)}
.hero-stats{display:flex;gap:14px 44px;flex-wrap:wrap;margin-top:38px}
.hst .n{font-family:"Inter",sans-serif;font-size:30px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;line-height:1.1}
.hst .n em{font-style:normal;color:var(--brand)}
.hst .l{font-size:12.5px;font-weight:500;color:var(--text-soft);margin-top:3px}
/* visual: arch slideshow + ring */
.hero-v4 .hero-visual{position:relative;padding:0 26px 26px 12px}
.arch-wrap{position:relative;aspect-ratio:1/1.06;border-radius:999px 999px 24px 24px;overflow:hidden;border:1px solid oklch(0.88 0.03 55)}
.arch-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;opacity:0;transition:opacity 1.1s ease}
.arch-wrap img.on{opacity:1}
.ring{position:absolute;inset:-16px 10px 10px -4px;border:2px dashed oklch(0.72 0.13 50/.5);border-radius:999px 999px 28px 28px;pointer-events:none}
.hero-v4 .chip{background:oklch(0.99 0.005 60/.95);border:1px solid var(--line);color:var(--ink);box-shadow:0 6px 14px oklch(0.3 0.05 50/.14)}
.hero-v4 .chip-3{background:var(--brand);border-color:var(--brand);color:oklch(0.99 0.005 60)}
@media(max-width:920px){
  .hero-v4 .wrap{grid-template-columns:1fr;gap:56px;padding-top:48px;padding-bottom:84px}
  .hero-v4 .hero-visual{max-width:460px;margin:0 auto;padding:0 8px 24px}
}
/* topbar offer strip */
.topbar{background:linear-gradient(90deg,var(--brand-deep),var(--brand))}
.topbar,.topbar a{color:oklch(0.99 0.008 60)}
.topbar a:hover{color:oklch(0.95 0.05 60)}
.offer-pill{display:inline-block;background:oklch(0.99 0.005 60);color:var(--brand-deep);font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:100px;padding:2px 10px;margin-right:10px;animation:offerPulse 2.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .blob,.btn-shine::after,.offer-pill{animation:none}
  .rot>span.on{animation:none}
  .arch-wrap img{transition:none}
}

/* ── Process v3: warm vibrant background ── */
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 5px oklch(0.66 0.185 45/.2)}50%{box-shadow:0 0 0 11px oklch(0.66 0.185 45/.07)}}
.process{background:
  radial-gradient(660px 440px at 90% 6%, oklch(0.88 0.075 55/.65), transparent 65%),
  radial-gradient(580px 420px at 2% 96%, oklch(0.9 0.06 60/.55), transparent 70%),
  linear-gradient(160deg, oklch(0.99 0.01 60), oklch(0.95 0.032 57))}
.process::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(oklch(0.6 0.12 50/.16) 1px, transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(1000px 640px at 50% 42%, black, transparent);
  mask-image:radial-gradient(1000px 640px at 50% 42%, black, transparent)}
.process::after{content:"";position:absolute;left:auto;right:6%;top:-150px;bottom:auto;width:440px;height:440px;border-radius:50%;
  background:oklch(0.79 0.13 52/.3);filter:blur(74px);opacity:1;animation:drift 15s ease-in-out infinite alternate;pointer-events:none}
.zig::before{height:3px;border-radius:2px}
.zn{color:oklch(0.64 0.14 50/.2);text-shadow:none}
html.js .zig.in .zig-step::after{animation:dotPulse 2.8s ease-in-out infinite}
.zig-step:nth-child(even) .zig-step::after{animation-delay:1.4s}
.zig-skip{background:oklch(0.995 0.004 60/.75);border:1px solid oklch(0.89 0.045 55);border-radius:22px;padding:36px 30px 34px;max-width:600px;margin:40px auto 0;backdrop-filter:none}
.zig-skip h3{margin-bottom:20px}
.zig-skip p.sub{font-size:14.5px;color:var(--text-soft);margin:-12px 0 22px}

/* ── Footer: white top, black bottom band ── */
footer{background:oklch(0.99 0.004 60);color:var(--text-soft)}
footer .logo-img{filter:none;opacity:1}
.foot-top{border-bottom:none;padding-bottom:48px}
footer h4{color:oklch(0.5 0.02 55)}
footer ul a{color:var(--ink-3)}
footer ul a:hover{color:var(--brand-deep)}
.foot-about{color:var(--text-soft)}
.foot-contact li{color:var(--text-soft)}
.foot-bottom-band{background:var(--ink)}
.foot-bottom{color:oklch(0.62 0.02 60)}
.foot-bottom a{color:oklch(0.74 0.02 60)}
.foot-bottom a:hover{color:oklch(0.9 0.05 55)}

/* ── Calculator promo band (above footer) ── */
.calc-cta{position:relative;color:var(--on-ink);margin-top:110px;background:
  radial-gradient(720px 480px at 88% 100%, oklch(0.52 0.15 45/.4), transparent 70%),
  radial-gradient(500px 360px at 6% 0%, oklch(0.45 0.1 45/.3), transparent 70%),
  linear-gradient(118deg, oklch(0.19 0.014 55), oklch(0.27 0.05 45))}
.calc-cta .wrap{display:grid;grid-template-columns:1.1fr auto 1fr;gap:60px;align-items:center;padding-top:58px;padding-bottom:58px}
.cc-left h2{color:oklch(0.97 0.005 60);font-size:clamp(1.7rem,2.9vw,2.4rem);letter-spacing:-0.012em}
.cc-left p{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--on-ink-soft);max-width:44ch}
.cc-right h3{font-family:"Inter",sans-serif;font-size:18px;font-weight:700;color:oklch(0.97 0.005 60);letter-spacing:0}
.cc-right p{margin:8px 0 24px;font-size:14.5px;line-height:1.65;color:var(--on-ink-soft);max-width:40ch}
.cc-right .btn{margin-top:4px}
/* CSS phone mockup */
.cc-phone{position:relative}
.ph{width:252px;margin-top:-130px;background:oklch(0.14 0.01 55);border-radius:40px;padding:11px;box-shadow:0 34px 70px oklch(0.1 0.02 50/.5);transform:rotate(-3deg);animation:floaty 6.5s ease-in-out infinite}
.ph-notch{width:86px;height:22px;background:oklch(0.14 0.01 55);border-radius:0 0 14px 14px;position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:2}
.ph-screen{background:oklch(0.985 0.004 60);border-radius:30px;padding:34px 16px 16px;color:var(--text)}
.ph-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);text-align:center;margin-bottom:12px}
.ph-pills{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.ph-pills span{font-size:11px;font-weight:600;padding:5px 12px;border-radius:100px;border:1px solid var(--line);color:var(--text-soft)}
.ph-pills span.on{background:var(--brand);border-color:var(--brand);color:oklch(0.99 0.005 60)}
.ph-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-soft);padding:8px 2px;border-bottom:1px solid var(--line)}
.ph-row b{color:var(--ink);font-weight:600}
.ph-total{display:flex;justify-content:space-between;align-items:baseline;padding:12px 2px 4px;font-size:11.5px;color:var(--text-soft)}
.ph-total b{font-family:"Inter",sans-serif;font-size:21px;font-weight:500;color:var(--ink)}
.ph-btn{margin-top:10px;background:var(--brand);color:oklch(0.99 0.005 60);font-size:12px;font-weight:600;text-align:center;padding:10px;border-radius:100px}
@media(max-width:980px){
  .calc-cta{margin-top:70px}
  .calc-cta .wrap{grid-template-columns:1fr;gap:40px;text-align:left}
  .ph{margin:-110px auto 0;transform:rotate(0)}
}
@media (prefers-reduced-motion: reduce){.ph{animation:none}}

/* ── Phone mockup v2: realistic, aligned like reference ── */
.ph{width:274px;padding:10px;border-radius:44px}
.ph-screen{border-radius:34px;padding:10px 14px 14px}
.ph-status{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:600;color:var(--ink);padding:2px 8px 0;margin-bottom:12px}
.ph-status .ph-sig{display:flex;gap:4px;align-items:center;color:var(--ink)}
.ph-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-align:center;margin:0 0 10px}
.ph-lbl{font-size:9.5px;font-weight:600;color:var(--text-soft);margin:0 2px 6px;text-align:left}
.ph-pills{display:flex;gap:5px;justify-content:flex-start;margin:0 0 12px}
.ph-pills span{font-size:10px;font-weight:600;padding:5px 11px;border-radius:100px;border:1px solid var(--line);color:var(--text-soft);white-space:nowrap;line-height:1}
.ph-pills span.on{background:var(--brand);border-color:var(--brand);color:oklch(0.99 0.005 60)}
.ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ph-tiles span{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 9px;line-height:1}
.ph-tiles span::before{content:"";width:8px;height:8px;border-radius:3px;flex:none}
.ph-tiles span:nth-child(1)::before{background:oklch(0.66 0.185 45)}
.ph-tiles span:nth-child(2)::before{background:oklch(0.62 0.14 250)}
.ph-tiles span:nth-child(3)::before{background:oklch(0.65 0.15 150)}
.ph-tiles span:nth-child(4)::before{background:oklch(0.6 0.16 320)}
.ph-tiles span.on{background:var(--brand-tint);border-color:oklch(0.8 0.09 50);color:var(--brand-deep)}
.ph-row{font-size:10.5px;padding:8px 2px}
.ph-row b{font-size:10.5px}
.ph-total{padding:11px 2px 2px}
.ph-total span{font-size:10.5px}
.ph-total b{font-size:20px}
.ph-btn{font-size:11.5px;padding:11px;margin-top:12px}

/* ── Phone mockup v3: full device, tilted like reference ── */
@keyframes floatyTilt{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-10deg) translateY(-10px)}}
.cc-phone{display:flex;justify-content:center}
.ph{width:280px;margin-top:-95px;position:relative;transform:rotate(-10deg);animation:floatyTilt 7s ease-in-out infinite;
  box-shadow:0 40px 80px oklch(0.08 0.02 50/.55),0 10px 24px oklch(0.08 0.02 50/.35)}
.ph::before{content:"";position:absolute;left:-3px;top:98px;width:3.5px;height:30px;border-radius:2px;background:oklch(0.2 0.01 55);box-shadow:0 40px 0 oklch(0.2 0.01 55)}
.ph::after{content:"";position:absolute;right:-3px;top:128px;width:3.5px;height:58px;border-radius:2px;background:oklch(0.2 0.01 55)}
.ph-screen::after{content:"";display:block;width:78px;height:4px;border-radius:2px;background:oklch(0.86 0.01 60);margin:11px auto 0}
.calc-cta{margin-top:130px}
.calc-cta .wrap{padding-top:64px;padding-bottom:64px}
@media(max-width:980px){
  .ph{margin:-85px auto 0;transform:rotate(-7deg);animation:none}
}
@media (prefers-reduced-motion: reduce){.ph{animation:none;transform:rotate(-10deg)}}

/* ── Phone mockup: bigger size ── */
.ph{width:354px;padding:13px;border-radius:54px;margin-top:-125px}
.ph-notch{width:106px;height:27px;border-radius:0 0 16px 16px}
.ph-screen{border-radius:42px;padding:15px 18px 18px}
.ph-status{font-size:13px;padding:2px 10px 0;margin-bottom:14px}
.ph-status .ph-sig svg{transform:scale(1.2)}
.ph-title{font-size:14px;margin-bottom:13px}
.ph-lbl{font-size:12px;margin-bottom:8px}
.ph-pills{gap:7px;margin-bottom:15px}
.ph-pills span{font-size:12.5px;padding:7px 15px}
.ph-tiles{gap:8px;margin-bottom:15px}
.ph-tiles span{font-size:12.5px;padding:11px 12px;border-radius:11px;gap:8px}
.ph-tiles span::before{width:10px;height:10px;border-radius:4px}
.ph-row{font-size:13px;padding:10px 2px}
.ph-row b{font-size:13px}
.ph-total{padding:14px 2px 4px}
.ph-total span{font-size:13px}
.ph-total b{font-size:28px}
.ph-btn{font-size:14px;padding:14px;margin-top:14px}
.ph-screen::after{width:98px;height:5px;margin-top:15px}
.ph::before{top:125px;height:38px;box-shadow:0 52px 0 oklch(0.2 0.01 55)}
.ph::after{top:165px;height:76px}
.calc-cta{margin-top:150px}
.calc-cta .wrap{gap:48px}
@media(max-width:480px){.ph{width:302px;margin-top:-95px}}

/* ── Phone mockup: real device proportions (~19.5:9 like an iPhone) ── */
@keyframes floatyTilt2{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-10px)}}
.ph{width:334px;padding:12px;border-radius:54px;margin-top:-150px;transform:rotate(-8deg);animation:floatyTilt2 7s ease-in-out infinite}
.ph-screen{height:672px;border-radius:44px;display:flex;flex-direction:column;padding:16px 18px 16px}
.ph-status{margin-bottom:18px}
.ph-title{margin-bottom:18px}
.ph-lbl{margin-bottom:9px}
.ph-pills{margin-bottom:20px}
.ph-tiles{margin-bottom:20px}
.ph-row{padding:12px 2px}
.ph-total{margin-top:auto;padding:16px 2px 6px}
.ph-btn{margin-top:14px}
.ph-screen::after{margin-top:16px}
.ph::before{top:150px;height:40px;box-shadow:0 56px 0 oklch(0.2 0.01 55)}
.ph::after{top:196px;height:80px}
.calc-cta{margin-top:170px}
.calc-cta .wrap{padding-top:70px;padding-bottom:70px}
@media(max-width:980px){.ph{margin:-100px auto 0;transform:rotate(-6deg)}}
@media(max-width:480px){.ph{width:296px}.ph-screen{height:596px}}
@media (prefers-reduced-motion: reduce){.ph{animation:none;transform:rotate(-8deg)}}

/* ── Calc band: match reference proportions exactly ── */
@keyframes floatyTilt3{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}
.calc-cta{margin-top:110px;margin-bottom:36px}
.calc-cta .wrap{padding-top:44px;padding-bottom:44px;gap:56px}
.ph{width:284px;padding:10px;border-radius:46px;margin-top:-85px;margin-bottom:-70px;transform:rotate(8deg);animation:floatyTilt3 7s ease-in-out infinite}
.ph-screen{height:562px;border-radius:38px;padding:12px 15px 14px}
.ph-notch{width:88px;height:23px}
.ph-status{font-size:11px;margin-bottom:12px}
.ph-title{font-size:12px;margin-bottom:12px}
.ph-lbl{font-size:10.5px;margin-bottom:7px}
.ph-pills{gap:6px;margin-bottom:14px}
.ph-pills span{font-size:10.5px;padding:6px 12px}
.ph-tiles{gap:6px;margin-bottom:14px}
.ph-tiles span{font-size:10.5px;padding:9px 10px;gap:6px}
.ph-tiles span::before{width:8px;height:8px}
.ph-row{font-size:11px;padding:9px 2px}
.ph-row b{font-size:11px}
.ph-total{padding:12px 2px 4px}
.ph-total span{font-size:11px}
.ph-total b{font-size:22px}
.ph-btn{font-size:12px;padding:11px;margin-top:12px}
.ph-screen::after{width:80px;height:4px;margin-top:12px}
.ph::before{top:110px;height:32px;box-shadow:0 44px 0 oklch(0.2 0.01 55)}
.ph::after{top:145px;height:62px}
@media(max-width:980px){.ph{margin:-70px auto -40px;transform:rotate(6deg)}}
@media(max-width:480px){.ph{width:264px}.ph-screen{height:520px}}
@media (prefers-reduced-motion: reduce){.ph{animation:none;transform:rotate(8deg)}}

/* ── Calc band: tighter ── */
@keyframes floatyTilt4{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-7px)}}
.calc-cta{margin-top:90px;margin-bottom:28px}
.calc-cta .wrap{padding-top:34px;padding-bottom:34px;gap:48px}
.ph{width:252px;padding:9px;border-radius:42px;margin-top:-70px;margin-bottom:-55px;animation:floatyTilt4 7s ease-in-out infinite}
.ph-screen{height:496px;border-radius:34px;padding:11px 13px 12px}
.ph-notch{width:78px;height:20px}
.ph-status{font-size:10px;margin-bottom:10px}
.ph-title{font-size:11px;margin-bottom:10px}
.ph-lbl{font-size:9.5px;margin-bottom:6px}
.ph-pills{gap:5px;margin-bottom:12px}
.ph-pills span{font-size:9.5px;padding:5px 10px}
.ph-tiles{gap:5px;margin-bottom:12px}
.ph-tiles span{font-size:9.5px;padding:8px 9px;gap:5px}
.ph-tiles span::before{width:7px;height:7px}
.ph-row{font-size:10px;padding:8px 2px}
.ph-row b{font-size:10px}
.ph-total{padding:10px 2px 3px}
.ph-total span{font-size:10px}
.ph-total b{font-size:19px}
.ph-btn{font-size:11px;padding:10px;margin-top:10px}
.ph-screen::after{width:70px;height:3.5px;margin-top:10px}
.ph::before{top:95px;height:28px;box-shadow:0 38px 0 oklch(0.2 0.01 55)}
.ph::after{top:126px;height:54px}
.cc-left h2{font-size:clamp(1.5rem,2.5vw,2.05rem)}
.cc-left p{font-size:14.5px}
.cc-right h3{font-size:16.5px}
.cc-right p{font-size:13.5px;margin:7px 0 20px}
@media(max-width:980px){.ph{margin:-60px auto -32px}}
@media(max-width:480px){.ph{width:238px}.ph-screen{height:468px}}
@media (prefers-reduced-motion: reduce){.ph{animation:none}}

/* ── Calc band: restore content text sizes ── */
.cc-left h2{font-size:clamp(1.7rem,2.9vw,2.4rem)}
.cc-left p{font-size:15.5px}
.cc-right h3{font-size:18px}
.cc-right p{font-size:14.5px;margin:8px 0 24px}

/* ── Virtuzone-style Inter typography ── */
h1,h2,h3,h4,h5,h6{font-family:"Inter",sans-serif}
h1,h2,.sec-head h2,.hero-v4 h1,.page-hero h1,.cc-left h2,.zig-skip h3,.process .sec-head.centered h2{font-weight:800;letter-spacing:-0.03em}
h3,h4{font-weight:700;letter-spacing:-0.01em}
.rot{font-weight:800}
.hst .n,.price,.calc-total .amt,.ph-total b,.zn,.zc h3,.tq blockquote{font-family:"Inter",sans-serif}
.tq blockquote{font-style:normal;font-weight:600}

/* ══ Dedicated cost-calculator page ══ */
.calc-page{background:radial-gradient(680px 440px at 92% -4%,oklch(0.92 0.05 55/.6),transparent 60%),linear-gradient(180deg,var(--surface),var(--bg));padding:40px 0 76px}
.calc-head{max-width:760px;margin:0 auto 30px;text-align:center}
.calc-head .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--brand-deep);background:oklch(0.95 0.035 55);border:1px solid oklch(0.86 0.07 55);border-radius:100px;padding:7px 16px;margin-bottom:16px}
.calc-head h1{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-0.03em}
.calc-head h1 em{font-style:normal;color:var(--brand)}
.calc-head p{margin-top:12px;color:var(--text-soft);font-size:16.5px}
.calc-grid2{display:grid;grid-template-columns:1.5fr 340px;gap:26px;align-items:start;max-width:1040px;margin:0 auto}
/* wizard */
.wiz{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:30px 30px 26px;box-shadow:0 18px 44px oklch(0.4 0.05 50/.07)}
.wiz-bar{display:flex;gap:6px;margin-bottom:10px}
.wiz-bar i{height:5px;flex:1;border-radius:3px;background:var(--line);transition:background .3s}
.wiz-bar i.on{background:var(--brand)}
.wiz-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--text-soft);letter-spacing:.02em;margin-bottom:20px}
.wiz-meta .step-name{color:var(--brand-deep)}
.wiz-step{display:none}
.wiz-step.on{display:block;animation:rise .45s var(--ease)}
.wiz-step h2{font-size:23px;letter-spacing:-0.02em}
.wiz-step .q-sub{margin-top:6px;color:var(--text-soft);font-size:14.5px}
.opt-grid{display:grid;gap:10px;margin-top:20px}
.opt-grid.two{grid-template-columns:1fr 1fr}
.opt{display:flex;gap:14px;align-items:center;text-align:left;width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:13px;padding:15px 17px;cursor:pointer;font:inherit;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
.opt:hover{border-color:oklch(0.8 0.09 50);transform:translateY(-1px)}
.opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
.opt .oi{width:42px;height:42px;flex:none;border-radius:11px;background:oklch(0.95 0.03 55);display:grid;place-items:center;color:var(--brand-deep);transition:background .2s,color .2s}
.opt .oi svg{width:21px;height:21px}
.opt[aria-pressed="true"] .oi{background:var(--brand);color:#fff}
.opt .ot{font-weight:600;font-size:15px;color:var(--ink);line-height:1.25}
.opt .os{display:block;font-weight:400;font-size:12.5px;color:var(--text-soft);margin-top:2px}
.opt .ok{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:#fff}
.opt[aria-pressed="true"] .ok{background:var(--brand);border-color:var(--brand)}
.opt .ok svg{width:13px;height:13px;opacity:0}
.opt[aria-pressed="true"] .ok svg{opacity:1}
.wiz-field{margin-top:16px}
.wiz-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.wiz-field input{width:100%;padding:13px 15px;font:inherit;font-size:15px;border:1.5px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);transition:border-color .2s}
.wiz-field input:focus{outline:none;border-color:var(--brand)}
.wiz-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wiz-count{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:14px 18px;border:1.5px solid var(--line);border-radius:13px}
.wiz-count .lab{font-weight:600;font-size:15px;color:var(--ink)}
.wiz-count .lab small{display:block;font-weight:400;font-size:12.5px;color:var(--text-soft)}
.wiz-nav{display:flex;gap:12px;margin-top:24px}
.wiz-nav .btn{flex:1;justify-content:center}
.wiz-back{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.wiz-back:hover{background:oklch(0.93 0.008 60)}
.wiz-back[hidden]{display:none}
/* aside estimate */
.calc-aside{position:sticky;top:92px;background:var(--ink);color:var(--on-ink);border-radius:20px;padding:26px 26px 24px;box-shadow:0 20px 50px oklch(0.2 0.03 50/.25)}
.calc-aside h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.72 0.02 60)}
.calc-aside .est-lines{margin:16px 0;display:grid;gap:10px;font-size:14px}
.calc-aside .est-lines .ln{display:flex;justify-content:space-between;gap:14px;color:var(--on-ink-soft)}
.calc-aside .est-lines .ln b{color:oklch(0.97 0.006 60);font-weight:600;white-space:nowrap}
.calc-aside .est-empty{color:var(--on-ink-soft);font-size:13.5px;line-height:1.6}
.calc-aside .est-total{border-top:1px solid var(--line-dark);padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc-aside .est-total .lbl{font-size:13.5px;color:var(--on-ink-soft)}
.calc-aside .est-total .amt{font-size:30px;font-weight:800;letter-spacing:-0.02em;color:oklch(0.98 0.006 60)}
.calc-aside .est-total .amt small{font-size:14px;font-weight:600;color:var(--on-ink-soft)}
.calc-aside .est-note{margin-top:12px;font-size:11.5px;line-height:1.55;color:oklch(0.66 0.02 60)}
.calc-trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:26px auto 0;max-width:1040px;font-size:13px;color:var(--text-soft)}
.calc-trust span{display:inline-flex;align-items:center;gap:7px}
.calc-trust svg{color:var(--brand)}
/* success */
.wiz-done{display:none;text-align:center;padding:20px 6px}
.wiz-done.on{display:block;animation:rise .5s var(--ease)}
.wiz-done .tick{width:66px;height:66px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);display:grid;place-items:center;margin:0 auto 18px}
.wiz-done h2{font-size:24px}
.wiz-done p{margin-top:10px;color:var(--text-soft);max-width:44ch;margin-inline:auto}
@media(max-width:860px){
  .calc-grid2{grid-template-columns:1fr}
  .calc-aside{position:static;order:-1}
  .opt-grid.two{grid-template-columns:1fr}
}

/* ══ Mega menu ══ */
.has-mega .sub.mega{width:min(920px,94vw);padding:20px;display:grid;grid-template-columns:1fr 1fr 1fr 238px;gap:4px 18px;border-radius:16px}
.mega-cols{display:contents}
.mg-col{display:flex;flex-direction:column;min-width:0}
.mg-col h5{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);padding:4px 10px 8px}
.mg-col a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--ink-3);white-space:nowrap;transition:background .18s,color .18s}
.mg-col a:hover{background:var(--brand-tint);color:var(--brand-deep)}
.mg-i{flex:none;width:15px;height:15px;color:var(--brand);display:grid;place-items:center}
.mg-i svg{width:15px;height:15px}
.mg-feature{display:flex;flex-direction:column;gap:5px;background:linear-gradient(158deg,var(--ink),oklch(0.28 0.06 45));border-radius:14px;padding:18px;color:var(--on-ink);transition:transform .25s var(--ease)}
.mg-feature:hover{transform:translateY(-2px)}
.mg-badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.79 0.14 50)}
.mg-feature strong{font-size:16px;font-weight:700;color:oklch(0.97 0.005 60);letter-spacing:-0.01em}
.mg-sub{font-size:12.5px;line-height:1.5;color:var(--on-ink-soft)}
.mg-go{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:600;color:oklch(0.82 0.14 50);display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--ease)}
.mg-feature:hover .mg-go{gap:11px}

/* ══ Mobile menu: creative ══ */
.m-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 10px}
.m-quick a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;font-size:14px;font-weight:600;border:1px solid var(--line);text-decoration:none}
.m-quick svg{width:17px;height:17px}
.m-call{background:var(--surface);color:var(--ink)}
.m-wa{background:oklch(0.72 0.19 148);color:#fff;border-color:transparent}
.m-menu .m-top{display:flex;align-items:center;gap:12px}
.m-menu .m-top svg{width:18px;height:18px;color:var(--brand);flex:none}
.m-menu .m-cta{margin:16px 0 4px;width:100%;justify-content:center;border-bottom:none}
.m-menu .m-sub a{border-bottom:none}

/* ══ Hero background motion ══ */
.hero-v4 .blob.b3{width:300px;height:300px;background:oklch(0.84 0.09 30/.3);top:38%;left:34%;animation-delay:-5s;animation-duration:19s}
.hero-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-orbs i{position:absolute;bottom:-30px;border-radius:50%;background:oklch(0.7 0.16 50/.3);animation:orbUp linear infinite}
.hero-orbs i:nth-child(1){left:8%;width:10px;height:10px;animation-duration:15s;animation-delay:0s}
.hero-orbs i:nth-child(2){left:22%;width:6px;height:6px;animation-duration:19s;animation-delay:3s}
.hero-orbs i:nth-child(3){left:37%;width:13px;height:13px;animation-duration:22s;animation-delay:6s}
.hero-orbs i:nth-child(4){left:58%;width:7px;height:7px;animation-duration:17s;animation-delay:1.5s}
.hero-orbs i:nth-child(5){left:73%;width:11px;height:11px;animation-duration:24s;animation-delay:8s}
.hero-orbs i:nth-child(6){left:88%;width:8px;height:8px;animation-duration:20s;animation-delay:4.5s}
@keyframes orbUp{0%{transform:translateY(0) scale(.5);opacity:0}10%{opacity:.9}90%{opacity:.5}100%{transform:translateY(-96vh) scale(1.15);opacity:0}}
@media (prefers-reduced-motion: reduce){.hero-orbs{display:none}.hero-v4 .blob.b3{animation:none}}

/* ══ Partner / free-zone + economic department strip ══ */
.partners{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partners .cap{color:var(--text-soft);font-weight:500}
.partners ul{gap:10px 12px}
.partners li{font-family:"Inter",sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 15px;box-shadow:0 1px 2px oklch(0.4 0.03 50/.05)}

/* form bits */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c-note{margin-top:10px;font-size:13.5px;font-weight:500;color:var(--brand-deep)}

/* ── Mega menu fixes: anchor to header width + beat base .sub a specificity ── */
.nav .wrap{position:relative}
.has-mega{position:static}
.has-mega .sub.mega{left:0;right:0;width:auto;max-width:920px;margin-inline:auto;transform:translateY(8px)}
.has-mega:hover .sub.mega,.has-mega.open .sub.mega{transform:translateY(0)}
.mega .mg-col a{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--ink-3)}
.mega .mg-col a:hover{background:var(--brand-tint);color:var(--brand-deep)}
.mega .mg-feature{display:flex;flex-direction:column;gap:5px;white-space:normal;padding:18px;border-radius:14px;background:linear-gradient(158deg,var(--ink),oklch(0.28 0.06 45));color:var(--on-ink)}
.mega .mg-feature:hover{background:linear-gradient(158deg,oklch(0.22 0.02 55),oklch(0.32 0.07 45));color:var(--on-ink)}
.mega .mg-feature strong{font-size:16px;font-weight:700;color:oklch(0.97 0.005 60);letter-spacing:-0.01em}

/* ── Partner strip: allow caption to wrap (was forcing horizontal scroll on mobile) ── */
.partners .cap{flex:0 1 auto;white-space:normal}
@media(max-width:820px){
  .partners .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .partners .cap{max-width:100%}
}

/* ── Hero headline: brand line + rotating service line ── */
.hero-v4 h1 em{font-style:normal;color:var(--brand)}
.hero-rot{margin-top:14px;font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:600;color:var(--text-soft);display:flex;align-items:baseline;gap:8px}
.hero-rot .rot{color:var(--brand-deep);font-weight:700}


/* ══ Services bento grid (mixed box types) ══ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:minmax(152px,auto);grid-auto-flow:row dense}
.bx{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:16px;border:1px solid var(--line);background:var(--bg);overflow:hidden;
    transition:transform .3s var(--ease),border-color .25s,box-shadow .25s}
.bx:hover{transform:translateY(-4px);border-color:oklch(0.78 0.1 50);box-shadow:0 14px 32px oklch(0.45 0.06 50/.12)}
.bx h3{font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.bx p{font-size:13.4px;line-height:1.6;color:var(--text-soft);margin-top:6px}
.bx-ic{width:42px;height:42px;flex:none;border-radius:11px;background:oklch(0.95 0.03 55);color:var(--brand-deep);display:grid;place-items:center;margin-bottom:14px;transition:background .25s,color .25s}
.bx-ic svg{width:21px;height:21px}
.bx:hover .bx-ic{background:var(--brand);color:#fff}
.bx-go{margin-top:auto;padding-top:14px;font-size:12.8px;font-weight:600;color:var(--brand-deep);display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--ease)}
.bx:hover .bx-go{gap:11px}

/* type 1: large dark anchor card */
.bx-lg{grid-column:span 2;grid-row:span 2;background:linear-gradient(150deg,var(--ink),oklch(0.27 0.055 45));border-color:transparent}
.bx-lg::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:oklch(0.66 0.185 45/.18);filter:blur(60px);right:-90px;bottom:-90px;pointer-events:none}
.bx-lg h3{color:oklch(0.97 0.005 60);font-size:25px}
.bx-lg p{color:var(--on-ink-soft);font-size:14.6px;max-width:42ch}
.bx-lg .bx-ic{width:50px;height:50px;background:oklch(0.32 0.07 45);color:oklch(0.85 0.14 50)}
.bx-lg .bx-ic svg{width:25px;height:25px}
.bx-lg:hover .bx-ic{background:var(--brand);color:#fff}
.bx-lg .bx-go{color:oklch(0.83 0.14 50)}
.bx-list{margin-top:16px;display:grid;gap:8px;font-size:13.4px;color:oklch(0.9 0.01 60);position:relative;z-index:1}
.bx-list li{display:flex;align-items:center;gap:9px}
.bx-list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--brand)}

/* type 2: tall brand-filled card */
.bx-tall{grid-row:span 2;background:linear-gradient(165deg,var(--brand),var(--brand-deep));border-color:transparent}
.bx-tall::after{content:"";position:absolute;inset:0;background:radial-gradient(220px 160px at 90% 0%,oklch(1 0 0/.2),transparent 70%);pointer-events:none}
.bx-tall h3{color:#fff;font-size:19px}
.bx-tall p{color:oklch(0.98 0.02 55);font-size:13.4px}
.bx-tall .bx-ic{background:oklch(1 0 0/.22);color:#fff}
.bx-tall:hover .bx-ic{background:#fff;color:var(--brand-deep)}
.bx-tall .bx-go{color:#fff}
.bx-badge{position:relative;z-index:1;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:oklch(1 0 0/.2);color:#fff;border-radius:100px;padding:4px 10px;margin-bottom:12px}

/* type 3: compact tinted card */
.bx-sm{padding:20px;background:var(--surface)}
.bx-sm h3{font-size:14.6px}
.bx-sm .bx-ic{width:36px;height:36px;margin-bottom:10px;background:var(--bg)}
.bx-sm .bx-ic svg{width:18px;height:18px}
.bx-sm p{font-size:12.6px;margin-top:4px}

@media(max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bx-lg{grid-column:span 2;grid-row:span 1}
  .bx-tall{grid-row:span 1}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .bx-lg{grid-column:span 1}
  .bx-lg h3{font-size:21px}
}

/* ══ Tighter vertical rhythm (same content, less dead space) ══ */
.sec{padding:70px 0}
.sec-head{margin-bottom:38px}
.svc2-head{margin-bottom:32px}

/* ══ Reusable horizontal rail / carousel ══ */
.rail-nav{display:flex;gap:8px;flex:none}
.rail-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s,opacity .2s}
.rail-btn svg{width:17px;height:17px}
.rail-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand-deep);background:var(--brand-tint)}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail{display:flex;align-items:stretch;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none}
/* service cards inside a rail */
.rail .bx{width:284px;grid-column:auto;grid-row:auto}
.rail .bx-lg{width:512px}
.rail .bx-lg p{max-width:none}
.rail .bx-tall{width:284px}
/* industry cards inside a rail */
.rail .ind{width:262px}
@media(max-width:640px){
  .rail .bx,.rail .bx-tall{width:78vw}
  .rail .bx-lg{width:88vw}
  .rail .ind{width:74vw}
}

/* ══ Uniform service boxes + orange gradient on hover ══ */
.rail .bx,.rail .bx-lg,.rail .bx-tall{width:286px}
.bx{min-height:262px;background:var(--bg);border:1px solid var(--line);isolation:isolate}
.bx::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0;
  background:linear-gradient(158deg,var(--brand),var(--brand-deep));transition:opacity .38s var(--ease)}
.bx>*{position:relative;z-index:1}
.bx:hover{border-color:transparent;box-shadow:0 16px 34px oklch(0.6 0.15 45/.3)}
.bx:hover::before{opacity:1}
.bx:hover h3,.bx:hover p,.bx:hover .bx-go{color:#fff}
.bx:hover .bx-ic{background:oklch(1 0 0/.22);color:#fff}
.bx h3,.bx p,.bx .bx-go,.bx-ic{transition:color .3s var(--ease),background .3s var(--ease)}
@media(max-width:640px){.rail .bx,.rail .bx-lg,.rail .bx-tall{width:78vw}}

/* ══ Service boxes: breathing room + softer light card ══ */
/* overflow-x:auto forces overflow-y to clip, which was cutting the hover lift + shadow
   off the top of the rail. Pad the scroll container vertically (never horizontally,
   so card 1 stays flush with the section heading). */
.rail{padding-top:12px;padding-bottom:26px}
.rail-wrap{margin-top:-12px}

/* lighter, softer card so it reads as an object on the near-white section */
.bx{background:linear-gradient(180deg,oklch(1 0 0),oklch(0.987 0.005 60));
    border:1px solid oklch(0.925 0.008 60);
    box-shadow:0 1px 2px oklch(0.5 0.03 50/.04),0 8px 20px oklch(0.5 0.03 50/.05)}
.bx-ic{background:oklch(0.965 0.018 55)}
.bx p{color:var(--text-soft)}

/* ══ Industry tiles: compact, clickable, same gradient hover ══ */
.rail .ind{width:252px;min-height:196px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;
  padding:20px;border-radius:14px;border:1px solid oklch(0.925 0.008 60);
  background:linear-gradient(180deg,oklch(1 0 0),oklch(0.987 0.005 60));
  box-shadow:0 1px 2px oklch(0.5 0.03 50/.04),0 8px 20px oklch(0.5 0.03 50/.05);
  transition:transform .3s var(--ease),border-color .25s,box-shadow .25s}
.rail .ind::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0;
  background:linear-gradient(158deg,var(--brand),var(--brand-deep));transition:opacity .38s var(--ease)}
.rail .ind>*{position:relative;z-index:1}
.rail .ind:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 16px 34px oklch(0.6 0.15 45/.3)}
.rail .ind:hover::before{opacity:1}
.rail .ind:hover h3,.rail .ind:hover p,.rail .ind:hover .ind-go{color:#fff}
.rail .ind:hover .ind-ic{background:oklch(1 0 0/.22);color:#fff}
.ind-ic{width:36px;height:36px;flex:none;border-radius:10px;background:oklch(0.965 0.018 55);color:var(--brand-deep);
  display:grid;place-items:center;margin-bottom:12px;transition:background .3s var(--ease),color .3s var(--ease)}
.ind-ic svg{width:18px;height:18px}
.rail .ind h3{font-size:14.6px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);transition:color .3s var(--ease)}
.rail .ind p{font-size:12.6px;line-height:1.55;color:var(--text-soft);margin-top:5px;transition:color .3s var(--ease)}
.ind-go{margin-top:auto;padding-top:12px;font-size:12px;font-weight:600;color:var(--brand-deep);
  display:inline-flex;align-items:center;gap:5px;transition:color .3s var(--ease),gap .25s var(--ease)}
.rail .ind:hover .ind-go{gap:9px}
/* cards sit on the tinted section, so lift them to white */
.sec-alt .rail .ind{background:#fff}
@media(max-width:640px){.rail .ind{width:74vw}}

/* ══ Industry tiles work in the grid layout too (not just a rail) ══ */
.inds{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.ind{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:196px;
  padding:20px;border-radius:14px;border:1px solid oklch(0.925 0.008 60);background:#fff;
  box-shadow:0 1px 2px oklch(0.5 0.03 50/.04),0 8px 20px oklch(0.5 0.03 50/.05);
  transition:transform .3s var(--ease),border-color .25s,box-shadow .25s}
.ind::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0;
  background:linear-gradient(158deg,var(--brand),var(--brand-deep));transition:opacity .38s var(--ease)}
.ind>*{position:relative;z-index:1}
.ind:hover{transform:translateY(-4px);border-color:transparent;background:#fff;
  box-shadow:0 16px 34px oklch(0.6 0.15 45/.3)}
.ind:hover::before{opacity:1}
.ind:hover h3,.ind:hover p,.ind:hover .ind-go{color:#fff}
.ind:hover .ind-ic{background:oklch(1 0 0/.22);color:#fff}
.ind h3{font-size:14.6px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);transition:color .3s var(--ease)}
.ind p{font-size:12.6px;line-height:1.55;color:var(--text-soft);margin-top:5px;transition:color .3s var(--ease)}

/* ══ Industry tiles: simple light hover (no bold gradient) ══ */
.ind::before{content:none}                       /* drop the orange gradient layer */
.ind:hover{background:var(--brand-tint);border-color:oklch(0.87 0.06 55);
  transform:translateY(-3px);box-shadow:0 10px 24px oklch(0.6 0.1 45/.12)}
.ind:hover h3{color:var(--ink)}
.ind:hover p{color:var(--text-soft)}
.ind:hover .ind-go{color:var(--brand-deep)}
.ind:hover .ind-ic{background:#fff;color:var(--brand-deep)}

/* ── "More" mega: green WhatsApp feature card to set it apart from Business Setup ── */
.mega .mg-feature-wa{background:linear-gradient(158deg,oklch(0.5 0.13 150),oklch(0.36 0.1 152))}
.mega .mg-feature-wa:hover{background:linear-gradient(158deg,oklch(0.56 0.14 150),oklch(0.4 0.11 152))}
.mega .mg-feature-wa .mg-badge{color:oklch(0.88 0.14 150)}
.mega .mg-feature-wa .mg-go{color:oklch(0.9 0.14 150)}

/* ══ Service boxes: simple light hover, matching the industry tiles ══ */
.bx::before{content:none}                        /* drop the orange gradient layer */
.bx:hover{background:var(--brand-tint);border-color:oklch(0.87 0.06 55);
  transform:translateY(-3px);box-shadow:0 10px 24px oklch(0.6 0.1 45/.12)}
.bx:hover h3{color:var(--ink)}
.bx:hover p{color:var(--text-soft)}
.bx:hover .bx-go{color:var(--brand-deep)}
.bx:hover .bx-ic{background:#fff;color:var(--brand-deep)}

/* ══ Inner-page hero: lighter overlay so the photo actually reads ══ */
/* was 94%/62% dark + a 96% bottom wash, which buried the image entirely.
   Now: strong enough behind the text (left), near-clear over the photo (right). */
.hero-scrim{background:
  linear-gradient(90deg,
    oklch(0.185 0.014 55/.86) 0%,
    oklch(0.185 0.014 55/.72) 32%,
    oklch(0.185 0.014 55/.40) 62%,
    oklch(0.185 0.014 55/.16) 100%),
  linear-gradient(to top, oklch(0.185 0.014 55/.55), transparent 62%)}
.page-hero{padding:88px 0 82px}
.page-hero .hero-photo{object-position:center 32%}
/* text stays legible over the lighter scrim */
.page-hero h1{text-shadow:0 2px 18px oklch(0.16 0.02 50/.55)}
.page-hero .lede{text-shadow:0 1px 12px oklch(0.16 0.02 50/.6)}
@media(max-width:760px){
  /* on narrow screens the text sits over the middle of the photo, so darken evenly */
  .hero-scrim{background:linear-gradient(to top,oklch(0.185 0.014 55/.92),oklch(0.185 0.014 55/.66))}
}

/* new hero photos are portrait, so they need almost no cropping in the arch */
.arch-wrap img{object-position:center 42%}

/* ══ Sticky glass header ══ */
/* At the top: fully transparent. Once scrolling: frosted glass so the content
   passing underneath stays visible through it, with a hairline + soft shadow
   to keep it separated from the page. */
.nav{background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .3s,box-shadow .3s,
             -webkit-backdrop-filter .35s var(--ease),backdrop-filter .35s var(--ease)}
.nav .wrap{transition:height .3s var(--ease)}
.nav .logo-img{transition:height .3s var(--ease)}

.nav.scrolled{
  background:oklch(1 0 0 / .62);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-color:oklch(0.9 0.012 60 / .85);
  box-shadow:0 8px 28px oklch(0.42 0.03 50 / .08)}
/* subtle shrink on scroll so it feels alive without jumping the layout */
.nav.scrolled .wrap{height:62px}
.nav.scrolled .logo-img{height:37px}

/* mobile menu open -> solid, or the panel is unreadable over page content */
.nav.open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}

/* browsers without backdrop-filter (older Firefox): fall back to near-solid */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nav.scrolled{background:oklch(1 0 0 / .96)}
}

/* (overflow guard removed: the real cause was .marq width, now fixed at source) */

/* ── Fix the real horizontal-overflow source: the marquee mask ──
   .marq wraps a max-content <ul> (duplicated for the loop). In the mobile column
   layout, align-items:flex-start let it shrink-to-content = ~3100px wide, blowing
   out the page. Constrain it explicitly instead of clipping the whole body. */
.marq{min-width:0;max-width:100%}
@media(max-width:820px){
  .partners .wrap{align-items:stretch}
  .marq{width:100%}
}

/* ══ Header: breathing room top + bottom ══ */
/* height was hard-pinned (72/62px), leaving the logo cramped against both edges.
   Switch to padding so the bar is sized by its content + real breathing space. */
.nav .wrap{height:auto;padding-top:20px;padding-bottom:20px}
.nav.scrolled .wrap{height:auto;padding-top:13px;padding-bottom:13px}

/* header: more generous vertical padding */
.nav .wrap{padding-top:28px;padding-bottom:28px}
.nav.scrolled .wrap{padding-top:18px;padding-bottom:18px}

/* people shots: keep faces in frame, don't crop heads */
.arch-wrap img{object-position:center 30%}

/* ══ Hero visual: single rectangular consultant shot (no arch/circle) ══ */
.hero-shot{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid oklch(0.88 0.03 55);
  box-shadow:0 26px 60px oklch(0.5 0.08 45/.22),0 2px 6px oklch(0.5 0.05 45/.08)}
.hero-shot img{display:block;width:100%;aspect-ratio:1/1.05;object-fit:cover;object-position:center 28%}
/* the old arch ring/shape no longer applies */
.ring{display:none}
@media(max-width:920px){.hero-shot{max-width:460px;margin:0 auto}}

/* the img carries width/height attrs (good for CLS) but that presentational
   height beats aspect-ratio unless height is explicitly auto */
.hero-shot img{height:auto}

/* ══ Hero visual: cut-out consultant (no frame) ══ */
/* The photo is shot on a studio-white backdrop. `mix-blend-mode:multiply` makes
   that white drop out against the hero gradient, giving a true cut-out silhouette
   with no box around it. The brightness/contrast nudge pushes the near-white
   backdrop to pure white so it disappears cleanly. */
.hero-v4 .wrap{z-index:auto}          /* don't isolate: the img must blend with the hero bg */
.hero-shot{display:none}
.hero-cut{position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:6px}
.hero-cut img{position:relative;z-index:1;display:block;width:100%;max-width:440px;height:auto;
  mix-blend-mode:multiply;filter:contrast(1.07) brightness(1.06)}
.cut-ring{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:74%;aspect-ratio:1;
  border:1.5px dashed oklch(0.72 0.12 50/.5);border-radius:50%;z-index:0;pointer-events:none}
.cut-ring-2{width:88%;top:12%;border-style:solid;border-color:oklch(0.8 0.07 50/.35)}
@media(max-width:920px){.hero-cut img{max-width:360px}}

/* ══════════ HERO v5: Dubai footage + corporate motion + lead magnet ══════════ */
@keyframes kb{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.18) translate3d(-1.6%,-1.2%,0)}}
@keyframes lineSweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

.hero-v5{position:relative;overflow:hidden;isolation:isolate;color:var(--on-ink)}
/* real Dubai stills, slow ken-burns + crossfade */
.hv-bg{position:absolute;inset:0;z-index:0}
.hv-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.6s ease;will-change:transform,opacity}
.hv-bg img.on{opacity:1;animation:kb 12s ease-out forwards}
/* brand-colour grade so the footage reads as Breeo, not stock */
.hv-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(95deg, oklch(0.17 0.02 45/.94) 0%, oklch(0.19 0.04 40/.86) 38%, oklch(0.28 0.09 40/.55) 68%, oklch(0.45 0.15 42/.38) 100%),
  linear-gradient(to top, oklch(0.15 0.02 45/.85), transparent 55%)}
/* corporate accent: slow vertical light lines */
.hv-grid-lines{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent)}
.hv-grid-lines i{position:absolute;top:0;width:1px;height:44%;
  background:linear-gradient(to bottom,transparent,oklch(0.85 0.14 55/.55),transparent);
  animation:lineSweep linear infinite}
.hv-grid-lines i:nth-child(1){left:18%;animation-duration:7s;animation-delay:0s}
.hv-grid-lines i:nth-child(2){left:42%;animation-duration:9s;animation-delay:2.2s}
.hv-grid-lines i:nth-child(3){left:66%;animation-duration:8s;animation-delay:4.1s}
.hv-grid-lines i:nth-child(4){left:88%;animation-duration:11s;animation-delay:1.3s}

.hero-v5 .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 420px;
  gap:56px;align-items:center;padding-top:74px;padding-bottom:78px}

/* left copy: short */
.hero-v5 .hero-badge2{background:oklch(1 0 0/.12);border-color:oklch(1 0 0/.26);color:oklch(0.95 0.03 60);backdrop-filter:blur(6px)}
.hero-v5 .hero-badge2 svg{color:oklch(0.82 0.15 55)}
.hero-v5 h1{color:#fff;font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-0.03em}
.hero-v5 h1 em{font-style:normal;color:oklch(0.78 0.16 50)}
.hero-v5 .rot{color:oklch(0.78 0.16 50)}
.hv-line{margin-top:16px;font-size:17px;line-height:1.6;color:oklch(0.9 0.02 60);max-width:40ch}
.hv-ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;list-style:none}
.hv-ticks li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:oklch(0.94 0.015 60)}
.hv-ticks svg{width:14px;height:14px;color:oklch(0.8 0.16 50);flex:none}

/* lead magnet card */
.lead-card{position:relative;background:oklch(0.995 0.003 60);border-radius:20px;padding:26px 26px 22px;
  box-shadow:0 30px 70px oklch(0.1 0.02 45/.42),0 2px 8px oklch(0.1 0.02 45/.2)}
.lead-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-deep);background:oklch(0.95 0.035 55);border-radius:100px;padding:5px 12px;margin-bottom:10px}
.lead-head h2{font-size:21px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.lead-head p{margin-top:6px;font-size:13.4px;line-height:1.55;color:var(--text-soft)}
.lead-card form{margin-top:16px;display:grid;gap:12px}
.lf label{display:block;font-size:12.4px;font-weight:600;color:var(--ink);margin-bottom:5px}
.lf input,.lf select{width:100%;padding:11px 13px;font:inherit;font-size:14.4px;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.lf input:focus,.lf select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px oklch(0.66 0.185 45/.14)}
.lf input.bad{border-color:oklch(0.6 0.22 27)}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lf-submit{width:100%;justify-content:center;margin-top:2px}
.lf-note{font-size:11.4px;line-height:1.5;color:var(--text-soft);text-align:center}
.lf-note a{color:var(--brand-deep);font-weight:600}
/* success state */
.lead-done{display:none;text-align:center;padding:14px 4px 6px}
.lead-done.on{display:block;animation:rise .5s var(--ease)}
.lead-done .tick{width:54px;height:54px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);
  display:grid;place-items:center;margin:0 auto 14px}
.lead-done h3{font-size:19px;font-weight:800;color:var(--ink)}
.lead-done p{margin:8px 0 18px;font-size:13.4px;color:var(--text-soft)}

/* nav sits over a dark hero until it becomes glass */
body.dark-hero .nav:not(.scrolled) .nav-links a,
body.dark-hero .nav:not(.scrolled) .has-sub>a{color:oklch(0.96 0.01 60)}
body.dark-hero .nav:not(.scrolled) .nav-links a:hover{color:#fff}
body.dark-hero .nav:not(.scrolled) .caret{color:oklch(0.82 0.15 55)}
body.dark-hero .nav:not(.scrolled) .burger{border-color:oklch(1 0 0/.3)}
body.dark-hero .nav:not(.scrolled) .burger svg{color:#fff}
body.dark-hero .nav:not(.scrolled) .logo-img{filter:brightness(0) invert(1)}

@media(max-width:980px){
  .hero-v5 .wrap{grid-template-columns:1fr;gap:36px;padding-top:52px;padding-bottom:56px}
  .lead-card{max-width:460px}
}
@media (prefers-reduced-motion: reduce){
  .hv-bg img.on{animation:none}
  .hv-grid-lines{display:none}
}

/* ── Homepage: let the Dubai hero run UNDER the transparent nav ──
   The nav is sticky (in-flow), so by default it sits on the white page bg above
   the hero and its light text was invisible. Pull the hero up under it and pad
   the content back down, so the nav overlays the footage like a real corporate site. */
:root{--nav-h:102px}
body.dark-hero .hero-v5{margin-top:calc(-1 * var(--nav-h))}
body.dark-hero .hero-v5 .wrap{padding-top:calc(74px + var(--nav-h))}

/* ══════════ HERO v6: coded 3D "business setup process" scene ══════════ */
/* No stock photo, no zoom. Four 3D tiles (Activity -> Licence -> Visa -> Bank)
   float on an isometric plane while a spark travels the path and each step
   lights up in sequence. Pure CSS: infinitely sharp, ~0 KB, on-brand. */
@keyframes floatY{0%,100%{transform:translateY(0) rotateX(52deg) rotateZ(-45deg)}
                  50%{transform:translateY(-14px) rotateX(52deg) rotateZ(-45deg)}}
@keyframes stepGlow{0%,72%,100%{box-shadow:0 8px 0 oklch(0.42 0.12 42),0 16px 0 oklch(0.3 0.08 42),0 30px 46px oklch(0.08 0.02 45/.65);
                                filter:brightness(.72) saturate(.85)}
                    12%,52%{box-shadow:0 8px 0 oklch(0.52 0.16 45),0 16px 0 oklch(0.36 0.11 45),0 30px 60px oklch(0.66 0.19 45/.6);
                            filter:brightness(1.18) saturate(1.15)}}
@keyframes lblGlow{0%,72%,100%{opacity:.42}12%,52%{opacity:1}}
@keyframes sparkRun{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes planeDrift{0%{background-position:0 0}100%{background-position:120px 60px}}

.hero-v5{background:linear-gradient(150deg,oklch(0.17 0.02 45),oklch(0.22 0.05 40) 55%,oklch(0.3 0.09 42))}
/* base wash + brand glows */
.hv-base{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(760px 520px at 74% 18%, oklch(0.6 0.18 45/.34), transparent 66%),
  radial-gradient(600px 460px at 8% 92%, oklch(0.45 0.14 40/.3), transparent 70%)}
/* receding isometric grid = corporate depth */
.hv-plane{position:absolute;left:-20%;right:-20%;bottom:-14%;height:78%;z-index:0;pointer-events:none;
  transform:perspective(760px) rotateX(64deg);transform-origin:bottom center;opacity:.5;
  background-image:linear-gradient(oklch(0.8 0.12 50/.16) 1px,transparent 1px),
                   linear-gradient(90deg,oklch(0.8 0.12 50/.16) 1px,transparent 1px);
  background-size:60px 60px;animation:planeDrift 9s linear infinite;
  -webkit-mask-image:linear-gradient(to top,black,transparent 78%);
  mask-image:linear-gradient(to top,black,transparent 78%)}

/* the 3D process chain */
.flow3d{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,black 55%,transparent 88%);
  mask-image:linear-gradient(90deg,black 55%,transparent 88%)}
.fnode{position:absolute;transform-style:preserve-3d}
.n1{left:9%;top:60%}  .n2{left:27%;top:47%}  .n3{left:45%;top:34%}  .n4{left:63%;top:21%}
.ftile{width:86px;height:86px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(150deg,oklch(0.74 0.17 48),oklch(0.55 0.17 42));
  transform:rotateX(52deg) rotateZ(-45deg);transform-style:preserve-3d;
  animation:floatY 6s ease-in-out infinite, stepGlow 8s ease-in-out infinite}
.n2 .ftile{animation-delay:-1.2s,1.6s}
.n3 .ftile{animation-delay:-2.4s,3.2s}
.n4 .ftile{animation-delay:-3.6s,4.8s}
.fico{color:oklch(0.99 0.01 60);transform:rotateZ(45deg) rotateX(-52deg);display:grid;place-items:center}
.fico svg{width:34px;height:34px;filter:drop-shadow(0 2px 4px oklch(0.2 0.05 40/.5))}
.flbl{position:absolute;left:50%;top:112px;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.95 0.04 55);
  animation:lblGlow 8s ease-in-out infinite}
.n2 .flbl{animation-delay:1.6s} .n3 .flbl{animation-delay:3.2s} .n4 .flbl{animation-delay:4.8s}
/* connecting path + travelling spark */
.fline{position:absolute;left:11%;top:24%;width:56%;height:46%;
  border-left:0;border-top:1.5px dashed oklch(0.8 0.13 50/.32);
  transform:rotate(0deg);border:none;
  background:linear-gradient(to top right,transparent calc(50% - 1px),oklch(0.8 0.13 50/.3) calc(50% - 1px),oklch(0.8 0.13 50/.3) calc(50% + 1px),transparent calc(50% + 1px))}
.fspark{position:absolute;width:9px;height:9px;border-radius:50%;background:oklch(0.92 0.16 60);
  box-shadow:0 0 14px 4px oklch(0.8 0.19 50/.85);
  offset-path:path("M 0 300 L 640 0");offset-rotate:0deg;
  animation:sparkRun 8s linear infinite}

@media(max-width:980px){ .flow3d,.hv-plane{opacity:.5} .n4{display:none} }
@media (prefers-reduced-motion: reduce){
  .ftile,.flbl,.fspark,.hv-plane{animation:none}
  .flbl{opacity:.9}
}

/* ── 3D scene fixes: layer above the scrim, brighter tiles, better composition ── */
/* .flow3d and .hv-scrim were both z-index:1, so the scrim (later in DOM) buried
   the tiles. Lift the scene above the scrim; .wrap still wins (same z, later DOM). */
.flow3d{z-index:2;
  -webkit-mask-image:linear-gradient(90deg,black 60%,transparent 84%);
  mask-image:linear-gradient(90deg,black 60%,transparent 84%)}
/* spread the chain across the hero on a clean diagonal */
.n1{left:6%;top:66%} .n2{left:23%;top:53%} .n3{left:40%;top:40%} .n4{left:57%;top:27%}
/* readable at rest, brand-lit on its turn */
@keyframes stepGlow{
  0%,72%,100%{box-shadow:0 7px 0 oklch(0.4 0.11 42),0 14px 0 oklch(0.28 0.07 42),0 26px 40px oklch(0.08 0.02 45/.6);
              filter:brightness(.9) saturate(1)}
  12%,52%{box-shadow:0 7px 0 oklch(0.54 0.16 45),0 14px 0 oklch(0.38 0.11 45),0 26px 58px oklch(0.68 0.19 50/.7);
          filter:brightness(1.25) saturate(1.2)}}
@keyframes lblGlow{0%,72%,100%{opacity:.55}12%,52%{opacity:1}}
.ftile{width:92px;height:92px}
.fico svg{width:36px;height:36px}
/* let the scene read through: lighten the scrim over the middle band */
.hv-scrim{background:
  linear-gradient(95deg, oklch(0.16 0.02 45/.92) 0%, oklch(0.18 0.035 42/.78) 30%,
                  oklch(0.2 0.05 42/.34) 56%, oklch(0.24 0.07 42/.18) 76%, oklch(0.3 0.1 42/.3) 100%),
  linear-gradient(to top, oklch(0.14 0.02 45/.7), transparent 60%)}

/* ── Compose with the scrim instead of fighting it ──
   Scene sits UNDER the scrim: over the copy (left, 92% dark) it reads as quiet
   texture; in the open middle band (34%) it comes through bright. */
.flow3d{z-index:1;
  -webkit-mask-image:linear-gradient(90deg,black 58%,transparent 80%);
  mask-image:linear-gradient(90deg,black 58%,transparent 80%)}
.n1{left:17%;top:73%} .n2{left:31%;top:59%} .n3{left:45%;top:45%} .n4{left:57%;top:31%}

/* ══════════ HERO v6 → LIGHT theme (warm gradient, per reference) ══════════ */
/* Same warm cream→peach wash as before; the 3D process scene and lead form
   are re-toned for a light surface. */
.hero-v5{background:
  radial-gradient(780px 540px at 88% 2%, oklch(0.9 0.062 55/.62), transparent 66%),
  radial-gradient(660px 480px at 2% 96%, oklch(0.92 0.05 60/.55), transparent 70%),
  linear-gradient(160deg, oklch(0.995 0.006 60), oklch(0.963 0.022 57))}
.hv-base{background:
  radial-gradient(700px 500px at 76% 16%, oklch(0.86 0.075 52/.5), transparent 68%),
  radial-gradient(560px 440px at 6% 90%, oklch(0.9 0.05 45/.45), transparent 72%)}
/* the scrim only needs to keep the copy clean now, not darken the hero */
.hv-scrim{background:linear-gradient(95deg,
  oklch(0.995 0.006 60/.86) 0%, oklch(0.99 0.01 58/.6) 28%,
  oklch(0.99 0.012 58/.12) 52%, transparent 72%)}
/* receding grid: warm lines on light */
.hv-plane{opacity:.42;background-image:
  linear-gradient(oklch(0.68 0.14 48/.22) 1px,transparent 1px),
  linear-gradient(90deg,oklch(0.68 0.14 48/.22) 1px,transparent 1px)}
/* accent light-lines read darker on a light bg */
.hv-grid-lines i{background:linear-gradient(to bottom,transparent,oklch(0.7 0.16 50/.4),transparent)}
.hero-orbs i{background:oklch(0.7 0.16 50/.28)}

/* copy back to ink */
.hero-v5 h1{color:var(--ink)}
.hero-v5 h1 em,.hero-v5 .rot{color:var(--brand)}
.hv-line{color:var(--text-soft)}
.hv-ticks li{color:var(--ink-2)}
.hv-ticks svg{color:var(--brand)}
.hero-v5 .hero-badge2{background:oklch(0.95 0.035 55);border-color:oklch(0.86 0.07 55);
  color:var(--brand-deep);backdrop-filter:none}
.hero-v5 .hero-badge2 svg{color:var(--brand)}

/* 3D tiles: warm shadows instead of near-black, so they sit on light */
@keyframes stepGlow{
  0%,72%,100%{box-shadow:0 7px 0 oklch(0.55 0.13 42),0 14px 0 oklch(0.45 0.1 42),0 22px 34px oklch(0.55 0.12 45/.28);
              filter:brightness(.97) saturate(.95)}
  12%,52%{box-shadow:0 7px 0 oklch(0.6 0.16 45),0 14px 0 oklch(0.48 0.13 45),0 26px 52px oklch(0.66 0.19 50/.5);
          filter:brightness(1.12) saturate(1.15)}}
@keyframes lblGlow{0%,72%,100%{opacity:.45}12%,52%{opacity:1}}
.flbl{color:var(--brand-deep);text-shadow:none}

/* lead card needs definition on a light surface */
.lead-card{border:1px solid oklch(0.9 0.02 55);
  box-shadow:0 24px 60px oklch(0.55 0.09 45/.18),0 2px 6px oklch(0.5 0.05 45/.08)}

/* nav is over a LIGHT hero now: dark text, coloured logo */
body.dark-hero .nav:not(.scrolled) .nav-links a,
body.dark-hero .nav:not(.scrolled) .has-sub>a{color:var(--ink-3)}
body.dark-hero .nav:not(.scrolled) .nav-links a:hover{color:var(--ink)}
body.dark-hero .nav:not(.scrolled) .caret{color:var(--brand)}
body.dark-hero .nav:not(.scrolled) .burger{border-color:var(--line)}
body.dark-hero .nav:not(.scrolled) .burger svg{color:var(--ink)}
body.dark-hero .nav:not(.scrolled) .logo-img{filter:none}

/* On the light hero the scrim can no longer hide the scene, so the process
   chain moves into the open band under the copy (y 568-756) and runs bright. */
.flow3d{z-index:2}
.hv-scrim{background:linear-gradient(100deg,
  oklch(0.995 0.006 60/.5) 0%, oklch(0.99 0.01 58/.22) 34%, transparent 60%)}
.n1{left:10%;top:82%}
.n2{left:24%;top:80%}
.n3{left:38%;top:78%}
.n4{left:52%;top:76%}
.flbl{opacity:1;animation:lblGlow 8s ease-in-out infinite}

/* Labels must stay legible at every frame: the step cue rides on colour and
   weight, never on opacity (lblGlow used to drop them to .45 for most of the
   8s cycle, which read as missing text). */
@keyframes lblGlow{
  0%,72%,100%{color:var(--ink-3);letter-spacing:.06em}
  12%,52%{color:var(--brand-deep);letter-spacing:.1em}}
.flbl{opacity:1 !important;color:var(--ink-3);font-weight:700}
@media (prefers-reduced-motion:reduce){.flbl{animation:none;color:var(--ink-3)}}

/* Tiles are static now (user request): no float, no sequenced glow, no label
   cycling. Each tile holds one good lit state instead of animating into it. */
.ftile{animation:none !important;
  box-shadow:0 7px 0 oklch(0.58 0.15 44),0 14px 0 oklch(0.47 0.12 44),
             0 24px 44px oklch(0.6 0.15 47/.32);
  filter:none}
.flbl{animation:none !important;color:var(--brand-deep);letter-spacing:.08em}

/* ══════════ hero v6: CTA row + proof stats under the copy ══════════ */
.hv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hv-cta .btn{padding:14px 28px}
/* base .btn-ghost is built for dark surfaces (light text on dark line); the
   light hero needs the inverse or it renders invisible. */
.hero-v5 .btn-ghost{color:var(--ink);border:1px solid oklch(0.86 0.04 55);
  background:oklch(1 0 0/.75)}
.hero-v5 .btn-ghost:hover{background:oklch(1 0 0/.9);border-color:var(--brand);color:var(--brand-deep)}
.hero-v5 .btn-ghost svg{color:oklch(0.6 0.16 145)}

.hv-stats{margin-top:34px;padding-top:26px;border-top:1px solid oklch(0.9 0.02 55);
  list-style:none;gap:14px 40px}
.hv-stats .n{font-size:26px;font-weight:800}
.hv-stats .l{font-size:12px;letter-spacing:.02em}

@media (max-width:900px){
  .hv-cta .btn{flex:1 1 auto;justify-content:center}
  .hv-stats{gap:16px 26px;margin-top:26px;padding-top:20px}
  .hv-stats .n{font-size:22px}
}

/* the hero paragraph is a full sentence now, not a one-liner: 40ch made it a
   narrow tall column. CTA buttons removed, so stats sit closer to the ticks. */
.hero-v5 .hv-line{max-width:56ch;font-size:16.5px;margin-top:18px}
.hv-stats{margin-top:30px}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGE LAYOUT SYSTEM
   Replaces the old formula (every section = centred head + uniform grid
   of identical boxes, 70px padding throughout) with distinct section
   types. Pages compose these so no two consecutive sections share a
   shape, and rhythm comes from alternating light/tint/ink surfaces.
   Design-led: brand-drawn panels instead of stock photography.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. SPLIT: sticky asymmetric heading + content. Fixes the alignment
      complaint by giving the head a real column instead of floating it. ── */
.split{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7fr);gap:56px;align-items:start}
.split-head{position:sticky;top:120px}
.split-head .rule{margin-bottom:22px}
.split-head h2{font-size:clamp(1.75rem,2.9vw,2.35rem);line-height:1.15;letter-spacing:-0.02em}
.split-head p{margin-top:15px;color:var(--text-soft);font-size:16px;line-height:1.65}
.split-head .split-note{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--text-soft)}
.split-head .split-note b{color:var(--brand-deep);font-weight:700}

/* ── 2. LEDGER: numbered rows, not boxes. Big ghost numeral + rule.
      Used where the old build stamped another card grid. ── */
.ledger{border-top:1px solid var(--line)}
.ledger-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:baseline;
  padding:22px 4px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.ledger-row:hover{background:oklch(0.98 0.012 58);padding-left:14px;padding-right:14px}
.ledger-num{font-size:15px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;
  min-width:2.2ch;letter-spacing:-0.01em}
.ledger-row h3{font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.ledger-row p{margin-top:5px;font-size:14.5px;line-height:1.6;color:var(--text-soft)}

/* ── 3. BENTO: deliberately unequal tiles. The first is a brand panel
      spanning two columns, so the grid reads as composed, not stamped. ── */
.bento2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bento2 .bt{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--bg);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.bento2 .bt:hover{border-color:oklch(0.84 0.07 55);transform:translateY(-3px);
  box-shadow:0 14px 34px oklch(0.55 0.09 45/.1)}
.bento2 .bt h3{font-size:16px;font-weight:700;letter-spacing:-0.01em}
.bento2 .bt p{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--text-soft)}
.bento2 .bt-lead{grid-column:span 2;background:
  linear-gradient(140deg, oklch(0.97 0.03 58), oklch(0.93 0.055 52));
  border-color:oklch(0.87 0.06 55)}
.bento2 .bt-lead h3{font-size:20px}
.bento2 .bt-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-deep);margin-bottom:14px}
.bento2 .bt-ico svg{width:19px;height:19px}

/* ── 4. STATBAND: ink surface. The tonal break that stops five white
      sections stacking into one grey blur. ── */
.statband{background:var(--ink);color:var(--on-ink);padding:54px 0}
.statband .sb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:30px 24px}
.statband .sb h3{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-0.02em;
  color:oklch(0.97 0.005 60);line-height:1.05}
.statband .sb h3 em{font-style:normal;color:oklch(0.78 0.16 50)}
.statband .sb p{margin-top:7px;font-size:13.5px;color:var(--on-ink-soft);line-height:1.5}
.statband .sb-lede{max-width:52ch;margin-bottom:34px;font-size:16px;color:var(--on-ink-soft)}
.statband .sb-lede b{color:oklch(0.97 0.005 60);font-weight:700}

/* ── 5. COSTCARD: real figures in a panel, replacing the cost paragraph. ── */
.costwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:44px;align-items:start}
.costcard{border:1px solid oklch(0.88 0.045 55);border-radius:18px;overflow:hidden;
  box-shadow:0 20px 50px oklch(0.55 0.09 45/.1)}
.costcard .cc-top{background:linear-gradient(140deg, oklch(0.7 0.17 47), oklch(0.6 0.16 40));
  color:oklch(0.99 0.005 60);padding:22px 24px}
.costcard .cc-top span{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.costcard .cc-top strong{display:block;margin-top:5px;font-size:30px;font-weight:800;letter-spacing:-0.02em}
.costcard .cc-top small{display:block;margin-top:3px;font-size:12.5px;opacity:.9}
.costcard ul{list-style:none;padding:8px 24px 4px}
.costcard li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.costcard li:last-child{border-bottom:none}
.costcard li span{color:var(--text-soft)}
.costcard li b{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.costcard .cc-foot{padding:16px 24px 22px;border-top:1px solid var(--line);background:oklch(0.985 0.008 58)}
.costcard .cc-foot .btn{width:100%;justify-content:center}
.costcard .cc-note{margin-top:10px;font-size:12px;color:var(--text-soft);text-align:center}

/* ── 6. CTASTRIP: inline brand band, breaks long pages ── */
.ctastrip{background:linear-gradient(120deg, oklch(0.68 0.17 47), oklch(0.58 0.155 38));
  border-radius:20px;padding:34px 38px;display:flex;flex-wrap:wrap;gap:22px;
  align-items:center;justify-content:space-between;color:oklch(0.99 0.005 60)}
.ctastrip h3{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;letter-spacing:-0.02em;max-width:26ch}
.ctastrip p{margin-top:7px;font-size:14.5px;opacity:.94;max-width:46ch}
.ctastrip .btn{background:oklch(0.99 0.005 60);color:var(--brand-deep);font-weight:600}
.ctastrip .btn:hover{background:oklch(0.96 0.02 58)}

/* ── section rhythm: vary padding by surface so pages breathe unevenly
      (uniform 104/70px everywhere was the flat feeling) ── */
.sec-tight{padding:64px 0}
.sec-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:30px}
  .split-head{position:static}
  .costwrap{grid-template-columns:1fr;gap:28px}
  .bento2{grid-template-columns:1fr}
  .bento2 .bt-lead{grid-column:span 1}
  .ctastrip{padding:26px 24px}
  .statband{padding:42px 0}
  .sec-tight{padding:48px 0}
}
@media (min-width:901px) and (max-width:1100px){
  .bento2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento2 .bt-lead{grid-column:span 2}
}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGE HERO v2 + reference components (per virtuzone.com)
   The reference uses NO hero photography on inner pages: typography
   led, two CTAs, plain treated background. That also removes the
   wrong-photo problem at the root (Sharjah/Abu Dhabi pages were
   serving dubai-panorama.jpg, every free zone page dubai-south.webp).
   ═══════════════════════════════════════════════════════════════════ */
.page-hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 520px at 82% -10%, oklch(0.34 0.055 45), transparent 62%),
  radial-gradient(700px 460px at 4% 108%, oklch(0.28 0.04 40), transparent 66%),
  linear-gradient(150deg, oklch(0.2 0.018 52), oklch(0.165 0.014 48));
  padding:96px 0 88px}
.page-hero .hero-photo{display:none}          /* photography removed, see above */
.page-hero .hero-scrim{display:none}
.ph-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(520px 320px at 88% 8%, oklch(0.62 0.16 48/.22), transparent 70%)}
.ph-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg, oklch(0.75 0.1 50/.09) 1px, transparent 1px);
  background-size:132px 100%;
  -webkit-mask-image:linear-gradient(100deg,#000 8%,transparent 62%);
  mask-image:linear-gradient(100deg,#000 8%,transparent 62%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.ph-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding-top:24px;
  border-top:1px solid oklch(1 0 0/.12);list-style:none}
.ph-facts li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--on-ink-soft)}
.ph-facts svg{width:15px;height:15px;color:oklch(0.78 0.16 50);flex:none}

/* ── comparison table (reference has free zone vs mainland vs offshore) ── */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{background:oklch(0.98 0.012 58);font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.cmp thead th:first-child{background:var(--bg)}
.cmp tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.cmp td{color:var(--text-soft)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:oklch(0.985 0.01 58)}
.cmp .yes{color:var(--brand-deep);font-weight:600}
.cmp-note{margin-top:12px;font-size:12.5px;color:var(--text-soft)}

/* ── FAQ on inner pages: reuse the homepage accordion, single column ── */
.faq-inner .wrap{display:block}
.faq-inner details{border-bottom:1px solid var(--line)}
.faq-inner summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-weight:600;font-size:16px;color:var(--ink)}
.faq-inner summary::-webkit-details-marker{display:none}
.faq-inner summary::after{content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq-inner details[open] summary::after{transform:rotate(-135deg)}
.faq-inner details p{padding:0 40px 20px 0;color:var(--text-soft);font-size:15px;line-height:1.7}

@media (max-width:900px){
  .page-hero{padding:64px 0 56px}
  .ph-facts{gap:8px 18px;margin-top:22px;padding-top:18px}
  .cmp th,.cmp td{padding:12px 14px}
}

/* ═══════════════ INNER HERO v3: image band restored ═══════════════
   Photo returns, but each page gets an image that is TRUE for its own
   title: Dubai pages get Dubai, Abu Dhabi gets Abu Dhabi, and emirates
   we have no authentic photo of get business imagery (the subject is
   "company setup") rather than a wrong city's skyline. */
.page-hero{padding:0}
.ph-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0;align-items:stretch;min-height:400px}
.ph-text{padding:78px 56px 72px 0;display:flex;flex-direction:column;justify-content:center}
.ph-media{position:relative;overflow:hidden;border-radius:20px;margin:26px 0 26px 8px;
  box-shadow:0 26px 60px oklch(0.1 0.02 50/.45)}
.ph-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);animation:phZoom 22s ease-out forwards}
@keyframes phZoom{to{transform:scale(1.12)}}
.ph-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, oklch(0.18 0.015 50/.72) 0%, oklch(0.2 0.02 48/.14) 48%, transparent 78%),
             linear-gradient(to top, oklch(0.55 0.15 42/.3), transparent 55%)}
.ph-media .ph-tag{position:absolute;left:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;background:oklch(0.16 0.02 50/.6);
  color:oklch(0.97 0.005 60);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid oklch(1 0 0/.16)}
.ph-media .ph-tag i{width:6px;height:6px;border-radius:50%;background:oklch(0.75 0.17 50);flex:none}

@media (max-width:960px){
  .ph-inner{grid-template-columns:1fr;min-height:0}
  .ph-text{padding:56px 0 34px}
  .ph-media{margin:0 0 0 0;border-radius:16px;height:210px;order:2}
  .ph-media img{animation:none;transform:none}
}

/* ── card polish: the check tiles were flat outlines, give them weight ── */
.check-grid{gap:13px}
.check{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  align-items:flex-start;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.check:hover{border-color:oklch(0.86 0.06 55);transform:translateY(-2px);
  box-shadow:0 12px 28px oklch(0.55 0.09 45/.09)}
.check svg{margin-top:2px;padding:3px;width:21px;height:21px;border-radius:6px;
  background:var(--brand-tint);color:var(--brand-deep);flex:none;box-sizing:border-box}
.sec-alt .check{background:var(--bg)}

/* ── Hero art panels for pages where no honest photo exists.
   There is no usable free photo of "a golden visa" or "a bank account";
   the only CC0 passport shot was US Customs, which would be another
   mismatch. These are drawn instead: exactly on topic, always sharp. ── */
.ph-art{position:relative;overflow:hidden;border-radius:20px;margin:26px 0 26px 8px;
  display:grid;place-items:center;padding:30px;
  background:radial-gradient(120% 120% at 20% 0%, oklch(0.32 0.05 48), oklch(0.19 0.02 46));
  box-shadow:0 26px 60px oklch(0.1 0.02 50/.45)}
.ph-art::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg, oklch(0.75 0.1 50/.08) 1px, transparent 1px),
                   linear-gradient(oklch(0.75 0.1 50/.08) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent);
  mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent)}

/* the card object */
.pcard{position:relative;width:min(340px,100%);aspect-ratio:1.586/1;border-radius:16px;padding:20px;
  display:flex;flex-direction:column;justify-content:space-between;color:oklch(0.99 0.005 60);
  box-shadow:0 22px 44px oklch(0.08 0.02 45/.55), 0 2px 0 oklch(1 0 0/.16) inset;
  transform:rotate(-6deg);animation:cardFloat 7s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-9px)}}
.pcard-gold{background:linear-gradient(135deg, oklch(0.78 0.14 78), oklch(0.62 0.15 55) 52%, oklch(0.5 0.13 42))}
.pcard-bank{background:linear-gradient(135deg, oklch(0.66 0.17 47), oklch(0.44 0.1 40))}
.pcard .pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pcard .pc-kind{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.pcard .pc-flag{width:26px;height:17px;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px oklch(1 0 0/.3)}
.pcard .pc-flag i{flex:1}
.pcard .pc-flag i:nth-child(1){background:#00732f}
.pcard .pc-flag i:nth-child(2){background:#fff}
.pcard .pc-flag i:nth-child(3){background:#000}
.pcard .pc-chip{width:38px;height:28px;border-radius:6px;
  background:linear-gradient(135deg, oklch(0.9 0.09 90), oklch(0.72 0.11 80));
  box-shadow:0 1px 2px oklch(0.2 0.02 45/.5) inset}
.pcard .pc-name{font-size:15px;font-weight:800;letter-spacing:-0.01em;line-height:1.15}
.pcard .pc-sub{margin-top:3px;font-size:10.5px;font-weight:500;opacity:.9;letter-spacing:.03em}
.pcard .pc-rows{display:flex;gap:14px;font-size:9.5px;letter-spacing:.08em;opacity:.9;font-variant-numeric:tabular-nums}
.ph-art .ph-tag{position:absolute;left:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;background:oklch(0.16 0.02 50/.6);
  color:oklch(0.97 0.005 60);font-size:12.5px;font-weight:600;border:1px solid oklch(1 0 0/.16)}
.ph-art .ph-tag i{width:6px;height:6px;border-radius:50%;background:oklch(0.75 0.17 50);flex:none}

@media (max-width:960px){
  .ph-art{margin:0;height:230px;order:2;padding:20px}
  .pcard{width:min(280px,86%)}
}
@media (prefers-reduced-motion:reduce){.pcard{animation:none}}
/* CC BY-SA attribution for the Sharjah and Ajman photos (licence requirement) */
.photo-credit{font-size:11.5px;opacity:.62;line-height:1.5;display:block;max-width:62ch}
.photo-credit a{text-decoration:underline}

/* Golden visa + bank account: drop the framed panel entirely so the card
   sits directly on the hero, no box, no grid texture, no caption chip. */
.ph-art{background:none;box-shadow:none;border-radius:0;margin:0;padding:20px 0}
.ph-art::before{display:none}
.ph-art .ph-tag{display:none}
.ph-art .pcard{width:min(380px,100%);
  box-shadow:0 30px 60px oklch(0.06 0.02 45/.62), 0 2px 0 oklch(1 0 0/.18) inset}
@media (max-width:960px){
  .ph-art{height:auto;padding:6px 0 26px}
  .ph-art .pcard{width:min(320px,88%)}
}