/* =============================================================================
   STYLESHEET — LIGHT THEME
   -----------------------------------------------------------------------------
   1.  Tokens (colours from your palette)
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & pills
   6.  Header / nav
   7.  Hero
   8.  Service groups & cards
   9.  Sections (stats, process, quotes, faq, plans, cta)
   10. The free offer
   11. Technology logo grid
   12. Contact & forms
   13. Footer
   14. Motion & utilities
   15. Responsive
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS -- */
:root {
  /* Palette — sampled from your brand screenshot */
  --navy-900: #1B1B33;
  --navy-800: #22223C;
  --navy-700: #272743;
  --steel-700: #245672;
  --steel-600: #2D698D;
  --steel-500: #3D84AD;
  --steel-400: #5FA8C6;
  --mint-400: #8FDBD7;
  --mint-300: #B8E9E6;
  --mint-200: #D2F1EF;
  --ice-100: #E3F5F5;
  --ice-50: #F2FAFA;

  /* Semantic — light theme */
  --bg: #FFFFFF;
  --bg-alt: var(--ice-50);
  --bg-deep: #F7FBFB;

  --surface: #FFFFFF;
  --surface-2: #F8FCFC;
  --surface-3: var(--ice-50);
  --border: rgba(39, 39, 67, 0.10);
  --border-mid: rgba(39, 39, 67, 0.16);
  --border-strong: rgba(45, 105, 141, 0.34);

  --text: var(--navy-900);
  --text-muted: #56607C;
  --text-dim: #838DA4;

  --accent: var(--steel-600);       /* text-safe accent on white */
  --accent-soft: var(--mint-300);   /* for fills / highlights */
  --accent-2: var(--steel-500);
  --ink: #0F1A2A;                   /* text on top of mint/steel fills */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Space & shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.75rem, 8vw, 7rem);

  /* Elevation — soft, low-opacity for light backgrounds */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 10px 30px -14px rgba(16, 24, 40, 0.16);
  --shadow-lg: 0 24px 54px -24px rgba(16, 24, 40, 0.22);
  --shadow-glow: 0 0 0 1px rgba(45, 105, 141, 0.10),
    0 26px 56px -28px rgba(45, 105, 141, 0.34);

  /* The dark code panel keeps the navy palette as a deliberate contrast block. */
  --code-bg: linear-gradient(170deg, #272743, #1B1B33);
  --code-border: rgba(184, 233, 230, 0.16);

  /* ------------------------------------------------------------ IMAGERY --
     Photography lives in assets/img/ — see the CREDITS.md there for sources
     and, more importantly, for how to swap in your own photos. Those will
     always beat stock for trust. */
  --photo-hero: url("../img/hero-desk.jpg");
  --photo-band-a: url("../img/band-workspace.jpg");
  --photo-band-b: url("../img/band-desk.jpg");
  --photo-band-c: url("../img/band-code.jpg");
  --photo-page-head: url("../img/services-hero.jpg");
  --photo-about-head: url("../img/band-desk.jpg");
  --photo-contact: url("../img/contact-desk.jpg");

  /* Wash applied over photos so text on top stays readable on a light theme. */
  --wash-white: linear-gradient(
    100deg,
    #FFFFFF 0%,
    rgba(255, 255, 255, 0.95) 30%,
    rgba(255, 255, 255, 0.72) 60%,
    rgba(250, 253, 253, 0.42) 100%
  );
  /* Dark scrim, for photos that carry white text. */
  --scrim-dark: linear-gradient(
    100deg,
    rgba(20, 22, 44, 0.94) 0%,
    rgba(27, 27, 51, 0.86) 38%,
    rgba(36, 86, 114, 0.66) 72%,
    rgba(45, 105, 141, 0.52) 100%
  );

  /* ------------------------------------------------------------- MOTION --
     One place to tune how the whole site moves. Durations map to intent:
       micro  in-place state change (toggle, icon)
       hover  pointer feedback
       enter  content arriving
       scene  large choreographed moments
     Every easing here is an "out" curve — motion should decelerate into rest,
     which reads as confident. Nothing uses a bouncy curve except `spring`,
     and that is reserved for the one or two places that earn it. */
  --dur-micro: 140ms;
  --dur-hover: 260ms;
  --dur-enter: 460ms;
  --dur-scene: 760ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);      /* legacy alias, still used */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --rise: 18px;                                /* standard enter distance */
}

