/* ============================================================================
   ForceSec — LIGHT / EDITORIAL design language (redesign per client reference)
   Near-white ground, Space Mono display + Inter body, borderless flowing
   sections, B&W editorial photography, orange as a sparing accent only.
   This stylesheet is authored to port directly into the WP theme.
   ==========================================================================*/

/* ---------- fonts ---------- */
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ground:#F8F6F7;          /* page ground */
  --surface:#FFFFFF;         /* raised surface (rare) */
  --ink:#141414;             /* headings / primary text */
  --ink-2:#2B2A2A;           /* strong body */
  --muted:#5C5B5B;           /* body / meta */
  --muted-2:#8A8A8A;         /* faint grey — LARGE display de-emphasis only (3:1 ok) */
  --meta:#6E6E6E;            /* AA-safe faint meta for small text (<=16px, ~4.6:1) */
  --line:rgba(20,20,20,.12); /* hairlines */
  --line-2:rgba(20,20,20,.08);
  --line-strong:rgba(20,20,20,.22); /* firmer edge for small chips/pills */
  --band:#F1EEEF;            /* whisper vendor band (dissolved into ground) */
  --accent:#F05D0E;          /* sparing orange pop — lives inside imagery */
  --accent-ink:#A8480A;      /* AA-safe orange for text on light */
  --wash-a:#DFB694;          /* warm photo wash */
  --wash-b:#E4C8B2;

  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* modular display scale — one system reused on every page */
  --d1:clamp(38px,6.1vw,88px);   /* hero + page hero */
  --d2:clamp(30px,4.4vw,60px);   /* section heads, panels, footer, CTA */
  --d3:clamp(24px,3vw,34px);     /* article h2 / sub-heads */
  --d4:clamp(20px,2.2vw,28px);   /* card / row sub-heads */
  --track-label:.14em;           /* uppercase mono micro-labels */
  --track-tag:.06em;             /* chips / tags */
  --r-lg:20px; --r-md:14px;      /* editorial image radii */

  --max:1360px;
  --gut:clamp(20px,5vw,72px);
  --sec:clamp(72px,9vw,140px);   /* section vertical rhythm */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip (not hidden) prevents horizontal scroll from the 100vw full-bleed
   panels WITHOUT creating a scroll container — which is what breaks position:sticky */
html{-webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  overflow-x:hidden; overflow-x:clip; max-width:100%; counter-reset:sec;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* real 700 face only — never faux-bold Space Mono (source of the ghosted stroke) */
.display,.hero__title,.phero__title,.head__title,.panel__title,.blog__head h2,
.ft__big,.ctaband__in h2,.stat__n,.vitem__name,.drow__t,.fcard__t,.sitem h3,
.hd__menu__lead,.article h2,.article h3{
  font-synthesis:none; -webkit-text-stroke:0; text-shadow:none;
}
/* balance multi-line display headings so they never wrap to a ragged word-per-line stack */
.head__title,.panel__title,.blog__head h2,.ctaband__in h2,.ft__big,.drow__t,.fcard__t{ text-wrap:balance }
main{ display:block }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
/* skip link + a single quiet focus system (ink, never accent orange) */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ position:fixed; left:16px; top:12px; width:auto; height:auto; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:100px; font-family:var(--sans); font-size:14px }
:where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px }

/* ---------- preloader: dark ground, per-letter shimmer wave → curtain-up reveal ---------- */
#fl-preload{ display:none }
html.js #fl-preload{ display:flex; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center;
  background:var(--ground); will-change:transform; animation:flPreHide 0s linear 10s forwards }
.fl-pre__mark{ display:flex; align-items:baseline; font-family:var(--mono); font-weight:700;
  font-size:clamp(32px,7vw,68px); letter-spacing:-.02em; color:var(--ink) }
.fl-pre__mark span{ display:inline-block }
.fl-pre__dot{ color:var(--accent); margin-left:3px; font-weight:700 }
@keyframes flPreHide{ to{ opacity:0; visibility:hidden; pointer-events:none } }   /* JS-failure safety */
@media(prefers-reduced-motion:reduce){ html.js #fl-preload{ display:none } }
::selection{background:rgba(20,20,20,.14); color:var(--ink)}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center;
  gap:10px; white-space:normal;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--ink); opacity:.5; flex:0 0 auto}
.display{
  font-family:var(--mono); font-weight:400; color:var(--ink);
  letter-spacing:-.02em; line-height:1.08; margin:0;
}
.arrow{ font-family:var(--mono); font-weight:700; }

/* section header: left mono heading + right body + ↗ (the recurring pattern) */
.head{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,5vw,80px); align-items:end; counter-increment:sec;
}
.head__title{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em;
  font-size:var(--d2); line-height:1.08; margin:0; }
/* quiet running index — editorial structure without a colored band */
.head__title::before{ content:"0" counter(sec); display:block; font-family:var(--mono);
  font-size:13px; font-weight:400; letter-spacing:var(--track-label); color:var(--meta); margin-bottom:16px }
