/* ==========================================================================
   SSK Business Services — Core Design System
   Bootstrap 5 provides grid + a11y primitives only. All appearance is here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   All design tokens live in assets/css/theme.css, which loads before this
   file. Edit that file to re-theme the site; nothing here hard-codes a colour.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Reset / base — overrides Bootstrap Reboot
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img,
svg,
video { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brand); color: var(--on-ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 400;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform var(--t-norm);
}
.skip-link:focus { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }
@media (min-width: 1200px) { .container { max-width: var(--container); } }

.container-wide { width: 100%; max-width: 1600px; padding-inline: var(--gutter); margin-inline: auto; }

.section { position: relative; padding-block: var(--section-space); }
.section--tight { padding-block: var(--section-space-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--paper { background: var(--paper); }
.section--white { background: var(--surface); }
.section--stone { background: var(--surface-2); }
.section--ink { background: var(--ink-surface); color: var(--on-ink); }

/* Rounded page-band, the reference uses these as soft section transitions */
.band {
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Type scale
   -------------------------------------------------------------------------- */
.display-hero {
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.038em;
}

.display-1 {
  font-size: clamp(2.2rem, 5.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.h2, h2 {
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
}

.h3, h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.875rem);
  line-height: 1.14;
  letter-spacing: -0.026em;
}

.h4, h4 {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.018em;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow--brand { color: var(--brand); }
.section--ink .eyebrow { color: var(--on-ink-48); }

.lede {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.66;
  color: var(--muted);
}

.body-sm { font-size: 0.875rem; line-height: 1.62; color: var(--muted); }
.body-xs { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }

.text-ink { color: var(--ink); }
.text-muted-2 { color: var(--muted-2); }
.mono-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* Accent word inside a heading */
.hl { position: relative; display: inline-block; color: var(--brand); }
.hl-underline {
  position: relative;
  display: inline-block;
}
.hl-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.hl-underline.is-in::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
/* Primary buttons are green by default and KEEP that colour on hover.
   Hover feedback is motion and depth only — a lift, a deeper shadow and the
   arrow sliding — never a colour swap. Change --btn-primary to restyle them. */
.btn-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
  will-change: transform;
  transition: transform var(--t-norm), box-shadow var(--t-norm), border-color var(--t-norm);
  -webkit-tap-highlight-color: transparent;
}

.btn-x > span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }

.btn-x i { font-size: 1.05em; transition: transform var(--t-norm); }
.btn-x:hover i.ri-arrow-right-line,
.btn-x:hover i.ri-arrow-right-up-line { transform: translateX(4px); }

/* Primary — SSK green, unchanged on hover */
.btn-x--dark,
.btn-x--brand {
  background: var(--btn-primary);
  color: var(--on-ink);
  box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.55);
}
.btn-x--dark:hover,
.btn-x--dark:focus-visible,
.btn-x--brand:hover,
.btn-x--brand:focus-visible {
  background: var(--btn-primary);
  color: var(--on-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), 0.6);
}
.btn-x--dark:active, .btn-x--brand:active { transform: translateY(0); }

/* Secondary — outlined, keeps its colour, the rule just firms up */
.btn-x--light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-x--light:hover, .btn-x--light:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.btn-x--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-x--ghost:hover, .btn-x--ghost:focus-visible {
  color: var(--ink);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.btn-x--ghost-inv { background: transparent; color: var(--on-ink); border-color: var(--line-inv); }
.btn-x--ghost-inv:hover, .btn-x--ghost-inv:focus-visible {
  color: var(--on-ink);
  border-color: var(--on-ink-60);
  transform: translateY(-2px);
}

.btn-x--lg { padding: 17px 32px; font-size: 0.9375rem; }
.btn-x--sm { padding: 11px 20px; font-size: 0.8125rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Text link with a wiping underline */
.link-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--ink);
  padding-bottom: 2px;
}
.link-x::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-norm);
}
.link-x:hover { color: var(--brand); }
.link-x:hover::after { transform: scaleX(1); transform-origin: left; }
.link-x i { transition: transform var(--t-norm); }
.link-x:hover i { transform: translate(3px, -3px); }

/* Circular icon button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.icon-btn:disabled { opacity: 0.32; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   6. Pills / tags / badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill--bare { background: transparent; }
.pill--tint { background: var(--tint-mint); border-color: transparent; }
.pill i { font-size: 0.95em; color: var(--accent); }

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.dot--pulse { animation: dotPulse 2.6s ease-in-out infinite; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------------
   7. Section headers
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(36px, 4vw, 60px);
}
.section-head__text { max-width: 640px; order: 0; flex: 0 1 auto; }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin-bottom: 0; }
.section-head__aside { order: 2; flex: none; padding-bottom: 6px; }

/* Hairline that spans the gap so the heading and its action read as one unit
   instead of two objects drifting apart on a very wide screen. */
.section-head::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  margin-bottom: 20px;
  background: linear-gradient(to right, var(--line), rgba(var(--brand-rgb), 0.03));
}
.section-head:not(:has(.section-head__aside))::after { display: none; }

.rule {
  height: 1px;
  background: var(--line);
  transform-origin: left;
  border: 0;
  margin: 0;
}
.section--ink .rule { background: var(--line-inv); }

/* --------------------------------------------------------------------------
   8. Backgrounds / decorative
   -------------------------------------------------------------------------- */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(115% 78% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(115% 78% at 50% 0%, #000 0%, transparent 72%);
}

.grid-bg--dots {
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.5;
}
.glow--mint { background: radial-gradient(circle, var(--glow-mint), transparent 68%); }
.glow--blue { background: radial-gradient(circle, var(--glow-blue), transparent 68%); }

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-norm), border-color var(--t-norm),
              backdrop-filter var(--t-norm), box-shadow var(--t-norm);
}

