/* =============================================
   CSS Variables
   ============================================= */
:root {
  --orange: #f39200;
  --orange-deep: #d97a00;
  --orange-soft: #ffb84d;

  /* Light / paper */
  --paper: #f7f5f0;
  --paper-2: #efebe1;
  --paper-3: #e6e1d3;
  --ink: #0e0e10;
  --ink-2: #1a1a1c;
  --ink-3: #2a2a2e;

  /* Semantic — light mode defaults */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --fg: var(--ink);
  --fg-2: #3a3a3e;
  --fg-dim: #7a776e;
  --border: rgba(14, 14, 16, 0.1);
  --border-strong: rgba(14, 14, 16, 0.22);
  --danger: #c8442f;

  /* Fonts — loaded in KeySoftSite::enqueueAssets().
     None of the three Latin families ships Arabic glyphs, so IBM Plex Sans Arabic
     sits behind each of them: the browser resolves per character, Latin keeps the
     Latin face and Arabic runs fall through to Plex. It is listed on every locale
     because the switcher shows a language's own name — an LTR page renders one
     Arabic word and loads only those glyphs. Where the face is not loaded at all,
     the name simply does not match and the stack carries on. */
  --sans: 'Manrope', 'IBM Plex Sans Arabic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', 'IBM Plex Sans Arabic', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Sans Arabic', 'SF Mono', Menlo, monospace;

  /* Type scale — fluid, min → max */
  --text-xs: clamp(11px, 1vw, 12px); /* labels, tags, captions */
  --text-sm: clamp(13px, 1.1vw, 14px); /* secondary text, nav links */
  --text-base: clamp(15px, 1.2vw, 16px); /* body copy */
  --text-md: clamp(16px, 1.4vw, 18px); /* lead paragraph */
  --text-lg: clamp(18px, 1.8vw, 22px); /* card titles */
  --text-xl: clamp(22px, 2.5vw, 28px); /* subheadings */
  --text-2xl: clamp(28px, 3.5vw, 40px); /* section titles */
  --text-3xl: clamp(36px, 5vw, 56px); /* page titles */
  --text-4xl: clamp(48px, 7vw, 88px); /* hero headline */

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* Font weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Height the fixed nav actually occupies: 16px padding + 64px logo + 1px rule.
     It was 68px, which left the bar sitting on top of inner-page content. */
  --nav-offset: 97px;

  --container: 1360px;
  --pad-x: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0, 0.5, 0.2, 1);
}

html[data-theme='dark'] {
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --bg-3: var(--ink-3);
  --fg: var(--paper);
  --fg-2: #c9c7c0;
  --fg-dim: #8a8880;
  --border: rgba(247, 245, 240, 0.1);
  --border-strong: rgba(247, 245, 240, 0.2);
  --danger: #ff7a63;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}

/* =============================================
   Custom Cursor
   ============================================= */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], input, textarea, select, label { cursor: none; }
}

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  border-radius: 50%;
}

#cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--fg-dim);
  translate: -50% -50%;
  transition:
    width 0.25s var(--ease),
    height 0.25s var(--ease),
    background 0.25s var(--ease);
}

#cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--fg-dim);
  opacity: 0.4;
  translate: -50% -50%;
  transition:
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    opacity 0.35s var(--ease),
    border-color 0.3s var(--ease);
}

/* Hover state — orange */
body.cursor-hover #cursor-dot {
  background: var(--orange);
  width: 6px;
  height: 6px;
}
body.cursor-hover #cursor-ring {
  width: 52px;
  height: 52px;
  opacity: 0.55;
  border-color: var(--orange);
}

/* Click state */
body.cursor-click #cursor-dot {
  width: 9px;
  height: 9px;
}
body.cursor-click #cursor-ring {
  width: 28px;
  height: 28px;
  opacity: 0.7;
}
/* Offset for fixed nav */
body {
  padding-top: var(--nav-offset);
}
@media (max-width: 768px) {
  :root {
    --nav-offset: 69px;
  }
}

img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Logo images — light/dark switching */
.logo--light {
  display: block;
}
.logo--dark {
  display: none;
}

html[data-theme='dark'] .logo--light {
  display: none;
}
html[data-theme='dark'] .logo--dark {
  display: block;
}

/* Theme toggle icons */
.icon-sun {
  display: none;
}
.icon-moon {
  display: block;
}

html[data-theme='dark'] .icon-sun {
  display: block;
}
html[data-theme='dark'] .icon-moon {
  display: none;
}

/* The custom cursor is a desktop conceit: on narrow layouts it hovers over a
   touch UI and covers the menu. Off below the nav breakpoint. */
@media (max-width: 768px) {
  body {
    cursor: auto;
  }
  #cursor-dot,
  #cursor-ring {
    display: none;
  }
}

/* =============================================
   Navigation
   ============================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  transition:
    background 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.nav--hidden {
  transform: translateY(-100%);
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}
/* Auto margins on both sides centre the menu in whatever space is left between
   the logo and the controls. */
.nav-links {
  margin-left: auto;
  margin-right: auto;
}

/* Scroll progress, a hairline on the bottom edge of the bar. */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.nav-progress__bar {
  display: block;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}
.nav-logo {
  font-family: var(--display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-logo img {
  height: 64px;
  width: auto;
  transition: height 0.3s var(--ease);
}
.nav.scrolled .nav-logo img {
  height: 40px;
}
.nav-logo .dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 2px;
  transform: rotate(45deg);
}
.nav-links {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 30px);
}
.nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--fg-2);
  transition: color 0.25s var(--ease);
}
.nav-link:hover {
  color: var(--fg);
}
.nav-link__index {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  opacity: 0.5;
  transition:
    color 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.nav-link:hover .nav-link__index,
.nav-link[aria-current='page'] .nav-link__index {
  color: var(--orange);
  opacity: 1;
}
.nav-link__swap {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4;
}
.nav-link__text {
  display: block;
  line-height: 1.4;
  transition: transform 0.45s var(--ease);
}
.nav-link__text--in {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  color: var(--fg);
}
.nav-link:hover .nav-link__text {
  transform: translateY(-100%);
}

.nav-ctrls {
  display: flex;
  gap: 24px;
  align-items: center;
}
.lang-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.lang-toggle:hover,
.theme-toggle:hover {
  border-color: var(--border-strong);
}
.lang-toggle .opt {
  opacity: 0.4;
  padding: 0 2px;
  transition: opacity 0.2s;
}
.lang-toggle .opt.active {
  opacity: 1;
  color: var(--orange);
}
/* Only the non-current languages are links; the current one is inert text. */
.lang-toggle a.opt {
  cursor: pointer;
}
.lang-toggle a.opt:hover,
.lang-toggle a.opt:focus-visible {
  opacity: 1;
  color: var(--fg);
}
/* Hairline between the codes, so EN AR does not read as one token. */
.lang-toggle .opt + .opt {
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--border);
}
.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 100px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
/* Orange rises to fill the pill rather than swapping the background outright. */
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--orange);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.nav-cta:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.nav-cta:hover::before {
  transform: none;
}
.nav-cta__arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease);
}
.nav-cta:hover .nav-cta__arrow {
  transform: translateX(3px);
}

.theme-toggle {
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    transform 0.45s var(--ease);
}
.theme-toggle:hover {
  transform: rotate(-20deg);
}

/* =============================================
   Burger button
   ============================================= */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease);
}
.nav-burger:hover {
  border-color: var(--border-strong);
}
.nav-burger__line {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.3s var(--ease),
    opacity 0.25s var(--ease);
}
.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* =============================================
   Mobile menu — fullscreen overlay
   Outside <nav> so parent transform doesn't break position:fixed
   ============================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 101;
  isolation: isolate;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Curtain wipe rather than a slab sliding in. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.62s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
