/* ════════════════════════════════════════════════════════════════
   hedj — BRUTALIST EDITORIAL
   ════════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* land section tops just below the fixed header on anchor jumps */
  scroll-padding-top:var(--header-h); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--font-sans); background:var(--bone); color:var(--text);
  font-size:var(--fs-body); line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background .3s var(--ease), color .3s var(--ease);
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font:inherit; cursor:pointer; color:inherit; }
::selection { background:var(--lime); color:var(--lime-ink); }

/* grain */
body::after { content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }

/* ── LAYOUT ── */
.container { max-width:var(--container); margin:0 auto; padding-inline:var(--pad-x); }
.section { padding-block:var(--section-y); position:relative; }
.section--tight { padding-block:clamp(2.5rem,6vw,4.5rem); }
.section + .section, .marquee + .section { border-top:1px solid var(--line); }
.section--surface { background:var(--bone-2); }
.section--cream { background:var(--bone-2); }

/* ── TYPE ── */
.display,.h2,.h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; }
.display { font-size:var(--fs-display); line-height:.96; }
.h2 { font-size:var(--fs-h2); line-height:.98; }
.h3 { font-size:var(--fs-h3); line-height:1.12; }
.lead { font-size:var(--fs-lead); color:var(--text-muted); line-height:1.5; font-weight:500; text-wrap:pretty; }
.eyebrow { display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:var(--fs-xs);
  font-weight:500; letter-spacing:var(--eyebrow-ls); text-transform:uppercase; color:var(--text); }
.eyebrow::before { content:''; width:.55em; height:.55em; background:var(--lime); border:1px solid var(--ink); }
.eyebrow--danger::before { background:var(--neg); }
.text-teal { color:var(--text); }

/* lime highlighter marker */
.mark { background:var(--lime); color:var(--lime-ink); box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:.02em .12em; }

/* ── SECTION HEAD (editorial, ruled) ── */
.section-head { margin-bottom:clamp(1.6rem,3.2vw,2.8rem); }
.section-head__top { display:flex; align-items:center; gap:1.2rem; padding:.8rem 0 1rem; border-top:2px solid var(--ink); }
.section-head__ix { font-family:var(--font-mono); font-size:.82rem; color:var(--text); letter-spacing:.04em; }
.section-head__top .eyebrow { margin-left:auto; }
.section-head__grid { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1rem,4vw,3.5rem); align-items:end; }
.section-head__grid .h2 { max-width:16ch; font-size:clamp(1.9rem,3.6vw,3.2rem); }
.section-head__grid .lead { padding-bottom:.5rem; }
@media (max-width:860px){ .section-head__grid { grid-template-columns:1fr; gap:1.1rem; } }

/* ════════════════════════ BUTTONS ════════ */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:0 1.5em; height:3.1em; border:2px solid var(--ink); border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:700; letter-spacing:-0.01em; background:var(--lime); color:var(--lime-ink);
  overflow:hidden; isolation:isolate; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .2s, color .2s; }
.btn svg { width:1.05em; height:1.05em; stroke-width:2.4; }
.btn__label { position:relative; z-index:1; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.btn:active { transform:translate(0,0); box-shadow:0 0 0 var(--ink); }
.btn--primary { background:var(--lime); color:var(--lime-ink); }
.btn--ghost { background:transparent; color:var(--ink); }
.btn--ghost:hover { background:var(--ink); color:var(--bone); }
.btn--on-dark-ghost { background:transparent; color:var(--on-ink); border-color:var(--on-ink); }
.btn--on-dark-ghost:hover { background:var(--on-ink); color:var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.2); }
.btn--lg { height:3.5em; padding:0 1.8em; font-size:1rem; }

.link-arrow { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:var(--fs-xs);
  font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--lime); padding-bottom:.2em; }
.link-arrow svg { width:1.1em; height:1.1em; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .3s var(--ease); }
.link-arrow:hover svg { transform:translateX(4px); }

/* Header, nav, mobile-nav and footer styles now live in css/chrome.css */

/* Dark mode — vivid soft glows on dark forest bg */
[data-theme="dark"] .hero__wave--green {
  background:radial-gradient(ellipse at 55% 48%, rgba(48,176,120,.50) 0%, rgba(48,176,120,.22) 45%, rgba(48,176,120,.06) 68%, transparent 82%);
  opacity:.30; filter:blur(80px);
}
[data-theme="dark"] .hero__wave--orange {
  background:radial-gradient(ellipse at 45% 52%, rgba(232,136,48,.35) 0%, rgba(232,136,48,.14) 48%, rgba(232,136,48,.04) 70%, transparent 84%);
  opacity:.14; filter:blur(80px);
}
[data-theme="dark"] .hero__wave--blue {
  background:radial-gradient(ellipse at 50% 50%, rgba(120,152,176,.25) 0%, rgba(120,152,176,.08) 52%, transparent 76%);
  opacity:.40; filter:blur(80px);
}
[data-theme="dark"] .hero__glass {
  background:
    linear-gradient(135deg, rgba(48,176,120,.07) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.03) 0%, transparent 30%);
}
[data-theme="dark"] .hero__grain { opacity:.058; mix-blend-mode:screen; }

/* ════════════════════════ HERO ════════ */
.hero { position:relative; background:var(--bone); overflow:hidden;
  min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--header-h) + clamp(1rem,2.2vw,2rem)); padding-bottom:clamp(1rem,2.2vw,2rem); }
/* LIGHT theme: soft logo-palette wash so the pale globe doesn't blend into the cream.
   Kept mild; dark theme keeps its own vivid glow (below), so this is light-only. */
.hero {
  background:
    radial-gradient(75% 70% at 84% 46%, rgba(232,136,48,.20) 0%, rgba(248,192,0,.08) 34%, transparent 62%),
    radial-gradient(70% 75% at 6% 8%, rgba(48,176,120,.22) 0%, transparent 55%),
    radial-gradient(85% 65% at 50% 108%, rgba(120,152,176,.16) 0%, transparent 60%),
    var(--bone);
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(115% 95% at 22% 0%, rgba(26,54,96,.24) 0%, rgba(16,34,64,.09) 46%, transparent 72%),
    var(--bone);
}   /* dark relies on the vivid wave blobs, not this wash */
.hero__bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* ── Pastel wave blobs — logo colour proportions ── */
.hero__wave {
  position:absolute;
  will-change:transform, border-radius;
  filter:blur(72px);
}

