/* ============================================================
   Venzora IT Systems — Design System
   Direction: "Instrument panel"
   Ink navy base · azure signal · brass indices · hairline structure
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ink (dark surfaces) */
  --ink:        #0A1526;
  --ink-2:      #0F1E33;
  --ink-3:      #16283F;
  --ink-line:   #22354F;

  /* Paper (light surfaces) */
  --paper:      #FFFFFF;
  --paper-2:    #F4F6FA;
  --paper-3:    #EBEFF6;
  --line:       #DCE3EE;
  --line-soft:  #EDF0F6;

  /* Text */
  --text:       #0A1526;
  --slate:      #546682;
  --slate-2:    #5F6F88;
  --on-ink:     #EAF0FA;
  --on-ink-dim: #9AABC4;

  /* Signal */
  --azure:      #2A62F0;
  --azure-600:  #1B4FD8;
  --azure-300:  #6E9BFF;
  --azure-050:  #EEF3FF;
  --brass:      #D8A24A;
  --brass-deep: #8A6A20;
  --ok:         #12A47B;

  /* Type */
  --fd: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fm: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Metrics */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 1rem + 1.4vw, 2.5rem);
  --sect: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --ease: cubic-bezier(.4,.14,.3,1);
  --hdr-h: 76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 24px)}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--fb);font-size:1.0625rem;line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:2px}
.ink :focus-visible{outline-color:var(--azure-300)}
::selection{background:var(--azure);color:#fff}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--fd);font-weight:700;
  font-variation-settings:'wdth' 108;
  letter-spacing:-.028em;line-height:1.08;color:var(--text);
  text-wrap:balance;
}
.h-xl{font-size:clamp(2.6rem,1.15rem + 4.6vw,4.5rem);line-height:1.02;letter-spacing:-.038em}
.h-lg{font-size:clamp(2.05rem,1.25rem + 2.6vw,3.15rem);letter-spacing:-.032em}
.h-md{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem);letter-spacing:-.024em}
.h-sm{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);letter-spacing:-.018em;line-height:1.3}
.h-xs{font-size:1.0625rem;letter-spacing:-.012em;line-height:1.35;font-weight:600}

.thin{font-weight:400;font-variation-settings:'wdth' 100;color:var(--slate)}
.ink .thin{color:var(--on-ink-dim)}

.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.68;color:var(--slate)}
.ink .lead{color:var(--on-ink-dim)}
.prose p{color:var(--slate);margin-bottom:1.15rem}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--azure);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Mono utility label */
.eyebrow{
  font-family:var(--fm);font-size:.6875rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--slate-2);
  display:inline-flex;align-items:flex-start;gap:.6rem;line-height:1.5;
}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--brass);flex:none;margin-top:.28em}
.eyebrow.no-dot::before{display:none}
.ink .eyebrow{color:var(--on-ink-dim)}
.idx{font-family:var(--fm);font-size:.75rem;letter-spacing:.08em;color:var(--brass);font-weight:500}

/* ---------- 4. Layout ---------- */
.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--gutter) * 2),880px);margin-inline:auto}
.section{padding-block:var(--sect);position:relative}
.section--tight{padding-block:calc(var(--sect) * .62)}
.section--alt{background:var(--paper-2)}
.section--ink{background:var(--ink);color:var(--on-ink)}
.ink,.section--ink{color:var(--on-ink)}
.ink h1,.ink h2,.ink h3,.ink h4,
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink .lead,.section--ink .thin{color:var(--on-ink-dim)}
.section--ink .eyebrow{color:var(--on-ink-dim)}
.section--ink .arrow-link{color:var(--azure-300)}
.divider{height:1px;background:var(--line);border:0;margin:0}
.ink .divider,.divider--ink{background:var(--ink-line)}

