/* ==========================================================================
   MAGNITU — FINAL DESIGN SYSTEM
   Editorial direction (Concept 1), applied to the agreed content.
   Every token below is the single source of truth. Port to theme.json.
   ========================================================================== */
:root{
  /* canvas */
  --canvas:#F8FAFC;        /* page background */
  --pure:#FFFFFF;          /* cards, panels */
  --subtle:#F1F5F9;        /* alternate bands */
  --obsidian:#0B0F17;      /* dark punctuation sections */
  --obsidian-2:#141A24;    /* cards on dark */

  /* hairlines — the structural device of the whole system */
  --hair:#E2E8F0;
  --hair-strong:#CBD5E1;
  --hair-dark:rgba(255,255,255,.12);

  /* ink */
  --ink:#0F172A;
  --ink-2:#475569;
  --ink-3:#64748B;
  --ink-dark:#E2E8F0;
  --ink-dark-2:#94A3B8;

  /* ACTION COLOUR — one token, used only for CTAs, links and live markers.
     Two candidates under consideration. Set on <html data-accent="...">.
     Teal is the default here; use the toggle in the utility bar to compare. */
  --action:#0D9488;
  --action-dark:#0F766E;
  --action-soft:#F0FDFA;

  --ok:#059669;            /* verified / positive markers only */
  --amber:#B45309;         /* placeholder markers only */

  /* per-industry accent — tints small marks only, never CTAs */
  --ind:var(--ink);
  --ind-soft:var(--subtle);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --subtext-font:var(--sans);

  --container:1200px;
  --gutter:32px;
}
/* Accent themes. One token set, swapped on the root element. */
html[data-accent="teal"]  {--action:#0D9488;--action-dark:#0F766E;--action-soft:#F0FDFA}
html[data-accent="coral"] {--action:#EA580C;--action-dark:#C2410C;--action-soft:#FFF4ED}

/* Per-industry accents. Deliberately chosen to clash with NEITHER candidate
   action colour, so the CTA stays the only teal/coral thing on any page. */
[data-ind="msp"]         {--ind:#6D28D9;--ind-soft:#F3F0FF}
[data-ind="construction"]{--ind:#334155;--ind-soft:#F1F5F9}
[data-ind="medtech"]     {--ind:#1D4ED8;--ind-soft:#EFF4FF}
[data-ind="solar"]       {--ind:#B45309;--ind-soft:#FFF8EC}

/* ==========================================================================
   DARK MODE TOKEN SET (Single Source of Truth)
   ========================================================================== */
html[data-theme="dark"] {
  --canvas: #0A0E15;
  --pure: #121821;
  --subtle: #0E141C;
  --obsidian: #05080D;
  --obsidian-2: #101720;
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.17);
  --hair-dark: rgba(255, 255, 255, 0.12);
  --ink: #F1F5F9;
  --ink-2: #A3B1C2;
  --ink-3: #6B7C90;
  --ink-dark: #F1F5F9;
  --ink-dark-2: #A3B1C2;
  background-color: #0A0E15 !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] body {
  background-color: transparent !important;
  color: #F1F5F9 !important;
}

/* Accents lift on dark for contrast */
html[data-theme="dark"][data-accent="teal"]  { --action: #2DD4BF; --action-dark: #5EEAD4; --action-soft: rgba(45, 212, 191, 0.12); }
html[data-theme="dark"][data-accent="coral"] { --action: #FB923C; --action-dark: #FDBA74; --action-soft: rgba(251, 146, 60, 0.12); }

/* Industry accents on dark */
html[data-theme="dark"] [data-ind="msp"], html[data-theme="dark"][data-ind="msp"] { --ind: #A78BFA; --ind-soft: #1E1638; }
html[data-theme="dark"] [data-ind="construction"], html[data-theme="dark"][data-ind="construction"] { --ind: #94A3B8; --ind-soft: #182230; }
html[data-theme="dark"] [data-ind="medtech"], html[data-theme="dark"][data-ind="medtech"] { --ind: #60A5FA; --ind-soft: #132347; }
html[data-theme="dark"] [data-ind="solar"], html[data-theme="dark"][data-ind="solar"] { --ind: #FBBF24; --ind-soft: #312108; }

/* Sections and bands in dark mode */
html[data-theme="dark"] .sec {
  background-color: #0A0E15 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .sec--alt {
  background-color: #0E141C !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .sec--dark {
  background-color: #101720 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .hero {
  background-color: #0A0E15 !important;
}
html[data-theme="dark"] .strip {
  background-color: #0E141C !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Working With Logo Slider — Always Crisp Pure White on dark & light modes for maximum logo contrast */
.strip:has(.marquee),
.strip--marquee {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
html[data-theme="dark"] .strip:has(.marquee),
html[data-theme="dark"] .strip--marquee {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.strip:has(.marquee) .strip__lab,
.strip--marquee .strip__lab,
html[data-theme="dark"] .strip:has(.marquee) .strip__lab,
html[data-theme="dark"] .strip--marquee .strip__lab {
  color: #475569 !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}
.strip:has(.marquee) p,
.strip--marquee p,
html[data-theme="dark"] .strip:has(.marquee) p,
html[data-theme="dark"] .strip--marquee p {
  color: #64748B !important;
}
html[data-theme="dark"] .rail {
  background-color: #0A0E15 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}
html[data-theme="dark"] .rail .live {
  color: #F1F5F9 !important;
}

/* Cards, cells, and containers in dark mode */
html[data-theme="dark"] .cell,
html[data-theme="dark"] .card,
html[data-theme="dark"] .want__card,
html[data-theme="dark"] .launch,
html[data-theme="dark"] .pricing,
html[data-theme="dark"] .video-partner-box {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .cell h3,
html[data-theme="dark"] .cell h4,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .launch h4,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .lede,
html[data-theme="dark"] .body,
html[data-theme="dark"] .cell p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .launch p {
  color: #A3B1C2 !important;
}

/* Reviews showcase */
html[data-theme="dark"] .sec-reviews-showcase,
html[data-theme="dark"] #reviews {
  background-color: #0A0E15 !important;
}
html[data-theme="dark"] .g-review-card,
html[data-theme="dark"] .review-card {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #F1F5F9 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .g-review-card__user strong,
html[data-theme="dark"] .g-review-name {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .g-review-card__body,
html[data-theme="dark"] .g-review-time {
  color: #A3B1C2 !important;
}
html[data-theme="dark"] .reviews-nav-btn {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .reviews-nav-btn:hover {
  background-color: var(--action) !important;
  border-color: var(--action) !important;
  color: #FFFFFF !important;
}

/* Forms in dark mode */
html[data-theme="dark"] .form {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form textarea,
html[data-theme="dark"] .form select {
  background-color: #0A0E15 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .form label {
  color: #A3B1C2 !important;
}

/* Navigation and Drawers in dark mode */
html[data-theme="dark"] .nav {
  background-color: #0B0F17 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .nav.is-scrolled {
  background-color: rgba(11, 15, 23, 0.96) !important;
}
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .proposal-drawer {
  background-color: #121821 !important;
  color: #F1F5F9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .sub {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .sub a {
  color: #E2E8F0 !important;
}
html[data-theme="dark"] .sub a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--action) !important;
}

/* Process and FAQ in dark mode */
html[data-theme="dark"] .faq details {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .faq summary {
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .faq__a {
  color: #A3B1C2 !important;
}
html[data-theme="dark"] .step {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .step h4 {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .step p {
  color: #A3B1C2 !important;
}

/* Escape hatch in dark mode */
html[data-theme="dark"] .hatch {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid var(--action) !important;
}
html[data-theme="dark"] .hatch p {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .hatch b {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .hatch__lab {
  color: var(--action) !important;
}

/* Pod & Partners in dark mode */
html[data-theme="dark"] .pod {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .pod li {
  background-color: #1A2332 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #E2E8F0 !important;
}
html[data-theme="dark"] .pod p {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .pod__lab {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .partners {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .partners b {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .partners span {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .partners .lab {
  color: var(--action) !important;
}

/* Review Wall & Testimonials in dark mode */
html[data-theme="dark"] .wall {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .wall li {
  background-color: #121821 !important;
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .wall li p {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .wall cite {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .wall cite small {
  color: #94A3B8 !important;
}

/* Pricing, Wants, Docs & Location Lists in dark mode */
html[data-theme="dark"] .pricing {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .pricing p {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .pricing b {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .want li {
  background-color: #121821 !important;
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .doc {
  background-color: #121821 !important;
  border-top-color: var(--action) !important;
}
html[data-theme="dark"] .loclist a,
html[data-theme="dark"] .loclist span {
  background-color: #121821 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .loclist a:hover {
  background-color: #1A2332 !important;
  border-color: var(--action) !important;
  color: var(--action) !important;
}
html[data-theme="dark"] .ticks li {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .ticks b {
  color: #FFFFFF !important;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);color:var(--ink);scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:transparent;color:var(--ink);font:16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
p{margin:0}ul,ol{margin:0;padding:0}
a{color:var(--action)}
:focus-visible{outline:3px solid var(--action);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- mono section markers: the editorial signature ---------- */
.mark{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--action);display:block;margin-bottom:18px}
.mark::before{content:""}.mark::after{content:""}
.mark--ind{color:var(--ind)}
.mark--dark{color:var(--ok)}
.mark--quiet{color:var(--ink-3)}

/* ---------- type scale ---------- */
.d1{font-size:clamp(40px,5.4vw,64px);line-height:1.04}
.d2{font-size:clamp(30px,3.6vw,44px);line-height:1.08}
.d3{font-size:clamp(22px,2.2vw,28px)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2)}
.body{font-size:16.5px;color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-3)}
.measure{max-width:62ch}.measure-t{max-width:20ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--action);color:#fff;
  text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border:0;cursor:pointer;
  border-radius:4px;transition:background .15s;font-family:var(--sans)}
.btn:hover{background:var(--action-dark)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-strong)}
.btn--ghost:hover{background:var(--pure);border-color:var(--ink)}
.sec--dark .btn--ghost{background:rgba(255,255,255,0.05);color:#F8FAFC;border:1px solid rgba(255,255,255,0.24)}
.sec--dark .btn--ghost:hover{background:rgba(255,255,255,0.14);border-color:#ffffff;color:#ffffff}
.btn--dark{background:#ffffff;color:#0B0F17;font-weight:700;border:1px solid #ffffff}
.btn--dark:hover{background:var(--action);border-color:var(--action);color:#ffffff}
.btn--block{width:100%;justify-content:center}

/* ---------- sections + hairline grid ---------- */
.sec{padding:96px 0;border-top:1px solid var(--hair)}
.sec--tight{padding:64px 0}
.sec--alt{background:var(--subtle)}
.sec--dark{background:var(--obsidian);color:#fff;border-top-color:transparent}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .body,.sec--dark .lede{color:var(--ink-dark-2)}
.sec--dark .small{color:var(--ink-dark-2)}
.head{margin-bottom:52px}
.head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.head h2{margin-bottom:16px}
@media(max-width:820px){.sec{padding:64px 0}:root{--gutter:20px}}

/* ---------- utility bar (NOT part of the design) ---------- */
.ubar{position:sticky;top:0;z-index:200;background:var(--obsidian);color:#fff;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.ubar .wrap{display:flex;align-items:center;gap:20px;height:46px;flex-wrap:wrap}
.ubar b{color:var(--ok);font-weight:700}
.ubar nav{margin-left:auto;display:flex;gap:16px}
.ubar a{color:#94A3B8;text-decoration:none}
.ubar a:hover{color:#fff}
@media(max-width:760px){.ubar .wrap{height:auto;padding-top:8px;padding-bottom:8px}.ubar nav{margin-left:0;width:100%}}

/* ---------- site nav ---------- */
.nav{position:sticky;top:0;z-index:990;background:rgba(255,255,255,0.98);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;height:76px;gap:34px}
.brand{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.045em;
  text-decoration:none;color:var(--ink);line-height:1}
.brand small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  color:var(--ink-3);font-weight:400;margin-top:3px}
.nav ul{display:flex;gap:26px;list-style:none;font-size:15px}
.nav ul a{text-decoration:none;color:var(--ink-2);font-weight:500}
.nav ul a:hover{color:var(--action)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav .tel{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-decoration:none}
@media(max-width:1000px){.nav ul{display:none}}
@media(max-width:600px){.nav .tel{display:none}}

/* ---------- status rail (centered) ---------- */
.rail{border-bottom:1px solid var(--hair);background:var(--pure)}
.rail .wrap{display:flex;gap:16px 36px;align-items:center;justify-content:center;text-align:center;padding:13px var(--gutter);flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--ink-3)}
.rail .live{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.rail .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* ---------- hero (light editorial, form right) ---------- */
.hero{padding:76px 0 88px;background:var(--canvas)}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr;gap:40px}.hero{padding:52px 0 64px}}
.hero h1{margin-bottom:26px;max-width:15ch}
.hero .lede{max-width:52ch;margin-bottom:34px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.hero__promise{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.03em}

/* stat strip under hero */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:26px 0;margin:34px 0 0}
.stat__v{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1}
.stat__v em{font-style:normal;color:var(--action)}
.stat__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:9px;line-height:1.5}
.sec--dark .stats{border-color:var(--hair-dark)}
.sec--dark .stat__k{color:var(--ink-dark-2)}
.sec--dark .stat__v em{color:var(--ok)}

/* one-stat hero row */
.stats--one{grid-template-columns:minmax(0,1fr)!important;max-width:none!important}
.stats--one .stat__v{font-size:clamp(34px,4vw,48px)!important}
.stats--one .stat__k{max-width:46ch!important}

/* ---------- form ---------- */
.form{background:var(--pure);border:1px solid var(--hair);border-radius:6px;padding:32px 30px}
.form__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding-bottom:18px;border-bottom:1px solid var(--hair);margin-bottom:22px}
.form__top .l{color:var(--action);font-weight:700}
.form__top .r{color:var(--ok)}
.form h3{font-size:23px;margin-bottom:8px}
.form>p.small{margin-bottom:22px}
.form label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;
  letter-spacing:.01em}
.form label span{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.09em}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--hair-strong);
  border-radius:4px;font:inherit;font-size:15px;margin-bottom:16px;background:var(--pure);color:var(--ink)}
.form textarea{min-height:82px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--action);outline-offset:-1px}
.form .foot{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:14px;line-height:1.6}

/* ---------- logo strip & brand marquee ---------- */
.strip {
  background: var(--pure);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 30px 0;
  overflow: hidden;
}
.strip__lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 22px;
  font-weight: 700;
}
.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 68px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  animation: marquee-scroll 40s linear infinite !important;
  will-change: transform;
}
.marquee__track li {
  flex: 0 0 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  height: 80px !important;
}
.marquee__track li img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  opacity: 0.95 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  display: block !important;
}
.marquee__track li img.logo-wide {
  height: 56px !important;
  max-height: 56px !important;
  max-width: 200px !important;
}
.marquee__track li img.logo-tall {
  height: 68px !important;
  max-height: 68px !important;
  max-width: 160px !important;
}
.marquee__track li img:hover {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}
.marquee:hover .marquee__track {
  animation-play-state: paused !important;
}
html[data-theme="dark"] .marquee__track li img {
  filter: none !important;
  opacity: 0.96 !important;
}
@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Technology and stack pill badges for category strips */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.logos li {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--ink-2);
  background: var(--subtle);
  border: 1px solid var(--hair);
  border-radius: 99px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  transition: all .2s ease;
  font-weight: 500;
}
.logos li:hover {
  border-color: var(--action);
  color: var(--action);
  transform: translateY(-2px);
  background: var(--pure);
}
html[data-theme="dark"] .logos li {
  background: #121821;
  border-color: rgba(255, 255, 255, 0.1);
  color: #CBD5E1;
}
html[data-theme="dark"] .logos li:hover {
  border-color: var(--action);
  color: #FFFFFF;
  background: #1A2332;
}

.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--hair-strong);
  border-radius: 4px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  padding: 0 14px;
  height: 40px;
  background: var(--canvas);
}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:6px;
  overflow:hidden}
.grid--1{grid-template-columns:1fr!important}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
.cell{background:var(--pure);padding:32px 28px;text-decoration:none;color:inherit;display:flex;
  flex-direction:column;transition:background .15s}
a.cell:hover{background:var(--action-soft)}
.cell__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ind);
  font-weight:700;margin-bottom:16px}
.cell h3{font-size:21px;margin-bottom:11px}
.cell h4{font-size:17.5px;margin-bottom:9px;font-family:var(--display)}
.cell p{font-size:15px;color:var(--ink-2);flex:1}
.cell__go{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--action);
  margin-top:20px;font-weight:700}
.cell__ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:14px;color:var(--action)}
.cell__ico svg{width:26px;height:26px;stroke-width:1.8}
.sec--dark .grid{background:var(--hair-dark);border-color:var(--hair-dark)}
.sec--dark .cell{background:var(--obsidian-2)}
.sec--dark .cell p{color:var(--ink-dark-2)}

/* ---------- modern services grid (brian & aksara review) ---------- */
.sec-services {
  position: relative;
  overflow: hidden;
}
.services-bg-mesh {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 580px;
  height: 580px;
  pointer-events: none;
  opacity: 0.10;
  color: var(--action);
  z-index: 0;
  transition: opacity 0.3s ease;
}
html[data-theme="dark"] .services-bg-mesh {
  opacity: 0.14;
  color: #00D5A3;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1080px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 620px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pure, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 28px 24px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background-color 0.25s ease;
  overflow: hidden;
}
html[data-theme="dark"] .service-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.35);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 213, 163, 0.45);
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(0, 213, 163, 0.2);
}
html[data-theme="dark"] .service-card:hover {
  background: #141E30;
  border-color: rgba(0, 213, 163, 0.55);
  box-shadow: 0 18px 36px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 213, 163, 0.25);
}
.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
html[data-theme="dark"] .service-card__icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.service-card:hover .service-card__icon {
  transform: scale(1.06);
  background: #FFFFFF;
  border-color: rgba(0, 213, 163, 0.3);
}
html[data-theme="dark"] .service-card:hover .service-card__icon {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(0, 213, 163, 0.35);
}
.service-card__icon svg,
.service-card__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.service-card__tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: color 0.2s ease, border-color 0.2s ease;
}
html[data-theme="dark"] .service-card__tag {
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.service-card:hover .service-card__tag {
  color: var(--action);
  border-color: rgba(0, 213, 163, 0.3);
}
.service-card__title {
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px 0;
  transition: color 0.2s ease;
}
html[data-theme="dark"] .service-card__title {
  color: #F8FAFC;
}
.service-card:hover .service-card__title {
  color: var(--action);
}
.service-card__desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 18px 0;
  flex-grow: 1;
}
html[data-theme="dark"] .service-card__desc {
  color: #94A3B8;
}
.service-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--action);
}
html[data-theme="dark"] .service-card__action {
  border-top-color: rgba(255, 255, 255, 0.07);
}
.service-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.08);
  color: var(--action);
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
html[data-theme="dark"] .service-card__arrow {
  background: rgba(0, 213, 163, 0.12);
}
.service-card:hover .service-card__arrow {
  transform: translateX(4px);
  background: var(--action);
  color: #FFFFFF;
}

/* ---------- escape hatch ---------- */
.hatch{margin-top:28px;border:1px solid var(--hair-strong);border-left:3px solid var(--ink);
  background:var(--pure);border-radius:0 6px 6px 0;padding:22px 26px;display:flex;gap:22px;
  align-items:center;flex-wrap:wrap}
.hatch__lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
.hatch p{font-size:15.5px;color:var(--ink-2);flex:1;min-width:min(280px,100%)}
.hatch b{color:var(--ink)}

/* ---------- quote ---------- */
.quote{border-left:2px solid var(--action);padding:2px 0 2px 24px;margin:0}
.quote p{font-size:17px;line-height:1.6;color:var(--ink-2);margin-bottom:14px}
.quote cite{font-style:normal;display:block;font-size:14px;color:var(--ink);font-weight:600}
.quote cite small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  color:var(--ink-3);font-weight:400;margin-top:3px;text-transform:uppercase}
.sec--dark .quote{border-color:var(--ok)}
.sec--dark .quote p{color:var(--ink-dark)}
.sec--dark .quote cite{color:#fff}

.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:6px;overflow:hidden;list-style:none}
.wall li{background:var(--pure);padding:30px 28px}
.wall .stars{color:var(--action);font-size:13px;letter-spacing:2px;margin-bottom:14px}

/* ---------- launches ---------- */
.launches{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.launches{grid-template-columns:1fr}}
.launch{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--pure);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.launch:hover{transform:translateY(-5px);box-shadow:0 20px 38px -10px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.04);border-color:rgba(15,23,42,.2)}
.launch__browser{background:#0f172a;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.launch__bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.launch__dots{display:flex;gap:5px;align-items:center}
.launch__dots i{width:8px;height:8px;border-radius:50%;display:inline-block}
.launch__dots i:nth-child(1){background:#EF4444;opacity:.8}
.launch__dots i:nth-child(2){background:#F59E0B;opacity:.8}
.launch__dots i:nth-child(3){background:#10B981;opacity:.8}
.launch__url{font-family:var(--mono);font-size:10px;color:#94a3b8;background:rgba(255,255,255,.06);padding:2px 10px;border-radius:4px;letter-spacing:.02em}
.launch__viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0f19}
.launch__viewport img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease;display:block}
.launch:hover .launch__viewport img{transform:scale(1.04)}
.launch__overlay{position:absolute;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s ease;display:flex;align-items:center;justify-content:center}
.launch:hover .launch__overlay{opacity:1}
.launch__btn{background:#fff;color:#0f172a;font-family:var(--display);font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.25);letter-spacing:-.01em}
.launch__body{padding:20px;flex:1;display:flex;flex-direction:column}
.launch__meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--action);margin-bottom:6px;font-weight:600}
.launch h4{font-family:var(--display);font-size:18px;font-weight:800;margin-bottom:6px;color:var(--ink);letter-spacing:-.02em}
.launch p{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:16px}
.launch__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.launch__pill{font-family:var(--mono);font-size:10px;background:var(--subtle);color:var(--ink-2);padding:3px 8px;border-radius:4px;border:1px solid var(--hair)}

/* ---------- contacts + team cards ---------- */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
@media(max-width:960px){.contacts{grid-template-columns:1fr}}
.contact{background:var(--pure);border:1px solid var(--hair);border-radius:8px;padding:28px 24px;
  display:flex;gap:20px;align-items:flex-start;box-shadow:0 2px 8px rgba(0,0,0,0.03);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.contact:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08);border-color:var(--action)}
.contact__av{width:62px;height:62px;min-width:62px;max-width:62px;border-radius:50%;overflow:hidden;
  flex:none;border:2px solid var(--hair-strong);background:var(--subtle);display:block;position:relative}
.contact__av img, img.contact__av{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  border-radius:50%;display:block}
.contact__info{padding:0;display:flex;flex-direction:column;flex:1;min-width:0}
.contact b{display:block;font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:3px}
.contact .role{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--action);margin:0 0 10px 0}
.contact p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
html[data-theme="dark"] .contact{background:#121821 !important;border-color:rgba(255,255,255,0.09) !important;box-shadow:0 4px 16px rgba(0,0,0,0.3) !important}
html[data-theme="dark"] .contact:hover{border-color:var(--action) !important;box-shadow:0 8px 28px rgba(0,0,0,0.45) !important}
html[data-theme="dark"] .contact__av{border-color:rgba(255,255,255,0.15) !important;background:#0E141C !important}
html[data-theme="dark"] .contact b{color:#fff !important}
html[data-theme="dark"] .contact p{color:#94A3B8 !important}
.pod{margin-top:20px;border:1px solid var(--hair);background:var(--pure);border-radius:6px;
  padding:22px 26px;display:flex;gap:16px 26px;align-items:center;flex-wrap:wrap}
.pod__lab{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
.pod ul{display:flex;gap:10px;flex-wrap:wrap;list-style:none}
.pod li{font-family:var(--sans);font-size:12.5px;font-weight:500;border:1px solid var(--hair-strong);border-radius:99px;
  padding:6px 14px;color:var(--ink)}
.pod p{font-size:14px;color:var(--ink-3);flex:1;min-width:min(240px,100%)}

/* ---------- pricing ---------- */
.pricing{border:1px solid var(--hair-strong);border-radius:6px;padding:26px 28px;background:var(--pure)}
.pricing__lab{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--action);margin-bottom:14px}
.pricing p{font-size:16px;color:var(--ink-2)}
.pricing b{color:var(--ink)}
.sec--dark .pricing{background:var(--obsidian-2);border-color:var(--hair-dark)}
.sec--dark .pricing p{color:var(--ink-dark)}
.sec--dark .pricing b{color:#fff}
.sec--dark .pricing__lab{color:var(--ok)}

/* ---------- steps / ruled ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px;list-style:none}
.step__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--action);
  font-weight:700;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.step h4{font-size:20px;margin-bottom:10px}
.step p{font-size:15.5px;color:var(--ink-2)}

/* ---------- placeholder marker ---------- */
.ph{border-bottom:2px dashed var(--amber);background:#FFFBEB;color:#78350F;padding:1px 5px;
  border-radius:2px;font-style:normal;font-size:.94em}
.sec--dark .ph{background:#FFFBEB}

/* ---------- footer ---------- */
footer{background:var(--obsidian);color:var(--ink-dark-2);padding:72px 0 40px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;font-weight:700}
footer ul{list-style:none}footer li{margin-bottom:10px}
footer a{color:var(--ink-dark-2);text-decoration:none}
footer a:hover{color:#fff}
.fbot{border-top:1px solid var(--hair-dark);padding-top:26px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em}

/* ==========================================================================
   BRIEF SECTIONS — documentation, not part of the site design
   ========================================================================== */
.doc{background:var(--pure);border-top:6px solid var(--obsidian)}
.doc .sec{border-top:1px solid var(--hair)}
.doc h2{font-size:30px}
.doc h3{font-size:19px;margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.doc .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:6px}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.doc th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:11px 12px;border-bottom:2px solid var(--hair-strong);font-weight:700}
.doc td{padding:12px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-2)}
.doc td b{color:var(--ink)}
.doc code{font-family:var(--mono);font-size:12.5px;background:var(--subtle);padding:2px 7px;
  border-radius:3px;color:var(--ink);overflow-wrap:anywhere;word-break:break-word}
code{overflow-wrap:anywhere}
.rules{list-style:none;counter-reset:r}
.rules li{counter-increment:r;position:relative;padding:16px 0 16px 48px;border-bottom:1px solid var(--hair);
  font-size:15.5px;color:var(--ink-2)}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-family:var(--mono);font-size:11px;color:var(--action);font-weight:700}
.rules b{color:var(--ink)}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:8px 0 6px}
.sw{border:1px solid var(--hair);border-radius:5px;overflow:hidden}
.sw i{display:block;height:56px}
.sw .m{padding:10px 12px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);line-height:1.6}
.sw .m b{display:block;color:var(--ink);font-size:11.5px}
.callout{border-left:3px solid var(--action);background:var(--action-soft);padding:18px 22px;
  border-radius:0 6px 6px 0;margin:26px 0}
.callout p{font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}.callout p+p{margin-top:10px}
.callout b{color:var(--ink)}
.callout--amber{border-color:var(--amber);background:#FFFBEB}
.need{list-style:none}
.need li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink-2)}
.need .who{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--ink);padding:4px 9px;border-radius:3px;height:fit-content;white-space:nowrap}
.need .who--design{background:var(--action)}
.need .who--dev{background:#1D4ED8}
.need b{color:var(--ink)}


/* ---------- accent toggle (review tool, not part of the design) ---------- */
.tog{display:inline-flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.25);
  border-radius:4px;overflow:hidden;margin-left:14px}
.tog button{background:transparent;border:0;color:#94A3B8;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;padding:5px 11px;cursor:pointer;text-transform:uppercase}
.tog button[aria-pressed="true"]{background:var(--action);color:#fff;font-weight:700}

/* ---------- MSP page: "what you're looking for" grid ---------- */
.want{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden;list-style:none}
@media(max-width:820px){.want{grid-template-columns:1fr}}
.want li{background:var(--pure);padding:32px 30px}
.want .q{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ind);font-weight:700;margin-bottom:14px}
.want h3{font-size:20px;margin-bottom:11px}
.want p{font-size:15px;color:var(--ink-2)}
.want p+p{margin-top:10px}

/* partner row */
.partners{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;margin-top:20px;
  border:1px solid var(--hair);background:var(--pure);border-radius:6px;padding:20px 24px}
.partners .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
.partners b{font-family:var(--display);font-size:16px;letter-spacing:-.02em}
.partners span{font-size:14px;color:var(--ink-3)}

/* ---------- tick lists ---------- */
.ticks{list-style:none}
.ticks li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--hair);
  font-size:15.5px;color:var(--ink-2)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;border-radius:50%;
  background:var(--action-soft);border:1px solid var(--action)}
.ticks li::after{content:"";position:absolute;left:2px;top:21px;width:12px;height:12px;
  background:var(--action);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.8%2012.6L10%2017.8L19.2%207.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.8%2012.6L10%2017.8L19.2%207.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks b{color:var(--ink)}
.sec--dark .ticks li{border-color:var(--hair-dark);color:var(--ink-dark-2)}
.sec--dark .ticks b{color:#fff}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--display);
  font-size:18.5px;font-weight:700;letter-spacing:-.02em;display:flex;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--action);font-size:24px;font-weight:400;
  font-family:var(--sans);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 24px;color:var(--ink-2);font-size:16px;max-width:76ch}

/* ==========================================================================
   v2 ADDITIONS
   ========================================================================== */

/* ---------- nav with dropdowns ---------- */
.nav ul.menu{display:flex;gap:4px;list-style:none;font-size:15px;align-items:center}
.nav .has-sub{position:relative}
.nav .has-sub>a{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:4px}
.nav .has-sub>a::after{content:"";width:6px;height:6px;border:solid var(--ink-3);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.nav .menu>li>a{text-decoration:none;color:var(--ink-2);font-weight:500;padding:10px 12px;
  border-radius:4px;display:inline-block}
.nav .menu>li>a:hover{color:var(--ink);background:var(--subtle)}
.nav .menu>li>a[aria-current="page"]{color:var(--action);font-weight:600}
.nav ul.sub{display:block;gap:0}
.sub{position:absolute;top:100%;left:0;min-width:300px;background:var(--pure);
  border:1px solid var(--hair);border-radius:6px;box-shadow:0 20px 40px -18px rgba(15,23,42,.28);
  padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:200}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav .has-sub:hover>a::after,.nav .has-sub:focus-within>a::after{transform:rotate(-135deg) translateY(-2px)}
.sub li a{display:block;padding:11px 14px;border-radius:4px;text-decoration:none;color:var(--ink);
  font-size:14.5px;font-weight:500}
.sub li a small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.sub li a:hover{background:var(--action-soft);color:var(--action-dark)}
.sub .sep{border-top:1px solid var(--hair);margin:7px 0}
.sub .all a{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--action);font-weight:700}
@media(max-width:1060px){.nav ul.menu{display:none}}

/* ---------- AIBF emblem in hero ---------- */
.emblem{display:inline-flex;align-items:center;gap:16px;border:1px solid var(--hair-strong);
  background:var(--pure);border-radius:6px;padding:12px 20px 12px 12px;margin-bottom:26px}
.emblem__mark{width:58px;height:58px;flex:none}
.emblem__txt b{display:block;font-family:var(--display);font-size:14.5px;letter-spacing:-.015em}
.emblem__txt span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.emblem__note{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--amber);
  margin-top:6px;display:block}

/* ---------- Leads Connector dashboard frame ---------- */
.dash{border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:#0d121c;box-shadow:0 16px 36px -10px rgba(0,0,0,.5)}
.dash__bar{display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.dash__bar i{width:10px;height:10px;border-radius:50%;flex:none}
.dash__bar i:nth-child(1){background:#EF4444;opacity:.85}
.dash__bar i:nth-child(2){background:#F59E0B;opacity:.85}
.dash__bar i:nth-child(3){background:#10B981;opacity:.85}
.dash__bar span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:#94a3b8;margin-left:8px}
.dash__body{padding:6px 14px 12px}
.dash__row{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr;gap:12px;align-items:center;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s ease}
.dash__row:hover:not(.dash__row--head){background:rgba(255,255,255,.02)}
.dash__row:last-child{border-bottom:0}
.dash__row--head{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;border-bottom:1px solid rgba(255,255,255,.1);padding:10px 8px}
.dash__col{display:flex;flex-direction:column;justify-content:center}
.dash__title{font-family:var(--sans);font-size:13px;font-weight:600;color:#f1f5f9;line-height:1.3}
.dash__sub{font-family:var(--sans);font-size:11px;color:#64748b;margin-top:2px}
.dash__val{font-family:var(--mono);font-size:13.5px;font-weight:700;color:#f8fafc;letter-spacing:-.01em}
.dash__trend{font-family:var(--mono);font-size:10px;color:#34d399;margin-top:2px}
.dash__tag{display:inline-flex;align-items:center;justify-content:center;width:max-content;font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;letter-spacing:.03em}
.dash__tag--live{background:rgba(16,185,129,.14);color:#34d399;border:1px solid rgba(16,185,129,.28)}
.dash__tag--blue{background:rgba(56,189,248,.14);color:#38bdf8;border:1px solid rgba(56,189,248,.28)}
.dash__tag--amber{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.28)}
.dash__tag--won{background:rgba(16,185,129,.22);color:#10b981;border:1px solid rgba(16,185,129,.45)}
.dash__foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:11px;color:#94a3b8}
.dash__foot strong{color:#f1f5f9;font-weight:700}
.dash__live{display:inline-flex;align-items:center;color:#cbd5e1;font-size:10.5px}
.dash__dot{width:7px;height:7px;border-radius:50%;background:#10b981;display:inline-block;box-shadow:0 0 8px #10b981;animation:pulse-dot 2s infinite ease-in-out;margin-right:7px}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ---------- portfolio / video slider ---------- */
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{height:8px}
.slider::-webkit-scrollbar-thumb{background:var(--hair-strong);border-radius:99px}
.slide{scroll-snap-align:start;border:1px solid var(--hair);border-radius:6px;overflow:hidden;
  background:var(--pure)}
.slide__media{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#EDF1F6 0 8px,#F5F8FB 8px 16px);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--hair);
  position:relative}
.slide__media span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.08em}
.play{position:absolute;width:52px;height:52px;border-radius:50%;background:var(--action);
  display:flex;align-items:center;justify-content:center}
.play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.slide__body{padding:16px 18px}
.slide__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px}
.slide h4{font-size:16.5px;margin-bottom:5px}
.slide p{font-size:13.5px;color:var(--ink-2)}
.slider__hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);
  margin-top:12px}

/* ---------- stub pages ---------- */
.stub{padding:120px 0 140px;text-align:center}
.stub .mark{display:inline-block}
.stub h1{font-size:clamp(30px,4vw,46px);margin:0 auto 20px;max-width:18ch}
.stub p{max-width:60ch;margin:0 auto 16px}
.stub .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.stub .specs{margin:44px auto 0;max-width:620px;text-align:left;border:1px solid var(--hair);
  border-radius:6px;background:var(--pure);padding:26px 28px}
.stub .specs h3{font-size:15px;margin-bottom:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.stub .specs li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:14.5px;color:var(--ink-2);
  list-style:none}
.stub .specs li:last-child{border-bottom:0}

/* ---------- mobile nav drawer ---------- */
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--hair-strong);
  border-radius:5px;background:var(--pure);cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;padding:0;flex-shrink:0}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);transition:.2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--hair);background:var(--pure);
  max-height:calc(100vh - 160px);overflow-y:auto}
.drawer.open{display:block}
.drawer .wrap{padding-top:16px;padding-bottom:26px}
.drawer h5{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:20px 0 6px}
.drawer a{display:block;padding:11px 0;border-bottom:1px solid var(--hair);text-decoration:none;
  color:var(--ink);font-size:16px;font-weight:500}
.drawer a:last-child{border-bottom:0}
.drawer .btn{margin-top:22px;text-align:center;border-bottom:0;color:#fff}
@media(max-width:1060px){.burger{display:flex}}
@media(min-width:1061px){.drawer{display:none!important}}
.sub--2{min-width:520px;display:grid!important;grid-template-columns:1fr 1fr;gap:0 4px}
.sub--2 .sep,.sub--2 .all{grid-column:1/-1}
.nav .has-sub.is-open .sub{opacity:1;visibility:visible;transform:translateY(0)}

.dashrow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media(max-width:900px){.dashrow{grid-template-columns:1fr}}
.dash__row>b:first-child{background:color-mix(in srgb,var(--action) 40%,var(--hair))}
.sec--dark .dash__row>b:first-child{background:color-mix(in srgb,var(--action) 70%,transparent)}

.slide__media{position:relative}
.slide__media span{position:absolute;bottom:10px;left:12px;background:rgba(255,255,255,.85);
  padding:3px 8px;border-radius:3px}
.partners + .slider{margin-top:22px}
.emblem{margin-top:10px}
.emblem__note{margin-top:8px}
.nav .menu > li.has-sub > a{display:inline-flex;align-items:center;gap:7px}
.nav .drawer .wrap{display:block;height:auto}
@media(max-width:1060px){
  .nav .wrap{gap:16px}
  .nav .right{margin-left:auto;gap:12px}
  .burger{margin-left:12px}
  .nav .right .btn{padding:11px 18px;font-size:14.5px}
}
@media(max-width:359px){.nav .right .btn{display:none}}
.fsoc{margin-top:16px;display:flex;gap:16px;flex-wrap:wrap}
.fsoc a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-dark-2);text-decoration:none}
.fsoc a:hover{color:#fff}

/* ---------- map placeholder ---------- */
.mapbox{aspect-ratio:21/8;border:1px dashed var(--hair-strong);border-radius:6px;background:
  repeating-linear-gradient(45deg,#EDF1F6 0 10px,#F5F8FB 10px 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.mapbox span{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--ink-3)}
@media(max-width:700px){.mapbox{aspect-ratio:4/3}}

/* ---------- location lists ---------- */
.loclist{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.loclist a{display:block;font-size:14.5px;border:1px solid var(--hair);background:var(--pure);
  border-radius:99px;padding:8px 16px;text-decoration:none;color:var(--ink)}
.loclist a:hover{border-color:var(--action);color:var(--action);background:var(--action-soft)}
.loclist span{display:block;font-size:14.5px;border:1px solid var(--hair);background:var(--pure);
  border-radius:99px;padding:8px 16px;color:var(--ink-2)}


/* ---------- enhanced production assets ---------- */
.emblem__img{object-fit:contain;width:auto;height:52px}
.logos--real{display:flex;flex-wrap:wrap;gap:24px 44px;justify-content:center;align-items:center;list-style:none}
.logos--real li img{max-height:36px;width:auto;max-width:130px;opacity:0.85;transition:all .2s ease}
.logos--real li img:hover{opacity:1;transform:scale(1.05)}

/* ---------- infinite logo marquee (calibrated 3-4 visible, smooth edge fades) ---------- */
.strip {
  overflow: hidden;
  padding: 24px 0 28px !important;
  position: relative;
}
.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 0 !important;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee::before,
.marquee::after {
  display: none !important;
  content: none !important;
}
.marquee__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 68px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  animation: marquee-scroll 40s linear infinite !important;
  will-change: transform;
}
.marquee__track li {
  flex: 0 0 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  height: 95px !important;
}
.marquee__track li img {
  height: 74px !important;
  max-height: 74px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.96 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  display: block !important;
}
.marquee__track li img.logo-wide {
  height: 66px !important;
  max-height: 66px !important;
  max-width: 220px !important;
}
.marquee__track li img.logo-tall {
  height: 78px !important;
  max-height: 78px !important;
  max-width: 180px !important;
}
.marquee__track li img:hover {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}
.marquee:hover .marquee__track {
  animation-play-state: paused !important;
}
html[data-theme="dark"] .marquee__track li img {
  filter: none !important;
  opacity: 0.96 !important;
}
@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ---------- global aurora ambient mesh system (optimized 60fps) ---------- */
.hero,
.sec--has-aurora,
.has-aurora {
  position: relative !important;
  overflow: hidden !important;
}
.hero > .wrap,
.sec--has-aurora > .wrap,
.has-aurora > .wrap {
  position: relative !important;
  z-index: 2 !important;
}
.hero__ambient,
.sec__ambient {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  contain: strict;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.aurora-paused i {
  animation-play-state: paused !important;
}

/* Base Aurora Wrappers */
.aurora-mesh-wrap,
.aurora-results-wrap,
.aurora-team-wrap,
.aurora-cta-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.aurora-mesh-wrap i,
.aurora-results-wrap i,
.aurora-team-wrap i,
.aurora-cta-wrap i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: none !important; /* ZERO SHADER BLUR: 120FPS SILKY SMOOTH SCROLL */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 1. HERO AURORA: Multi-node dynamic fluid drift (Brand Teal + Violet + Emerald) */
.aurora-mesh-wrap i:nth-child(1) {
  width: 55vw;
  height: 55vw;
  left: -8vw;
  top: -12vw;
  background: radial-gradient(circle at center, rgba(13, 148, 136, 0.40) 0%, rgba(13, 148, 136, 0.28) 22%, rgba(13, 148, 136, 0.16) 42%, rgba(13, 148, 136, 0.05) 62%, rgba(13, 148, 136, 0.01) 76%, transparent 88%);
  animation: au1 26s ease-in-out infinite alternate;
}
.aurora-mesh-wrap i:nth-child(2) {
  width: 48vw;
  height: 48vw;
  right: -5vw;
  top: 4vw;
  background: radial-gradient(circle at center, rgba(109, 40, 217, 0.32) 0%, rgba(109, 40, 217, 0.20) 22%, rgba(109, 40, 217, 0.10) 42%, rgba(109, 40, 217, 0.03) 62%, transparent 85%);
  animation: au2 30s ease-in-out infinite alternate;
}
.aurora-mesh-wrap i:nth-child(3) {
  width: 42vw;
  height: 42vw;
  left: 28vw;
  top: 16vw;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.26) 0%, rgba(16, 185, 129, 0.16) 22%, rgba(16, 185, 129, 0.08) 42%, rgba(16, 185, 129, 0.02) 62%, transparent 85%);
  animation: au3 34s ease-in-out infinite alternate;
}

/* Dynamic Accent Variant: Coral Mode */
html[data-accent="coral"] .aurora-mesh-wrap i:nth-child(1) {
  background: radial-gradient(circle at center, rgba(225, 29, 72, 0.42) 0%, rgba(225, 29, 72, 0.26) 35%, transparent 70%);
}
html[data-accent="coral"] .aurora-mesh-wrap i:nth-child(3) {
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.14) 35%, transparent 65%);
}

/* Industry aurora variants removed (consistency pass): all pages use the
   brand base palette so backgrounds match the homepage in both themes. */

/* Hero Dark Mode Calibration */
html[data-theme="dark"] .aurora-mesh-wrap i:nth-child(1) {
  background: radial-gradient(circle at center, rgba(45, 212, 191, 0.38) 0%, rgba(45, 212, 191, 0.22) 35%, rgba(45, 212, 191, 0.06) 60%, transparent 72%);
}
html[data-theme="dark"] .aurora-mesh-wrap i:nth-child(2) {
  background: radial-gradient(circle at center, rgba(167, 139, 250, 0.32) 0%, rgba(167, 139, 250, 0.18) 35%, rgba(167, 139, 250, 0.05) 60%, transparent 70%);
}
html[data-theme="dark"] .aurora-mesh-wrap i:nth-child(3) {
  background: radial-gradient(circle at center, rgba(52, 211, 153, 0.26) 0%, rgba(52, 211, 153, 0.14) 35%, rgba(52, 211, 153, 0.04) 60%, transparent 68%);
}

/* 2. RESULTS AURORA: Deep Cyber Telemetry Glow */
.aurora-results-wrap i:nth-child(1) {
  width: 46vw;
  height: 46vw;
  left: 5vw;
  top: 10%;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.12) 40%, transparent 70%);
  animation: au-res-1 18s ease-in-out infinite alternate;
}
.aurora-results-wrap i:nth-child(2) {
  width: 42vw;
  height: 42vw;
  right: 5vw;
  bottom: 5%;
  background: radial-gradient(circle at center, rgba(14, 165, 233, 0.20) 0%, rgba(99, 102, 241, 0.12) 42%, transparent 70%);
  animation: au-res-2 22s ease-in-out infinite alternate;
}
html[data-theme="dark"] .aurora-results-wrap i:nth-child(1) {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.28) 0%, rgba(16, 185, 129, 0.14) 40%, transparent 70%);
}
html[data-theme="dark"] .aurora-results-wrap i:nth-child(2) {
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.24) 0%, rgba(129, 140, 248, 0.14) 42%, transparent 70%);
}

/* 3. TEAM AURORA: Executive Backlight Halo */
.aurora-team-wrap i:nth-child(1) {
  width: 65vw;
  height: 380px;
  left: 17.5vw;
  top: 240px;
  border-radius: 50%;
  filter: blur(20px);
  background: radial-gradient(ellipse at center, rgba(13, 148, 136, 0.16) 0%, rgba(245, 158, 11, 0.10) 45%, transparent 75%);
  animation: au-team 16s ease-in-out infinite alternate;
}
html[data-theme="dark"] .aurora-team-wrap i:nth-child(1) {
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.18) 0%, rgba(167, 139, 250, 0.14) 45%, transparent 75%);
}

/* 4. CLOSING CTA AURORA: Conversion Spotlight Bloom */
.aurora-cta-wrap i:nth-child(1) {
  width: 50vw;
  height: 50vw;
  max-width: 620px;
  max-height: 620px;
  right: 5vw;
  top: 50%;
  transform: translate(0, -50%);
  background: radial-gradient(circle at center, rgba(13, 148, 136, 0.30) 0%, rgba(109, 40, 217, 0.18) 40%, transparent 70%);
  animation: au-cta 14s ease-in-out infinite alternate;
}
html[data-theme="dark"] .aurora-cta-wrap i:nth-child(1) {
  background: radial-gradient(circle at center, rgba(45, 212, 191, 0.32) 0%, rgba(147, 51, 234, 0.20) 40%, transparent 70%);
}

/* Aurora Fluid Drift Keyframes (Compositor-only translate3d & scale) */
@keyframes au1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vw, 0) scale(1.12); }
  100% { transform: translate3d(-3vw, 3vw, 0) scale(0.96); }
}
@keyframes au2 {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-7vw, 3vw, 0) scale(0.94); }
  100% { transform: translate3d(2vw, -4vw, 0) scale(1.08); }
}
@keyframes au3 {
  0% { transform: translate3d(0, 0, 0) scale(0.97); }
  50% { transform: translate3d(5vw, -4vw, 0) scale(1.15); }
  100% { transform: translate3d(-5vw, 3vw, 0) scale(1); }
}
@keyframes au-res-1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3vw, 2vw, 0) scale(1.08); }
}
@keyframes au-res-2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3vw, -2vw, 0) scale(1.06); }
}
@keyframes au-team {
  0% { transform: translate3d(0, 0, 0) scaleX(1); }
  100% { transform: translate3d(0, -10px, 0) scaleX(1.06); }
}
@keyframes au-cta {
  0% { transform: translate3d(0, -50%, 0) scale(1); }
  100% { transform: translate3d(-15px, -50%, 0) scale(1.1); }
}