/* GREEN — major (~60% of logo) */
.hero__wave--green {
  width:85%; aspect-ratio:1.5;
  top:-35%; left:-22%;
  background:radial-gradient(ellipse at 55% 48%, #A8E8C8 0%, #C8F2DC 40%, #E0F9ED 65%, transparent 80%);
  border-radius:62% 38% 55% 45% / 46% 54% 46% 54%;
  opacity:.78;
  animation:waveG 16s ease-in-out infinite alternate;
}
@keyframes waveG {
  0%   { transform:translate(0,0) rotate(-6deg) scale(1); border-radius:62% 38% 55% 45%/46% 54% 46% 54%; }
  33%  { transform:translate(8%,5%) rotate(2deg) scale(1.06); border-radius:45% 55% 40% 60%/55% 45% 55% 45%; }
  66%  { transform:translate(4%,10%) rotate(8deg) scale(1.04); border-radius:70% 30% 60% 40%/40% 60% 40% 60%; }
  100% { transform:translate(10%,4%) rotate(-2deg) scale(1.1); border-radius:55% 45% 48% 52%/52% 48% 52% 48%; }
}

/* ORANGE — secondary (~25% of logo) */
.hero__wave--orange {
  width:58%; aspect-ratio:1.4;
  top:0%; right:-20%;
  background:radial-gradient(ellipse at 45% 52%, #F8C88A 0%, #FCDDB0 45%, #FEEDD8 68%, transparent 82%);
  border-radius:46% 54% 61% 39% / 55% 44% 56% 45%;
  opacity:.65;
  animation:waveO 20s ease-in-out infinite alternate;
  animation-delay:-7s;
}
@keyframes waveO {
  0%   { transform:translate(0,0) rotate(8deg) scale(1); border-radius:46% 54% 61% 39%/55% 44% 56% 45%; }
  40%  { transform:translate(-7%,8%) rotate(-3deg) scale(1.07); border-radius:60% 40% 45% 55%/44% 56% 44% 56%; }
  100% { transform:translate(-12%,3%) rotate(-7deg) scale(1.05); border-radius:38% 62% 55% 45%/60% 40% 60% 40%; }
}

/* BLUE — minimal (~15% of logo) */
.hero__wave--blue {
  width:44%; aspect-ratio:1.2;
  bottom:-14%; left:12%;
  background:radial-gradient(ellipse at 50% 50%, #B4CCE0 0%, #CDDAEB 50%, #DEEAF4 68%, transparent 80%);
  border-radius:54% 46% 42% 58% / 49% 61% 39% 51%;
  opacity:.50;
  animation:waveB 26s ease-in-out infinite alternate;
  animation-delay:-14s;
}
@keyframes waveB {
  0%   { transform:translate(0,0) rotate(-4deg) scale(1); border-radius:54% 46% 42% 58%/49% 61% 39% 51%; }
  50%  { transform:translate(9%,-7%) rotate(5deg) scale(1.08); border-radius:40% 60% 58% 42%/62% 38% 62% 38%; }
  100% { transform:translate(4%,-12%) rotate(11deg) scale(1.05); border-radius:65% 35% 50% 50%/45% 55% 45% 55%; }
}

/* Dark theme: the pale pastel blobs above were designed for the light wash
   and were never given a dark counterpart — on the near-black dark .hero
   background they just sat there unchanged, looking washed-out and out of
   place. Re-tint each to a vivid, low-opacity glow of its own brand colour
   instead of a pastel, matching the "vivid wave blobs" the comment above
   already assumed existed. */
[data-theme="dark"] .hero__wave--green {
  background:radial-gradient(ellipse at 55% 48%, rgba(48,176,120,.55) 0%, rgba(48,176,120,.28) 40%, rgba(48,176,120,.08) 65%, transparent 80%);
}
[data-theme="dark"] .hero__wave--orange {
  background:radial-gradient(ellipse at 45% 52%, rgba(232,136,48,.45) 0%, rgba(232,136,48,.22) 45%, rgba(232,136,48,.06) 68%, transparent 82%);
}
[data-theme="dark"] .hero__wave--blue {
  background:radial-gradient(ellipse at 50% 50%, rgba(120,152,176,.40) 0%, rgba(120,152,176,.20) 50%, rgba(120,152,176,.05) 68%, transparent 80%);
}

/* ── Glass shimmer — frosted-light highlight ── */
.hero__glass {
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 38%, transparent 65%),
    linear-gradient(to bottom, rgba(255,255,255,.20) 0%, transparent 35%);
  pointer-events:none;
}
/* same white-shimmer values read as a heavy fog on the dark hero — dim it */
[data-theme="dark"] .hero__glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 38%, transparent 65%),
    linear-gradient(to bottom, rgba(255,255,255,.05) 0%, transparent 35%);
}

/* ── Grain / noise ── */
.hero__grain {
  position:absolute; inset:0; opacity:.042; mix-blend-mode:overlay; pointer-events:none;
}
.hero__grain svg { display:block; width:100%; height:100%; }
/* text column widened (was 1fr) so each headline sentence holds one line at
   desktop widths — the longest, "Execute with confidence.", needs ~11.8em */
