/* ══════════════════════════════════════════════════════════════
   SADANA INTERNATIONAL — SITE STYLESHEET
   Design System v1.1 · closed blue palette
   Thesis: the mark is a conduit. Things flow through Sadana.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── LIGHT SYSTEM ──
     Base is a faint cool off-white, not #FFFFFF. Pure white across a large
     screen is harsh and reads cheap; cards are white so they lift off it. */
  --paper:   #F7F9FC;
  --card:    #FFFFFF;
  --sunken:  #EEF2F8;
  --line:    #C8D3E3;
  --line-hi: #B9C7DC;

  /* ── Ink. Deep navy rather than black — ties back to the logo. ── */
  --ink:   #0A1526;
  --body:  #3D4C63;
  --muted: #5B6A82;
  --faint: #5B6A82;

  /* ── Signal blue = ACTIONABLE. Links and buttons. ── */
  --signal:      #2E66E0;   /* 4.9:1 on paper, fine as link text          */
  --signal-fill: #2E66E0;   /* white label reaches 5.1:1                  */
  --signal-dim:  #1F49A6;   /* hover: white reaches 8.2:1                 */
  --signal-glow: rgba(46,102,224,.22);

  /* ── Dark band tokens, used by .dark sections (hero, footer). ── */
  --navy:   #050A14;
  --navy-2: #0A1526;
  --navy-3: #101E33;
  /* Dark-band accents. No cyan: the three hero charges escalate by luminance
     within a single blue hue rather than shifting toward teal. */
  --flow:   #7FA9FF;
  --arc:    #E8F0FF;

  /* ── Families ── */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:   'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:   'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --arabic: 'IBM Plex Sans Arabic','Archivo',sans-serif;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --maxw:1320px;
  --chamfer:16px;
  --nav-h:82px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

/* ── Scoped dark band. Everything inside inherits the dark values, so the
   hero conduit and the footer keep working unchanged. ── */
.dark{
  --paper:   #050A14;
  --card:    #101E33;
  --sunken:  #0A1526;
  --line:    #1D3050;
  --line-hi: #2A4470;
  --ink:     #E6EDF9;
  --body:    #AFC0DC;
  --muted:   #7E92B4;
  --faint:   #6B7FAC;   /* 4.9:1 on navy — breadcrumbs are 10.5px mono */
  --signal:  #3D7BFF;
  background:var(--paper);
  color:var(--body);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-variation-settings:'wdth' 100,'wght' 400;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
::selection{background:var(--signal-fill); color:#fff}

/* ══ TYPE ══ */
h1,h2,h3,h4,h5{margin:0; font-family:var(--display); color:var(--ink); text-wrap:balance}
h1{font-size:clamp(1.7rem,2.8vw,2.5rem); font-variation-settings:'wdth' 118,'wght' 700; line-height:1.06; letter-spacing:-.024em}
h2{font-size:clamp(1.5rem,2.3vw,2.05rem); font-variation-settings:'wdth' 115,'wght' 700; line-height:1.16; letter-spacing:-.018em}
h3{font-size:1.18rem; font-variation-settings:'wdth' 108,'wght' 600; line-height:1.34; letter-spacing:-.008em}
h4{font-size:.98rem;  font-variation-settings:'wdth' 104,'wght' 600}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
a{color:var(--signal); text-decoration:none; transition:color .25s var(--ease)}
a:hover{color:var(--signal-dim)}
strong{color:var(--ink); font-variation-settings:'wdth' 104,'wght' 600}
.lead{font-size:1.11rem; line-height:1.62; color:var(--body); max-width:60ch}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--signal);
}
.label{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.mono{font-family:var(--mono); font-size:.82rem}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px}

/* ══ LAYOUT ══ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.sect{padding:clamp(60px,9vw,112px) 0}
.sect--line{border-top:1px solid var(--line)}
.sect--deep{background:var(--sunken)}
.sect-head{max-width:64ch; margin-bottom:var(--s8)}
.sect-head .eyebrow{display:block; margin-bottom:var(--s4)}
.sect-head h2{margin-bottom:var(--s4)}
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5)}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.stack>*+*{margin-top:var(--s5)}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ══ SKIP LINK ══ */
.skip{
  position:absolute; left:-9999px; top:8px; z-index:99;
  background:var(--signal-fill); color:#fff; padding:12px 18px;
  font-family:var(--mono); font-size:12px;
}
.skip:focus{left:16px}

