/* ============================================================
   Reglonix Services Private Limited
   Design system, layout and theme definitions
   ============================================================ */

/* ---------- 1. Theme tokens ---------- */

/* --bg-head is the masthead ground (header + hero/page-head). It is a
   separate token from --bg-alt so the masthead can be tuned without
   moving the alternating body bands.
   Light themes set it a step DARKER than --bg-alt. Dark themes leave it
   equal to --bg-alt: their band sits above the page ground, so darkening
   it moves it toward the page and destroys the separation (measured:
   1.05-1.10 contrast now, 1.02-1.07 if darkened). */

:root{
  --f-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:"Literata","Iowan Old Style",Charter,Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --w-page:1240px;
  --w-text:68ch;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(20px,2.6vw,36px);
  --band:clamp(64px,9vw,132px);
  --radius:2px;
  --radius-lg:4px;

  /* Brand constant. The logo does not recolour with the theme. */
  --brand-red:#fa003f;

  --t-fast:140ms cubic-bezier(.4,0,.2,1);
  --t-base:280ms cubic-bezier(.4,0,.2,1);
  --t-slow:640ms cubic-bezier(.16,1,.3,1);
}

/* Theme 3 - Bureau (warm editorial light). The default.
   :root carries these tokens and must stay the FIRST theme block:
   :root and [data-theme="..."] have equal specificity, so a :root
   placed lower would override every theme block above it.
   A visitor with JavaScript disabled gets Bureau by this route. */
:root,
[data-theme="bureau"]{
  color-scheme:light;
  --bg:#f8f4ed;
  --bg-alt:#efe8db;
  --bg-head:#e7ddc9;
  --bg-elev:#fdfbf7;
  --bg-sunk:#e6ded0;
  --fg:#1b1712;
  --fg-muted:#5f574b;
  --fg-faint:#8d8375;
  --line:#ddd4c3;
  --line-strong:#c0b49d;
  --accent:#a6182f;
  --accent-hi:#83101f;
  --accent-fg:#fdfbf7;
  --accent-soft:rgba(166,24,47,.09);
  --inv-bg:#1b1712;
  --inv-bg-alt:#262019;
  --inv-fg:#f6f1e8;
  --inv-muted:#a49a89;
  --inv-line:rgba(246,241,232,.15);
  --shadow:0 1px 2px rgba(27,23,18,.07),0 12px 32px -12px rgba(27,23,18,.2);
  --grid-line:rgba(27,23,18,.06);
}

/* Theme 1 - Signal */
[data-theme="signal"]{
  color-scheme:light;
  --bg:#ffffff;
  --bg-alt:#f4f5f7;
  --bg-head:#e9ebef;
  --bg-elev:#ffffff;
  --bg-sunk:#eceef1;
  --fg:#0b0d10;
  --fg-muted:#565d68;
  --fg-faint:#8b929c;
  --line:#e0e3e8;
  --line-strong:#c3c8d0;
  --accent:#fa003f;
  --accent-hi:#d40036;
  --accent-fg:#ffffff;
  --accent-soft:rgba(250,0,63,.08);
  --inv-bg:#0b0d10;
  --inv-bg-alt:#15181d;
  --inv-fg:#f3f4f6;
  --inv-muted:#9aa1ac;
  --inv-line:rgba(255,255,255,.14);
  --shadow:0 1px 2px rgba(11,13,16,.06),0 12px 32px -12px rgba(11,13,16,.16);
  --grid-line:rgba(11,13,16,.05);
}