.grid{display:grid;gap:clamp(1.25rem,.8rem + 1.4vw,2rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.split--top{align-items:start}
.split-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

/* Section head with mono index rail */
.sect-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,1.8rem + 2vw,4rem)}
.sect-head .eyebrow{margin-bottom:1.1rem}
.sect-head p{margin-top:0}
.sect-head--center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:720px;margin-inline:auto}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--azure);--fg:#fff;--bd:var(--azure);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.5rem;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:var(--r);
  font-family:var(--fb);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  text-align:center;
}
.btn:hover{--bg:var(--azure-600);--bd:var(--azure-600);transform:translateY(-1px)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{--bg:transparent;--fg:var(--text);--bd:var(--line)}
.btn--ghost:hover{--bg:var(--paper-2);--fg:var(--text);--bd:var(--slate-2)}
.btn--onink{--bg:transparent;--fg:#fff;--bd:var(--ink-line)}
.btn--onink:hover{--bg:rgba(255,255,255,.07);--bd:rgba(255,255,255,.4);--fg:#fff}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light:hover{--bg:var(--paper-3);--bd:var(--paper-3);--fg:var(--ink)}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

.arrow-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fm);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--azure);transition:gap .25s var(--ease);
}
.arrow-link svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.arrow-link:hover{gap:.75rem}
.arrow-link:hover svg{transform:translateX(2px)}
.ink .arrow-link{color:var(--azure-300)}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:120;height:var(--hdr-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
}
.hdr.is-stuck{background:rgba(10,21,38,.92);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--ink-line)}
.hdr__in{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto;display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--fd);font-weight:700;font-variation-settings:'wdth' 110;font-size:1.0625rem;letter-spacing:-.02em;color:#fff}
.brand__sub{font-family:var(--fm);font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--azure-300);margin-top:3px}

.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .8rem;font-size:.9375rem;font-weight:500;color:rgba(234,240,250,.82);
  border-radius:var(--r-sm);transition:color .2s var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:#fff}
.nav__link.is-active{color:#fff}
.nav__link.is-active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;background:var(--brass)}
.nav__link .chev{width:11px;height:11px;opacity:.6;transition:transform .25s var(--ease)}
.nav__item[data-open="true"] .chev{transform:rotate(180deg)}
.hdr__cta{margin-left:1rem;padding:.7rem 1.2rem;font-size:.875rem}

/* Mega menu */
.nav__item{position:relative}
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
  width:min(92vw,720px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px -20px rgba(10,21,38,.28);padding:1.35rem;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav__item[data-open="true"] .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem}