/* ------------------------------------------------------------- RESET/BASE -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(0.975rem, 0.95rem + 0.16vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ambient background wash — soft mint and steel clouds behind white content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(45, 105, 141, 0.13), transparent 62%),
    radial-gradient(46rem 32rem at 92% 2%, rgba(184, 233, 230, 0.5), transparent 60%),
    radial-gradient(50rem 40rem at 50% 108%, rgba(45, 105, 141, 0.10), transparent 62%);
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }

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

::selection { background: rgba(184, 233, 230, 0.75); color: var(--navy-900); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--navy-900);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------- LAYOUT PRIMITIVES -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: linear-gradient(180deg, transparent, rgba(227, 245, 245, 0.6) 12%, rgba(227, 245, 245, 0.6) 88%, transparent); }
.section--edge { border-top: 1px solid rgba(39, 39, 67, 0.07); }

/* ----------------------------------------------------------- TYPOGRAPHY -- */
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: balance;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.display {
  font-size: clamp(2.25rem, 1.35rem + 4.1vw, 4.15rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.h2 { font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.65rem); }
.h3 { font-size: clamp(1.12rem, 1rem + 0.45vw, 1.35rem); }

.lead {
  font-size: clamp(1.02rem, 0.97rem + 0.32vw, 1.22rem);
  color: var(--text-muted);
  max-width: 62ch;
}
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); font-size: 0.85em; }

.gradient-text {
  background: linear-gradient(100deg, var(--steel-700) 0%, var(--steel-500) 45%, #57B3C4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-600);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mint-300), var(--steel-600));
}

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .h2 + .lead { margin-top: 1rem; }

/* --------------------------------------------------------------- BUTTONS -- */
.btn {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-bd: var(--border-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.24s var(--ease),
    background 0.24s var(--ease), border-color 0.24s var(--ease);
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: linear-gradient(100deg, var(--mint-300), #9FDCE0 50%, var(--steel-400));
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  box-shadow: 0 10px 26px -12px rgba(45, 105, 141, 0.6);
}
.btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(45, 105, 141, 0.55); }

.btn--ghost { --btn-bg: #fff; --btn-bd: var(--border-mid); }
.btn--ghost:hover { --btn-bg: var(--ice-50); --btn-bd: var(--border-strong); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.87rem; }
.btn--lg { padding: 0.98rem 1.85rem; font-size: 1rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--steel-600);
  transition: gap 0.2s var(--ease);
}
.link-arrow:hover { gap: 0.7rem; }
.link-arrow .icon { width: 1em; height: 1em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.68rem;
  border: 1px solid rgba(45, 105, 141, 0.18);
  border-radius: 999px;
  background: rgba(184, 233, 230, 0.34);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-700);
  white-space: nowrap;
}

.icon { width: 1.35rem; height: 1.35rem; flex: none; }
.icon--xs { width: 0.95rem; height: 0.95rem; }

/* ---------------------------------------------------------------- HEADER -- */
.announcement {
  background: linear-gradient(100deg, var(--navy-900), var(--steel-600));
  color: #fff;
  font-size: 0.83rem;
}
.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 2.5rem;
  padding-block: 0.4rem;
  text-align: center;
  flex-wrap: wrap;
}
.announcement__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 650;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s var(--ease);
}
.announcement__link:hover { border-color: #fff; }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: rgba(39, 39, 67, 0.09);
  box-shadow: 0 6px 20px -14px rgba(16, 24, 40, 0.35);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--navy-900); }
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--mint-300), var(--steel-500));
  color: var(--ink);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.03em;
  box-shadow: 0 8px 18px -10px rgba(45, 105, 141, 0.75);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.18; }