.hero__inner { position:relative; display:grid; grid-template-columns:1.45fr 1.05fr; gap:clamp(1.5rem,3.5vw,3rem); align-items:center; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border:2px solid var(--ink); padding:.45em 1em; margin-bottom:.85rem; }
.hero__eyebrow .pulse { width:.55em; height:.55em; background:var(--lime); border:1px solid var(--ink); animation:dotPulse 2s steps(1) infinite; }
@keyframes dotPulse { 50% { background:transparent; } }
.hero h1 { font-family:var(--font-display); font-size:clamp(2.3rem,4.0vw,3.4rem); font-weight:600; line-height:.94; letter-spacing:-0.03em; margin-bottom:.85rem; }
.hero h1 .ln { display:block; overflow:hidden; }
.hero h1 .ln > span { display:block; transform:translateY(105%); transition:transform .9s var(--ease-vt); }
.hero.reveal h1 .ln:nth-child(1) > span { transition-delay:.05s; }
.hero.reveal h1 .ln:nth-child(2) > span { transition-delay:.15s; }
.hero.reveal h1 .ln:nth-child(3) > span { transition-delay:.25s; }
.hero.reveal h1 .ln > span { transform:translateY(0); }
/* glass-textured glyphs — bright vivid green glass, static (no shine motion) */
.hero h1 em {
  font-style:normal;
  font-weight:600;
  position:relative;
  display:inline-block;
  /* the gap after the accent word is supplied here (not by a literal space)
     so it survives Google Translate, which drops the following text node's
     leading whitespace when translating each phrase separately */
  margin-inline-end:.22em;
  background:linear-gradient(175deg, #3EC98C 0%, #2BB279 48%, #1C9462 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,0.18);
}
[data-theme="dark"] .hero h1 em {
  background:linear-gradient(175deg, #5AD79E 0%, #3EC286 48%, #26A46C 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 1px 0 rgba(255,255,255,0.1), 0 -1px 1px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion:reduce){ .hero h1 em { animation:none; } }
.hero__sub { font-size:var(--fs-lead); color:var(--text-muted); max-width:30em; line-height:1.45; margin-bottom:1rem;
  opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .4s, transform .8s var(--ease) .4s; }
.hero.reveal .hero__sub { opacity:1; transform:none; }
.hero__cta { display:flex; gap:.85rem; flex-wrap:wrap; opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .52s, transform .8s var(--ease) .52s; }
.hero.reveal .hero__cta { opacity:1; transform:none; }
.hero__trust { margin-top:1rem; padding-top:.8rem; border-top:2px solid var(--ink); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem 1.4rem; max-width:34em; }
.hero__trust-item { display:flex; align-items:center; gap:.6em; font-size:.85rem; color:var(--text); }
.hero__trust-item svg { width:1.05em; height:1.05em; stroke:var(--ink); stroke-width:2; fill:none; flex-shrink:0; }
/* Secondary hero button — solid white so it reads on both the cream and dark hero */
.hero .btn--on-dark-ghost { background:#ffffff; color:#111111; border-color:#111111; }
.hero .btn--on-dark-ghost:hover { background:#111111; color:#ffffff; border-color:#111111; box-shadow:4px 4px 0 rgba(0,0,0,.25); }
[data-theme="dark"] .hero .btn--on-dark-ghost { background:#ffffff; color:#111111; border-color:#ffffff; }
[data-theme="dark"] .hero .btn--on-dark-ghost:hover { background:#e9e7dd; color:#111111; border-color:#ffffff; }

.hero__visual { position:relative; opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s; }
.hero.reveal .hero__visual { opacity:1; transform:none; }
.hero__visual svg { width:100%; height:auto; border:2px solid var(--ink); box-shadow:var(--sh-card); }
.hero__visual iframe { display:block; width:100%; aspect-ratio:1.05/1; max-height:min(72vh,640px); border:none; box-shadow:none; border-radius:0; background:transparent;
  /* fade only the outer corners — wide enough that the orbital rings are never eaten,
     still soft enough to hide the iframe's box edge in dark mode */
  -webkit-mask-image:radial-gradient(circle at 52% 48%, #000 70%, rgba(0,0,0,0.5) 85%, transparent 99%);
  mask-image:radial-gradient(circle at 52% 48%, #000 70%, rgba(0,0,0,0.5) 85%, transparent 99%); }
/* let the diorama breathe past the column on wide screens */
@media (min-width:1101px){ .hero__visual { margin-right:clamp(-4rem,-3vw,-1rem); } }

/* ════════════════════════ MARQUEE ════════ */
.marquee { background:var(--ink); color:var(--bone); border-block:2px solid var(--ink); padding-block:1rem; overflow:hidden; position:relative; }
.marquee__track { display:flex; width:max-content; gap:3rem; animation:marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__item { display:inline-flex; align-items:center; gap:.7em; font-family:var(--font-mono); font-size:.92rem;
  letter-spacing:.02em; color:var(--on-ink); white-space:nowrap; text-transform:uppercase; }
.marquee__item::before { content:'✦'; color:var(--lime); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ════════════════════════ EDITORIAL ROWS (problems/solutions) ════════ */
.ed-list { border-top:2px solid var(--ink); }
.ed-row { position:relative; display:grid; grid-template-columns:6rem minmax(0,1fr) minmax(0,1.2fr); gap:clamp(1.5rem,4vw,4rem);
  align-items:start; padding:clamp(2rem,4vw,3.4rem) 0; border-bottom:1px solid var(--line); transition:background .3s; }
.ed-row:hover { background:color-mix(in srgb, var(--lime) 14%, transparent); }
.ed-row__ix { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,3.4vw,3.4rem); line-height:.85; letter-spacing:-0.04em; color:var(--ink); }
.ed-problem .ed-row__ix { -webkit-text-stroke:1.5px var(--ink); color:transparent; }
.ed-row__icon { display:inline-flex; margin-bottom:1.1rem; padding:.6rem; border:2px solid var(--ink); color:var(--ink); }
.ed-solution .ed-row__icon { background:var(--lime); color:var(--lime-ink); }
.ed-row__icon svg { width:24px; height:24px; }
.ed-row__kicker { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.7rem; }
.ed-row__title { font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:600; letter-spacing:-0.02em; line-height:1.02; }
.ed-row__body { padding-top:.2rem; }
.ed-row__summary { font-size:1.08rem; color:var(--text); line-height:1.5; margin-bottom:1rem; text-wrap:pretty; }
.ed-row__detail { font-size:.95rem; color:var(--text-muted); line-height:1.6; text-wrap:pretty; }
.tag-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem; }
.tag { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.02em; padding:.4em .8em; color:var(--ink); border:1px solid var(--ink); transition:background .25s; }
.ed-row:hover .tag { background:var(--ink); color:var(--bone); }
@media (max-width:880px){ .ed-row { grid-template-columns:1fr; gap:1rem; padding:2rem 0; } }

/* ════════════════════════ CHALLENGE — three bold cards, fits one screen ════════ */
#problems { min-height:100dvh; display:flex; flex-direction:column; justify-content:center; }
.chal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.6rem);
  margin-top:clamp(1.6rem,3.5vw,2.8rem); }
.chal-card { --cc:var(--green); position:relative; display:flex; flex-direction:column; gap:.85rem;
  min-height:clamp(14rem,26vh,17rem); padding:clamp(1.5rem,2.4vw,2.3rem);
  border:2px solid var(--ink); background:var(--paper); box-shadow:var(--sh-card);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.chal-card::after { content:''; position:absolute; left:0; top:0; width:100%; height:6px; background:var(--cc); }
.chal-card:hover { transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--cc); }
.chal-card__num { font-family:var(--font-display); font-weight:700; line-height:.9; letter-spacing:-0.03em;
  font-size:clamp(2.8rem,4.2vw,4rem); color:var(--cc); }
.chal-card__title { font-family:var(--font-display); font-weight:600; letter-spacing:-0.015em;
  font-size:clamp(1.35rem,1.9vw,1.8rem); line-height:1.06; text-wrap:balance; }
.chal-card__desc { font-size:1rem; line-height:1.5; color:var(--text-muted); text-wrap:pretty; }
.chal-card__cost { margin-top:auto; padding-top:.95rem; border-top:1.5px solid var(--line);
  display:flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:color-mix(in srgb, var(--cc) 55%, var(--ink)); }
.chal-card__cost::before { content:''; width:.5rem; height:.5rem; background:var(--cc); border:1px solid var(--ink); flex:none; }
@media (max-width:900px){
  #problems { min-height:0; display:block; }
  .chal-grid { grid-template-columns:1fr; }
  .chal-card { min-height:0; padding:1.4rem 1.2rem 1.25rem; }
  .chal-card__num { font-size:2.3rem; }
}

/* ════════════════════════ SCROLL REVEAL ════════ */
.reveal-up { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0)*90ms); }
.reveal-up.in-view { opacity:1; transform:none; }
.reveal-row > * { opacity:0; transform:translate3d(0,42px,0); }
.reveal-row.in-view > * { animation:rowIn 1s var(--ease-vt) backwards; opacity:1; transform:none; }
.reveal-row.in-view > *:nth-child(1){ animation-delay:calc(var(--i,0)*.1s + .02s); }
.reveal-row.in-view > *:nth-child(2){ animation-delay:calc(var(--i,0)*.1s + .09s); }
.reveal-row.in-view > *:nth-child(3){ animation-delay:calc(var(--i,0)*.1s + .16s); }
@keyframes rowIn { from { opacity:0; transform:translate3d(0,42px,0); } to { opacity:1; transform:none; } }

/* ════════════════════════ INDUSTRIES — 2D road map ════════ */
.road-map { position:relative; max-width:var(--container-wide); margin:0 auto; padding:0 var(--pad-x) clamp(2rem,5vw,3.5rem);
  display:grid; grid-template-columns:1fr 360px; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
.road-map__canvas-wrap { position:relative; border:2px solid var(--ink); border-radius:20px; overflow:hidden;
  background:var(--paper); box-shadow:var(--sh-card); aspect-ratio:2/1; }
.road-map__canvas-wrap svg { display:block; width:100%; height:100%; color:var(--ink); }
.road-map__grid { opacity:.14; }
.road-map__road-base { fill:none; stroke:var(--ink); stroke-width:22; stroke-linecap:round; opacity:.08; }
.road-map__road-line { fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-dasharray:2 16; opacity:.45; }

.road-marker { cursor:pointer; }
.road-marker__ring { fill:var(--paper); stroke-width:2.5; transition:transform .25s var(--ease), fill .25s var(--ease); transform-box:fill-box; transform-origin:center; }
.road-marker:hover .road-marker__ring, .road-marker.is-active .road-marker__ring { transform:scale(1.15); }
.road-marker.is-active .road-marker__ring { fill:var(--marker-color, var(--green)); }
.road-marker__icon { pointer-events:none; }
.road-marker__icon svg { width:100%; height:100%; overflow:visible; }
.road-marker.is-active .road-marker__icon { color:var(--paper); }
.road-marker__label { font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; fill:var(--text);
  text-anchor:middle; pointer-events:none; opacity:.85; }
.road-marker__pulse { fill:none; stroke:var(--marker-color, var(--green)); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.road-marker:hover .road-marker__pulse { animation:roadPulse 1.4s var(--ease) infinite; }
@keyframes roadPulse { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }

.road-map__panel { position:sticky; top:calc(var(--header-h) + 1.5rem); background:var(--paper); border:2px solid var(--ink);
  border-radius:20px; padding:1.75rem; box-shadow:var(--sh-card); min-height:420px; display:flex; flex-direction:column; justify-content:center; }
.road-map__panel-empty { display:flex; flex-direction:column; gap:.9rem; text-align:left; }
.road-map__panel-empty p { font-size:.92rem; color:var(--text-muted); line-height:1.5; }
.road-map__panel.has-selection .road-map__panel-empty { display:none; }
.road-map__panel-content { display:none; flex-direction:column; }
.road-map__panel.has-selection .road-map__panel-content { display:flex; }
.road-map__panel-content { animation:panelIn .35s var(--ease); }
@keyframes panelIn { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.rm-icon { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border:2px solid var(--ink);
  border-radius:12px; margin-bottom:1rem; color:var(--paper); background:var(--marker-color, var(--green)); }
.rm-icon svg { width:22px; height:22px; }
.rm-title { font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:-0.015em; margin-bottom:.6rem; line-height:1.1; }
.rm-desc { font-size:.9rem; color:var(--text-muted); line-height:1.5; margin-bottom:1.1rem; }
.rm-section { margin-bottom:.85rem; }
.rm-section-title { font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-3); margin-bottom:.4rem; }
.rm-list { display:flex; flex-direction:column; gap:.24rem; }
.rm-list li { font-size:.83rem; color:var(--text-muted); padding-left:1.1em; position:relative; line-height:1.4; }
.rm-list li::before { content:''; position:absolute; left:0; top:.5em; width:.4em; height:.4em; border-radius:50%; background:var(--marker-color, var(--green)); }
.rm-cta { display:inline-flex; align-items:center; gap:.5em; margin-top:.5rem; font-family:var(--font-mono); font-size:.74rem;
  font-weight:500; color:var(--green-3); border-bottom:2px solid var(--green); align-self:flex-start; }

@media (max-width:900px){
  .road-map { grid-template-columns:1fr; }
  .road-map__panel { position:static; min-height:0; }
}

/* ════════════════════════ SOLUTIONS — morphing particle field ════════
   Horizontal snap carousel: the copy rail (#solViewport) snaps one solution
   at a time and the active slide drives the particle canvas (js/solutions.js).
   No scroll pin — the section sits in normal page flow. */
.sol-shell { display:flex; flex-direction:column; gap:clamp(.9rem,2.2vh,1.7rem); }
.sol-copy { display:flex; flex-direction:column; min-width:0; }
.sol-head__title { font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1.02; margin-top:.6rem; max-width:22ch; }
.sol-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,4vw,4.5rem); align-items:start; width:100%; }
.sol-progress { display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.1rem; }
.sol-progress__ix { font-family:var(--font-display); font-size:2.4rem; font-weight:600; line-height:1; letter-spacing:-0.03em; }
.sol-progress__of { font-family:var(--font-mono); font-size:.8rem; color:var(--text-soft); }
.sol-progress__bar { flex:1; height:2px; background:var(--line); position:relative; top:-.45em; }
.sol-progress__bar i { display:block; height:100%; width:0; background:var(--lime); transition:width .4s var(--ease); }

/* horizontal snap rail — one solution per frame.
   min-width:0 lets the scroller shrink to its flex/grid cell instead of
   growing to its content's min-content (which overflowed the page on mobile). */
.sol-viewport { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; }
.sol-viewport::-webkit-scrollbar { display:none; }
.sol-slides { display:flex; }
.sol-slide { flex:0 0 100%; scroll-snap-align:start; min-width:0; }
.sol-slide__title { font-family:var(--font-display); font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:600; letter-spacing:-0.02em; line-height:1.02; margin-bottom:1rem; text-wrap:balance; }
.sol-slide__summary { font-size:1.05rem; color:var(--text); line-height:1.5; text-wrap:pretty; }
.sol-slide__note { font-family:var(--font-mono); font-size:.78rem; line-height:1.6; color:var(--green-3); border-left:2px solid var(--lime); padding-left:.9em; margin:1.2rem 0 .2rem; }
.sol-slide .tag-row { margin-top:1.2rem; }
.sol-cta { margin-top:1.6rem; background:none; border-top:none; border-right:none; }

/* controls: dot indicators (left) + prev/next arrows (right) */
.sol-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:clamp(1.2rem,2.2vw,1.7rem); }
.sol-controls[hidden] { display:none; }
.sol-dots { display:flex; gap:.55rem; }
.sol-dot { width:.72em; height:.72em; padding:0; border:2px solid var(--ink); background:var(--paper);
  cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
.sol-dot.is-active { background:var(--lime); transform:scale(1.18); }
.sol-nav { display:flex; gap:.6rem; }
.sol-nav__btn { display:inline-flex; align-items:center; justify-content:center; width:2.7em; height:2.7em;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s; }
.sol-nav__btn svg { width:1.15em; height:1.15em; }
.sol-nav__btn:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--green); }
.sol-nav__btn:active:not(:disabled) { transform:translate(0,0); box-shadow:0 0 0 var(--ink); }
.sol-nav__btn:disabled { opacity:.32; cursor:default; }

.sol-canvas-wrap { position:sticky; top:calc(var(--header-h) + 1.5rem); border:2px solid var(--ink);
  background:var(--paper); box-shadow:var(--sh-card); aspect-ratio:1.28/1; overflow:hidden; }
.sol-canvas-wrap canvas { position:absolute; inset:0; width:100%; height:100%; }

/* static fallback (reduced motion) — solutions become numbered accent cards */
.sol-static .sol-viewport { overflow:visible; }
.sol-static .sol-controls { display:none; }
.sol-static .sol-canvas-wrap { display:none; }
.sol-static .sol-layout { grid-template-columns:1fr; }
.sol-static .sol-progress { display:none; }
.sol-static .sol-slide__note { display:none; }   /* copy refers to the desktop canvas animation */
.sol-static .sol-slides { display:flex; flex-direction:column; gap:1.1rem; }
.sol-static .sol-slide { flex:0 0 auto; position:relative;
  margin:0; border:2px solid var(--ink); background:var(--paper); box-shadow:var(--sh-card);
  padding:1.5rem 1.2rem 1.3rem; }
.sol-static .sol-slide::before { content:''; position:absolute; left:0; top:0; width:100%; height:6px; background:var(--green); }
.sol-static .sol-slide:nth-child(2)::before { background:var(--blue); }
.sol-static .sol-slide:nth-child(3)::before { background:var(--orange); }
.sol-static .sol-slide:nth-child(4)::before { background:var(--green-3); }
.sol-static .sol-slide__title { font-size:1.35rem; margin-bottom:.7rem; }
.sol-static .sol-slide__summary { font-size:.98rem; }
.sol-static .sol-slide .tag-row { margin-top:.9rem; }
.sol-static .sol-cta { margin-top:1.1rem; }

/* stacked layout on phones/tablets: canvas on top, copy rail below.
   position:relative (NOT static) so the absolutely-positioned #solCanvas stays
   contained in this box instead of filling the whole position:relative section. */
@media (max-width:1024px){
  .sol-head__title { font-size:1.9rem; }
  /* align-items:stretch (overriding the desktop grid's align-items:start) so the
     canvas and the copy column fill the width; combined with min-width:0 on the
     scroller, this constrains the rail to the viewport instead of overflowing. */
  .sol-layout { display:flex; flex-direction:column; gap:1.1rem; align-items:stretch; }
  .sol-canvas-wrap { order:-1; position:relative; top:auto; aspect-ratio:1.4/1; }
  .sol-slide__note { display:none; }
  .sol-slide .tag { font-size:.58rem; padding:.32em .6em; }
}
/* ════════════════════════ SERVICES — toolkit tabs ════════ */
.tk-tabs { display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); background:var(--paper); }
.tk-tab { display:flex; gap:.7em; align-items:flex-start; text-align:left; padding:1.05rem 1.2rem; border:none; border-right:2px solid var(--ink);
  background:transparent; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.4; color:var(--text-muted); transition:background .2s, color .2s; min-width:0; }
.tk-tab:last-child { border-right:none; }
.tk-tab b { font-weight:500; }
.tk-tab__ix { font-weight:500; color:var(--text-soft); }
.tk-tab:hover { color:var(--ink); background:color-mix(in srgb, var(--lime) 14%, transparent); }
.tk-tab.is-active { background:var(--lime); color:var(--lime-ink); }
.tk-tab.is-active .tk-tab__ix { color:var(--lime-ink); }
.tk-panel { display:grid; grid-template-columns:300px minmax(0,1fr); border:2px solid var(--ink); margin-top:6px; background:var(--paper); box-shadow:var(--sh-card); max-width:100%; overflow:hidden; }
.tk-tools { border-right:2px solid var(--ink); display:flex; flex-direction:column; background:var(--bone); }
.tk-tools__label { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); padding:.95rem 1.2rem .65rem; border-bottom:1px solid var(--line); }
.tk-tool { display:flex; align-items:center; gap:.85rem; text-align:left; padding:1.05rem 1.2rem; background:none; border:none; border-bottom:1px solid var(--line);
  font-size:.92rem; font-weight:600; color:var(--text); transition:background .2s, color .2s; }
.tk-tool svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex-shrink:0; }
.tk-tool__badge { margin-left:auto; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid currentColor; padding:.15em .5em; opacity:.7; flex-shrink:0; }
.tk-tool:hover { background:color-mix(in srgb, var(--lime) 16%, transparent); }
.tk-tool.is-active { background:var(--ink); color:var(--bone); }
.tk-detail { padding:clamp(1.3rem,2.4vw,2rem); min-width:0; }
/* toolkit section is content-dense — keep it tight so the bigger preview still fits one screen */
#services { padding-block:clamp(1.4rem,2.6vw,2.2rem); }
#services .section-head { margin-bottom:clamp(1.1rem,2.2vw,1.7rem); }
.tk-anim { animation:tkIn .35s var(--ease); }
@keyframes tkIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.tk-title { font-family:var(--font-display); font-size:clamp(1.5rem,2.3vw,2.1rem); font-weight:600; letter-spacing:-0.02em; line-height:1; margin-bottom:1.1rem; text-wrap:balance; }
.tk-desc { font-size:1rem; color:var(--text-muted); line-height:1.55; margin-bottom:1.4rem; text-wrap:pretty; }
/* copy (left) beside a crisp stylised preview (right) — height = the taller one */
.tk-detail__cols { display:grid; grid-template-columns:minmax(0,0.66fr) minmax(0,1.34fr); gap:clamp(1.4rem,2.4vw,2.4rem); align-items:center; }
.tk-detail__info { display:flex; flex-direction:column; }
.tk-desc { margin-bottom:1.2rem; }
.tk-features { grid-template-columns:1fr; margin-bottom:1.4rem; }
.tk-learn { align-self:flex-start; margin-bottom:0; }
/* mobile toolkit/tool pickers — custom themed dropdowns; hidden until phones (see 760px block) */
.tk-dd { display:none; position:relative; }
.tk-dd__toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em; line-height:1.2; text-align:left;
  padding:.9rem 1rem; border:2px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; }