/* ══ NAV ══ */
.nav{
  position:sticky; top:0; z-index:40; height:var(--nav-h);
  background:rgba(255,255,255,.88); border-bottom:1px solid var(--line);
}
@supports(backdrop-filter:blur(1px)){.nav{backdrop-filter:saturate(140%) blur(14px)}}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px);
  height:100%; display:flex; align-items:center; gap:var(--s6); min-width:0}
.nav-logo{display:flex; align-items:center; flex-shrink:0}
.nav-logo svg,.nav-logo img{height:40px; width:auto}
.nav-links{display:flex; align-items:center; gap:clamp(18px,2vw,30px); margin-left:auto; min-width:0}
.nav-links a{
  font-size:.88rem; color:var(--body); position:relative; padding:6px 0;
  font-variation-settings:'wdth' 102,'wght' 500;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--signal); transition:right .3s var(--ease);
}
.nav-links a:hover{color:var(--signal)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{right:0}
.nav-links a[aria-current]{color:var(--ink)}
.nav-links a{white-space:nowrap}
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line-hi);
  color:var(--ink); width:42px; height:42px; cursor:pointer; padding:0;
}
.nav-toggle svg{width:20px; height:20px; margin:auto; stroke:currentColor; fill:none; stroke-width:1.6}
@media(max-width:1140px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column;
    align-items:stretch; gap:0; background:var(--card);
    box-shadow:0 12px 30px -12px rgba(10,21,38,.25);
    border-bottom:1px solid var(--line); padding:var(--s4) clamp(20px,5vw,56px) var(--s6);
    margin:0; display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:var(--s4) 0; border-bottom:1px solid var(--line); font-size:1rem}
  .nav-links a::after{display:none}
  .nav-toggle{display:flex}
}

/* ══ BUTTONS ══ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-variation-settings:'wdth' 104,'wght' 600;
  font-size:.9rem; padding:15px 26px; border:0; cursor:pointer;
  color:#fff; background:var(--signal-fill);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{
  color:#fff; background:var(--signal-dim);
  box-shadow:0 0 0 1px var(--signal),0 10px 34px -8px var(--signal-glow);
  transform:translateY(-1px);
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;flex-shrink:0}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-hi)}
.btn--ghost:hover{background:transparent; color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); transform:translateY(-1px)}
.btn--sm{padding:11px 18px; font-size:.82rem}
.btn-row{display:flex; gap:var(--s3); flex-wrap:wrap}

/* ══ PANEL — chamfered rack-bezel geometry, no border-radius ══ */
.panel{
  position:relative; padding:1px; display:block;
  /* drop-shadow, not box-shadow: clip-path would crop a box-shadow. */
  filter:drop-shadow(0 1px 2px rgba(10,21,38,.06)) drop-shadow(0 8px 20px rgba(10,21,38,.05));
  background:linear-gradient(160deg,var(--line-hi),var(--line) 45%,var(--line));
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%);
  transition:background .5s var(--ease);
}
.panel__in{
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%);
  background:var(--card);
  padding:var(--s6); height:100%;
}
.panel:hover{background:linear-gradient(160deg,var(--signal),var(--line-hi) 45%,var(--line))}
a.panel{color:inherit}
a.panel h3{transition:color .3s var(--ease)}
a.panel:hover h3{color:var(--signal)}
.panel__ico{width:26px;height:26px;stroke:var(--signal);fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;margin-bottom:var(--s5)}
.panel__in h3{margin-bottom:var(--s3)}
.panel__in p{font-size:.94rem}
.panel__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--s5);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
a.panel:hover .panel__more{color:var(--signal)}
.panel__more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square}

/* ══ HERO ══ */
.hero{position:relative; overflow:hidden; padding:clamp(26px,3vw,48px) 0 clamp(24px,2.8vw,44px)}
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 78% 42%,rgba(61,123,255,.20),transparent 68%),
    radial-gradient(ellipse 44% 40% at 88% 68%,rgba(127,169,255,.10),transparent 72%),
    linear-gradient(178deg,#050A14,#0A1526 58%,#050A14);
}
.hero__grid{position:relative; z-index:1; display:grid;
  grid-template-columns:1.06fr .94fr; gap:clamp(24px,3.6vw,56px); align-items:center}