.brand__name { font-weight: 750; font-size: 1.02rem; letter-spacing: -0.02em; }
.brand__tagline { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.02em; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__list { display: flex; align-items: center; gap: 0.35rem; }
.nav__link {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__link:hover { color: var(--navy-900); background: rgba(227, 245, 245, 0.8); }
.nav__link.is-active { color: var(--steel-700); background: rgba(184, 233, 230, 0.45); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border-mid);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.6px;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span:nth-child(2) { width: 70%; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ------------------------------------------------------------------ HERO -- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); }

/* Photographic backdrop. A real photo of a workspace does more for credibility
   than any amount of abstract gradient, but it must not fight the headline —
   hence the heavy white wash on the left where the copy sits. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wash-white);
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}

.hero__title { margin-bottom: 1.35rem; }
.hero__actions { margin-top: 2.1rem; }
.hero__trust {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(39, 39, 67, 0.09);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 550;
}
.hero__trust-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__trust-item .icon { width: 1rem; height: 1rem; color: var(--steel-600); }

/* Terminal-style panel — a deliberate dark block against the light page. */
.terminal {
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(184, 233, 230, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.terminal__dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: rgba(255,255,255,0.2); }
.terminal__dot--a { background: #ff5f57; }
.terminal__dot--b { background: #febc2e; }
.terminal__dot--c { background: #28c840; }
.terminal__title {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #9298B8;
}
.terminal__body {
  margin: 0;
  padding: 1.15rem 1.25rem 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.85;
  color: #D3D9EA;
  overflow-x: auto;
}
.terminal__body .c-cmd { color: var(--mint-300); }
.terminal__body .c-dim { color: #8A90B0; }
.terminal__body .c-ok { color: #7FE0A8; }
.terminal__body .c-key { color: #9FD8EA; }
.terminal__body .c-warn { color: #FEBC2E; }

.hero__panel { position: relative; }
.hero__badge {
  position: absolute;
  right: -0.75rem;
  bottom: -1.1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
}
.hero__badge strong { display: block; font-size: 0.9rem; }
.hero__badge-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16); }
  50% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0.05); }
}

/* ------------------------------------------------------ SERVICE GROUPS -- */
.service-group + .service-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Anchor offset is handled globally by `scroll-padding-top` on <html>, which
   applies to both native hash navigation and scrollIntoView(). Adding
   scroll-margin here too would double the offset. */
.service-group__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.service-group__count {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-left: auto;
}
.service-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.service-jump .dim { opacity: 0.6; }

/* ------------------------------------------------------------------ CARDS -- */
.card {
  position: relative;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Service card */
.service-card { display: flex; flex-direction: column; }
.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.service-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(184, 233, 230, 0.85), rgba(227, 245, 245, 0.9));
  border: 1px solid rgba(45, 105, 141, 0.14);
  color: var(--steel-700);
}
.service-card h3 { font-size: 1.13rem; margin-bottom: 0.55rem; }
.service-card__summary { color: var(--text-muted); font-size: 0.93rem; }
.service-card .checklist { margin-top: 1.1rem; }
.service-card .link-arrow { margin-top: auto; padding-top: 1.25rem; }

.checklist { display: grid; gap: 0.55rem; font-size: 0.885rem; color: var(--text-muted); }
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: rgba(184, 233, 230, 0.85);
  background-image:
    linear-gradient(45deg, transparent 44%, var(--steel-700) 44%, var(--steel-700) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 62%, var(--steel-700) 62%, var(--steel-700) 72%, transparent 72%);
  background-size: 100% 100%;
}

/* ============================================================ PHOTO BANDS ==
   A band is a photo with a dark scrim and white text on top. Used to break up
   the light page with something real, and to carry a call to action.
   ========================================================================== */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.band img.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Nudged down a touch so busy areas sit behind the scrim, not the text. */
  z-index: 0;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-dark);
}
.band__body {
  position: relative;
  z-index: 2;
  padding: clamp(2.25rem, 5.5vw, 4.25rem);
  max-width: 44rem;
  color: #fff;
}
.band__body h2, .band__body .h2 { color: #fff; }
.band__body .lead { color: rgba(255, 255, 255, 0.86); }
.band__body .eyebrow { color: var(--mint-300); }
.band__body .eyebrow::before { background: linear-gradient(90deg, var(--mint-300), rgba(184, 233, 230, 0.3)); }
.band__body .btn-row { margin-top: 1.85rem; }

/* Half-width band that sits beside text in a split layout. */
.band--split .band__body { max-width: none; padding: clamp(1.75rem, 4vw, 3rem); }

/* Full-bleed band: escapes the container to span the viewport. */
.band--full {
  border-radius: 0;
  box-shadow: none;
}
.band--full .band__body { margin-inline: auto; max-width: var(--container); padding-inline: var(--gutter); }
.band--full::after {
  background: linear-gradient(
      100deg,
      rgba(20, 22, 44, 0.95) 0%,
      rgba(27, 27, 51, 0.88) 45%,
      rgba(36, 86, 114, 0.62) 100%
    );
}

/* ================================================================ FIGURES ==
   Inline content images. Real <img> tags with alt text, never CSS backgrounds,
   so they lazy-load and screen readers can describe them.
   ========================================================================== */
.figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  /* A fixed ratio stops the page jumping as lazy images arrive. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.figure--wide img { aspect-ratio: 16 / 9; }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure figcaption {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.figure-stack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

/* Photo panel used on the contact page, beside the form. */
.photo-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  min-height: 15rem;
  box-shadow: var(--shadow-sm);
}
.photo-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-panel__caption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(20, 22, 44, 0) 40%, rgba(20, 22, 44, 0.82) 100%);
  color: #fff;
  font-size: 0.85rem;
}