.mega__link{display:flex;gap:.85rem;padding:.7rem .75rem;border-radius:var(--r);transition:background .2s var(--ease)}
.mega__link:hover{background:var(--azure-050)}
.mega__ic{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:7px;color:var(--azure)}
.mega__link:hover .mega__ic{background:#fff;border-color:var(--azure-300)}
.mega__ic svg{width:17px;height:17px}
.mega__t{font-weight:600;font-size:.875rem;color:var(--text);line-height:1.35}
.mega__d{font-size:.78125rem;color:var(--slate-2);line-height:1.45;margin-top:2px}
.mega__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.mega__foot span{font-size:.8125rem;color:var(--slate)}

/* Mobile toggle + drawer */
.burger{display:none;margin-left:auto;width:42px;height:42px;background:transparent;border:1px solid var(--ink-line);border-radius:var(--r);cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:18px;height:1.5px;background:#fff;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20.5px}
.burger span:nth-child(3){top:26px}
body.nav-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--hdr-h) 0 0;z-index:110;background:var(--ink);
  padding:1.5rem var(--gutter) 2.5rem;overflow-y:auto;
  transform:translateX(100%);transition:transform .38s var(--ease);visibility:hidden;
}
body.nav-open .drawer{transform:none;visibility:visible}
.drawer a:not(.btn){display:block;padding:.85rem 0;font-family:var(--fd);font-size:1.25rem;font-weight:600;font-variation-settings:'wdth' 106;letter-spacing:-.02em;color:#fff;border-bottom:1px solid var(--ink-line)}
.drawer .sub a:not(.btn){font-family:var(--fb);font-size:.9375rem;font-weight:400;color:var(--on-ink-dim);padding:.55rem 0 .55rem 1rem;border-bottom:0}
.drawer .sub{margin:.25rem 0 .75rem;border-left:1px solid var(--ink-line)}
.drawer__label{font-family:var(--fm);font-size:.6875rem;letter-spacing:.17em;text-transform:uppercase;color:var(--slate-2);padding-top:1.75rem;display:block}
.drawer .btn{margin-top:1.5rem}

/* ---------- 7. Masthead (dark band under fixed header) ---------- */
.masthead{position:relative;background:var(--ink);color:var(--on-ink);padding-top:calc(var(--hdr-h) + clamp(3rem,2rem + 4vw,5.5rem));padding-bottom:clamp(3rem,2rem + 4vw,5.5rem);overflow:hidden}
.masthead::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.32;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,transparent 68%);
}
.masthead::after{
  content:"";position:absolute;width:820px;height:820px;right:-260px;top:-380px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.22) 0%,rgba(47,107,255,0) 66%);pointer-events:none;
}
.masthead > *{position:relative;z-index:1}
.masthead__in{max-width:820px}
.masthead h1{margin-bottom:1.1rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);margin-bottom:1.6rem}
.crumbs a{color:var(--on-ink-dim);transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs span[aria-current]{color:var(--brass)}
.crumbs .sep{opacity:.45}

/* ---------- 8. Hero (home) ---------- */
.hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding-top:calc(var(--hdr-h) + clamp(2.5rem,1.5rem + 4vw,4.75rem));padding-bottom:clamp(3rem,2rem + 4vw,5rem)}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.34;
  -webkit-mask-image:radial-gradient(110% 100% at 72% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(110% 100% at 72% 30%,#000 0%,transparent 72%);
}
.hero__glow{position:absolute;width:900px;height:900px;right:-220px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.26) 0%,rgba(47,107,255,0) 65%);pointer-events:none}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.hero h1{margin:1.4rem 0 1.35rem}
.hero h1 .em{color:var(--azure-300);position:relative;white-space:nowrap}
.hero h1 .em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;background:var(--brass);opacity:.9}
.hero__lead{max-width:34rem;margin-bottom:2rem}
.hero__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.1rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .85rem;border:1px solid var(--ink-line);border-radius:100px;font-family:var(--fm);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-ink-dim);background:rgba(255,255,255,.02)}
.pill svg{width:13px;height:13px;color:var(--ok)}
.hero__meta{display:flex;flex-wrap:wrap;gap:2.25rem;margin-top:2.75rem;padding-top:1.9rem;border-top:1px solid var(--ink-line)}
.hero__meta div{min-width:96px}
.hero__meta .n{font-family:var(--fd);font-size:1.75rem;font-weight:700;font-variation-settings:'wdth' 110;color:#fff;letter-spacing:-.03em;line-height:1}
.hero__meta .l{font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);margin-top:.5rem}