.mobile-menu[aria-hidden='false'] {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

/* Just the bloom — the hairline grid made the panel busy behind the large type. */
.mobile-menu__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    60% 40% at 88% 8%,
    color-mix(in oklab, var(--orange) 26%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.55;
}

/* Top bar: logo + close */
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__logo img {
  height: 36px;
  width: auto;
}

/* Scrollable body */
.mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 0;
}
.mobile-menu__link {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  /* Each row lifts in one after another once the curtain is down. */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.055s);
}
.mobile-menu[aria-hidden='false'] .mobile-menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.22s + var(--i, 0) * 0.055s);
}
.mobile-menu__index {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease);
}
.mobile-menu__label {
  font-family: var(--display);
  font-size: clamp(26px, 7.5vw, 44px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.05;
  transition: transform 0.4s var(--ease);
}
.mobile-menu__chev {
  align-self: center;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--fg-dim);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.mobile-menu__chev svg {
  width: 13px;
  height: 13px;
  display: block;
}
/* An orange rule sweeps along the row on touch/hover. */
.mobile-menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.mobile-menu__link:hover::after,
.mobile-menu__link:focus-visible::after,
.mobile-menu__link:active::after,
.mobile-menu__link[aria-current='page']::after {
  transform: scaleX(1);
}
.mobile-menu__link:hover .mobile-menu__label,
.mobile-menu__link:active .mobile-menu__label {
  transform: translateX(6px);
}
.mobile-menu__link:hover .mobile-menu__index,
.mobile-menu__link:active .mobile-menu__index,
.mobile-menu__link[aria-current='page'] .mobile-menu__index {
  color: var(--orange);
}
.mobile-menu__link:hover .mobile-menu__chev,
.mobile-menu__link:active .mobile-menu__chev {
  opacity: 1;
  transform: none;
}

/* Contacts and CTA follow the links in. */
.mobile-menu__footer {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.mobile-menu[aria-hidden='false'] .mobile-menu__footer {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu__link,
  .mobile-menu__footer {
    transition-duration: 0.01ms;
  }
}

/* Footer: contacts + lang/cta */
.mobile-menu__footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.mobile-menu__footer {
  display: flex;
  flex-direction: column;
}
/* Action first, contacts on the line below it. */
.mobile-menu__bottom {
  order: 1;
}
.mobile-menu__contacts {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0 0;
}
.mobile-menu__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
  transition: color 0.2s var(--ease);
}
a.mobile-menu__contact-item:hover {
  color: var(--orange);
}
.mobile-menu__contact-item--text {
  cursor: default;
}
.mobile-menu__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--orange);
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  flex-shrink: 0;
}
.mobile-menu__close:hover {
  border-color: var(--border-strong);
  color: var(--orange);
}
.mobile-menu__close svg {
  width: 18px;
  height: 18px;
}
.mobile-menu__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  /* The links are hidden here, so nothing pushes the controls across; do it
     explicitly instead of leaving them stuck to the logo. */
  .nav-ctrls {
    margin-inline-start: auto;
  }
  .nav-burger {
    display: flex;
  }
  .nav-links {
    display: none;
  }
  .nav-ctrls .nav-cta {
    display: none;
  }
  .nav-logo img {
    height: 36px;
  }
  .nav.scrolled .nav-logo img {
    height: 28px;
  }
}
@media (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }
  .nav-burger {
    display: none !important;
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: 100px;
  transition: transform 0.3s var(--ease);
  position: relative;
  will-change: transform;
}
.btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--orange);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--orange-deep);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Quiet secondary action: a rule that draws itself, not a second pill competing
   with the primary button. */
.btn-quiet {
  padding: 14px 2px;
  background: none;
  color: var(--fg);
  position: relative;
}
.btn-quiet::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 10px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}
.btn-quiet:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn-quiet:hover {
  color: var(--orange);
}
.btn-quiet:hover::after {
  background: var(--orange);
}

.btn-dark {
  background: var(--ink);
  color: var(--paper);
}
.btn-dark:hover {
  background: #000;
}

.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-outline-dark:hover {
  background: var(--ink);
  color: var(--orange);
}

/* =============================================
   Sections — shared
   ============================================= */
.section {
  padding: clamp(32px, 5vw, 90px) 0;
}

/* ── Section rhythm ───────────────────────────────────────────────────
   Kept in one place so the alternation is readable: no two neighbours share
   a background, and the stats band inverts to punctuate the run.
   hero · ticker² · services · cases² · process · technologies² · clients ·
   stats(ink) · faq · contacts²            (² = --bg-2)                    */
.cases,
.technologies {
  background: var(--bg-2);
}
.services,
.process,
.clients,
.faq {
  background: var(--bg);
}

/* Texture instead of another colour: the middle of the run gets the same
   hairline grid as the hero, so the eye has something to catch on. */
.process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(120% 80% at 88% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 80% at 88% 0%, #000 0%, transparent 62%);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--orange);
  flex-shrink: 0;
}
.section-label__num {
  color: var(--fg-dim);
}
.section-label__sep {
  opacity: 0.4;
  margin: 0 -2px;
}
.section-title {
  font-family: var(--display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  margin: 0 0 16px;
  color: var(--fg);
}
.section-subtitle {
  font-size: var(--text-md);
  color: var(--fg-dim);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Tag */
.tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--fg-dim);
}

/* =============================================
   Hero
   ============================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Pulled up under the fixed nav so the grid and bloom run to the top edge
     instead of leaving a bare strip; the padding puts the content back. */
  margin-top: calc(var(--nav-offset) * -1);
  padding: clamp(156px, 14vw, 200px) 0 clamp(20px, 2.5vw, 36px);
}

/* ── Decorative canvas ── */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-canvas__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.5;
  /* Full alpha at the very top edge — a radial mask left a bare strip under the
     nav — then fading out before it reaches the ledger. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
}
.hero-canvas__bloom {
  position: absolute;
  top: -20%;
  inset-inline-end: -12%;
  width: min(880px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--orange) 28%, transparent) 0%,
    transparent 62%
  );
  filter: blur(26px);
  opacity: 0.5;
}
html[data-theme='dark'] .hero-canvas__bloom {
  opacity: 0.36;
}

/* Fine grain — what separates a printed page from a flat screen. */
.hero-canvas__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme='dark'] .hero-canvas__grain {
  mix-blend-mode: screen;
  opacity: 0.07;
}

/* ── Side rail ── */
.hero-rail {
  position: absolute;
  inset-inline-start: clamp(8px, 1.5vw, 24px);
  bottom: clamp(28px, 6vw, 76px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-rail__label {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero-rail__line {
  position: relative;
  width: 1px;
  height: 88px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--border-strong), transparent);
}
.hero-rail__line::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 26px;
  background: var(--orange);
  animation: hero-rail-run 2.8s var(--ease) infinite;
}
@keyframes hero-rail-run {
  from {
    transform: translateY(-28px);
  }
  to {
    transform: translateY(88px);
  }
}

/* ── Layout ── */
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.hero-left {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-right {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  margin-bottom: clamp(14px, 1.6vw, 20px);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
}
.hero-badge__dot {
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 clamp(16px, 1.9vw, 24px);
  color: var(--fg);
}

/* The headline runs past its column into the gutter — the overlap with the
   visual is what stops the split reading as two tidy halves. */
@media (min-width: 981px) {
  .hero-title {
    width: 114%;
  }
}

.hero-eyebrow {
  position: relative;
  padding-inline-start: 18px;
  max-width: 54ch;
  font-family: var(--mono);
  font-weight: var(--weight-light);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-dim);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}
.hero-eyebrow::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  bottom: 0.5em;
  width: 1px;
  background: var(--orange);
  opacity: 0.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
}