/* Page header with a photographic backdrop and a white wash. */
.page-head--photo { position: relative; overflow: hidden; }
.page-head--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--head-photo, var(--photo-page-head));
  background-size: cover;
  background-position: center 40%;
}
.page-head--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--wash-white);
}
.page-head--photo > .container { position: relative; z-index: 2; }

/* ------------------------------------------------------------------ STATS -- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat {
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: #fff;
  text-align: center;
}
.stat__value {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--steel-700), var(--steel-500) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- PROCESS -- */
.process { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border-mid);
  transition: border-color 0.35s var(--ease);
}
.step:hover { border-top-color: var(--steel-500); }
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--steel-600);
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
}
.step__title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.step__text { color: var(--text-muted); font-size: 0.92rem; }

/* ----------------------------------------------------------------- QUOTES -- */
.quote { display: flex; flex-direction: column; gap: 1.15rem; }
.quote__mark { font-size: 3rem; line-height: 0.6; color: var(--mint-400); font-family: Georgia, serif; }
.quote blockquote { margin: 0; font-size: 1rem; color: var(--text); line-height: 1.7; }
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.quote__avatar {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--steel-500), var(--mint-300));
  color: var(--ink); font-weight: 750; font-size: 0.9rem;
}
.quote figcaption strong { font-size: 0.92rem; }
.quote figcaption small { display: block; color: var(--text-dim); font-size: 0.8rem; }

/* -------------------------------------------------------------------- FAQ -- */
.faq-list { display: grid; gap: 0.75rem; max-width: 52rem; }
.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 650;
  font-size: 0.98rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__chevron {
  width: 0.62rem; height: 0.62rem; flex: none;
  border-right: 2px solid var(--steel-600);
  border-bottom: 2px solid var(--steel-600);
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
}
.faq[open] .faq__chevron { transform: rotate(-135deg); }
.faq__body { padding: 0 1.25rem 1.15rem; color: var(--text-muted); font-size: 0.93rem; }
.faq__body p { max-width: 64ch; }

/* ------------------------------------------------------------------ PLANS -- */
.plan { display: flex; flex-direction: column; }
.plan--featured {
  border-color: var(--border-strong);
  background: linear-gradient(165deg, rgba(184, 233, 230, 0.36), rgba(227, 245, 245, 0.5));
  box-shadow: var(--shadow-glow);
}
.plan__badge {
  position: absolute; top: -0.72rem; left: 50%; transform: translateX(-50%);
  padding: 0.22rem 0.8rem; border-radius: 999px;
  background: linear-gradient(100deg, var(--steel-600), var(--steel-400));
  color: #fff; font-size: 0.68rem; font-weight: 750;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.plan__name { font-size: 1.25rem; }
.plan__tagline { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.35rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.25rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.plan__price strong { font-size: 1.65rem; letter-spacing: -0.03em; }
.plan__price span { font-size: 0.82rem; color: var(--text-dim); }
.plan .checklist { margin-bottom: 1.6rem; }
.plan .btn { margin-top: auto; }

/* -------------------------------------------------------------- CTA BAND -- */
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(45, 105, 141, 0.2);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(38rem 22rem at 12% 0%, rgba(184, 233, 230, 0.7), transparent 62%),
    linear-gradient(120deg, rgba(227, 245, 245, 0.95), rgba(184, 233, 230, 0.55));
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-band .lead { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.85rem; }

/* ======================================================== THE FREE OFFER == */
.offer {
  position: relative;
  border-radius: calc(var(--radius-lg) + 2px);
  /* Gradient border trick: padding + inner panel. */
  padding: 2px;
  background: linear-gradient(115deg, var(--mint-300), var(--steel-500) 45%, var(--mint-400));
  box-shadow: 0 30px 70px -34px rgba(45, 105, 141, 0.55);
}
.offer__inner {
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
  position: relative;
}
/* Soft light bloom inside the panel */
.offer__inner::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 70%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(184, 233, 230, 0.55), transparent 70%);
  pointer-events: none;
}
.offer__head { position: relative; text-align: center; max-width: 48rem; margin-inline: auto; }

.offer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--mint-300), var(--mint-400));
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(45, 105, 141, 0.6);
  margin-bottom: 1.25rem;
}
.offer__badge svg { width: 0.95rem; height: 0.95rem; }

.offer__title { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); letter-spacing: -0.03em; }
.offer__intro { margin-top: 1rem; color: var(--text-muted); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); }

.offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  position: relative;
}
.offer__item {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.offer__item-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  margin-bottom: 0.8rem;
  background: linear-gradient(140deg, rgba(184, 233, 230, 0.9), rgba(227, 245, 245, 0.95));
  border: 1px solid rgba(45, 105, 141, 0.14);
  color: var(--steel-700);
}
.offer__item-icon svg { width: 1.15rem; height: 1.15rem; }
.offer__item h3 { font-size: 0.96rem; margin-bottom: 0.3rem; }
.offer__item p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; }