.site-header.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled .hdr__inner { height: 64px; }

/* Solid header for inner pages that start on a light band */
.site-header.is-solid {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}

.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition-property: background-color, border-color, backdrop-filter, box-shadow, transform; }

.hdr__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height var(--t-norm);
}

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand__mark { width: auto; height: 26px; flex: none; }
.brand__text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover .brand__mark { opacity: 0.82; }
.brand__mark { transition: opacity var(--t-fast); }

/* Primary nav */
.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 2px; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:hover,
.nav__item.is-open > .nav__link { color: var(--ink); background: var(--wash-1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: "";
  width: 4px; height: 4px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--brand);
}
.nav__link .ri-arrow-down-s-line {
  font-size: 1rem;
  color: var(--muted-2);
  transition: transform var(--t-fast);
}
.nav__item.is-open .ri-arrow-down-s-line { transform: rotate(180deg); }

/* Mega dropdown */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--t-norm), transform var(--t-norm), visibility var(--t-norm);
}
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.mega--wide { max-width: min(880px, calc(100vw - 48px)); }

.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 4px; }
.mega__grid--3 { grid-template-columns: repeat(3, minmax(190px, 1fr)); }

.mega__link {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast);
}
.mega__link:hover { background: var(--tint-stone); }
.mega__link i {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--tint-mint);
  color: var(--accent-deep);
  font-size: 0.95rem;
}
.mega__link:hover i { background: var(--brand); color: var(--on-ink); }
.mega__link i { transition: background-color var(--t-fast), color var(--t-fast); }
.mega__ttl { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink); letter-spacing: -0.008em; }
.mega__sub { display: block; font-size: 0.75rem; line-height: 1.45; color: var(--muted); margin-top: 2px; }

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 14px;
  border-radius: var(--r-sm);
  background: var(--tint-stone);
}
.mega__foot span { font-size: 0.8125rem; color: var(--muted); }

.hdr__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.hdr__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 4px;
}
.hdr__tel i { color: var(--accent); font-size: 1rem; }
.hdr__tel:hover { color: var(--brand); }

/* Burger */
.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 17px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-norm), opacity var(--t-fast), width var(--t-norm);
}
.burger span:nth-child(1) { transform: translate(-50%, -5px); }
.burger span:nth-child(2) { transform: translate(-50%, 0); width: 12px; }
.burger span:nth-child(3) { transform: translate(-50%, 5px); }
.burger.is-active span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; width: 17px; }
.burger.is-active span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* --------------------------------------------------------------------------
   10. Mobile navigation
   -------------------------------------------------------------------------- */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 20px) var(--gutter) 32px;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.68s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.68s;
}
.mnav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.mnav__list { flex: 1 1 auto; border-top: 1px solid var(--line); }

.mnav__row { border-bottom: 1px solid var(--line); }

.mnav__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mnav__link em {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.mnav__link:hover { color: var(--brand); }

.mnav__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mnav__toggle .mnav__lbl {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: -0.03em;
}
.mnav__toggle i { font-size: 1.35rem; color: var(--muted); transition: transform var(--t-norm); }
.mnav__row.is-open .mnav__toggle i { transform: rotate(45deg); color: var(--brand); }

.mnav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow);
}
.mnav__row.is-open .mnav__sub { grid-template-rows: 1fr; }
.mnav__sub > div { overflow: hidden; }
.mnav__sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0 11px 18px;
  font-size: 0.9375rem;
  color: var(--muted);
  border-left: 1px solid var(--line);
}
.mnav__sub a:hover { color: var(--brand); border-left-color: var(--brand); }
.mnav__sub > div > div:last-child { padding-bottom: 14px; }

.mnav__foot { margin-top: 34px; display: grid; gap: 20px; }
.mnav__contact { display: grid; gap: 8px; }
.mnav__contact a { font-size: 0.9375rem; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; }
.mnav__contact a i { color: var(--accent); }
.mnav__contact address { font-style: normal; font-size: 0.875rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   11. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(46px, 7vw, 92px));
  padding-bottom: clamp(30px, 4vw, 52px);
  overflow: hidden;
  /* No flat fill: the video layer is the ground. A faint wash sits underneath
     only so there is something to see while the first frame decodes. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--brand-rgb), 0.05), transparent 60%),
    var(--paper);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg > *:not(.hero__vidbtn) { pointer-events: none; }
.hero__glow-1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -14%; left: 50%; transform: translateX(-50%); }
.hero__glow-2 { width: 32vw; height: 32vw; max-width: 420px; max-height: 420px; top: 24%; right: -8%; }

/* --------------------------------------------------------------------------
   Hero background video

   Full-bleed as the hero's ground. The wrapper is far taller than the 16:9
   source, so object-fit: cover has to trim a large slice off the sides — which
   is how the source card's text column and logo get cropped away. Without that
   trim they show through as giant ghost words behind the headline. Pinning the
   right edge keeps the animated isometric scene.
   -------------------------------------------------------------------------- */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 44%;
  opacity: 0.62;
  /* Covering this height upscales a 720p source, so a touch of blur turns that
     into deliberate soft focus rather than visible softness. Kept light — any
     more and the isometric scene stops reading as a scene. */
  filter: blur(0.6px) saturate(1.2) contrast(1.05);
}

/* Paper bed: a soft pool of page colour under the copy only, so the type keeps
   full contrast while the edges of the frame stay open and the video reads.
   The pool is deliberately tight and the flat wash across the rest of the frame
   is nearly absent — legibility is bought exactly where the words are, not by
   fogging the whole plate. */