/* ── Ledger: stats offset under the visual, not under the headline ── */
/* Column flow rather than a fixed track count: three stats spread across the
   full width, and a fourth added in the admin drops in without a CSS change. */
.hero-ledger {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border);
  margin-top: clamp(28px, 3.4vw, 52px);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 26px) 0;
  border-inline-start: 1px solid var(--border);
}
/* The first cell opens the row, so it needs no rule and no indent — its value
   lines up with the headline above. */
.hero-stat:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.hero-stat__index {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--orange);
}
.hero-stat__value {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--fg);
}
.hero-stat__label {
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

/* ── Visual ── */
.flo-visual {
  position: relative;
  width: min(420px, 78vw);
  aspect-ratio: 1;
  flex-shrink: 0;
}

@media (min-width: 981px) {
  .hero-right {
    margin-inline-end: -6%;
    transform: translateY(-4%);
  }
}

/* Floating tech words */
.flo-words {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.flo-word {
  position: absolute;
  font-size: 12px;
  font-weight: var(--weight-medium);
  font-family: var(--mono);
  color: var(--fg-dim);
  opacity: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity 1.4s ease;
}

/* Hairline orbits replace the pulsing rings: slower, quieter, more expensive. */
.flo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--orange) 26%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.flo-orbit--1 {
  width: 62.4%;
  aspect-ratio: 1;
  animation: flo-spin 26s linear infinite;
}
.flo-orbit--1::after {
  content: '';
  position: absolute;
  top: -4px;
  left: calc(50% - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px color-mix(in oklab, var(--orange) 70%, transparent);
}
.flo-orbit--2 {
  width: 89.5%;
  aspect-ratio: 1;
  border-style: dashed;
  opacity: 0.5;
  animation: flo-spin 46s linear infinite reverse;
}
.flo-orbit--3 {
  width: 118.6%;
  aspect-ratio: 1;
  opacity: 0.26;
  animation: flo-spin 74s linear infinite;
}
@keyframes flo-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.flo-key-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 87.6%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flo-key-img {
  position: relative;
  z-index: 2;
  width: 85.6%;
  height: auto;
  filter:
    drop-shadow(0 0 60px rgba(243, 146, 0, 0.5))
    drop-shadow(0 0 20px rgba(243, 146, 0, 0.32))
    drop-shadow(0 32px 60px rgba(0, 0, 0, 0.22));
  animation: flo-float 6s ease-in-out infinite;
}
@keyframes flo-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-22px) rotate(2deg);
  }
}

/* ── Entrance ── */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-badge,
.hero-title,
.hero-eyebrow,
.hero-actions,
.hero-ledger {
  animation: hero-rise 0.85s var(--ease-out) both;
}
.hero-badge {
  animation-delay: 0.05s;
}
.hero-title {
  animation-delay: 0.12s;
}
.hero-eyebrow {
  animation-delay: 0.22s;
}
.hero-actions {
  animation-delay: 0.3s;
}
.hero-ledger {
  animation-delay: 0.38s;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .hero-rail {
    display: none;
  }
}
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 44px);
  }
  /* The visual stays — it moves under the copy instead of disappearing. */
  .hero-right {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    transform: none;
  }
  .flo-visual {
    width: min(380px, 72vw);
  }
}