/* ==========================================================================
   GRAPHY-STYLE FLOATING CARD FOOTER WITH LIVING AURORA BACKLIGHT
   ========================================================================== */
.footer-wrap {
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 88px !important;
  background: var(--canvas) !important;
}
html[data-theme="dark"] .footer-wrap {
  background: #070A10 !important;
}

.footer__ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  z-index: 0;
}

.aurora-footer-wrap {
  position: absolute;
  inset: 0;
}

.aurora-footer-wrap i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: none !important; /* Zero shader blur: 120fps fluid scrolling */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Node 1: Vibrant Teal / Emerald brand drift (Bottom-Left / Brand glow) */
.aurora-footer-wrap i:nth-child(1) {
  width: 50vw;
  height: 50vw;
  max-width: 680px;
  max-height: 680px;
  left: -8vw;
  bottom: -150px;
  background: radial-gradient(circle at center, rgba(13, 148, 136, 0.40) 0%, rgba(13, 148, 136, 0.26) 25%, rgba(16, 185, 129, 0.12) 45%, rgba(13, 148, 136, 0.03) 65%, transparent 80%);
  animation: au-footer-1 22s ease-in-out infinite alternate;
}

/* Node 2: Electric Indigo / Purple / Violet drift (Top-Right / Nav directory glow) */
.aurora-footer-wrap i:nth-child(2) {
  width: 52vw;
  height: 52vw;
  max-width: 720px;
  max-height: 720px;
  right: -6vw;
  top: -120px;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.38) 0%, rgba(139, 92, 246, 0.22) 28%, rgba(79, 70, 229, 0.10) 50%, rgba(99, 102, 241, 0.02) 68%, transparent 82%);
  animation: au-footer-2 26s ease-in-out infinite alternate;
}