.offer__foot {
  position: relative;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.offer__scarcity {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--steel-700);
}
.offer__scarcity::before {
  content: "";
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: #E8590C;
  box-shadow: 0 0 0 4px rgba(232, 89, 12, 0.14);
}
.offer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.offer__fine {
  position: relative;
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.79rem;
  color: var(--text-dim);
}

/* ================================================= TECHNOLOGY LOGO GRID == */
.tech-group + .tech-group { margin-top: clamp(2rem, 4vw, 3rem); }
.tech-group__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tech-group__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr));
  gap: 0.75rem;
}

.tech-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 1.1rem 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease),
    box-shadow 0.24s var(--ease), background 0.24s var(--ease);
}
.tech-tile:hover {
  transform: translateY(-4px);
  border-color: var(--brand, var(--border-strong));
  background: var(--brand-soft, var(--surface-2));
  box-shadow: var(--shadow);
}
.tech-tile__mark {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--brand, var(--steel-600));
  transition: transform 0.24s var(--ease);
}
.tech-tile:hover .tech-tile__mark { transform: scale(1.08); }
.tech-tile__mark svg { width: 100%; height: 100%; }
.tech-tile__name {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.tech-tile__note {
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* -------------------------------------------------------- CONTACT / FORM -- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }

.field { display: grid; gap: 0.4rem; margin-bottom: 1.05rem; }
.field label { font-size: 0.83rem; font-weight: 650; color: var(--text-muted); }
.field .req { color: var(--steel-600); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 0.94rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--steel-500);
  box-shadow: 0 0 0 3px rgba(184, 233, 230, 0.6);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

.form-status {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  font-size: 0.88rem;
}
.form-status--ok { border-color: rgba(22, 163, 74, 0.35); background: rgba(22, 163, 74, 0.07); }
.form-status--error { border-color: rgba(220, 38, 38, 0.32); background: rgba(220, 38, 38, 0.06); }
.form-note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--text-dim); }

.contact-list { display: grid; gap: 1rem; }
.contact-item {
  display: flex;
  gap: 0.9rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.contact-item__icon {
  display: grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 10px;
  background: rgba(184, 233, 230, 0.7);
  color: var(--steel-700);
}
.contact-item h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-dim); margin-bottom: 0.25rem; font-weight: 700; }
.contact-item a, .contact-item span { font-size: 0.95rem; color: var(--text); }
.contact-item a:hover { color: var(--steel-600); }

/* ----------------------------------------------------------------- FOOTER -- */
.footer {
  margin-top: var(--section-y);
  border-top: 1px solid rgba(39, 39, 67, 0.09);
  background: linear-gradient(180deg, transparent, rgba(227, 245, 245, 0.75));
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.footer__col h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim); margin-bottom: 1rem; font-weight: 750;
}
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a { color: var(--text-muted); font-size: 0.9rem; transition: color 0.2s var(--ease); }
.footer__col a:hover { color: var(--steel-600); }
.brand--footer { margin-bottom: 1rem; }
.footer__blurb { color: var(--text-muted); font-size: 0.88rem; max-width: 34ch; }
.socials { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.social {
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: #fff;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.social:hover {
  color: var(--steel-700);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.social .icon { width: 1.05rem; height: 1.05rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(39, 39, 67, 0.09);
  font-size: 0.82rem; color: var(--text-dim);
}

/* ================================================================== MOTION ==
   A small, deliberate motion system.
   ---------------------------------------------------------------------------
   Rules this file follows:
     · Only `transform`, `opacity` and `clip-path` are animated, so everything
       stays on the compositor and never triggers layout.
     · Nothing loops forever except two deliberately slow, low-contrast
       effects (the background drift and the logo marquee).
     · Everything is defined relative to the motion tokens above.
     · The whole system collapses under `prefers-reduced-motion` — see the
       bottom of this file. Nothing may depend on an animation having run.
   ---------------------------------------------------------------------------
   Vocabulary:
     rise       short fade + lift as content enters the viewport
     unmask     clip-path wipe, used on section headings
     type       character-by-character terminal output
     drift      very slow ambient background movement
     track      continuous marquee translation
   ========================================================================== */

/* ----------------------------------------------------------------- CURSOR -- */
/* A custom animated pointer: a precise dot with a ring that eases along behind
   it and reacts to whatever it is over.
   This block is inert unless JS opts in, which it only does for hover-capable
   fine pointers and never for reduced-motion users — so if it never activates,
   the browser's own cursor is entirely untouched.
   Positioning is written per-frame on the outer elements; the scaling on
   hover/press happens on an inner <i>. Keeping those on separate elements means
   the per-frame transform write and the CSS transition never fight. */
.cursor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.cursor.is-live { opacity: 1; }
/* Over a text field we step aside and let the real I-beam through. Declared
   after .is-live so it wins at equal specificity. */
.cursor.is-text { opacity: 0; }

.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; }
.cursor__ring { width: 34px; height: 34px; }

.cursor__dot i,
.cursor__ring i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform var(--dur-hover) var(--ease-spring),
    opacity var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out);
}
.cursor__dot i { background: var(--steel-600); }
.cursor__ring i { border: 1.5px solid rgba(45, 105, 141, 0.42); }