.tk-dd__value { display:inline-flex; align-items:center; gap:.5em; min-width:0; }
.tk-dd--group .tk-dd__value { text-transform:uppercase; font-weight:500; }
.tk-dd__chev { width:.7rem; height:.7rem; flex-shrink:0; transition:transform .2s var(--ease); }
.tk-dd.is-open .tk-dd__chev { transform:rotate(180deg); }
.tk-dd__badge { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid currentColor; padding:.15em .5em; opacity:.7; font-style:normal; flex-shrink:0; }
/* the themed open menu */
.tk-dd__menu { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40; margin:0; padding:0; list-style:none;
  background:var(--paper); border:2px solid var(--ink); box-shadow:var(--sh-card);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
.tk-dd.is-open .tk-dd__menu { opacity:1; visibility:visible; transform:none; }
.tk-dd__opt { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.85rem 1rem;
  font-size:.92rem; font-weight:600; color:var(--text); cursor:pointer; border-bottom:1px solid var(--line); }
.tk-dd__opt:last-child { border-bottom:none; }
.tk-dd--group .tk-dd__opt { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; font-weight:500; }
.tk-dd__opt:hover { background:color-mix(in srgb, var(--lime) 16%, transparent); }
.tk-dd__opt.is-active { background:var(--lime); color:var(--lime-ink); }
.tk-dd__opt.is-active .tk-dd__badge { opacity:.85; }
/* mid widths: 4 tabs → 2×2 grid */
@media (max-width:1080px){
  .tk-tabs { grid-template-columns:repeat(2,1fr); }
  .tk-tab { border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); }
  .tk-tab:nth-child(2n) { border-right:none; }
  .tk-tab:nth-last-child(-n+2) { border-bottom:none; }
}
@media (max-width:1024px){
  .tk-panel { grid-template-columns:1fr; }
  .tk-tools { border-right:none; border-bottom:2px solid var(--ink); }
  .tk-detail__cols { grid-template-columns:1fr; gap:1.4rem; }
}
/* small screens: single-column tabs */
@media (max-width:600px){
  /* compact 2×2 tab grid so the tabs don't eat a whole screen */
  .tk-tabs { grid-template-columns:1fr 1fr; }
  .tk-tab { border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:.7rem .75rem; gap:.5em; }
  .tk-tab b { font-size:.82rem; line-height:1.15; }
  .tk-tab:nth-child(2n) { border-right:none; }
  .tk-tab:nth-last-child(-n+2) { border-bottom:none; }
  .tk-detail { padding:1.1rem 1rem 1.3rem; }
  .tk-learn { width:100%; }
}
@media (max-width:760px){
  /* phones: swap the tab grid + chip row for two compact dropdowns
     (toolkit picker above the panel, tool picker as the panel's header bar) */
  .tk-tabs, .tk-tools { display:none; }
  .tk-dd { display:block; }
  .tk-dd--group { margin-bottom:6px; }
  .tk-dd--tool .tk-dd__toggle { border-width:0 0 2px 0; }   /* reads as the panel's header bar */
  .tk-panel { box-shadow:none; }
  /* the dropdown already names the tool — drop the duplicate eyebrow, tighten the title */
  .tk-detail .svc-num { display:none; }
  .tk-detail .tk-title { font-size:1.4rem; margin-bottom:.8rem; }
  /* detail reads: title → graph → description/features → Open tool */
  .tk-detail__cols { display:flex; flex-direction:column; gap:1.1rem; }
  .tk-detail__cols .svc-window { order:-1; }
  /* slimmer preview chrome so the mock fills the frame */
  .tk-detail .svc-window__bar { padding:.45rem .7rem; }
  .tk-detail .svc-window__body { padding:.55rem; }
}