.head__aside{ position:relative; padding-bottom:6px }
.head__aside p{ margin:0; color:var(--muted); font-size:clamp(15px,1.25vw,17px); max-width:46ch }
.head__arrow{ position:absolute; top:2px; right:0; font-family:var(--mono); font-size:26px; color:var(--ink) }
@media(max-width:820px){ .head{grid-template-columns:1fr; gap:20px; align-items:start} .head__arrow{display:none} }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-size:14px; font-weight:500; padding:14px 26px; border-radius:100px; transition:.35s var(--ease); }
.btn--solid{ background:var(--ink); color:#fff; border:1px solid var(--ink) }
.btn--solid:hover{ background:#000; transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line) }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px) }

/* ============================ HEADER ============================ */
.hd{ position:sticky; top:0; z-index:50; background:rgba(248,246,247,.82);
  backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line-2);
  transition:box-shadow .35s var(--ease), background .35s var(--ease) }
.hd__in{ max-width:var(--max); margin-inline:auto; padding:16px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .35s var(--ease) }
.hd--scrolled{ background:rgba(248,246,247,.92); box-shadow:0 10px 34px -24px rgba(20,20,20,.4) }
.hd--scrolled .hd__in{ padding-top:11px; padding-bottom:11px }
.hd__logo img{ height:22px; width:auto }
.hd__nav{ display:flex; gap:clamp(12px,1.7vw,28px); align-items:center }
.hd__item{ position:relative }
.hd__link{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:14px;
  color:var(--ink-2); position:relative; padding:20px 0 }
.hd__link:hover{ color:var(--ink) }
.hd__link::after{ content:""; position:absolute; left:0; bottom:14px; width:0; height:1px; background:var(--ink); transition:width .3s var(--ease) }
.hd__item:hover .hd__link::after,.hd__link[aria-current="page"]::after{ width:100% }
.hd__link[aria-current="page"]{ color:var(--ink) }
.hd__caret{ opacity:.65; transition:transform .25s var(--ease) }
.hd__item:hover .hd__caret,.hd__item:focus-within .hd__caret{ transform:rotate(180deg); opacity:1 }
/* dropdown panels */
.hd__sub{ position:absolute; top:calc(100% - 8px); left:0; min-width:214px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px;
  display:flex; flex-direction:column; gap:2px; box-shadow:0 26px 54px -26px rgba(20,20,20,.32);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:60 }
.hd__item:hover .hd__sub,.hd__item:focus-within .hd__sub{ opacity:1; visibility:visible; transform:translateY(0) }
.hd__sub a{ display:block; padding:9px 14px; font-family:var(--sans); font-size:13.5px; color:var(--ink-2); border-radius:9px; white-space:nowrap }
.hd__sub a:hover{ background:var(--band); color:var(--ink) }
.hd__sub--wide{ display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; min-width:376px }
.hd__search{ width:44px; height:44px; border-radius:100px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); background:transparent; flex:0 0 auto }
.hd__search:hover{ border-color:var(--ink) }
.hd__burger{ display:none; margin-left:4px }
/* burger at <=1024 so touch tablets (iPad portrait/landscape) get the collapsible menu.
   With the nav hidden, space-between would strand the search icon in the middle — so push
   search + burger together into a tidy pair on the right, logo alone on the left. */
@media(max-width:1024px){
  .hd__nav{display:none}
  .hd__burger{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:100px; background:transparent; color:var(--ink); margin-left:0}
  .hd__in{ gap:10px }
  .hd__search{ margin-left:auto }
}

/* full-screen mobile menu overlay */
.hd__menu{ position:fixed; inset:0; z-index:80; background:var(--ground);
  padding:clamp(22px,7vw,48px); display:flex; flex-direction:column; }
.hd__menu[hidden]{ display:none }
.hd__menu__x{ align-self:flex-end; position:sticky; top:0; width:44px; height:44px; border:1px solid var(--line); border-radius:100px;
  background:var(--ground); color:var(--ink); font-size:22px; line-height:1; display:grid; place-items:center }
.hd__menu{ overflow-y:auto }
.hd__menu__nav{ margin:3vh 0 auto; display:flex; flex-direction:column; gap:2px }
.hd__menu__lead{ font-family:var(--mono); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.35rem,5.6vw,2rem); line-height:1.25; color:var(--ink); padding:9px 0; display:block }
.hd__menu__lead[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px }
/* collapsible groups (About / Vendors / Events) */
.hd__m-group{ border:0 }
.hd__m-group > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-weight:400; letter-spacing:-.01em; font-size:clamp(1.35rem,5.6vw,2rem);
  line-height:1.25; color:var(--ink); padding:9px 0 }
.hd__m-group > summary::-webkit-details-marker{ display:none }
.hd__m-group > summary::after{ content:"+"; font-family:var(--mono); font-weight:400; font-size:1.4rem; color:var(--meta) }
.hd__m-group[open] > summary::after{ content:"\2013" }
.hd__menu__sub{ display:flex; flex-direction:column; gap:0; margin:2px 0 12px; padding-left:2px }
.hd__menu__sub a{ font-family:var(--sans); font-size:15px; line-height:1.2; color:var(--muted); padding:10px 0; display:block }
.hd__menu__sub a:hover{ color:var(--ink) }
.hd__menu__foot{ padding-top:20px; font-family:var(--mono); font-size:12px; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--meta) }

