/* ============================================================================
   MAHMOODI TECH SOLUTIONS  ·  BRAND LAYER
   Positioning: Chicago-based AI-enabled managed IT + automation for 25–250
   seat companies, with an engineering bench in Hyderabad, India.
   Tone: enterprise-credible, precise, quietly expensive. A firm a CFO signs a
   three-year MSA with. Structured, data-forward, hairline rules, crisp tables.
   Nothing here forks core.css — it only sets tokens and adds what core lacks.
   ========================================================================== */

:root{
  --ink:#0b1220;
  --ink-2:#141d2e;
  --paper:#fbfcfd;
  --paper-2:#f0f3f7;
  --line:#dde3ea;
  --accent:#0e7490;
  --accent-soft:#22a2b8;
  --muted:#55606e;

  --font-display:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Semantic extras this brand needs */
  --ok:#0f766e;
  --warn:#b45309;
  --risk:#b02a2a;

  --header-h:78px;
}
@media (max-width:800px){:root{--header-h:64px}}

/* Newsreader sits well at 400/500; keep display type tight and institutional */
h1,h2,h3,h4,.display{font-weight:500;letter-spacing:-.021em}
h1{line-height:1.02}
body{font-weight:400}
strong,b{font-weight:600}

/* Inter's uppercase needs slightly less track than a geometric */
.eyebrow{letter-spacing:.18em;font-weight:600}
.btn{letter-spacing:.08em;font-weight:600;border-radius:var(--r-sm)}
.badge{letter-spacing:.1em}

/* Precise numerals everywhere numbers matter */
table,.tnum,.num,.stat__n,.tier__n,.gauge__n,.dim__pct{font-variant-numeric:tabular-nums}