/* Theme 2 - Obsidian */
[data-theme="obsidian"]{
  color-scheme:dark;
  --bg:#08090b;
  --bg-alt:#101216;
  --bg-head:#101216;
  --bg-elev:#12151a;
  --bg-sunk:#050607;
  --fg:#f2f3f5;
  --fg-muted:#9fa6b0;
  --fg-faint:#6c737d;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.24);
  --accent:#ff1f55;
  --accent-hi:#ff5478;
  --accent-fg:#ffffff;
  --accent-soft:rgba(255,31,85,.13);
  --inv-bg:#f2f3f5;
  --inv-bg-alt:#e4e6ea;
  --inv-fg:#08090b;
  --inv-muted:#4d535c;
  --inv-line:rgba(0,0,0,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px -16px rgba(0,0,0,.8);
  --grid-line:rgba(255,255,255,.045);
}


/* Theme 4 - Meridian (institutional navy) */
[data-theme="meridian"]{
  color-scheme:dark;
  --bg:#091327;
  --bg-alt:#0e1d38;
  --bg-head:#0e1d38;
  --bg-elev:#11223f;
  --bg-sunk:#060d1c;
  --fg:#e9eef7;
  --fg-muted:#93a3bd;
  --fg-faint:#687893;
  --line:rgba(190,212,246,.14);
  --line-strong:rgba(190,212,246,.3);
  --accent:#e0b44c;
  --accent-hi:#f0c96e;
  --accent-fg:#091327;
  --accent-soft:rgba(224,180,76,.13);
  --inv-bg:#e9eef7;
  --inv-bg-alt:#d7e0ee;
  --inv-fg:#091327;
  --inv-muted:#4a5a75;
  --inv-line:rgba(9,19,39,.14);
  --shadow:0 1px 2px rgba(2,6,15,.5),0 16px 40px -16px rgba(2,6,15,.85);
  --grid-line:rgba(190,212,246,.055);
}

/* Theme 5 - Terminal (technical dark) */
[data-theme="terminal"]{
  color-scheme:dark;
  --bg:#06090a;
  --bg-alt:#0b1113;
  --bg-head:#0b1113;
  --bg-elev:#0d1517;
  --bg-sunk:#030506;
  --fg:#d9e7e2;
  --fg-muted:#7e948d;
  --fg-faint:#566761;
  --line:rgba(53,240,160,.14);
  --line-strong:rgba(53,240,160,.3);
  --accent:#35f0a0;
  --accent-hi:#6ff8bf;
  --accent-fg:#04120c;
  --accent-soft:rgba(53,240,160,.1);
  --inv-bg:#d9e7e2;
  --inv-bg-alt:#c4d6d0;
  --inv-fg:#06090a;
  --inv-muted:#42544e;
  --inv-line:rgba(6,9,10,.16);
  --shadow:0 1px 2px rgba(0,0,0,.6),0 16px 40px -16px rgba(0,0,0,.9);
  --grid-line:rgba(53,240,160,.05);
}

/* Theme 6 - Blueprint (technical blue) */
[data-theme="blueprint"]{
  color-scheme:dark;
  --bg:#0b1a2b;
  --bg-alt:#0f2338;
  --bg-head:#0f2338;
  --bg-elev:#122840;
  --bg-sunk:#07121e;
  --fg:#dde9f8;
  --fg-muted:#8fa9c6;
  --fg-faint:#63809e;
  --line:rgba(140,190,240,.16);
  --line-strong:rgba(140,190,240,.32);
  --accent:#4fc3f7;
  --accent-hi:#84d7fb;
  --accent-fg:#06131f;
  --accent-soft:rgba(79,195,247,.12);
  --inv-bg:#dde9f8;
  --inv-bg-alt:#cadcf1;
  --inv-fg:#0b1a2b;
  --inv-muted:#4a6480;
  --inv-line:rgba(11,26,43,.15);
  --shadow:0 1px 2px rgba(3,10,18,.5),0 16px 40px -16px rgba(3,10,18,.85);
  --grid-line:rgba(140,190,240,.07);
}

/* Theme 7 - Ivory (quiet light) */
[data-theme="ivory"]{
  color-scheme:light;
  --bg:#fbfbf9;
  --bg-alt:#f0f1ec;
  --bg-head:#e4e6df;
  --bg-elev:#ffffff;
  --bg-sunk:#e6e8e1;
  --fg:#13181a;
  --fg-muted:#535c5b;
  --fg-faint:#87908e;
  --line:#dfe2db;
  --line-strong:#bfc5bb;
  --accent:#0f6b57;
  --accent-hi:#0a4d3e;
  --accent-fg:#ffffff;
  --accent-soft:rgba(15,107,87,.09);
  --inv-bg:#13181a;
  --inv-bg-alt:#1e2426;
  --inv-fg:#f4f5f2;
  --inv-muted:#939b99;
  --inv-line:rgba(244,245,242,.14);
  --shadow:0 1px 2px rgba(19,24,26,.06),0 12px 32px -12px rgba(19,24,26,.16);
  --grid-line:rgba(19,24,26,.05);
}

/* Theme 8 - Foundry (neutral graphite) */
[data-theme="foundry"]{
  color-scheme:dark;
  --bg:#141619;
  --bg-alt:#1c1f24;
  --bg-head:#1c1f24;
  --bg-elev:#20242a;
  --bg-sunk:#0e1012;
  --fg:#e7e9ed;
  --fg-muted:#9ba2ad;
  --fg-faint:#6d747e;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.22);
  --accent:#ff8a3d;
  --accent-hi:#ffa76a;
  --accent-fg:#1a0e04;
  --accent-soft:rgba(255,138,61,.12);
  --inv-bg:#e7e9ed;
  --inv-bg-alt:#d6d9df;
  --inv-fg:#141619;
  --inv-muted:#4e555f;
  --inv-line:rgba(20,22,25,.14);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 16px 40px -16px rgba(0,0,0,.75);
  --grid-line:rgba(255,255,255,.04);
}

/* ---------- 2. Base ---------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--t-base),color var(--t-base);
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-fg)}

h1,h2,h3,h4,h5{
  font-family:var(--f-sans);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0;padding:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---------- 3. Layout ---------- */

.wrap{width:100%;max-width:var(--w-page);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:900px}
.band{padding-block:var(--band);position:relative}
.band-alt{background:var(--bg-alt)}
.band-tight{padding-block:clamp(44px,6vw,80px)}
.band-inv{background:var(--inv-bg);color:var(--inv-fg)}
.band-inv .muted,.band-inv .lede{color:var(--inv-muted)}
.band-inv hr,.band-inv .rule{border-color:var(--inv-line)}
.band-inv .card{background:var(--inv-bg-alt);border-color:var(--inv-line)}

.stack>*+*{margin-top:var(--s,20px)}
.stack-sm{--s:12px}
.stack-lg{--s:32px}

.grid{display:grid;gap:var(--gap)}
@media (min-width:700px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
.split{display:grid;gap:var(--gap);align-items:start}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:clamp(40px,6vw,96px)}
  .split-even{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-sticky>*:first-child{position:sticky;top:112px}
}

hr,.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- 4. Type ---------- */

.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-muted);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px;height:2px;
  background:var(--accent);
  flex:none;
}
.band-inv .eyebrow{color:var(--inv-muted)}