/* ---------- 9. Signature: topology diagram ---------- */
.topo{position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin-inline:auto}
.topo svg{width:100%;height:100%;overflow:visible}
.topo .wire{stroke:var(--ink-line);stroke-width:1.25;fill:none}
.topo .wire-lit{stroke:var(--azure);stroke-width:1.5;fill:none;stroke-dasharray:6 260;stroke-dashoffset:266;opacity:.9;animation:pulse 3.6s linear infinite}
.topo .ring{fill:none;stroke:var(--ink-line);stroke-width:1}
.topo .core{fill:var(--ink-2);stroke:var(--azure);stroke-width:1.25}
.topo .core-halo{fill:rgba(47,107,255,.09);stroke:none;animation:halo 4s ease-in-out infinite}
.topo .node-hit{fill:transparent;cursor:pointer}
.topo .node-box{fill:var(--ink-2);stroke:var(--ink-line);stroke-width:1;transition:stroke .28s var(--ease),fill .28s var(--ease)}
.topo .node-ic{color:var(--azure-300);transition:color .28s var(--ease)}
.topo .node-lb{font-family:var(--fm);font-size:8.4px;letter-spacing:.1em;text-transform:uppercase;fill:var(--on-ink-dim);transition:fill .28s var(--ease)}
.topo .node:hover .node-box,.topo .node:focus-visible .node-box{stroke:var(--azure);fill:#12233D}
.topo .node:hover .node-lb,.topo .node:focus-visible .node-lb{fill:#fff}
.topo .node:hover .node-ic,.topo .node:focus-visible .node-ic{color:#fff}
.topo .core-txt{font-family:var(--fd);font-weight:700;font-variation-settings:'wdth' 110;font-size:15px;letter-spacing:-.02em;fill:#fff;text-anchor:middle}
.topo .core-sub{font-family:var(--fm);font-size:7.4px;letter-spacing:.2em;fill:var(--azure-300);text-anchor:middle;text-transform:uppercase}
@keyframes pulse{to{stroke-dashoffset:0}}
@keyframes halo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.topo .core-halo{transform-origin:center;transform-box:fill-box}

/* ---------- 10. Logo band ---------- */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.logos div{background:var(--paper);display:grid;place-items:center;padding:1.6rem .75rem;min-height:96px}
.logos svg{height:22px;width:auto;color:var(--slate-2);opacity:.78;transition:color .3s var(--ease),opacity .3s var(--ease)}
.logos div:hover svg{color:var(--ink);opacity:1}

/* ---------- 11. Cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,1.1rem + 1vw,2rem);transition:border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);height:100%;display:flex;flex-direction:column}
a.card:hover,.card--hov:hover{border-color:var(--azure-300);transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(10,21,38,.4)}
.card__ic{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--azure);margin-bottom:1.4rem;flex:none;transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease)}
.card__ic svg{width:22px;height:22px}
a.card:hover .card__ic{background:var(--azure);border-color:var(--azure);color:#fff}
.card h3{margin-bottom:.6rem}
.card p{color:var(--slate);font-size:.9375rem;line-height:1.65}
.card__list{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line-soft);display:grid;gap:.5rem}
.card__list li{font-size:.875rem;color:var(--slate);display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.card__list li::before{content:"";width:5px;height:5px;background:var(--azure);border-radius:50%;margin-top:.55rem;flex:none}
.card__foot{margin-top:auto;padding-top:1.5rem}

.card--ink{background:var(--ink-2);border-color:var(--ink-line)}
.card--ink p{color:var(--on-ink-dim)}
.card--ink .card__ic{background:var(--ink-3);border-color:var(--ink-line);color:var(--azure-300)}
a.card--ink:hover{border-color:var(--azure)}

/* Feature list (why us) */
.feat{display:flex;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:0}
.feat__ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--azure-050);color:var(--azure)}
.ink .feat__ic{background:var(--ink-3);color:var(--azure-300)}
.ink .feat{border-bottom-color:var(--ink-line)}
.feat__ic svg{width:19px;height:19px}
.feat h4{margin-bottom:.3rem}
.feat p{font-size:.9375rem;color:var(--slate);line-height:1.6}
.ink .feat p{color:var(--on-ink-dim)}

/* ---------- 12. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats > div{background:var(--paper);padding:clamp(1.5rem,1.1rem + 1vw,2.1rem)}
.section--ink .stats,.ink .stats{background:var(--ink-line);border-color:var(--ink-line)}
.section--ink .stats > div,.ink .stats > div{background:var(--ink)}
.stat__n{font-family:var(--fd);font-weight:700;font-variation-settings:'wdth' 112;font-size:clamp(2.1rem,1.5rem + 1.8vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--text)}
.ink .stat__n,.section--ink .stat__n{color:#fff}
.stat__n .suffix{color:var(--azure)}
.ink .stat__n .suffix,.section--ink .stat__n .suffix{color:var(--azure-300)}
.stat__l{font-family:var(--fm);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);margin-top:.85rem;line-height:1.5}

/* ---------- 13. Process timeline ---------- */
.proc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.ink .proc,.section--ink .proc{border-top-color:var(--ink-line)}
.proc__step{position:relative;padding:2rem 2rem 2.25rem 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.ink .proc__step,.section--ink .proc__step{border-color:var(--ink-line)}
.proc__step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--brass);border-radius:50%}
.proc__step .idx{display:block;margin-bottom:1rem}
.proc__step h3{margin-bottom:.55rem}
.proc__step p{font-size:.9375rem;color:var(--slate);line-height:1.6}
.ink .proc__step p,.section--ink .proc__step p{color:var(--on-ink-dim)}
.proc__step:nth-child(3n){border-right:0;padding-right:0}
.proc__step:nth-child(3n+1){padding-left:0}
.proc__step:not(:nth-child(3n)):not(:nth-child(3n+1)){padding-left:2rem}
.proc__step:nth-child(3n+2){padding-left:2rem}

/* ---------- 14. Tabs (tech stack) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--ink-line);padding-bottom:1.25rem;margin-bottom:2.25rem}
.tab{padding:.6rem 1.05rem;border:1px solid transparent;border-radius:100px;background:transparent;cursor:pointer;font-family:var(--fm);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-dim);transition:all .25s var(--ease)}
.tab:hover{color:#fff;border-color:var(--ink-line)}
.tab[aria-selected="true"]{background:var(--azure);border-color:var(--azure);color:#fff}
.tabpanel[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.05rem;border:1px solid var(--ink-line);border-radius:var(--r);background:var(--ink-2);font-family:var(--fm);font-size:.8125rem;color:var(--on-ink);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.chip:hover{border-color:var(--azure);transform:translateY(-2px)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--azure-300);display:block}

/* ---------- 15. Case studies ---------- */
.case{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);height:100%;display:flex;flex-direction:column}
.case:hover{border-color:var(--azure-300);transform:translateY(-4px);box-shadow:0 22px 48px -30px rgba(10,21,38,.45)}
.case__img{aspect-ratio:16/10;background:var(--ink);position:relative;overflow:hidden}
.case__img svg{width:100%;height:100%}
.case__tag{position:absolute;top:1rem;left:1rem;font-family:var(--fm);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(10,21,38,.75);backdrop-filter:blur(6px);color:#fff;padding:.4rem .7rem;border-radius:4px;border:1px solid var(--ink-line)}
.case__body{padding:clamp(1.35rem,1rem + 1vw,1.85rem);display:flex;flex-direction:column;flex:1}
.case__body h3{margin-bottom:.6rem}
.case__body p{font-size:.9375rem;color:var(--slate);line-height:1.6}
.case__meta{display:flex;gap:1.75rem;margin:1.4rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line-soft)}
.case__meta dt{font-family:var(--fm);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);margin-bottom:.3rem}
.case__meta dd{margin:0;font-size:.875rem;font-weight:500;color:var(--text)}

