/* ==========================================================================
   CloudTech Automation — main.css
   Depends on tokens.css. No colour, size or spacing value is hard-coded here.
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, li { text-wrap: pretty; }
ul[role="list"] { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
h1 { font-size: var(--step-6); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-weight: 800; }
h2 { font-size: var(--step-4); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--step-1); }

a { color: var(--text-link); text-underline-offset: 0.22em; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-accent-text); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-sm); top: -100%; z-index: var(--z-modal);
  background: var(--ink-900); color: var(--white);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); color: var(--white); }

/* ---------- Layout ---------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }

/* ---------- Signature devices ---------- */
.grid-underlay { position: relative; isolation: isolate; }
.grid-underlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--grid-line) var(--hairline), transparent var(--hairline));
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 var(--grid-shift, 0px);
  will-change: background-position;
}
.grid-underlay--fade::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.ticks { position: relative; }
.ticks::before, .ticks::after {
  content: ""; position: absolute; width: var(--tick-len); height: var(--tick-len);
  border-color: var(--brand-accent); border-style: solid; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ticks::before { top: -1px; left: -1px; border-width: var(--rule) 0 0 var(--rule); transform: translate(4px, 4px); }
.ticks::after { bottom: -1px; right: -1px; border-width: 0 var(--rule) var(--rule) 0; transform: translate(-4px, -4px); }
.ticks:hover::before, .ticks:hover::after,
.ticks:focus-within::before, .ticks:focus-within::after { opacity: 1; transform: translate(0, 0); }

.rail {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--tracking-rail); text-transform: uppercase;
  color: var(--text-muted); display: inline-flex; align-items: center;
  gap: var(--space-2xs); line-height: 1;
}
.rail::before { content: ""; width: 18px; height: var(--rule); background: var(--brand-accent); flex: none; }
.rail--plain::before { display: none; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Placeholder marker (brief §24) ---------- */
[data-placeholder] { position: relative; outline: 1px dashed var(--brand-signal); outline-offset: 3px; }
[data-placeholder]::after {
  content: "PLACEHOLDER"; position: absolute; top: -0.7rem; left: 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--brand-signal-text); background: var(--bg); padding-inline: 3px; z-index: 2;
}
html[data-env="production"] [data-placeholder] { outline: none; }
html[data-env="production"] [data-placeholder]::after { content: none; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center;
  padding: 0.85em 1.6em;
  background: var(--brand-accent); color: var(--white);
  border: var(--hairline) solid var(--brand-accent);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.02em; line-height: 1; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--lg { padding: 1.05em 2.1em; font-size: var(--step-0); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn__label { transition: padding-right var(--dur-base) var(--ease-out); }
.btn__tick {
  position: absolute; right: 1em; top: 50%; width: var(--tick-len); height: var(--rule);
  background: currentColor; transform: translateY(-50%) scaleX(0); transform-origin: right center;
  opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--white); }
.btn--secondary:hover { background: transparent; border-color: var(--brand-accent); color: var(--brand-accent-text); }
.btn:hover .btn__tick, .btn:focus-visible .btn__tick { transform: translateY(-50%) scaleX(1); opacity: 1; }
.btn:hover .btn__label, .btn:focus-visible .btn__label { padding-right: calc(var(--tick-len) + 0.5em); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background var(--dur-base) var(--ease-out);
}
.nav[data-scrolled] { background: var(--bg); }
.nav__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 76px; }
.nav__brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.nav__logo--full { width: 200px; }
.nav__logo--mark { display: none; width: 34px; }

.nav__links ul { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; display: block; padding-block: var(--space-2xs);
  font-family: var(--font-display); font-weight: 500; font-size: var(--step--1);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--rule);
  background: var(--brand-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--brand-accent-text); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.nav__cta {
  position: relative; display: inline-flex; align-items: center; padding: 0.75em 1.4em;
  background: var(--brand-accent); color: var(--white);
  border: var(--hairline) solid var(--brand-accent);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  line-height: 1; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav__cta span:first-child { transition: padding-right var(--dur-base) var(--ease-out); }
.nav__cta-tick {
  position: absolute; right: 0.9em; top: 50%; width: var(--tick-len); height: var(--rule);
  background: currentColor; transform: translateY(-50%) scaleX(0); transform-origin: right center;
  opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav__cta:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--white); }
.nav__cta:hover .nav__cta-tick { transform: translateY(-50%) scaleX(1); opacity: 1; }
.nav__cta:hover span:first-child { padding-right: calc(var(--tick-len) + 0.5em); }

.nav__rule { height: var(--hairline); background: var(--border); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.nav[data-scrolled] .nav__rule { opacity: 1; }

.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: var(--hairline) solid var(--border-strong); }
.nav__bars { display: block; width: 18px; }
.nav__bars i { display: block; height: var(--rule); background: var(--text); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.nav__bars i + i { margin-top: 4px; }
[aria-expanded="true"] .nav__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav__bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--ink-900); color: var(--white);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.menu[hidden] { display: grid; }
.menu[data-open] { opacity: 1; visibility: visible; }
.menu__panel { width: min(100% - var(--gutter) * 2, 520px); }
.menu__rail { color: var(--ink-300); margin-bottom: var(--space-lg); }
.menu__list { border-top: var(--hairline) solid var(--border-inverse); }
.menu__list li {
  border-bottom: var(--hairline) solid var(--border-inverse);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i) * var(--stagger));
}
.menu[data-open] .menu__list li { opacity: 1; transform: none; }
.menu__link {
  display: flex; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-sm);
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  color: var(--white); text-decoration: none;
}
.menu__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-rail); color: var(--brand-signal); flex: none; }
.menu__link:hover { color: var(--brand-signal); }
.menu__cta {
  display: inline-flex; margin-top: var(--space-xl); padding: 1em 2em;
  background: var(--brand-accent); color: var(--white);
  font-family: var(--font-display); font-weight: 600; text-decoration: none; line-height: 1;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-block: clamp(3rem, 2rem + 7vw, 7rem) var(--space-3xl); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-3xl); align-items: center; }