/* Numbers stay on one line all the way down; only the type shrinks. */
@media (max-width: 620px) {
  .hero-ledger {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .hero-stat {
    gap: 3px;
    padding: 12px 10px 0;
  }
  .hero-stat__index {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .hero-stat__value {
    font-size: clamp(19px, 5.6vw, 26px);
  }
  .hero-stat__label {
    font-size: 11px;
    line-height: 1.25;
  }
  .flo-visual {
    width: min(320px, 76vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-title,
  .hero-eyebrow,
  .hero-actions,
  .hero-ledger,
  .flo-key-img,
  .flo-orbit,
  .hero-rail__line::after,
  .hero-badge__dot {
    animation: none;
  }
}

/* =============================================
   Ticker
   ============================================= */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  background: var(--bg-2);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}

.ticker__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker__item {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  padding: 0 20px;
  transition: color 0.2s var(--ease);
}

.ticker__item:hover {
  color: var(--fg);
}

.ticker__sep {
  font-size: 7px;
  color: var(--orange);
  flex-shrink: 0;
}

/* =============================================
   Services
   ============================================= */
.services {
  background: var(--bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.service-card {
  position: relative;
  isolation: isolate;
  padding: clamp(30px, 3.2vw, 46px) clamp(26px, 2.6vw, 40px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.35s var(--ease);
}

/* Hairline accent drawn in from the left on hover. */
.service-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
  z-index: 2;
}
.service-card:hover {
  background: var(--bg-2);
}
.service-card:hover::before {
  transform: scaleX(1);
}

.service-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.service-card__num {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  letter-spacing: 0.14em;
  transition: color 0.3s var(--ease);
}
.service-card:hover .service-card__num {
  color: var(--orange);
}

.service-card__arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  line-height: 0;
  color: var(--fg-dim);
  text-decoration: none;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.service-card__arrow svg {
  /* An SVG centres geometrically; the arrow glyph carried its own font
     metrics and sat off-centre inside the circle. */
  display: block;
  width: 16px;
  height: 16px;
}
.service-card:hover .service-card__arrow {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
  transform: translate(3px, -3px);
}

.service-card__title {
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
.service-card__desc {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 42ch;
}
.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 22px;
}
.service-card__tag {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  white-space: nowrap;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.service-card:hover .service-card__tag {
  border-color: var(--border-strong);
  color: var(--fg-2);
}

/* ── Focus card ───────────────────────────────────────────────
   Marked per service in the admin ("Focus card"). Inverts the
   surface so the grid ends on a single deliberate focal point. */
.service-card--focus {
  --border: rgba(247, 245, 240, 0.16);
  --border-strong: rgba(247, 245, 240, 0.34);
  --fg: var(--paper);
  --fg-2: #d8d5cd;
  --fg-dim: #9b978d;
  background: var(--ink);
  color: var(--paper);
}
.service-card--focus::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 80% at 100% 0%, rgba(243, 146, 0, 0.22), transparent 62%),
    radial-gradient(80% 65% at 0% 100%, rgba(243, 146, 0, 0.09), transparent 70%);
  opacity: 0.85;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.service-card--focus::before {
  transform: scaleX(1);
}
.service-card--focus:hover {
  background: var(--ink);
}
.service-card--focus:hover::after {
  opacity: 1;
}
.service-card--focus .service-card__num {
  color: var(--orange);
}
.service-card--focus .service-card__title {
  font-size: var(--text-xl);
}
.service-card--focus .service-card__arrow {
  color: var(--orange);
  border-color: rgba(243, 146, 0, 0.45);
}
.service-card--focus:hover .service-card__arrow {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}
.service-card--focus .service-card__tag {
  border-color: rgba(243, 146, 0, 0.32);
  color: #e8dfd0;
}
.service-card--focus:hover .service-card__tag {
  border-color: rgba(243, 146, 0, 0.6);
  color: var(--paper);
}

.service-card__cta {
  margin-top: auto;
  padding-top: 26px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  transition:
    gap 0.3s var(--ease),
    color 0.3s var(--ease);
}
.service-card__tags + .service-card__cta {
  margin-top: 0;
  padding-top: 18px;
}
.service-card__cta:hover {
  gap: 16px;
  color: var(--orange-soft);
}
.service-card__cta-arrow {
  transition: transform 0.3s var(--ease);
}
.service-card__cta:hover .service-card__cta-arrow {
  transform: translateX(2px);
}

/* The focus card must stay lighter than the page in dark mode. */
html[data-theme='dark'] .service-card--focus {
  background: linear-gradient(158deg, #202024 0%, #131316 62%);
}
html[data-theme='dark'] .service-card--focus:hover {
  background: linear-gradient(158deg, #27272c 0%, #161619 62%);
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card--focus .service-card__title {
    font-size: var(--text-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before,
  .service-card::after,
  .service-card__arrow,
  .service-card__num,
  .service-card__tag,
  .service-card__cta,
  .service-card__cta-arrow {
    transition: none;
  }
}

/* =============================================
   Static pages (privacy, terms, other prose)
   ============================================= */
.page-doc {
  /* The nav is fixed, so the first screen needs to clear it. */
  padding: clamp(120px, 14vw, 190px) 0 clamp(64px, 8vw, 120px);
  background: var(--bg);
}

/* Blog list and single post reuse the legal-page shell; these add the few
   pieces that shell does not cover. */
.post-list {
  display: grid;
  gap: clamp(28px, 3.4vw, 52px);
}
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
  padding-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--border);
}
.post-card:last-child {
  border-bottom: 0;
}
.post-card__media {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-3);
  aspect-ratio: 16 / 10;
}
.post-card__media--wide {
  margin: 0 0 clamp(24px, 3vw, 44px);
  aspect-ratio: 21 / 9;
  grid-column: 1 / -1;
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.post-card__media:hover img {
  transform: scale(1.04);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.post-card__title {
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  margin: 0;
}
.post-card__title a {
  color: var(--fg);
  transition: color 0.25s var(--ease);
}
.post-card__title a:hover {
  color: var(--orange);
}
.post-card__meta {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
.post-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-dim);
}
@media (max-width: 720px) {
  .post-card {
    grid-template-columns: 1fr;
  }
}

.page-doc__head {
  padding-bottom: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--border);
}
.page-doc__meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 4px 0 0;
}

.page-doc__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
/* One reset, then a single rhythm rule. Element-level margin resets here
   would out-specify the sibling selector below and collapse the spacing. */
.page-doc__body > * {
  margin: 0;
}
.page-doc__body > * + * {
  margin-top: 1.15em;
}
.page-doc__body h2 {
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 2.2em 0 0;
}
.page-doc__body h2 + * {
  margin-top: 0.7em;
}
.page-doc__body h3 {
  font-family: var(--display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 1.6em 0 0;
}
.page-doc__body h3 + * {
  margin-top: 0.6em;
}
.page-doc__body > :first-child {
  margin-top: 0;
}
.page-doc__body ul,
.page-doc__body ol {
  padding-inline-start: 1.3em;
}
.page-doc__body li + li {
  margin-top: 0.5em;
}
.page-doc__body a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.page-doc__body a:hover {
  color: var(--orange-deep);
}
.page-doc__body strong {
  color: var(--fg);
  font-weight: var(--weight-semibold);
}
.page-doc__body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.2em 0;
}

/* =============================================
   Cases
   ============================================= */

/* Head: title on the left, the note pulled to the right edge and set on the
   baseline of the title — an editorial masthead rather than a stacked block. */
.cases-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: end;
  gap: clamp(16px, 3vw, 56px);
  padding-bottom: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(24px, 2.8vw, 44px);
  border-bottom: 1px solid var(--border);
}
.cases-head__lead .section-title {
  margin-bottom: 0;
}
.cases-head__note {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-dim);
  text-align: end;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(26px, 2.6vw, 44px) clamp(16px, 1.8vw, 28px);
}

/* Rows alternate between a pair (wide + narrow) and a trio, so the rhythm never
   settles into a plain three-across grid. Every sixth card restarts the cycle:
   8+4 | 4+4+4 | 4+8 | 4+4+4 … which lands exactly full at ten projects. */
.case-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.case-card:nth-child(6n + 1) {
  grid-column: span 8;
}
/* Whatever the total, the closing card stretches to the last line so the final
   row is never left with a hole. */
.case-card:last-child {
  grid-column-end: -1;
}

/* ── Media ── */
.case-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: clamp(186px, 17.5vw, 262px);
  background: var(--bg-3);
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Held back a touch, so colour arrives with the hover. */
  filter: saturate(0.62);
  transform: scale(1.01);
  transition:
    transform 0.7s var(--ease),
    filter 0.5s var(--ease);
}
.case-card:hover .case-card__media img {
  filter: saturate(1);
  transform: scale(1.05);
}
.case-card__media--empty {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
}

/* ── Body ── */
.case-card__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.case-card__body::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.case-card:hover .case-card__body::after {
  transform: scaleX(1);
}

.case-card__titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.case-card__title {
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
  transition: color 0.3s var(--ease);
}
.case-card:nth-child(6n + 1) .case-card__title {
  font-size: var(--text-xl);
}
.case-card:hover .case-card__title {
  color: var(--orange);
}

.case-card__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--fg-dim);
  transition:
    color 0.3s var(--ease),
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.35s var(--ease);
}
.case-card__arrow svg {
  width: 13px;
  height: 13px;
  display: block;
}
.case-card:hover .case-card__arrow {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
  transform: translate(3px, -3px);
}

/* Clamped so a long blurb cannot stretch one card past its row-mates. */
.case-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-card:nth-child(6n + 1) .case-card__desc {
  -webkit-line-clamp: 3;
  max-width: 62ch;
}

.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.case-card__tag {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  white-space: nowrap;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.case-card:hover .case-card__tag {
  border-color: var(--border-strong);
  color: var(--fg-2);
}

@media (max-width: 1100px) {
  .case-card,
  .case-card:nth-child(6n + 1) {
    grid-column: span 6;
  }
  .case-card:nth-child(6n + 1) .case-card__title {
    font-size: var(--text-lg);
  }
}

@media (max-width: 980px) {
  .cases-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cases-head__note {
    text-align: start;
    max-width: 60ch;
  }
}

@media (max-width: 620px) {
  .case-card,
  .case-card:nth-child(6n + 1),
  .case-card:last-child {
    grid-column: 1 / -1;
  }
}

/* =============================================
   Process
   ============================================= */

/* Hairline grid, same language as the services block. */
.process-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

/* ── Left rail ── */
.process-nav {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.process-nav__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 18px;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.2vw, 30px);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: start;
  cursor: pointer;
  transition: background 0.35s var(--ease);
}
.process-nav__item:last-child {
  border-bottom: 0;
}
.process-nav__item:hover {
  background: var(--bg-2);
}
.process-nav__item.is-active {
  background: var(--bg-2);
}
.process-nav__item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

/* The active marker is a transform, not a border width + padding change,
   so switching steps no longer nudges the text sideways. */
.process-nav__item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s var(--ease);
}
.process-nav__item.is-active::before {
  transform: scaleY(1);
}

.process-nav__num {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  line-height: 1;
  padding-top: 7px;
  transition: color 0.3s var(--ease);
}
.process-nav__item.is-active .process-nav__num {
  color: var(--orange);
}
.process-nav__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.process-nav__title {
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}
.process-nav__duration {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.process-nav__chevron {
  display: grid;
  place-items: center;
  padding-top: 4px;
  color: var(--fg-dim);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    color 0.35s var(--ease);
}
.process-nav__chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}
.process-nav__item.is-active .process-nav__chevron {
  opacity: 1;
  transform: translateX(0);
  color: var(--orange);
}

/* ── Right panel ── */
.process-detail {
  background: var(--bg-2);
  /* Panels stack in one grid cell: the block is as tall as the tallest step,
     so nothing is clipped and the height does not jump between steps. */
  display: grid;
  overflow: hidden;
}
.process-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.4vw, 52px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.process-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0s;
}

/* Content settles in a short stagger rather than all at once. */
.process-panel > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.process-panel.is-active > * {
  opacity: 1;
  transform: none;
}
.process-panel.is-active > :nth-child(1) { transition-delay: 0.05s; }
.process-panel.is-active > :nth-child(2) { transition-delay: 0.11s; }
.process-panel.is-active > :nth-child(3) { transition-delay: 0.17s; }
.process-panel.is-active > :nth-child(4) { transition-delay: 0.23s; }