/* ---------- 16. Testimonials ---------- */
.quotes{position:relative}
.quote{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);background:var(--paper);height:100%;display:flex;flex-direction:column}
.quote__stars{display:flex;gap:3px;color:var(--brass);margin-bottom:1.35rem}
.quote__stars svg{width:15px;height:15px}
.quote blockquote{font-family:var(--fd);font-weight:600;font-variation-settings:'wdth' 104;font-size:1.0625rem;line-height:1.55;letter-spacing:-.015em;color:var(--text);margin-bottom:1rem}
.quote p{font-size:.9375rem;color:var(--slate);line-height:1.65;flex:1}
.quote__by{display:flex;align-items:center;gap:.85rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.quote__av{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:.875rem;flex:none}
.quote__n{font-weight:600;font-size:.9375rem;line-height:1.3}
.quote__r{font-size:.8125rem;color:var(--slate-2);line-height:1.4}

/* ---------- 17. Accordion ---------- */
.acc__item{border-bottom:1px solid var(--line)}
.acc__item:first-child{border-top:1px solid var(--line)}
.acc__btn{width:100%;display:flex;align-items:flex-start;gap:1.25rem;padding:1.5rem 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--fd);font-weight:600;font-variation-settings:'wdth' 106;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);letter-spacing:-.018em;line-height:1.4;color:var(--text);transition:color .2s var(--ease)}
.acc__btn:hover{color:var(--azure)}
.acc__btn .q{font-family:var(--fm);font-size:.75rem;color:var(--brass);padding-top:.28rem;flex:none;font-weight:500}
.acc__sign{margin-left:auto;width:22px;height:22px;flex:none;position:relative;margin-top:.2rem}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:var(--slate);transition:transform .3s var(--ease),background .2s}
.acc__sign::before{top:10.5px;left:2px;width:18px;height:1.5px}
.acc__sign::after{left:10.25px;top:2px;height:18px;width:1.5px}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__sign::before,.acc__btn[aria-expanded="true"] .acc__sign::after{background:var(--azure)}
.acc__panel{overflow:hidden;height:0;transition:height .35s var(--ease)}
.acc__panel-in{padding:0 0 1.75rem 2.6rem;color:var(--slate);font-size:.9375rem;line-height:1.75;max-width:70ch}
.acc__panel-in ul{margin-top:.9rem;display:grid;gap:.4rem}
.acc__panel-in li{display:flex;gap:.65rem}
.acc__panel-in li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--azure);margin-top:.6rem;flex:none}

