:root{
  --blue:#2f74bd; --blue-deep:#1f5793; --orange:#f09018; --green:#7cc01a; --teal:#1fa9b3;
  --ink:#15181d; --ink-soft:#3d434c; --muted:#6b7280;
  --paper:#ffffff; --paper-2:#f6f7f9; --paper-3:#eef1f4; --line:#e3e7ec;
  --display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --body:"Spline Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:17px}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;letter-spacing:-0.02em;font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.dots{display:inline-flex;gap:5px;align-items:center}
.dots i{width:9px;height:9px;border-radius:50%;display:block}
.d-b{background:var(--blue)} .d-o{background:var(--orange)} .d-g{background:var(--green)} .d-t{background:var(--teal)}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-weight:500;font-size:15px;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.btn{font-family:var(--display);font-weight:600;font-size:15px;border-radius:999px;padding:12px 22px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;transition:transform .15s,box-shadow .2s,background .2s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(21,24,29,.5)}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(240,144,24,.6)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--ink);display:block}

/* HERO */
.hero{position:relative;overflow:hidden;padding:88px 0 76px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,68px);font-weight:700}
.hero h1 .hl{color:var(--blue);position:relative}
.hero p.lead{font-size:20px;color:var(--ink-soft);margin:26px 0 34px;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:30px;margin-top:42px;flex-wrap:wrap}
.hero-meta .m b{font-family:var(--display);font-size:30px;font-weight:700;display:block;letter-spacing:-.02em}
.hero-meta .m span{font-size:14px;color:var(--muted)}
/* HERO terminal */
.hero-visual{position:relative}
.hero-visual .glow{position:absolute;border-radius:50%;z-index:0;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 68%);mask-image:radial-gradient(circle,#000 0,transparent 68%)}
.terminal{position:relative;z-index:1;border-radius:16px;background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 80px -44px rgba(31,87,147,.45),0 8px 24px -16px rgba(21,24,29,.25)}
.term-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.term-bar .tdot{width:11px;height:11px;border-radius:50%}
.term-bar .tlabel{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;letter-spacing:.04em;white-space:nowrap}
.term-bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(124,192,26,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,192,26,.5)}70%{box-shadow:0 0 0 9px rgba(124,192,26,0)}100%{box-shadow:0 0 0 0 rgba(124,192,26,0)}}
.term-body{padding:22px 24px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.95}
.term-body .ln{display:flex;gap:11px;align-items:baseline}
.term-body .ln + .ln{margin-top:2px}
.term-body .pfx{color:var(--blue);flex:none}
.term-body .c-mut{color:var(--muted)}
.term-body .c-grn{color:#5a9410}
.term-body .c-org{color:#cf7a0c}
.term-body .c-blu{color:var(--blue)}
.term-body .step{opacity:1;transform:none}
.cursor{display:inline-block;width:7px;height:15px;background:var(--blue);vertical-align:-2px;animation:blink 1.1s step-end infinite;border-radius:1px}
@keyframes blink{50%{opacity:0}}
.term-foot{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 22px}
.term-foot .chip{font-family:var(--mono);font-size:11px;color:var(--blue);background:#eaf2fb;border:1px solid #d6e6f6;border-radius:6px;padding:4px 9px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.cursor,.pulse{animation:none}}

/* TRUST */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:44px 0}
.trust-label{text-align:center;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;align-items:center;justify-items:center;max-width:1000px;margin:0 auto}
.logo-chip{width:100%;height:52px;display:flex;align-items:center;justify-content:center}
.logo-slot{width:100%;max-width:152px;height:50px;object-fit:contain}
.logo-ph{font-family:var(--display);font-weight:700;font-size:18px;color:#aab2bd;letter-spacing:.02em;opacity:.85}

/* SECTION SHELL */
section.block{padding:96px 0}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px)}
.sec-head p{font-size:19px;color:var(--ink-soft);margin-top:16px}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.svc{border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff;transition:transform .2s,box-shadow .25s,border-color .2s;position:relative;overflow:hidden}
.svc:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(21,24,29,.4);border-color:#d4dae1}
.svc.lead{grid-column:span 6;display:grid;grid-template-columns:1.2fr 1fr;gap:0;padding:0;background:linear-gradient(120deg,#0f1f33,#1f5793 130%)}
.svc.lead .body{padding:40px}
.svc.lead h3,.svc.lead p{color:#fff}
.svc.lead h3{font-size:30px}
.svc.lead p{color:#cfe0f1;opacity:.95}
.svc.lead .side{position:relative;border-left:1px solid rgba(255,255,255,.12);min-height:230px;overflow:hidden;background:radial-gradient(100% 100% at 100% 0,rgba(47,116,189,.5),transparent);display:flex;align-items:center;padding:30px 30px}
.orch{position:relative;z-index:1;width:100%}
.orch .lbl{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff;margin-bottom:14px;text-align:center}
.orch .node{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:10px 13px}
.orch .node .ic{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:12px;color:#04121a;flex:none}
.orch .node b{font-family:var(--display);font-size:13px;color:#fff;display:block;line-height:1.15}
.orch .node span{font-size:11px;color:#9fc0e0}
.orch .boss{background:rgba(47,116,189,.28);border-color:rgba(159,208,255,.45)}
.orch .boss b{font-size:14px}
.orch .fanout{display:flex;justify-content:center;height:26px;position:relative}
.orch .fanout svg{position:absolute;top:0;left:0;width:100%;height:100%}
.orch .agents{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.orch .agents .node{flex-direction:column;align-items:flex-start;gap:7px;padding:11px 11px 10px}
.orch .agents .node .tool{font-family:ui-monospace,monospace;font-size:10px;color:#cfe0f1;background:rgba(255,255,255,.08);border-radius:5px;padding:3px 7px;align-self:stretch;text-align:center;letter-spacing:.02em}
.orch .merge{display:flex;justify-content:center;height:22px;position:relative}
.orch .merge svg{position:absolute;top:0;left:0;width:100%;height:100%}
.orch .result{background:rgba(124,192,26,.16);border-color:rgba(124,192,26,.4)}
.orch .result .ic{background:#7cc01a}
.svc:not(.lead){grid-column:span 3}
.svc .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-weight:700;font-family:var(--display);color:#fff;font-size:18px}
.svc h3{font-size:21px;margin-bottom:9px}
.svc p{color:var(--ink-soft);font-size:15.5px}
.badge-ai{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff;margin:30px 40px 0}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-size:13px;color:#cfe0f1;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
/* featured agentic-AI case */
.work-feature{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#0f1f33,#1f5793 145%);color:#fff;display:grid;grid-template-columns:1.08fr .92fr;margin-bottom:26px;box-shadow:0 40px 80px -52px rgba(31,87,147,.6)}
.work-feature .ci{padding:44px 46px}
.work-feature .flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#04121a;background:var(--green);padding:5px 11px;border-radius:6px}
.work-feature .kicker{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff;margin-top:20px}
.work-feature h3{color:#fff;font-size:30px;margin:11px 0 12px}
.work-feature p{color:#cfe0f1;font-size:16px}
.work-feature .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.work-feature .chip{font-size:13px;color:#cfe0f1;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px}
.work-feature .note{margin-top:20px;font-size:13.5px;color:#9fb6cf}
/* whatsapp chat mockup */
.chat{position:relative;background:#0b141a;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;overflow:hidden;min-height:340px}
.chat::before{content:'';position:absolute;inset:0;background:
   radial-gradient(circle at 18% 12%, rgba(124,192,26,.16), transparent 40%),
   radial-gradient(circle at 85% 88%, rgba(31,169,179,.14), transparent 42%);opacity:.9}
.chat .wa-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:11px;padding:13px 18px;background:#1f2c33;border-bottom:1px solid rgba(255,255,255,.06);z-index:2}
.chat .wa-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:#04121a;font-size:14px}
.chat .wa-top b{font-family:var(--display);font-size:15px;color:#fff;display:block;line-height:1.2}
.chat .wa-top span{font-size:11.5px;color:#7cc01a}
.chat .bubbles{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;margin-top:54px}
.chat .b{max-width:80%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.2)}
.chat .b.in{align-self:flex-start;background:#202c33;color:#e9edef;border-top-left-radius:3px}
.chat .b.out{align-self:flex-end;background:#144d37;color:#e9f7ef;border-top-right-radius:3px}
.chat .b .t{display:block;font-size:10px;color:rgba(255,255,255,.45);text-align:right;margin-top:3px}
.chat .b.out .tick{color:#53bdeb}
/* CASE ROWS — alternating, with screenshot slots */
.case-row{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;margin-bottom:24px;box-shadow:0 30px 60px -50px rgba(21,24,29,.4)}
.case-row.flip .cr-media{order:2}
.case-row.flip .cr-body{order:1}
.cr-media{position:relative;min-height:360px;background:var(--paper-3);display:flex}
.cr-media image-slot{width:100%;height:100%}
.cr-band{position:absolute;top:0;left:0;right:0;height:5px;z-index:3}
.cr-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.cr-body .kicker{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.cr-body h3{font-size:27px;margin:11px 0 12px}
.cr-body p{color:var(--ink-soft);font-size:15.5px}
.cr-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--blue)}
.cr-live:hover{text-decoration:underline}
.cr-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:16px}
.cr-case{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--orange)}
.cr-case:hover{text-decoration:underline}
.work-feature .cr-case{color:#9fd0ff;margin-top:20px}
.cr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cr-chips .chip{font-size:13px;color:var(--ink-soft);border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:5px 12px}
/* technical spec block (ADVETI) */
.spec-table{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-table .sr{display:grid;grid-template-columns:128px 1fr;gap:0;border-bottom:1px solid var(--line)}
.spec-table .sr:last-child{border-bottom:none}
.spec-table .sk{font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--paper-2);padding:11px 14px;border-right:1px solid var(--line)}
.spec-table .sv{padding:11px 14px;font-size:14px;color:var(--ink)}
.cr-stat{display:flex;gap:26px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.cr-stat b{font-family:var(--display);font-size:20px;font-weight:700;display:block;color:var(--blue);letter-spacing:-.02em}
.cr-stat span{font-size:12.5px;color:var(--muted)}
/* contained screenshot (full image, no crop) */
.cr-media.shot-fit{background:linear-gradient(135deg,#eef2f6,#e1e6ec);padding:30px;display:flex;align-items:center;justify-content:center}
.browser{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 26px 54px -30px rgba(21,24,29,.55)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#f1f3f6;border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border-radius:50%;display:block}
.browser-bar .url{margin-left:10px;font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 12px;flex:1;max-width:280px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser .shot-slot{display:block;width:100%}
#shot-connexis{aspect-ratio:3024 / 1508}
#shot-adveti{aspect-ratio:4 / 3}
#shot-roshni{aspect-ratio:16 / 10}
/* dark spec table for featured cards */
.spec-d{margin-top:20px;border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden}
.spec-d .sr{display:grid;grid-template-columns:128px 1fr;border-bottom:1px solid rgba(255,255,255,.12)}
.spec-d .sr:last-child{border-bottom:none}
.spec-d .sk{font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#9fd0ff;background:rgba(255,255,255,.05);padding:11px 14px;border-right:1px solid rgba(255,255,255,.12)}
.spec-d .sv{padding:11px 14px;font-size:14px;color:#e8eef5}
.nda-chip.dark{color:#9fb6cf;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.nda-chip.dark .lk{background:var(--orange)}
.nda-chip{display:inline-flex;align-items:center;gap:7px;font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.nda-chip .lk{width:7px;height:7px;border-radius:50%;background:var(--orange)}
/* AI medical scribe mockup — dark variant for featured card */
.scribe{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:36px}
.scribe .rec{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 16px}
.scribe .rdot{width:11px;height:11px;border-radius:50%;background:#ff6b6f;box-shadow:0 0 0 0 rgba(255,107,111,.5);animation:recpulse 1.6s infinite}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(255,107,111,.5)}70%{box-shadow:0 0 0 8px rgba(255,107,111,0)}100%{box-shadow:0 0 0 0 rgba(255,107,111,0)}}
.scribe .rec .rlabel{font-family:var(--display);font-weight:700;font-size:13px;color:#fff}
.scribe .rec .rtime{font-family:ui-monospace,monospace;font-size:12px;color:#9fb6cf;margin-left:2px}
.scribe .wave{display:flex;align-items:center;gap:3px;margin-left:auto;height:26px}
.scribe .wave i{width:3px;height:24px;border-radius:2px;background:#5aa6ff;animation:wave 1.1s ease-in-out infinite}
@keyframes wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.scribe .arrow{display:flex;align-items:center;gap:9px;font-family:ui-monospace,monospace;font-size:11.5px;color:#9fd0ff;letter-spacing:.04em}
.scribe .arrow .line{flex:1;height:1px;background:linear-gradient(90deg,#5aa6ff,transparent)}
.scribe .note{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}
.scribe .note .nh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.scribe .note .nh b{font-family:var(--display);font-size:14px;color:var(--ink)}
.scribe .note .hipaa{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.04em;color:#5a9410;background:#eef7e0;border:1px solid #d8ecbf;border-radius:6px;padding:3px 8px}
.scribe .soap{display:flex;gap:11px;align-items:baseline;padding:5px 0;font-size:13px}
.scribe .soap .k{font-family:var(--display);font-weight:700;color:var(--blue);width:16px;flex:none}
.scribe .soap .v{color:var(--ink-soft)}
.scribe .soap .v.dim{color:#aab2bd}
/* government badge */
.gov-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#15181d,#1f5793 150%);border-radius:7px;padding:6px 13px;margin-bottom:16px}
.gov-badge .em{width:13px;height:13px;border-radius:3px;background:linear-gradient(135deg,#f09018,#7cc01a);flex:none}

/* WHY */
.why{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.why-cell{background:#fff;padding:38px}
.why-cell .n{font-family:var(--display);font-weight:700;color:#c3cbd4;font-size:15px}
.why-cell h3{font-size:23px;margin:14px 0 10px}
.why-cell p{color:var(--ink-soft);font-size:15.5px}

/* TESTIMONIALS */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.quote{border:1px solid var(--line);border-radius:18px;padding:32px;background:#fff;display:flex;flex-direction:column}
.quote .mark{font-family:var(--display);font-size:46px;line-height:.6;color:var(--green);font-weight:700;height:26px}
.quote p{font-size:17px;color:var(--ink);margin:10px 0 22px;flex:1}
.quote .who{display:flex;align-items:center;gap:13px}
.quote .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:#fff;font-size:15px;flex:none}
.quote .who b{font-family:var(--display);font-size:15.5px;display:block}
.quote .who span{font-size:13px;color:var(--muted)}

/* CTA */
.cta-final{padding:108px 0}
.cta-card{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(125deg,#15181d,#1f5793 145%);padding:72px 64px;text-align:center;color:#fff}
.cta-card h2{font-size:clamp(32px,4.4vw,54px);color:#fff}
.cta-card p{font-size:20px;color:#cfe0f1;max-width:540px;margin:18px auto 34px}
.cta-card .hero-cta{justify-content:center}
.cta-orb{position:absolute;border-radius:50%;opacity:.5;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 68%);mask-image:radial-gradient(circle,#000 0,transparent 68%)}

/* FOOTER */
footer{background:var(--paper);border-top:1px solid var(--line);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer img{height:28px;width:auto;margin-bottom:16px}
footer .tagline{color:var(--muted);font-size:15px;max-width:300px}
.foot-col h4{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:700}
.foot-col a{display:block;color:var(--ink-soft);font-size:15px;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--blue)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;flex-wrap:wrap;gap:12px}
.soon{font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--green);border-radius:4px;padding:2px 6px;margin-left:7px;vertical-align:middle;text-transform:uppercase}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:460px}
  .svc.lead{grid-template-columns:1fr}.svc.lead .side{display:none}
  .svc:not(.lead){grid-column:span 3}
  .work-feature{grid-template-columns:1fr}
  .chat{min-height:300px}
  .case-row,.case-row.flip .cr-media,.case-row.flip .cr-body{grid-template-columns:1fr;order:initial}
  .case-row{grid-template-columns:1fr}
  .cr-media{min-height:240px}
  .work-grid,.why-grid,.quotes{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr);gap:28px;max-width:560px}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .nav-cta .btn{display:none}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:20px;gap:6px;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(21,24,29,.35)}
  .nav-links.open a{padding:12px 4px;font-size:17px}
  .nav-links.open .nav-links-cta{display:inline-flex;justify-content:center;margin-top:8px}
  .burger{display:flex}
  .svc-grid{grid-template-columns:1fr}.svc:not(.lead){grid-column:span 1}
  .logos{grid-template-columns:repeat(2,1fr);gap:24px}
  .cta-card{padding:48px 26px}
  .foot-grid{grid-template-columns:1fr}
  .hero-meta{gap:22px}
}

/* ---------- Shared additions ---------- */
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip-link:focus{left:12px}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-links-cta{display:none}
.burger{padding:6px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* Page hero (inner pages) */
.page-hero{padding:80px 0 56px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.page-hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:700;margin-top:14px;max-width:820px}
.page-hero p.lead{font-size:20px;color:var(--ink-soft);margin-top:20px;max-width:680px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:6px}
.crumbs a:hover{color:var(--blue)}
.crumbs span{margin:0 8px}

/* Prose (legal + long text) */
.prose{max-width:760px}
.prose h2{font-size:26px;margin:44px 0 12px}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose p,.prose li{color:var(--ink-soft);font-size:17px;margin-bottom:14px}
.prose ul{padding-left:22px;margin-bottom:14px}
.prose a{color:var(--blue);text-decoration:underline}
.prose .updated{color:var(--muted);font-size:14px}

/* About */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.stat{border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff}
.stat b{font-family:var(--display);font-size:42px;font-weight:700;color:var(--blue);display:block;letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:15px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.form{border:1px solid var(--line);border-radius:20px;padding:36px;background:#fff;box-shadow:0 30px 60px -50px rgba(21,24,29,.4)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field label{font-family:var(--display);font-weight:600;font-size:14px;margin-bottom:7px}
.field label .req{color:var(--orange)}
.field label .opt,.ct-when legend .opt{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:16px;color:var(--ink);padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;width:100%;transition:border-color .2s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field .err{color:#c0392b;font-size:13.5px;margin-top:6px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-radius:14px;padding:16px 18px;margin-bottom:22px;font-size:15.5px}
.alert.ok{background:#eef7e0;border:1px solid #d8ecbf;color:#3f6b0b}
.alert.bad{background:#fdecea;border:1px solid #f5c6c0;color:#8e2a1f}
.side-card{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--paper-2);margin-bottom:20px}
.side-card h3{font-size:20px;margin-bottom:10px}
.side-card p{color:var(--ink-soft);font-size:15.5px;margin-bottom:16px}
.side-card a.mail{color:var(--blue);font-weight:600}
.note-sm{font-size:13.5px;color:var(--muted)}

/* 404 */
.nf{padding:120px 0;text-align:center}
.nf .code{font-family:var(--display);font-weight:700;font-size:clamp(80px,14vw,160px);line-height:1;color:var(--paper-3)}
.nf h1{font-size:clamp(28px,4vw,40px);margin:8px 0 14px}
.nf p{color:var(--ink-soft);margin-bottom:28px}

@media(max-width:980px){
  .stat-row,.two-col,.contact-grid{grid-template-columns:1fr}
  .two-col{gap:28px}
}
@media(max-width:680px){
  .form{padding:24px}
  .form .row{grid-template-columns:1fr;gap:0}
  .page-hero{padding:56px 0 40px}
}

/* ---------- Case studies ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.filter{font-family:var(--display);font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:all .2s}
.filter:hover{border-color:var(--ink)}
.filter.active{background:var(--ink);border-color:var(--ink);color:#fff}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.proj-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .25s;box-shadow:0 30px 60px -50px rgba(21,24,29,.4)}
.proj-card[hidden]{display:none}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 36px 64px -40px rgba(21,24,29,.45)}
/* While CASE_STUDIES_LIVE is false the cards keep their content but lead nowhere (case_study_attrs()
   in includes/config.php, with the click swallowed in main.js). Take away the affordances that
   promise a destination, so the card reads as a summary rather than a broken link. Keyed on the
   attribute, which is only emitted while the flag is off, so flipping it back restores the hover
   with no CSS to undo. */
.proj-card[data-nolink]{cursor:default}
.proj-card[data-nolink]:hover{transform:none;box-shadow:0 30px 60px -50px rgba(21,24,29,.4)}
.proj-media{position:relative;height:240px;background:linear-gradient(135deg,#eef2f6,#e1e6ec);overflow:hidden;display:flex;align-items:center;justify-content:center;border-top:5px solid var(--accent,var(--blue))}
.proj-media img{width:100%;height:100%;object-fit:cover;object-position:top}
.proj-mono{font-family:var(--display);font-weight:700;font-size:96px;color:var(--accent,var(--blue));opacity:.9}
.proj-body{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1}
.proj-body .kicker{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.proj-body h2,.proj-body h3{font-size:23px;margin:10px 0 10px}
.proj-body p{color:var(--ink-soft);font-size:15.5px}
.proj-body .cr-chips{margin-top:16px}
.proj-more{margin-top:auto;padding-top:20px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--blue)}
.case-hero{border-bottom:none;background:linear-gradient(180deg,var(--paper-2),#fff)}
.case-hero::before{content:'';display:block;height:5px;background:var(--accent);position:absolute;left:0;right:0;margin-top:-80px}
.case-hero{position:relative}
.case-shot{padding:40px}
.case-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:56px;align-items:start}
.case-grid aside{position:sticky;top:100px}
.pull-quote{max-width:820px;margin:0 auto}
.pull-quote .mark{font-family:var(--display);font-size:72px;line-height:.6;color:var(--green);font-weight:700;height:34px}
.pull-quote blockquote{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,27px);line-height:1.4;letter-spacing:-.01em}
.pull-quote figcaption{margin-top:24px}
.pull-quote figcaption b{font-family:var(--display);display:block}
.pull-quote figcaption span{color:var(--muted);font-size:14.5px}
.next-proj{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:20px;padding:32px 36px;transition:border-color .2s,transform .2s}
.next-proj:hover{border-color:var(--ink);transform:translateY(-2px)}
.next-proj strong{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.15}
.next-proj .proj-more{padding-top:6px}
@media(max-width:980px){
  .proj-grid,.case-grid{grid-template-columns:1fr}
  .case-grid aside{position:static}
  .case-shot{padding:20px}
}

/* ---------- Services ---------- */
.svc-link{display:flex;flex-direction:column}
.svc-link .proj-more{margin-top:auto;padding-top:16px}
.svc-link.svc-flag{grid-column:span 6;background:linear-gradient(120deg,#0f1f33,#1f5793 130%);border:none}
.svc-link.svc-flag h3,.svc-link.svc-flag p{color:#fff}
.svc-link.svc-flag p{color:#cfe0f1;max-width:640px}
.svc-link.svc-flag .proj-more{color:#9fd0ff}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.offer{border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff}
.offer h3{font-size:19px;margin-bottom:9px}
.offer p{color:var(--ink-soft);font-size:15.5px}
.chip-link{color:var(--ink-soft);border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:7px 15px;font-size:14px;transition:border-color .2s}
.chip-link:hover{border-color:var(--ink);color:var(--ink)}
.faq{max-width:820px}
/* The close under the FAQ. Without it the last answer hands a nearly-convinced reader the
   "Other services" chips, which is a list of ways to leave. */
.faq-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  max-width:820px;margin-top:32px;padding:26px 30px;border-radius:18px;
  background:var(--paper-2);border:1px solid var(--line)}
.faq-cta p{font-size:16px;color:var(--ink-soft);max-width:460px;text-wrap:pretty}
@media(max-width:680px){.faq-cta{padding:22px 20px}.faq-cta .btn{width:100%;justify-content:center}}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-family:var(--display);font-weight:700;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;line-height:1;color:var(--blue);flex:none}
.faq details[open] summary::after{content:'–'}
.faq details p{color:var(--ink-soft);margin-top:12px;max-width:700px}
@media(max-width:980px){.offer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.offer-grid{grid-template-columns:1fr}a.svc-link.svc-flag{grid-column:span 1}}

/* ---------- Blog ---------- */
a.filter{display:inline-block}
.pager{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:44px;color:var(--muted);font-size:15px}
.post-grid .proj-card:not(:has(.proj-media)) .proj-body{padding-top:32px}
.post-cover{display:block;width:100%;max-width:960px;margin:0 auto 48px;border-radius:20px;border:1px solid var(--line)}
.post-body{margin:0 auto}
.post-body img{max-width:100%;height:auto;border-radius:14px;margin:8px 0 20px}
.post-body blockquote{border-left:4px solid var(--green);padding:4px 0 4px 20px;margin:24px 0;font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink)}
.post-body pre{background:var(--ink);color:#e8eef5;padding:18px 20px;border-radius:12px;overflow-x:auto;margin:0 0 20px;font-size:14px}
.post-body code{font-family:var(--mono);font-size:.9em}
.post-body :not(pre)>code{background:var(--paper-3);padding:2px 6px;border-radius:5px}

/* ---------- Project blocks & per-project heroes ---------- */
.blk{padding:64px 0}
.blk-screenshot{padding:56px 0 8px}
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.prose ul.checks{list-style:none;padding:0}
.prose ul.checks li{position:relative;padding-left:30px;margin-bottom:12px}
.prose ul.checks li::before{content:'';position:absolute;left:0;top:.55em;width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px var(--green)}
.spec-h{font-size:20px;margin-bottom:14px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:20px;counter-reset:s}
.steps li{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;position:relative}
.steps .step-n{font-family:var(--display);font-weight:700;font-size:15px;color:var(--accent,var(--blue));display:block;margin-bottom:12px}
.steps h3{font-size:19px;margin-bottom:8px}
.steps p{color:var(--ink-soft);font-size:15.5px}
.mock-round{border-radius:20px;min-height:340px}
.hero-dark{background:linear-gradient(120deg,#0f1f33,#1f5793 145%);color:#fff;border-bottom:none}
.hero-dark::before{display:none}
.hero-dark h1,.hero-dark .crumbs a:hover{color:#fff}
.hero-dark .crumbs,.hero-dark .crumbs a{color:#9fb6cf}
.hero-dark p.lead{color:#cfe0f1}
.hero-dark .chip{color:#cfe0f1;border:1px solid rgba(255,255,255,.2);background:transparent}
.hero-dark .cr-live{color:#9fd0ff}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-media .chat{box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
@media(max-width:980px){
  .cols,.hero-split{grid-template-columns:1fr;gap:32px}
  .steps{grid-template-columns:1fr}
}

/* =====================================================================
   Project detail redesign
   ===================================================================== */
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.phero-tint .btn-outline{border-color:rgba(21,24,29,.25);color:var(--ink)}
.phero-tint .btn-outline:hover{border-color:var(--ink);background:transparent}

/* Hero */
.phero{position:relative;overflow:hidden;padding:72px 0 120px;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-2}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:26px 26px;
}
.phero-dark{color:#fff}
.phero-dark::before{background:
  radial-gradient(60% 90% at 88% 10%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),
  radial-gradient(40% 60% at 0% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.phero-tint{color:var(--ink)}
.phero-tint::before{background:
  radial-gradient(60% 90% at 90% 0%,color-mix(in srgb,var(--accent) 30%,#fff),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,#fff),#fff)}
.phero-tint::after{background-image:radial-gradient(rgba(21,24,29,.10) 1px,transparent 1px)}
.phero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.phero-grid.has-media{grid-template-columns:.95fr 1.05fr}
.phero .crumbs{color:inherit;opacity:.7;margin-bottom:22px}
.phero .crumbs a:hover{opacity:1;text-decoration:underline}
.phero-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:6px 13px;border-radius:999px;margin-bottom:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.phero-tint .phero-badge{background:#fff;border-color:var(--line);color:var(--ink-soft)}
.phero-badge .lk{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.phero-kicker{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 70%,#fff)}
.phero-tint .phero-kicker{color:color-mix(in srgb,var(--accent) 85%,#000)}
.phero h1{font-size:clamp(36px,4.6vw,62px);font-weight:700;margin:16px 0 20px;line-height:1.02}
.phero p.lead{font-size:19px;max-width:560px;opacity:.88}
.phero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phero-media{position:relative}
.phero-media .chat{box-shadow:0 50px 90px -40px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.1)}
.shot-hero .browser{box-shadow:0 50px 90px -40px rgba(0,0,0,.55);transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:left center;transition:transform .4s}
.shot-hero .browser:hover{transform:none}

/* Facts strip overlapping the hero */
.facts-wrap{margin-top:-58px;position:relative;z-index:2}
.facts{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 60px -36px rgba(21,24,29,.35);overflow:hidden}
.facts>div{padding:24px 28px;border-right:1px solid var(--line);position:relative}
.facts>div:last-child{border-right:none}
.facts>div::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--accent);opacity:.9}
.facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.facts dd{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.3}

/* Block rhythm */
.blk{padding:84px 0}
.blk:nth-of-type(odd){background:var(--paper-2)}
.blk:nth-of-type(even){background:#fff}
.facts-wrap + .blk{padding-top:96px}
.blk-h{font-size:clamp(28px,3.2vw,40px);margin-bottom:36px;max-width:760px}
.sec-label{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.blk .cols{gap:48px}


/* Text: editorial split */
.tx-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.tx-head h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08}
.tx-body p{font-size:17.5px;line-height:1.7}
.tx-body p.first{font-size:21px;line-height:1.55;color:var(--ink);font-weight:500}
.tx-stack .tx-head h2{font-size:26px;margin-bottom:14px}

/* Checklist tiles */
.tiles{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cols .tiles{grid-template-columns:1fr}
.tiles li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-weight:500;color:var(--ink);transition:transform .2s,box-shadow .2s}
.blk:nth-of-type(even) .tiles li{background:var(--paper-2)}
.tiles li:hover{transform:translateY(-2px);box-shadow:0 18px 30px -22px rgba(21,24,29,.4)}
.tiles .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Timeline steps */
.tl{list-style:none;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:24px;position:relative}
.tl::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent));z-index:0}
.tl li{position:relative;z-index:1}
.tl-n{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:22px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--paper-2),0 14px 26px -12px var(--accent);margin-bottom:22px}
.blk:nth-of-type(even) .tl-n{box-shadow:0 0 0 8px #fff,0 14px 26px -12px var(--accent)}
.tl h3{font-size:20px;margin-bottom:8px}
.tl p{color:var(--ink-soft);font-size:15.5px;max-width:300px}

/* Specs */
.spec-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 32px;border-top:4px solid var(--accent);box-shadow:0 26px 50px -38px rgba(21,24,29,.35)}
.spec-card h3{font-size:20px;margin-bottom:18px}
.spec-card dl>div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.spec-card dl>div:first-child{border-top:none;padding-top:0}
.spec-card dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.spec-card dd{font-weight:500}

/* Quote */
.qcard{position:relative;overflow:hidden;border-radius:28px;padding:64px 72px;color:#fff;margin:0;
  background:radial-gradient(70% 120% at 100% 0%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%),linear-gradient(135deg,#0c1520,#13243a)}
.qmark{width:54px;color:var(--accent);margin-bottom:26px;opacity:.95}
.qcard blockquote{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.5vw,30px);line-height:1.38;letter-spacing:-.01em;max-width:900px}
.qcard figcaption{display:flex;align-items:center;gap:14px;margin-top:34px}
.qcard .q-av{width:48px;height:48px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:18px;flex:none}
.qcard figcaption b{font-family:var(--display);display:block}
.qcard figcaption span span{color:#9fb6cf;font-size:14.5px}

.blk-screenshot .shot-fit{box-shadow:0 40px 70px -48px rgba(21,24,29,.5)}

/* Next project */
.next-proj{position:relative;overflow:hidden;border:none;border-radius:24px;padding:40px 44px;background:linear-gradient(135deg,#0c1520,#13243a);color:#fff}
.next-proj::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0,transparent 68%);opacity:.6}
.next-proj>*{position:relative}
.next-proj .eyebrow{color:#9fd0ff}
.next-proj:hover{border:none;transform:translateY(-3px)}
.next-proj .proj-more{color:#fff}

@media(max-width:980px){
  .phero{padding:48px 0 96px}
  .phero-grid.has-media,.tx-split{grid-template-columns:1fr;gap:32px}
  .shot-hero .browser{transform:none}
  .facts{grid-template-columns:1fr}
  .facts>div{border-right:none;border-bottom:1px solid var(--line)}
  .facts>div:last-child{border-bottom:none}
  .tl{grid-template-columns:1fr;gap:34px}
  .tl::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent))}
  .tl li{padding-left:80px}
  .tl-n{position:absolute;left:0;top:0;margin:0}
  .tiles{grid-template-columns:1fr}
  .blk{padding:60px 0}
  .qcard{padding:40px 28px}
}
@media(max-width:680px){
  .spec-card dl>div{grid-template-columns:1fr;gap:4px}
}

.cols .blk-h{font-size:26px;margin-bottom:14px}
.cols .spec-card h3{font-size:20px}

/* ---------- Blog polish ---------- */
.wrap.narrow{max-width:856px}
.post-hero{border-bottom:none;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,#fff),#fff)}
.post-hero h1{font-size:clamp(32px,4.2vw,50px)}
.post-article{padding:24px 0 72px}
.post-article .post-body{max-width:none}
.post-article .post-body h2{font-size:28px}
.post-article .post-body p,.post-article .post-body li{font-size:18px;line-height:1.75}
.cat-art{border-top-width:0;height:200px;background:
  radial-gradient(rgba(21,24,29,.10) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,#fff),color-mix(in srgb,var(--accent) 38%,#fff))}
.cat-art::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}
.cat-art-label{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;color:color-mix(in srgb,var(--accent) 80%,#000);text-align:center;padding:0 24px;line-height:1.05}

.post-cover{height:auto;aspect-ratio:1200 / 630;object-fit:cover}
.proj-media.has-cover{height:auto;aspect-ratio:1200 / 630}
.proj-media.has-cover img{object-position:center}

/* =====================================================================
   Blogs page redesign
   ===================================================================== */
.bhero{padding:72px 0 150px}
.bhero h1{max-width:820px}
.bhero-stats{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:30px;font-size:15px;color:#cfe0f1}
.bhero-stats b{font-family:var(--display);font-size:22px;color:#fff;margin-right:4px}
.bhero-stats span:last-child{opacity:.75;padding-left:28px;border-left:1px solid rgba(255,255,255,.25)}

/* Cover + category badge (shared) */
.bmedia{position:relative;overflow:hidden;background:#0c1520;aspect-ratio:1200 / 630}
.bmedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.bmedia.cat-art{height:auto}
.bcat{position:absolute;left:16px;top:16px;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:6px 12px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.bmedia.cat-art .cat-art-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* Featured */
.bfeat-wrap{margin-top:-96px;position:relative;z-index:2}
.bfeat{display:grid;grid-template-columns:1.15fr .85fr;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;
  box-shadow:0 50px 90px -50px rgba(21,24,29,.55);transition:transform .25s,box-shadow .25s}
.bfeat:hover{transform:translateY(-4px);box-shadow:0 60px 100px -50px rgba(21,24,29,.6)}
.bfeat:hover .bmedia img{transform:scale(1.04)}
.bfeat .bmedia{aspect-ratio:auto;min-height:100%}
.bfeat-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.bfeat-flag{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#04121a;background:var(--green);padding:5px 11px;border-radius:6px;margin-bottom:18px}
.bfeat h2{font-size:clamp(26px,2.8vw,36px);line-height:1.08;margin:10px 0 14px}
.bfeat p{color:var(--ink-soft);font-size:17px}
.bfeat-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;flex-wrap:wrap}

/* Grid + cards */
.blist-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.blist-head h2{font-size:clamp(26px,3vw,34px)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.bcard:hover{transform:translateY(-6px);box-shadow:0 36px 60px -36px rgba(21,24,29,.5);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.bcard:hover .bmedia img{transform:scale(1.06)}
.bcard-body{padding:24px 26px 22px;display:flex;flex-direction:column;flex:1}
.bcard-meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.bcard h3{font-size:20px;line-height:1.2;margin:10px 0 10px;transition:color .2s}
.bcard:hover h3{color:var(--accent)}
.bcard p{color:var(--ink-soft);font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:20px}
.bauthor{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.bav{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px}
.bcard-go{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink);transition:all .25s}
.bcard:hover .bcard-go{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(3px)}

@media(max-width:1080px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){
  .bhero{padding:48px 0 120px}
  .bfeat{grid-template-columns:1fr}
  .bfeat .bmedia{aspect-ratio:1200 / 630;min-height:0}
  .bfeat-body{padding:30px 26px}
  .bhero-stats span:last-child{border-left:none;padding-left:0}
}
@media(max-width:680px){.bgrid{grid-template-columns:1fr}}

/* Blogs page: refinements */
.bmedia{overflow:visible;background:none;aspect-ratio:auto}
.bimg{position:relative;overflow:hidden;background:#0c1520;aspect-ratio:1200 / 630}
.bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.bcard:hover .bimg img,.bfeat:hover .bimg img{transform:scale(1.05)}
.bmedia:hover .bimg img{transform:none}
.bimg.cat-art{height:auto}
.bimg.cat-art .cat-art-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bcat{top:auto;bottom:-13px;left:22px;z-index:2}
.bcard-body{padding-top:32px}
.bfeat{grid-template-columns:1.45fr 1fr}
.bfeat .bmedia{height:100%;min-height:0}
.bfeat .bimg{height:100%;aspect-ratio:auto}
.bfeat .bcat{bottom:auto;top:20px;left:20px}
.bfeat-body{padding:36px 40px}
.bfeat p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:1081px){
  .bgrid .bcard:last-child:nth-child(3n+1){grid-column:1 / -1;flex-direction:row}
  .bgrid .bcard:last-child:nth-child(3n+1) .bmedia{width:46%;flex:none}
  .bgrid .bcard:last-child:nth-child(3n+1) .bimg{height:100%;aspect-ratio:auto}
  .bgrid .bcard:last-child:nth-child(3n+1) .bcard-body{padding:40px 44px;justify-content:center}
  .bgrid .bcard:last-child:nth-child(3n+1) h3{font-size:26px}
  .bgrid .bcard:last-child:nth-child(3n+1) .bcat{bottom:auto;top:20px}
}
@media(max-width:980px){
  .bfeat{grid-template-columns:1fr}
  .bfeat .bimg{aspect-ratio:1200 / 630;height:auto}
  .bfeat .bcat{top:auto;bottom:-13px}
  .bfeat-body{padding:36px 26px 30px}
}

/* =====================================================================
   Blog article redesign
   ===================================================================== */
.read-progress{position:fixed;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:60;transition:transform .1s linear}

/* Hero */
.post-hero2{padding:64px 0 72px}
.post-hero2.has-cover{padding-bottom:150px}
.post-hero2 h1{font-size:clamp(32px,4.4vw,54px);margin:14px 0 18px;max-width:820px}
.post-hero2 p.lead{max-width:700px}
.post-cat{display:inline-block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);padding:6px 14px;border-radius:999px;margin-top:6px}
.post-cat:hover{filter:brightness(1.1)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:30px;font-size:15px;color:#cfe0f1}
.post-meta .bauthor{color:#fff;gap:12px;font-size:15px}
.post-meta .bauthor b{display:block;font-family:var(--display);font-size:15px}
.post-meta .bauthor small{display:block;font-size:12.5px;color:#9fb6cf;font-weight:400}
.post-meta-sep{width:1px;height:30px;background:rgba(255,255,255,.25);margin:0 6px}
.post-meta-dot{opacity:.6}
.bav-lg{width:42px;height:42px;font-size:16px;background:var(--accent)}
.bav-xl{width:60px;height:60px;font-size:24px;background:var(--accent);flex:none}

/* Cover overlapping the hero */
.post-cover-wrap{margin-top:-100px;position:relative;z-index:2}
.post-cover-fig{margin:0}
.post-cover-fig img{display:block;width:100%;height:auto;aspect-ratio:1200 / 630;object-fit:cover;border-radius:26px;border:1px solid var(--line);box-shadow:0 50px 90px -48px rgba(21,24,29,.6)}

/* Two-column reading layout */
.post-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;max-width:1000px;padding-top:64px;padding-bottom:72px;align-items:start}
.post-aside{position:sticky;top:100px;align-self:start}
.aside-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;border-left:2px solid var(--line)}
.toc li a{display:block;padding:8px 0 8px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--ink-soft);transition:all .2s}
.toc li a:hover{color:var(--ink)}
.toc li a.active{border-left-color:var(--accent);color:var(--ink);font-weight:600}
.share{margin-top:34px}
.share-btns{display:flex;gap:10px;flex-wrap:wrap}
.share-btns a,.share-btns button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;cursor:pointer;transition:all .2s;font-family:var(--display)}
.share-btns a:hover,.share-btns button:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.copied{display:block;margin-top:10px;font-size:13px;color:var(--accent);font-weight:600}

/* Article typography */
.post-prose{max-width:700px}
.post-prose>p:first-of-type{font-size:21px;line-height:1.65;color:var(--ink);font-weight:500}
.post-prose p,.post-prose li{font-size:18px;line-height:1.8;color:var(--ink-soft);margin-bottom:18px}
.post-prose h2{font-size:clamp(26px,2.8vw,32px);line-height:1.15;margin:52px 0 16px;padding-top:6px;position:relative;scroll-margin-top:100px}
.post-prose h2::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:16px}
.post-prose ul,.post-prose ol{padding-left:0;margin:0 0 22px;list-style:none}
.post-prose ul li{position:relative;padding-left:30px;margin-bottom:12px}
.post-prose ul li::before{content:"";position:absolute;left:4px;top:.7em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.post-prose strong{color:var(--ink)}
.post-prose a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-prose blockquote{margin:36px 0;padding:28px 32px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,#fff),#fff);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-left:5px solid var(--accent);
  font-family:var(--display);font-weight:700;font-size:22px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}

/* Author + CTA */
.author-card{display:flex;gap:20px;align-items:center;margin-top:56px;padding:28px 30px;border:1px solid var(--line);border-radius:22px;background:var(--paper-2);max-width:700px}
.author-card b{font-family:var(--display);font-size:18px}
.author-card p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:6px}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px;padding:34px 36px;border-radius:24px;max-width:700px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(70% 140% at 100% 0%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 65%),linear-gradient(135deg,#0c1520,#13243a)}
.post-cta h3{font-size:22px;margin-bottom:6px}
.post-cta p{color:#cfe0f1;font-size:15.5px;margin:0;max-width:360px}
.post-cta-btns{display:flex;gap:10px;flex-wrap:wrap}

/* Blogs list: tighter featured crop */
.bfeat{grid-template-columns:1.75fr 1fr}
.bfeat-body{padding:30px 34px}
.bfeat h2{font-size:clamp(24px,2.4vw,30px)}
.bfeat p{-webkit-line-clamp:2;font-size:16px}

@media(max-width:980px){
  .post-hero2.has-cover{padding-bottom:120px}
  .post-layout{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .post-aside{position:static;display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
  .toc{display:none}
  .share{margin-top:0}
  .post-meta-sep{display:none}
  .bfeat{grid-template-columns:1fr}
}
@media(max-width:680px){
  .post-prose>p:first-of-type{font-size:19px}
  .post-prose p,.post-prose li{font-size:17px}
  .post-cta{padding:26px 22px}
  .author-card{flex-direction:column;align-items:flex-start}
}

/* article page: fixes */
.copied[hidden]{display:none}
.post-hero2 .wrap.narrow,.post-cover-wrap.narrow{max-width:1000px}
@media(max-width:680px){.post-meta-dot{display:none}.post-meta{gap:8px 18px}}

/* article page: align to the site container (same edges as header/footer) */
.post-layout{max-width:var(--maxw);grid-template-columns:250px minmax(0,1fr);gap:72px}
.post-prose{max-width:780px}
.author-card,.post-cta{max-width:none}
.post-hero2 h1{max-width:900px}
@media(max-width:980px){.post-layout{grid-template-columns:1fr;gap:28px}}

@media(prefers-reduced-motion:reduce){.scribe .wave i,.scribe .rdot{animation:none}}

/* Service grids: a lone last card spans the full row */
.svc-grid .svc:last-child:nth-child(even){grid-column:span 6}
@media(max-width:680px){.svc-grid .svc:last-child:nth-child(even){grid-column:span 1}}

/* Footer social icons */
.socials{list-style:none;display:flex;gap:10px;margin-top:22px}
.socials a{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);background:#fff;transition:all .2s}
.socials a:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px)}
.socials a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Feature grid + chip cloud blocks */
.blk-intro{max-width:720px;font-size:18px;color:var(--ink-soft);margin:-18px 0 34px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 28px 26px;transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.blk:nth-of-type(even) .feat{background:var(--paper-2)}
.feat::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--accent);opacity:.85}
.feat:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(21,24,29,.45);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.feat-n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);font-weight:700}
.feat h3{font-size:19px;margin:12px 0 8px;line-height:1.2}
.feat p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.chip-cloud{display:flex;flex-wrap:wrap;gap:10px}
.chip-cloud span{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;font-size:15px;color:var(--ink);transition:all .2s}
.chip-cloud span:hover{border-color:var(--accent);color:var(--accent)}
.cols .chip-cloud span{font-size:14.5px;padding:8px 14px}
@media(max-width:980px){.feat-grid{grid-template-columns:1fr 1fr}.blk-intro{margin-top:-10px}}
@media(max-width:680px){.feat-grid{grid-template-columns:1fr}}

/* Stats block (project pages) */
.stat-row-4{grid-template-columns:repeat(4,1fr)}
.blk .stat{border-radius:20px;border-top:4px solid var(--accent);box-shadow:0 26px 50px -38px rgba(21,24,29,.35)}
.blk .stat b{color:var(--accent);font-size:clamp(34px,3.6vw,46px)}
.stat-note{margin-top:18px;font-size:14px;color:var(--muted)}
@media(max-width:980px){.stat-row-4{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.stat-row-4{grid-template-columns:1fr}}

/* =====================================================================
   Module + architecture blocks
   ===================================================================== */
.tl-wrap{row-gap:44px}
.tl-wrap::before{display:none}

.mod{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.mod-head{position:sticky;top:100px}
.mod-n{display:block;font-family:var(--display);font-weight:700;font-size:clamp(72px,9vw,120px);line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--accent);margin-bottom:14px}
.mod-head h2{font-size:clamp(28px,3.2vw,40px);line-height:1.08;margin-bottom:14px}
.mod-intro{color:var(--ink-soft);font-size:17px;line-height:1.65}
.mod-tags{margin-top:20px}
.mod-tags span{font-family:var(--mono);font-size:12.5px;padding:6px 12px}
.mod-note{margin-top:22px;padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,#fff);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));color:var(--ink-soft);font-size:15px;line-height:1.6}
.mod-items{display:grid;gap:14px;counter-reset:mi}
.mod-item{position:relative;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;padding:22px 26px;transition:transform .2s,box-shadow .2s}
.blk:nth-of-type(even) .mod-item{background:var(--paper-2)}
.mod-item:hover{transform:translateX(4px);box-shadow:0 20px 36px -28px rgba(21,24,29,.45)}
.mod-item h3{font-size:18px;margin-bottom:6px}
.mod-item p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.mod-items.numbered .mod-item{padding-left:64px}
.mod-items.numbered .mod-item::before{counter-increment:mi;content:counter(mi);position:absolute;left:18px;top:20px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}

.arch{display:grid;grid-template-columns:repeat(5,1fr);gap:34px;align-items:stretch}
.arch-col{position:relative;display:flex;flex-direction:column;gap:12px}
.arch-col:not(:last-child)::after{content:"→";position:absolute;right:-27px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);font-weight:700}
.arch-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.arch-box{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px;box-shadow:0 18px 30px -26px rgba(21,24,29,.4)}
.blk:nth-of-type(even) .arch-box{background:var(--paper-2)}
.arch-box b{font-family:var(--display);font-size:15.5px;line-height:1.2}
.arch-box span{font-size:13px;color:var(--ink-soft);line-height:1.45}

@media(max-width:1080px){
  .arch{grid-template-columns:1fr 1fr;gap:28px}
  .arch-col:not(:last-child)::after{display:none}
}
@media(max-width:980px){
  .mod{grid-template-columns:1fr;gap:28px}
  .mod-head{position:static}
}
@media(max-width:680px){.arch{grid-template-columns:1fr}}

/* architecture: lone boxes keep natural height, centred */
.arch-col .arch-box:only-of-type{flex:0 1 auto;margin-block:auto}

/* =====================================================================
   Project page closing: client feedback, next case study, call to action
   ===================================================================== */

/* Client feedback: light, split panel */
.qcard{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;padding:0;overflow:hidden;color:var(--ink);margin:0;
  background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 40px 80px -52px rgba(21,24,29,.45)}
.q-side{position:relative;padding:44px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--accent) 100%,#fff 0%),color-mix(in srgb,var(--accent) 70%,#0c1520))}
.q-side::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px;opacity:.55;-webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}
.q-side>*{position:relative;z-index:1}
.qcard .qmark{width:64px;color:#fff;margin:0;opacity:.95}
.q-label{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.q-main{padding:48px 56px;display:flex;flex-direction:column;justify-content:center;gap:30px}
.qcard blockquote{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.1vw,26px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);max-width:none}
.qcard figcaption{display:flex;align-items:center;gap:14px;margin:0;padding-top:24px;border-top:1px solid var(--line)}
.qcard .q-av{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:18px;flex:none}
.qcard figcaption b{font-family:var(--display);display:block;color:var(--ink)}
.qcard figcaption span span{color:var(--muted);font-size:14.5px}

/* Next case study: image card */
.nextc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff;
  box-shadow:0 40px 80px -56px rgba(21,24,29,.45);transition:transform .3s,box-shadow .3s}
.nextc:hover{transform:translateY(-4px);box-shadow:0 50px 90px -52px rgba(21,24,29,.5)}
.nextc-body{padding:48px 52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.nextc-body h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1;margin:6px 0 10px}
.nextc-body p{color:var(--ink-soft);font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:18px}
.nextc-media{position:relative;min-height:300px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,#fff),color-mix(in srgb,var(--accent) 55%,#0c1520));display:flex;align-items:center;justify-content:center}
.nextc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.nextc:hover .nextc-media img{transform:scale(1.05)}
.nextc-mono{font-family:var(--display);font-weight:700;font-size:120px;color:rgba(255,255,255,.9)}

/* Call to action */
.pcta{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:60px 64px;border-radius:30px;color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 120% at 100% 0%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%),radial-gradient(40% 80% at 0% 100%,rgba(240,144,24,.22),transparent 70%),linear-gradient(135deg,#0c1520,#13243a)}
.pcta::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.pcta-eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 60%,#fff)}
.pcta h2{font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin:12px 0 14px;color:#fff}
.pcta p{color:#cfe0f1;font-size:18px;max-width:480px}
.pcta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pcta-points{list-style:none;display:grid;gap:14px}
.pcta-points li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:none}
.pcta-tick{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.pcta-points b{display:block;font-family:var(--display);font-size:17px;margin-bottom:2px}
.pcta-points span:not(.pcta-tick){color:#b9cde2;font-size:14.5px;line-height:1.5}

@media(max-width:980px){
  .qcard{grid-template-columns:1fr}
  .q-side{flex-direction:row;align-items:center;padding:22px 28px}
  .qcard .qmark{width:38px}
  .q-main{padding:30px 28px}
  .nextc{grid-template-columns:1fr}
  .nextc-media{min-height:220px;order:-1}
  .nextc-body{padding:30px 28px}
  .pcta{grid-template-columns:1fr;gap:34px;padding:40px 28px}
}

/* next case study: match the cover artwork's proportions (1200 x 630) */
.nextc{grid-template-columns:.85fr 1.15fr}
.nextc-body{padding:40px 44px}
.nextc-body p{-webkit-line-clamp:2}
.nextc-media{min-height:0;aspect-ratio:1200 / 630}
.nextc-media.is-cover img{object-position:center}
@media(max-width:980px){.nextc{grid-template-columns:1fr}.nextc-media{order:-1;aspect-ratio:1200 / 630}}
@media(min-width:981px){.nextc-media{aspect-ratio:auto;align-self:stretch}}

/* CTA block */
.cta-block{max-width:720px;margin:0 auto;text-align:center}
.blk .cta-block{background:#fff}

/* Negative list variant */
.tiles-neg .tick{background:#e5484d}
.tiles-neg li{color:var(--ink-soft)}

/* buttons inside prose text keep button styling */
.prose a.btn,.post-prose a.btn{color:#fff;text-decoration:none;font-weight:600}
.prose a.btn-ghost,.prose a.btn-outline{color:var(--ink)}

/* =====================================================================
   Screenshot galleries
   ===================================================================== */
.gal{display:grid;gap:22px;margin-top:30px}
.gal-wide{grid-template-columns:repeat(3,1fr)}
.gal-item{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 26px 46px -36px rgba(21,24,29,.45);transition:transform .25s,box-shadow .25s}
.gal-item:hover{transform:translateY(-4px);box-shadow:0 34px 56px -34px rgba(21,24,29,.5)}
.gal-item.wide{grid-column:span 2}
.gal-img{background:linear-gradient(135deg,#eef2f6,#e1e6ec);overflow:hidden;line-height:0}
.gal-img img{width:100%;height:100%;display:block;object-fit:cover}
.gal-wide .gal-img{aspect-ratio:16 / 8.6}
.gal-wide .gal-item.wide .gal-img{aspect-ratio:auto}
.gal-wide .gal-item.wide .gal-img img{height:auto}
.gal-item figcaption{padding:14px 18px 16px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);border-top:1px solid var(--line)}
.gal-item figcaption::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}

.gal-phones{grid-template-columns:repeat(4,1fr);align-items:end;gap:26px}
.gal-phones .gal-item{background:none;border:none;box-shadow:none;text-align:center}
.gal-phones .gal-item:hover{box-shadow:none}
.gal-phones .gal-img{aspect-ratio:auto;background:#fff;border:6px solid #15181d;border-radius:30px;box-shadow:0 36px 50px -30px rgba(21,24,29,.55);margin:0 auto;max-width:210px}
.gal-phones .gal-img img{height:auto;object-fit:contain}
.gal-phones figcaption{border:none;padding:16px 4px 0;font-size:14px}
.gal-phones figcaption::before{display:none}

@media(max-width:980px){
  .gal-wide{grid-template-columns:1fr 1fr}
  .gal-item.wide{grid-column:span 2}
  .gal-phones{grid-template-columns:1fr 1fr;gap:34px 20px}
}
@media(max-width:680px){
  .gal-wide{grid-template-columns:1fr}
  .gal-item.wide{grid-column:auto}
}

/* gallery: tiles fill their row height */
.gal-item{display:flex;flex-direction:column}
.gal-img{flex:1;position:relative}
.gal-wide .gal-img img{position:absolute;inset:0}
.gal-wide .gal-item.wide .gal-img img{position:static;height:auto}
.gal-wide .gal-item:not(.wide) .gal-img{min-height:180px}
.gal-phones .gal-img{flex:none}
.gal-phones .gal-img img{position:static}

/* gallery: true proportions */
.gal-wide .gal-img{aspect-ratio:2.3 / 1}
.gal-wide .gal-item.wide .gal-img{aspect-ratio:auto}
.gal-wide .gal-item:not(.wide) .gal-img{min-height:0}
.gal-item.fit-contain .gal-img img{object-fit:contain;padding:10px}
.gal-item.fit-contain .gal-img{background:linear-gradient(135deg,#f3f5f8,#e6eaf0)}

/* Section headers: title with the paragraph underneath, both using the full container width */
.sec-head{max-width:none}
.sec-head h2{max-width:none}
.sec-head p{max-width:none}
.sec-head h2{text-wrap:balance}
.sec-head p{text-wrap:pretty}

/* =====================================================================
   Key figures (stats block): clean, restrained
   ===================================================================== */
.figs{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 50px -40px rgba(21,24,29,.35)}
.fig{position:relative;padding:36px 34px 34px}
.fig+.fig{border-left:1px solid var(--line)}
.fig::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:22px}
.fig b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fig b em{font-style:normal;color:var(--accent);font-weight:700}
.fig-l{display:block;margin-top:14px;font-size:15px;line-height:1.45;color:var(--ink-soft);max-width:220px}
@media(max-width:980px){
  .figs{grid-template-columns:1fr 1fr}
  .fig{padding:28px 24px 26px}
  .fig:nth-child(odd){border-left:none}
  .fig:nth-child(n+3){border-top:1px solid var(--line)}
  .fig:nth-child(2){border-left:1px solid var(--line)}
  .fig:nth-child(4){border-left:1px solid var(--line)}
}

/* Key figures inside a text section */
.tx-figs{margin-top:56px}
.tx-figs .figs{box-shadow:none}
.blk-text .figs{background:var(--paper-2)}

/* Facts strip: refined, restrained elevation */
.facts{border:1px solid #e1e6ec;border-radius:16px;box-shadow:0 1px 2px rgba(21,24,29,.05),0 10px 24px -14px rgba(21,24,29,.16)}
.facts>div{padding:22px 28px}
.facts>div::before{display:none}
.facts dt{display:flex;align-items:center;gap:8px;letter-spacing:.1em}
.facts dt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.facts-wrap{margin-top:-46px}
/* matching, lighter shadow for the key-figures card */
.figs{border-color:#e1e6ec;box-shadow:0 1px 2px rgba(21,24,29,.05),0 10px 24px -14px rgba(21,24,29,.14)}

/* Hero headings: confident, not extra-heavy */
.page-hero h1,.phero h1,.post-hero h1,.post-hero2 h1,.bhero h1{
  font-weight:700;letter-spacing:-.022em;line-height:1.12;font-size:clamp(32px,3.9vw,52px);text-wrap:balance}
.hero h1{font-weight:700;letter-spacing:-.028em;line-height:1.07;font-size:clamp(38px,5vw,62px);text-wrap:balance}
.nf h1{font-weight:700}

/* =====================================================================
   Client feedback: clean card (supersedes earlier quote styles)
   ===================================================================== */
.qcard{display:block;position:relative;overflow:hidden;margin:0;padding:52px 60px 40px;color:var(--ink);
  background:#fff;border:1px solid #e1e6ec;border-radius:20px;
  box-shadow:0 1px 2px rgba(21,24,29,.05),0 12px 28px -16px rgba(21,24,29,.16)}
.qcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.qcard .qmark{display:block;width:40px;margin:0 0 24px;color:var(--accent);opacity:.9}
.qcard blockquote{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.1vw,26px);line-height:1.55;letter-spacing:-.005em;color:var(--ink);max-width:880px;text-wrap:pretty}
.qcard figcaption{display:flex;align-items:center;gap:16px;margin:34px 0 0;padding-top:24px;border-top:1px solid #e9edf2}
.qcard .q-av{width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,#fff);color:color-mix(in srgb,var(--accent) 80%,#000);border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:17px;flex:none}
.qcard .q-who b{display:block;font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink)}
.qcard .q-who span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.qcard .q-tag{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.qcard .q-tag i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:680px){
  .qcard{padding:34px 24px 26px}
  .qcard .qmark{width:32px;margin-bottom:18px}
  .qcard figcaption{flex-wrap:wrap}
  .qcard .q-tag{margin-left:0;width:100%}
}

/* Section headings for the review and next-case-study sections */
.review-head,.next-head{margin-bottom:30px}
.review-head h2,.next-head h2{font-size:clamp(26px,3vw,36px)}
.pnext{padding-top:8px}

/* =====================================================================
   Project pages: one consistent vertical rhythm
   Every content section (incl. review, call to action and next case study) uses the same padding;
   alternating bands come from the nth-of-type tint rules above.
   ===================================================================== */
:root{--sec-y:80px;--sec-head-gap:36px}
section.blk,section.blk-cta,section.blk-next,section.blk-screenshot{padding:var(--sec-y) 0}
.facts-wrap + section.blk{padding-top:var(--sec-y)}

.blk .sec-head,.review-head,.next-head{margin-bottom:var(--sec-head-gap)}
.blk-h{margin-bottom:var(--sec-head-gap)}
.blk-intro{margin-top:calc(-1 * (var(--sec-head-gap) - 14px));margin-bottom:var(--sec-head-gap)}
.blk-cta .pcta,.blk-next .nextc{margin:0}
@media(max-width:980px){
  :root{--sec-y:56px;--sec-head-gap:28px}
}

/* =====================================================================
   Sitewide spacing and type system (single source of truth)
   ===================================================================== */
:root{--sec-y:80px;--sec-head-gap:40px;--h2:clamp(28px,3.2vw,40px);--h2-cta:clamp(30px,3.6vw,44px)}

/* every full-width section: same vertical padding */
section.block:not(.blk),.cta-final{padding:var(--sec-y) 0}
/* two plain sections in a row share a single gap instead of doubling it */
section.block:not(.why):not(.blk) + section.block:not(.why):not(.blk),
section.block:not(.why):not(.blk) + .cta-final{padding-top:0}
/* ...but a tinted section ends at its own edge, so the plain section after one needs its padding
   back. The shared-gap rule above assumes both neighbours are white: when they are not, the next
   section's eyebrow lands hard against the tint boundary. */
section.block.ag-pipe-sec:not(.blk) + section.block:not(.why):not(.blk),
section.block.bs-an-sec:not(.blk) + section.block:not(.why):not(.blk),
section.block.fs-tl-sec:not(.blk) + section.block:not(.why):not(.blk),
section.block.fs-eng-sec:not(.blk) + section.block:not(.why):not(.blk),
section.block.io-eng-sec:not(.blk) + section.block:not(.why):not(.blk),
section.block.wa-close-sec:not(.blk) + section.block:not(.why):not(.blk),
section.block.mb-price-sec:not(.blk) + section.block:not(.why):not(.blk){padding-top:var(--sec-y)}
/* content directly under a page hero / the featured blog card */
.page-hero + section.block,.page-hero + .cta-final{padding-top:56px}
.bfeat-wrap + section.block{padding-top:64px}

/* section headings */
.sec-head{margin-bottom:var(--sec-head-gap)}
.sec-head h2,.blk-h,.tx-head h2,.mod-head h2,.review-head h2,.next-head h2,.blist-head h2{font-size:var(--h2)}
.cta-card h2,.pcta h2{font-size:var(--h2-cta)}
/* card titles */
.svc h3{font-size:20px}
.why-cell h3{font-size:22px}
.cr-body h3{font-size:26px}

/* Work / service grids: a lone last card spans the full row */
@media(min-width:981px){
  .proj-grid .proj-card:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row}
  .proj-grid .proj-card:last-child:nth-child(odd) .proj-media{width:44%;height:auto;min-height:100%;flex:none;border-top-width:5px}
  .proj-grid .proj-card:last-child:nth-child(odd) .proj-body{padding:36px 44px;justify-content:center}
  .proj-grid .proj-card:last-child:nth-child(odd) .proj-body h2{font-size:26px}
}

@media(max-width:980px){
  :root{--sec-y:56px;--sec-head-gap:28px}
}

/* Phone fixes: the lead service card and the key figures must never be wider than the screen */
.svc.lead{grid-column:1 / -1}
@media(max-width:680px){
  .figs{grid-template-columns:1fr}
  .fig,.figs .fig:nth-child(n){border-left:none;border-top:none;padding:24px}
  .figs .fig+.fig{border-top:1px solid var(--line)}
  .fig b{font-size:clamp(34px,11vw,44px)}
  .fig-l{max-width:none}
}

/* =====================================================================
   Screenshot galleries (framed, larger, click to enlarge)
   ===================================================================== */
.gx{display:grid;gap:36px 28px;margin-top:36px}
.gx-screens{grid-template-columns:repeat(2,minmax(0,1fr))}
.gx-item{margin:0;min-width:0}
.gx-item.wide{grid-column:1 / -1}

.gx-zoom{display:block;position:relative;width:100%;padding:0;margin:0;border:1px solid #dde3ea;border-radius:16px;background:#fff;overflow:hidden;cursor:zoom-in;font:inherit;text-align:left;
  box-shadow:0 1px 2px rgba(21,24,29,.05),0 22px 40px -24px rgba(21,24,29,.34);transition:transform .25s,box-shadow .25s,border-color .25s}
.gx-zoom:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,#dde3ea);box-shadow:0 1px 2px rgba(21,24,29,.05),0 32px 52px -26px rgba(21,24,29,.42)}
.gx-zoom:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:3px}

.gx-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;background:#f1f3f6;border-bottom:1px solid #e3e8ee}
.gx-bar i{width:10px;height:10px;border-radius:50%;background:#d3d9e1}
.gx-bar i:nth-child(1){background:#ff6b64} .gx-bar i:nth-child(2){background:#ffc23d} .gx-bar i:nth-child(3){background:#31c85a}

.gx-shot{display:block;background:linear-gradient(135deg,#f4f6f9,#e8ecf1);line-height:0}
.gx-shot img{display:block;width:100%;height:auto}
.gx-shot[style*="aspect-ratio"]{display:flex;align-items:center;justify-content:center}
.gx-shot[style*="aspect-ratio"] img{width:100%;height:100%;object-fit:contain}

.gx-hint{position:absolute;right:14px;bottom:14px;padding:7px 14px;border-radius:999px;background:rgba(15,27,45,.86);color:#fff;font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1;
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.gx-zoom:hover .gx-hint,.gx-zoom:focus-visible .gx-hint{opacity:1;transform:none}

.gx-item figcaption{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3;color:var(--ink)}
.gx-item figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Phones: four screens on a soft panel */
.gx-phones{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 28px;padding:52px 40px 42px;border-radius:28px;border:1px solid #e1e6ec;
  background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--accent) 14%,#fff),transparent 70%),linear-gradient(180deg,#f5f7fa,#eceff4)}
.gx-phones .gx-zoom{max-width:250px;margin:0 auto;border:7px solid #15202b;border-radius:36px;background:#15202b;box-shadow:0 40px 56px -30px rgba(15,27,45,.7)}
.gx-phones .gx-zoom:hover{border-color:#15202b}
.gx-phones .gx-shot{border-radius:28px;overflow:hidden;background:#fff}
.gx-phones .gx-hint{right:50%;transform:translate(50%,6px)}
.gx-phones .gx-zoom:hover .gx-hint,.gx-phones .gx-zoom:focus-visible .gx-hint{transform:translate(50%,0)}
.gx-phones figcaption{justify-content:center;text-align:center;font-size:15px}
.gx-phones figcaption::before{display:none}

/* Image viewer */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:56px 24px 28px;background:rgba(8,14,22,.93)}
.lb.open{display:flex}
.lb img{display:block;max-width:min(1500px,94vw);max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.55);background:#fff}
.lb-cap{color:#e8eef5;font-family:var(--display);font-weight:600;font-size:16px;text-align:center}
.lb button{position:absolute;border:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);width:46px;height:46px;border-radius:50%;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.26)}
.lb-x{top:16px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
body.lb-lock{overflow:hidden}

@media(max-width:980px){
  .gx-phones{grid-template-columns:repeat(2,minmax(0,1fr));padding:40px 24px 32px}
}
@media(max-width:680px){
  .gx-screens{grid-template-columns:1fr}
  .gx-phones{gap:34px 16px;padding:32px 14px 26px}
  .gx-phones .gx-zoom{border-width:5px;border-radius:28px}
  .gx-phones .gx-shot{border-radius:22px}
  .gx-hint{opacity:1;transform:none}
  .gx-phones .gx-hint{display:none}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb-prev{left:calc(50% - 56px)} .lb-next{right:calc(50% - 56px)}
}

/* =====================================================================
   Home: full-width Bespoke feature card
   ===================================================================== */
.svc-grid .svc.bespoke{grid-column:1 / -1;display:grid;grid-template-columns:1.05fr .95fr;gap:0;padding:0;overflow:hidden;position:relative;color:var(--ink);
  border:1px solid #d6e4f4;border-radius:22px;
  background:radial-gradient(60% 120% at 0% 0%,rgba(47,116,189,.12),transparent 60%),linear-gradient(120deg,#f9fbfe,#f1f6fc 70%,#e7f0fa);
  box-shadow:0 1px 2px rgba(21,24,29,.04),0 30px 60px -44px rgba(31,87,147,.55);transition:transform .25s,box-shadow .25s,border-color .25s}
.svc-grid .svc.bespoke:hover{transform:translateY(-4px);border-color:#b9d2ee;box-shadow:0 1px 2px rgba(21,24,29,.04),0 40px 70px -44px rgba(31,87,147,.7)}
.svc.bespoke .b-body{padding:46px 48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.svc.bespoke .b-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#1f5793;background:#fff;border:1px solid #d6e4f4;border-radius:999px;padding:6px 14px}
.svc.bespoke .b-tag i{width:8px;height:8px;border-radius:50%;background:#2f74bd}
.svc.bespoke h3{font-size:clamp(26px,2.8vw,34px);line-height:1.1;margin:18px 0 14px;color:var(--ink)}
.svc.bespoke p{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:560px}
.svc.bespoke .b-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.svc.bespoke .b-chips span{font-size:13.5px;font-weight:500;color:#1f5793;background:rgba(47,116,189,.1);border:1px solid rgba(47,116,189,.2);border-radius:999px;padding:6px 14px}
.svc.bespoke .b-cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:13px 24px;border-radius:999px;background:var(--orange);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;transition:background .2s,gap .2s}
.svc.bespoke .b-cta b{font-weight:600;transition:transform .2s}
.svc.bespoke:hover .b-cta,.svc.bespoke .b-cta:hover{background:#d97f0a;box-shadow:0 12px 28px -12px rgba(240,144,24,.6)}
.svc.bespoke:hover .b-cta b,.svc.bespoke .b-cta:hover b{transform:translateX(4px)}

.svc.bespoke .b-vis{position:relative;min-height:360px;padding:44px 40px 40px 36px;display:flex;align-items:center;border-left:1px solid #dbe7f5;
  background-image:linear-gradient(rgba(47,116,189,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(47,116,189,.09) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:none}
.svc.bespoke .b-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 80% 20%,rgba(47,116,189,.14),transparent 70%);pointer-events:none}
.svc.bespoke .b-badge{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#1f5793;background:#fff;border:1px dashed #a9c6e8;border-radius:8px;padding:6px 12px;z-index:2}
.svc.bespoke .b-flow{list-style:none;position:relative;z-index:1;width:100%;display:grid;gap:14px}
.svc.bespoke .b-flow::before{content:"";position:absolute;left:25px;top:30px;bottom:30px;width:2px;background:linear-gradient(180deg,#2f74bd,rgba(47,116,189,.2))}
.svc.bespoke .b-flow li{position:relative;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #dbe7f5;border-radius:16px;padding:14px 18px 14px 14px;
  box-shadow:0 16px 30px -22px rgba(31,87,147,.5);transition:transform .25s}
.svc.bespoke .b-flow li:nth-child(even){margin-left:28px}
.svc.bespoke:hover .b-flow li:nth-child(odd){transform:translateX(4px)}
.svc.bespoke:hover .b-flow li:nth-child(even){transform:translateX(-4px)}
.svc.bespoke .b-flow i{flex:none;width:38px;height:38px;border-radius:50%;background:#2f74bd;color:#fff;font-style:normal;font-family:var(--display);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #f1f6fc}
.svc.bespoke .b-flow b{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);line-height:1.2}
.svc.bespoke .b-flow span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4}

/* the four small cards after the wide one pair up evenly (no stretched last card) */
.svc-grid.has-wide .svc:last-child:nth-child(even){grid-column:span 3}

@media(max-width:980px){
  .svc-grid .svc.bespoke{grid-template-columns:1fr}
  .svc.bespoke .b-body{padding:34px 28px}
  .svc.bespoke .b-vis{min-height:0;border-left:none;border-top:1px solid #e3dcf6;padding:64px 24px 28px}
  .svc.bespoke .b-flow li:nth-child(even){margin-left:0}
  .svc-grid.has-wide .svc:last-child:nth-child(even){grid-column:span 3}
}
@media(max-width:680px){
  .svc-grid.has-wide .svc:last-child:nth-child(even){grid-column:span 1}
  .svc.bespoke .b-cta{width:100%;justify-content:center}
}

/* Lead (Agentic AI) card is a link now */
a.svc.lead{color:inherit;text-decoration:none}
.svc.lead .l-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:12px 22px;border-radius:999px;background:#fff;color:#15181d;font-family:var(--display);font-weight:600;font-size:15px;transition:gap .2s,box-shadow .2s}
.svc.lead .l-cta b{font-weight:600;transition:transform .2s}
.svc.lead:hover .l-cta,.svc.lead .l-cta:hover{box-shadow:0 12px 28px -12px rgba(255,255,255,.55)}
.svc.lead:hover .l-cta b,.svc.lead .l-cta:hover b{transform:translateX(4px)}
.svc.svc-link{color:inherit}
@media(max-width:680px){.svc.lead .l-cta{width:100%;justify-content:center}}

/* =====================================================================
   Services page hero
   ===================================================================== */
.svh{padding:72px 0 88px}
.svh::before{background:
  radial-gradient(46% 90% at 92% 8%,rgba(47,116,189,.55),transparent 70%),
  radial-gradient(34% 60% at 4% 100%,rgba(240,144,24,.22),transparent 70%),
  radial-gradient(30% 50% at 55% 110%,rgba(124,192,26,.18),transparent 70%),
  radial-gradient(26% 46% at 70% -10%,rgba(31,169,179,.28),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.svh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.svh-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#9fd0ff}
.svh h1{font-size:clamp(34px,4.4vw,56px);margin:16px 0 20px;max-width:620px}
.svh p.lead{font-size:19px;max-width:540px;opacity:.9}
.svh-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* flex-wrap is NOT optional here. The items are flex:0 0 auto (they must not squash, or the
   figures and their labels end up on four lines each), so without wrapping a row that is too
   wide for the hero's left column silently overflows it and the last stat slides UNDER the
   hero panel — the figure disappears behind it entirely. It broke on five of the six service
   pages between roughly 1000px and 1200px, which is an ordinary laptop, and was invisible to
   every screenshot taken at 1440 or 390. See SEO.md §4. */
.svh-proof{list-style:none;display:flex;flex-wrap:wrap;gap:28px 36px;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.svh-proof b{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em}
.svh-proof span{display:block;margin-top:6px;font-size:14px;color:#9fb6cf}

.svh-panel{position:relative;padding:26px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -48px rgba(0,0,0,.7)}
.svh-panel-h{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9fb6cf;margin:2px 4px 14px}
.svh-item{display:flex;align-items:center;gap:16px;padding:13px 14px;border-radius:14px;color:#fff;transition:background .2s,transform .2s}
.svh-item+.svh-item{margin-top:4px}
.svh-item:hover{background:rgba(255,255,255,.09);transform:translateX(4px)}
.svh-ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--c);color:#fff;font-family:var(--display);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -10px var(--c)}
.svh-t{flex:1;min-width:0}
.svh-t b{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.svh-t small{display:block;margin-top:2px;font-size:13px;color:#9fb6cf}
.svh-go{font-size:18px;color:#9fb6cf;transition:color .2s,transform .2s}
.svh-item:hover .svh-go{color:#fff;transform:translateX(3px)}

@media(max-width:980px){
  .svh{padding:48px 0 60px}
  .svh-grid{grid-template-columns:1fr;gap:40px}
  .svh-proof{gap:28px}
}
@media(max-width:680px){
  .svh-proof{gap:20px}
  .svh-proof b{font-size:26px}
  .svh-panel{padding:18px}
  .svh-actions .btn{flex:1 1 100%;justify-content:center}
}

/* =====================================================================
   Service detail hero
   ===================================================================== */
.sdh{padding:72px 0 84px}
.sdh::before{background:
  radial-gradient(52% 100% at 92% 0%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),
  radial-gradient(34% 60% at 2% 100%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.sdh-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.sdh-kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 65%,#fff)}
.sdh-ic{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:0;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -10px var(--accent)}
.sdh h1{font-size:clamp(34px,4.2vw,54px);margin:18px 0 20px;max-width:640px}
.sdh p.lead{font-size:19px;max-width:560px;opacity:.9}
.sdh-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sdh-tech{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.sdh-tech span{font-family:var(--mono);font-size:12.5px;color:#cfe0f1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 13px}

.sdh-panel{padding:28px 28px 24px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -48px rgba(0,0,0,.7)}
.sdh-panel-h{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9fb6cf;margin-bottom:12px}
.sdh-panel ul{list-style:none}
.sdh-panel li{display:flex;align-items:center;gap:14px;padding:13px 0;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.sdh-panel li:first-child{border-top:none}
.sdh-tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sdh-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-top:16px;width:100%;border-top:1px solid rgba(255,255,255,.1);font-family:var(--display);font-weight:600;font-size:15px;color:color-mix(in srgb,var(--accent) 60%,#fff)}
.sdh-more b{font-weight:600;transition:transform .2s}
.sdh-more:hover b{transform:translateX(4px)}
#related-work{scroll-margin-top:90px}

@media(max-width:980px){
  .sdh{padding:48px 0 56px}
  .sdh-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:680px){
  .sdh-actions .btn{flex:1 1 100%;justify-content:center}
  .sdh-panel{padding:22px 20px 18px}
}

/* =====================================================================
   Footer: dark navy, matching the site's feature areas
   ===================================================================== */
footer.sf{position:relative;isolation:isolate;overflow:hidden;color:#cfe0f1;border-top:none;padding:76px 0 34px;
  background:
    radial-gradient(40% 70% at 100% 0%,rgba(47,116,189,.30),transparent 70%),
    radial-gradient(30% 60% at 0% 100%,rgba(240,144,24,.12),transparent 70%),
    linear-gradient(160deg,#0c1520,#13243a)}
footer.sf::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--blue) 0 25%,var(--orange) 25% 50%,var(--green) 50% 75%,var(--teal) 75% 100%)}
footer.sf::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}

footer.sf .foot-grid{grid-template-columns:1.5fr .9fr .9fr 1.2fr;gap:48px}
footer.sf .sf-logo{display:inline-flex;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 14px 28px -18px rgba(0,0,0,.6)}
footer.sf .sf-logo img{height:28px;width:auto;margin:0;display:block}
footer.sf .tagline{color:#b9cde2;font-size:15.5px;line-height:1.65;max-width:340px;margin-top:20px}

footer.sf .foot-col h4{color:#fff;font-size:13px;letter-spacing:.14em;margin-bottom:18px;display:flex;align-items:center;gap:10px}
footer.sf .foot-col h4::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--orange)}
footer.sf .foot-col:nth-of-type(3) h4::before{background:var(--green)}
footer.sf .foot-col:nth-of-type(4) h4::before{background:var(--teal)}
footer.sf .foot-col a{color:#b9cde2;font-size:15.5px;padding:7px 0;transition:color .2s,transform .2s}
footer.sf .foot-col a:hover{color:#fff;transform:translateX(4px)}

footer.sf .sf-contact p{color:#b9cde2;font-size:15px;line-height:1.6;margin-bottom:18px;max-width:280px}
footer.sf .sf-contact .btn{margin-bottom:18px}
footer.sf .sf-contact a.sf-mail{display:inline-block;color:#fff;font-weight:600;padding:0;border-bottom:1px solid rgba(255,255,255,.3)}
footer.sf .sf-contact a.sf-mail:hover{transform:none;border-color:var(--orange);color:#fff}

footer.sf .socials{margin-top:24px}
footer.sf .socials a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff}
footer.sf .socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px)}

footer.sf .foot-bot{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);color:#9fb6cf;font-size:14px}
footer.sf .foot-legal{display:flex;gap:22px}
footer.sf .foot-legal a{color:#9fb6cf;transition:color .2s}
footer.sf .foot-legal a:hover{color:#fff}

@media(max-width:980px){
  footer.sf{padding:56px 0 28px}
  footer.sf .foot-grid{grid-template-columns:1fr 1fr;gap:40px 32px}
  footer.sf .sf-brand{grid-column:1 / -1}
}
@media(max-width:680px){
  footer.sf .foot-grid{grid-template-columns:1fr 1fr}
  footer.sf .sf-contact{grid-column:1 / -1}
  footer.sf .foot-bot{flex-direction:column;align-items:flex-start}
}
footer.sf .sf-contact .btn{display:flex;width:fit-content}

/* =====================================================================
   Floating help chat
   ===================================================================== */
.cw{position:fixed;right:22px;bottom:22px;z-index:90;font-family:var(--body)}

/* Floating button */
.cw-fab{position:relative;display:flex;align-items:center;gap:12px;height:60px;padding:0 24px 0 18px;border:none;border-radius:999px;cursor:pointer;color:#fff;font-family:var(--display);font-weight:700;font-size:15.5px;
  background:linear-gradient(135deg,#f5a02a,var(--orange));box-shadow:0 18px 36px -14px rgba(240,144,24,.75),0 2px 6px rgba(21,24,29,.18);transition:transform .2s,box-shadow .2s,padding .3s}
.cw-fab:hover{transform:translateY(-3px);box-shadow:0 24px 44px -14px rgba(240,144,24,.85),0 2px 6px rgba(21,24,29,.2)}
.cw-fab:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--blue)}
.cw-fab-ic{display:flex;align-items:center;justify-content:center}
.cw-ic-x{display:none}
.cw-fab-t{white-space:nowrap;max-width:200px;overflow:hidden;transition:max-width .3s,opacity .2s}
.cw-ping{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #fff;animation:cwping 2.2s infinite}
@keyframes cwping{0%{box-shadow:0 0 0 0 rgba(124,192,26,.55)}70%{box-shadow:0 0 0 10px rgba(124,192,26,0)}100%{box-shadow:0 0 0 0 rgba(124,192,26,0)}}
/* after a few seconds, or once opened, only the round icon remains */
.cw.seen .cw-fab{padding:0;width:60px;justify-content:center;gap:0}
.cw.seen .cw-fab-t{max-width:0;opacity:0}
.cw.open .cw-ic-chat{display:none}
.cw.open .cw-ic-x{display:flex}
.cw.open .cw-ping{display:none}

/* Panel */
.cw-panel{position:absolute;right:0;bottom:78px;width:380px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#fff;border:1px solid #dde3ea;
  box-shadow:0 1px 2px rgba(21,24,29,.06),0 40px 80px -30px rgba(12,21,32,.55);animation:cwin .22s ease-out}
.cw-panel[hidden]{display:none}
@keyframes cwin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.cw-head{position:relative;display:flex;align-items:center;gap:13px;padding:16px 18px;color:#fff;
  background:radial-gradient(70% 140% at 100% 0%,rgba(47,116,189,.55),transparent 70%),linear-gradient(135deg,#0c1520,#13243a)}
.cw-av{flex:none;width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.cw-av img{width:28px;height:28px;object-fit:contain;display:block}
.cw-hd b{display:block;font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.2}
.cw-hd span{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12.5px;color:#9fb6cf}
.cw-on{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.cw-x{margin-left:auto;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .2s}
.cw-x:hover{background:rgba(255,255,255,.24)}

.cw-body{padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;height:300px;overflow-y:auto;background:#f6f7f9;scroll-behavior:smooth}
.cw-msg{max-width:88%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;word-wrap:break-word}
.cw-msg.bot{align-self:flex-start;background:#fff;border:1px solid #e3e8ee;color:var(--ink);border-top-left-radius:5px;box-shadow:0 6px 14px -12px rgba(21,24,29,.4)}
.cw-msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:5px}
.cw-link{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--blue-deep);border-bottom:1.5px solid rgba(31,87,147,.3)}
.cw-link:hover{border-color:var(--blue-deep)}

.cw-rate{align-self:flex-start;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:2px 4px}
.cw-r{border:1px solid #cfd6de;background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;font-size:13px;padding:6px 13px;border-radius:999px;cursor:pointer;transition:all .2s}
.cw-r:hover{border-color:var(--blue);color:var(--blue)}
.cw-r.no:hover{border-color:var(--orange);color:#b66a07}
.cw-ok{color:#4d7f0e;font-weight:600}

.cw-inq b{display:block;font-family:var(--display);font-size:15.5px;margin-bottom:4px}
.cw-inq p{font-size:14px;color:var(--ink-soft);margin-bottom:12px}
.cw-inq .btn{display:flex;width:100%;justify-content:center;padding:11px 18px;font-size:14.5px;margin-bottom:8px}
.cw-inq .btn-ghost-d{background:#fff;color:var(--ink);border:1.5px solid #cfd6de}
.cw-inq .btn-ghost-d:hover{border-color:var(--ink)}
.cw-mail{display:block;text-align:center;font-size:13.5px;font-weight:600;color:var(--blue-deep);margin-top:4px}
.cw-mail:hover{text-decoration:underline}

.cw-foot{padding:12px 16px 14px;background:#fff;border-top:1px solid #e3e8ee}
.cw-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.cw-chips{display:flex;flex-wrap:wrap;gap:7px;max-height:132px;overflow-y:auto}
.cw-chip{border:1px solid #d6e4f4;background:#f1f6fc;color:var(--blue-deep);font-family:var(--body);font-weight:500;font-size:13.5px;line-height:1.3;text-align:left;padding:8px 13px;border-radius:14px;cursor:pointer;transition:all .2s}
.cw-chip:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.cw-talk{display:block;width:100%;margin-top:12px;padding:10px;border:none;border-radius:12px;background:#fdf1de;color:#a35e05;font-family:var(--display);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s}
.cw-talk:hover{background:#fbe5c2}
.cw-lines{display:flex;height:4px}
.cw-lines i{flex:1}
.cw-lines i:nth-child(1){background:var(--blue)} .cw-lines i:nth-child(2){background:var(--orange)} .cw-lines i:nth-child(3){background:var(--green)} .cw-lines i:nth-child(4){background:var(--teal)}

/* Keep clear of other fixed elements */
.lb.open ~ .cw,body.lb-lock .cw{display:none}

@media(max-width:680px){
  .cw{right:14px;bottom:14px}
  .cw-panel{position:fixed;left:12px;right:12px;bottom:84px;width:auto;max-width:none}
  .cw-body{height:min(300px,38vh)}
}
@media(prefers-reduced-motion:reduce){.cw-ping,.cw-panel{animation:none}}
/* chat: more room for answers */
.cw-body{height:min(360px,calc(100vh - 460px));min-height:220px}
.cw-chips{max-height:96px}
.cw-msg.bot span{display:block}
@media(max-width:680px){.cw-body{height:min(320px,40vh);min-height:180px}}
@media(max-width:680px){
  .cw-chips{max-height:64px}
  .cw-body{height:min(380px,calc(100vh - 330px));min-height:200px}
  .cw-foot{padding:10px 14px 12px}
  .cw-talk{margin-top:8px;padding:9px}
}

/* =====================================================================
   Chat: one scroll area, questions as a clean list
   ===================================================================== */
.cw-panel{width:392px}
.cw-body{height:min(440px,calc(100vh - 250px));min-height:260px;padding:18px 16px 18px;gap:10px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d3de transparent}
.cw-body::-webkit-scrollbar{width:6px}
.cw-body::-webkit-scrollbar-thumb{background:#c9d3de;border-radius:6px}

.cw-sugg{margin-top:6px}
.cw-sugg .cw-label{margin:0 2px 10px}
.cw-qs{list-style:none;display:flex;flex-direction:column;gap:8px}
.cw-q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;border:1px solid #dde5ee;border-radius:14px;background:#fff;color:var(--ink);
  font-family:var(--body);font-weight:500;font-size:14.5px;line-height:1.35;text-align:left;cursor:pointer;
  box-shadow:0 6px 14px -12px rgba(21,24,29,.35);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.cw-q i{flex:none;font-style:normal;font-size:20px;line-height:1;color:var(--blue);transition:transform .2s,color .2s}
.cw-q:hover{border-color:var(--blue);background:#f4f8fd;transform:translateX(2px);box-shadow:0 10px 18px -14px rgba(47,116,189,.7)}
.cw-q:hover i{transform:translateX(3px)}
.cw-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.cw-foot{padding:12px 16px 14px;background:#fff;border-top:1px solid #e3e8ee}
.cw-foot[hidden]{display:none}
.cw-talk{margin-top:0}
.cw-chips,.cw-chip{display:none}

@media(max-width:680px){
  .cw-panel{width:auto}
  .cw-body{height:min(420px,calc(100vh - 290px));min-height:200px}
  .cw-q{padding:11px 13px;font-size:14px}
  .cw-foot{padding:10px 14px 12px}
}
.cw-body{position:relative}

/* Work and About heroes (same family as the Services hero) */
.svh-work::before{background:
  radial-gradient(48% 90% at 90% 6%,rgba(47,116,189,.55),transparent 70%),
  radial-gradient(34% 60% at 2% 100%,rgba(31,169,179,.24),transparent 70%),
  radial-gradient(30% 50% at 58% 112%,rgba(124,192,26,.16),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.svh-about::before{background:
  radial-gradient(48% 90% at 90% 6%,rgba(240,144,24,.40),transparent 70%),
  radial-gradient(34% 60% at 2% 100%,rgba(47,116,189,.30),transparent 70%),
  radial-gradient(30% 50% at 58% 112%,rgba(31,169,179,.18),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.svh-glance ul{list-style:none}
.svh-glance li{display:flex;align-items:baseline;gap:18px;padding:18px 4px;border-top:1px solid rgba(255,255,255,.12)}
.svh-glance li:first-child{border-top:none;padding-top:8px}
.svh-glance li b{flex:none;min-width:84px;font-family:var(--display);font-weight:700;font-size:clamp(34px,3.6vw,46px);line-height:1;letter-spacing:-.02em;color:#fff}
.svh-glance li span{font-size:16px;color:#b9cde2}
.svh-glance .svh-more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding-top:16px;width:100%;border-top:1px solid rgba(255,255,255,.12);font-family:var(--display);font-weight:600;font-size:15px;color:#f6b45a}
.svh-glance .svh-more b{font-weight:600;transition:transform .2s}
.svh-glance .svh-more:hover b{transform:translateX(4px)}

/* Contact hero */
.svh-contact::before{background:
  radial-gradient(48% 90% at 90% 6%,rgba(31,169,179,.42),transparent 70%),
  radial-gradient(34% 60% at 2% 100%,rgba(47,116,189,.30),transparent 70%),
  radial-gradient(30% 50% at 58% 112%,rgba(240,144,24,.16),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.svh-contact button.svh-item{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#contact-form,#form-status{scroll-margin-top:96px}

/* Work page: when the last case study sits alone in a full-width row, show its cover image whole instead of cropping it */
@media(min-width:981px){
  .proj-grid .proj-card:last-child:nth-child(odd) .proj-media:has(img[src*="/covers/"]){background:#0f2a1f}
  .proj-grid .proj-card:last-child:nth-child(odd) .proj-media img[src*="/covers/"]{object-fit:contain;object-position:center}
}

/* Chat: typing bubble and locked questions while the reply is being "typed" */
.cw-typing{display:flex;align-items:center;gap:5px;padding:14px 16px}
.cw-typing i{width:8px;height:8px;border-radius:50%;background:#9aa7b4;animation:cwtype 1.2s infinite ease-in-out}
.cw-typing i:nth-child(2){animation-delay:.18s}
.cw-typing i:nth-child(3){animation-delay:.36s}
@keyframes cwtype{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.cw-body.busy .cw-sugg{opacity:.55;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cw-typing i{animation:none}}
.svh-work .svh-glance li{padding:13px 4px}
.svh-work .svh-glance li b{min-width:48px;font-size:clamp(26px,2.8vw,34px)}


.svh-nums ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svh-nums li{padding:22px 20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.svh-nums li b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(38px,4.2vw,54px);line-height:1;letter-spacing:-.02em;color:#fff}
.svh-nums li b em{font-style:normal;color:#f6b45a;margin-left:2px}
.svh-nums li:nth-child(2) b{color:#7fc4ff}
.svh-nums li:nth-child(3) b{color:#8fdde2}
.svh-nums li:nth-child(4) b{color:#b4e06a}
.svh-nums li>span{display:block;margin-top:10px;font-size:15px;color:#b9cde2}

/* ---------- Design pass: utilities, process, responsive ---------- */
.mt-14{margin-top:14px}
.ta-center{text-align:center}
.process{background:#fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.steps li{position:relative;border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff}
.steps li:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:30px;width:14px;color:var(--muted);font-size:18px;z-index:1}
.steps .n{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:15px}
.steps h3{font-size:20px;margin:16px 0 8px}
.steps p{color:var(--ink-soft);font-size:15.5px}
@media(max-width:980px){
  .steps{grid-template-columns:1fr 1fr}
  .steps li:not(:last-child)::after{display:none}
  section.block{padding:72px 0}
  .cta-final{padding:72px 0}
}
@media(max-width:680px){
  .steps{grid-template-columns:1fr}
  section.block{padding:56px 0}
  .hero{padding:56px 0 48px}
  .hero p.lead{font-size:18px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .sec-head{margin-bottom:36px}
  .sec-head p{font-size:17px}
  .work-feature .ci,.cr-body{padding:28px 24px}
  .cta-card p{font-size:18px}
  /* keep the primary action reachable on phones */
  .nav-cta .btn{display:inline-flex;padding:9px 14px;font-size:14px}
  .nav-in{height:64px}
  .nav-links.open{top:64px}
  .nav img{height:26px}
}
@media(max-width:380px){
  .nav-cta .btn{display:none}
  .wrap{padding:0 16px}
}
.next-steps{padding-left:20px;color:var(--ink-soft);font-size:15.5px}
.next-steps li{margin-bottom:8px}
.next-steps li::marker{color:var(--blue);font-weight:700}

/* ---------- Client feedback ---------- */
.fb-sec{background:#fff}
.fb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.fb-eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:9px}
.fb-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.fb-head h2{font-size:clamp(36px,5vw,60px);margin:14px 0 12px}
.fb-head p{color:var(--ink-soft);font-size:17px;max-width:420px}
.fb-ctrl{display:flex;align-items:center;gap:12px}
.fb-count{font-family:var(--mono);font-size:13px;color:var(--muted);margin-right:8px}
.fb-count b{color:var(--ink);font-weight:500}
.fb-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:18px;cursor:pointer;transition:transform .15s,background .2s,color .2s}
.fb-btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.fb-btn:hover{transform:translateY(-2px)}
.fb-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:26px;align-items:stretch}
.fb-main{position:relative;border-radius:26px;background:#0b1015;color:#fff;overflow:hidden;min-height:380px}
.fb-main::before{content:"";position:absolute;top:-120px;right:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(240,144,24,.35),transparent 68%);pointer-events:none}
.fb-slide{position:absolute;inset:0;padding:38px 42px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility .35s}
.fb-slide.on{opacity:1;visibility:visible;transform:none}
.fb-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.fb-q{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:34px;line-height:1;padding-top:10px;color:var(--green)}
.fb-tag{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:#cfd8e3;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.04)}
.fb-tag i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.fb-slide blockquote{font-family:var(--display);font-weight:500;font-size:clamp(16px,1.6vw,20px);line-height:1.6;letter-spacing:-.01em;margin:30px 0 auto}
.fb-slide figcaption{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.fb-slide figcaption b{display:block;font-family:var(--display);font-size:16px}
.fb-slide figcaption small{display:block;font-size:13px;color:#9aa7b6;margin-top:2px}
.fb-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:#fff;font-size:15px;flex:none}
.fb-av.sm{width:38px;height:38px;font-size:13px}
.fb-side{display:flex;flex-direction:column;gap:14px}
.fb-side-h{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fb-list{display:flex;flex-direction:column;gap:12px;flex:1}
.fb-item{text-align:left;font:inherit;color:inherit;border:1px solid var(--line);background:var(--paper-2);border-radius:18px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s,background .2s}
.fb-item:hover{border-color:var(--ink);transform:translateY(-2px)}
.fb-item.on{display:none}
.fb-item-top{display:flex;align-items:center;gap:11px}
.fb-item-top b{display:block;font-family:var(--display);font-size:14.5px;line-height:1.2}
.fb-item-top small{display:block;font-size:12px;color:var(--muted)}
.fb-item-q{font-size:13.5px;color:var(--ink-soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-cta{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;border:none;cursor:pointer;background:#0b1015;color:#fff;border-radius:18px;padding:18px 20px;transition:transform .15s}
.fb-cta:hover{transform:translateY(-2px)}
.fb-cta-ic{width:40px;height:40px;border-radius:11px;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.fb-cta b{display:block;font-family:var(--display);font-size:15px}
.fb-cta small{display:block;font-size:13px;color:var(--orange);margin-top:2px}
.fb-bar{display:flex;gap:8px;margin-top:26px}
.fb-bar button{width:42px;height:4px;padding:0;border:none;border-radius:3px;background:var(--line);cursor:pointer;transition:background .2s,width .2s}
.fb-bar button[aria-selected="true"]{background:var(--orange);width:64px}
@media(max-width:980px){
  .fb-grid{grid-template-columns:1fr}
  .fb-main{min-height:0;display:block}
  .fb-slide{position:relative;inset:auto;display:none;opacity:1;visibility:visible;transform:none}
  .fb-slide.on{display:flex}
  .fb-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:4px}
  .fb-item{flex:0 0 min(78%,300px);scroll-snap-align:start}
}
@media(max-width:680px){
  .fb-slide{padding:26px 22px}
  .fb-head{margin-bottom:26px}
  .fb-tag{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.fb-slide{transition:none}}

/* ---------- About page ---------- */
.ab-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.ab-eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);flex:none}
.ab-eyebrow.green{color:#5a9410}
.ab-sub{color:var(--ink-soft);font-size:17px;margin-top:12px}
section.block.ab-who,section.block.ab-tl,section.block.ab-expect{padding-top:88px!important;padding-bottom:88px}
.ab-who-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.ab-who h2,.ab-tl h2,.ab-expect h2{font-size:clamp(30px,3.8vw,44px);margin-top:16px}
.ab-who-copy p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;margin-top:18px}
.ab-who-copy h2+p{margin-top:22px}
.ab-sign{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.ab-sign img{height:22px;width:auto}
.ab-sign span{font-size:13.5px;color:var(--muted);padding-left:14px;border-left:1px solid var(--line)}
.ab-photo{position:relative;margin:0;border-radius:24px;overflow:hidden;min-height:420px;background:linear-gradient(135deg,#0f1f33,#1f5793 140%);box-shadow:0 40px 80px -50px rgba(21,24,29,.6)}
.ab-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-photo-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 50% at 80% 10%,rgba(240,144,24,.35),transparent),radial-gradient(60% 50% at 10% 90%,rgba(124,192,26,.28),transparent)}
.ab-photo-art .dots i{width:16px;height:16px}
.ab-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 22px 20px;background:linear-gradient(transparent,rgba(11,16,21,.88));color:#fff}
.ab-photo figcaption b{display:block;font-family:var(--display);font-size:15px}
.ab-photo figcaption span{display:block;font-size:13px;color:#cfd8e3;margin-top:3px}
.ab-art{position:relative;container-type:inline-size;width:100%;margin:0;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#0f1f33,#1f5793 140%);box-shadow:0 40px 80px -50px rgba(21,24,29,.6)}
.ab-art>img{display:block;width:100%;height:auto}
.ab-art figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 24px 22px;background:linear-gradient(transparent,rgba(9,16,25,.9));color:#fff}
.ab-art figcaption b{display:block;font-family:var(--display);font-size:15px}
.ab-art figcaption span{display:block;font-size:13px;color:#cfd8e3;margin-top:3px}
@supports (container-type:inline-size){
  .ab-art figcaption{padding:clamp(38px,11cqw,54px) clamp(16px,5cqw,24px) clamp(14px,4.6cqw,22px)}
  .ab-art figcaption b{font-size:clamp(12.5px,3.3cqw,16px)}
  .ab-art figcaption span{font-size:clamp(11px,2.9cqw,14px)}
}
.ab-tl{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.abt{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 22px;margin-top:48px;position:relative}
.abt li{position:relative;padding-top:0}
.tl-yr{display:block;font-family:var(--display);font-weight:700;font-size:26px;color:var(--c);letter-spacing:-.02em}
.tl-dot{display:block;position:relative;height:14px;margin:14px 0 18px}
.tl-dot::before{content:"";position:absolute;left:0;right:-22px;top:6px;height:1px;background:var(--line)}
.abt li:nth-child(4n) .tl-dot::before,.abt li:last-child .tl-dot::before{right:0}
.tl-dot::after{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--c)}
.abt h3{font-size:17px;margin-bottom:8px;line-height:1.2}
.abt p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.ab-expect-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.promises{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.promise{display:flex;gap:18px;padding:34px 36px 34px 0;border-bottom:1px solid var(--line)}
.promise:nth-child(even){padding:34px 0 34px 40px;border-left:1px solid var(--line)}
.promise-ic{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.promise h3{font-size:19px;margin-bottom:8px}
.promise p{color:var(--ink-soft);font-size:15px;line-height:1.65}
.assure{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px;padding:16px 22px;border-radius:16px;background:var(--paper-2);border:1px solid var(--line)}
.assure li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.assure svg{color:var(--green);flex:none}
.ab-expect+.cta-final{padding-top:40px}

/* about: responsive */
@media(max-width:1000px){
  .abt{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .tl-dot::before{right:-22px!important}
  .abt li:nth-child(3n) .tl-dot::before,.abt li:last-child .tl-dot::before{right:0!important}
}
@media(max-width:1100px){
  .ab-who-grid{grid-template-columns:1fr;gap:40px}
  .ab-art{max-width:600px;margin-inline:auto}  /* width:100% above is load-bearing: see .ab-art */
}
@media(max-width:980px){
  .ab-photo{min-height:320px}
  .assure{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .abt{grid-template-columns:1fr;gap:0;margin-top:34px;padding-left:6px}
  .abt li{padding:0 0 30px 34px;border-left:1px solid var(--line)}
  .abt li:last-child{padding-bottom:0;border-left-color:transparent}
  .tl-yr{font-size:22px}
  .tl-dot{position:absolute;left:-7px;top:6px;margin:0}
  .tl-dot::before{display:none}
  .promises{grid-template-columns:1fr}
  .promise,.promise:nth-child(even){padding:26px 0;border-left:none}
  .ab-expect-head{margin-bottom:28px}
  .ab-expect-head .btn{width:100%;justify-content:center}
}
@media(max-width:560px){
  .ab-photo{min-height:260px}
  .assure{grid-template-columns:1fr;padding:18px}
  .ab-sign span{border-left:none;padding-left:0}
}

/* responsive hardening */
.hero .eyebrow{flex-wrap:wrap;row-gap:8px}
.fb,.fb-grid>*{min-width:0}
@media(max-width:980px){.fb-grid{grid-template-columns:minmax(0,1fr)}}
img,video,svg{max-width:100%}

@media(max-width:980px){section.block.ab-who,section.block.ab-tl,section.block.ab-expect{padding-top:64px!important;padding-bottom:64px}}
@media(max-width:560px){section.block.ab-who,section.block.ab-tl,section.block.ab-expect{padding-top:48px!important;padding-bottom:48px}}

/* header: keep the CTA on one line and the nav from crowding on tablets */
.nav-cta .btn{white-space:nowrap}
@media(max-width:1100px){.nav-links{gap:22px}.nav-cta .btn{padding:10px 16px;font-size:14px}}
@media(max-width:860px){.nav-links{gap:16px}.nav-links a{font-size:14px}.nav-cta .btn{padding:9px 13px;font-size:13px}}

/* ---------- Contact page ---------- */
section.block.ct-main{padding-top:72px!important;padding-bottom:80px}
.contact-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start}
.ct-form{padding:40px 40px 36px;border-radius:24px}
.ct-form h2{font-size:26px}
.ct-form-sub{color:var(--muted);font-size:15px;margin:6px 0 28px}
.ct-form .field input,.ct-form .field select,.ct-form .field textarea{background:var(--paper-2);border-color:var(--line);padding:13px 15px;font-size:15.5px}
.ct-form .field input::placeholder,.ct-form .field textarea::placeholder{color:#9aa3ae}
.ct-form .field input:focus,.ct-form .field select:focus,.ct-form .field textarea:focus{background:#fff}
.ct-form .field textarea{min-height:130px}
.ct-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.ct-when{border:0;padding:0;min-width:0}
.ct-when legend{font-family:var(--display);font-weight:600;font-size:14px;margin-bottom:10px;padding:0}
.ct-pills{display:flex;flex-wrap:wrap;gap:10px}
.ct-pill{position:relative;margin:0;cursor:pointer}
.ct-pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.ct-pill span{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;color:var(--ink-soft);transition:border-color .2s,background .2s,color .2s}
.ct-pill:hover span{border-color:var(--ink)}
.ct-pill input:checked+span{background:#eaf2fb;border-color:var(--blue);color:var(--blue-deep);font-weight:600}
.ct-pill input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.ct-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.ct-send .note-sm{margin:0;flex:1 1 220px}
.ct-send .note-sm a{text-decoration:underline}
.ct-side{display:flex;flex-direction:column;gap:18px}
.ct-call{position:relative;overflow:hidden;border-radius:24px;padding:28px;color:#fff;background:linear-gradient(135deg,#0c1520,#13243a)}
.ct-call::before{content:"";position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(240,144,24,.4),transparent 68%);pointer-events:none}
.ct-call>*{position:relative}
.ct-call-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ct-call-ic{width:44px;height:44px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.ct-call h3{font-size:20px;color:#fff}
.ct-call small{display:block;color:var(--orange);font-size:13px;margin-top:2px}
.ct-call p{color:#b9c8d8;font-size:15px;line-height:1.65;margin-bottom:20px}
.ct-call .btn{width:100%;justify-content:center}
.ct-card{border:1px solid var(--line);border-radius:22px;padding:26px 28px;background:#fff;box-shadow:0 24px 50px -40px rgba(21,24,29,.45)}
.ct-card h3{font-size:19px;margin-bottom:16px}
.ct-steps{list-style:none;display:flex;flex-direction:column;gap:16px}
.ct-steps li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.ct-steps span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:12.5px;margin-top:-1px}
.ct-links{list-style:none;display:flex;flex-direction:column;gap:6px}
.ct-links a{display:flex;align-items:center;gap:14px;padding:10px;margin:0 -10px;border-radius:14px;transition:background .2s}
.ct-links a:hover{background:var(--paper-2)}
.ct-ic{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--brand,var(--blue)) 12%,#fff);color:var(--brand,var(--blue));transition:background .2s}
.ct-links a:hover .ct-ic{background:color-mix(in srgb,var(--brand,var(--blue)) 20%,#fff)}
.ct-links span:nth-child(2){flex:1;min-width:0}
.ct-links small{display:block;font-size:12px;color:var(--muted)}
.ct-links b{display:block;font-family:var(--display);font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
.ct-links i{font-style:normal;color:var(--muted);transition:transform .2s}
.ct-links a:hover i{transform:translate(2px,-2px);color:var(--ink)}
.ct-faq{background:var(--paper-2);border-top:1px solid var(--line)}
section.block.ct-faq{padding-top:80px!important;padding-bottom:88px}
.ct-faq h2{font-size:clamp(30px,3.8vw,44px);margin-top:16px}
.ct-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px}
.ct-q{border-bottom:1px solid var(--line);padding:22px 0}
.ct-q summary{font-family:var(--display);font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.ct-q summary::-webkit-details-marker{display:none}
.ct-q summary::after{content:"+";font-size:22px;line-height:1;color:var(--muted);flex:none}
.ct-q[open] summary::after{content:"–";color:var(--blue)}
.ct-q p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;margin-top:12px}
@media(max-width:1000px){
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ct-side{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .ct-call{grid-column:1 / -1}
}
@media(max-width:760px){
  section.block.ct-main{padding-top:40px!important;padding-bottom:56px}
  .ct-form{padding:26px 20px}
  .ct-side{grid-template-columns:1fr}
  .ct-faq-grid{grid-template-columns:1fr}
  section.block.ct-faq{padding-top:56px!important;padding-bottom:56px}
  .ct-send .btn{width:100%;justify-content:center}
}

/* =====================================================================
   Agentic AI service page (/services/agentic-ai)
   The hero trace, the stack strip, the capability cards and the pipeline.
   ===================================================================== */

/* Hero: the full brand palette, not one flat accent, so it matches /services */
.sdh-ai::before{background:
  radial-gradient(46% 90% at 94% 6%,rgba(47,116,189,.55),transparent 70%),
  radial-gradient(34% 62% at 2% 100%,rgba(240,144,24,.24),transparent 70%),
  radial-gradient(30% 52% at 52% 112%,rgba(124,192,26,.20),transparent 70%),
  radial-gradient(28% 48% at 72% -12%,rgba(31,169,179,.30),transparent 70%),
  linear-gradient(135deg,#0c1520,#13243a)}
.sdh-ai .sdh-grid{grid-template-columns:1.02fr .98fr;gap:56px}
.sdh-proof{margin-top:40px}
.sdh-proof li{flex:0 0 auto}
.sdh-proof li:nth-child(1) b{color:#f6b45a}
.sdh-proof li:nth-child(2) b{color:#7fc4ff}
.sdh-proof li:nth-child(3) b{color:#b4e06a}

/* Hero panel: one agent run, line by line */
.ag-trace{border-radius:22px;background:rgba(8,15,25,.62);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 46px 90px -48px rgba(0,0,0,.8);backdrop-filter:blur(8px);overflow:hidden}
.ag-trace-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.ag-tdot{width:10px;height:10px;border-radius:50%;flex:none}
.ag-trace-bar code{font-family:var(--mono);font-size:11.5px;color:#9fb6cf;margin-left:8px;letter-spacing:.03em}
.ag-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9fdc4e}
.ag-task{display:flex;align-items:center;gap:12px;padding:16px 18px 14px;font-family:var(--display);font-weight:600;font-size:16.5px;color:#fff}
.ag-task span{flex:none;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#f6b45a;border:1px solid rgba(246,180,90,.4);border-radius:999px;padding:3px 8px}
.ag-steps{list-style:none;padding:0 18px 4px}
.ag-steps li{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.09)}
.ag-k{flex:none;width:68px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--kc,#9fb6cf)}
.ag-steps li.c-b{--kc:#7fc4ff} .ag-steps li.c-t{--kc:#8fdde2} .ag-steps li.c-o{--kc:#f6b45a} .ag-steps li.c-g{--kc:#b4e06a}
.ag-t{flex:1;min-width:140px;font-size:14.5px;color:#e4eef8;line-height:1.45}
.ag-t.mono{font-family:var(--mono);font-size:13px;color:#cfe0f1}
.ag-n{flex:none;font-family:var(--mono);font-size:10.5px;color:#9fb6cf;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 9px}
.ag-foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.12);margin-top:6px}
.ag-foot span{font-family:var(--mono);font-size:11px;color:#9fb6cf;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:7px;padding:4px 9px}
.ag-trace-more{display:flex;align-items:center;gap:8px;padding:13px 18px 15px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--display);font-weight:600;font-size:14.5px;color:#9fd0ff}
.ag-trace-more b{font-weight:600;transition:transform .2s}
.ag-trace-more:hover b{transform:translateX(4px)}

/* Capability cards */
.ag-cap-intro{max-width:720px}
.ag-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.ag-cap{position:relative;background:#fff;padding:32px 30px 30px;transition:background .2s}
.ag-cap:hover{background:var(--paper-2)}
.ag-cap h3{font-size:20px;margin:0 0 10px;text-wrap:balance}
/* Optional drawn mark before a card title (pages supply their own; see includes/fullstack.php).
   The icon sits in a tinted square of the card's own tone, so a grid of six reads as six things
   rather than as six paragraphs. */
.ag-cap h3.has-ic{display:flex;align-items:flex-start;gap:12px}
.ag-cap-ic{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:-2px;
  border-radius:11px;color:var(--ic);background:color-mix(in srgb,var(--ic) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--ic) 26%,#fff)}
.ag-cap-ic svg{width:21px;height:21px;display:block}
.ag-cap p{color:var(--ink-soft);font-size:15.5px}
.ag-cap-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ag-cap-tags span{font-family:var(--mono);font-size:11.5px;color:var(--blue-deep);background:#eef4fb;border:1px solid #dbe8f6;border-radius:7px;padding:4px 9px}
.ag-more{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start;margin-top:36px;padding:26px 28px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px}
.ag-more b{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.ag-more p{color:var(--ink-soft);font-size:16.5px;text-wrap:pretty}

/* Architecture pipeline */
section.block.ag-pipe-sec{padding-top:88px!important;padding-bottom:88px;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ag-pipe-intro{max-width:680px}
.ag-loop{display:grid;grid-template-columns:.9fr 1.5fr 1.1fr;gap:26px;align-items:center}

/* The two outer columns: what feeds the loop, and what it leaves behind */
.ag-loop-col{display:grid;gap:12px}
.ag-node{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.ag-node .ag-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ag-node b{display:block;font-family:var(--display);font-size:17px;margin:6px 0 5px;letter-spacing:-.01em}
.ag-node span:not(.ag-tag){display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.ag-loop-in .ag-node{border-left:3px solid var(--blue)}
.ag-loop-out .ag-node:nth-child(1){border-left:3px solid var(--teal)}
.ag-loop-out .ag-node:nth-child(2){border-left:3px solid var(--green)}

/* Arrows into and out of the loop */
.ag-loop-in::after,.ag-loop-out::before{content:"\2192";position:absolute;font-size:20px;color:#b7c2cf;line-height:1}
.ag-loop-in,.ag-loop-out{position:relative}
.ag-loop-in::after{right:-20px;top:50%;transform:translateY(-50%)}
.ag-loop-out::before{left:-20px;top:50%;transform:translateY(-50%)}

/* The loop itself: the point of the diagram */
.ag-loop-core{position:relative;background:#fff;border:1.5px solid var(--blue);border-radius:20px;padding:22px 24px 20px;
  box-shadow:0 30px 60px -44px rgba(47,116,189,.55)}
.ag-loop-h{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep)}
.ag-loop-h{flex-wrap:wrap}
.ag-loop-h i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-left:auto;white-space:nowrap}
.ag-cycle{font-size:19px;line-height:1;color:var(--blue)}
.ag-loop-steps{list-style:none;margin-top:16px;position:relative}
.ag-loop-steps li{display:flex;gap:14px;padding:12px 0;position:relative}
.ag-loop-steps li+li{border-top:1px solid var(--line)}
.ag-loop-steps li i{flex:none;width:26px;height:26px;border-radius:50%;background:#eaf2fb;color:var(--blue-deep);
  font-family:var(--mono);font-style:normal;font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ag-loop-steps b{display:block;font-family:var(--display);font-size:16.5px;letter-spacing:-.01em}
.ag-loop-steps span{display:block;margin-top:3px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.ag-loop-note{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:13.5px;color:var(--blue-deep)}
.ag-guard{margin:18px -24px -20px;padding:16px 24px 18px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(240,144,24,.07),rgba(240,144,24,.03));border-radius:0 0 18px 18px;
  border-left:3px solid var(--orange)}
.ag-guard .ag-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#b6710f}
.ag-guard b{display:block;font-family:var(--display);font-size:16.5px;margin:5px 0 4px;letter-spacing:-.01em}
.ag-guard span:not(.ag-tag){display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.ag-loop-note::before{content:"\21BB";font-size:16px;line-height:1}

/* Typical stack strip on the other service pages (replaces the stray leftover chips) */
.svc-stack{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.svc-stack .cr-chips{margin-top:12px}

@media(max-width:1080px){
  .ag-caps{grid-template-columns:repeat(2,1fr)}
  .ag-loop{grid-template-columns:1fr;gap:34px}
  .ag-loop-h{gap:8px}
  .ag-loop-h i{margin-left:0;flex-basis:100%}
  .ag-loop-in::after,.ag-loop-out::before{left:50%;right:auto;top:auto;transform:translateX(-50%) rotate(90deg)}
  .ag-loop-in::after{bottom:-27px}
  .ag-loop-out::before{top:-27px}
}
@media(max-width:980px){
  .sdh-ai .sdh-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:980px){section.block.ag-pipe-sec{padding-top:64px!important;padding-bottom:64px}}
@media(max-width:680px){
  .ag-caps{grid-template-columns:1fr}
  .ag-more{grid-template-columns:1fr;gap:12px;padding:22px 20px}
  .ag-cap{padding:26px 22px}
  .ag-k{width:56px}
  .ag-t{min-width:0}
  .sdh-proof{gap:18px;flex-wrap:wrap}
}

/* =====================================================================
   Bespoke Solutions service page (/services/bespoke-solutions)
   The hero blueprint, build-or-buy, the system anatomy, the engagement
   models and the handover list. The technology band (.tech-band) and the
   capability cards (.ag-caps) are shared components, defined once above.
   ===================================================================== */

/* Hero: deeper and squarer than the AI hero, so the two lead pages do not look like one page */
.sdh-bs::before{background:
  radial-gradient(44% 86% at 92% 4%,rgba(31,87,147,.62),transparent 70%),
  radial-gradient(32% 58% at 4% 98%,rgba(31,169,179,.22),transparent 70%),
  radial-gradient(30% 50% at 60% 110%,rgba(240,144,24,.18),transparent 70%),
  linear-gradient(135deg,#0b1420,#122236)}
.sdh-bs .sdh-grid{grid-template-columns:1.02fr .98fr;gap:56px}
.sdh-bs .sdh-proof li:nth-child(1) b{color:#7fc4ff}
.sdh-bs .sdh-proof li:nth-child(2) b{color:#8fdde2}
.sdh-bs .sdh-proof li:nth-child(3) b{color:#f6b45a}

/* Hero panel: one real system, drawn as a blueprint */
.bs-bp{border-radius:22px;background:rgba(8,15,25,.62);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 46px 90px -48px rgba(0,0,0,.8);backdrop-filter:blur(8px);overflow:hidden}
.bs-bp-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.bs-bp-bar code{font-family:var(--mono);font-size:11.5px;color:#9fb6cf;letter-spacing:.03em}
/* A drawn drafting grid, so the bar reads as a blueprint rather than a terminal */
.bs-bp-grid{flex:none;width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.3);
  background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:5px 5px}
.bs-bp-badge{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9fdc4e}
.bs-bp-client{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 15px;font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.35;color:#fff}
.bs-bp-client span{flex:none;margin-top:1px;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#f6b45a;border:1px solid rgba(246,180,90,.4);border-radius:999px;padding:3px 8px}
.bs-bp-rows{padding:0 18px}
.bs-bp-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;padding:13px 0;border-top:1px solid rgba(255,255,255,.09)}
.bs-bp-k{flex:none;width:68px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--kc,#9fb6cf)}
.bs-bp-row.c-b{--kc:#7fc4ff} .bs-bp-row.c-t{--kc:#8fdde2} .bs-bp-row.c-o{--kc:#f6b45a} .bs-bp-row.c-g{--kc:#b4e06a}
.bs-bp-items{flex:1;min-width:140px;display:flex;flex-wrap:wrap;gap:7px}
.bs-bp-items span{font-size:13.5px;line-height:1.35;color:#e4eef8;background:color-mix(in srgb,var(--kc,#9fb6cf) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--kc,#9fb6cf) 38%,transparent);border-radius:8px;padding:5px 10px}
.bs-bp-foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);margin-top:4px}
.bs-bp-foot span{font-family:var(--mono);font-size:11px;color:#9fb6cf;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:7px;padding:4px 9px}
.bs-bp-more{display:flex;align-items:center;gap:8px;padding:13px 18px 15px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--display);font-weight:600;font-size:14.5px;color:#9fd0ff}
.bs-bp-more b{font-weight:600;transition:transform .2s}
.bs-bp-more:hover b{transform:translateX(4px)}

/* Build or buy */
.bs-bb-intro{max-width:720px}
.bs-bb{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.bs-bb-col{border:1px solid var(--line);border-radius:22px;padding:30px 30px 26px;background:#fff;height:100%;
  display:flex;flex-direction:column}
.bs-bb-col ul{list-style:none;display:grid;gap:13px;margin-top:20px}
.bs-bb-col li{display:flex;gap:12px;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.bs-bb-m{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--bbc)}
.bs-bb-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bbc);border:1px solid color-mix(in srgb,var(--bbc) 35%,#fff);background:color-mix(in srgb,var(--bbc) 7%,#fff);
  border-radius:999px;padding:4px 10px}
.bs-bb-col h3{font-size:22px;margin:12px 0 0;letter-spacing:-.01em}
.bs-bb-foot{margin-top:auto;padding-top:18px;border-top:1px dashed var(--line);font-size:14.5px;line-height:1.5;color:var(--ink)}
/* Buying is the quieter card on purpose: the page should not look like it is selling against it */
.bs-buy{--bbc:var(--muted);background:var(--paper-2)}
.bs-build{--bbc:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,#fff);
  box-shadow:0 30px 60px -48px rgba(47,116,189,.7)}
.bs-build .bs-bb-foot{color:var(--blue-deep);font-weight:500}

/* System anatomy: five layers, top down */
section.block.bs-an-sec{padding-top:88px!important;padding-bottom:88px;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bs-an-intro{max-width:700px}
.bs-an{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.bs-an-l{display:grid;grid-template-columns:72px 1fr;gap:4px;background:#fff;padding:26px 28px 24px;
  border-left:3px solid var(--lc);transition:background .2s}
.bs-an-l:hover{background:var(--paper-2)}
/* One hue per layer, in the order the brand palette runs, so the stack reads as a stack */
.bs-an-l:nth-child(1){--lc:var(--blue)}
.bs-an-l:nth-child(2){--lc:var(--blue-deep)}
.bs-an-l:nth-child(3){--lc:var(--teal)}
.bs-an-l:nth-child(4){--lc:var(--orange)}
.bs-an-l:nth-child(5){--lc:var(--green)}
.bs-an-n i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  font-family:var(--mono);font-style:normal;font-size:13px;letter-spacing:.02em;
  color:var(--lc);background:color-mix(in srgb,var(--lc) 10%,#fff);border:1px solid color-mix(in srgb,var(--lc) 28%,#fff)}
.bs-an-b h3{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
.bs-an-b p{color:var(--ink-soft);font-size:15.5px;max-width:760px;text-wrap:pretty}
.bs-an-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.bs-an-tags span{font-family:var(--mono);font-size:11.5px;color:var(--blue-deep);background:#eef4fb;border:1px solid #dbe8f6;border-radius:7px;padding:4px 9px}
/* Technology band — shared by all three built-out service pages.
   One centred flow of marks, not a bordered table of rows: it keeps the colour and texture of real
   vendor logos while dropping the "capability inventory" framing a labelled grid gives them, and it
   sits late on the page so the tools read as a supporting detail rather than the offer. The older
   bordered .ag-stack table it replaced was removed once the Full-Stack page switched over. */
/* White, and with no rule of its own: on every page the band follows a tinted section
   (.ag-pipe-sec / .bs-an-sec / .fs-tl-sec), so taking the tint here restores the page's light/dark
   alternation instead of stacking three grey bands in a row. The neighbours' own borders do the
   separating, which is also why the band must keep a tinted, bordered section above it. */
.tech-band{background:var(--paper);padding:60px 0 56px}
.tech-band-head{text-align:center;max-width:640px;margin:0 auto 34px}
.tech-band-head h2{font-size:clamp(24px,2.6vw,32px);text-wrap:balance}
.tech-band-head p{margin-top:14px;color:var(--ink-soft);font-size:16px;text-wrap:pretty}
.tech-band-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:15px 26px}
.tech-band-g{display:contents}
.tech-band-i{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  font-size:15px;color:var(--ink-soft);transition:color .2s}
.tech-band-i:hover{color:var(--ink)}
.tech-band-i i{flex:none;display:flex;align-items:center;justify-content:center;width:23px;height:22px;color:var(--t)}
.tech-band-i i svg{display:block;width:auto;max-width:23px;height:21px}
.tech-band-note{text-align:center;max-width:660px;margin:30px auto 0;font-size:14.5px;color:var(--muted);text-wrap:pretty}

/* Engagement models */
.bs-eng-intro{max-width:700px}
.bs-eng{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
/* Flex column so the four "what you get" lists line up across cards whose copy runs to
   different lengths, rather than stepping down the row. */
.bs-eng-c{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;
  padding:24px 22px 22px;background:#fff;height:100%;
  transition:transform .2s,box-shadow .25s,border-color .2s}
.bs-eng-c:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 35%,#fff);
  box-shadow:0 26px 50px -38px rgba(31,87,147,.6)}
.bs-eng-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bs-eng-no{font-family:var(--display);font-weight:700;font-size:15px;color:var(--paper-3);letter-spacing:.02em}
.bs-eng-tag{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-deep);background:#eef4fb;border:1px solid #dbe8f6;border-radius:999px;padding:4px 9px}
.bs-eng-c h3{font-size:19px;margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
.bs-eng-best{margin:0;padding:12px 14px;border-radius:11px;background:var(--paper-2);border:1px solid var(--line);
  font-size:14px;line-height:1.45;color:var(--ink)}
.bs-eng-best span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.bs-eng-c ul{list-style:none;display:grid;gap:9px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.bs-eng-best{margin-bottom:16px}
.bs-eng-c li{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.bs-eng-tick{flex:none;font-size:11px;color:var(--green);margin-top:2px}
.bs-eng-cost{margin-top:28px}

/* Ownership and handover */
.bs-own-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:34px}
.bs-own-head h2{font-size:clamp(26px,2.8vw,36px);text-wrap:balance}
.bs-own-head p{color:var(--ink-soft);font-size:16.5px;text-wrap:pretty}
.bs-own{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.bs-own-i{background:#fff;padding:28px 26px 26px;transition:background .2s}
.bs-own-i:hover{background:var(--paper-2)}
.bs-own-i h3{display:flex;align-items:center;gap:11px;font-size:18px;margin:0 0 9px;letter-spacing:-.01em}
/* Drawn as a pseudo-element, not a child span: a span inside the h3 puts the tick into the
   heading's text content ("\2713Source code and IP") for crawlers and screen readers. */
.bs-own-i h3::before{content:"\2713";flex:none;width:24px;height:24px;border-radius:50%;
  background:color-mix(in srgb,var(--green) 14%,#fff);border:1px solid color-mix(in srgb,var(--green) 40%,#fff);
  color:#4e8a0a;font-size:11px;font-weight:400;display:flex;align-items:center;justify-content:center}
.bs-own-i p{color:var(--ink-soft);font-size:14.5px;text-wrap:pretty}

@media(max-width:1080px){
  .bs-eng{grid-template-columns:repeat(2,1fr)}
  .bs-own{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .sdh-bs .sdh-grid{grid-template-columns:1fr;gap:40px}
  .bs-bb{grid-template-columns:1fr}
  .bs-own-head{grid-template-columns:1fr;gap:16px;align-items:start}
  section.block.bs-an-sec{padding-top:64px!important;padding-bottom:64px}
  section.block.fs-tl-sec{padding-top:64px!important;padding-bottom:64px}
}
@media(max-width:680px){
  .tech-band{padding:44px 0 40px}
  .tech-band-row{gap:12px 18px}
  .tech-band-i{font-size:14px}
  .bs-eng{grid-template-columns:1fr}
  .bs-own{grid-template-columns:1fr}
  .bs-bb-col{padding:24px 22px 22px}
  .bs-an-l{grid-template-columns:1fr;gap:14px;padding:24px 22px}
  .bs-bp-k{width:56px}
  .bs-bp-items{min-width:0}
  .bs-own-i{padding:24px 22px}
}

/* =====================================================================
   Full-Stack Development service page (/services/full-stack)
   The hero slice, the seams, the first ninety days and the standards
   list. The technology band (.tech-band) and the capability cards
   (.ag-caps) are shared components, defined once above.
   ===================================================================== */

/* Hero: teal-led, so the three built-out service pages read as three pages */
.sdh-fs::before{background:
  radial-gradient(42% 82% at 88% 2%,rgba(31,169,179,.46),transparent 70%),
  radial-gradient(34% 62% at 2% 96%,rgba(31,87,147,.5),transparent 70%),
  radial-gradient(28% 48% at 52% 112%,rgba(124,192,26,.16),transparent 70%),
  linear-gradient(140deg,#0a1620,#102430)}
.sdh-fs .sdh-grid{grid-template-columns:1fr 1fr;gap:56px}
.sdh-fs .sdh-proof li:nth-child(1) b{color:#8fdde2}
.sdh-fs .sdh-proof li:nth-child(2) b{color:#7fc4ff}
/* "HIPAA" is a word, not a number, so it needs to sit at a readable size next to the two figures */
.sdh-fs .sdh-proof li:nth-child(3) b{color:#b4e06a;font-size:26px;letter-spacing:.01em}

/* Hero panel: one feature, cut down through every layer it touches */
.fs-slice{border-radius:22px;background:rgba(8,15,25,.62);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 46px 90px -48px rgba(0,0,0,.8);backdrop-filter:blur(8px);overflow:hidden}
.fs-slice-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.fs-slice-bar code{font-family:var(--mono);font-size:11.5px;color:#9fb6cf;letter-spacing:.03em}
/* A square with a diagonal through it: the slice the panel is named after */
.fs-slice-cut{flex:none;width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.3);
  background-image:linear-gradient(135deg,transparent 44%,rgba(143,221,226,.95) 44%,rgba(143,221,226,.95) 56%,transparent 56%)}
.fs-slice-badge{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9fdc4e}
.fs-slice-f{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 14px;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.35;color:#fff}
.fs-slice-f span{flex:none;margin-top:1px;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8fdde2;border:1px solid rgba(143,221,226,.4);border-radius:999px;padding:3px 8px}
.fs-slice-rows{list-style:none;position:relative;padding:0 18px}
/* The rail the dots sit on: the cut itself, running the height of the stack */
.fs-slice-rows::before{content:"";position:absolute;left:23.5px;top:18px;bottom:16px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#7fc4ff,#8fdde2 42%,#f6b45a 74%,#b4e06a);opacity:.45}
.fs-slice-rows li{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;
  padding:11px 0 11px 24px;border-top:1px solid rgba(255,255,255,.09)}
.fs-slice-rows li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:9px;border-radius:50%;
  background:var(--kc,#9fb6cf);box-shadow:0 0 0 3.5px rgba(10,22,32,.95)}
.fs-slice-rows li.c-b{--kc:#7fc4ff} .fs-slice-rows li.c-t{--kc:#8fdde2}
.fs-slice-rows li.c-o{--kc:#f6b45a} .fs-slice-rows li.c-g{--kc:#b4e06a}
.fs-slice-k{flex:none;width:52px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--kc,#9fb6cf)}
.fs-slice-t{flex:1;min-width:150px;font-size:14px;line-height:1.45;color:#e4eef8}
.fs-slice-t.mono{font-family:var(--mono);font-size:12.5px;color:#cfe0f1}
.fs-slice-foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);margin-top:4px}
.fs-slice-foot span{font-family:var(--mono);font-size:11px;color:#9fb6cf;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:7px;padding:4px 9px}
.fs-slice-more{display:flex;align-items:center;gap:8px;padding:13px 18px 15px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--display);font-weight:600;font-size:14.5px;color:#8fdde2}
.fs-slice-more b{font-weight:600;transition:transform .2s}
.fs-slice-more:hover b{transform:translateX(4px)}

/* The seams: three compact cards, one symptom line and one answer line each */
.fs-seam-intro{max-width:720px}
.fs-seams{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.fs-seam{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;
  border-top:3px solid var(--teal);height:100%;transition:transform .2s,box-shadow .25s}
.fs-seam:hover{transform:translateY(-3px);box-shadow:0 26px 50px -40px rgba(31,169,179,.7)}
.fs-seam h3{font-size:19px;margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance}
.fs-seam p{display:flex;gap:11px;font-size:15px;line-height:1.5;text-wrap:pretty}
.fs-seam p span{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center}
/* The symptom is the quieter line; the answer is where the eye should land */
.fs-seam-cost{color:var(--muted);padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--line)}
.fs-seam-cost span{background:var(--paper-2);border:1px solid var(--line);color:#9aa3ad}
.fs-seam-fix{color:var(--ink)}
.fs-seam-fix span{background:color-mix(in srgb,var(--teal) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--teal) 38%,#fff);color:#13828a;font-size:11px}

/* The first ninety days */
/* Tinted sections on this page. The band is borderless and takes its top edge from whatever sits
   above it, so the timeline must stay tinted and must stay directly above the band. The engagement
   and quote sections are tinted for rhythm alone: without them the page runs white from the cards
   all the way to the footer. Order, and what each one is: timeline (tint) -> band (white) ->
   engagement (tint) -> what ships (white) -> quote (tint) -> related work (white) -> FAQ (white). */
section.block.fs-eng-sec{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* "Every build includes": the old six-card standards section, folded into one scannable line. */
.fs-inc{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.fs-inc-h{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fs-inc ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px}
.fs-inc li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-soft)}
.fs-inc li span{color:var(--teal);font-size:12px}
/* The client quote now sits inside the related-work section, so it only needs spacing. */
.qcard.fs-q{margin-top:30px}
/* The one tinted section on this page, in the same slot .bs-an-sec holds on the bespoke page: it
   breaks a long run of white sections, and its bottom border is what separates the borderless
   .tech-band that follows it. */
section.block.fs-tl-sec{padding-top:88px!important;padding-bottom:88px;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fs-tl-intro{max-width:700px}
.fs-tl{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.fs-tl-b{display:grid;grid-template-columns:150px 1fr 300px;gap:24px;align-items:start;background:#fff;
  padding:24px 28px 22px;border-left:3px solid var(--tc);transition:background .2s}
.fs-tl-b:hover{background:var(--paper-2)}
.fs-tl-b:nth-child(1){--tc:var(--blue)}
.fs-tl-b:nth-child(2){--tc:var(--teal)}
.fs-tl-b:nth-child(3){--tc:var(--orange)}
.fs-tl-b:nth-child(4){--tc:var(--green)}
.fs-tl-w{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--tc);padding-top:3px}
.fs-tl-body h3{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
.fs-tl-body>p{color:var(--ink-soft);font-size:15.5px;max-width:740px;text-wrap:pretty}
.fs-tl-ship{padding:12px 14px;border-radius:11px;background:var(--paper-2);border:1px solid var(--line);
  font-size:14px;line-height:1.45;color:var(--ink)}
.fs-tl-ship span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.fs-tl-after{display:flex;align-items:flex-start;gap:11px;margin-top:22px;font-size:15px;color:var(--ink-soft);text-wrap:pretty}
.fs-tl-after::before{content:"";flex:none;width:3px;align-self:stretch;min-height:22px;border-radius:2px;background:var(--teal);opacity:.4}


@media(max-width:1080px){
  .fs-seams{grid-template-columns:1fr}
  .fs-tl-b{grid-template-columns:140px 1fr;gap:16px}
  .fs-tl-ship{grid-column:2}
}
@media(max-width:980px){
  .sdh-fs .sdh-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:680px){
  .fs-tl-b{grid-template-columns:1fr;gap:12px;padding:24px 22px}
  .fs-tl-ship{grid-column:1}
  .fs-seam{padding:24px 22px 22px}
  .fs-slice-k{width:46px}
  .fs-slice-t{min-width:0}
}


/* =====================================================================
   IoT Solutions service page (/services/iot)
   Nearly all of this page is other pages' components: the hero trace is
   .fs-slice, the scope cards are .fs-seams, the architecture list is
   .bs-an (which also supplies this page's one tinted section), the
   engagement grid is .bs-eng, the handover line is .fs-inc, and the
   capability cards (.ag-caps) and technology band (.tech-band) are
   shared by all four built-out pages. What is left below is the hero's
   own colour, the green tones the borrowed dark panel needs, one real
   new component (.io-proof), and the tint that keeps the page
   alternating. Prefixed .io-* throughout.
   ===================================================================== */

/* Hero: green-led, so the four built-out service pages read as four pages. The green is the
   service's own accent (#7cc01a in database/seed/services.php), lifted for a dark background. */
.sdh-io::before{background:
  radial-gradient(44% 84% at 86% 0%,rgba(124,192,26,.30),transparent 70%),
  radial-gradient(36% 64% at 0% 98%,rgba(31,87,147,.52),transparent 70%),
  radial-gradient(30% 50% at 48% 112%,rgba(31,169,179,.22),transparent 70%),
  linear-gradient(140deg,#0a1a18,#0f2430)}
.sdh-io .sdh-grid{grid-template-columns:1fr 1fr;gap:56px}
/* "3 yrs" and "37+" are both short strings rather than bare figures, so they sit at the same
   weight as the one real number beside them. */
.sdh-io .sdh-proof li:nth-child(1) b{color:#b4e06a}
.sdh-io .sdh-proof li:nth-child(2) b{color:#8fdde2}
.sdh-io .sdh-proof li:nth-child(3) b{color:#7fc4ff}

/* The hero trace: .fs-slice recoloured. The rail runs green-to-blue rather than the full-stack
   page's blue-to-green, because here it is a path through time, not a cut down through layers. */
.io-trace .fs-slice-f span{color:#b4e06a;border-color:rgba(180,224,106,.42)}
.io-trace .fs-slice-rows::before{background:linear-gradient(180deg,#b4e06a,#8fdde2 55%,#f6b45a)}
.io-trace .fs-slice-foot{gap:8px 10px}
/* The four delivery channels close the trace, so they read as destinations, not as tags. */
.io-trace .fs-slice-foot span{display:inline-flex;align-items:center;gap:7px;color:#cfe0f1}
.io-trace .fs-slice-foot span::before{content:"";width:5px;height:5px;border-radius:50%;background:#b4e06a}

/* Scope cards: the same .fs-seam cards in this page's accent. */
.io-scope .fs-seam:hover{box-shadow:0 26px 50px -40px rgba(124,192,26,.75)}
.io-scope .fs-seam-fix span{background:color-mix(in srgb,var(--green) 14%,#fff);
  border-color:color-mix(in srgb,var(--green) 32%,#fff);color:color-mix(in srgb,var(--green) 72%,#000)}

/* Engagement takes the tint here, as it does on the full-stack page: the architecture section
   above already spent this page's mid-page tint on drawing the edge of the borderless technology
   band, so without this the whole second half of the page runs white. */
section.block.io-eng-sec{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The stages list reuses .fs-tl (the full-stack ninety-day timeline) because that component is
   built for a sequence with a thing you hold at the end of each band. Its accent rail is tinted
   per band by :nth-child on that page; here the fourth band should land on this page's green
   rather than borrowing the teal order. */
.io-eng-sec .fs-tl-b:nth-child(1){--tc:var(--blue)}
.io-eng-sec .fs-tl-b:nth-child(2){--tc:var(--teal)}
.io-eng-sec .fs-tl-b:nth-child(3){--tc:var(--orange)}
.io-eng-sec .fs-tl-b:nth-child(4){--tc:var(--green)}

/* Proof: one case study beside the client quote. Exactly one project tags IoT, so the shared
   two-up .proj-grid would leave half a row empty, and filling it with a project that is not an
   IoT project is not an option on a page that trades on checkable claims. */
.io-proof{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:26px;align-items:stretch}
.io-proof .proj-card{height:100%}
.io-proof .qcard.io-q{display:flex;flex-direction:column;justify-content:center;padding:44px 44px 36px;
  border:1px solid var(--line);border-radius:22px;background:var(--paper-2)}
.io-proof .qcard.io-q blockquote{font-size:clamp(18px,1.7vw,21px);line-height:1.55}
.io-proof .qcard.io-q figcaption{margin-top:28px}

@media(max-width:980px){
  .sdh-io .sdh-grid{grid-template-columns:1fr;gap:40px}
  .io-proof{grid-template-columns:1fr}
}
@media(max-width:680px){
  .io-proof .qcard.io-q{padding:34px 26px 28px}
}


/* ============================================================================================
   WEB APPLICATIONS  (/services/web-apps)
   --------------------------------------------------------------------------------------------
   Rebuilt 2026-10-20, and this block is roughly a third of what it was. For three builds this
   page did not reuse the sibling pages' section shapes: it was organised around a taxonomy (a
   site, a web app, a product), with a hero chooser, a three-card showcase of the three kinds, and
   three long tracks carrying a record-path diagram, a before/after pair and a cost answer each.
   That was rejected for teaching the reader about their own purchase rather than selling ours —
   see the header of includes/webapps.php.

   What went with it: .wa-site/.wa-app/.wa-prod tones, .wa-build/.wa-bc (the showcase), .wa-tr and
   .wa-tr-split (the tracks), .wa-path/.wa-hard (the record walkthrough), .wa-shift (the product
   before/after), .wa-cost-line (the per-track one-liner) and .wa-ev (the per-track case-study
   strip). If a future build wants any of them back, read that header first — they came out for a
   reason, not for space.

   What this page now shares with its siblings: .ag-caps (capability grid), .bs-an (the strengths
   list, as /services/iot and /services/mobile-apps also use it), .tech-band, .proj-grid and
   .qcard. What is still its own: the hero panel and the closing cost-and-ownership section.
   ============================================================================================ */

/* ---- Hero -------------------------------------------------------------------------------- */
.sdh-wa::before{background:
  radial-gradient(42% 80% at 88% 0%,rgba(47,116,189,.42),transparent 70%),
  radial-gradient(38% 66% at 2% 96%,rgba(122,90,245,.30),transparent 70%),
  radial-gradient(30% 50% at 46% 112%,rgba(31,169,179,.20),transparent 70%),
  linear-gradient(140deg,#0b1626,#101c2e)}
.sdh-wa .sdh-grid{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* "3 yrs" is two words rather than a figure, so it has to carry the same weight as the numbers
   beside it rather than reading as a label that lost its number. */
.sdh-wa .sdh-proof li:nth-child(1) b{color:#7fc4ff}
.sdh-wa .sdh-proof li:nth-child(2) b{color:#c9b6ff}
.sdh-wa .sdh-proof li:nth-child(3) b{color:#8fdde2}

/* ---- Hero panel: three platforms we built and still run ------------------------------------
   The markup and these rules are the old .wa-pick chooser, renamed: same bar / rows / chip / foot
   shape, carrying proof instead of a question. It borrows nothing from .fs-slice, which runs a
   rail down its left edge because it draws a sequence — a rail here would say these three
   happened in order, and they are three separate platforms. Each row is a link to a case study. */
.wa-live{border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(9,17,30,.56);
  backdrop-filter:blur(6px);overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.wa-live-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.wa-live-cut{width:12px;height:12px;border-radius:4px;background:var(--blue);flex:none;
  box-shadow:0 0 0 4px rgba(47,116,189,.18)}
.wa-live-bar code{font-family:var(--mono);font-size:12.5px;color:#cfe0f1;letter-spacing:.02em}
.wa-live-badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#9fb6cd;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 9px}
.wa-live-rows{list-style:none;margin:0;padding:14px}
.wa-live-rows li{--kc:#7fc4ff;border-radius:14px;transition:background .18s}
.wa-live-rows li.c-g{--kc:#b4e06a} .wa-live-rows li.c-b{--kc:#7fc4ff} .wa-live-rows li.c-o{--kc:#ffc46b}
.wa-live-rows li:hover{background:rgba(255,255,255,.05)}
/* Our own product, marked because it is the one we can show at any depth on request. */
.wa-live-rows li.on{background:rgba(127,196,255,.09);box-shadow:inset 0 0 0 1px rgba(127,196,255,.22)}
.wa-live-rows a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:22px 16px;text-decoration:none}
.wa-live-k{font-family:var(--display);font-weight:700;font-size:13px;color:var(--kc);letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.wa-live-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kc);flex:none}
.wa-live-t{color:#dbe7f3;font-size:14.5px;line-height:1.4}
.wa-live-w{font-family:var(--mono);font-size:11.5px;color:#9fb6cd;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:4px 9px}
.wa-live-foot{margin:0;padding:15px 20px 17px;border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;line-height:1.5;color:#a9bed3}

/* ---- Our strengths -------------------------------------------------------------------------
   Shared .bs-an numbered-layer component; only the row accents are this page's. The fifth row is
   the ongoing one, so it takes the green the rest of the site uses for "still running". */
.wa-str-sec .bs-an-l:nth-child(4){--lc:#7a5af5}
/* One row carries a link to the case study that proves it (the support row, whose evidence is the
   client's own words). Sits under the tags, in the row's own accent. */
.wa-str-more{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:600;
  font-size:14.5px;color:var(--lc,var(--blue));text-decoration:none}
.wa-str-more b{font-weight:400}
.wa-str-more:hover{text-decoration:underline}

/* ---- Cost and ownership --------------------------------------------------------------------
   The closing section. Two jobs, two deliberately different shapes so it does not read as one
   more grey slab: cost is a ruled ranked list, ownership is one horizontal band of ticks.
   Neither is a card. --wc is set here because the ranked numbers used to inherit it from
   whichever track they sat in, and the tracks are gone. */
section.block.wa-close-sec{--wc:var(--blue);background:var(--paper-2);
  padding-top:var(--sec-y)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wa-close-intro{max-width:760px}

/* THIRD STRUCTURE for this block, and the first that uses its own width.
     v1  full-width ruled list under a sub-heading, note dumped beneath  -> read as a document
     v2  two columns, framing left / drivers right                       -> left column ran out of
                                                                            content a third of the
                                                                            way down and left a tall
                                                                            blank
     v3  heading and note share one row, drivers in a three-up grid      -> no dead space, and the
                                                                            whole block is roughly
                                                                            half the height of v2
   The lesson from v2 is worth keeping: a two-column layout is a promise that BOTH columns have
   something to say. A heading plus two lines of note is not a column, it is a caption — so it goes
   on a row with the heading, where a caption belongs, and the width goes to the content. */
/* The section runs as TWO COLUMNS, one per half of the h2: six cost drivers down the left, the two
   ownership boxes stacked down the right. Six ruled rows and two boxes come out close in height, so
   neither column runs dry — which is what killed an earlier two-column attempt here, where the left
   held only a heading and a note and left a tall blank (includes/webapps_close.php). */
.wa-close-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 56px;
  align-items:start}
.wa-close-cols .wa-sub{margin-bottom:0}
.wa-sub-h{font-size:clamp(20px,2.1vw,25px);letter-spacing:-.02em;margin:0 0 22px}

/* A ruled list now, not a three-up grid: in a half-width column the drivers read down, which is
   also the shape that contrasts with the boxes beside them. Plain 1px rules rather than the six
   coloured ones this had briefly — a cost driver has no colour, so six of them were decoration,
   and the weight belongs on the boxes opposite. */
.wa-cost-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:0;margin:0;
  border-top:1px solid var(--line)}
.wa-cost-grid li{padding:14px 2px;border-bottom:1px solid var(--line)}
.wa-cost-grid b{display:block;font-weight:600;font-size:16px;color:var(--ink);letter-spacing:-.01em;
  margin-bottom:4px}
.wa-cost-grid span{display:block;color:var(--ink-soft);font-size:14.5px;line-height:1.55;
  text-wrap:pretty}

/* The two boxes stack in the right column: settled above, available below. The ✓ / + marks carry
   the distinction, so neither box explains itself in grey text. */
.wa-grants{display:grid;grid-template-columns:1fr;gap:20px}
.wa-grant{padding:26px 26px 24px;border-radius:18px;border:1px solid var(--line);background:#fff}
.wa-grant h4{font-size:19px;letter-spacing:-.01em;margin:0 0 7px}
.wa-grant>p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.wa-grant ul{list-style:none;display:grid;gap:11px;margin:0}
.wa-grant li{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:4px;
  font-size:15.5px;line-height:1.45;color:var(--ink)}
.wa-grant li span{font-size:13px;line-height:1.5;font-weight:700}
.wa-g-own li span{color:var(--green)}
/* Available: a dashed edge and blue plus marks. Visibly a different KIND of thing without a
   sentence having to say so. */
.wa-g-add{background:transparent;border-style:dashed}
.wa-g-add li span{color:var(--blue);font-size:15px}
.wa-g-add li{color:var(--ink-soft)}

/* ---- The client quote, inside the related-work section -------------------------------------- */
.qcard.wa-q{margin-top:26px;border:1px solid var(--line);border-radius:20px;background:var(--paper-2);
  padding:36px 38px 32px}
.qcard.wa-q blockquote,.qcard.wa-q p{font-size:19px;line-height:1.6}

/* ---- Responsive ---------------------------------------------------------------------------- */
@media(max-width:980px){
  /* One column: the cost half completes top to bottom, then ownership begins below it. */
  .wa-close-cols{grid-template-columns:1fr;gap:46px}
}
@media(max-width:980px){
  .sdh-wa .sdh-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wa-grant{padding:24px 22px 22px}
  .wa-live-rows a{grid-template-columns:1fr auto;gap:6px 12px}
  .wa-live-t{grid-column:1/-1}
  .qcard.wa-q{padding:30px 24px 26px}
}

/* ============================================================================================
   MOBILE APPLICATIONS  (/services/mobile-apps)
   --------------------------------------------------------------------------------------------
   Other pages' components with a modifier class beside each, which is now the default rather
   than the exception: the hero release trace is full-stack's .fs-slice (which /services/iot and
   /services/web-apps also render through), the app-or-site sort is bespoke's .bs-bb at its own
   two columns, the architecture list is bespoke's .bs-an, the engagement grid is bespoke's
   .bs-eng narrowed to three, and the deciding-rule box and the cost drivers are both .ag-more.
   Nothing below edits a borrowed component's own rules — see the working plan §5.
   ============================================================================================ */

/* Hero. Warm, because #f09018 is this service's own accent in database/seed/services.php and it
   is the only one of the six that is: cooling it to match the siblings would make the orange
   chip in /services and the page it leads to look like two different things. */
.sdh-mb::before{background:
  radial-gradient(44% 82% at 86% 0%,rgba(240,144,24,.34),transparent 70%),
  radial-gradient(38% 64% at 4% 98%,rgba(122,90,245,.26),transparent 70%),
  radial-gradient(30% 48% at 50% 112%,rgba(31,169,179,.18),transparent 70%),
  linear-gradient(140deg,#120f18,#1a1420)}
.sdh-mb .sdh-grid{grid-template-columns:1fr 1fr;gap:56px}
/* "HIPAA" is a short string rather than a figure, so it has to carry the same weight as the two
   numbers beside it rather than reading as a label that lost its number. */
.sdh-mb .sdh-proof li:nth-child(1) b{color:#f6b45a}
.sdh-mb .sdh-proof li:nth-child(2) b{color:#c9b6ff}
.sdh-mb .sdh-proof li:nth-child(3) b{color:#8fdde2}
/* Three stats, three fixed columns, 2026-10-22. The shared row is `display:flex` with
   `flex:0 0 auto`, so each stat takes the width of its own label and the number of stats per row
   depends on how long they happen to be. That held while the figures matched the "3 yrs" / "HIPAA"
   shape it was sized around; "~2-3 months" is wider, the three stopped fitting the hero's left
   column, and HIPAA wrapped onto a line of its own. A grid fixes the COUNT rather than leaving it
   to the copy, so a future label edit cannot silently re-break the row. Labels wrap to two lines
   instead, which is the better failure. Below 680px the shared rule takes over and they stack. */
@media(min-width:681px){
  /* 1.3fr on the first column because "~2-3 months" is the widest figure on the page and equal
     thirds made IT wrap instead of its label — a two-line label is fine, a two-line number is not.
     26px rather than the shared 30px for the same reason: this page's figures are words, not
     digits. Both are scoped to .sdh-mb, so the other five heroes are untouched. */
  .sdh-mb .sdh-proof{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px 28px}
  .sdh-mb .sdh-proof li{flex:initial;min-width:0}
  .sdh-mb .sdh-proof b{font-size:26px}
}

/* The hero trace: .fs-slice recoloured. The rail runs warm to teal because the path is a release
   leaving our hands and ending somewhere we still have to answer, not a cut down through layers. */
.mb-trace .fs-slice-f span{color:#f6b45a;border-color:rgba(246,180,90,.42)}
.mb-trace .fs-slice-rows::before{background:linear-gradient(180deg,#f6b45a,#c9b6ff 54%,#8fdde2)}

/* ---------------------------------------------------------------------------------------------
   The app-or-site sort: ONE instrument, not two cards.
   Deliberately not .bs-bb (bespoke's build-or-buy, web-apps' three tiers), which is a set of
   separate cards each ending on its own verdict. This is one question, two answers and a single
   ruling that settles both. See includes/mobile_sort.php.
   --------------------------------------------------------------------------------------------- */
.mb-sort{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden;
  box-shadow:0 34px 64px -50px rgba(21,24,29,.42)}
/* One rule down the middle rather than a gap: a gap would make these two cards again. */
.mb-sort-sides{display:grid;grid-template-columns:1fr 1fr}
.mb-side{padding:32px 34px 30px;position:relative}
.mb-side + .mb-side{border-left:1px solid var(--line)}
/* The tone sits on a short bar above the heading, not on a whole card edge. */
/* Stacked, not side by side: the two tags are different lengths, and inline the longer one
   wrapped and pushed that side's list out of step with the other's. */
.mb-side-h{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding-top:16px;margin-bottom:18px;position:relative}
.mb-side-h::before{content:"";position:absolute;left:0;top:0;width:34px;height:3px;border-radius:2px;
  background:var(--sc)}
.mb-app{--sc:var(--orange)}
.mb-site{--sc:var(--green)}
.mb-side-h h3{font-size:20px;margin:0}
.mb-side-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sc)}
/* Signals, not sentences: an icon and a short label each. A two-column grid inside each side, so
   four signals read as a block to scan rather than a list to work down. */
.mb-side-sigs{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.mb-side-sigs li{display:flex;flex-direction:column;gap:9px;font-family:var(--display);font-weight:600;
  font-size:14.5px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.mb-side-sigs li i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;color:var(--sc);background:color-mix(in srgb,var(--sc) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--sc) 22%,#fff)}
.mb-side-sigs li i svg{width:20px;height:20px}
.mb-side-foot{margin:0;padding-top:16px;border-top:1px dashed var(--line);
  font-size:14px;line-height:1.55;color:var(--muted)}
/* The ruling. Tinted and full width inside the same panel, so it reads as the instrument's answer
   rather than as a third column or a footnote bolted underneath. */
.mb-verdict{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);gap:28px;
  padding:28px 34px 30px;background:var(--paper-2);border-top:1px solid var(--line)}
.mb-verdict b{font-family:var(--display);font-size:17px;line-height:1.35;color:var(--ink)}
.mb-verdict p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-soft)}

/* ---------------------------------------------------------------------------------------------
   The capability section: a phone that stays while the capabilities scroll past it.
   The one place this page does not reuse .ag-caps. See includes/mobile_caps.php for why the
   content needs a different shape rather than just a different skin.
   --------------------------------------------------------------------------------------------- */
.mb-caps{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:64px;align-items:start}

/* Sticky at the same offset as .case-grid aside, .post-aside and .mod-head, so the page has one
   sticky offset rather than four. align-self:start is what lets a grid child stick at all. */
.mb-phone-col{align-self:start;position:sticky;top:100px}
/* The right-hand cell: the capability list AND the "included with every build" band, so the
   sticky phone has something taller than itself to travel against. Before 2026-10-22 the band
   was a sibling of the grid, the row was exactly the phone's height, and the phone therefore
   never stuck at all — measured, not guessed: grid 658px, phone 658px, list 596px.
   min-width:0 because a grid child defaults to min-content width and the tag chips would
   otherwise refuse to wrap. */
.mb-caps-right{min-width:0}
/* Stacked inside the narrower column: three cards side by side here would be cramped, and the
   height is the point — it is what the phone sticks through. */
.mb-caps-right .mb-behind-row{grid-template-columns:1fr;gap:18px}
/* A height guard, not just a width one. The phone is ~658px and sticks at top:100, so it needs
   758px of viewport; on a short laptop window it would stick with its bottom cut off, which
   looks broken in a way no width breakpoint catches. Below that, it scrolls with the page and
   simply leads the section, which is what the max-width:980px rule already does at one column.

   RECALIBRATED 2026-10-23, after the owner reported the phone had stopped sticking. The guard
   was a flat `max-height:800px -> static`, but the real requirement is 100 + 658 = 758px, so
   **759-800px of viewport was being switched off even though the phone fitted** — and that band
   is exactly where a laptop browser window lands once the tab strip, address bar and bookmarks
   bar are taken off a 900px screen. The comment above even said "~760px" while the rule said 800.

   So instead of one flat cut-off there are now two steps. The sticky nav is 75px, and top:100
   leaves a 25px gap under it; on a short window that gap is a luxury, so the offset tightens to
   82px (a 7px gap) and the requirement drops to 740px. Only below that does it go static.
   Changing `top` on an element the width rules have already made `position:static` does nothing,
   so this cannot resurrect the phone at narrow widths. */
@media(max-height:800px){
  .mb-phone-col{top:82px}
}
/* RECALIBRATED AGAIN 2026-10-23, against a real measurement from the owner's own screen rather
   than an assumed one: a 737px viewport, which is an ordinary MacBook window once the browser
   chrome comes off. The phone column is 658px and the budget under an 82px offset at 737px is
   655px. **It missed by three pixels**, which is the whole reason the effect had never once
   worked on that machine.

   Switching it off at that height would have been the wrong fix: a 737px window is not a short
   window, it is the common case, and a feature that only appears on a maximised window on a
   large external display is a feature almost nobody sees. So the phone shrinks instead. At
   max-width:248px the frame is ~547px and the column ~605px, which needs 685px and leaves ~50px
   of clearance on a 737px screen. The frame is already fluid (max-width + aspect-ratio), so this
   costs nothing but a smaller phone on smaller screens, which is the right trade.

   Only below 690px, where even the shrunk phone stops fitting, does it go static. */
@media(max-height:760px){
  .mb-phone-col{top:80px}
}
/* NOTE: the frame/caption half of this breakpoint cannot live here. The base
   `.mb-phone-frame{max-width:272px}` is declared BELOW this point, and at equal specificity the
   later rule wins, so an override written here is silently discarded — it set `top` correctly
   and the phone stayed 658px tall, which looked exactly like the media query not matching at
   all. It is applied after the base declaration instead, and still before the width queries so
   those keep winning on narrow screens. */
@media(max-height:690px){
  .mb-phone-col{position:static}
}
.mb-phone{display:flex;flex-direction:column;align-items:center}

/* The frame borrows the gallery's phone idiom (.gal-phones .gal-img): dark bezel, big radius.
   Fixed aspect so swapping screens never changes the page height under the reader's cursor. */
/* Matched to the supplied screenshots (596x1315). The frame's ratio is arbitrary in itself, so it
   follows the images rather than the images being cropped to follow it — at the previous 336/795
   the sides were being shaved by about 7% and amounts on the right of a ledger screen were being
   clipped. If the screenshots are ever replaced at a different ratio, change this to match and
   update the spec in includes/mobile.php. */
.mb-phone-frame{position:relative;width:100%;max-width:272px;aspect-ratio:596 / 1315;
  background:#0d0f13;border:7px solid #15181d;border-radius:38px;overflow:hidden;
  box-shadow:0 46px 70px -38px rgba(21,24,29,.62),0 0 0 1px rgba(21,24,29,.06)}

.mb-screen{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .42s ease;
  display:flex;align-items:flex-start;justify-content:center}
.mb-screen.on{opacity:1}
.mb-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* The caption under the phone cross-fades with the screen. Absolutely stacked so the line never
   reflows the column as the words change length. */
.mb-phone-cap{position:relative;margin-top:20px;min-height:38px;width:100%;max-width:272px}
/* The short-viewport shrink, placed here for the cascade reason noted above. The caption tracks
   the frame so the two stay the same width. */
@media(max-height:760px){
  .mb-phone-frame{max-width:248px}
  .mb-phone-cap{max-width:248px}
}
.mb-cap-l{position:absolute;inset:0;opacity:0;transition:opacity .42s ease;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);line-height:1.5}
.mb-cap-l.on{opacity:1}

/* What sits behind the glass: the two capabilities with nothing to photograph. They used to be
   drawn as schematic panels INSIDE the phone frame, captioned "Not on the phone" — two different
   things in one component, and it showed. A phone frame asserts that its contents are a phone
   screen; these are not, so the frame was lying and the caption was the patch.
   Wide and horizontal, so they cannot be mistaken for more of the list above. */
/* No border-top: the rule above the label came out 2026-10-22. The label already separates
   the band from the list, and its own trailing rule carries the horizontal line, so a second
   full-width line directly above it was drawing the same boundary twice. The spacing stays. */
/* Gap trimmed 2026-10-22. It measured 117px from the last row's tags to the label, and only
   one of its three parts was deliberate: 34px of padding-top that existed solely to clear the
   border-top removed in the edit above, 52px of margin, and 31px of slack inside the last row
   that grid-auto-rows:1fr leaves when the tallest row sets the height. The padding is gone and
   the margin is halved, leaving ~61px, with the row slack doing part of the separating. */
.mb-behind{margin-top:30px}
.mb-behind-h{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.mb-behind-h span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
/* A rule running off to the right: the section continuing, not a new one starting. */
.mb-behind-h::after{content:"";flex:1;height:1px;background:var(--line)}
.mb-behind-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}/* auto-fit, not a hardcoded 1fr 1fr: this band held two cards until 2026-10-22 and now holds
   three, and the count follows the offerings in the database rather than anything in the CSS. */
.mb-behind-c{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:26px 28px 24px}
/* Terms under the band, where a reader looks for them: smaller and muted, so it reads as a
   qualification of the cards rather than a fourth card. */
.mb-behind-note{margin:20px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted);text-wrap:pretty}
.mb-behind-c h3{font-size:18px;margin:0 0 9px;display:flex;align-items:center;gap:11px}
.mb-behind-c p{margin:0 0 14px;color:var(--ink-soft);font-size:15px;line-height:1.6}

/* The capability list. Rows read one at a time against the phone, so they are a list with a rule
   between them, not a grid of boxes — the flattening a grid would do is exactly what this section
   is trying to avoid. */
/* grid + grid-auto-rows:1fr makes every row the height of the tallest, which is what lets the
   phone give each screen an equal turn. Measured unequal before this: 190 / 216 / 189px,
   because a row's height follows how far its description happens to wrap — so the middle
   capability held the phone ~14% longer than its neighbours for no reason a reader could see.
   With the rows equal, one third of the list IS one row, and the screen swap in main.js lines
   up with the row boundaries exactly instead of approximately. */
.mb-cap-list{list-style:none;padding:0;margin:0;display:grid;grid-auto-rows:1fr}
.mb-cap{position:relative;padding:30px 0 30px 30px;border-bottom:1px solid var(--line);
  opacity:.82;transition:opacity .35s ease}
.mb-cap:first-child{padding-top:4px}
.mb-cap:last-child{border-bottom:0;padding-bottom:4px}
.mb-cap.on{opacity:1}
/* A DOT, NOT A NUMBER, since 2026-10-22. These were 01/02/03 off a CSS counter, and the owner's
   note was that numbering a list of three reads as "there are exactly three kinds of app", which
   is not true — the grouping is a cut by who uses the app, not a closed catalogue. A number also
   implies an order, and these are not a sequence.
   The marker still has to exist: it doubles as the active indicator, turning orange to show which
   row the phone is currently showing, so nothing else has to move. A dot does that job and claims
   nothing. The row's left padding drops from 54px to 30px with the digits gone. */
.mb-cap::before{content:"";position:absolute;left:1px;top:38px;width:8px;height:8px;
  border-radius:50%;background:var(--muted);opacity:.5;
  transition:background .35s ease,opacity .35s ease}
.mb-cap:first-child::before{top:12px}
.mb-cap.on::before{background:var(--orange);opacity:1}
.mb-cap h3{font-size:19px;margin:0 0 9px;display:flex;align-items:center;gap:11px}
.mb-cap p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:0 0 14px;max-width:56ch}
.mb-more{margin-top:48px}

/* No IntersectionObserver, or no JS at all: every row reads at full strength and the first screen
   shows. The interaction is an enhancement and the section has to be correct without it. */
.no-js .mb-cap,.mb-caps:not(.is-live) .mb-cap{opacity:1}

@media(prefers-reduced-motion:reduce){
  /* The swap is information, so it stays; only the fade goes. */
  .mb-screen,.mb-cap-l,.mb-cap,.mb-cap::before{transition:none}
}

/* Architecture: .bs-an runs blue -> blue-deep -> teal -> orange down its rows, and two rows here
   take a colour for what they SAY rather than where they sit. The release row carries this page's
   own accent because it is the page's argument — an app you cannot reach into — and the data row
   carries the purple that compliance work carries elsewhere on the site.

   So these selectors move whenever the rows are reordered. The release row went last on
   2026-10-22 (it was repeating the hero panel's closing step), which is why the accent is on
   :nth-child(4) and the purple on :nth-child(3) rather than the other way round. Rows one and two
   take the base blue and blue-deep untouched. The variable is --lc; .bs-an has no --kc. */
/* The handover note sits under .fs-inc, which is a baseline-aligned flex row, so the note needs
   its own full-width line rather than becoming another flex item beside the ticks. */
.mb-inc-note{flex:1 0 100%;margin-top:4px;font-size:13.5px;color:var(--muted);text-wrap:pretty}

/* The technology band carries 17 marks here, and .tech-band-g is `display:contents`, so all of
   them flow as one greedy row rather than wrapping group by group. At the full wrap width that
   packed 6 + 9 and left GitHub Actions alone on a third line, across 1180-1440 — not one awkward
   viewport but the whole desktop range. Capping the row rebalances it.

   **THIS NUMBER IS TUNED TO THE MARK COUNT. Re-probe it whenever a mark is added or a label
   changes length.** It was 880 at 16 marks (5 + 6 + 5); adding Python / FastAPI tipped that to a
   bottom-heavy 5 + 5 + 7, and 940 restores 5 + 6 + 6. Stable across 920-960. Probe by grouping
   .tech-band-i by rounded getBoundingClientRect().top at a few widths — reading the CSS tells you
   nothing, because the packing depends on the rendered width of every label.

   Page-scoped on purpose: .tech-band is shared by five other service pages, all of which already
   land a balanced last line on their own mark counts. Below ~940 the viewport is narrower than
   the cap, so this does nothing to the mobile layout. */
.mb-tech-band .tech-band-row{max-width:940px;margin-inline:auto}

/* No number chip on this page (see includes/mobile_arch.php), so the 72px column .bs-an-l keeps
   for it has to go too, or the copy sits indented past a number that is not there. */
.mb-arch-sec .bs-an-l{grid-template-columns:1fr}
.mb-arch-sec .bs-an-l:nth-child(3){--lc:#7a5af5}
.mb-arch-sec .bs-an-l:nth-child(4){--lc:#e0820c}

/* ---------------------------------------------------------------------------------------------
   Price: the two numbers. New component rather than .bs-eng, because .bs-eng is a row of
   alternatives you pick ONE of, and these two are not alternatives — you pay both. See
   includes/mobile_price.php.
   --------------------------------------------------------------------------------------------- */
/* Takes the tint, as the commercial section does on the full-stack, IoT and web-apps pages: the
   architecture section above already spent this page's mid-page tint drawing the edge of the
   borderless technology band, so without this the whole second half of the page runs white.
   NOTE: .mb-price-sec is also in the padding-restore selector near the top of this file. Removing
   it there leaves the next section's eyebrow hard against the tint boundary with no gap. */
section.block.mb-price-sec{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.mb-price{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.mb-price-c{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:22px;padding:34px 34px 30px;
  box-shadow:0 30px 56px -46px rgba(21,24,29,.4)}
/* A rule along the top in each column's own tone: the two are a pair, and the tone is the only
   thing distinguishing them, so it has to be the first thing read. */
.mb-price-c::before{content:"";position:absolute;left:34px;right:34px;top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--pc)}
.mb-once{--pc:var(--orange)}
.mb-year{--pc:#7a5af5}
.mb-price-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pc);margin-bottom:14px}
.mb-price-c h3{font-size:24px;margin:0 0 12px}
.mb-price-lead{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:0 0 24px}
.mb-price-drive{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);
  padding-top:18px;border-top:1px solid var(--line);margin-bottom:14px}
.mb-price-c ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.mb-price-c li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.mb-price-c li span{position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--pc);opacity:.75}

/* How the work is organised. A strip, not three cards: it is a real choice but a smaller question
   than the two numbers, and three large cards said the opposite. */
.mb-ways{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 30px 28px}
.mb-ways-h{display:block;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);
  margin-bottom:18px}
.mb-ways-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mb-way{padding-left:18px;border-left:2px solid var(--line)}
.mb-way-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.mb-way b{display:block;font-family:var(--display);font-size:15.5px;color:var(--ink);margin-bottom:5px}
.mb-way p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* Two client quotes side by side under the two case studies, paired by position. The only page
   showing two: it has exactly two case studies and both clients have words that say different
   things it needs said. Sized down from the full-width .fs-q treatment, because two quotes at
   display size would outweigh the work they are about. */
.mb-quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;align-items:stretch}
.mb-quotes .qcard.mb-q{display:flex;flex-direction:column;justify-content:center;margin:0;
  padding:38px 38px 32px;border:1px solid var(--line);border-radius:22px;background:var(--paper-2)}
.mb-quotes .qcard.mb-q blockquote{font-size:clamp(16.5px,1.5vw,19px);line-height:1.6}
.mb-quotes .qcard.mb-q figcaption{margin-top:24px}

@media(max-width:1080px){
  .mb-caps{gap:40px}
  .mb-phone-frame{max-width:236px}
}
@media(max-width:980px){
  .sdh-mb .sdh-grid{grid-template-columns:1fr}
  /* The phone stops sticking and leads the section instead. A sticky panel on a short viewport
     covers the thing it is there to annotate, and at one column it would scroll with the list
     anyway. */
  .mb-caps{grid-template-columns:1fr;gap:34px}
  .mb-phone-col{position:static}
  .mb-cap{opacity:1}
  .mb-cap.on::before{color:var(--muted)}
}
@media(max-width:860px){
  .mb-quotes{grid-template-columns:1fr;gap:18px}
  .mb-price{grid-template-columns:1fr}
  .mb-ways-row{grid-template-columns:1fr;gap:16px}
}
@media(max-width:860px){
  /* The middle rule becomes a horizontal one; the panel stays a single instrument. */
  .mb-sort-sides{grid-template-columns:1fr}
  .mb-side + .mb-side{border-left:0;border-top:1px solid var(--line)}
  .mb-verdict{grid-template-columns:1fr;gap:12px}
}
@media(max-width:860px){
  .mb-behind-row{grid-template-columns:1fr;gap:16px}
}
@media(max-width:680px){
  .mb-behind{margin-top:22px}
  .mb-behind-c{padding:22px 22px 20px}
  .mb-side{padding:26px 24px 24px}
  .mb-side-sigs{gap:16px 14px}
  .mb-side-sigs li{font-size:13.5px}
  .mb-verdict{padding:24px}
  .mb-price-c{padding:28px 24px 26px}
  .mb-price-c::before{left:24px;right:24px}
  .mb-ways{padding:22px 22px 24px}
  .mb-quotes .qcard.mb-q{padding:30px 24px 26px}
  .mb-phone-frame{max-width:214px}
}