.display{font-size:clamp(2.6rem,7.4vw,5.6rem);letter-spacing:-.038em;line-height:.96}
.h1{font-size:clamp(2.1rem,5vw,3.7rem);letter-spacing:-.032em;line-height:1.02}
.h2{font-size:clamp(1.65rem,3.4vw,2.6rem);letter-spacing:-.026em}
.h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.018em}
.h4{font-size:1.05rem;letter-spacing:-.01em}

.lede{font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.55;color:var(--fg-muted);max-width:60ch}
.muted{color:var(--fg-muted)}
.faint{color:var(--fg-faint)}
.prose{max-width:var(--w-text)}
.prose p+p{margin-top:1.1em}
.small{font-size:.9rem}
.mono{font-family:var(--f-mono);font-size:.82em;letter-spacing:.04em}
.accent{color:var(--accent)}

/* ---------- 5. Brand ---------- */

.brand{display:inline-flex;align-items:center;gap:11px}
.brand-mark{width:30px;height:30px;flex:none;border-radius:var(--radius)}
.brand-word{
  font-family:var(--f-sans);
  font-weight:800;
  font-size:1.28rem;
  letter-spacing:-.045em;
  color:var(--fg);
  line-height:1;
}
.brand-word i{color:var(--brand-red);font-style:normal}
.band-inv .brand-word{color:var(--inv-fg)}

/* ---------- 6. Header ---------- */

.hdr{
  position:sticky;top:0;z-index:80;
  /* Sits on the same ground as the hero/page-head band below it, so the two
     read as one masthead. On scroll it lifts off onto --bg with a blur. */
  background:var(--bg-head);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base),background-color var(--t-base);
}
.hdr.is-stuck{
  border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
}
.hdr-in{display:flex;align-items:center;gap:20px;height:72px}
.hdr-nav{display:none;margin-left:auto;align-items:center;gap:2px}
@media (min-width:1080px){.hdr-nav{display:flex}}