/* ============================ HERO ============================ */
.hero{ position:relative; padding-top:clamp(18px,3vh,44px); padding-bottom:0; overflow:hidden }
/* size the hero to the space BELOW the sticky header so the figure is never cut on
   short laptop screens: min-height + figure height both subtract the header+padding,
   and cap so the hero never grows absurdly tall on large monitors */
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:clamp(24px,4vw,56px); align-items:end;
  min-height:clamp(560px,82vh,840px);
  min-height:min(840px, calc(100vh - 140px)) }
.hero__copy{ align-self:center; padding-bottom:clamp(20px,3.5vw,52px) }
.hero__eyebrow{ margin-bottom:22px }
.hero__title{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(38px,4.7vw,66px); margin:0 0 26px; color:var(--ink); overflow-wrap:normal; word-break:normal; hyphens:none; text-wrap:balance }
.hero__title .lo{ color:var(--muted-2); font-weight:400; white-space:nowrap }
.hero__lead{ color:var(--muted); font-size:clamp(16px,1.4vw,19px); max-width:40ch; margin:0 0 30px }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.hero__chip{ margin-top:34px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--ink);
  padding:10px 16px; border:1px solid var(--line); border-radius:100px; background:var(--surface) }
.hero__chip i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(240,93,14,.16) }
a.hero__chip{ transition:border-color .3s var(--ease), transform .3s var(--ease) }
a.hero__chip:hover{ border-color:var(--ink); transform:translateY(-2px) }
/* figure is a transparent cutout — let it stand on the baseline and meet the ticker,
   grounded by a soft drop-shadow instead of floating inside a rounded card */
.hero__figure{ position:relative; align-self:end }
.hero__figure img{ width:100%; height:auto;
  max-height:clamp(500px,78vh,820px);
  max-height:min(780px, calc(100vh - 158px));
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 30px 46px rgba(20,20,20,.13)) }
@media(max-width:900px){
  .hero{ padding-bottom:0 }
  .hero__grid{ grid-template-columns:1fr; min-height:0; gap:0 }
  .hero__copy{ align-self:auto; padding-bottom:clamp(28px,7vw,44px) }
  .hero__figure img{ max-height:58vh; margin-inline:auto }
}
/* short desktop windows (laptops): the copy column is what pushes the figure past
   the fold, so tighten the copy here — the figure keeps its full height and nothing
   gets cut. Only applies on two-column widths (>900) and short viewports. */
@media(min-width:901px) and (max-height:800px){
  .hero__eyebrow{ margin-bottom:12px }
  .hero__title{ font-size:clamp(32px,4.2vw,54px); margin-bottom:16px }
  .hero__lead{ font-size:16px; margin-bottom:20px }
  .hero__chip{ margin-top:18px }
  .hero__copy{ padding-bottom:14px }
}

/* ============================ MARQUEE (keyword ticker) ============================ */
.ticker{ border-block:1px solid var(--line); padding-block:20px; overflow:hidden }
.ticker__track{ display:flex; width:max-content; gap:0; animation:scroll-x 46s linear infinite }
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker__i{ display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  font-family:var(--mono); font-size:clamp(13px,1.15vw,15px); letter-spacing:var(--track-tag); color:var(--ink-2); white-space:nowrap }
.ticker__i::after{ content:"·"; color:var(--muted-2); font-weight:700 }
@keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================ EDITORIAL PANEL ============================ */
.panel{ position:relative; width:100vw; margin-left:calc(50% - 50vw);
  min-height:clamp(380px,50vw,600px); display:flex; align-items:center; overflow:hidden; background:#efedee }
.panel__img{ position:absolute; inset:0 }
.panel__img img{ width:100%; height:100%; object-fit:cover; }
/* the client renders sit on a light ground, so a light scrim on the text side
   keeps dark type readable while their orange accent stays intact */
.panel__wash{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(248,246,247,.95) 0%, rgba(248,246,247,.68) 30%, rgba(248,246,247,.05) 62%) }
.panel__in{ position:relative; z-index:2; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gut); width:100%; color:var(--ink) }
.panel__kicker{ font-family:var(--mono); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted) }
.panel__title{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; line-height:1.05;
  color:var(--ink); font-size:var(--d2); margin:14px 0 0; max-width:16ch }