/* ---------- DARK BANDS ----------------------------------------------------
   Remap the accent inside dark grounds so every accented element clears
   4.5:1 without a single inline colour override in the HTML.
------------------------------------------------------------------------- */
.on-dark{--accent:#3fb6cc;--accent-soft:#79d4e4;--muted:#9aa5b4}
.on-dark .btn:not(.btn--ghost):not(.btn--light):not(.btn--dark){--btn-bg:#3fb6cc;--btn-fg:#04202b}
.on-dark .card__icon{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.on-dark .table-wrap{border-color:var(--hairline)}
.on-dark th{background:color-mix(in srgb,#fff 5%,transparent)}

/* ---------- HEADER ---------- */
.header__in{border-bottom:0}
.brand{font-weight:600;font-family:var(--font-body);font-size:var(--step-1);letter-spacing:-.02em}
.brand span b{font-weight:600}
.brand small{letter-spacing:.2em;font-size:9px}
.header .btn--ghost{border-color:color-mix(in srgb,var(--fg) 22%,transparent)}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(3rem,7vw,6rem);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(64% 52% at 82% 6%,rgba(34,162,184,.20),transparent 64%),
    radial-gradient(52% 60% at 6% 96%,rgba(14,116,144,.16),transparent 62%),
    linear-gradient(172deg,#101a2c 0%,#0b1220 52%,#080e19 100%);
}
.hero__lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 82% 72% at 28% 40%,#000 10%,transparent 78%);
}
.hero__in{position:relative;z-index:2}
.hero__layout{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:1040px){.hero__layout{grid-template-columns:1.12fr .88fr}}
.hero h1{font-size:clamp(2.5rem,1.7rem + 3.7vw,4.5rem);margin-bottom:var(--s-md)}
.hero .lede{max-width:36rem}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-lg);
  margin-top:var(--s-xl);padding-top:var(--s-md);
  border-top:1px solid var(--hairline);
}
.hero__trust div{display:flex;align-items:center;gap:.55rem;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.hero__trust svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ---------- COVERAGE PANEL (the offshore model, stated up front) ---------- */
.panel{
  background:color-mix(in srgb,#fff 5%,transparent);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--hairline);
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
}
.panel__body{padding:clamp(1.1rem,3vw,1.6rem)}
.clocks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
.clock{background:color-mix(in srgb,var(--ink) 55%,transparent);padding:1rem 1.1rem}
.clock__city{font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:center;gap:.4em}
.clock__t{font-family:var(--font-display);font-size:var(--step-4);line-height:1.1;margin-top:.25rem;font-variant-numeric:tabular-nums;color:var(--fg)}
.clock__r{font-size:var(--step--2);color:var(--accent)}
.panel__rows{display:grid;gap:.85rem;margin-top:1.1rem}
.panel__row{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--step--1);line-height:1.5}
.panel__row svg{width:17px;height:17px;flex:none;color:var(--accent);margin-top:.28em}
.panel__row b{font-weight:600}
.panel__foot{
  border-top:1px solid var(--hairline);padding:.85rem 1.25rem;
  font-size:var(--step--2);color:var(--fg-muted);
}

/* ---------- SECTION HEADS ---------- */
.sec-head{max-width:54rem;margin-bottom:var(--s-2xl)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:var(--s-sm)}
.sec-head .lede{font-size:var(--step-0)}

/* ---------- PROOF STRIP ---------- */
.proof{border-block:1px solid var(--hairline);padding-block:var(--s-md);background:var(--paper-2)}
.proof .marquee__track>*{letter-spacing:.14em;font-size:var(--step--2);font-weight:500;color:var(--muted)}
.proof .marquee__track svg{width:15px;height:15px;color:var(--accent)}

/* ---------- SERVICE COLUMNS ---------- */
.svc{
  display:flex;flex-direction:column;height:100%;position:relative;
  padding:clamp(1.5rem,3vw,2.1rem);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--bg);
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid);
}
.svc::after{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width var(--t-slow) var(--ease-out);
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--accent) 38%,var(--hairline))}
.svc:hover::after{width:100%}
.svc__ico{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);flex:none;margin-bottom:var(--s-md)}
.svc__ico svg{width:21px;height:21px}
.svc__kicker{font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.5em}
.svc h3{font-size:var(--step-2);margin-bottom:.45em}
.svc>p{color:var(--fg-muted);font-size:var(--step--1);line-height:1.62}
.svc ul{list-style:none;padding:0;margin:var(--s-md) 0 0;display:grid;gap:.55rem;font-size:var(--step--1)}
.svc ul li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.svc ul svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:.35em}
.svc__from{
  margin-top:var(--s-md);padding-top:var(--s-sm);
  border-top:1px solid var(--hairline);
  font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
}
.svc__from b{font-family:var(--font-display);font-size:var(--step-1);color:var(--fg);letter-spacing:0;text-transform:none;display:block;margin-top:.2em;font-weight:500}

/* ==========================================================================
   THE AI-READINESS ASSESSMENT — the flagship funnel
   ========================================================================== */