.process-panel__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.process-panel__num {
  font-family: var(--mono);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--orange);
}
.process-panel__duration {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.process-panel__title {
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 18px;
  color: var(--fg);
  text-wrap: balance;
}
.process-panel__desc {
  font-size: var(--text-base);
  color: var(--fg-dim);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 56ch;
}
.process-panel__visual {
  margin-top: auto;
  padding-top: clamp(28px, 3vw, 44px);
}

/* ── Diagrams ── */
.process-diagram {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(24px, 2.4vw, 34px);
  /* An inset panel on the tinted surface reads with depth. */
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--bg);
}
.process-diagram__flow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pd-node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px;
  line-height: 1.35;
}
.pd-node--circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg-2);
  flex-shrink: 0;
}
.pd-node--filled {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  box-shadow: 0 0 0 6px rgba(243, 146, 0, 0.12);
}
.pd-arrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--border-strong);
  letter-spacing: 3px;
  flex-shrink: 0;
}

/* Sprint diagram */
.process-diagram__sprints {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-sprint {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pd-sprint__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  width: 84px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pd-sprint__bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.pd-sprint__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 62%;
  background: var(--border-strong);
  border-radius: inherit;
}
.pd-sprint__bar--filled::after {
  width: 100%;
  background: linear-gradient(90deg, var(--orange-soft), var(--orange));
}
.pd-sprint__demo {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pd-sprint__demo--active {
  color: var(--orange);
}

@media (max-width: 860px) {
  .process-layout {
    grid-template-columns: 1fr;
  }

  /* Nav — horizontal scroll, hidden scrollbar */
  .process-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .process-nav::-webkit-scrollbar {
    display: none;
  }
  .process-nav__item {
    grid-template-columns: 1fr;
    gap: 8px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--border);
    padding: 14px 16px;
    flex: 1 0 auto;
    min-width: 0;
  }
  .process-nav__item:last-child {
    border-inline-end: 0;
  }
  /* Marker moves to the bottom edge for the horizontal layout. */
  .process-nav__item::before {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .process-nav__item.is-active::before {
    transform: scaleX(1);
  }
  .process-nav__num {
    padding-top: 0;
  }
  .process-nav__chevron,
  .process-nav__duration {
    display: none;
  }
  .process-nav__title {
    font-size: var(--text-base);
  }

  /* Panels — no stacking, plain show/hide */
  .process-panel {
    display: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .process-panel.is-active {
    display: flex;
  }
  .process-panel > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .process-diagram__flow {
    gap: 10px;
  }
  .pd-node--circle,
  .pd-node--filled {
    width: 74px;
    height: 74px;
  }
}

@media (max-width: 540px) {
  /* Small screens — vertical list again */
  .process-nav {
    flex-direction: column;
    overflow-x: unset;
  }
  .process-nav__item {
    grid-template-columns: auto 1fr;
    gap: 14px;
    width: 100%;
    flex: none;
    border-inline-end: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
  }
  .process-nav__item:last-child {
    border-bottom: 0;
  }
  .process-nav__item::before {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .process-nav__item.is-active::before {
    transform: scaleY(1);
  }
  .process-nav__num {
    padding-top: 4px;
  }
  .process-nav__duration {
    display: inline;
  }
  .process-panel {
    padding: clamp(20px, 5vw, 32px);
  }
  .process-diagram__flow {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-nav__item,
  .process-nav__item::before,
  .process-nav__num,
  .process-nav__chevron,
  .process-panel,
  .process-panel > * {
    transition: none;
  }
}

/* =============================================
   Technologies
   ============================================= */

.tech-group {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: baseline;
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}

.tech-group__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-dim);
  padding-top: 6px;
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
}

.tech-list:has(.tech-item:hover) .tech-item {
  opacity: 0.3;
}
.tech-list:has(.tech-item:hover) .tech-item:hover {
  opacity: 1;
}

.tech-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  transition: opacity 0.25s ease;
}

.tech-item__logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.tech-item__name {
  font-size: clamp(1.3rem, 1.75vw, 2rem);
  font-weight: var(--weight-medium);
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
}

.tech-item__sep {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: var(--weight-light);
  color: var(--border-strong);
  margin: 0 12px;
  line-height: 1.2;
  user-select: none;
}

@media (max-width: 640px) {
  .tech-group {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0;
  }
}

/* =============================================
   Contact
   ============================================= */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-2);
  padding-top: clamp(56px, 8vw, 132px);
  padding-bottom: clamp(48px, 6vw, 110px);
}

/* Decorative backdrop: a hairline grid and one off-centre bloom, both masked
   so the composition stays lopsided without ever crowding the copy. */
.contact-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.contact-canvas__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(120% 95% at 76% 4%, #000 0%, transparent 66%);
  mask-image: radial-gradient(120% 95% at 76% 4%, #000 0%, transparent 66%);
}
.contact-canvas__glow {
  position: absolute;
  top: -24%;
  inset-inline-end: -14%;
  width: min(720px, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--orange) 32%, transparent) 0%,
    transparent 64%
  );
  filter: blur(20px);
  opacity: 0.45;
}
html[data-theme='dark'] .contact-canvas__glow {
  opacity: 0.35;
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}

/* ── Left rail ── */
.contact-rail__title {
  margin: 0 0 14px;
  text-wrap: balance;
}
.contact-rail__desc {
  font-size: var(--text-md);
  color: var(--fg-dim);
  line-height: var(--leading-relaxed);
  margin: 0 0 24px;
  max-width: 40ch;
}

.contact-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(28px, 4vw, 48px);
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.contact-status__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange);
  animation: contact-ping 2.6s var(--ease) infinite;
}
@keyframes contact-ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--orange) 50%, transparent);
  }
  70% {
    box-shadow: 0 0 0 9px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Hairline rows rather than boxed cards — same language as the tech list. */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.contact-list__item {
  border-bottom: 1px solid var(--border);
}

.contact-row {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 16px;
  align-items: baseline;
  gap: 12px 18px;
  padding: 18px 2px;
  text-decoration: none;
  color: inherit;
}
.contact-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
a.contact-row:hover::after {
  transform: scaleX(1);
}
.contact-row__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-dim);
}
.contact-row__value {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--fg);
  transition:
    transform 0.35s var(--ease),
    color 0.25s var(--ease);
}
a.contact-row:hover .contact-row__value {
  color: var(--orange);
  transform: translateX(4px);
}
.contact-row__arrow {
  justify-self: end;
  font-size: 13px;
  line-height: 1;
  color: var(--fg-dim);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease),
    color 0.3s var(--ease);
}
a.contact-row:hover .contact-row__arrow {
  opacity: 1;
  transform: none;
  color: var(--orange);
}

/* ── Right panel ── */
.contact-panel {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 46px);
  box-shadow: 0 34px 70px -46px rgba(14, 14, 16, 0.55);
}
html[data-theme='dark'] .contact-panel {
  border-color: var(--border-strong);
  box-shadow: 0 34px 70px -46px rgba(0, 0, 0, 0.9);
}
.contact-panel__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent 72%);
}

.contact-panel__head {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.contact-panel__index {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-dim);
  margin-bottom: 10px;
}
.contact-panel__title {
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0 0 6px;
}
.contact-panel__note {
  font-size: var(--text-sm);
  color: var(--fg-dim);
  margin: 0;
}

/* The panel rides above the rail's baseline and breaks the container's right
   edge — the asymmetry that keeps the block from reading as two even columns. */
@media (min-width: 981px) {
  .contact-panel {
    margin-top: -60px;
    margin-inline-end: calc(var(--pad-x) * -0.45);
  }
}