.panel__side{ position:absolute; left:var(--gut); top:50%; transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center; font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--meta) }
/* quieter, right-read second panel so the beat varies */
.panel--r{ min-height:clamp(320px,42vw,500px) }
.panel--r .panel__wash{ background:linear-gradient(270deg, rgba(248,246,247,.95) 0%, rgba(248,246,247,.68) 30%, rgba(248,246,247,.05) 62%) }
.panel--r .panel__in{ text-align:right }
.panel--r .panel__title{ margin-left:auto }
.panel--r .panel__side{ left:auto; right:var(--gut); transform:translateY(-50%) rotate(90deg); transform-origin:right center }
@media(max-width:700px){ .panel__side{display:none} .panel--r .panel__in{text-align:left} .panel--r .panel__title{margin-left:0} }
/* visor panel (Vendors): the subject sits on white, so the left text-wash blends in;
   bias the crop to keep the visor + face in frame */
.panel--visor{ min-height:clamp(360px,44vw,540px); background:#fff }
.panel--visor .panel__img img{ object-position:center 32% }
.panel--visor .panel__wash{ background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.7) 34%, rgba(255,255,255,0) 60%) }

/* ============================ CAPABILITIES (image grid) ============================ */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px); margin-top:clamp(40px,5vw,68px) }
.cap{ display:block }
.cap__img{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-md); background:#EEECED; margin-bottom:18px }
.cap__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.cap:hover .cap__img img{ transform:scale(1.04) }
.cap__t{ font-family:var(--sans); font-weight:500; font-size:17px; letter-spacing:0; margin:0 0 6px; color:var(--ink) }
.cap__d{ font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--muted); margin:0; max-width:40ch }
@media(max-width:900px){ .caps{ grid-template-columns:repeat(2,1fr); gap:28px } }
@media(max-width:560px){ .caps{ grid-template-columns:1fr } }

/* ============================ WHY (rows + figure) ============================ */
.why{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(30px,5vw,72px); align-items:center; margin-top:clamp(24px,3vw,44px) }
.why .drows{ margin-top:0 }
.why__fig img{ width:100%; height:auto; filter:drop-shadow(0 28px 46px rgba(20,20,20,.14)) }
@media(max-width:900px){ .why{ grid-template-columns:1fr; gap:24px } .why__fig{ max-width:340px; margin:8px auto 0 } }

/* ============================ VENDORS (dissolved logo band) ============================ */
.vband{ width:100vw; margin-left:calc(50% - 50vw); background:var(--band);
  border-block:1px solid var(--line-2);
  padding-block:clamp(22px,2.6vw,34px); overflow:hidden; margin-top:clamp(40px,5vw,64px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.vband__track{ display:flex; width:max-content; align-items:center; animation:scroll-x 40s linear infinite }
.vband:hover .vband__track{ animation-play-state:paused }
.vband__i{ display:inline-flex; align-items:center; padding-inline:clamp(26px,3.4vw,56px) }
.vband__i img{ height:clamp(22px,2.3vw,30px); width:auto; max-width:158px; object-fit:contain;
  display:block; opacity:.58; transition:opacity .3s var(--ease) }
.vband__i:hover img{ opacity:1 }

/* ============================ STATS (inline numerals) ============================ */
.stats__row{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,5vw,80px); align-items:end }
.stats__nums{ display:flex; gap:clamp(24px,4vw,64px); flex-wrap:wrap }
.stat__n{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; line-height:.9;
  font-size:clamp(48px,8vw,104px); color:var(--ink) }
.stat__l{ font-family:var(--mono); font-size:12px; color:var(--meta); margin-top:8px; text-transform:uppercase; letter-spacing:var(--track-label) }
.stats__aside{ position:relative; padding-bottom:8px }
.stats__aside p{ margin:0; color:var(--muted); font-size:clamp(15px,1.25vw,17px); max-width:42ch }
@media(max-width:820px){ .stats__row{grid-template-columns:1fr; gap:22px; align-items:start} }

/* ============================ INSIGHTS (blog) ============================ */
.blog__head{ text-align:center; margin-bottom:clamp(36px,4vw,64px) }
.blog__head .eyebrow{ justify-content:center }
.blog__head .eyebrow::before{ display:none }
.blog__head h2{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em;
  font-size:var(--d2); line-height:1.08; margin:14px 0 0 }
/* auto-fit so a full 4-post row fills the width, but sparse archives (1 post)
   stay a single centered card instead of one lonely cell in a 4-col grid */
.blog__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,300px));
  gap:clamp(18px,2vw,28px); justify-content:center }
.post{ display:block }
.post__img{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md); background:#eceaeb }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.post:hover .post__img img{ transform:scale(1.05) }
.post__tag{ display:inline-block; margin:16px 0 10px; font-family:var(--mono); font-size:11px;
  letter-spacing:var(--track-tag); text-transform:uppercase; color:var(--muted); border:1px solid var(--line-strong); border-radius:100px; padding:5px 12px }
.post__t{ font-family:var(--sans); font-weight:500; font-size:16px; line-height:1.35; color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.post:hover .post__t{ color:var(--accent-ink) }
.blog__all{ display:table; margin:clamp(30px,3.5vw,50px) auto 0; font-family:var(--mono); font-size:14px;
  color:var(--ink); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .3s var(--ease) }
.blog__all:hover{ border-bottom-color:var(--ink) }
/* .blog__grid uses auto-fit above, so it reflows 4→2→1 by itself — no breakpoints needed */
.fl-pager{ display:flex; gap:10px; justify-content:center; margin-top:clamp(30px,3.5vw,50px); flex-wrap:wrap }
.fl-pager .page-numbers{ font-family:var(--mono); font-size:14px; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:8px 14px; min-width:42px; text-align:center }
.fl-pager .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink) }
.fl-pager a.page-numbers:hover{ border-color:var(--ink); color:var(--ink) }