/* Node 3: Cyan / Sky Blue central horizon breath */
.aurora-footer-wrap i:nth-child(3) {
  width: 65vw;
  height: 380px;
  left: 17.5vw;
  top: 25%;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.26) 0%, rgba(13, 148, 136, 0.14) 35%, rgba(14, 165, 233, 0.04) 58%, transparent 75%);
  animation: au-footer-3 20s ease-in-out infinite alternate;
}

/* Dark Mode Calibration for Footer Aurora */
html[data-theme="dark"] .aurora-footer-wrap i:nth-child(1) {
  background: radial-gradient(circle at center, rgba(45, 212, 191, 0.44) 0%, rgba(20, 184, 166, 0.28) 25%, rgba(16, 185, 129, 0.14) 48%, rgba(45, 212, 191, 0.03) 68%, transparent 82%);
}
html[data-theme="dark"] .aurora-footer-wrap i:nth-child(2) {
  background: radial-gradient(circle at center, rgba(167, 139, 250, 0.38) 0%, rgba(139, 92, 246, 0.24) 28%, rgba(129, 140, 248, 0.12) 50%, rgba(167, 139, 250, 0.03) 70%, transparent 84%);
}
html[data-theme="dark"] .aurora-footer-wrap i:nth-child(3) {
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.30) 0%, rgba(45, 212, 191, 0.16) 35%, rgba(56, 189, 248, 0.04) 60%, transparent 78%);
}