.hero__bed {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      46% 37% at 50% 39%,
      rgba(var(--paper-rgb), 0.92) 0%,
      rgba(var(--paper-rgb), 0.82) 44%,
      rgba(var(--paper-rgb), 0.34) 76%,
      rgba(var(--paper-rgb), 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(var(--paper-rgb), 0.66) 0%,
      rgba(var(--paper-rgb), 0.14) 15%,
      rgba(var(--paper-rgb), 0.05) 52%,
      rgba(var(--paper-rgb), 0.78) 93%,
      rgba(var(--paper-rgb), 1) 100%
    );
}

/* Frames the motion so the hero reads as a composed plate, not a loose clip */
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 95% at 50% 45%, transparent 56%, rgba(var(--brand-rgb), 0.1) 100%),
    linear-gradient(to right, rgba(var(--paper-rgb), 0.34) 0%, transparent 15%, transparent 85%, rgba(var(--paper-rgb), 0.34) 100%);
}

/* WCAG 2.2.2: anything that auto-plays past five seconds needs a pause control */
.hero__vidbtn {
  position: absolute;
  /* Top-right, clear of the header and above the showcase panel — the hero's
     bottom-right corner is occupied by the project cells. */
  top: calc(var(--header-h) + clamp(14px, 2vw, 26px));
  right: clamp(16px, 2vw, 30px);
  z-index: 4;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink-soft);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.hero__vidbtn:hover,
.hero__vidbtn:focus-visible { opacity: 1; transform: scale(1.06); }

.hero__inner { position: relative; text-align: center; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.hero__title { margin: 0 auto; max-width: 15em; }

.hero__lede {
  max-width: 46ch;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.68;
  /* One step darker than the usual secondary grey. This paragraph sits over the
     background video, where --muted measures 4.37:1 against the darkest frames
     — just under the 4.5:1 floor. --ink-soft holds about 8:1 there and still
     reads as secondary next to the headline. */
  color: var(--ink-soft);
}

.hero__cta { justify-content: center; margin-top: clamp(26px, 3vw, 38px); }

/* Masked line reveal primitive */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line__inner { display: block; will-change: transform; }

/* --------------------------------------------------------------------------
   12. Logo / trust strip
   -------------------------------------------------------------------------- */
.trust {
  padding-block: clamp(38px, 4.5vw, 60px);
  border-top: 1px solid var(--line);
  margin-top: clamp(38px, 4.5vw, 62px);
}
.trust__label {
  text-align: center;
  margin-bottom: 26px;
}
.trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 66px);
}
.wordmark {
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.25vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  transition: color var(--t-norm), transform var(--t-norm);
}
.wordmark:hover { color: var(--ink); }
.wordmark span { font-weight: 400; letter-spacing: -0.01em; text-transform: none; }

/* --------------------------------------------------------------------------
   13. Delivered work showcase — the hero visual
   -------------------------------------------------------------------------- */
/* Angles are unitless custom properties so GSAP can tween them as plain
   numbers; CSS multiplies by 1deg. Two inputs are summed so they never fight:
     --rx / --sc   scroll-driven: the panel rises and straightens on entry
     --tx / --ty   pointer-driven: a small live tilt under the cursor          */
.showcase {
  --rx: 0;
  --sc: 1;
  --tx: 0;
  --ty: 0;
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink-surface);
  transform:
    rotateX(calc((var(--rx) + var(--tx)) * 1deg))
    rotateY(calc(var(--ty) * 1deg))
    scale(var(--sc));
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 2px 6px -2px rgba(0, 22, 32, 0.3),
    0 34px 64px -30px rgba(0, 22, 32, 0.44),
    0 90px 150px -70px rgba(0, 22, 32, 0.5);
}

/* The ratio lives on the grid so every cell fills its track. Putting it on
   the main cell instead left a dead band under it, because the side column's
   two intrinsic rows were taller than the main cell's own aspect ratio. */
/* 16:9 overall. That makes the main cell taller than the 16:9 video, so
   object-fit: cover has to trim the sides — which is exactly how the source
   card's text column gets cropped out, leaving only the animation. */
.showcase__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: 100%;
  gap: 1px;
  aspect-ratio: 16 / 7;
  background: var(--line-inv);
}
.showcase__cell {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: var(--ink-surface);
}
.showcase__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.showcase__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  min-width: 0;
  min-height: 0;
  background: var(--line-inv);
}
.showcase:hover .showcase__cell img { transform: scale(1.045); }

/* A single soft highlight raking across the panel so it reads as glass */
.showcase__glare {
  position: absolute;
  inset: -40% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 36%,
    rgba(255, 255, 255, 0.14) 47%,
    rgba(255, 255, 255, 0.04) 53%,
    transparent 63%
  );
  transform: translateX(-36%);
  animation: showcaseGlare 11s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes showcaseGlare {
  0%, 64% { transform: translateX(-36%); }
  100% { transform: translateX(36%); }
}


.showcase__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2vw, 26px);
  background: linear-gradient(to top, var(--veil-strong), transparent);
  color: var(--on-ink);
}
.showcase__meta h3 { color: var(--on-ink); font-size: clamp(1.05rem, 1.6vw, 1.5rem); }
.showcase__meta .eyebrow { color: var(--on-ink-55); margin-bottom: 7px; }
.showcase__cell--sm .showcase__meta { padding: 14px 16px; }
.showcase__cell--sm .showcase__meta h3 { font-size: 0.9375rem; }