.nav-a{
  position:relative;
  padding:9px 13px;
  font-size:.9rem;
  font-weight:500;
  color:var(--fg-muted);
  border-radius:var(--radius);
  transition:color var(--t-fast);
  white-space:nowrap;
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--f-text);
}
.nav-a:hover,.nav-a[aria-expanded="true"]{color:var(--fg)}
.nav-a.is-here{color:var(--fg)}
.nav-a.is-here::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;
  height:2px;background:var(--accent);
}
.nav-item{position:relative}
.nav-a.has-menu .caret{
  width:5px;height:5px;margin-left:7px;display:inline-block;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;
}

.menu{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(660px,86vw);
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:10px;
  display:grid;gap:4px;
  grid-template-columns:repeat(2,1fr);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.nav-item.is-open .menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu-a{display:block;padding:13px 14px;border-radius:var(--radius);transition:background-color var(--t-fast)}
.menu-a:hover{background:var(--bg-alt)}
.menu-a b{display:block;font-family:var(--f-sans);font-weight:600;font-size:.94rem;letter-spacing:-.012em}
.menu-a span{display:block;font-size:.8rem;color:var(--fg-muted);margin-top:3px;line-height:1.45}
.menu-a i{
  font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:5px;
}

.hdr-act{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:1080px){.hdr-act{margin-left:14px}}

.icon-btn{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;
  color:var(--fg-muted);
  transition:color var(--t-fast),border-color var(--t-fast),background-color var(--t-fast);
}
.icon-btn:hover{color:var(--fg);border-color:var(--line-strong);background:var(--bg-alt)}
.icon-btn svg{width:17px;height:17px}

/* ---------- 7. Theme picker ---------- */

.tp{position:relative}
.tp-panel{
  position:absolute;top:calc(100% + 8px);right:0;
  width:300px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
  z-index:90;
}
.tp.is-open .tp-panel{opacity:1;visibility:visible;transform:translateY(0)}
.tp-head{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:11px;
}
.tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.tp-opt{
  display:flex;align-items:center;gap:9px;
  padding:8px 9px;
  background:transparent;border:1px solid transparent;
  border-radius:var(--radius);cursor:pointer;text-align:left;
  font-size:.83rem;font-weight:500;color:var(--fg-muted);
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.tp-opt:hover{background:var(--bg-alt);color:var(--fg)}
.tp-opt[aria-checked="true"]{border-color:var(--line-strong);color:var(--fg);background:var(--bg-alt)}
.tp-sw{
  width:20px;height:20px;flex:none;border-radius:3px;
  border:1px solid rgba(128,128,128,.35);
  position:relative;overflow:hidden;
}
.tp-sw::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:40%;
}
.tp-note{
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--fg-faint);line-height:1.5;
}

/* ---------- 8. Mobile drawer ---------- */