.hero__copy{max-width:none}
.hero__copy h1{max-width:24ch}
.hero__copy .eyebrow{display:block; margin-bottom:var(--s4)}
.hero__copy h1{margin-bottom:var(--s4)}
.hero__copy h1 em{font-style:normal; color:var(--signal)}
.hero__copy .lead{margin-bottom:var(--s5); max-width:46ch; font-size:.99rem}
.hero__copy .btn-row{margin-bottom:var(--s5)}
.creds{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.creds b{color:var(--muted); font-weight:500}

/* ── SIGNATURE: the mark as a live conduit ── */
.conduit{position:relative; aspect-ratio:1; width:100%; max-width:380px; margin-inline:auto}
.conduit__bloom{
  position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle,rgba(61,123,255,.20),rgba(34,211,238,.08) 42%,transparent 68%);
  filter:blur(28px); animation:breathe 20s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.62} 50%{transform:scale(1.06);opacity:1}}
.conduit svg{position:relative; width:100%; height:100%; overflow:visible}
.c-ghost {fill:var(--signal); opacity:.055}
.c-edge  {fill:none; stroke:var(--line-hi); stroke-width:1.1; opacity:.85}
.c-charge{fill:none; stroke-linecap:round}
.c-1{stroke:var(--signal); stroke-width:2.6; stroke-dasharray:52 948; filter:url(#glowBlue); animation:run 19s linear infinite}
.c-2{stroke:var(--flow);   stroke-width:1.8; stroke-dasharray:26 974; filter:url(#glowMid); animation:run 27s linear infinite -8s}
.c-3{stroke:var(--arc);    stroke-width:2.0; stroke-dasharray:16 984; filter:url(#glowArc);  animation:run 36s linear infinite -20s}
@keyframes run{from{stroke-dashoffset:1000} to{stroke-dashoffset:0}}
@media(max-width:1024px){
  .hero__grid{grid-template-columns:1fr; gap:var(--s6)}
  .conduit{max-width:300px; order:-1; margin-inline:0}
  .hero__copy h1{max-width:26ch}
}

/* ══ PAGE HEADER (interior pages) ══ */
.phead{position:relative; overflow:hidden; padding:clamp(48px,5vw,84px) 0 clamp(40px,4vw,64px)}
.phead__bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 120% at 86% 18%,rgba(61,123,255,.20),transparent 68%),
    radial-gradient(ellipse 40% 90% at 96% 84%,rgba(127,169,255,.10),transparent 72%),
    linear-gradient(170deg,#050A14,#0A1526 62%,#050A14);}
.phead__in{position:relative; z-index:1; max-width:none}
/* These blocks also carry .wrap, which sets margin:0 auto. Once max-width is
   narrowed, BOTH auto margins centre the box - so margin-left must be reset
   explicitly or the content drifts to the middle of the page. */
.phead__in,.cta__in{margin-left:0; margin-right:auto}
.phead .eyebrow{display:block; margin-bottom:var(--s3)}
.phead h1{margin-bottom:var(--s4); font-size:clamp(1.75rem,3.2vw,2.9rem); max-width:34ch}
.phead .lead{font-size:1.05rem; max-width:62ch}
.crumb{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-bottom:var(--s4)}
.crumb a{color:var(--muted)} .crumb span{margin:0 8px; color:var(--line-hi)}

/* ══ PROSE (article / long copy) ══ */
.prose{max-width:70ch}
.prose h2{font-size:1.5rem; margin:var(--s8) 0 var(--s4)}
.prose h3{font-size:1.12rem; margin:var(--s7) 0 var(--s3)}
.prose>:first-child{margin-top:0}
.prose p,.prose li{color:var(--body)}
.prose ul,.prose ol{margin:0 0 1em; padding-left:var(--s5)}
.prose li{margin-bottom:var(--s2)}
.prose li::marker{color:var(--signal)}
.prose blockquote{
  margin:var(--s6) 0; padding:var(--s5) var(--s6);
  border-left:2px solid var(--signal); background:var(--sunken);
  color:var(--ink); font-size:1.04rem;
}
.prose blockquote p{color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--line); margin:var(--s8) 0}

/* ══ CARD GRID — replaces every bullet list on the site ══ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.cards,.cards--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards,.cards--2,.cards--4{grid-template-columns:1fr}}
.card{
  padding:1px;
  filter:drop-shadow(0 1px 2px rgba(10,21,38,.05)) drop-shadow(0 6px 16px rgba(10,21,38,.04));
  background:linear-gradient(160deg,var(--line-hi),var(--line) 45%,var(--line));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:background .45s var(--ease);
}
.card__in{
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
  background:var(--card);
  padding:var(--s5); height:100%;
}
.card:hover{background:linear-gradient(160deg,var(--signal),var(--line-hi) 45%,var(--line))}
.card__in h4{margin-bottom:var(--s2); font-size:.99rem; color:var(--ink)}
.card__in p{font-size:.89rem; color:var(--muted); margin:0; line-height:1.6}
.card__step{
  display:block; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.18em; color:var(--signal); margin-bottom:var(--s3);
}
.card__ico{
  width:26px; height:26px; stroke:var(--signal); fill:none; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
}
.card__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--s5);
}
.card__idx{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; color:var(--faint);
}

/* ══ SECTOR TILES — icon and name only ══ */
.sectors{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
@media(max-width:820px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.sectors{grid-template-columns:1fr}}
.sector{
  padding:1px;
  filter:drop-shadow(0 1px 2px rgba(10,21,38,.05)) drop-shadow(0 6px 16px rgba(10,21,38,.04));
  background:linear-gradient(160deg,var(--line-hi),var(--line) 45%,var(--line));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:background .45s var(--ease);
}
.sector__in{
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
  background:var(--card);
  padding:var(--s5) var(--s5); height:100%;
  display:flex; align-items:center; gap:var(--s4); text-align:left;
}
.sector:hover{background:linear-gradient(160deg,var(--signal),var(--line-hi) 45%,var(--line))}
.sector svg{
  width:30px; height:30px; stroke:var(--signal); fill:none; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter; flex-shrink:0;
}
.sector span{
  font-size:.95rem; line-height:1.3; color:var(--ink);
  font-variation-settings:'wdth' 104,'wght' 600;
}

/* ══ SPEC TABLE ══ */
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-hi);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); font-weight:500}
.tbl td{padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); vertical-align:top}
.tbl td:first-child{font-family:var(--mono); font-size:.8rem; color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl-scroll{overflow-x:auto}

/* ══ VENDOR GRID (Technology Partners page) ══
   No cell backgrounds and no fake 1px-gap borders. The old technique painted a
   container background and let a 1px gap show through as hairlines — which also
   made every empty cell in a part-filled row render as a solid block. */
.vend{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:var(--s7) var(--s5); align-items:start;
}
.vend__i{
  display:flex; flex-direction:column; align-items:center; gap:var(--s4);
  padding:var(--s3) var(--s2); text-align:center;
}
.vend__logo{display:block; width:100%; color:var(--ink); transition:color .3s var(--ease)}
.vend__i:hover .vend__logo{color:var(--signal)}
/* A DEFINITE height, not auto. Combined with the intrinsic width/height the
   sanitizer writes onto each file, this resolves on every engine — iOS Safari
   collapses an SVG sized auto/auto when it has only a viewBox. max-width plus
   preserveAspectRatio keeps a wide wordmark from overflowing or distorting. */
.vend__logo svg{
  height:56px; width:auto; max-width:100%;
  display:block; margin-inline:auto;
}
.vend__name{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--muted); line-height:1.4; transition:color .3s var(--ease);
}
.vend__i:hover .vend__name{color:var(--ink)}
.vend__empty{
  grid-column:1/-1; padding:var(--s6);
  font-family:var(--mono); font-size:12px; color:var(--faint); text-align:center;
}
.vend__empty code{color:var(--signal)}
.vend-note{margin-top:var(--s6); font-size:12px; color:var(--faint)}
.vend-cat{margin-bottom:var(--s9)}
.vend-cat h3{margin-bottom:var(--s6)}

/* ══ LOGO MARQUEE (home) ══
   Continuous scroll. The track holds the set twice and shifts exactly -50%,
   so the loop is seamless. Pauses on hover, freezes under reduced motion. */
.marq{position:relative; overflow:hidden; padding:var(--s5) 0}
.marq::before,.marq::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(24px,8%,140px);
  z-index:2; pointer-events:none;
}
.marq::before{left:0;  background:linear-gradient(90deg,var(--paper),transparent)}
.marq::after {right:0; background:linear-gradient(270deg,var(--paper),transparent)}
.marq__track{
  display:flex; width:max-content; align-items:center;
  animation:marq 52s linear infinite;
}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marq__i{
  flex:0 0 auto; width:clamp(116px,15vw,210px); height:76px;
  display:flex; align-items:center; justify-content:center; padding:0 var(--s5);
}
.marq__i svg{
  height:46px; width:auto; max-width:100%; display:block;
  color:var(--ink); opacity:.72; transition:opacity .3s var(--ease),color .3s var(--ease);
}
.marq__i:hover svg{opacity:1; color:var(--signal)}
.marq__empty{
  padding:var(--s6); text-align:center;
  font-family:var(--mono); font-size:12px; color:var(--faint);
}
.marq__empty code{color:var(--signal)}
@media(prefers-reduced-motion:reduce){
  .marq__track{animation:none; flex-wrap:wrap; width:100%; justify-content:center}
}

/* ══ INSIGHT CARDS ══ */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.posts{grid-template-columns:1fr}}
.post__meta{display:flex; gap:var(--s4); align-items:center; margin-bottom:var(--s4);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.post__cat{color:var(--signal)} .post__date{color:var(--faint)}
.post__in{display:flex; flex-direction:column; height:100%}
.post__in p{flex:1}
/* ══ FORM ══ */
.field{margin-bottom:var(--s5)}
.field label{display:block; margin-bottom:var(--s2);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%; background:var(--card); color:var(--ink);
  border:1px solid var(--line-hi); padding:13px var(--s4);
  font-family:var(--sans);
  /* 16px minimum: iOS Safari zooms the viewport when a focused input is
     smaller than this, which throws the whole page off. */
  font-size:16px;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  transition:border-color .25s var(--ease);
}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-glow);
}
.field-note{font-size:12px; color:var(--faint); margin-top:var(--s2)}