/* Over anything clickable: the ring opens up and the dot gets out of the way. */
.cursor.is-active .cursor__ring i {
  transform: scale(1.5);
  border-color: rgba(45, 105, 141, 0.8);
  background: rgba(184, 233, 230, 0.2);
}
.cursor.is-active .cursor__dot i { transform: scale(0.34); }

/* Pressed. */
.cursor.is-down .cursor__ring i { transform: scale(0.8); }
.cursor.is-down .cursor__dot i { transform: scale(1.4); }

/* While the custom pointer is live the system cursor is suppressed. The
   specificity here (0,1,2) deliberately outranks the .btn / .nav-toggle /
   .faq summary / .to-top cursor rules elsewhere without needing !important. */
html.has-cursor,
html.has-cursor body,
html.has-cursor body * { cursor: none; }

/* Text fields are the exception: a dot is no use for placing a caret, and a
   checkbox is still clickable, so only genuinely text-like controls get a
   native cursor back. */
html.has-cursor body textarea,
html.has-cursor body input:not([type]),
html.has-cursor body input[type="text"],
html.has-cursor body input[type="email"],
html.has-cursor body input[type="tel"],
html.has-cursor body input[type="search"],
html.has-cursor body input[type="url"],
html.has-cursor body input[type="password"],
html.has-cursor body input[type="number"],
html.has-cursor body input[type="date"] { cursor: text; }

/* --------------------------------------------------------- READING RAIL -- */
/* Progress bar pinned to the top of the viewport. Driven per-frame from
   scroll, so it has no transition of its own. */
.scroll-rail {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 80;
  pointer-events: none;
  background: linear-gradient(90deg, var(--mint-300), var(--steel-500) 55%, var(--steel-700));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* -------------------------------------------------------- BACK TO TOP ---- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--steel-700);
  cursor: pointer;
  box-shadow: var(--shadow);
  /* Hidden and shifted down until the reader is deep enough in the page. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition: opacity var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-spring),
    visibility 0s linear var(--dur-hover),
    border-color var(--dur-hover) var(--ease-out);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-spring),
    visibility 0s linear 0s,
    border-color var(--dur-hover) var(--ease-out);
}
.to-top:hover { border-color: var(--border-strong); }
.to-top:active { transform: scale(0.94); }
.to-top svg { grid-area: 1 / 1; }
.to-top__ring {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--steel-500);
  stroke-width: 2;
  stroke-linecap: round;
  /* 2πr for r=22 → 138.23. Dash offset is set from JS as the page is read. */
  stroke-dasharray: 138.23;
  stroke-dashoffset: 138.23;
  transform: rotate(-90deg);
}
.to-top__arrow { width: 1.05rem; height: 1.05rem; }

/* ---------------------------------------------------------------- REVEAL -- */
.reveal {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Set when a section is reached via a deep link (#anchor) or is already in
   view on load: show it straight away rather than fading in behind a stagger. */
.reveal.is-instant { transition: none; }

/* ------------------------------------------------------- HEADING UNMASK -- */
/* A clip-path wipe that reads top-down, as if the words are being set. Pairs
   the wipe with a small lift so it has weight rather than feeling like a
   reveal-by-numbers. Applied by JS to section headings. */
.unmask {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.34em);
  opacity: 0;
  will-change: clip-path, transform;
  transition: clip-path var(--dur-scene) var(--ease-out),
    transform var(--dur-scene) var(--ease-out),
    opacity var(--dur-hover) var(--ease-out);
}
.unmask.is-visible {
  clip-path: inset(-15% -2% -15% -2%);
  transform: none;
  opacity: 1;
  will-change: auto;
}
/* Once settled, drop the clip entirely so nothing is masked a frame longer
   than necessary (matters for text selection and focus outlines). */
.unmask.is-settled { clip-path: none; }

/* -------------------------------------------------------- HERO INTRO ----- */
/* The one choreographed entrance on the site: an above-the-fold stagger that
   runs once on load. Deliberately not tied to scroll — the visitor sees it
   immediately, which is what sets the tone. */
.hero__copy > * {
  opacity: 0;
  animation: riseIn var(--dur-scene) var(--ease-out) forwards;
}
.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 140ms; }
.hero__copy > *:nth-child(3) { animation-delay: 240ms; }
.hero__copy > *:nth-child(4) { animation-delay: 340ms; }
.hero__copy > *:nth-child(5) { animation-delay: 440ms; }