.showcase__badge {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  left: clamp(16px, 2vw, 26px);
  z-index: 2;
  background: var(--line-inv);
  border-color: var(--on-ink-20);
  color: var(--on-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Tag sitting on top of project imagery */
.showcase__tag {
  background: var(--line-inv);
  border-color: var(--on-ink-20);
  color: var(--on-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   14. Stat panel
   -------------------------------------------------------------------------- */
.statpanel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.statpanel__col {
  padding: clamp(24px, 2.4vw, 36px);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.statpanel__col:first-child { border-left: 0; }
.statpanel__head h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.018em; line-height: 1.34; margin-bottom: 8px; }
.statpanel__head p { font-size: 0.75rem; color: var(--muted-2); }
.statpanel__figs { display: flex; gap: clamp(18px, 2vw, 34px); margin-top: auto; }

.stat { flex: 1 1 0; min-width: 0; }
.stat__num {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: 0.4em; color: var(--accent); line-height: 1; margin-top: 0.2em; }
.stat__lbl { display: block; margin-top: 9px; font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* --------------------------------------------------------------------------
   15. Split feature (About / value blocks)
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
/* Article / policy layout: wide prose column plus a narrow side rail.
   Must be a class, not an inline style — an inline grid-template-columns
   outranks the media query that collapses it on small screens. */
.split--rail { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); }
.split--sticky > .split__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.split__body > * + * { margin-top: 20px; }

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4x3 { aspect-ratio: 4 / 3; }
/* Ratio of the supplied technology cards — keeps their baked-in text uncropped */
.media--tech { aspect-ratio: 1200 / 841; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* Facts list with animated separator lines */
.facts { border-top: 1px solid var(--line); }
.facts__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.facts__n { font-family: var(--font-display); font-size: 0.75rem; color: var(--accent-deep); letter-spacing: 0.04em; padding-top: 4px; }
.facts__row h4 { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   16. Tinted cards grid (services / capability cards)
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 250px;
  transition: transform var(--t-norm), box-shadow var(--t-norm), border-color var(--t-norm);
}
a.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.tile--mint { background: var(--tint-mint); border-color: transparent; }
.tile--blue { background: var(--tint-blue); border-color: transparent; }
.tile--cream { background: var(--tint-cream); border-color: transparent; }
.tile--blush { background: var(--tint-blush); border-color: transparent; }
.tile--lilac { background: var(--tint-lilac); border-color: transparent; }
.tile--stone { background: var(--tint-stone); border-color: transparent; }
.tile--ghost { background: transparent; border-style: dashed; border-color: var(--line-2); }

.tile__n {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.tile h3 { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.24; }
.tile p { font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.tile__foot { display: block; margin-top: auto; padding-top: 14px; }

/* Generative service / feature artwork. Colours arrive from a .t-* class. */
.svcart {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: var(--art-bg, var(--tint-mint));
  overflow: hidden;
}
.svcart__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.svcart__ico {
  position: relative;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--art-ink, var(--brand));
  opacity: 0.92;
}

.tile__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--wash-3);
  color: var(--ink);
  font-size: 1.15rem;
  transition: background-color var(--t-norm), color var(--t-norm), transform var(--t-norm);
}
a.tile:hover .tile__ico { background: var(--brand); color: var(--on-ink); transform: rotate(-6deg); }

/* Corner arrow that appears on hover */
.tile__arrow {
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.9rem;
  opacity: 0;
  transform: translate(-6px, 6px) scale(0.7);
  transition: opacity var(--t-norm), transform var(--t-norm);
}
a.tile:hover .tile__arrow { opacity: 1; transform: translate(0, 0) scale(1); }

/* Decorative arc inside tinted tiles */
.tile__arc {
  position: absolute;
  right: -30%; bottom: -46%;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--wash-2);
  pointer-events: none;
  transition: transform var(--t-slow);
}
a.tile:hover .tile__arc { transform: scale(1.12) translate(-4%, -4%); }

/* --------------------------------------------------------------------------
   17. Pinned services storytelling
   -------------------------------------------------------------------------- */
.svc { position: relative; }
.svc__layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 4vw, 72px); align-items: start; }

.svc__aside { position: relative; }
@media (min-width: 1200px) {
  /* CSS sticky rather than a GSAP pin: no pin-spacer, no layout surprises */
  .svc__aside { position: sticky; top: calc(var(--header-h) + 44px); }
}
.svc__aside .eyebrow { margin-bottom: 20px; }
.svc__aside h2 { margin-bottom: 22px; }

.svc__viz {
  position: relative;
  margin-top: 34px;
  /* Matches the supplied technology cards (1200x841) so nothing is cropped */
  aspect-ratio: 1200 / 841;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tint-stone);
}
/* Concentric rings + hairline grid so the sticky panel has presence
   instead of one lonely icon floating in a grey box. */
.svc__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--wash-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wash-1) 1px, transparent 1px);
  background-size: 34px 34px;
}
.svc__viz::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow:
    0 0 0 clamp(18px, 4.4vw, 46px) var(--wash-0),
    0 0 0 calc(clamp(18px, 4.4vw, 46px) + 1px) var(--wash-2);
}
/* The supplied cards carry their own text, so a long cross-fade would overlap
   two sets of words and read as a mess. The swap is short, and the incoming
   card is layered above the outgoing one, so it reads as a replace not a blend. */
.svc__viz-item {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: var(--tint-stone);
  transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.svc__viz-item.is-active { z-index: 1; opacity: 1; }

/* Photograph of the delivered work */
.svc__viz-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc__viz-item.is-active img { transform: scale(1); }

/* Tinted fallback panel for services with no suitable photograph */
.svc__viz-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--art-bg, var(--tint-stone));
}
.svc__viz-art i { font-size: clamp(3rem, 7vw, 5rem); color: var(--art-ink, var(--ink)); opacity: 0.85; }

/* Caption sits on a scrim so it stays legible over any image */
.svc__viz-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 44px 20px 18px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--on-ink);
  line-height: 1.5;
  background: linear-gradient(to top, var(--veil-strong), transparent);
}

.svc__list { border-top: 1px solid var(--line); }