.hero__title { margin-top: var(--space-md); }
.hero__line { display: block; }
.hero__em { color: var(--brand-primary-text); }
.hero__lede { margin-top: var(--space-lg); font-size: var(--step-1); color: var(--text-muted); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }


/* ---------- Capability strip ---------- */
.strip { border-block: var(--hairline) solid var(--border); background: var(--bg-alt); }
.strip__inner { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-sm); }
.strip__item {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-muted);
}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.sh { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-end: var(--space-2xl); }
.sh--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); flex-wrap: wrap; }
.sh__title { max-width: 24ch; }
.sh__lede { color: var(--text-muted); font-size: var(--step-1); max-width: 60ch; }

/* ==========================================================================
   MISSION / GLOBAL
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-2xl); margin-bottom: var(--space-3xl); }
.split__lead { display: flex; flex-direction: column; gap: var(--space-sm); }
.split__title { font-size: var(--step-5); margin-top: var(--space-2xs); }
.split__body { display: flex; flex-direction: column; gap: var(--space-md); }
.split__body .lede { font-size: var(--step-1); color: var(--text); }
.split__body p { color: var(--text-muted); max-width: 62ch; }

.mission { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.mission__item { background: var(--surface); border: var(--hairline) solid var(--border); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xs); }
.mission__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-rail); color: var(--brand-accent-text); }
.mission__item h3 { margin-top: var(--space-2xs); }
.mission__item p { color: var(--text-muted); font-size: var(--step--1); }

.countries { margin-top: var(--space-3xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.countries__grid { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.countries__pill {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
  border: var(--hairline) dashed var(--border-strong); padding: 8px 12px;
}
.countries__note { font-size: var(--step--1); color: var(--text-faint); max-width: 60ch; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); }
.svc__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-rail); color: var(--brand-accent-text); }
.svc__title { margin-top: var(--space-2xs); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); }
.svc__tags li {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); border: var(--hairline) solid var(--border); padding: 4px 8px;
}
.svc__link {
  margin-top: var(--space-md); font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); color: var(--brand-accent-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}
.svc__link span { width: var(--tick-len); height: var(--rule); background: currentColor; transition: width var(--dur-base) var(--ease-out); }

/* ==========================================================================
   STATISTICS
   ========================================================================== */
.stats { background: var(--bg); color: var(--text); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.stat { display: flex; flex-direction: column; gap: var(--space-2xs); border-top: var(--rule) solid var(--brand-accent); padding-top: var(--space-md); }
.stat__value { font-family: var(--font-display); font-size: var(--step-6); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-display); }
.stat__label { font-size: var(--step--1); color: var(--text-muted); }
.stats__note { margin-top: var(--space-xl); font-size: var(--step--1); color: var(--text-faint); }

/* ==========================================================================
   TECHNOLOGIES
   ========================================================================== */
.tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.tech__group { border-top: var(--hairline) solid var(--border-strong); padding-top: var(--space-md); }
.tech__group ul { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); }
.tech__group li { font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); color: var(--text); }

/* ==========================================================================
   PROJECTS — horizontal scroll
   ========================================================================== */
.cases {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 380px);
  gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm);
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.cases::-webkit-scrollbar { height: 4px; }
.cases::-webkit-scrollbar-thumb { background: var(--border-strong); }
.case {
  scroll-snap-align: start; background: var(--surface);
  border: var(--hairline) solid var(--border); padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.case__media {
  aspect-ratio: 16 / 10; background: var(--bg-alt);
  border: var(--hairline) dashed var(--border-strong);
  display: grid; place-items: center; margin-bottom: var(--space-sm);
}
.case__ph { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.case__text { color: var(--text-muted); font-size: var(--step--1); }
.cases__hint { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.post { background: var(--surface); border: var(--hairline) solid var(--border); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xs); }
.post h3 { margin-top: var(--space-2xs); }
.post p { color: var(--text-muted); font-size: var(--step--1); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { background: var(--bg); color: var(--text); padding-block: var(--space-3xl); }
.cta__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2xl); flex-wrap: wrap; }
.cta__title { margin-block: var(--space-sm) var(--space-sm); max-width: 18ch; }
.cta__text { color: var(--text-muted); max-width: 52ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft { background: var(--bg); color: var(--text); padding-block: var(--space-3xl) var(--space-lg); border-top: var(--rule) solid var(--brand-accent); }
.ft__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-3xl); padding-bottom: var(--space-2xl); }
.ft__brand img { width: 240px; }
.ft__positioning { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; max-width: 24ch; }
.ft__caps { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); margin-top: var(--space-lg); }
.ft__caps li {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  border: var(--hairline) solid var(--border); padding: 5px 9px;
}
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.ft__col ul { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); }
.ft__col li { font-size: var(--step--1); color: var(--text-muted); }
.ft__col a { color: var(--text-muted); text-decoration: none; }
.ft__col a:hover { color: var(--brand-signal); }