/* ============================ FOOTER ============================ */
.ft{ border-top:1px solid var(--line); padding-block:clamp(56px,7vw,100px) }
.ft__top{ display:grid; grid-template-columns:1.5fr .6fr .6fr .7fr; gap:clamp(28px,3.5vw,64px) }
.ft__mark img{ height:26px; width:auto }
.ft__big{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; line-height:1.08;
  font-size:var(--d2); margin:26px 0 34px; max-width:16ch }
.ft__getlbl{ font-family:var(--mono); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted); margin-bottom:12px }
.ft__field{ display:flex; align-items:center; gap:10px; max-width:440px; border-bottom:1px solid var(--ink); padding-bottom:12px }
.ft__field:focus-within{ border-bottom-width:2px; padding-bottom:11px }
.ft__field input{ flex:1; border:0; background:transparent; font-family:var(--sans); font-size:16px; color:var(--ink); outline:none }
.ft__field input::placeholder{ color:var(--meta) }
.ft__field button{ background:var(--ink); color:#fff; border:0; width:44px; height:44px; border-radius:100px; flex:0 0 auto }
.ft__col h3{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.ft__col a{ display:block; color:var(--ink-2); font-size:15px; padding:6px 0 }
.ft__col a:hover{ color:var(--accent-ink) }
.ft__mail{ font-family:var(--mono); font-size:clamp(16px,1.6vw,20px); color:var(--ink); margin-top:4px }
.ft__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:clamp(40px,5vw,72px); padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px }
@media(max-width:820px){ .ft__top{grid-template-columns:1fr 1fr; gap:40px} .ft__brand{grid-column:1/-1} .ft__bottom{flex-direction:column; align-items:flex-start} }
@media(max-width:480px){ .ft__top{grid-template-columns:1fr} }

/* ============================ FLOATING WIDGETS (chat + back-to-top) ============================ */
/* left: persistent "Chat with us" pill (replaces the hero chip); right: back-to-top */
.fl-chat{ position:fixed; left:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px); z-index:70;
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--ink); padding:12px 18px; border:1px solid var(--line); border-radius:100px; background:var(--surface);
  box-shadow:0 16px 38px -20px rgba(20,20,20,.5); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease) }
.fl-chat:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:0 20px 44px -20px rgba(20,20,20,.55) }
.fl-chat i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(240,93,14,.16); flex:0 0 auto }

.fl-top{ position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px); z-index:70;
  width:46px; height:46px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 16px 38px -20px rgba(20,20,20,.5);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease) }