.svc__item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: opacity var(--t-norm);
}
.svc__item::before {
  content: "";
  position: absolute;
  left: -24px; right: -24px; top: 0; bottom: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  opacity: 0;
  transition: opacity var(--t-norm);
  z-index: -1;
}
.svc__item:hover::before,
.svc__item.is-active::before { opacity: 1; }

.svc__n { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted-2); padding-top: 5px; }
.svc__item.is-active .svc__n, .svc__item:hover .svc__n { color: var(--accent-deep); }
.svc__item h3 { font-size: clamp(1.15rem, 1.65vw, 1.5rem); font-weight: 400; letter-spacing: -0.026em; margin-bottom: 8px; transition: transform var(--t-norm); }
.svc__item:hover h3 { transform: translateX(5px); }
.svc__item p { font-size: 0.875rem; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.svc__go {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.95rem;
  transition: background-color var(--t-norm), border-color var(--t-norm), color var(--t-norm), transform var(--t-norm);
}
.svc__item:hover .svc__go { background: var(--brand); border-color: var(--brand); color: var(--on-ink); transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   18. Capability node graph
   -------------------------------------------------------------------------- */
.nodes { position: relative; }
.nodes__canvas { position: relative; aspect-ratio: 16 / 9; min-height: 380px; }
.nodes__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nodes__svg path { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 1; }

.node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  white-space: nowrap;
  cursor: default;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-norm), box-shadow var(--t-norm), color var(--t-norm);
}
.node i { color: var(--accent); font-size: 1rem; }
.node:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.node--core {
  padding: 20px 28px;
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.node--core i { color: var(--accent-bright); }

/* Mobile fallback list */
.nodes__list { display: none; }

/* --------------------------------------------------------------------------
   19. Industries interactive grid
   -------------------------------------------------------------------------- */
.inds {
  position: relative;
  border-top: 1px solid var(--line);
}
.ind {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr minmax(0, 46ch) 44px;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px) clamp(0px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: color var(--t-norm);
}
.ind__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.ind > *:not(.ind__fill) { position: relative; z-index: 1; }
.ind:hover .ind__fill { transform: translateY(0); }
.ind:hover { color: var(--on-ink); }
.ind:hover h3, .ind:hover .ind__n { color: var(--on-ink); }
.ind:hover p { color: var(--on-ink-62); }
.ind__n { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted-2); transition: color var(--t-norm); }
.ind h3 { font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 400; letter-spacing: -0.028em; transition: color var(--t-norm), transform var(--t-norm); }
.ind:hover h3 { transform: translateX(6px); }
.ind p { font-size: 0.8125rem; line-height: 1.58; color: var(--muted); transition: color var(--t-norm); }
.ind__go {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 0.95rem;
  transition: border-color var(--t-norm), background-color var(--t-norm), color var(--t-norm), transform var(--t-norm);
}
.ind:hover .ind__go { background: var(--brand); border-color: var(--brand); color: var(--on-ink); transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   20. Work / portfolio
   -------------------------------------------------------------------------- */
/* Horizontal pinned track (desktop) */
.hwrap { position: relative; }
.hwrap .section-head { margin-bottom: clamp(28px, 3vw, 44px); }
.hscroll { position: relative; overflow: hidden; }
.hscroll__track { display: flex; gap: clamp(14px, 1.6vw, 24px); will-change: transform; }
.hscroll__pad {
  flex: none;
  width: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

.work-card {
  position: relative;
  flex: none;
  width: min(52vw, 620px);
  display: block;
}
.work-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  /* Client mockups carry their own brand background — one of them is white,
     so a hairline keeps the card readable on a white section. */
  box-shadow: inset 0 0 0 1px var(--line);
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-card__media img { transform: scale(1.055); }
.work-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--veil-soft), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-norm);
}
.work-card:hover .work-card__veil { opacity: 1; }
.work-card__go {
  position: absolute;
  right: 18px; bottom: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transition: opacity var(--t-norm), transform var(--t-norm);
}
.work-card:hover .work-card__go { opacity: 1; transform: translateY(0) scale(1); }

.work-card__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-top: 16px;
}
.work-card__foot h3 { font-size: clamp(1rem, 1.25vw, 1.1875rem); font-weight: 500; letter-spacing: -0.02em; }
.work-card__foot p { font-size: 0.75rem; color: var(--muted); margin-top: 4px; max-width: 40ch; }

/* Static grid variant (reference 2×2) */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 30px); }
.work-grid .work-card { width: auto; }

/* --------------------------------------------------------------------------
   21. Process timeline
   -------------------------------------------------------------------------- */
.proc { position: relative; }
.proc__line {
  position: absolute;
  left: 0; right: 0; top: 26px;
  height: 1px;
  background: var(--line);
}
.proc__line span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.proc__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 32px); }
.proc__step { position: relative; padding-top: 62px; }
.proc__dot {
  position: absolute;
  top: 18px; left: 0;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  transition: background-color var(--t-norm), border-color var(--t-norm);
}
.proc__dot::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background-color var(--t-norm);
}
.proc__step.is-in .proc__dot { border-color: var(--accent); }
.proc__step.is-in .proc__dot::after { background: var(--accent); }
.proc__step .tile__n { margin-bottom: 12px; display: block; }
.proc__step h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.018em; margin-bottom: 10px; }
.proc__step p { font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------------------
   22. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 3vw, 44px);
  border-block: 1px solid var(--line);
  background: var(--paper);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__grp { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding-inline: clamp(10px, 1.6vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}
.marquee__item i { font-size: 0.4em; color: var(--accent); }
.marquee--outline .marquee__item {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
}

/* Client logo ticker */
.ticker { position: relative; overflow: hidden; }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__grp { display: flex; align-items: center; flex: none; }
.ticker__item { padding-inline: clamp(24px, 4vw, 60px); }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker::before, .ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 130px);
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.ticker::after { right: 0; background: linear-gradient(to left, var(--paper), transparent); }
.section--white .ticker::before { background: linear-gradient(to right, var(--surface), transparent); }
.section--white .ticker::after { background: linear-gradient(to left, var(--surface), transparent); }