.ft__block { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border: var(--hairline) solid var(--border-strong); }
.ft__cell { padding: var(--space-xs) var(--space-sm); border-right: var(--hairline) solid var(--border-strong); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft__cell:last-child { border-right: 0; }
.ft__key { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-faint); }
.ft__val { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; color: var(--text); }

.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: center; padding-top: var(--space-md); }
.ft__legal p { font-size: var(--step--2); color: var(--text-faint); }
.ft__legal ul { display: flex; gap: var(--space-md); }
.ft__legal a { font-size: var(--step--2); color: var(--text-faint); text-decoration: none; }
.ft__legal a:hover { color: var(--brand-signal); }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .hero__figure { max-width: 460px; }
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ft__top { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

@media (max-width: 620px) {
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .ft__block { grid-template-columns: 1fr 1fr; }
  .ft__cell { border-bottom: var(--hairline) solid var(--border-strong); }
  .ft__cell:nth-child(2n) { border-right: 0; }
  .ft__cell--wide { grid-column: 1 / -1; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .nav__logo--full { display: none; }
  .nav__logo--mark { display: block; }
  .nav__cta { display: none; }
  .nav__inner { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- Late additions ---------- */
.btn--primary { /* default .btn styling; class kept for explicitness */ }
.nav__logo { height: auto; }
.hero__copy { min-width: 0; }
.cta__action { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }

/* ==========================================================================
   HERO — rotator, meta, animated production line
   ========================================================================== */

/* Rotating verb. Masked track, no layout shift. */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1em;
  color: var(--brand-accent-text);
}
.rotator__track {
  display: grid;
  animation: rotator-cycle 9s var(--ease-in-out) infinite;
}
.rotator__word { display: block; height: 1em; line-height: 1; }

@keyframes rotator-cycle {
  0%, 18%   { transform: translateY(0); }
  25%, 43%  { transform: translateY(-1em); }
  50%, 68%  { transform: translateY(-2em); }
  75%, 93%  { transform: translateY(-3em); }
  100%      { transform: translateY(-4em); }
}

.hero__figure { margin: 0; }


/* SCADA */




@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.25; }
}

/* ==========================================================================
   SERVICE ILLUSTRATIONS
   ========================================================================== */
.ill { width: 100%; max-width: 190px; height: auto; margin-inline: auto; overflow: visible; }
.ill * { vector-effect: non-scaling-stroke; }

/* shared ink */
/* fill-box only where a percentage/keyword origin is wanted */
.ill__fluid, .ill__bars rect { transform-box: fill-box; }
.ill__gear, .ill__tank, .ill__sheet, .ill__screen, .ill__ctrl { fill: var(--surface); stroke: var(--ink-500); stroke-width: 1.5; }
.ill__teeth path, .ill__crops path, .ill__legs path { stroke: var(--ink-500); stroke-width: 2; fill: none; stroke-linecap: round; }

/* 01 machine */
.ill--machine .ill__gear--a, .ill--machine .ill__teeth--a { transform-origin: 40px 40px; animation: spin 6s linear infinite; }
.ill--machine .ill__gear--b, .ill--machine .ill__teeth--b { transform-origin: 80px 52px; animation: spin-r 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }
.ill__rail { stroke: var(--ink-300); stroke-width: 2; }
.ill__slide { fill: var(--brand-accent); animation: slide 3.4s var(--ease-in-out) infinite; }
@keyframes slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(66px); } }