/* Keyframes for Continuous Smooth Compositor Motion */
@keyframes au-footer-1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(5vw, -30px, 0) scale(1.1); }
  100% { transform: translate3d(-3vw, 20px, 0) scale(0.95); }
}
@keyframes au-footer-2 {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-6vw, 35px, 0) scale(0.92); }
  100% { transform: translate3d(3vw, -25px, 0) scale(1.12); }
}
@keyframes au-footer-3 {
  0% { transform: translate3d(0, 0, 0) scale(0.96); }
  50% { transform: translate3d(-4vw, -20px, 0) scale(1.08); }
  100% { transform: translate3d(4vw, 25px, 0) scale(1.02); }
}

.footer-wrap .wrap {
  position: relative !important;
  z-index: 1 !important;
}
.footer-card {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 28px;
  padding: 56px 56px 36px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08), 0 0 32px rgba(13, 148, 136, 0.08);
  overflow: hidden;
}
html[data-theme="dark"] .footer-card {
  background: rgba(17, 23, 34, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(13, 148, 136, 0.14) !important;
}

.footer-card__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 960px) {
  .footer-card__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (max-width: 600px) {
  .footer-card {
    padding: 36px 22px 28px;
    border-radius: 20px;
  }
  .footer-card__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.footer-card__brand-col {
  display: flex;
  flex-direction: column;
}
.footer-card__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 18px;
}
html[data-theme="dark"] .footer-card__logo {
  color: #FFFFFF;
}
.footer-card__logo small {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 2px;
}
.footer-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 24px;
  max-width: 38ch;
}
html[data-theme="dark"] .footer-card__desc {
  color: var(--ink-dark-2);
}