.burger{display:grid}
@media (min-width:1080px){.burger{display:none}}
.drawer{
  position:fixed;inset:0;z-index:100;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform var(--t-base);
  overflow-y:auto;
}
.drawer.is-open{transform:translateY(0)}
.drawer-top{display:flex;align-items:center;height:72px;padding-inline:var(--pad);border-bottom:1px solid var(--line)}
.drawer-top .icon-btn{margin-left:auto}
.drawer-body{padding:24px var(--pad) 56px}
.drawer-sec+.drawer-sec{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.drawer-lbl{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:12px;
}
.drawer-a{
  display:block;padding:11px 0;
  font-family:var(--f-sans);font-weight:600;font-size:1.22rem;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.drawer-a:last-child{border-bottom:0}
.drawer-a small{display:block;font-family:var(--f-text);font-weight:400;font-size:.82rem;color:var(--fg-muted);letter-spacing:0;margin-top:2px}

/* ---------- 9. Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;
  font-family:var(--f-text);font-weight:600;font-size:.92rem;letter-spacing:-.008em;
  border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent);color:var(--accent-fg)}
.btn-solid:hover{background:var(--accent-hi)}
.btn-line{border-color:var(--line-strong);color:var(--fg)}
.btn-line:hover{border-color:var(--fg);background:var(--bg-alt)}
.band-inv .btn-line{border-color:var(--inv-line);color:var(--inv-fg)}
.band-inv .btn-line:hover{border-color:var(--inv-fg);background:var(--inv-bg-alt)}
.btn-ghost{color:var(--fg);padding-inline:0}
.btn-ghost:hover{color:var(--accent)}
.btn .arw{transition:transform var(--t-fast)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 10. Hero ---------- */

.hero{position:relative;overflow:hidden;padding-block:clamp(44px,7vw,96px) clamp(48px,7.5vw,96px);background:var(--bg-head);border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-grid{
  position:absolute;inset:-1px;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 68% at 62% 32%,#000 15%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 68% at 62% 32%,#000 15%,transparent 78%);
}
.hero-glow{
  position:absolute;top:-24%;right:-14%;
  width:min(760px,88vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,var(--accent-soft),transparent 66%);
  filter:blur(24px);
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.hero-in{position:relative;z-index:1}
.hero .display{max-width:16ch}
.hero-lede{margin-top:26px;font-size:clamp(1.1rem,1.9vw,1.44rem);line-height:1.5;color:var(--fg-muted);max-width:54ch}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:0;
  margin-top:clamp(44px,6vw,76px);
  border-top:1px solid var(--line);
  list-style:none;
}
.hero-meta li{
  flex:1 1 210px;padding:22px 26px;
  border-right:1px solid var(--line);
}
/* Symmetric gutters: every divider gets equal air on both sides. The outer
   edges stay flush so the strip lines up with the headline above it. */
.hero-meta li:first-child{padding-left:0}
.hero-meta li:last-child{border-right:0;padding-right:0}
.hero-meta b{
  display:block;
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.hero-meta strong{display:block;font-family:var(--f-sans);font-weight:600;font-size:1.02rem;letter-spacing:-.014em}
.hero-meta p{font-size:.84rem;color:var(--fg-muted);margin-top:5px;line-height:1.5}

/* ---------- 11. Cards ---------- */

.card{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,32px);
  transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base);
}
a.card:hover,.card-int:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.card-bar{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;transition:opacity var(--t-base)}
a.card:hover .card-bar{opacity:1}
.card .h3{margin-bottom:10px}
.card-no{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--accent);margin-bottom:16px;display:block;
}
.card-foot{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--f-sans);font-weight:600;font-size:.86rem;
  display:flex;align-items:center;gap:8px;
}

/* practice cards */
.prac{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media (min-width:920px){.prac{grid-template-columns:repeat(3,1fr)}}
.prac-a{
  background:var(--bg);
  padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;
  min-height:340px;
  transition:background-color var(--t-base);
}
.prac-a:hover{background:var(--bg-alt)}
.prac-a .idx{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent);
}
.prac-a .h2{margin:18px 0 12px;font-size:clamp(1.5rem,2.4vw,2rem)}
@media (min-width:920px){.prac-a .h2{min-height:2.16em}}
.prac-a .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;color:var(--fg-faint);margin-bottom:16px}
.prac-a p{color:var(--fg-muted);font-size:.95rem}
.prac-a ul{list-style:none;margin-top:20px;font-size:.87rem;color:var(--fg-muted)}
.prac-a ul li{padding:5px 0 5px 16px;position:relative}
.prac-a ul li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:1px;background:var(--accent)}
.prac-a .go{margin-top:auto;padding-top:24px;font-family:var(--f-sans);font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:8px}
.prac-a:hover .go{color:var(--accent)}

/* ---------- 12. Capability lists ---------- */

.cap-group+.cap-group{margin-top:clamp(44px,6vw,76px)}
.cap-head{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:2px solid var(--fg);margin-bottom:8px}
.cap-head .h2{flex:1}
.cap-head .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--fg-faint)}
.cap-intro{color:var(--fg-muted);margin:18px 0 26px;max-width:66ch}

.cap-list{list-style:none;display:grid;border-top:1px solid var(--line)}
@media (min-width:820px){
  .cap-list{grid-template-columns:repeat(2,1fr)}
  .cap-list li:nth-child(odd){border-right:1px solid var(--line)}
}
.cap-list li{padding:20px 22px;border-bottom:1px solid var(--line);transition:background-color var(--t-fast)}
.cap-list li:hover{background:var(--bg-alt)}
.cap-list h4{font-family:var(--f-sans);font-weight:600;font-size:1rem;letter-spacing:-.014em;margin-bottom:6px;display:flex;gap:10px;align-items:baseline}
.cap-list h4::before{content:"";width:6px;height:6px;flex:none;background:var(--accent);transform:translateY(-2px)}
.cap-list p{font-size:.9rem;color:var(--fg-muted);line-height:1.55;padding-left:16px}
.band-alt .cap-list li:hover{background:var(--bg)}