@media (max-width: 980px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
  .contact-rail__desc {
    max-width: 52ch;
  }
}
@media (max-width: 520px) {
  .contact-row {
    grid-template-columns: 1fr 16px;
    gap: 4px 12px;
  }
  .contact-row__label {
    grid-column: 1 / -1;
  }
}

/* =============================================
   Form — shared by the contact panel and the modal
   ============================================= */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
}
.field--wide {
  grid-column: 1 / -1;
}

/* Honeypot. Moved out of view rather than display:none — some bots skip fields
   they can tell are hidden, and this one is meant to be filled in. */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Underline fields with a floating label: less chrome than boxed inputs, and
   the label never eats a separate line. */
.field {
  position: relative;
  display: block;
  min-width: 0;
  /* Shared by the input's padding and by the phone field's country selector,
     which has to be inset by exactly this much to land on the text line. */
  --field-pad-top: 22px;
  --field-pad-bottom: 10px;
}
.field__input {
  width: 100%;
  padding: var(--field-pad-top) 0 var(--field-pad-bottom);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-base);
  outline: none;
  resize: none;
  transition: border-color 0.3s var(--ease);
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--fg);
  transition: background-color 9999s ease-in-out 0s;
}
.field__input--textarea {
  min-height: 116px;
  line-height: var(--leading-relaxed);
}
.field__input:hover {
  border-bottom-color: var(--border-strong);
}
.field__label {
  position: absolute;
  inset-inline-start: 0;
  top: 21px;
  transform-origin: left top;
  pointer-events: none;
  font-size: var(--text-base);
  color: var(--fg-dim);
  white-space: nowrap;
  transition:
    transform 0.28s var(--ease),
    color 0.28s var(--ease);
}
/* main.js moves the label and the underline inside .iti so they remain adjacent
   siblings of the input. At rest the label starts where the text does — past the
   flag and dial code — expressed as a transform so the rules below simply
   replace it instead of competing on `left`. */
.iti .field__label {
  transform: translateX(var(--phone-pad, 0px));
}
/* Raised, the generic rule below takes over and the label lines up with every
   other field's: the country selector sits on the text line, so nothing collides
   19px above it. Those selectors outrank the one above, so no override needed. */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-19px) scale(0.72);
  inset-inline-start: 0;
}
.field__input:focus + .field__label {
  color: var(--orange);
}
/* Marks the two fields that must be filled in; the rest carry no marker. The
   asterisk is aria-hidden because the inputs already have `required`. */
.field__required {
  margin-inline-start: 2px;
  color: var(--orange);
}
.field__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.field__input:focus ~ .field__line {
  transform: scaleX(1);
}

.field.is-invalid .field__input {
  border-bottom-color: var(--danger);
}
.field.is-invalid .field__label {
  color: var(--danger);
}

/* ── Phone field: intl-tel-input dressed to match the underline inputs ── */
.field .iti {
  width: 100%;
  display: block;
  /* The vendor paints a grey block behind the country button on hover; flush
     against the form's left edge that block reads as a misalignment. Its own
     variable turns it off — cheaper than outranking a :has() chain. */
  --iti-hover-color: transparent;
}
/* The container spans the whole input box by default, which centres the flag and
   dial code over the padding rather than over the text. Inset it by the input's
   own padding so the selector sits on the same line as the typed number. */
.field .iti__country-container {
  top: var(--field-pad-top);
  /* +1px for the input's own bottom border, which the wrapper's height includes. */
  bottom: calc(var(--field-pad-bottom) + 1px);
  padding: 0;
}
/* The library sets the input's left padding itself, measured from this button —
   never flatten that padding, or the text runs under the flag. The button's own
   left padding goes, though: the flag must start on the form's left edge, level
   with the other fields' text and underlines. */
.field .iti__selected-country {
  background: transparent;
  border-radius: 0;
  padding: 0;
  transition: color 0.25s var(--ease);
}
.field .iti__selected-country-primary {
  padding: 0 6px 0 0;
}
.field .iti__selected-country:hover,
.field .iti__selected-country:focus {
  background: transparent;
  color: var(--orange);
}
.field .iti__selected-dial-code {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.field .iti__arrow {
  border-top-color: var(--fg-dim);
}


/* Dropdown, in both themes. v29 detaches this container to <body>. */
.iti__country-container {
  z-index: 1200;
}
.iti__country-list {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}
.iti__search-input-wrapper {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.iti__search-input {
  background: var(--bg);
  color: var(--fg);
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  font: inherit;
  font-size: var(--text-sm);
}
.iti__search-input::placeholder {
  color: var(--fg-dim);
}
.iti__country-list {
  max-height: 264px;
}
.iti__country {
  color: var(--fg-2);
  padding: 9px 14px;
  font-size: var(--text-sm);
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.iti__dial-code {
  font-family: var(--mono);
  color: var(--fg-dim);
}
.iti__country-name {
  color: inherit;
}
.iti__no-results,
.iti__loading {
  color: var(--fg-dim);
  font-size: var(--text-sm);
  padding: 12px 14px;
}

/* Chips */
.form-chips {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form-chips__legend {
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-dim);
}
.form-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  transition:
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    background 0.25s var(--ease);
}
.chip__mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.chip:hover {
  border-color: var(--border-strong);
  color: var(--fg);
}
.chip.is-active {
  border-color: var(--orange);
  color: var(--fg);
  background: color-mix(in oklab, var(--orange) 10%, transparent);
}
.chip.is-active .chip__mark {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.2);
}

/* Submit row */
.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.form-submit {
  flex-shrink: 0;
}
.form-submit:hover {
  transform: translateY(-2px);
}
.form-submit[disabled] {
  opacity: 0.55;
  transform: none;
}
.form-foot__note {
  margin: 0;
  max-width: 30ch;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-dim);
}

.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--danger);
}

.form-success {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 8px;
  padding: clamp(26px, 4vw, 48px) 0;
  /* Auto block margins centre the panel once the form is the only child of a
     full-height flex column — that is what the modal gives it. */
  margin: auto 0;
  animation: form-success-in 0.5s var(--ease) both;
}
.form-success__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--orange) 45%, transparent);
  background: color-mix(in oklab, var(--orange) 12%, transparent);
  color: var(--orange);
}
.form-success__icon path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: form-check 0.55s var(--ease) 0.25s forwards;
}
.form-success__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.form-success__text {
  margin: 0;
  max-width: 36ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-dim);
}
.form-success__again {
  margin-top: 22px;
}
@keyframes form-success-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes form-check {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .form-submit {
    justify-content: center;
  }
}

/* =============================================
   FAQ
   ============================================= */
.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  text-align: start;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
}

.faq-item__question {
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s var(--ease),
    border-color 0.2s var(--ease);
  position: relative;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--fg);
  border-radius: 1px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease);
}

.faq-item__icon::before {
  width: 10px;
  height: 1px;
}

.faq-item__icon::after {
  width: 1px;
  height: 10px;
}

.faq-item__trigger[aria-expanded='true'] .faq-item__icon {
  border-color: var(--orange);
}

.faq-item__trigger[aria-expanded='true'] .faq-item__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-item__body {
  overflow: hidden;
}

.faq-item__body[hidden] {
  display: block;
  max-height: 0;
  visibility: hidden;
}

.faq-item__body.is-open {
  visibility: visible;
}

.faq-item__answer {
  padding-bottom: 28px;
  font-size: var(--text-base);
  color: var(--fg-dim);
  line-height: var(--leading-relaxed);
  max-width: 720px;
}

/* =============================================
   Stats
   ============================================= */
.stats {
  background: var(--ink);
  color: var(--paper);
}
html[data-theme='dark'] .stats {
  background: var(--ink-3);
}

.stats .section-label {
  color: color-mix(in oklab, var(--paper) 50%, transparent);
}