.footer-card__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.footer-card__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--subtle);
  color: var(--ink-2);
  border: 1px solid var(--hair);
  text-decoration: none;
  transition: all 0.2s ease;
}
html[data-theme="dark"] .footer-card__social a {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
}
.footer-card__social a:hover {
  background: var(--action);
  color: #FFFFFF;
  border-color: var(--action);
  transform: translateY(-2px);
}

.footer-card__col h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
html[data-theme="dark"] .footer-card__col h4 {
  color: #FFFFFF;
}
.footer-card__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-card__col ul a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: color 0.18s ease;
}
html[data-theme="dark"] .footer-card__col ul a {
  color: var(--ink-dark-2);
}
.footer-card__col ul a:hover {
  color: var(--action);
}

.footer-card__bottom {
  border-top: 1px solid var(--hair);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-3);
}
html[data-theme="dark"] .footer-card__bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #64748B;
}
.footer-card__legal {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-card__legal a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.18s ease;
}
html[data-theme="dark"] .footer-card__legal a {
  color: #94A3B8;
}
.footer-card__legal a:hover {
  color: var(--action);
}

/* ==========================================================================
   GLOBAL THEME TOGGLE, DARK MODE & PROPOSAL DRAWER
   ========================================================================== */
.theme-toggle {
  background: var(--subtle) !important;
  border: 1px solid var(--hair) !important;
  color: var(--ink) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-right: 10px !important;
  flex: none !important;
}
.theme-toggle:hover {
  background: var(--pure) !important;
  border-color: var(--action) !important;
  color: var(--action) !important;
  transform: scale(1.08) rotate(15deg) !important;
}
.theme-toggle .sun-icon { display: none !important; }
.theme-toggle .moon-icon { display: block !important; }