/* ---------- 18. CTA band ---------- */
.cta{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);background-size:64px 64px;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.cta__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center;padding-block:clamp(3.5rem,2.5rem + 4vw,6rem)}
.cta h2{margin-bottom:1rem}
.cta__contacts{display:grid;gap:1.25rem}
.cta__c{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1.25rem;border-bottom:1px solid var(--ink-line)}
.cta__c:last-child{border-bottom:0;padding-bottom:0}
.cta__c svg{width:19px;height:19px;color:var(--azure-300);flex:none;margin-top:.3rem}
.cta__c .l{font-family:var(--fm);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2)}
.cta__c .v{font-size:1rem;font-weight:500;color:#fff;margin-top:.25rem}
.cta__c a.v:hover{color:var(--azure-300)}

/* ---------- 19. Footer ---------- */
.ftr{background:var(--ink);color:var(--on-ink-dim);border-top:1px solid var(--ink-line);font-size:.9375rem}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,1rem + 3vw,3.5rem);padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
.ftr h4{font-family:var(--fm);font-size:.6875rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--slate-2);margin-bottom:1.35rem}
.ftr__links{display:grid;gap:.7rem}
.ftr__links a{color:var(--on-ink-dim);transition:color .2s var(--ease)}
.ftr__links a:hover{color:#fff}
.ftr__about p{margin:1.25rem 0 1.5rem;line-height:1.7;max-width:34ch;font-size:.9375rem}
.ftr__nl{display:flex;gap:.5rem;max-width:340px}
.ftr__nl input{flex:1;min-width:0;padding:.75rem .9rem;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r);color:#fff;font-size:.875rem}
.ftr__nl input::placeholder{color:var(--slate-2)}
.ftr__nl input:focus{border-color:var(--azure);outline:none}
.ftr__nl button{padding:.75rem 1.1rem;background:var(--azure);border:1px solid var(--azure);border-radius:var(--r);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .25s}
.ftr__nl button:hover{background:var(--azure-600)}
.ftr__bot{border-top:1px solid var(--ink-line);padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;font-size:.8125rem;color:var(--slate-2)}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:1.5rem;margin-left:auto}
.ftr__bot a:hover{color:#fff}
.socials{display:flex;gap:.5rem;margin-top:1.75rem}
.socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ink-line);border-radius:8px;color:var(--on-ink-dim);transition:all .25s var(--ease)}
.socials a:hover{background:var(--azure);border-color:var(--azure);color:#fff}
.socials svg{width:16px;height:16px}

/* ---------- 20. Forms ---------- */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.5rem}
.field label{font-family:var(--fm);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.field label .req{color:var(--azure)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-size:.9375rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 3px var(--azure-050)}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-2)}
.field .err{font-size:.8125rem;color:#D64545;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#D64545}
.field.is-invalid .err{display:block}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.check{display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-size:.875rem;transition:border-color .2s,background .2s}
.check:hover{border-color:var(--azure-300)}
.check input{width:16px;height:16px;accent-color:var(--azure);flex:none}
.check:has(input:checked){border-color:var(--azure);background:var(--azure-050)}
.form__note{font-size:.8125rem;color:var(--slate-2);line-height:1.6}
.form-ok{display:none;padding:1rem 1.15rem;border:1px solid var(--ok);background:#EAF7F3;border-radius:var(--r);color:#0B6B51;font-size:.9375rem;gap:.7rem;align-items:flex-start}
.form-ok.is-on{display:flex}
.form-ok svg{width:18px;height:18px;flex:none;margin-top:.15rem}

/* ---------- 21. Misc blocks ---------- */
.info-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,1.1rem + 1vw,2.15rem)}
.info-panel h3{margin-bottom:1.25rem}
.info-row{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-row svg{width:18px;height:18px;color:var(--azure);flex:none;margin-top:.25rem}
.info-row .l{font-family:var(--fm);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2)}
.info-row .v{font-size:.9375rem;font-weight:500;margin-top:.2rem;line-height:1.55}
.info-row a.v:hover{color:var(--azure)}