.fl-top.is-on{ opacity:1; visibility:visible; transform:none }
.fl-top:hover{ border-color:var(--ink); background:var(--ink); color:#fff }
.fl-top:active{ transform:translateY(1px) }
/* on small screens shrink the chat pill to just the dot + a smaller label so the two
   widgets never collide at the bottom */
@media(max-width:560px){
  .fl-chat{ padding:11px 15px; font-size:11px; gap:8px }
  .fl-top{ width:42px; height:42px }
}
@media(prefers-reduced-motion:reduce){ .fl-top{ transition:opacity .2s linear } }

/* ============================ LIVE SEARCH OVERLAY (command-palette) ============================ */
.fl-search-ov{ position:fixed; inset:0; z-index:90; display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(64px,13vh,150px) clamp(16px,5vw,24px) 24px;
  background:rgba(248,246,247,.72); -webkit-backdrop-filter:saturate(1.1) blur(16px); backdrop-filter:saturate(1.1) blur(16px) }
.fl-search-ov[hidden]{ display:none }
.fl-search-ov__panel{ width:100%; max-width:640px; animation:flSearchIn .32s var(--ease) }
@keyframes flSearchIn{ from{ opacity:0; transform:translateY(-14px) } to{ opacity:1; transform:none } }
.fl-search-ov__bar{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:15px 18px; box-shadow:0 34px 80px -34px rgba(20,20,20,.5) }
.fl-search-ov__bar > svg{ color:var(--meta); flex:0 0 auto }
.fl-search-ov__bar input{ flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family:var(--sans); font-size:clamp(17px,2.2vw,22px); color:var(--ink); line-height:1.3 }
.fl-search-ov__bar input::placeholder{ color:var(--meta) }
.fl-search-ov__bar input::-webkit-search-cancel-button{ -webkit-appearance:none }
.fl-search-ov__x{ flex:0 0 auto; width:34px; height:34px; border-radius:100px; border:1px solid var(--line);
  background:transparent; color:var(--muted); display:grid; place-items:center; transition:.25s var(--ease) }
.fl-search-ov__x:hover{ border-color:var(--ink); color:var(--ink) }
.fl-search-ov__results{ margin-top:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  overflow:hidden auto; max-height:min(56vh,440px); box-shadow:0 34px 80px -40px rgba(20,20,20,.4) }
.fl-search-ov__results[hidden]{ display:none }
.fl-sr{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:14px 20px;
  border-bottom:1px solid var(--line-2); color:var(--ink) }
.fl-sr:last-child{ border-bottom:0 }
.fl-sr.is-active{ background:var(--band) }
.fl-sr__t{ font-family:var(--sans); font-weight:500; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fl-sr.is-active .fl-sr__t{ color:var(--accent-ink) }
.fl-sr__c{ flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:var(--track-tag); text-transform:uppercase; color:var(--meta) }
.fl-search-ov__empty{ padding:22px 20px; text-align:center; color:var(--muted); font-size:14px }
.fl-search-ov__hint{ margin-top:16px; text-align:center; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--meta) }
@media(max-width:560px){ .fl-search-ov__hint{ display:none } }
@media(prefers-reduced-motion:reduce){ .fl-search-ov__panel{ animation:none } }

/* ---------- reveal (GSAP-driven via light-motion.js). Pre-hidden ONLY when JS is
   present, so the page is never blank without JS. light-motion animates on scroll,
   or shows everything in still / reduced-motion mode. ---------- */
html.js .reveal{ opacity:0 }
html.js .hero__copy, html.js .hero__figure{ opacity:0 }   /* hero intro = GSAP timeline */
@media(prefers-reduced-motion:reduce){
  html.js .reveal, html.js .hero__copy, html.js .hero__figure{ opacity:1 !important; transform:none !important }
  .ticker__track,.vband__track{ animation:none }
}
/* JS-failure safety: an inline <head> timeout adds .fl-safe if light-motion never ran,
   so pre-hidden content can never stay invisible */
html.fl-safe .reveal, html.fl-safe .hero__copy, html.fl-safe .hero__figure{ opacity:1 !important; transform:none !important }
html.fl-safe #fl-preload{ display:none !important }

/* ============================================================================
   INNER PAGES (light) — page hero, vendors, differentiators, contact, cards,
   article, search, closing CTA
   ==========================================================================*/

/* page hero band */
.phero{ padding-top:clamp(48px,7vw,96px); padding-bottom:clamp(30px,4vw,56px) }
.phero__crumbs{ font-family:var(--mono); font-size:12px; color:var(--meta); margin-bottom:24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.phero__crumbs a{ color:var(--meta) } .phero__crumbs a:hover{ color:var(--ink) }
.phero__crumbs .sep{ opacity:.4 } .phero__crumbs [aria-current]{ color:var(--ink) }
.phero__eyebrow{ margin-bottom:20px }
.phero__title{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(28px,3.4vw,48px); margin:0; color:var(--ink); overflow-wrap:normal; word-break:normal; text-wrap:balance }
/* text-only pheros (single vendor, single post, search, 404, archives) have a full-width
   text column, so they can carry a larger display size without wrapping raggedly */
.phero:not(.phero--fig) .phero__title{ font-size:clamp(30px,4.4vw,58px) }
.phero__title .lo{ color:var(--muted-2); font-weight:400 }
.phero__sub{ margin:26px 0 0; color:var(--muted); font-size:clamp(16px,1.35vw,19px); max-width:52ch }
/* page hero with an editorial cutout figure on the right — figure takes the LARGER
   column (like the home hero) so it reads big and prominent, not a small floating cutout */
.phero--fig{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px,4vw,56px); align-items:center }
.phero--fig .phero__figure{ align-self:center; display:flex; justify-content:center }
.phero--fig .phero__figure img{ width:auto; height:auto; max-width:100%;
  max-height:clamp(360px,60vh,700px);
  max-height:min(700px, calc(100vh - 200px));
  object-fit:contain; object-position:center; filter:drop-shadow(0 30px 46px rgba(20,20,20,.13)) }
/* mobile: stack, and SHOW the figure (was hidden) at a comfortable size so every screen has the hero image */
@media(max-width:820px){
  .phero--fig{ grid-template-columns:1fr; gap:10px }
  .phero--fig .phero__figure{ display:flex }
  .phero--fig .phero__figure img{ height:auto; max-height:46vh; width:auto; max-width:76%; margin-inline:auto }
}

/* vendors list — borderless rows on the canvas */
.vlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,5vw,80px) }
.vitem{ display:block; padding:clamp(26px,3vw,40px) 0; border-top:1px solid var(--line) }
.vitem:focus-visible{ outline:2px solid var(--ink); outline-offset:6px }
.vitem__logo{ height:26px; width:auto; max-width:158px; object-fit:contain; object-position:left center;
  margin-bottom:20px; opacity:.62; transition:opacity .25s var(--ease) }