.stats .section-title {
  color: var(--paper);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  border-inline-start: 1px solid rgba(247, 245, 240, 0.12);
}

.stat-card {
  padding: 48px 40px;
  border-inline-end: 1px solid rgba(247, 245, 240, 0.12);
  border-bottom: 1px solid rgba(247, 245, 240, 0.12);
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-card__value {
  font-family: var(--display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--orange);
  margin-bottom: 16px;
}

.stat-card__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
}

/* =============================================
   Clients
   ============================================= */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-inline-start: 1px solid var(--border);
}

.client-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline-end: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 120px;
  transition: background 0.2s var(--ease);
}

.client-cell:hover {
  background: var(--bg-2);
}

.client-cell__logo {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.2s var(--ease);
}

.client-cell:hover .client-cell__logo {
  filter: grayscale(0) opacity(1);
}

.client-cell__name {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* =============================================
   Footer
   ============================================= */
.site-footer {
  background: var(--ink);
  color: var(--paper);
}

/* Main grid */
.footer-body {
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

/* Brand */
.footer-logo img {
  height: 52px;
  width: auto;
  margin-bottom: 24px;
}
.footer-logo-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--paper);
  margin-bottom: 24px;
}
.footer-logo-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 2px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.footer-brand-desc {
  font-size: var(--text-sm);
  color: rgba(247, 245, 240, 0.5);
  line-height: var(--leading-relaxed);
  margin: 0 0 28px;
  max-width: 320px;
}

/* Socials */
.footer-socials {
  display: flex;
  gap: 10px;
}
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(247, 245, 240, 0.15);
  border-radius: 8px;
  color: rgba(247, 245, 240, 0.5);
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.footer-social:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(243, 146, 0, 0.08);
}
.footer-social svg {
  width: 15px;
  height: 15px;
}

/* Nav columns */
.footer-nav-heading {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.35);
  margin: 0 0 20px;
}
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav-list a {
  font-size: var(--text-sm);
  color: rgba(247, 245, 240, 0.65);
  transition: color 0.2s var(--ease);
}
.footer-nav-list a:hover {
  color: var(--paper);
}

/* Contact column */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.footer-contact-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.35);
  margin-bottom: 3px;
}
.footer-contact-value {
  font-size: var(--text-sm);
  color: rgba(247, 245, 240, 0.75);
  transition: color 0.2s var(--ease);
}
a.footer-contact-value:hover {
  color: var(--orange);
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(247, 245, 240, 0.1);
  padding: 24px 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-copy {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: rgba(247, 245, 240, 0.35);
  margin: 0;
  flex: 1;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xs);
  color: rgba(247, 245, 240, 0.35);
  margin: 0;
}
.footer-legal a {
  color: rgba(247, 245, 240, 0.35);
  transition: color 0.2s var(--ease);
}
.footer-legal a:hover {
  color: rgba(247, 245, 240, 0.75);
}
.footer-made {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: rgba(247, 245, 240, 0.25);
  margin: 0;
}
.footer-made-dot {
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 40px);
  }
  .footer-brand {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 28px;
  }
  .footer-brand-desc {
    max-width: 100%;
    margin-bottom: 0;
  }
  .footer-contact-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── 768px – tablet portrait ── */
@media (max-width: 768px) {
  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .footer-brand-desc {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  /* Compacted: two columns for the link lists, tighter rhythm, smaller type —
     the footer was taking most of a phone screen. */
  .footer-body {
    padding: clamp(32px, 7vw, 44px) 0 clamp(24px, 5vw, 32px);
  }
  .footer-brand-desc {
    font-size: var(--text-sm);
    max-width: 46ch;
  }
  .footer-nav-heading {
    font-size: var(--text-xs);
  }
  .footer-nav-list {
    display: block;
  }
  .footer-nav-list a,
  .footer-legal a,
  a.footer-contact-value {
    min-height: 34px;
  }
  .footer-contact-label {
    font-size: 10px;
  }
  .footer-contact-value {
    font-size: var(--text-sm);
  }
  .footer-socials {
    gap: 10px;
  }
  .footer-bottom {
    padding: 14px 0;
  }
  .footer-copy,
  .footer-legal a {
    font-size: var(--text-xs);
  }

  .footer-contact-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .footer-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-cta-text {
    font-size: var(--text-xl);
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .footer-brand-desc {
    margin-bottom: 0;
  }
  .footer-nav-heading {
    margin-bottom: 14px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .footer-copy {
    flex: none;
  }
}

/* Touch targets: footer links render at 18–19px, which is fine for a mouse and
   too small for a thumb. Widened on touch widths only, so the desktop footer
   keeps its density. */
@media (max-width: 768px) {
  .footer-nav-list a,
  .footer-legal a,
  a.footer-contact-value {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-nav-list li,
  .footer-legal li {
    line-height: 1;
  }
}

/* =============================================
   Modal: Discuss Project
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: color-mix(in oklab, var(--ink) 60%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  /* Visibility flips instantly on open (so focus can move into the dialog right
     away) and is delayed on close until the fade-out has finished. */
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear 0s;
}

.modal {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 2 * clamp(12px, 3vw, 32px));
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  opacity: 0;
  transform: translateY(26px) scale(0.975);
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, 0.75);
  transition:
    transform 0.45s var(--ease),
    opacity 0.35s var(--ease);
}
.modal-overlay.is-open .modal {
  opacity: 1;
  transform: none;
}

.modal--split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  max-width: 960px;
}

/* ── Left pane: always ink, so the dialog reads as a piece of stationery
   rather than a floating box of the page background. ── */
.modal__aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(28px, 3.4vw, 46px);
  background: var(--ink);
  color: var(--paper);
}
html[data-theme='dark'] .modal__aside {
  background: var(--ink-2);
}
.modal__aside::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--orange), transparent);
  opacity: 0.55;
}
.modal__aside-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(247, 245, 240, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 245, 240, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(95% 75% at 15% 0%, #000, transparent 74%);
  mask-image: radial-gradient(95% 75% at 15% 0%, #000, transparent 74%);
}

.modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: rgba(247, 245, 240, 0.6);
}
.modal__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2s ease infinite;
}

.modal__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--paper);
  text-wrap: balance;
}
.modal__subtitle {
  margin: 0 0 clamp(24px, 3vw, 34px);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(247, 245, 240, 0.62);
}

.modal__steps {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal__step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: baseline;
}
.modal__step-num {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--orange);
}
.modal__step-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(247, 245, 240, 0.78);
}

.modal__mail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 18px;
  border-top: 1px solid rgba(247, 245, 240, 0.14);
  text-decoration: none;
}
.modal__mail-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: rgba(247, 245, 240, 0.5);
}
.modal__mail-value {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--paper);
  transition: color 0.25s var(--ease);
}
.modal__mail:hover .modal__mail-value {
  color: var(--orange);
}

/* ── Right pane ── */
.modal__main {
  min-height: 0;
  padding: clamp(28px, 3.4vw, 46px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.modal__main .contact-form {
  flex: 1;
}

.modal__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg-dim);
  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.4s var(--ease);
}
.modal__close:hover {
  color: var(--fg);
  border-color: var(--border-strong);
  transform: rotate(90deg);
}

/* Each pane scrolls on its own once there is room for two columns. */
@media (min-width: 861px) {
  .modal--split {
    overflow: hidden;
  }
  .modal__aside,
  .modal__main {
    overflow-y: auto;
  }
}

@media (max-width: 860px) {
  .modal--split {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .modal__steps,
  .modal__mail {
    display: none;
  }
  .modal__aside::after {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, var(--orange), transparent 70%);
  }
}