/* ══ CONTACT BLOCKS ══ */
.cblock{margin-bottom:var(--s6)}
.cblock:last-child{margin-bottom:0}
.cblock .label{display:block; margin-bottom:var(--s2)}
.cblock p,.cblock a{font-size:.98rem}
.cblock address{font-style:normal; color:var(--body); font-size:.98rem}

/* ══ CTA STRIP ══ */
.cta{position:relative; overflow:hidden; padding:clamp(56px,8vw,96px) 0;
  border-top:1px solid var(--line)}
.cta__bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 120% at 50% 120%,rgba(46,102,224,.09),transparent 70%),var(--sunken)}
.cta__in{position:relative; z-index:1; max-width:62ch}
.cta h2{margin-bottom:var(--s4)}
.cta p{margin-bottom:var(--s6)}

/* ══ FOOTER ══ */
.foot{border-top:0;
  padding:var(--s9) 0 var(--s6)}
.foot__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s6);
  padding-bottom:var(--s8); border-bottom:1px solid var(--line)}
@media(max-width:940px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__top{grid-template-columns:1fr}}
.foot__brand svg,.foot__brand img{height:34px; width:auto; margin-bottom:var(--s5)}
.foot__brand p{font-size:.9rem; color:var(--muted); max-width:34ch}
.foot h5{font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal);
  margin-bottom:var(--s4)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:var(--s3)}