/* ---------- 13. Numbered process ---------- */

.steps{list-style:none;counter-reset:s;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps li{background:var(--bg);padding:28px 24px 32px;counter-increment:s;position:relative}
.steps li::before{
  content:"0" counter(s);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);
  display:block;margin-bottom:18px;
}
.steps h4{font-family:var(--f-sans);font-weight:600;font-size:1.08rem;letter-spacing:-.016em;margin-bottom:9px}
.steps p{font-size:.88rem;color:var(--fg-muted);line-height:1.55}
.band-inv .steps{background:var(--inv-line);border-color:var(--inv-line)}
.band-inv .steps li{background:var(--inv-bg)}
.band-inv .steps p{color:var(--inv-muted)}

/* ---------- 14. Stats ---------- */

.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media (min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{background:var(--bg);padding:30px 26px}
.stats b{display:block;font-family:var(--f-sans);font-weight:700;font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.04em;line-height:1}
.stats div>span{display:block;margin-top:10px;font-size:.86rem;color:var(--fg-muted);line-height:1.5}
.band-inv .stats{background:var(--inv-line);border-color:var(--inv-line)}
.band-inv .stats div{background:var(--inv-bg-alt)}
.band-inv .stats div>span{color:var(--inv-muted)}

/* ---------- 15. Accordion ---------- */

.acc{border-top:1px solid var(--line)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-t{
  width:100%;display:flex;align-items:flex-start;gap:18px;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-sans);font-weight:600;font-size:clamp(1.02rem,1.6vw,1.22rem);letter-spacing:-.018em;
  transition:color var(--t-fast);
}
.acc-t:hover{color:var(--accent)}
.acc-t .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--fg-faint);padding-top:6px;flex:none}
.acc-t .ico{margin-left:auto;flex:none;width:14px;height:14px;position:relative;margin-top:7px}
.acc-t .ico::before,.acc-t .ico::after{content:"";position:absolute;background:currentColor;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px}
.acc-t .ico::after{transform:rotate(90deg);transition:transform var(--t-base)}
.acc-i.is-open .acc-t .ico::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base)}
.acc-i.is-open .acc-p{grid-template-rows:1fr}
.acc-p>div{overflow:hidden}
.acc-body{padding:0 0 26px 34px;color:var(--fg-muted);max-width:74ch}
.acc-body p+p{margin-top:.9em}
.acc-body ul{list-style:none;margin-top:14px}
.acc-body ul li{padding:5px 0 5px 18px;position:relative;font-size:.93rem}
.acc-body ul li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--accent)}

/* ---------- 16. Index rows ---------- */

.rows{border-top:1px solid var(--line)}
.row{
  display:grid;gap:6px 28px;
  padding:26px 0;border-bottom:1px solid var(--line);
  transition:background-color var(--t-fast),padding-inline var(--t-base);
}
@media (min-width:860px){
  .row{grid-template-columns:52px minmax(0,4fr) minmax(0,7fr) auto;align-items:baseline}
}
a.row:hover{background:var(--bg-alt);padding-inline:14px}
.row .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--fg-faint)}
.row h3{font-family:var(--f-sans);font-weight:600;font-size:clamp(1.1rem,1.8vw,1.35rem);letter-spacing:-.02em}
.row p{color:var(--fg-muted);font-size:.92rem}
.row .arw{color:var(--fg-faint);transition:color var(--t-fast),transform var(--t-fast)}
a.row:hover .arw{color:var(--accent);transform:translateX(4px)}

/* ---------- 18. Statement / pull quote ---------- */

.stmt{
  font-family:var(--f-sans);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:-.028em;line-height:1.18;
  max-width:20ch;
}
.pull{
  border-left:2px solid var(--accent);padding-left:clamp(20px,3vw,34px);
  font-family:var(--f-sans);font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.6rem);letter-spacing:-.022em;line-height:1.34;
}
.sig{margin-top:26px;font-size:.88rem;color:var(--fg-muted)}
.sig b{display:block;font-family:var(--f-sans);font-weight:600;font-size:.98rem;color:var(--fg);letter-spacing:-.012em}
.band-inv .sig b{color:var(--inv-fg)}