@media (max-width: 600px) {
  .modal {
    border-radius: 18px;
  }
  .modal__aside,
  .modal__main {
    padding: 26px 20px;
  }
  .modal__close {
    top: 10px;
    inset-inline-end: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .contact-row__value,
  .contact-row__arrow,
  .field__label,
  .field__line,
  .form-success {
    transition-duration: 0.01ms;
    animation: none;
  }
  .contact-status__dot,
  .modal__eyebrow-dot {
    animation: none;
  }
  .form-success__icon path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card {
    padding: 36px 28px;
  }
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stats {
    gap: 28px;
    flex-wrap: wrap;
  }
}

/* =============================================
   RTL — Arabic (Dubai)
   Box-model mirroring is handled by logical properties throughout the sheet.
   What is left here is everything CSS cannot mirror on its own: transforms,
   keyframe directions, glyphs that carry a direction, and the phone control,
   which stays LTR because a dial code never reverses.
   ============================================= */
[dir='rtl'] {
  /* The font stacks already carry the Arabic face — see :root. */

  /* Arabic is a joined script: letter-spacing pulls the connections apart and
     makes words unreadable. The eyebrow labels lose their tracking here. */
  --tracking-wide: 0;
  --tracking-wider: 0;
  --tracking-tight: 0;
  --tracking-snug: 0;

  /* Arabic hangs marks above and below the baseline, and the display leadings
     were set for Latin caps. At hero size a shadda landed on the line under it. */
  --leading-tight: 1.35;
  --leading-snug: 1.45;
}

/* The tracking above is token-driven; these rules set their own literal values,
   and every one of them carries Arabic copy. */
[dir='rtl'] .nav-link,
[dir='rtl'] .hero-title,
[dir='rtl'] .hero-rail__label,
[dir='rtl'] .service-card__cta,
[dir='rtl'] .process-nav__duration,
[dir='rtl'] .process-panel__duration,
[dir='rtl'] .pd-node,
[dir='rtl'] .pd-sprint__label,
[dir='rtl'] .pd-sprint__demo {
  letter-spacing: normal;
}

/* Vertical writing mode stacks Arabic glyph by glyph and severs the joins, so
   the scroll cue reads horizontally above its rule instead. */
[dir='rtl'] .hero-rail__label {
  writing-mode: horizontal-tb;
}

/* Same reason as the leading tokens above, for the two display sizes that set
   their line-height outright: sub-1.0 leading buries the marks on ت and ح. */
[dir='rtl'] .hero-title {
  line-height: 1.3;
}
[dir='rtl'] .mobile-menu__label {
  line-height: 1.3;
}

/* ── Directional glyphs ── */
/* → and ↗ are typed into the templates, and Unicode does not mirror them for
   us. Flipping the box keeps the hover nudges below meaningful. */
[dir='rtl'] .arrow,
[dir='rtl'] .nav-cta__arrow,
[dir='rtl'] .contact-row__arrow,
[dir='rtl'] .case-card__arrow svg,
[dir='rtl'] .service-card__arrow svg,
[dir='rtl'] .service-card__cta-arrow,
[dir='rtl'] .process-nav__chevron svg,
[dir='rtl'] .mobile-menu__chev svg {
  transform: scaleX(-1);
}

/* ── Hover nudges ── */
/* Each of these moves a glyph "forward". Forward is now leftwards, and the
   flipped arrows above need their scaleX kept in the composed transform. */
[dir='rtl'] .btn:hover .arrow {
  transform: scaleX(-1) translateX(4px);
}
[dir='rtl'] .nav-cta:hover .nav-cta__arrow {
  transform: scaleX(-1) translateX(3px);
}
[dir='rtl'] .service-card__cta:hover .service-card__cta-arrow {
  transform: scaleX(-1) translateX(2px);
}
[dir='rtl'] a.contact-row:hover .contact-row__value {
  transform: translateX(-4px);
}
[dir='rtl'] .contact-row__arrow {
  transform: scaleX(-1) translate(-4px, 4px);
}
/* The LTR hover resets this to `transform: none` and outranks the rule above,
   which would snap the glyph back to pointing the wrong way mid-hover. */
[dir='rtl'] a.contact-row:hover .contact-row__arrow {
  transform: scaleX(-1);
}
[dir='rtl'] .mobile-menu__link:active .mobile-menu__label {
  transform: translateX(-6px);
}
[dir='rtl'] .mobile-menu__chev {
  transform: translateX(8px);
}
[dir='rtl'] .process-nav__chevron {
  transform: translateX(6px);
}
[dir='rtl'] .process-nav__item.is-active .process-nav__chevron {
  transform: translateX(0);
}
/* The corner arrows sit at 45°, so mirroring the glyph is not enough — the
   hover has to travel towards the new corner as well. */
[dir='rtl'] .service-card:hover .service-card__arrow,
[dir='rtl'] .case-card:hover .case-card__arrow {
  transform: translate(-3px, -3px);
}

/* ── Wipes and underlines ── */
/* Every scaleX reveal grows from the start edge; in RTL that edge is the right. */
[dir='rtl'] .nav-progress__bar,
[dir='rtl'] .mobile-menu__link::after,
[dir='rtl'] .service-card::before,
[dir='rtl'] .case-card__body::after,
[dir='rtl'] .contact-row::after,
[dir='rtl'] .field__line {
  transform-origin: right center;
}
/* This one deliberately runs the other way: out from the end, back from the
   start. Both origins swap so the gesture survives the mirror. */
[dir='rtl'] .btn-quiet::after {
  transform-origin: left center;
}
[dir='rtl'] .btn-quiet:hover::after {
  transform-origin: right center;
}
[dir='rtl'] .field__label {
  transform-origin: right top;
}

/* ── Ticker ── */
/* The marquee slides its duplicated track towards the start edge. Mirrored, the
   track has to travel the other way or the strip scrolls into its own gap. */
@keyframes ticker-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(33.333%);
  }
}
[dir='rtl'] .ticker__track {
  animation-name: ticker-rtl;
}

/* ── Strings that never flip ── */
/* Phone numbers, e-mail addresses and figures like "40+" are Latin/numeric runs
   that must not reorder inside an Arabic line — "+971 55 …" would otherwise
   render as "… 55 971+". They carry dir="ltr" in the templates, which isolates
   them through the UA stylesheet, so there is nothing to add here. */

/* ── Phone field ── */
/* intl-tel-input always writes padding-left on the input and pins its country
   container to the left, with no RTL mode of its own. Rather than fight it, the
   whole control is mirrored here by hand: selector on the start (right) edge,
   the number still typed and read left-to-right. */
/* Physical properties on purpose: the vendor pins this to left:0, and a logical
   inset-inline-start would resolve to `right` while that `left` stayed put,
   stretching the container across the whole field. */
[dir='rtl'] .field .iti__country-container {
  left: auto;
  right: 0;
}
[dir='rtl'] .field .iti__selected-country-primary {
  padding: 0 0 0 6px;
}
[dir='rtl'] .field .iti__tel-input {
  /* Beats the inline padding-left the library sets on every country change. */
  padding-left: 0 !important;
  padding-right: var(--phone-pad, 0px);
  direction: ltr;
  text-align: right;
}
/* Everything below uses physical properties on purpose. The library wraps the
   control in its own dir="ltr" element — that is how it keeps a dial code from
   reversing — so inside this subtree `inset-inline-start` resolves to *left*,
   and a logical rule would push the label out of the field entirely.
   At rest the label starts where the number does, inset from the right edge by
   the flag and dial code. Raised, it joins the other labels at that edge. */
[dir='rtl'] .iti .field__label {
  left: auto;
  right: 0;
  transform: translateX(calc(var(--phone-pad, 0px) * -1));
}
[dir='rtl'] .iti .field__input:focus + .field__label,
[dir='rtl'] .iti .field__input:not(:placeholder-shown) + .field__label {
  left: auto;
  right: 0;
  transform: translateY(-19px) scale(0.72);
}