/* 02 process */
.ill__fluid { fill: var(--brand-primary); opacity: 0.7; animation: fill 4.5s var(--ease-in-out) infinite; transform-origin: bottom; }
@keyframes fill { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.ill__pipe { fill: none; stroke: var(--ink-500); stroke-width: 3; }
.ill__valve { fill: var(--surface); stroke: var(--brand-accent); stroke-width: 2; }
.ill__valve-x { stroke: var(--brand-accent); stroke-width: 1.5; }
.ill__pid { fill: none; stroke: var(--brand-signal); stroke-width: 1.5; stroke-dasharray: 130; stroke-dashoffset: 130; animation: draw3 4s linear infinite; }
@keyframes draw3 { 0% { stroke-dashoffset: 130; } 70%,100% { stroke-dashoffset: 0; } }

/* 03 cad */
.ill__title-block { fill: none; stroke: var(--ink-500); stroke-width: 1.5; }
.ill__draw path, .ill__draw rect { fill: none; stroke: var(--brand-primary); stroke-width: 1.5;
  stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw4 5s var(--ease-out) infinite; }
@keyframes draw4 { 0% { stroke-dashoffset: 120; } 60%,100% { stroke-dashoffset: 0; } }
.ill__dim { fill: none; stroke: var(--brand-accent); stroke-width: 1; }

/* 04 robot */
.ill__ped { fill: var(--ink-700); }
.ill__seg { fill: var(--brand-signal); }
.ill__pivot { fill: var(--ink-700); }
.ill__grip { stroke: var(--ink-500); stroke-width: 2.5; stroke-linecap: round; }
.ill__part { fill: var(--brand-accent-wash); stroke: var(--brand-accent); stroke-width: 1.5; }
.ill__arc { fill: none; stroke: var(--brand-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.ill--robot .ill__arm-s { transform-origin: 48px 60px; animation: r-shoulder 5s var(--ease-in-out) infinite; }
.ill--robot .ill__arm-f { transform-origin: 48px 30px; animation: r-forearm 5s var(--ease-in-out) infinite; }
@keyframes r-shoulder { 0%,10% { transform: rotate(-6deg); } 45%,60% { transform: rotate(18deg); } 92%,100% { transform: rotate(-6deg); } }
@keyframes r-forearm  { 0%,10% { transform: rotate(4deg); } 45%,60% { transform: rotate(-16deg); } 92%,100% { transform: rotate(4deg); } }

/* 05 irrigation */
.ill__ground { stroke: var(--ink-300); stroke-width: 2; }
.ill__riser { stroke: var(--ink-500); stroke-width: 3; }
.ill__head { fill: var(--brand-accent); }
.ill__spray path { fill: none; stroke: var(--brand-primary); stroke-width: 1.5; opacity: 0.55;
  stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw5 2.6s linear infinite; }
@keyframes draw5 { 0% { stroke-dashoffset: 80; opacity: 0; } 30% { opacity: 0.6; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ill__drops circle { fill: var(--brand-primary); animation: drop 2.2s ease-in infinite; }
.ill__drops circle:nth-child(2) { animation-delay: 0.5s; }
.ill__drops circle:nth-child(3) { animation-delay: 1s; }
@keyframes drop { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

/* 06 iiot */
.ill__mesh { fill: none; stroke: var(--ink-300); stroke-width: 1.5; }
.ill__hub-n { fill: var(--brand-primary); }
.ill__node { fill: var(--surface); stroke: var(--ink-500); stroke-width: 1.5; }
.ill__ping circle { fill: none; stroke: var(--brand-primary); stroke-width: 1.5; transform-origin: 60px 22px;
  animation: ping 2.6s var(--ease-out) infinite; }
.ill__ping circle:nth-child(2) { animation-delay: 1.3s; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
.ill__pkt { fill: none; stroke: var(--brand-signal); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 8 42; animation: pkt 2.2s linear infinite; }
@keyframes pkt { to { stroke-dashoffset: -50; } }

/* 07 ai scada */
.ill__base-line { stroke: var(--ink-200); stroke-width: 1; stroke-dasharray: 3 3; }
.ill__wave { fill: none; stroke: var(--brand-primary); stroke-width: 1.5; stroke-linejoin: round; }
.ill__anom { fill: none; stroke: var(--brand-accent); stroke-width: 2; transform-origin: 62px 20px;
  animation: ping2 2.4s var(--ease-out) infinite; }
@keyframes ping2 { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.ill__scan { stroke: var(--brand-signal); stroke-width: 1.5; opacity: 0.7;
  animation: scan 4s var(--ease-in-out) infinite; }
@keyframes scan { 0%,100% { transform: translateX(0); } 50% { transform: translateX(100px); } }
.ill__txt { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-anchor: middle; fill: var(--brand-accent-text); }

/* 08 dashboard */
.ill__bar-base { stroke: var(--ink-300); stroke-width: 1.5; }
.ill__bars rect { fill: var(--brand-primary); transform-origin: bottom; }
.ill__bars rect:nth-child(1) { animation: bar 3s var(--ease-in-out) infinite; }
.ill__bars rect:nth-child(2) { animation: bar 3s var(--ease-in-out) infinite 0.3s; }
.ill__bars rect:nth-child(3) { animation: bar 3s var(--ease-in-out) infinite 0.6s; }
.ill__bars rect:nth-child(4) { animation: bar 3s var(--ease-in-out) infinite 0.9s; }
@keyframes bar { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.ill__dot { fill: var(--status-ok); animation: blink 1.6s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .ill * { animation: none !important; }
  .ill__draw path, .ill__draw rect, .ill__pid, .ill__spray path { stroke-dashoffset: 0; opacity: 0.6; }
  .ill__fluid, .ill__bars rect { transform: scaleY(0.7); }
}

/* ==========================================================================
   CASE MEDIA + TAGS
   ========================================================================== */
.case__media { padding: 0; overflow: hidden; border: var(--hairline) solid var(--border); background: var(--bg-alt); }
.cmed { width: 100%; height: auto; display: block; }
.cmed__grid { stroke: var(--grid-line); stroke-width: 1; }
.cmed__box { fill: var(--surface); stroke: var(--ink-500); stroke-width: 2; }
.cmed__wire, .cmed__loop { fill: none; stroke: var(--brand-accent); stroke-width: 2; }
.cmed__pt { fill: var(--brand-primary); }
.cmed__bars rect { fill: var(--brand-primary); opacity: 0.85; }
.case__media--b .cmed__loop { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw6 4s var(--ease-out) infinite; }
@keyframes draw6 { 0% { stroke-dashoffset: 320; } 65%,100% { stroke-dashoffset: 0; } }

/* Lets a real photo or embedded video drop straight into .case__media later
   with no extra markup — just replace the placeholder <svg> with an
   <img>, <video> or <iframe>. */
.case__media img, .case__media video, .case__media iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}

.case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); }
.case__tags li {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); border: var(--hairline) solid var(--border); padding: 4px 8px;
}
.post__meta { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; color: var(--text-faint); margin-top: var(--space-2xs); }
.post .svc__link { margin-top: var(--space-sm); }

/* ==========================================================================
   GEOFLEXHEAT FEATURE - dark spotlight section on the homepage
   Header bar, text + two equal photos, facts strip, involvement + scope.
   Everything shares the container edges so nothing floats.
   ========================================================================== */
.gfx { background: var(--bg); color: var(--text); }

.gfx__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-md); padding-bottom: var(--space-md);
  border-bottom: var(--hairline) solid var(--border);
}
.gfx__logo { display: block; width: 220px; max-width: 60%; height: auto; }
.gfx__tag {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-muted);
}

.gfx__intro {
  margin-top: var(--space-2xl);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm); align-items: start;
}
.gfx__title { font-size: var(--step-4); max-width: 24ch; }
.gfx__lede { color: var(--text-muted); max-width: 56ch; }
.gfx__cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Two equal photos in parallel, full width, under the intro */
.gfx__shot { margin: var(--space-2xl) 0 0; min-width: 0; }
.gfx__photos {
  --cut: 26px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.gfx__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.gfx__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfx__photo:first-child img { object-position: 50% 55%; }
.gfx__photo:last-child img { object-position: 50% 40%; }
.gfx__shot figcaption {
  margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.04em; color: var(--text-muted);
}

.gfx__block {
  margin: var(--space-2xl) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hairline) solid var(--border-strong);
  border-left: var(--hairline) solid var(--border-strong);
}
.gfx__cell {
  padding: var(--space-sm) var(--space-md); min-width: 0;
  border-right: var(--hairline) solid var(--border-strong);
  border-bottom: var(--hairline) solid var(--border-strong);
}
.gfx__cell dt {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-muted);
}
.gfx__cell dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }

/* Involvement text + numbered technical scope */
.gfx__scope {
  margin-top: var(--space-3xl);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-2xl); align-items: start;
}
.gfx__scope-title { margin-top: var(--space-sm); font-size: var(--step-2); max-width: 22ch; }
.gfx__scope-text p:not(.rail) { margin-top: var(--space-md); color: var(--text-muted); max-width: 52ch; }
.gfx__scope-text .gfx__scope-title + p { margin-top: var(--space-md); }
.gfx__scope-list .rail { margin-bottom: var(--space-md); }
.gfx__duties { margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--border-strong); }
.gfx__duty {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm);
  padding: var(--space-md) 0; border-bottom: var(--hairline) solid var(--border-strong);
}
.gfx__duty-n {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); color: var(--brand-accent); padding-top: 0.45em;
}
.gfx__duty h4 { font-size: var(--step-0); font-weight: 600; }
.gfx__duty p { margin-top: 2px; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }

.gfx__ack {
  margin-top: var(--space-2xl); padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--border);
  font-size: var(--step--2); line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 1080px) {
  .gfx__intro { grid-template-columns: 1fr; gap: var(--space-lg); }
  .gfx__scope { grid-template-columns: 1fr; gap: var(--space-xl); }
  .gfx__block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .gfx__block { grid-template-columns: 1fr; }
}

/* Four-card row: 4 across on wide screens, 2x2 below, never 3+1 */
.posts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .posts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts--four { grid-template-columns: 1fr; } }
.posts__note { margin-top: var(--space-xl); font-size: var(--step--1); color: var(--text-faint); }

/* ==========================================================================
   REVIEW BADGE — visible only while data-env="review"
   ========================================================================== */
.review-badge {
  position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--space-2xs);
  background: var(--ink-900); color: var(--white);
  border: var(--hairline) solid var(--brand-signal);
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em;
  cursor: pointer;
}
.review-badge::before { content: ""; width: 8px; height: 8px; background: var(--brand-signal); flex: none; }
html:not([data-env="review"]) .review-badge { display: none; }
html[data-env="review"][data-highlight] [data-sample] {
  outline: 2px dashed var(--brand-signal); outline-offset: 6px;
}

/* ==========================================================================
   SERVICE CARDS — chamfered plate, cursor highlight, hover colour shift
   The chamfer reads as a machined corner rather than a rounded web card.
   Outer element paints the 1px frame; .svc__body is the surface inside it.
   ========================================================================== */
.svc__card {
  --cut: 24px;
  --frame: var(--border);
  position: relative;
  padding: 1px;
  background: var(--frame);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.svc__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background var(--dur-base) var(--ease-out);
  overflow: hidden;
}

/* Cursor-following highlight. --mx/--my are set from JS. */
.svc__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--brand-accent) 16%, transparent),
    transparent 65%
  );
  transition: opacity var(--dur-base) var(--ease-out);
}
.svc__card:hover .svc__body::before { opacity: 1; }

.svc__body > * { position: relative; z-index: 1; }

/* Corner accent inside the chamfer */
.svc__corner {
  position: absolute;
  top: 0; right: 0;
  width: var(--cut); height: var(--cut);
  background: var(--brand-accent);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: 0;
  transform: translate(6px, -6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 2;
}
.svc__card:hover .svc__corner { opacity: 1; transform: none; }

/* Illustration band — bleeds to the card edges */
.svc__fig {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-2xs);
  background: var(--bg-alt);
  border-bottom: var(--hairline) solid var(--border);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.svc__card p { color: var(--text-muted); font-size: var(--step--1); flex: 1; }

/* ---- Hover state ---- */
.svc__card:hover { --frame: var(--brand-accent); transform: translateY(-4px); }
.svc__card:hover .svc__body { background: var(--surface); }


.svc__card:hover .svc__num { color: var(--brand-accent-text); }
.svc__card:hover .svc__title { color: var(--brand-accent-text); }
.svc__card:hover .svc__tags li { border-color: var(--brand-accent); color: var(--brand-accent-text); }
.svc__card:hover .svc__link span { width: calc(var(--tick-len) * 2); }

.svc__num {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); color: var(--text-faint);
  transition: color var(--dur-base) var(--ease-out);
}
.svc__title { transition: color var(--dur-base) var(--ease-out); }
.svc__tags li { transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }

.svc__card:focus-within { --frame: var(--brand-accent); }

@media (prefers-reduced-motion: reduce) {
  .svc__card, .svc__body, .svc__corner, .svc__fig { transition: none; }
  .svc__card:hover { transform: none; }
}


/* Illustration band: light by default, a shade cooler under the cursor.
   No dark flip — the icons keep their ink and only the ground shifts. */
.svc__card:hover .svc__fig {
  background: var(--wash-cool);
  border-color: var(--brand-accent);
}

/* ==========================================================================
   HERO INSTRUMENT BAY — light ground, darkens slightly under the cursor
   ========================================================================== */
/* ==========================================================================
   TYPOGRAPHIC RHYTHM
   Pattern borrowed from the reference site: a small uppercase label, a large
   sentence-case heading set tight, then a generous lede at a size clearly
   above body copy. Structure only — typefaces and colour stay ours.
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-feature-settings: "cv05" 1, "ss01" 1;
  letter-spacing: var(--tracking-body);
}

h1, h2, h3, h4 { font-feature-settings: "ss01" 1; }

h1 { font-weight: 800; letter-spacing: var(--tracking-display); }
h2 { font-weight: 700; letter-spacing: var(--tracking-display); }
h3 { font-weight: 600; letter-spacing: var(--tracking-heading); line-height: 1.28; }

/* Ledes sit a full step above body and stay comfortably short */
.sh__lede, .hero__lede, .split__body .lede {
  font-size: var(--step-1);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  max-width: 58ch;
}

/* Body copy inside cards: slightly looser for readability at small size */
.svc__card p, .mission__item p, .case__text, .post p { line-height: 1.65; }

/* Section headings breathe more, matching the reference cadence */
.sh { gap: var(--space-md); margin-block-end: var(--space-2xl); }
.sh__title { max-width: 26ch; line-height: 1.12; }

/* Stat values: tabular so the counters do not jitter while animating */
.stat__value { font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }

/* Links inside prose keep the underline offset consistent */
.split__body a, .case__text a { text-underline-offset: 0.25em; }

/* ==========================================================================
   ACCENT RULES — graded top edges
   A background gradient on a 3px strip, not a border, so the shade can run
   across the full width. Applied to the section edges that already carried a
   flat vermilion rule.
   ========================================================================== */
.ft { border-top: 0; position: relative; }
.ft::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rule-accent);
}

.stat { border-top: 0; position: relative; padding-top: var(--space-md); }
.stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--rule-accent-soft);
}

.cta { position: relative; }
.cta::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--rule-accent-soft);
  opacity: 0.5;
}

/* Nav hairline picks up the same shade once the bar goes solid */
.nav[data-scrolled] .nav__rule {
  background: var(--rule-accent-soft);
  opacity: 0.7;
}

/* Illustration band edge follows suit on hover */
.svc__card:hover .svc__fig {
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 0 var(--brand-accent);
}

/* ==========================================================================
   SECTOR INDEX
   An editorial index rather than a card grid: hairline rows, an oversized
   outlined numeral, the sector set large in the display face, and a short
   capability line. The whole row is the hover target.
   ========================================================================== */
.sects {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--border);
  counter-reset: sect;
}

.sect {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.35fr) 3rem;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-sm);
  border-bottom: var(--hairline) solid var(--border);
  transition:
    background var(--dur-base) var(--ease-out),
    padding-left var(--dur-base) var(--ease-out);
}

/* Oversized outlined numeral — drawn, not filled, like a drawing callout */
.sect__n {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-200);
  transition: color var(--dur-base) var(--ease-out);
}

/* Outline only where the engine supports it; otherwise the numeral stays a
   solid light grey rather than disappearing. */
@supports (-webkit-text-stroke: 1px black) {
  .sect__n { color: transparent; -webkit-text-stroke: 1.5px var(--ink-200); }
  .sect:hover .sect__n { -webkit-text-stroke-color: var(--brand-accent); }
}

.sect__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  transition: color var(--dur-base) var(--ease-out);
}