.job{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.job:first-child{border-top:1px solid var(--line)}
.job__t{flex:1;min-width:220px}
.job__t h3{margin-bottom:.35rem}
.job__t .d{font-size:.875rem;color:var(--slate)}
.job__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{font-family:var(--fm);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);border:1px solid var(--line);border-radius:100px;padding:.35rem .75rem;background:var(--paper)}
.tag--loc{color:var(--azure);border-color:#C9D8FF;background:var(--azure-050)}

.ind{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.4rem,1rem + 1vw,1.85rem);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);transition:border-color .28s var(--ease),transform .28s var(--ease)}
.ind:hover{border-color:var(--azure-300);transform:translateY(-3px)}
.ind__ic{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--azure-050);color:var(--azure)}
.ind__ic svg{width:21px;height:21px}
.ind p{font-size:.9375rem;color:var(--slate);line-height:1.6}

.post{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.post:hover{border-color:var(--azure-300);transform:translateY(-3px)}
.post__img{aspect-ratio:16/9;background:var(--ink)}
.post__img svg{width:100%;height:100%}
.post__b{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.post__m{font-family:var(--fm);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);margin-bottom:.85rem;display:flex;gap:.65rem;align-items:center}
.post__m .dot{width:3px;height:3px;border-radius:50%;background:var(--slate-2)}
.post__b h3{margin-bottom:.6rem}
.post__b p{font-size:.9375rem;color:var(--slate);line-height:1.6;flex:1}
.post__b .arrow-link{margin-top:1.35rem}

.team{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.team:hover{border-color:var(--azure-300);transform:translateY(-3px)}
.team__img{aspect-ratio:1/1;background:var(--paper-2);border-bottom:1px solid var(--line)}
.team__img svg{width:100%;height:100%}
.team__b{padding:1.25rem}
.team__b h3{font-size:1rem;margin-bottom:.2rem}
.team__b .role{font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azure)}

.marquee{overflow:hidden;border-block:1px solid var(--ink-line);padding-block:1.1rem;background:var(--ink-2)}
.marquee__t{display:flex;gap:3rem;width:max-content;animation:slide 34s linear infinite;font-family:var(--fm);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2)}
.marquee__t span{display:flex;gap:3rem;align-items:center}
.marquee__t i{color:var(--brass);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

.note-band{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 1.35rem;border:1px solid var(--line);border-left:3px solid var(--azure);border-radius:var(--r);background:var(--paper-2);font-size:.9375rem;color:var(--slate);line-height:1.65}
.note-band svg{width:18px;height:18px;color:var(--azure);flex:none;margin-top:.25rem}

.kv{display:grid;gap:0}
.kv__row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.kv__row:first-child{border-top:1px solid var(--line)}
.kv__k{font-family:var(--fm);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);padding-top:.2rem}
.kv__v{font-size:.9375rem;color:var(--text);font-weight:500}

.toc{position:sticky;top:calc(var(--hdr-h) + 2rem);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;background:var(--paper-2)}
.toc h4{font-family:var(--fm);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-2);margin-bottom:1rem}
.toc a:not(.btn){display:block;padding:.45rem 0;font-size:.875rem;color:var(--slate);border-left:2px solid var(--line);padding-left:.9rem;transition:all .2s}
.toc a:not(.btn):hover{color:var(--azure);border-left-color:var(--azure)}

/* ---------- 22. Reveal animation ---------- */
/* Hidden only when JS is confirmed present, so a failed script never
   leaves the page blank. The .js class is set by an inline head script. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ---------- 23. Responsive ---------- */