/* shared bits still used by the toolkit detail (svc-num, features, window) */
.svc-num { display:flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.74rem; color:var(--text); letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.1rem; }
.svc-num__sq { width:.55em; height:.55em; background:var(--lime); border:1px solid var(--ink); }
.svc-features { display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.2rem; margin-bottom:1.8rem; }
.svc-features li { display:flex; gap:.6em; font-size:.9rem; color:var(--text); line-height:1.4; }
.svc-features li svg { width:1em; height:1em; stroke:var(--ink); stroke-width:2.6; fill:none; flex-shrink:0; margin-top:.2em; }
.svc-window { position:relative; overflow:hidden; background:#141410; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--lime); }
.svc-window__bar { display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem; background:#1c1c16; border-bottom:2px solid var(--ink); }
.svc-window__dots { display:flex; gap:.4rem; }
.svc-window__dots i { width:9px; height:9px; border-radius:50%; background:#444; }
.svc-window__dots i:first-child { background:var(--lime); }
.svc-window__path { font-family:var(--font-mono); font-size:.7rem; color:#8a8778; letter-spacing:.02em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-window__live { margin-left:auto; display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--lime-ink); background:var(--lime); padding:.25em .7em; }
.svc-window__live svg { width:.85em; height:.85em; }
.svc-window__body { padding:1rem 1.1rem; background:#141410; }
.svc-window__body > svg { width:100%; height:auto; }

/* screenshot frame — real image drops into images/tools/<slug>.png,
   the placeholder shows until that file exists. The full screenshot is shown
   at its natural proportions (no crop); the frame grows to fit it. */
/* stylised mini-dashboard — one uniform size for every tool */
.tool-shot { position:relative; width:100%; aspect-ratio:720 / 420; display:grid; place-items:center;
  background:#0f0f0c; border:1px dashed #3a3a30; border-radius:6px; overflow:hidden; }
.tool-shot .svcviz { width:100%; height:100%; display:block; }
.tool-shot__ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; text-align:center; padding:1rem; }
.tool-shot__ph-label { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6f6d61; }
.tool-shot__ph code { font-family:var(--font-mono); font-size:.64rem; color:var(--lime); background:rgba(48,176,120,.1);
  border:1px solid rgba(48,176,120,.28); border-radius:4px; padding:.35em .6em; max-width:100%; word-break:break-all; }
.mock-grid { font-family:var(--font-mono); font-size:.72rem; }
.mock-grid__head, .mock-grid__row { display:grid; grid-template-columns:1.3fr .9fr .9fr .5fr .9fr; gap:.6rem; align-items:center; padding:.55rem .2rem; }
.mock-grid__head { color:#8a8778; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid #33332a; }
.mock-grid__row { border-bottom:1px solid #26261f; color:#cfccbe; }
.mg-inst { color:#f2efe6; } .mg-num { color:#fff; }
.mg-tag { justify-self:start; font-size:.58rem; letter-spacing:.04em; padding:.2em .6em; }
.mg-tag--contracted { color:#06231a; background:#30B078; }
.mg-tag--forecasted { color:#0a1822; background:#7898B0; }
.mg-tag--potential  { color:#241204; background:#F8C000; }

/* ════════════════════════ BLOG — editorial swipe rail ════════
   Cards rendered by js/blog.js from BLOG_POSTS (js/blog-data.js).
   Each card carries a logo-palette accent via .blog-card--{colour}.
   Accent map (also used by the article modal). --accent-ink is the dark
   on-colour text so chips/buttons stay legible on every hue and in dark mode. */
.blog-card--green  { --accent:var(--green);  --accent-ink:#06231A; --accent-soft:rgba(48,176,120,.16); }
.blog-card--orange { --accent:var(--orange); --accent-ink:#2a1402; --accent-soft:rgba(232,136,48,.16); }
.blog-card--yellow { --accent:var(--yellow); --accent-ink:#241f02; --accent-soft:rgba(248,192,0,.20); }
.blog-card--blue   { --accent:var(--blue);   --accent-ink:#0e2230; --accent-soft:rgba(120,152,176,.22); }

.blog__viewport { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  scroll-padding-inline-start:max(var(--pad-x), calc(50vw - var(--container) / 2 + var(--pad-x)));
  -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:clamp(1.6rem,3vw,2.4rem); }
.blog__viewport::-webkit-scrollbar { display:none; }
.blog__track { display:flex; gap:clamp(1rem,2.4vw,1.8rem); list-style:none; margin:0;
  padding:.6rem max(var(--pad-x), calc(50vw - var(--container) / 2 + var(--pad-x))) 1.6rem; width:max-content; }

/* editorial split card: picture beside the words (stacks on mobile) */
.blog-card { position:relative; flex:0 0 min(92vw, 760px); scroll-snap-align:start; cursor:pointer;
  display:grid; grid-template-columns:1.02fr 1fr; background:var(--paper);
  border:2px solid var(--ink); box-shadow:var(--sh-card); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.blog-card::before { content:''; position:absolute; inset:0 0 auto 0; height:6px; background:var(--accent); z-index:2; }
.blog-card:hover, .blog-card:focus-visible { transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--accent); outline:none; }

.blog-card__media { position:relative; display:block; min-height:100%; overflow:hidden;
  border-right:2px solid var(--ink);
  background:linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent) 10%, var(--paper))); }
.blog-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease); }
.blog-card:hover .blog-card__media img { transform:scale(1.04); }
/* branded fallback shown when there is no picture (img absent or failed) */
.blog-card__glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-logo); font-size:3rem; font-weight:700; letter-spacing:-.02em;
  color:color-mix(in srgb, var(--accent) 44%, transparent); }
.blog-card__badge { position:absolute; left:0; top:0; z-index:1; font-family:var(--font-mono);
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent); border:2px solid var(--ink); border-left:none; border-top:none;
  padding:.42em .9em; }

.blog-card__body { display:flex; flex-direction:column; gap:.75rem; padding:clamp(1.3rem,2.6vw,1.9rem); }
.blog-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.blog-card__tag { color:var(--accent-ink); background:var(--accent); border:2px solid var(--ink);
  padding:.35em .7em; font-weight:600; letter-spacing:.1em; }
.blog-card__metasep { position:relative; padding-left:.9rem; }
.blog-card__metasep::before { content:''; position:absolute; left:.28rem; top:50%; width:4px; height:4px;
  transform:translateY(-50%); border-radius:50%; background:var(--accent); }
.blog-card__title { font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.5rem); font-weight:600;
  line-height:1.14; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.blog-card__excerpt { font-size:.94rem; line-height:1.58; color:var(--text-muted); text-wrap:pretty; }
/* bright accent button → always legible (light + dark) and clearly clickable */
.blog-card__more { align-self:flex-start; margin-top:.35rem; display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1.1em; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink); transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
.blog-card:hover .blog-card__more { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.blog-card__more svg { width:1.1em; height:1.1em; transition:transform .3s var(--ease); }
.blog-card:hover .blog-card__more svg { transform:translateX(3px); }

/* control row: swipe hint (left) + prev/next arrows (right) */
.blog-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:clamp(1rem,2vw,1.5rem); }
.blog-controls[hidden] { display:none; }   /* auto-hide when nothing to swipe (e.g. one post) */
.blog-hint { display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
.blog-hint__arrows { display:inline-flex; gap:.18em; }
.blog-hint__arrows span { width:.42em; height:.42em; border-top:2px solid var(--green); border-right:2px solid var(--green);
  transform:rotate(45deg); opacity:.35; animation:blogSwipe 1.4s var(--ease) infinite; }
.blog-hint__arrows span:nth-child(2){ animation-delay:.18s; }
.blog-hint__arrows span:nth-child(3){ animation-delay:.36s; }
@keyframes blogSwipe { 0%,100% { opacity:.25; } 50% { opacity:1; } }
.blog-nav { display:flex; gap:.6rem; }
.blog-nav__btn { display:inline-flex; align-items:center; justify-content:center; width:2.7em; height:2.7em;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s; }
.blog-nav__btn svg { width:1.15em; height:1.15em; }
.blog-nav__btn:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--green); }
.blog-nav__btn:active:not(:disabled) { transform:translate(0,0); box-shadow:0 0 0 var(--ink); }
.blog-nav__btn:disabled { opacity:.32; cursor:default; }
@media (prefers-reduced-motion:reduce){ .blog-hint__arrows span { animation:none; } }
@media (max-width:720px){
  .blog-card { grid-template-columns:1fr; flex-basis:min(86vw, 420px); }
  .blog-card__media { aspect-ratio:16/10; min-height:0; border-right:none; border-bottom:2px solid var(--ink); }
  .blog-endcap { flex-basis:min(80vw, 340px); }
}

/* "View all insights" link under the section lead */
.blog-viewall { margin-top:1.1rem; }

/* end-cap tile: the last frame in the rail → routes to the full Insights library.
   Always present, so the rail reads as a carousel even with a single post. */
.blog-endcap { position:relative; flex:0 0 min(72vw, 360px); scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:center; gap:.9rem;
  border:2px solid var(--ink); background:var(--ink); color:var(--bone); box-shadow:var(--sh-card);
  padding:clamp(1.6rem,3vw,2.3rem); text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.blog-endcap::before { content:''; position:absolute; inset:0 0 auto 0; height:6px; background:var(--green); z-index:2; }
.blog-endcap:hover, .blog-endcap:focus-within { transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--green); }
.blog-endcap__eyebrow { font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); }
.blog-endcap__title { font-family:var(--font-display); font-size:clamp(1.3rem,2vw,1.6rem); font-weight:600;
  line-height:1.14; letter-spacing:-.015em; color:var(--bone); text-wrap:balance; }
.blog-endcap__cta { display:inline-flex; align-items:center; gap:.5em; margin-top:.3rem; font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green); text-decoration:none; }
.blog-endcap__cta svg { width:1.1em; height:1.1em; }
/* stretched link → the whole tile is clickable from one real anchor */
.blog-endcap__cta::after { content:''; position:absolute; inset:0; }
.blog-endcap__cta:focus-visible { outline:2px solid var(--green); outline-offset:3px; }

/* ════════════════════════ BLOG — article body ════════ */
/* Shared by the blog article page (blog.html / css/blog-page.css). The old
   on-page modal was replaced by dedicated article pages, so its .blog-modal*
   rules were removed; these .blog-article* rules style the post body. */
.blog-article { display:flex; flex-direction:column; gap:1rem; }
.blog-article p { font-size:1.02rem; line-height:1.65; color:var(--text); text-wrap:pretty; }
.blog-article p:first-child { font-size:1.12rem; color:var(--ink); font-weight:500; }
.blog-article__list { display:flex; flex-direction:column; gap:.7rem; padding-left:0; list-style:none; }
.blog-article__list li { position:relative; padding-left:1.6rem; font-size:1rem; line-height:1.6; color:var(--text-muted); }
.blog-article__list li::before { content:''; position:absolute; left:0; top:.5em; width:.7rem; height:.7rem;
  background:var(--accent); border:1.5px solid var(--ink); }

/* ════════════════════════ FOUNDER ════════ */
.founder-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.founder-quote .h2 { margin:1.2rem 0 1.4rem; }
.founder-quote__line { max-width:15ch; }
.founder-card { background:var(--paper); border:2px solid var(--ink); box-shadow:var(--sh-card); padding:clamp(1.6rem,2.5vw,2.2rem); display:flex; flex-direction:column; gap:1.1rem; }
.founder-card__photo { position:relative; width:112px; height:112px; background:var(--lime); border:2px solid var(--ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--lime-ink); }
.founder-card__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.founder-card__name { font-family:var(--font-display); font-size:1.45rem; font-weight:600; letter-spacing:-0.01em; }
.founder-card__role { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); margin-top:.3em; }
.founder-card__bio { font-size:.95rem; color:var(--text-muted); line-height:1.55; }
.founder-card__link { align-self:flex-start; }
.founder-card__link svg { width:1.05em; height:1.05em; }
@media (max-width:900px){ .founder-grid { grid-template-columns:1fr; } .founder-card { max-width:420px; } }

/* ════════════════════════ CONTACT ════════ */
.contact-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1.6rem; }
.contact-info .h2 { font-size:clamp(1.9rem,3vw,2.8rem); }
.contact-detail { display:flex; gap:.9rem; align-items:flex-start; }
.contact-detail__icon { width:44px; height:44px; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink); }
.contact-detail__icon svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; }
.contact-detail__label { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.2em; }
.contact-detail__value { font-size:1.05rem; font-weight:700; }
.contact-callout { padding:1.4rem 1.5rem; background:var(--lime); border:2px solid var(--ink); color:var(--lime-ink); }
.contact-callout h4 { font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-bottom:.5rem; }
.contact-callout p { font-size:.9rem; line-height:1.55; }
.form-card { background:var(--paper); border:2px solid var(--ink); padding:clamp(1.6rem,3vw,2.5rem); box-shadow:var(--sh-card); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.form-label { font-size:.84rem; font-weight:700; }
.form-label .req { color:var(--neg); }
.form-input,.form-select,.form-textarea { width:100%; padding:.7em .9em; font:inherit; font-size:.95rem; font-weight:500; color:var(--text);
  background:var(--bone); border:2px solid var(--ink); transition:box-shadow .15s; }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-soft); }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; box-shadow:4px 4px 0 var(--lime); }