.sect__desc {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

/* Trailing mark: a registration tick that draws in on hover */
.sect__mark {
  justify-self: end;
  align-self: center;
  width: var(--tick-len);
  height: var(--rule);
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.sect:hover,
.sect:focus-within {
  background: var(--wash-cool);
  padding-left: var(--space-lg);
}

.sect:hover .sect__n {
  color: var(--brand-accent);
  -webkit-text-stroke-color: var(--brand-accent);
}

.sect:hover .sect__name { color: var(--brand-accent-text); }
.sect:hover .sect__mark { transform: scaleX(1); }

@media (max-width: 900px) {
  .sect {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-md);
  }
  .sect__n { font-size: var(--step-2); grid-row: span 2; }
  .sect__desc { grid-column: 2; }
  .sect__mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sect, .sect__n, .sect__name, .sect__mark { transition: none; }
  .sect:hover { padding-left: var(--space-sm); }
}

/* ==========================================================================
   MOTION GATING
   Nothing loops while it is off screen, and the service icons only move when
   the card is scrolled into view or hovered. Permanent looping is what makes
   a page feel restless and drains battery; motion should punctuate, not run.
   ========================================================================== */

/* Default: paused. JS adds .in-view when the block enters the viewport. */
[data-motion] *,
.ill * {
  animation-play-state: paused;
}

[data-motion].in-view * {
  animation-play-state: running;
}

/* Service icons: play once when the card arrives, then settle. Hover replays. */
.svc__card.is-primed .ill *,
.svc__card:hover .ill *,
.svc__card:focus-within .ill * {
  animation-play-state: running;
}

/* Headline rotator settles on the first word rather than cycling forever */
.rotator__track {
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
  [data-motion] *, .ill *, .rotator__track { animation-play-state: paused !important; }
}

.hero__figure { position: relative; margin: 0; }

/* Clean chamfered photo frame — same corner motif as the rest of the site,
   no HMI-mockup chrome. */
.hero__photo {
  --cut: 26px;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: var(--hairline) solid var(--border);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: var(--shadow-lg);
}
.hero__photo img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   BRAND MARQUEE — scrolling platform names, gated like everything else
   ========================================================================== */
.brand-marquee {
  overflow: hidden;
  margin-bottom: var(--space-2xl);
  padding-block: var(--space-lg);
  border-block: var(--hairline) solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.brand-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--space-md);
  animation: brand-scroll 36s linear infinite;
  animation-play-state: paused;
}
.brand-marquee.in-view .brand-marquee__track { animation-play-state: running; }
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }

.brand-marquee__item {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.7em 1.4em;
  border: var(--hairline) solid var(--border-strong);
  background: var(--surface);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  letter-spacing: -0.01em; color: var(--text); white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.brand-marquee__item::before {
  content: ""; width: var(--tick-len); height: var(--rule); background: var(--brand-accent);
  flex: none; transition: background var(--dur-base) var(--ease-out);
}
.brand-marquee__item:hover {
  border-color: var(--brand-accent); color: var(--brand-accent-text); background: var(--wash-cool);
}
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   INTERIOR PAGE HEAD
   Lighter-weight opener for pages other than the homepage: rail, h1, lede,
   same grid-underlay motif, no rotator or figure.
   ========================================================================== */
.page-head { padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--space-2xl); }
.page-head h1 { margin-top: var(--space-md); }
.page-head__lede { margin-top: var(--space-md); font-size: var(--step-1); color: var(--text-muted); max-width: 62ch; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: var(--space-2xl);
  align-items: start;
}

.contact-form-wrap {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  padding: var(--space-xl);
}

.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field label {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-muted);
}
.field__opt { text-transform: none; letter-spacing: 0; color: var(--text-faint); }

.field input, .field select, .field textarea {
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0.75em 0.9em;
  font-size: var(--step-0);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-accent); }

/* Honeypot — present in the DOM and tab order excluded, but never display:none
   (bots that check computed visibility should still see an interactive field). */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__submit { align-self: flex-start; margin-top: var(--space-2xs); }
.form__note { font-size: var(--step--2); color: var(--text-faint); }

.alert {
  border: var(--hairline) solid var(--border-strong);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--step--1);
  margin-bottom: var(--space-md);
}
.alert[hidden] { display: none; }
.alert--ok { border-color: var(--status-ok); color: var(--status-ok); background: color-mix(in srgb, var(--status-ok) 8%, transparent); }
.alert--err { border-color: var(--status-err); color: var(--status-err); background: color-mix(in srgb, var(--status-err) 8%, transparent); }

.contact-aside { display: flex; flex-direction: column; gap: var(--space-xl); }

.info-block { border: var(--hairline) solid var(--border); padding: var(--space-lg); background: var(--bg-alt); }
.info-block__list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.info-block__list dt {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-faint);
}
.info-block__list dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); }
.info-block__list a { color: var(--text-link); text-decoration: none; }
.info-block__list a:hover { color: var(--brand-accent-text); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.steps li { display: flex; gap: var(--space-sm); }
.steps__n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--brand-accent-text); flex: none; }
.steps h3 { font-size: var(--step-0); }
.steps p { color: var(--text-muted); font-size: var(--step--1); margin-top: 2px; }

@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REGIONS — country pills grouped under a rail label
   Reuses .countries__grid / .countries__pill from the homepage exactly.
   ========================================================================== */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.regions__group { display: flex; flex-direction: column; gap: var(--space-sm); }

/* ==========================================================================
   UPWORK — hire-via-Upwork badge and footer link
   Text + brand colour only, never Upwork's logo artwork.
   ========================================================================== */
.upwork-badge {
  display: inline-flex; align-items: center; gap: var(--space-md);
  border: var(--hairline) solid var(--border-strong);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.upwork-badge:hover { border-color: var(--brand-upwork); background: color-mix(in srgb, var(--brand-upwork) 7%, transparent); }
.upwork-badge__mark {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  letter-spacing: -0.02em; color: var(--brand-upwork); flex: none;
}
.upwork-badge__text { display: flex; flex-direction: column; gap: 2px; }
.upwork-badge__label {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-rail); text-transform: uppercase; color: var(--text-faint);
}
.upwork-badge__sub { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--text); }

.ft__upwork {
  display: inline-flex; margin-top: var(--space-sm);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--brand-upwork); text-decoration: none;
}
.ft__upwork:hover { color: var(--white); }