.vitem:hover .vitem__logo{ opacity:1 }
.vitem__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px }
.vitem__name{ font-family:var(--mono); font-weight:400; font-size:var(--d4); letter-spacing:-.01em; color:var(--ink); margin:0; transition:color .25s var(--ease) }
.vitem__name::after{ content:"\2197"; margin-left:12px; font-size:.66em; color:var(--meta);
  opacity:0; transform:translateX(-4px); display:inline-block; transition:.3s var(--ease) }
.vitem:hover .vitem__name,.vitem:focus-visible .vitem__name{ color:var(--accent-ink) }
.vitem:hover .vitem__name::after,.vitem:focus-visible .vitem__name::after{ opacity:1; transform:none; color:var(--accent-ink) }
.vitem__cat{ font-family:var(--mono); font-size:12px; letter-spacing:var(--track-tag); color:var(--meta); text-transform:uppercase; white-space:nowrap }
.vitem__desc{ margin:0 0 16px; color:var(--muted); font-size:15px; max-width:46ch }
.vitem__chips{ display:flex; gap:8px; flex-wrap:wrap }
.vitem__chips span{ font-family:var(--mono); font-size:11px; letter-spacing:var(--track-tag); color:var(--ink-2); border:1px solid var(--line-strong); border-radius:100px; padding:5px 12px }
@media(max-width:820px){ .vlist{ grid-template-columns:1fr } }
@media(max-width:560px){ .vitem__bar{ flex-direction:column; align-items:flex-start; gap:4px } .vitem__cat{ white-space:normal } }

/* differentiator flowing rows */
.drows{ margin-top:clamp(30px,4vw,56px); border-top:1px solid var(--line) }
.drow{ display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr); gap:clamp(16px,3vw,44px);
  align-items:start; padding:clamp(24px,3vw,38px) 0; border-bottom:1px solid var(--line) }
.drow__n{ font-family:var(--mono); font-size:14px; color:var(--meta) }
.drow__t{ font-family:var(--mono); font-weight:400; font-size:var(--d4); letter-spacing:-.01em; color:var(--ink) }
.drow__d{ margin:0; color:var(--muted); font-size:15px }
@media(max-width:760px){ .drow{ grid-template-columns:40px 1fr; } .drow__d{ grid-column:1/-1 } }

/* contact */
.contact{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(30px,5vw,80px) }
.form-note{ font-family:var(--sans); font-size:15px; padding:14px 16px; border-radius:10px; margin:0 0 22px }
.form-note--ok{ background:rgba(20,20,20,.05); color:var(--ink); border:1px solid var(--line) }
.form-note--err{ background:rgba(240,93,14,.08); color:var(--accent-ink); border:1px solid rgba(168,72,10,.3) }
.field{ display:block; margin-bottom:22px }
.field__lbl{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.contact__form input, .contact__form textarea{ width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line); padding:12px 2px; outline:none; border-radius:0 }
.contact__form input:focus, .contact__form textarea:focus{ border-color:var(--ink); border-bottom-width:2px; padding-bottom:11px }
/* keep a real focus ring for keyboard users (the border shift alone is too subtle) */
.contact__form input:focus-visible, .contact__form textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px }
.contact__form .btn{ margin-top:14px }
.field__req{ color:var(--accent-ink) }
.contact__aside h2{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted); margin:0 0 12px }
.contact__office{ color:var(--ink); margin:0 } .contact__office span{ color:var(--muted); font-size:14px }
.contact__social a{ display:block; color:var(--ink-2); padding:6px 0 } .contact__social a:hover{ color:var(--accent-ink) }
@media(max-width:760px){ .contact{ grid-template-columns:1fr } }

/* partners/downloads cards — flowing, borderless */
.fcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,64px) }
.fcard{ display:block; padding-top:26px; border-top:1px solid var(--ink); transition:opacity .3s var(--ease) }
a.fcard:hover{ opacity:.66 }
/* image-led card variant */
.fcard--img{ padding-top:0; border-top:0 }
.fcard__img{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-md); background:#EEECED; margin-bottom:22px }
.fcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
a.fcard--img:hover{ opacity:1 }
a.fcard--img:hover .fcard__img img{ transform:scale(1.04) }
.fcard__idx{ font-family:var(--mono); font-size:13px; color:var(--meta) }
.fcard__meta{ display:inline-block; margin-left:12px; font-family:var(--mono); font-size:11px; letter-spacing:var(--track-tag); text-transform:uppercase; color:var(--accent-ink) }
.fcard__t{ font-family:var(--mono); font-weight:400; font-size:var(--d4); letter-spacing:-.01em; margin:18px 0 12px; color:var(--ink) }
.fcard__d{ margin:0; color:var(--muted); font-size:15px; max-width:44ch }
.fcard__cta{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:13px; color:var(--ink) }
@media(max-width:760px){ .fcards{ grid-template-columns:1fr } }