.form-textarea { resize:vertical; min-height:110px; }
.interest-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.3rem; }
.interest-tag { display:inline-flex; align-items:center; gap:.45em; font-size:.85rem; color:var(--ink); border:2px solid var(--ink); padding:.45em .9em; cursor:pointer; transition:background .2s; }
.interest-tag:has(input:checked) { background:var(--lime); color:var(--lime-ink); }
.interest-tag input { accent-color:var(--ink); }
.form-submit { width:100%; }
.form-success { display:none; text-align:center; padding:2.5rem 1rem; }
.form-success.visible { display:block; }
.form-success__icon { display:flex; justify-content:center; margin-bottom:1.2rem; color:var(--ink); }
.form-success__icon svg { width:48px; height:48px; }
.form-success h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:600; margin-bottom:.6rem; }
.form-success p { font-size:.95rem; color:var(--text-muted); line-height:1.55; }

/* ════════════════════════ CTA STRIP ════════ */
.cta-strip { position:relative; background:var(--lime); color:var(--lime-ink); overflow:hidden; text-align:center; border-block:2px solid var(--ink); }
.cta-strip__top { display:none; }
.cta-strip .container { position:relative; z-index:1; }
/* creative animated square mosaic (canvas, drawn by js/cta-anim.js) */
.cta-strip__canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; }
/* soft lime halo keeps the copy crisp over the drifting curves */
.cta-strip::after { content:''; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(70% 62% at 50% 44%, var(--lime) 0%, color-mix(in srgb, var(--lime) 55%, transparent) 46%, transparent 78%); }
.cta-strip h2 { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,4rem); font-weight:600; letter-spacing:-0.03em; line-height:.98; margin-bottom:1rem; color:var(--lime-ink); }
.cta-strip p { font-size:var(--fs-lead); color:var(--lime-ink); opacity:.8; max-width:34em; margin:0 auto 2.2rem; }
.cta-strip__btns { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }
.cta-strip .btn--primary { background:var(--ink); color:var(--bone); border-color:var(--ink); }
.cta-strip .btn--primary:hover { box-shadow:4px 4px 0 var(--lime-ink); }
.cta-strip .btn--on-dark-ghost { color:var(--lime-ink); border-color:var(--lime-ink); }
.cta-strip .btn--on-dark-ghost:hover { background:var(--lime-ink); color:var(--lime); }