/* ---------- 19. Insights ---------- */

.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:36px}
.chip{
  padding:8px 15px;font-size:.83rem;font-weight:500;
  border:1px solid var(--line);border-radius:100px;background:transparent;cursor:pointer;
  color:var(--fg-muted);transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.chip:hover{border-color:var(--line-strong);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.post{display:flex;flex-direction:column;height:100%}
.post .kicker{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.post h3{font-family:var(--f-sans);font-weight:600;font-size:1.14rem;letter-spacing:-.02em;line-height:1.28;margin-bottom:10px}
.post p{font-size:.9rem;color:var(--fg-muted);line-height:1.55}
.post .meta{margin-top:auto;padding-top:20px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--fg-faint);text-transform:uppercase}
.post.is-hidden{display:none}

/* ---------- 20. Forms ---------- */

.field{display:block;margin-bottom:18px}
.field>span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--t-fast);font-size:.95rem;font-family:var(--f-text);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form-note{font-size:.8rem;color:var(--fg-faint);line-height:1.55;margin-top:6px}
.form-msg{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-left:2px solid var(--accent);background:var(--bg-alt);font-size:.9rem;display:none}
.form-msg.is-on{display:block}

.contact-list{list-style:none}
.contact-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list b{display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:7px}
.contact-list span{display:block;font-size:1rem;line-height:1.6}
.contact-list a:hover{color:var(--accent)}

/* ---------- 21. CTA ---------- */

.cta{background:var(--inv-bg);color:var(--inv-fg);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--inv-line) 1px,transparent 1px),linear-gradient(90deg,var(--inv-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.4;
  mask-image:radial-gradient(ellipse 70% 90% at 88% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 88% 50%,#000,transparent 72%);
}
.cta .wrap{position:relative}
.cta .eyebrow{color:var(--inv-muted)}
.cta .lede{color:var(--inv-muted)}
.cta .btn-line{border-color:var(--inv-line);color:var(--inv-fg)}
.cta .btn-line:hover{border-color:var(--inv-fg);background:var(--inv-bg-alt)}

/* ---------- 22. Footer ---------- */

.ftr{background:var(--bg-alt);border-top:1px solid var(--line);padding-block:clamp(48px,7vw,80px) 32px}
.ftr-top{display:grid;gap:40px}
@media (min-width:900px){.ftr-top{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr))}}
.ftr-col h5{font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:16px}
.ftr-col ul{list-style:none}
.ftr-col li{margin-bottom:9px}
.ftr-col a{font-size:.9rem;color:var(--fg-muted);transition:color var(--t-fast)}
.ftr-col a:hover{color:var(--accent)}
.ftr-about p{font-size:.9rem;color:var(--fg-muted);margin-top:16px;max-width:38ch;line-height:1.6}
.ftr-addr{font-size:.86rem;color:var(--fg-muted);margin-top:20px;line-height:1.7;font-style:normal}
.ftr-bot{
  margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-size:.8rem;color:var(--fg-faint);
}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
.ftr-bot a:hover{color:var(--fg)}

/* ---------- 23. Page head ---------- */

.phead{padding-block:clamp(36px,4.5vw,64px) clamp(36px,5vw,60px);position:relative;overflow:hidden;background:var(--bg-head);border-bottom:1px solid var(--line)}
.phead::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 100%;
  mask-image:linear-gradient(180deg,#000,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
}
.phead .wrap{position:relative}
.crumb{display:flex;flex-wrap:wrap;gap:9px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:26px}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;opacity:.45}
.phead .h1{max-width:18ch}
.phead .lede{margin-top:22px}

/* ---------- 24. Reveal ---------- */

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- 25. Progress bar ---------- */

.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:200;width:0;transition:width 80ms linear}

/* ---------- 26. Utilities ---------- */

.sr{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:16px;top:-60px;z-index:300;padding:10px 18px;background:var(--accent);color:var(--accent-fg);font-weight:600;font-size:.88rem;transition:top var(--t-fast)}
.skip:focus{top:16px}
.no-scroll{overflow:hidden}
.tabular{font-variant-numeric:tabular-nums}