/* --------------------------------------------------------------------------
   23. Client case cards
   -------------------------------------------------------------------------- */
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 54px);
  align-items: center;
  padding-block: clamp(30px, 3.4vw, 54px);
  border-bottom: 1px solid var(--line);
}
.case:last-child { border-bottom: 0; }
.case--flip .case__media { order: 2; }
.case__body h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 16px; }
.case__body p { color: var(--muted); font-size: 0.9375rem; }
.case__body > * + * { margin-top: 18px; }
.case__stack { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------------
   24. News / article cards
   -------------------------------------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
  transition: transform var(--t-norm);
}
a.post:hover { transform: translateY(-5px); }
a.post:hover .post__media { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md); }
.post__media { transition: box-shadow var(--t-norm); }
a.post:hover .post__cat { background: var(--btn-primary); color: var(--on-ink); }
.post__cat { transition: background-color var(--t-norm), color var(--t-norm); }
.post__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: var(--tint-stone);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Two classes so it beats the 4/3 default above */
.post__media.media--tech { aspect-ratio: 1200 / 841; }
.post__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.post:hover .post__media img { transform: scale(1.06); }
.post__cat {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--glass-92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.post__body { padding-top: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.post__meta { display: flex; align-items: center; gap: 10px; font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.post__body h3 {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.32;
}
.post:hover h3 { color: var(--brand); }
.post__body h3 { transition: color var(--t-fast); }
.post__body p { font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.post__body .link-x { margin-top: auto; padding-top: 12px; align-self: flex-start; }

/* Generative article artwork (no stock photography) */
.artwork { position: absolute; inset: 0; }
.artwork svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   25. Big CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(40px, 4.6vw, 76px) clamp(24px, 4vw, 72px);
  /* Depth: a petrol wash with a whisper of the logo green in one corner,
     over a cool base — never a flat fill. */
  background:
    radial-gradient(105% 135% at 88% 4%, rgba(var(--brand-rgb), 0.22), transparent 62%),
    radial-gradient(62% 82% at 2% 102%, rgba(var(--accent-rgb), 0.09), transparent 64%),
    linear-gradient(155deg, #dde8ee 0%, #eff4f6 54%, #d7e4ea 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.10);
}
.cta-band__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Fine engineering grid, faded out toward the edges */
.cta-band__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--brand-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--brand-rgb), 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 10%, transparent 78%);
}

/* Concentric rings anchored off the right edge */
.cta-band__bg::after {
  content: "";
  position: absolute;
  top: 50%; right: -14%;
  width: min(46%, 520px); aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-rgb), 0.10);
  box-shadow:
    0 0 0 clamp(24px, 4vw, 54px) rgba(var(--brand-rgb), 0.022),
    0 0 0 calc(clamp(24px, 4vw, 54px) + 1px) rgba(var(--brand-rgb), 0.07);
}

.cta-band__sheen {
  position: absolute;
  top: -60%; left: -20%;
  width: 46%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(12deg);
  will-change: transform;
}
/* Asymmetric two-column composition: the message carries the left, a contact
   panel anchors the right. Fills a 1920px band instead of stranding a small
   block of centred text in the middle of a very wide rectangle. */
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  text-align: left;
  max-width: 1180px;
  margin-inline: auto;
}
.cta-band__lead { min-width: 0; }
.cta-band h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  letter-spacing: -0.034em;
  line-height: 1.06;
}
.cta-band .eyebrow { margin-bottom: 16px; }
.cta-band p {
  margin-top: 16px;
  color: var(--ink-soft);
  opacity: 0.78;
  font-size: 0.9375rem;
  max-width: 46ch;
}
.cta-band .btn-row { justify-content: flex-start; margin-top: clamp(22px, 2.4vw, 32px); }

/* Contact panel */
.cta-band__panel {
  position: relative;
  padding: clamp(22px, 2vw, 30px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), var(--shadow-md);
}
.cta-band__panel dl { display: grid; gap: 0; margin: 0; }
.cta-band__panel > dl > div {
  padding: 14px 0;
  border-top: 1px solid rgba(var(--brand-rgb), 0.12);
}
.cta-band__panel > dl > div:first-child { border-top: 0; padding-top: 0; }
.cta-band__panel > dl > div:last-child { padding-bottom: 0; }
.cta-band__panel dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 7px;
}
.cta-band__panel dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--ink);
}
.cta-band__panel dd a { display: inline-flex; align-items: center; gap: 8px; }
.cta-band__panel dd a:hover { color: var(--accent-deep); }
.cta-band__panel dd i { color: var(--accent); font-size: 0.95em; }