.assess{--bg:#fff;--surface:#f4f7fa;--hairline:#dde3ea}
.assess.wizard{border-color:var(--line);box-shadow:var(--shadow-3)}
.assess__crown{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.35rem;background:var(--ink);color:var(--paper);
}
.assess__crown span{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.5em}
.assess__crown span svg{width:15px;height:15px;color:var(--accent-soft)}
.assess__crown b{color:#79d4e4;font-weight:500;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.assess .wizard__body{min-height:330px}
.assess .wizard__q{font-size:var(--step-2);font-weight:500}
.assess .choice-grid{grid-template-columns:1fr;gap:.55rem}
.assess .choice span{
  flex-direction:row;align-items:flex-start;text-align:left;gap:.75rem;
  padding:.95em 1.05em;font-weight:400;font-size:var(--step--1);
}
.assess .choice span i{
  flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--hairline);margin-top:.1em;
  display:grid;place-items:center;transition:all var(--t-fast) var(--ease-out);
}
.assess .choice input:checked+span i{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.assess .choice input:checked+span{font-weight:500}
.assess__dim{
  font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:.7em;
  display:flex;align-items:center;gap:.5em;
}
.assess__dim::after{content:"";flex:1;height:1px;background:var(--hairline)}

/* --- The result reveal --- */
.gauge{border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.gauge__top{display:flex;align-items:center;gap:clamp(1rem,3vw,1.6rem);padding:clamp(1.1rem,3vw,1.5rem)}
.gauge__n{
  font-family:var(--font-display);font-size:var(--step-7);line-height:.9;
  color:var(--accent);letter-spacing:-.03em;flex:none;font-weight:500;
}
.gauge__n small{font-family:var(--font-body);font-size:var(--step--1);color:var(--fg-muted);letter-spacing:.06em;font-weight:500}
.gauge__band{font-family:var(--font-display);font-size:var(--step-2);line-height:1.15;font-weight:500}
.gauge__sub{font-size:var(--step--1);color:var(--fg-muted);line-height:1.5;margin-top:.3em}
.gauge__track{position:relative;height:34px;border-top:1px solid var(--hairline);display:flex}
.gauge__zone{flex:1;position:relative;display:grid;place-items:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.gauge__zone+.gauge__zone{border-left:1px solid var(--hairline)}
.gauge__zone[data-on="1"]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:600}
.gauge__mark{
  position:absolute;top:-1px;bottom:0;width:2px;background:var(--ink);
  transition:left var(--t-slow) var(--ease-out);
}
.gauge__mark::before{
  content:"";position:absolute;top:-4px;left:50%;translate:-50% 0;
  width:9px;height:9px;background:var(--ink);
  clip-path:polygon(50% 100%,0 0,100% 0);
}

.dims{display:grid;gap:.7rem;margin-top:var(--s-md)}
.dim{display:grid;grid-template-columns:minmax(9rem,auto) 1fr auto;gap:.75rem;align-items:center;font-size:var(--step--2)}
.dim__l{color:var(--fg-muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.dim__bar{height:6px;border-radius:99px;background:var(--surface);overflow:hidden;border:1px solid var(--hairline)}
.dim__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));width:0;transition:width var(--t-slow) var(--ease-out)}
.dim__pct{font-weight:600;min-width:3.2em;text-align:right}
.dim[data-weak="1"] .dim__l{color:var(--risk)}
.dim[data-weak="1"] .dim__bar i{background:linear-gradient(90deg,#b02a2a,#d97b7b)}

.recs{list-style:none;padding:0;margin:var(--s-md) 0 0;display:grid;gap:.7rem}
.recs li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--step--1);line-height:1.55}
.recs li svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:.3em}
.gate{
  margin-top:var(--s-md);padding-top:var(--s-md);
  border-top:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ---------- PRICING TABLES ---------- */
.pricing td.num{color:var(--accent);font-family:var(--font-display);font-size:var(--step-1);font-weight:500;letter-spacing:-.01em}
.pricing tbody th{
  background:transparent;text-transform:none;letter-spacing:0;
  font-size:var(--step-0);color:var(--fg);font-weight:600;
}
.pricing tbody th small{display:block;font-weight:400;font-size:var(--step--2);color:var(--fg-muted);letter-spacing:0;text-transform:none;margin-top:.2em;max-width:26rem;line-height:1.45}
.pricing caption{caption-side:top;text-align:left;padding:1em 1.15em;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);font-weight:600;border-bottom:1px solid var(--hairline);background:var(--surface)}
.price-note{font-size:var(--step--2);color:var(--fg-muted);margin-top:.85rem;line-height:1.55}

.addons{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.addon{background:var(--bg);padding:1.15rem 1.25rem}
.addon__l{font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
.addon__n{font-family:var(--font-display);font-size:var(--step-2);color:var(--accent);margin-top:.25rem;font-weight:500}
.addon p{font-size:var(--step--2);color:var(--fg-muted);margin-top:.4rem;line-height:1.5}

/* ---------- THE AI DISCIPLINE PATH ---------- */
.bigstat{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:color-mix(in srgb,#fff 4%,transparent);
}
@media (min-width:820px){.bigstat{grid-template-columns:auto 1fr}}
.bigstat__n{font-family:var(--font-display);font-size:clamp(3.6rem,9vw,6.4rem);line-height:.88;color:var(--accent);letter-spacing:-.035em;font-weight:500}
.bigstat__src{font-size:var(--step--2);color:var(--fg-muted);margin-top:.6rem;letter-spacing:.1em;text-transform:uppercase}
.bigstat p{color:var(--fg-muted)}

.path{counter-reset:p;display:grid;gap:var(--s-lg);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:var(--s-2xl)}
.pstep{position:relative;padding-top:var(--s-lg);border-top:1px solid var(--hairline)}
.pstep::before{
  counter-increment:p;content:counter(p,decimal-leading-zero);
  position:absolute;top:.7rem;left:0;
  font-family:var(--font-body);font-size:var(--step--2);letter-spacing:.18em;color:var(--accent);font-weight:600;
}
.pstep h3{font-size:var(--step-2);margin:1.4rem 0 .45em}
.pstep p{color:var(--fg-muted);font-size:var(--step--1)}
.pstep__meta{margin-top:.8rem;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ---------- DELIVERY MODEL ---------- */
.model{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
@media (min-width:860px){.model{grid-template-columns:1fr 1fr}}
.model__col{background:var(--bg);padding:clamp(1.35rem,3vw,2rem)}
.model__where{display:flex;align-items:center;gap:.6rem;font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:600}
.model__col h3{font-size:var(--step-2);margin:.6rem 0 .5em}
.model__col ul{list-style:none;padding:0;display:grid;gap:.6rem;font-size:var(--step--1)}
.model__col li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.55}
.model__col li svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:.35em}
.model__hours{margin-top:var(--s-md);padding-top:var(--s-sm);border-top:1px solid var(--hairline);font-size:var(--step--2);color:var(--fg-muted);letter-spacing:.06em}

/* ---------- PLACEHOLDER SLOTS (client fills these) ---------- */
.slots{display:grid;gap:var(--s-md);grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.slot{
  border:1px dashed color-mix(in srgb,var(--fg) 26%,transparent);
  border-radius:var(--r-sm);
  min-height:88px;display:grid;place-items:center;text-align:center;
  padding:1rem .75rem;background:color-mix(in srgb,var(--fg) 3%,transparent);
}
.slot span{font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);line-height:1.45}
.slot--tall{min-height:190px;align-content:center;gap:.4rem}
.slot--tall b{display:block;font-size:var(--step--1);color:var(--fg);letter-spacing:.04em;text-transform:none;font-weight:600}
.pending{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn);font-weight:600;
}
.on-dark .pending{color:#e6b56a}
.pending::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- CONTACT WIZARD ---------- */
.contact-wiz{--bg:#fff;--surface:#f4f7fa;--hairline:#dde3ea;max-width:640px;margin-inline:auto}
.contact-wiz .wizard__body{min-height:250px}
.contact-wiz .choice-grid{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}

/* ---------- FINAL CTA ---------- */
.finale{position:relative;overflow:hidden}
.finale h2{font-size:var(--step-6);margin-bottom:var(--s-md)}

/* ---------- FOOTER ---------- */
.footer .brand{color:var(--fg)}
.footer address{font-style:normal;font-size:var(--step--1);color:var(--fg-muted);line-height:1.7}

/* ---------- SOURCE CITATION ---------- */
.src{font-family:var(--font-body);font-size:var(--step--2);color:var(--fg-muted);letter-spacing:.02em;font-weight:400}
cite{font-style:normal}

/* ---------- RESPONSIVE FINE-TUNING ---------- */
@media (max-width:1039px){
  .hero{padding-top:calc(var(--header-h) + var(--s-xl))}
}
@media (max-width:560px){
  .gauge__top{flex-direction:column;align-items:flex-start;gap:.75rem}
  .dim{grid-template-columns:1fr auto;gap:.4rem .75rem}
  .dim__bar{grid-column:1/-1;order:3}
  .clocks{grid-template-columns:1fr}
}

/* ---------- LEGAL / DOCUMENT PAGES --------------------------------------
   Added for /msa.html. The .doc scaffold in privacy.html, terms.html and
   accessibility.html sizes h1 and h2 only; the MSA summary is the first
   document page deep enough to need a third level. Without this, h3 inherits
   core's --step-3 and renders LARGER than the h2 above it, which reads as a
   broken hierarchy to both a sighted reader and a screen-reader user moving
   by heading level. Sized between h2 (--step-2) and body.
------------------------------------------------------------------------- */
.doc h3{font-size:var(--step-1);font-weight:600;margin:var(--s-lg) 0 var(--s-xs)}


/* ---------- HEADER OVER THE DARK HERO (added in QA) ----------
   The header is transparent until it sticks, so over the dark hero it must use
   paper ink; once stuck it gains a light ground and must invert back. The
   mobile drop panel always has a light ground, so its links stay dark in both
   states. */
.header{color:var(--paper)}
.header .brand small{color:rgba(251,252,253,.55)}
.header .nav>a{color:var(--paper)}
.header .btn--ghost{--fg:var(--paper);border-color:rgba(251,252,253,.34)}
.header .btn--ghost:hover{border-color:var(--paper);background:rgba(251,252,253,.09)}
.header .burger{color:var(--paper)}

.header.is-stuck{color:var(--ink)}
.header.is-stuck .brand small{color:var(--muted)}
.header.is-stuck .nav>a{color:var(--ink)}
.header.is-stuck .nav>a[aria-current="page"]{color:var(--accent)}
.header.is-stuck .btn--ghost{--fg:var(--ink);border-color:rgba(11,18,32,.26)}
.header.is-stuck .btn--ghost:hover{border-color:var(--ink);background:rgba(11,18,32,.05)}
.header.is-stuck .burger{color:var(--ink)}

@media (max-width:960px){
  .header .nav{background:var(--paper)}
  .header .nav>a,
  .header.is-stuck .nav>a{color:var(--ink)}
  .header .nav>a[aria-current="page"]{color:var(--accent)}
}

/* ---------- LUXURY PASS: photographic hero + bench figures ---------------
   Dawn over the Loop behind the navy atmosphere.
   Photo: Daniel Schwen, CC BY-SA 4.0, via Wikimedia Commons
   (File:Chicago sunrise 1.jpg) */
.hero{
  background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Chicago%20sunrise%201.jpg?width=1920");
  background-size:cover;background-position:center 45%;
}
.hero::before{
  background:
    radial-gradient(64% 52% at 82% 6%,rgba(34,162,184,.22),transparent 64%),
    radial-gradient(52% 60% at 6% 96%,rgba(14,116,144,.16),transparent 62%),
    linear-gradient(172deg,rgba(16,26,44,.94) 0%,rgba(11,18,32,.88) 52%,rgba(8,14,25,.94) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .hero{animation:mtsDrift 46s ease-in-out infinite alternate}
  @keyframes mtsDrift{from{background-position:center 43%}to{background-position:center 50%}}
}
@media (prefers-reduced-motion:reduce){.hero{animation:none}}

/* Bench strip — the craft and the two cities, photographed */
.bench{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr;margin-top:var(--s-xl)}
@media (min-width:760px){.bench{grid-template-columns:1fr 1fr}}
.benchfig{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--ink-2)}
.benchfig img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  filter:saturate(.85) contrast(1.03) brightness(.95);
  transition:filter var(--t-slow) var(--ease-out);
}
.benchfig:hover img{filter:none}
.benchfig figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.2rem 1rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(8,14,25,.88));
  font-size:var(--step--1);color:rgba(240,245,250,.9);
}
.benchfig .bench__credit{
  position:absolute;top:.5rem;right:.5rem;font-size:9px;color:rgba(255,255,255,.55);
  background:rgba(8,14,25,.55);padding:.35em .6em;border-radius:999px;text-decoration:none;
}
.benchfig .bench__credit:hover{color:#fff}