.hero__panel {
  opacity: 0;
  animation: panelIn 900ms var(--ease-out) 260ms forwards;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Page headers on the interior pages get the same treatment, lighter. */
.page-head .container > * {
  opacity: 0;
  animation: riseIn var(--dur-enter) var(--ease-out) forwards;
}
.page-head .container > *:nth-child(1) { animation-delay: 40ms; }
.page-head .container > *:nth-child(2) { animation-delay: 100ms; }
.page-head .container > *:nth-child(3) { animation-delay: 180ms; }
.page-head .container > *:nth-child(4) { animation-delay: 260ms; }

/* ------------------------------------------------------- TERMINAL TYPE --- */
/* The hero terminal writes itself out, then each result line lands in turn.
   Total run is ~2.4s: long enough to feel alive, short enough that nobody
   waits for it. All of it is CSS-only, so there is nothing to fall over. */
.tline {
  display: block;
  opacity: 0;
  animation: lineIn 340ms var(--ease-out) forwards;
  animation-delay: calc(var(--n, 0) * 210ms);
}
@keyframes lineIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}
.ttype {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation: type 520ms steps(20, end) forwards;
  animation-delay: 220ms;
}
@keyframes type { to { width: var(--chars, 20ch); } }
/* Blinking block caret after the typed command. */
.tcaret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--mint-300);
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --------------------------------------------------------- LOGO MARQUEE -- */
/* Two counter-scrolling rows. Duplicated content means a -50% translate loops
   seamlessly. Items carry the gap as a margin (not a flex `gap`) so the two
   halves are exactly equal and the loop never jumps. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 0.35rem;
  /* Feather the edges so logos dissolve rather than getting cut off. */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee + .marquee { margin-top: 0.75rem; }

.marquee__track {
  display: flex;
  width: max-content;
  animation: track 46s linear infinite;
}
/* The two halves must be exactly equal in width or the -50% loop jumps. */
.marquee__group { display: flex; flex: none; }
.marquee--reverse .marquee__track {
  animation-name: track-reverse;
  animation-duration: 54s;
}
/* Give people a way to stop it: hovering or tabbing in pauses the motion. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes track {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes track-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.marquee .tech-tile {
  flex: none;
  width: 9.5rem;
  margin-right: 0.75rem;
}

/* ---------------------------------------------------- SPOTLIGHT (CARD) --- */
/* A soft light that follows the pointer across a card. This is the single
   detail that most makes an interface feel alive, and it costs one delegated
   listener for the whole page. Fine pointers only. */
@media (hover: hover) and (pointer: fine) {
  .spot { position: relative; isolation: isolate; }
  .spot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 0%),
      rgba(45, 105, 141, 0.10),
      transparent 68%
    );
    transition: opacity var(--dur-hover) var(--ease-out);
  }
  .spot:hover::before { opacity: 1; }
  /* Tiles tint with their own brand colour instead of the house accent. */
  .tech-tile.spot::before {
    background: radial-gradient(
      200px circle at var(--mx, 50%) var(--my, 0%),
      var(--brand-soft, rgba(45, 105, 141, 0.10)),
      transparent 70%
    );
  }
}

/* -------------------------------------------------------------- PARALLAX -- */
/* Photos drift slightly against the scroll. The image is pre-scaled so the
   movement never exposes an edge inside its clipped container. */