.foot li a{font-size:.9rem; color:var(--muted)}
.foot li a:hover{color:var(--ink)}
.foot__bar{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6);
  justify-content:space-between; padding-top:var(--s6);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint)}
.foot__bar a{color:var(--faint)} .foot__bar a:hover{color:var(--muted)}
.foot__legal{max-width:74ch; margin-top:var(--s5); font-size:11px;
  color:var(--faint); letter-spacing:.02em; line-height:1.7; font-family:var(--mono)}

/* ══ SCROLL REVEAL ══ */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ══ MOBILE REFINEMENTS ══ */
@media(max-width:760px){
  /* Wider window and tighter items so more than one logo is on screen. */
  .marq__i{width:clamp(112px,30vw,150px); height:64px; padding:0 var(--s4)}
  .marq__i svg{height:38px}
  /* 19 logos in a single column is an unreasonably long scroll. */
  .vend{grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s4)}
  .vend__logo svg{height:44px}
  .vend-cat{margin-bottom:var(--s8)}
  .vend-cat h3{margin-bottom:var(--s5)}
  /* Give the hero mark less of the fold on a phone. */
  .conduit{max-width:236px}
  .creds{font-size:10px; gap:var(--s2) var(--s4)}
  .crumb{margin-bottom:var(--s3)}
  .btn{width:100%; justify-content:center}
  .btn-row{flex-direction:column; align-items:stretch}
}
@media(max-width:420px){
  .vend{grid-template-columns:1fr}
  .marq__i{width:clamp(104px,34vw,140px)}
}
/* The collapsed menu is fixed-position, so it must scroll on short screens
   (landscape phones especially) or the last links become unreachable. */
@media(max-width:1140px){
  .nav-links{max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain}
}

/* ══ REDUCED MOTION ══ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
  .c-charge{opacity:.5; stroke-dasharray:none}
  .rv{opacity:1; transform:none}
}

/* ══ PRINT ══ */
@media print{
  .nav,.conduit,.cta,.foot__top{display:none}
  body{background:#fff; color:#111}
  h1,h2,h3,h4{color:#000}
  .panel{background:none;padding:0;clip-path:none}
  .panel__in{background:none;clip-path:none;border:1px solid #ccc}
}