/* single-vendor 2-col editorial body: prose left, sticky meta spine right */
.vbody{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr); gap:clamp(30px,5vw,80px); align-items:start }
.vbody .article{ max-width:none }
.vmeta{ position:sticky; top:104px; display:flex; flex-direction:column; gap:22px }
.vmeta h3{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted); margin:0 0 8px }
.ft__cta{ margin-top:4px }
.vmeta__cat{ font-family:var(--mono); font-weight:400; font-size:16px; color:var(--ink) }
.vmeta .vitem__chips{ margin-top:4px }
.vmeta .btn{ align-self:flex-start }
@media(max-width:820px){ .vbody{ grid-template-columns:1fr } .vmeta{ position:static; flex-direction:row; flex-wrap:wrap; gap:18px 40px } }

/* single-vendor logo — borderless editorial media, left-aligned to the prose rag */
.vlogo-frame{ background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:clamp(24px,4vw,44px) 0; display:flex; justify-content:flex-start; align-items:center; max-width:760px }
.vlogo-frame img{ height:clamp(52px,7vw,88px); width:auto; max-width:100%; opacity:1 }
.vlogo-chips{ justify-content:flex-start; margin-top:22px }

/* screen-reader-only helper (visually hidden, still announced) */
.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 }

/* article prose */
.article{ max-width:760px; font-size:17px; line-height:1.8; color:var(--ink-2); overflow-wrap:break-word }
.article h2,.article h3{ font-family:var(--mono); font-weight:400; letter-spacing:-.01em; color:var(--ink); line-height:1.2; margin:1.8em 0 .5em }
.article h2{ font-size:var(--d3) } .article h3{ font-size:var(--d4) }
.article p{ margin:0 0 1.2em } .article a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px }
.article ul,.article ol{ padding-left:1.2em; margin:0 0 1.2em } .article li{ margin:.4em 0 }
/* embedded product screenshots (often dark vendor UIs): frame on a light card and
   cap the height so a navy "device on a card" sits contained on the light page */
.article img, .vbody .article img, .vbody figure img{ display:block; width:auto; height:auto; max-width:100%;
  max-height:440px; object-fit:contain; margin:1.8em auto; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); padding:clamp(14px,2vw,26px); box-sizing:border-box }
/* pull-quote reads in Inter; mono is reserved for the attribution */
.article blockquote{ border-left:2px solid var(--ink); margin:1.5em 0; padding:.2em 0 .2em 1.2em;
  font-family:var(--sans); font-style:italic; font-size:19px; color:var(--ink) }
.article blockquote cite{ display:block; margin-top:.6em; font-family:var(--mono); font-style:normal;
  font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted) }

/* search form (the site had no search input anywhere — header icon lands here) */
.fl-search{ display:flex; align-items:center; gap:14px; max-width:640px; margin:0 0 clamp(30px,4vw,52px);
  border-bottom:1px solid var(--ink); padding-bottom:12px }
.fl-search:focus-within{ border-bottom-width:2px; padding-bottom:11px }
.fl-search input{ flex:1; min-width:0; border:0; background:transparent; font-family:var(--sans);
  font-size:clamp(18px,2.4vw,26px); color:var(--ink); outline:none }
.fl-search input::placeholder{ color:var(--meta) }
.fl-search .btn{ flex:0 0 auto }
/* search results */
.slist{ border-top:1px solid var(--line) }
.sitem{ display:block; padding:clamp(22px,2.5vw,32px) 0; border-bottom:1px solid var(--line) }
.sitem:hover h3{ color:var(--accent-ink) }
.sitem h3{ font-family:var(--mono); font-weight:400; font-size:var(--d4); margin:0 0 8px; color:var(--ink) }
.sitem p{ margin:0; color:var(--muted); font-size:15px; max-width:64ch }

/* closing CTA band — now a rounded card with the client's orange-blur texture behind */
.ctaband{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg);
  padding-block:clamp(56px,7vw,110px); padding-inline:clamp(20px,5vw,72px) }
.ctaband__bg{ position:absolute; inset:0; z-index:-2 }
.ctaband__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; opacity:.6 }
.ctaband::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(248,246,247,.6) 0%, rgba(248,246,247,.74) 60%, rgba(248,246,247,.82) 100%) }
.ctaband__in{ position:relative; z-index:1; text-align:center; max-width:760px; margin-inline:auto }
.ctaband__in h2{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; line-height:1.12;
  font-size:clamp(26px,3.4vw,44px); margin:0; color:var(--ink); text-wrap:balance }
.ctaband__in p{ margin:22px auto 30px; color:var(--muted); font-size:clamp(16px,1.3vw,18px); max-width:52ch }
.ctaband__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ============================ ABOUT — where we work (cities) ============================ */
.cities{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px);
  margin-top:clamp(30px,4vw,56px); border-top:1px solid var(--line); padding-top:clamp(28px,3.5vw,48px) }
.city__n{ font-family:var(--mono); font-weight:400; font-size:var(--d4); letter-spacing:-.01em; color:var(--ink); margin:0 }
.city__c{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:var(--track-tag); text-transform:uppercase; color:var(--accent-ink); margin:8px 0 12px }
.city__a{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; max-width:26ch }
@media(max-width:760px){ .cities{ grid-template-columns:1fr; gap:22px } }