html[data-theme="dark"] .theme-toggle .sun-icon { display: block !important; color: #F59E0B !important; }
html[data-theme="dark"] .theme-toggle .moon-icon { display: none !important; }

/* Sticky Header on Scroll */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 990 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--hair) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.nav.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Status Rail (Non-sticky: scrolls naturally and slides under sticky header) */
.rail {
  position: relative !important;
  z-index: 80 !important;
  border-bottom: 1px solid var(--hair) !important;
  background: var(--pure) !important;
}

/* Comprehensive Dark Mode Rules */
html[data-theme="dark"] {
  --canvas: #0B0F17 !important;
  --pure: #131B27 !important;
  --subtle: #192233 !important;
  --hair: rgba(255, 255, 255, 0.1) !important;
  --hair-strong: rgba(255, 255, 255, 0.18) !important;
  --ink: #F8FAFC !important;
  --ink-2: #CBD5E1 !important;
  --ink-3: #94A3B8 !important;
}
html[data-theme="dark"] body {
  background: #0B0F17 !important;
  color: #F8FAFC !important;
}
html[data-theme="dark"] .nav {
  background: rgba(11, 15, 23, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .nav.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .nav .brand {
  color: #ffffff !important;
}
html[data-theme="dark"] .nav .menu > li > a {
  color: #E2E8F0 !important;
}
html[data-theme="dark"] .nav .tel {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .rail {
  background: #090D14 !important;
  color: #94A3B8 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .card {
  background: #131B27 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .form {
  background: #131B27 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form textarea,
html[data-theme="dark"] .form select {
  background: #0B0F17 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
}
html[data-theme="dark"] .form label {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .cell {
  background: #131B27 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .cell h3,
html[data-theme="dark"] .cell h4 {
  color: #ffffff !important;
}
html[data-theme="dark"] .cell p {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .sub {
  background: #131B27 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .sub a {
  color: #E2E8F0 !important;
}
html[data-theme="dark"] .sub a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--action) !important;
}
html[data-theme="dark"] .drawer {
  background: #0B0F17 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .drawer a {
  color: #E2E8F0 !important;
}
html[data-theme="dark"] .btn--ghost {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
html[data-theme="dark"] .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Slide-Out Proposal Drawer */
.proposal-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(11, 15, 23, 0.55) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}
.proposal-drawer-backdrop.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}
.proposal-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
  background: var(--pure) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25) !important;
  z-index: 9999 !important;
  transform: translateX(100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  padding: 34px 28px !important;
}
.proposal-drawer.is-open {
  transform: translateX(0) !important;
}
html[data-theme="dark"] .proposal-drawer {
  background: #131B27 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.proposal-drawer__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}
.proposal-drawer__tag {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  color: var(--action) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.proposal-drawer__head h3 {
  font-family: var(--display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 4px 0 6px !important;
  letter-spacing: -0.02em !important;
}
html[data-theme="dark"] .proposal-drawer__head h3 {
  color: #ffffff !important;
}
.proposal-drawer__head p {
  font-size: 13.5px !important;
  color: var(--ink-2) !important;
  line-height: 1.4 !important;
}
html[data-theme="dark"] .proposal-drawer__head p {
  color: var(--ink-dark-2) !important;
}
.proposal-drawer__close {
  background: var(--subtle) !important;
  border: 1px solid var(--hair) !important;
  color: var(--ink) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  flex: none !important;
}
html[data-theme="dark"] .proposal-drawer__close {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}
.proposal-drawer__close:hover {
  background: var(--ink) !important;
  color: #fff !important;
}
.proposal-drawer__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}
.proposal-drawer__form label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-3) !important;
  font-weight: 600 !important;
  margin-bottom: -5px !important;
}
.proposal-drawer__form input,
.proposal-drawer__form textarea {
  width: 100% !important;
  padding: 10px 13px !important;
  border: 1px solid var(--hair-strong) !important;
  border-radius: 6px !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  background: var(--pure) !important;
  color: var(--ink) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html[data-theme="dark"] .proposal-drawer__form input,
html[data-theme="dark"] .proposal-drawer__form textarea {
  background: #0B0F17 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
}
.proposal-drawer__form input:focus,
.proposal-drawer__form textarea:focus {
  outline: none !important;
  border-color: var(--action) !important;
  box-shadow: 0 0 0 3px var(--action-soft) !important;
}
.proposal-drawer__foot {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
  text-align: center !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

/* ==========================================================================
   REVISION R1 COMPONENTS (Brief additions)
   ========================================================================== */

/* ---------- theme toggle button ---------- */
.theme-toggle {
  background: var(--subtle) !important;
  border: 1px solid var(--hair-strong) !important;
  color: var(--ink) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex: none !important;
  padding: 0 !important;
}
.theme-toggle:hover {
  background: var(--pure) !important;
  border-color: var(--action) !important;
  color: var(--action) !important;
  transform: scale(1.08) rotate(15deg) !important;
}
.theme-toggle .sun-icon { display: none !important; }
.theme-toggle .moon-icon { display: block !important; }
html[data-theme="dark"] .theme-toggle .sun-icon { display: block !important; color: #F59E0B !important; }
html[data-theme="dark"] .theme-toggle .moon-icon { display: none !important; }

/* ---------- AIBF emblem in hero ---------- */
.emblem {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--hair-strong);
  background: var(--pure);
  border-radius: 6px;
  padding: 14px 20px 14px 14px;
  margin-bottom: 26px;
}
.emblem__mark {
  width: 86px;
  height: 86px;
  object-fit: contain;
  flex: none;
}
img.emblem__mark {
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  flex: none !important;
}
.emblem__txt b {
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.emblem__txt span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
@media (max-width: 520px) {
  .emblem__mark, img.emblem__mark {
    width: 68px !important;
    height: 68px !important;
  }
}

/* ---------- team photos & avatars ---------- */
.contact__av {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  flex: none !important;
  background: var(--subtle) !important;
  border: 1px solid var(--hair-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.contact__av img, img.contact__av {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 28% !important;
  display: block !important;
}

/* ---------- accreditation photography ---------- */
.accred {
  margin: 0;
  align-self: start;
}
.accred img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--hair);
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: 50% 22%;
}
.accred figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin-top: 12px;
  line-height: 1.5;
}
.accred--wide {
  margin-top: 32px;
}
.accred--wide img {
  aspect-ratio: 16/9;
  object-position: 50% 12%;
}
.sec--dark .accred img {
  border-color: var(--hair-dark);
}
.sec--dark .accred figcaption {
  color: var(--ink-dark-2);
}

/* ---------- map embed ---------- */
.mapwrap {
  position: relative;
  aspect-ratio: 21/8;
  border: 1px solid var(--hair);
  border-radius: 8px;
  overflow: hidden;
  background: var(--subtle);
}
.mapwrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 1;
}
@media (max-width: 700px) {
  .mapwrap {
    aspect-ratio: 4/3;
  }
}
.mapwrap__fb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-2);
  padding: 20px;
  margin: 0;
  z-index: 0;
}
.mapwrap__fb b {
  color: var(--ink);
  font-size: 16px;
}
.mapwrap__fb a {
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 8px;
  font-weight: 700;
  color: var(--action);
}


/* ==========================================================
   Official brand-mark plates — services grid
   Marks are used unmodified in official colours; the plate
   carries a soft tint of each brand's colour. Asset files and
   usage notes: assets/logos/brands/
   Specificity is intentionally high so these win over the
   page-level !important icon styles on index.html.
   ========================================================== */
html[data-theme] .service-card .service-card__icon[style*="--tint"] {
  background-color: #FFFFFF !important;
  background-image: linear-gradient(rgba(var(--tint, 15, 23, 42), 0.16), rgba(var(--tint, 15, 23, 42), 0.16)) !important;
  border-color: rgba(var(--tint, 15, 23, 42), 0.30) !important;
}

/* Optical sizing per official mark (heights tuned for equal visual weight) */
.service-card__icon img.logo-wp        { height: 26px !important; width: auto !important; }
.service-card__icon img.logo-shopify   { height: 30px !important; width: auto !important; }
.service-card__icon img.logo-google    { height: 24px !important; width: auto !important; }
.service-card__icon img.logo-googleads { height: 27px !important; width: auto !important; }
.service-card__icon img.logo-meta      { width: 30px !important; height: auto !important; }
.service-card__icon img.logo-linkedin  { height: 21px !important; width: auto !important; }
.service-card__icon img.logo-openai    { height: 26px !important; width: auto !important; }
.service-card__icon img.logo-zapier    { height: 27px !important; width: auto !important; }

/* ===== Brand logo (header + footer) ===== */
.brand--logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand__img{display:block;height:34px;width:auto;flex-shrink:0;object-fit:contain}
.brand__img--light{display:none}
html[data-theme="dark"] .brand__img--dark{display:none}
html[data-theme="dark"] .brand__img--light{display:block}
@media(max-width:560px){.brand__img{height:30px}}
.footer-card__logo--img .brand__img{height:30px}
@media(max-width:560px){.footer-card__logo--img .brand__img{height:27px}}

/* ---------- Blog hub: filters + post cards ---------- */

.post-filters{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 30px}

.post-filter{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2);background:var(--pure);border:1px solid var(--hair-strong);border-radius:99px;padding:8px 16px;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}

.post-filter sup{font-size:9px;margin-left:5px;opacity:.7}

.post-filter:hover{border-color:var(--action);color:var(--action)}

.post-filter.is-active{background:var(--action);border-color:var(--action);color:#fff}

.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

@media(max-width:1080px){.posts-grid{grid-template-columns:repeat(2,1fr);gap:18px}}

@media(max-width:640px){.posts-grid{grid-template-columns:1fr}}

.post-card{display:flex;flex-direction:column;background:var(--pure);border:1px solid var(--hair);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(15,23,42,.03);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}

.post-card:hover{transform:translateY(-4px);box-shadow:0 20px 38px -10px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.04);border-color:rgba(15,23,42,.2)}

html[data-theme="dark"] .post-card{background:#121821;border-color:rgba(255,255,255,.09);box-shadow:0 4px 16px rgba(0,0,0,.3)}

html[data-theme="dark"] .post-card:hover{border-color:var(--action);box-shadow:0 18px 38px -10px rgba(0,0,0,.6)}

.post-card__media{aspect-ratio:16/9;background:#0B0F17;overflow:hidden;border-bottom:1px solid var(--hair);position:relative}

.post-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}

.post-card:hover .post-card__media img{transform:scale(1.05)}

.post-card__media--fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0E141C,#0B2530)}

.post-card__media--fallback span{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--action)}

.post-card__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}