/* Variants */
.cta-band--mint {
  background:
    radial-gradient(105% 135% at 88% 4%, rgba(var(--accent-rgb), 0.18), transparent 62%),
    radial-gradient(62% 82% at 2% 102%, rgba(var(--brand-rgb), 0.10), transparent 64%),
    linear-gradient(155deg, #e3efe1 0%, #f2f7f1 54%, #dceadb 100%);
}
.cta-band--ink {
  background:
    radial-gradient(110% 140% at 84% 6%, rgba(var(--accent-rgb), 0.22), transparent 56%),
    linear-gradient(160deg, var(--ink-surface) 0%, #012c40 100%);
  box-shadow: inset 0 0 0 1px var(--line-inv);
}
.cta-band--ink h2 { color: var(--on-ink); }
.cta-band--ink p { color: var(--on-ink-62); opacity: 1; }
.cta-band--ink .cta-band__panel {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--line-inv);
}
.cta-band--ink .cta-band__panel dd { color: var(--on-ink); }
.cta-band--ink .cta-band__panel > dl > div { border-top-color: var(--line-inv); }

/* --------------------------------------------------------------------------
   26. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.phero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(48px, 6.5vw, 92px));
  padding-bottom: clamp(40px, 5vw, 76px);
  background: var(--paper);
}
.phero__inner { position: relative; }
.phero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.phero h1 { max-width: 18ch; }
.phero__lede { max-width: 48ch; }
.phero__aside { padding-bottom: 8px; }

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: 0.75rem; color: var(--muted-2); }
.crumbs a:hover { color: var(--brand); }
.crumbs i { font-size: 0.9rem; opacity: 0.5; }
.crumbs [aria-current] { color: var(--ink-soft); }

/* Key/value meta strip */
.metastrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(38px, 4vw, 62px);
}
.metastrip__cell { padding: 22px 24px 22px 0; border-right: 1px solid var(--line); }
.metastrip__cell:last-child { border-right: 0; }
.metastrip__cell dt { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 9px; }
.metastrip__cell dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   27. Prose (articles, policy)
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); margin-top: 52px; letter-spacing: -0.028em; }
.prose h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); margin-top: 40px; font-weight: 500; letter-spacing: -0.022em; }
.prose h4 { margin-top: 32px; }
.prose p { color: var(--ink-soft); line-height: 1.76; }
.prose p.prose__lead { font-size: 1.125rem; color: var(--ink); line-height: 1.62; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: 11px; }
.prose ul li { position: relative; padding-left: 26px; color: var(--ink-soft); line-height: 1.68; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.66em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.prose ol { counter-reset: p; }
.prose ol li { position: relative; padding-left: 32px; counter-increment: p; color: var(--ink-soft); line-height: 1.68; }
.prose ol li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.1em;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--accent-deep);
  letter-spacing: 0.04em;
}
.prose blockquote {
  margin: 34px 0;
  padding: 26px 30px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
.prose figure { margin: 34px 0; }
.prose figcaption { margin-top: 12px; font-size: 0.8125rem; color: var(--muted-2); }

/* Article side rail */
.rail { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 26px; }
.rail__box { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rail__box h4 { margin-bottom: 14px; }
.rail__toc { display: grid; gap: 9px; }
.rail__toc a { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.rail__toc a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   28. Accordion (FAQ / capabilities)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(20px, 2.2vw, 26px) 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--ink);
  transition: color var(--t-fast);
}
.acc__btn:hover { color: var(--brand); }
.acc__btn i {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--ink);
  transition: transform var(--t-norm), background-color var(--t-norm), color var(--t-norm), border-color var(--t-norm);
}
.acc__item.is-open .acc__btn i { transform: rotate(45deg); background: var(--brand); border-color: var(--brand); color: var(--on-ink); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { max-width: 66ch; font-size: 0.9375rem; color: var(--muted); padding-bottom: 26px; }
.acc__panel ul { padding-bottom: 26px; display: flex; flex-wrap: wrap; gap: 7px; }

/* --------------------------------------------------------------------------
   29. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.field { position: relative; display: grid; gap: 8px; }
.field > label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.field > label .req { color: var(--accent-deep); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); }

.field__err {
  display: none;
  font-size: 0.75rem;
  color: var(--danger);
  align-items: center;
  gap: 6px;
}
.field.has-error .field__err { display: flex; }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--surface);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid var(--on-ink);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.check a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }

.form__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-x[data-loading="true"] { pointer-events: none; opacity: 0.7; }
.btn-x .spin {
  width: 15px; height: 15px;
  border: 1.6px solid var(--on-ink-35);
  border-top-color: var(--on-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn-x[data-loading="true"] .spin { display: block; }
.btn-x[data-loading="true"] .btn-x__ico { display: none; }

.form__note {
  display: none;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.55;
}
.form__note.is-shown { display: flex; }
.form__note i { flex: none; font-size: 1.15rem; margin-top: 1px; }
.form__note--ok { background: var(--tint-mint); color: var(--accent-deep); }
.form__note--err { background: var(--danger-soft); color: var(--danger-ink); }

/* --------------------------------------------------------------------------
   30. Contact blocks
   -------------------------------------------------------------------------- */
.cinfo { display: grid; gap: 2px; }
.cinfo__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cinfo__row:first-child { border-top: 1px solid var(--line); }
.cinfo__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--tint-mint);
  color: var(--accent-deep);
  font-size: 1.1rem;
}
.cinfo__row dt { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.cinfo__row dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.018em; line-height: 1.42; }
.cinfo__row dd a:hover { color: var(--brand); }
.cinfo__row dd address { font-style: normal; font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   31. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-top: clamp(52px, 6vw, 88px);
  overflow: hidden;
}
.footer__top { display: grid; grid-template-columns: 1.35fr 2.65fr; gap: clamp(32px, 4vw, 72px); }
.footer__brand { max-width: 34ch; }
.footer__brand .brand { margin-bottom: 22px; }
.footer__brand p { font-size: 0.875rem; line-height: 1.66; color: var(--muted); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.footer__col ul { display: grid; gap: 11px; }
.footer__col a {
  position: relative;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  display: inline-block;
}
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-norm);
}
.footer__col a:hover { color: var(--brand); }
.footer__col a:hover::after { transform: scaleX(1); }

.footer__mid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(18px, 2vw, 34px);
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(30px, 3vw, 44px);
  border-top: 1px solid var(--line);
}
.footer__contact dt { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.footer__contact dd { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
.footer__contact dd a:hover { color: var(--brand); }
.footer__contact address { font-style: normal; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(34px, 4vw, 56px);
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 0.75rem; color: var(--muted-2); }
.footer__legal a:hover { color: var(--brand); }
.socials { display: flex; gap: 8px; }
.socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 0.95rem;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.socials a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-ink); transform: translateY(-2px); }