/* ════════════════════════ RESPONSIVE ════════ */
@media (max-width:1080px){
  .hero__inner { grid-template-columns:1fr; gap:2.5rem; }
  .hero__visual { max-width:560px; }
  .svc-features { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:760px){
  .form-row { grid-template-columns:1fr; }
  .svc-features { grid-template-columns:1fr; }
  .sector-hotspot { width:44px; height:44px; }
  .sector-tooltip { width:280px; }

  /* tighter section rhythm + app-like touch targets on phones */
  .section { padding-block:clamp(2.2rem,9vw,3rem); }
  .form-input,.form-select,.form-textarea { font-size:16px; }   /* stops iOS zoom-on-focus */
  .form-card { padding:1.25rem 1.05rem 1.4rem; }
  .btn--lg { width:100%; }
  .tp-cta { flex-direction:column; align-items:stretch; text-align:center; }
  .contact-callout { margin-top:.5rem; }

  /* ── MOBILE HERO: bold left-aligned editorial block (matches the desktop identity),
       fits one screen; the black marquee band right below closes it ── */
  .hero { min-height:auto; justify-content:flex-start;
    padding-top:calc(var(--header-h) + 1.1rem); padding-bottom:1.6rem; }
  /* mobile order: eyebrow → globe → headline → sub → CTA → trust.
     display:contents flattens .hero__copy so its children + the globe
     become sibling flex items we can reorder. */
  .hero__inner { display:flex; flex-direction:column; align-items:center; gap:0; }
  .hero__copy { display:contents; text-align:center; }
  .hero__eyebrow { order:1; align-self:center; font-size:.6rem; padding:.45em .85em; margin-bottom:0; }
  .hero__visual { order:2; }
  .hero h1 { order:3; }
  .hero__sub { order:4; }
  .hero__cta { order:5; }
  .hero__trust { order:6; }
  .hero h1 { font-size:clamp(2.05rem,8.6vw,2.65rem); line-height:1; margin-bottom:.8rem; }
  .hero__sub { font-size:.95rem; line-height:1.5; max-width:36ch; margin:0 auto 1.15rem; }
  .hero__cta { flex-direction:column; width:100%; gap:.6rem; align-items:stretch; }
  .hero__cta .btn { width:100%; }
  .hero__trust { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; width:100%;
    max-width:none; margin-top:1.2rem; padding-top:1rem; border-top:2px solid var(--ink); text-align:left; }
  .hero__trust-item { font-size:.72rem; gap:.5em; align-items:flex-start; line-height:1.35; }
  .hero__trust-item svg { width:1em; height:1em; margin-top:.1em; }
  /* globe now sits between the eyebrow and the headline — large enough to read
     as a globe on a phone, with margins tightened so the hero still lands in
     roughly one screen */
  .hero__visual { display:block; width:min(76vw,310px); margin:.2rem auto .8rem; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .reveal-up,.reveal-row>*,.hero__sub,.hero__cta,.hero__visual { opacity:1!important; transform:none!important; }
  .hero h1 .ln > span { transform:none!important; }
  .marquee__track { animation:none!important; }
}

/* ════════════════════════ FAQ ════════ */
.faq { max-width:840px; margin:0 auto; border-top:2px solid var(--ink); }
.faq__item { border-bottom:2px solid var(--ink); }
.faq__q { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; cursor:pointer;
  font-family:var(--font-display); font-size:clamp(1.05rem,1.7vw,1.3rem); font-weight:600; letter-spacing:-0.01em;
  line-height:1.25; color:var(--ink); padding:1.3rem 0; list-style:none; }
.faq__q::-webkit-details-marker { display:none; }
.faq__q:hover { color:var(--green-3); }
.faq__icon { position:relative; width:1rem; height:1rem; flex-shrink:0; }
.faq__icon::before, .faq__icon::after { content:''; position:absolute; background:currentColor; transition:transform .25s var(--ease); }
.faq__icon::before { top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.faq__icon::after { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.faq__item[open] .faq__icon::after { transform:translateX(-50%) scaleY(0); }
.faq__a { padding:0 0 1.4rem; max-width:70ch; }
.faq__a p { color:var(--text-muted); line-height:1.6; font-size:1rem; text-wrap:pretty; }
@media (max-width:760px){
  .faq__q { font-size:1.05rem; padding:1.05rem 0; }
  .faq__a { padding-bottom:1.1rem; }
  .faq__a p { font-size:.95rem; }
}