.post-card__meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}

.post-card__cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--action);font-weight:700}

.post-card__date{font-family:var(--mono);font-size:10px;color:var(--ink-3)}

.post-card h3{font-family:var(--display);font-size:17.5px;font-weight:700;line-height:1.32;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}

html[data-theme="dark"] .post-card h3{color:#F8FAFC}

.post-card p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

html[data-theme="dark"] .post-card p{color:#94A3B8}

.post-card__more{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--action);margin-top:auto}

/* ---------- Blog article pages ---------- */
.article{padding:64px 0 88px}
.article__head{max-width:860px;margin:0 auto}
.article__head .mark{margin-bottom:14px}
.article__head h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.025em;margin:0 0 18px}
.article__meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.article__hero{max-width:1000px;margin:34px auto 40px;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#0B0F17}
.article__hero img{width:100%;height:auto;display:block}
.article__body{max-width:760px;margin:0 auto;font-size:17px;line-height:1.75;color:var(--ink-2)}
.article__body p{margin:0 0 22px}
.article__body h2{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:48px 0 16px;line-height:1.22}
.article__body h3{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink);margin:34px 0 12px;line-height:1.3}
.article__body a:not(.btn){color:var(--action);text-decoration:underline;text-underline-offset:2px}
.article__body strong{color:var(--ink)}
.article__body ul,.article__body ol{margin:0 0 22px;padding-left:26px}
.article__body li{margin-bottom:10px}
.article__body blockquote{border-left:3px solid var(--action);padding:6px 0 6px 20px;margin:0 0 22px;font-style:italic;color:var(--ink)}
.article-figure{margin:30px 0}
.article-figure img{width:100%;height:auto;display:block;border:1px solid var(--hair);border-radius:10px}
.article-figure figcaption{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:center}
.article-table{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch}
.article-table table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.article-table th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:left;padding:12px 14px;border-bottom:2px solid var(--hair-strong);background:var(--subtle)}
.article-table td{padding:12px 14px;border-bottom:1px solid var(--hair);color:var(--ink-2);vertical-align:top}
.article-cta{text-align:center;margin:34px 0}
.article__back{max-width:760px;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--hair)}
.article__back a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--action);text-decoration:none}
@media(max-width:640px){.article{padding:44px 0 64px}.article__body{font-size:16px}}