.parallax { overflow: hidden; }
.parallax > img {
  transform: scale(1.1) translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* ------------------------------------------------------- AMBIENT DRIFT --- */
/* Very slow movement in the background wash. Barely perceptible frame to
   frame, but it stops large light areas feeling dead. The element is inset
   beyond the viewport so translating it can't reveal an edge. */
body::before {
  inset: -18%;
  animation: drift 42s var(--ease-soft) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* ---------------------------------------------------------- MICRO BITS --- */
/* Sheen across a primary button: the gradient is oversized and slid on hover,
   which composites without repainting layout.
   The transition is restated in full rather than layered on top of `.btn`, so
   that overriding it here doesn't silently drop the border-color animation the
   base class sets up. */
.btn--primary {
  background-size: 220% 100%;
  background-position: 100% 0;
  transition: background-position 620ms var(--ease-out),
    transform 0.18s var(--ease),
    box-shadow 0.24s var(--ease),
    border-color 0.24s var(--ease);
}
.btn--primary:hover { background-position: 0 0; }

/* Card icons lean very slightly on hover — enough to notice, not enough to
   distract. */
.card:hover .service-card__icon,
.tech-tile:hover .tech-tile__mark { transform: translateY(-2px) rotate(-3deg); }
.service-card__icon, .tech-tile__mark { transition: transform var(--dur-hover) var(--ease-spring); }

/* Arrow links nudge their icon on hover. */
.link-arrow .icon, .announcement__link .icon { transition: transform var(--dur-hover) var(--ease-out); }
.link-arrow:hover .icon, .announcement__link:hover .icon { transform: translateX(3px); }

/* Reveal stagger for the FAQ list, so opening a page doesn't dump five rows. */
/* ---------------------------------------------------------- FAQ ACCORDION -- */
/* A `<details>` element jumps open; it can't be height-animated with plain
   CSS. Chrome and Safari now expose `::details-content` plus `interpolate-size`,
   which let the panel expand and collapse fluidly instead.
   Guarded by @supports: anywhere without it keeps the instant native
   behaviour, which is perfectly usable — nothing here is load-bearing. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    /* `allow-discrete` is what permits content-visibility to animate at all. */
    transition: block-size var(--dur-hover) var(--ease-out),
      opacity var(--dur-hover) var(--ease-out),
      content-visibility var(--dur-hover) allow-discrete;
  }
  .faq[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* ------------------------------------------------------------- SCROLLSPY -- */
/* The nav shows which section you're currently reading. */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-hover) var(--ease-out);
}
.nav__link.is-current::after { transform: scaleX(1); }

/* --------------------------------------------------- MOTION & UTILITIES -- */

.page-head { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.breadcrumb { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1rem; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--steel-600); }
.breadcrumb span { opacity: 0.5; margin-inline: 0.45rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }

.note {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--steel-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(227, 245, 245, 0.8);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.note strong { color: var(--text); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.tag:hover { color: var(--steel-700); border-color: var(--border-strong); background: var(--ice-50); }

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

/* -------------------------------------------------------------- SCROLLBAR -- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ice-50); }
::-webkit-scrollbar-thumb { background: #C2D2DA; border-radius: 99px; border: 3px solid var(--ice-50); }
::-webkit-scrollbar-thumb:hover { background: var(--steel-400); }

/* ------------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__panel { order: 2; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    /* Closing: fade out first, then hide. */
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0s linear 0.25s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Opening: become visible immediately. */
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0s linear 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav__link { padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); font-size: 1rem; }
  .nav__cta { margin-top: 0.5rem; }
  .header__inner { position: relative; }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .offer__foot { flex-direction: column; align-items: stretch; }
  .offer__actions { justify-content: stretch; }
}

@media (max-width: 620px) {
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__badge { right: 0.75rem; bottom: -0.85rem; }
  .btn { width: 100%; }
  .btn-row > .btn { width: auto; flex: 1 1 auto; }
  .tech-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr)); gap: 0.6rem; }
  .tech-tile { padding: 0.9rem 0.4rem 0.75rem; }
  .tech-tile__mark { width: 1.9rem; height: 1.9rem; }
  .tech-tile__name { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Kill the motion, but — importantly — also kill the *delays*. Without
     this, a staggered element would sit invisible for up to a second before
     snapping into place, which is worse than the animation it replaced. */
  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
  }

  /* Anything whose resting state is "hidden until animated" must be forced
     visible, or it never arrives. This is the important half of the rule. */
  .reveal,
  .hero__copy > *,
  .hero__panel,
  .page-head .container > *,
  .tline {
    opacity: 1 !important;
    transform: none !important;
  }
  .unmask {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Let the typing finish instantly rather than revealing character by
     character, and drop the caret entirely. */
  .ttype { width: auto !important; animation: none !important; }
  .tcaret { display: none !important; }

  /* Stop the marquee. Every logo is still reachable: the duplicate half is
     removed and the strip becomes manually scrollable. */
  .marquee {
    mask-image: none;
    -webkit-mask-image: none;
    overflow-x: auto;
  }
  .marquee__track { animation: none !important; transform: none !important; }
  .marquee__group[aria-hidden="true"] { display: none; }

  body::before { animation: none !important; }
  .parallax > img { transform: scale(1.1) !important; }

  /* `*` does not reach ::details-content, so name it explicitly — otherwise
     the FAQ panel would keep animating open and shut. */
  .faq::details-content {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}