/* Oversized footer wordmark.
   Two exactly-stacked copies: a gradient fill that inks in from the bottom as
   you reach the end of the page, and the outline drawn on top of it so the
   stroke always stays crisp. The fill is scrubbed by scroll in animations.js. */
.footer__mark {
  position: relative;
  display: block;
  margin-top: clamp(10px, 2vw, 26px);
  /* Breathing room under the mark. It also buys scroll distance: the mark is
     only on screen for its own height plus whatever sits below it, and that
     window is exactly how long the fill has to play. */
  padding-bottom: clamp(24px, 5vw, 84px);
  text-align: center;
  user-select: none;
  pointer-events: none;
  isolation: isolate;
}

.footer__mark span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15.5vw, 15rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* The reveal lives on this wrapper, never on the element that carries
   background-clip: text — Chromium drops the text-clipped background entirely
   when a clip or mask is applied to the same element, silently rendering the
   whole fill invisible. This wrapper is the static one, so it defines the box.

   --fill goes 0 -> 1 and is animated by animations.js. A soft band above the
   waterline feathers the edge, so the ink rises rather than stepping up. */
.footer__mark-clip {
  display: block;
  --fill: 1;
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0,
    #000 calc(var(--fill) * 118% - 9%),
    rgba(0, 0, 0, 0) calc(var(--fill) * 118%)
  );
  mask-image: linear-gradient(
    to top,
    #000 0,
    #000 calc(var(--fill) * 118% - 9%),
    rgba(0, 0, 0, 0) calc(var(--fill) * 118%)
  );
  will-change: mask-image;
}

/* Outline layer — absolutely positioned, so it paints above the fill and the
   stroke stays crisp as the fill rises behind it. */
.footer__mark-line {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--wash-4);
}

.footer__mark-fill {
  color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(var(--brand-rgb), 0.09) 0%,
    rgba(var(--brand-rgb), 0.26) 55%,
    rgba(var(--accent-rgb), 0.34) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Browsers without background-clip:text would show a solid block, so only
   commit to the transparent text once the feature is actually supported. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer__mark-fill { background-image: none; color: var(--wash-2); }
}

/* --------------------------------------------------------------------------
   32. Custom cursor (desktop, pointer:fine only)
   -------------------------------------------------------------------------- */
.cursor,
.cursor-dot { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.js-anim .cursor {
    display: grid;
    place-items: center;
    position: fixed;
    top: 0; left: 0;
    z-index: 300;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1),
                margin 0.3s cubic-bezier(0.16,1,0.3,1), background-color 0.3s, border-color 0.3s, opacity 0.3s;
  }
  html.js-anim .cursor__lbl {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-ink);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.24s, transform 0.24s;
  }
  html.js-anim .cursor.is-link {
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    background: var(--cursor-fill);
    border-color: transparent;
  }
  html.js-anim .cursor.is-label { width: 82px; height: 82px; margin: -41px 0 0 -41px; background: var(--brand); border-color: transparent; }
  html.js-anim .cursor.is-label .cursor__lbl { opacity: 1; transform: scale(1); }
  html.js-anim .cursor.is-hidden { opacity: 0; }
  html.js-anim body.has-cursor,
  html.js-anim body.has-cursor a,
  html.js-anim body.has-cursor button { cursor: none; }
}

/* --------------------------------------------------------------------------
   33. Page transition veil
   -------------------------------------------------------------------------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: var(--ink);
  pointer-events: none;
  transform: translateY(100%);
  display: none;
}
html.js-anim .veil { display: block; }

/* Scroll progress */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 210;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Back to top */
.totop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 150;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass-90);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-norm), transform var(--t-norm), visibility var(--t-norm), background-color var(--t-fast), color var(--t-fast);
}
.totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   34. 404
   -------------------------------------------------------------------------- */
.nf {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 60px) var(--gutter) 80px;
  position: relative;
  overflow: hidden;
}
.nf__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 26vw, 20rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-2);
}

/* --------------------------------------------------------------------------
   35. Utilities
   -------------------------------------------------------------------------- */
.u-center { text-align: center; }
.u-mxa { margin-inline: auto; }
.u-mt-s { margin-top: 14px; }
.u-mt-m { margin-top: 26px; }
.u-mt-l { margin-top: clamp(30px, 3.4vw, 52px); }
.u-mb-m { margin-bottom: 26px; }
.u-maxw-sm { max-width: 46ch; }
.u-maxw-md { max-width: 58ch; }
.u-relative { position: relative; }
.u-nowrap { white-space: nowrap; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }

/* Chips grid for tech stacks */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.chip:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
.section--ink .chip { background: var(--hairline-inv-2); border-color: var(--line-inv); color: var(--on-ink-82); }

/* Checklist */
.checks { display: grid; gap: 13px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.56; color: var(--ink-soft); }
.checks i { flex: none; color: var(--accent); font-size: 1.1rem; margin-top: 1px; }
.section--ink .checks li { color: var(--on-ink-78); }

/* Two-column definition rows */
.deflist { border-top: 1px solid var(--line); }
.deflist__row { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.deflist__row h3 { font-size: clamp(1.05rem, 1.5vw, 1.3125rem); font-weight: 400; letter-spacing: -0.024em; }
.deflist__row p { font-size: 0.875rem; color: var(--muted); line-height: 1.62; }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Job cards */
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.job:first-of-type { border-top: 1px solid var(--line); }
.job h3 { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 400; letter-spacing: -0.026em; margin-bottom: 10px; }
.job__meta { display: flex; flex-wrap: wrap; gap: 7px; }

/* Keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}