/* ---------- mobile header layout: keep logo proportions, no flex squeeze ---------- */
/* the hidden menu <nav> wrapper still consumed flex gaps — remove it on mobile */
@media(max-width:1060px){.nav .wrap>nav{display:none}}
@media(max-width:560px){
  .nav .wrap{gap:10px}
  .nav .right{gap:8px;flex-shrink:0}
  .nav .right .theme-toggle{margin-right:0 !important;flex-shrink:0}
  .nav .right .btn{padding:10px 12px;font-size:13px;flex-shrink:0}
  .burger{margin-left:6px}
}
/* no room for the theme toggle next to logo + CTA + burger below 420px */
@media(max-width:419px){.nav .right .theme-toggle{display:none !important}}


/* ---------- video lightbox modal (click-to-play) ---------- */
.video-modal-backdrop {

  position: fixed !important;

  inset: 0 !important;

  background: rgba(11, 15, 23, 0.88) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  z-index: 99998 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: opacity 0.25s ease, visibility 0.25s ease !important;

}

.video-modal-backdrop.is-open {

  opacity: 1 !important;

  visibility: visible !important;

}

.video-modal {

  position: fixed !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) scale(0.95) !important;

  width: 92% !important;

  max-width: 880px !important;

  background: #000 !important;

  border-radius: 12px !important;

  overflow: hidden !important;

  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;

  z-index: 99999 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease !important;

}

.video-modal.is-open {

  transform: translate(-50%, -50%) scale(1) !important;

  opacity: 1 !important;

  visibility: visible !important;

}

.video-modal__close {

  position: absolute !important;

  top: 12px !important;

  right: 12px !important;

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  background: rgba(15, 23, 42, 0.75) !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  color: #fff !important;

  font-size: 22px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 10 !important;

  line-height: 1 !important;

  transition: all 0.2s ease !important;

}

.video-modal__close:hover {

  background: #fff !important;

  color: #0f172a !important;

}

.video-modal__viewport {

  position: relative !important;

  width: 100% !important;

  padding-bottom: 56.25% !important; /* 16:9 ratio */

  background: #000 !important;

}

.video-modal__viewport iframe {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  border: 0 !important;

}