@media (max-width:1080px){
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .hero__in,.split,.split-5-7,.split-7-5,.cta__in{grid-template-columns:minmax(0,1fr)}
  .hero__in{gap:3rem}
  .topo{max-width:440px}
  .sect-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.25rem}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proc__step{padding-right:1.5rem!important;padding-left:0!important}
  .proc__step:nth-child(2n){border-right:0;padding-left:1.5rem!important;padding-right:0!important}
  .proc__step:nth-child(3n){border-right:1px solid var(--line)}
  .ink .proc__step:nth-child(3n),.section--ink .proc__step:nth-child(3n){border-right-color:var(--ink-line)}
  .proc__step:nth-child(2n){border-right:0}
}
@media (max-width:720px){
  :root{--hdr-h:66px}
  .g-2,.g-3,.g-4,.field-row,.checks,.mega__grid{grid-template-columns:minmax(0,1fr)}
  .stats,.proc{grid-template-columns:minmax(0,1fr)}
  .proc__step{border-right:0!important;padding-left:0!important;padding-right:0!important}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__top{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .ftr__bot nav{margin-left:0;gap:1rem}
  .kv__row{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .hero__meta{gap:1.5rem 2rem}
  .brand__sub{display:none}
  .case__meta{gap:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
@media print{.hdr,.drawer,.cta,.ftr__nl{display:none}body{color:#000}}

/* ---------- 24. Utilities added for markup hooks ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:50%;top:0;transform:translate(-50%,-120%);z-index:200;
  background:var(--azure);color:#fff;padding:.7rem 1.25rem;border-radius:0 0 var(--r) var(--r);
  font-size:.875rem;font-weight:600;transition:transform .2s var(--ease);
}
.skip:focus{transform:translate(-50%,0)}
.mega--sm{width:min(92vw,260px);padding:.6rem}
.mega--sm .mega__grid{grid-template-columns:minmax(0,1fr)}
.mega--sm .mega__link{padding:.6rem .75rem}
.hero__diagram{display:flex;justify-content:center}
@media (max-width:960px){.mega{display:none}}

/* ---------- 25. Hero type calibration ---------- */
/* The hero h1 sits in a half-width column, so it needs a tighter ceiling
   than the full-width .h-xl used on inner-page mastheads. */
.hero h1{font-size:clamp(2.3rem,1.35rem + 2.6vw,3.5rem);line-height:1.05;letter-spacing:-.035em}
.hero__lead{font-size:1.0625rem}
@media (min-width:961px){
  .hero__in{gap:clamp(2rem,1rem + 3vw,3.5rem)}
  .topo{max-width:520px}
}

/* ---------- 26. Narrow-screen refinements ---------- */
@media (max-width:520px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .job{align-items:flex-start}
  .job .btn{width:100%}
  .hero__pills{gap:.45rem}
  .quote__by{flex-wrap:wrap}
}

/* ---------- 27. Editorial art band ---------- */
.art-band{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:21/9;background:var(--ink);
}
.art-band svg{width:100%;height:100%;display:block}
.art-band--narrow{max-width:960px;margin-inline:auto}
@media (max-width:720px){.art-band{aspect-ratio:16/9}}

/* ---------- 28. Contrast corrections (WCAG AA) ---------- */
/* --slate-2 and --brass are tuned for light surfaces; dark surfaces
   restore the lighter values so both directions clear 4.5:1. */
.idx,.acc__btn .q{color:var(--brass-deep)}
.ink .idx,.section--ink .idx,
.ink .acc__btn .q,.section--ink .acc__btn .q{color:var(--brass)}

.ink .stat__l,.section--ink .stat__l,
.ink .case__meta dt,.ink .post__m,
.ink .kv__k,.ink .info-row .l,
.hero__meta .l,.crumbs,.drawer__label,
.ftr h4,.ftr__bot,.marquee__t,
.mega--sm .mega__d{color:var(--on-ink-dim)}
.ftr__nl input::placeholder{color:var(--on-ink-dim)}
.cta__c .l,.quote__stars{color:var(--on-ink-dim)}
.quote__stars{color:var(--brass)}
.crumbs span[aria-current]{color:var(--brass)}

/* Small uppercase link text needs more weight of colour than the brand azure. */
.arrow-link{color:var(--azure-600)}
.ink .arrow-link,.section--ink .arrow-link,.cta .arrow-link{color:var(--azure-300)}
.prose a{color:var(--azure-600)}