/* ==========================================================================
   HIRE PATHS — direct vs. Upwork, side by side
   ========================================================================== */
.hire-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); }
.hire-path { background: var(--surface); border: var(--hairline) solid var(--border); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.hire-path h3 { margin-top: var(--space-2xs); }
.hire-path p { color: var(--text-muted); font-size: var(--step--1); flex: 1; }

/* ==========================================================================
   PROJECTS — alternating media/text template
   Reuses .case__media / .cmed / .case__text / .case__tags as-is; only the
   grid + left/right ordering is new.
   ========================================================================== */
.proj {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl); align-items: center;
  padding-block: var(--space-2xl);
  border-bottom: var(--hairline) solid var(--border);
}
.proj:first-child { padding-top: 0; }
.proj:last-child { border-bottom: 0; padding-bottom: 0; }
.proj__media { order: 1; margin-bottom: 0; }
.proj__body { order: 2; display: flex; flex-direction: column; gap: var(--space-2xs); }
.proj:nth-of-type(even) .proj__media { order: 2; }
.proj:nth-of-type(even) .proj__body { order: 1; }
.proj__body h3 { margin-top: var(--space-2xs); }

@media (max-width: 900px) {
  .proj { grid-template-columns: 1fr; }
  .proj .proj__media, .proj:nth-of-type(even) .proj__media { order: 1; }
  .proj .proj__body, .proj:nth-of-type(even) .proj__body { order: 2; }
}

/* ==========================================================================
   INDUSTRY CARDS — same chamfered frame as .svc__card, with a full-bleed
   photo/video slot up top instead of the small icon band.
   ========================================================================== */
.ind-media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
  border-left: 0; border-right: 0; border-top: 0;
}
.ind-card:hover .ind-media { border-bottom-color: var(--brand-accent); }
.ind-card .rail { margin-bottom: var(--space-3xs); }

/* ==========================================================================
   ARTICLE — long-form post header + prose body
   First place on the site with running text, so this is the only spot
   that sets rhythm between paragraphs, lists and headings explicitly.
   ========================================================================== */
.article-head { padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--space-2xl); }
.article-head__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-md);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.article-head__meta span + span { position: relative; padding-left: var(--space-sm); }
.article-head__meta span + span::before { content: "\00b7"; position: absolute; left: -1px; }
.article-head h1 { margin-top: var(--space-md); max-width: 20ch; }
.article-head__lede { margin-top: var(--space-md); font-size: var(--step-1); color: var(--text-muted); max-width: 62ch; }

.article-body { max-width: var(--measure); margin-inline: auto; }
.article-body > * + * { margin-top: var(--space-md); }
.article-body h2 { margin-top: var(--space-2xl) !important; font-size: var(--step-3); }
.article-body > h2:first-child { margin-top: 0 !important; }
.article-body h3 { margin-top: var(--space-xl) !important; font-size: var(--step-1); }
.article-body p { color: var(--text); line-height: var(--leading-relaxed); }
.article-body ul, .article-body ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--text); }
.article-body li { line-height: var(--leading-relaxed); }
.article-body li::marker { color: var(--brand-accent-text); }
.article-body strong { font-weight: 600; }
.article-body a { text-decoration-thickness: 1px; }

.article-body blockquote {
  border-left: var(--rule) solid var(--brand-accent);
  padding-left: var(--space-md);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); line-height: var(--leading-snug); color: var(--text);
}

.article-body .note {
  background: var(--bg-alt); border-left: var(--rule) solid var(--brand-primary);
  padding: var(--space-md) var(--space-lg); font-size: var(--step--1); color: var(--text-muted);
}
.article-body .note strong { color: var(--brand-primary-deep); }

.article-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-alt); padding: 2px 6px; border-radius: var(--radius-sm); }
.article-body pre {
  font-family: var(--font-mono); font-size: var(--step--1); line-height: var(--leading-normal);
  background: var(--ink-900); color: var(--white); padding: var(--space-md);
  overflow-x: auto; border-radius: var(--radius-sm);
}
.article-body pre code { background: none; padding: 0; }

.article-body hr { border: 0; border-top: var(--hairline) solid var(--border); margin-block: var(--space-2xl) !important; }

.article-foot {
  max-width: var(--measure); margin-inline: auto;
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--border);
}
.article-foot__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article-foot__tags li {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); border: var(--hairline) solid var(--border); padding: 4px 8px;
}
.article-foot__back {
  margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); color: var(--brand-accent-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}

/* ==========================================================================
   PROFILE — leadership bio: label, name, accent rule, photo + text
   ========================================================================== */
.profile { display: flex; flex-direction: column; gap: var(--space-lg); }
.profile__intro { padding-bottom: var(--space-md); border-bottom: var(--rule) solid var(--brand-primary); }
.profile__intro h2 { margin-top: var(--space-2xs); color: var(--brand-primary-deep); }

.profile__grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: var(--space-2xl); align-items: center; }
.profile__media { border: var(--hairline) solid var(--border); background: var(--bg-alt); overflow: hidden; box-shadow: var(--shadow-lg); }
.profile__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.profile__bio p { color: var(--text-muted); font-size: var(--step-1); line-height: 1.6; max-width: 56ch; }
.profile__bio p + p { margin-top: var(--space-md); }
.profile__bio a { text-decoration-thickness: 1px; }

@media (max-width: 700px) {
  .profile__grid { grid-template-columns: 1fr; }
  .profile__media { max-width: 260px; }
}