/* ==========================================================================
   TechVest Solutions — the Interlock
   Design system for the public site.

   Structure:
     01 Tokens          06 Buttons            11 Packages / store
     02 Reset + base    07 Interlock device   12 About
     03 Typography      08 Hero               13 Contact + forms
     04 Layout          09 Service index      14 Footer
     05 Header + nav    10 Services page      15 Motion + responsive
   ========================================================================== */

/* -------------------------------------------------------------- 01 tokens */

:root {
  /* Brand palette — fixed by the brand pack, do not substitute. */
  --navy:  #0D1B3D;
  --deep:  #0B62D6;
  --blue:  #007BFF;
  --cyan:  #5BE0FF;
  --off:   #F2F4F7;

  /* Derived depth layers. Navy stays the canvas; void sits beneath it so
     panels can lift, and glow has somewhere dark to read against. */
  --void:      #070F27;
  --surface:   #101F45;
  --surface-2: #16294F;

  --text:      var(--off);
  --muted:     rgba(242, 244, 247, 0.64);
  --dim:       rgba(242, 244, 247, 0.42);
  --line:      rgba(91, 224, 255, 0.16);
  --line-soft: rgba(242, 244, 247, 0.10);

  --glow-blue: rgba(0, 123, 255, 0.45);
  --glow-cyan: rgba(91, 224, 255, 0.40);

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Spacing */
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --shell:   1240px;
  --section: clamp(5rem, 10vw, 8.5rem);

  --radius:    14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* ---------------------------------------------------------- 02 reset/base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient field: hairline grid + a fixed navy wash, so every page sits on the
   same canvas rather than each section inventing its own background. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(11, 98, 214, 0.28) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--void) 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(91, 224, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91, 224, 255, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

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

/* Hidden by moving it up out of the page rather than out to the left: a
   negative `left` widens the scrollable area on small screens. */
.skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  background: var(--cyan);
  color: var(--navy);
  font-weight: 600;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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

/* ------------------------------------------------------- 03 typography ---*/

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

.t-display {
  font-size: clamp(2.4rem, 8.4vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  /* A long word at display size must never push the page sideways. */
  overflow-wrap: break-word;
}

.t-h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.t-h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -0.015em; }

.t-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  margin: 1.25rem 0 0;
  text-wrap: pretty;
}

.t-body { color: var(--muted); margin: 0; }

/* Eyebrow — echoes the letterspaced small caps of the wordmark's SOLUTIONS. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.35rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

/* Mono is reserved for machine strings: SYS codes, domains, order refs. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.t-gradient {
  background: linear-gradient(96deg, var(--off) 12%, var(--cyan) 58%, var(--blue) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- 04 layout */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.band { position: relative; padding-block: var(--section); }
.band--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.band--flush-top { padding-top: 0; }

/* Soft coloured light behind a band, per brief 05 (gradient edges, not blocks). */
.band__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.band__glow::before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  background: radial-gradient(circle, var(--glow-blue) 0%, transparent 68%);
}
.band__glow--tl::before { top: -28%; left: -18%; }
.band__glow--tr::before { top: -30%; right: -20%; background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 68%); }
.band__glow--bl::before { bottom: -32%; left: -16%; background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 68%); }
.band__glow--br::before { bottom: -30%; right: -18%; }

.band__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band__head--center { margin-inline: auto; text-align: center; }
.band__head--center .eyebrow::before { display: none; }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ------------------------------------------------------ 05 header + nav --*/

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(7, 15, 39, 0.82);
  border-bottom-color: var(--line-soft);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
}

.site-logo img {
  display: block;
  height: 42px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.site-nav__link {
  position: relative;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--muted);
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.site-nav__link:hover { color: var(--text); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }
.site-nav__link.is-active { color: var(--text); }
.site-nav__cta::after { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* ------------------------------------------------------------ 06 buttons */

.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s, color 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  color: #04122E;
  background: linear-gradient(96deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 30px -14px var(--glow-blue);
}
/* Hover shifts the gradient rather than swapping a flat colour (brief 05). */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg, var(--cyan), var(--blue));
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { box-shadow: 0 16px 44px -14px var(--glow-cyan); }

.btn--ghost {
  color: var(--text);
  border-color: rgba(242, 244, 247, 0.22);
}
.btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 12px 34px -18px var(--glow-cyan);
}

.btn--sm { padding: 0.62rem 1.15rem; font-size: 0.86rem; }
.btn--wide { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* Text link with an arrow that travels on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cyan);
}
.link-arrow span:last-child { transition: transform 0.35s var(--ease); }
.link-arrow:hover span:last-child { transform: translateX(5px); }

/* --------------------------------------------------- 07 interlock device */
/* The signature. Two L-brackets, 180 degrees of each other, bracketing a
   module without ever closing into a box. On hover they travel toward one
   another and glow — holding without touching, which is the mark's idea. */

.ilk { position: relative; }

.ilk::before,
.ilk::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border: 0 solid;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.55s var(--ease), border-color 0.45s var(--ease), box-shadow 0.55s var(--ease);
}

.ilk::before {
  top: -1px; left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-color: var(--blue);
  border-top-left-radius: 10px;
}

.ilk::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: rgba(91, 224, 255, 0.32);
  border-bottom-right-radius: 10px;
}

.ilk:hover::before,
.ilk:focus-within::before {
  transform: translate(7px, 7px);
  box-shadow: -8px -8px 26px -10px var(--glow-blue);
}
.ilk:hover::after,
.ilk:focus-within::after {
  transform: translate(-7px, -7px);
  border-color: var(--cyan);
  box-shadow: 8px 8px 26px -10px var(--glow-cyan);
}

/* Panel surface the brackets usually wrap. */
.panel {
  background: linear-gradient(168deg, var(--surface) 0%, rgba(13, 27, 61, 0.72) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- 08 hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

/* The supplied mark, used exactly as shipped — scaled and placed, never
   redrawn. It now closes the hero instead of flanking it: centred under the
   buttons, oversized, and ended by a mask rather than an edge so it dissolves
   into the page instead of stopping at a line. */
.hero__mark {
  width: min(38vw, 330px);
  opacity: 0.62;
  pointer-events: none;
  /* The fade is the transition, and it stays in the bottom quarter on
     purpose: cut any higher and the mark stops reading as the logo and
     starts reading as a blue rectangle. Enough of the shape survives to be
     recognised, and only its foot dissolves into the page.

     No drop-shadow here — a filter glow spills outside the element box and
     the mask then clips it square, drawing a visible rectangle around the
     logo. The glow belongs on the wrapper below, which nothing masks. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  will-change: transform;
}

.hero__mark-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(1.25rem, 3.5vw, 2.75rem);
  /* Eat the section's own bottom padding so the mark runs all the way to the
     hero's edge and the mask, not a margin, is what ends it. */
  margin-bottom: calc(-1 * clamp(4rem, 8vw, 7rem));
  pointer-events: none;
}

.hero__mark-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(64vw, 580px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.40) 0%, transparent 64%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

/* The glow follows the mark to the foot of the hero. */
.hero__halo {
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: min(96vw, 1000px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.30) 0%, transparent 62%);
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
}

/* The hero is one centred column now, so the shell carries the alignment and
   nothing inside needs its own measure. `container-type` is what lets the
   headline below size itself against this box rather than the viewport. */
.hero__inner {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  text-align: center;
}

.hero__eyebrow { justify-content: center; }
.hero__eyebrow::before { display: none; }

.hero__line {
  margin-inline: auto;
  margin-top: 1.5rem;
  max-width: 44ch;
}

/* ---- the headline ----
   Two lines, sized independently, both in cqw — percentages of the hero's own
   inline size — so the lead line spans the shell edge to edge at every width
   without a single breakpoint.

   The multipliers are measured, not guessed. In Space Grotesk 700 at -0.04em
   tracking, "Technology should simply" renders 11.617em wide, so 8.55cqw puts
   it at 99.3% of the container; "work" is 2.194em, so 22cqw fills just under
   half. Both numbers are specific to this typeface AND this wording — change
   either and they need re-measuring, or the line stops fitting.

   Wrapping stays normal rather than `nowrap`: if the webfont fails and the
   fallback runs wider, the line breaks instead of being clipped by the
   hero's overflow. */
.hero__title {
  margin: 0;
  text-wrap: normal;
}

.hero__title-lead {
  display: block;
  font-size: 8.55cqw;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--off);
}

.hero__title-word {
  display: block;
  font-size: 22cqw;
  line-height: 0.88;
  letter-spacing: -0.05em;
  /* Letter-spacing is applied after the last glyph too, so a negative value
     makes the text box narrower than the ink and centring lands the word
     visually right of centre. Pulling the box back by the same amount puts
     the ink itself on the axis. */
  margin-right: -0.05em;
}

/* ---- the five entry points ----
   Three across, then two. Both rows share one max-width so their outer edges
   align and the pair reads as a block rather than a pyramid. */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.hero__actions-row {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  max-width: 760px;
}
.hero__actions-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero__actions-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hero__scroll {
  position: absolute;
  /* Line the cue up with the shell's left edge, not the viewport gutter. */
  left: max(var(--gutter), calc((100% - var(--shell)) / 2));
  bottom: 2.2rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero__scroll-track {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.hero__scroll-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: scroll-sweep 2.6s var(--ease) infinite;
}
@keyframes scroll-sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* -------------------------------------------------- 09 service index ----*/
/* Home page: the ten pillars as a bare index — code and title only. It is a
   catalogue, so the SYS codes carry real information, not decoration. */

.index-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.index-row {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1.15rem 1.2rem 1.15rem 0.2rem;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: padding-left 0.4s var(--ease), color 0.3s;
}
.index-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.index-row:hover { padding-left: 1rem; }
.index-row:hover::after { transform: scaleX(1); }

.index-row__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
  flex-shrink: 0;
}
.index-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  letter-spacing: -0.01em;
}
.index-row__line {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--dim);
  text-align: right;
  display: none;
}

/* Proof strip — four numbers, nothing else. */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.proof__cell {
  background: rgba(13, 27, 61, 0.6);
  padding: clamp(1.15rem, 3vw, 2.1rem) clamp(0.9rem, 2vw, 1.6rem);
}
.proof__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(150deg, var(--off), var(--cyan));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.proof__label {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

/* ---------------------------------------------------- 10 services page --*/

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: linear-gradient(170deg, var(--surface) 0%, rgba(13, 27, 61, 0.78) 100%);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.svc:hover { border-color: var(--line); transform: translateY(-3px); }

.svc__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.34;
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.svc__media img,
.svc__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc:hover .svc__media { opacity: 0.5; transform: scale(1.05); }

/* Keeps the text legible over whatever imagery sits behind it. */
.svc__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 15, 39, 0.35) 0%, rgba(7, 15, 39, 0.88) 62%, rgba(7, 15, 39, 0.96) 100%);
}

.svc__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.55rem;
}

.svc__code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
}
.svc__title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  margin-top: auto;
}
.svc__line {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted);
  max-width: 34ch;
}

.svc__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.svc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
}
.svc__toggle-icon {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  flex-shrink: 0;
}
.svc__toggle-icon::before,
.svc__toggle-icon::after {
  content: "";
  position: absolute;
  inset: 50% 3px auto;
  height: 1px;
  background: currentColor;
}
.svc__toggle-icon::after {
  inset: 3px auto 3px 50%;
  width: 1px;
  height: auto;
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.svc__toggle[aria-expanded="true"] .svc__toggle-icon::after { transform: scaleY(0); opacity: 0; }

/* Detail is closed by default: the brief asks for no paragraphs in the
   default scroll, and grid-template-rows animates height without a fixed max. */
.svc__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease), margin-top 0.5s var(--ease);
}
.svc__detail > div { overflow: hidden; }
.svc__detail p {
  margin: 0;
  padding-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
}
.svc.is-open .svc__detail { grid-template-rows: 1fr; margin-top: 0.9rem; }

/* SYS.04 links into the store rather than repeating prices (brief 03). */
.svc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.svc__link:hover { color: var(--cyan); border-color: var(--cyan); }

/* --------------------------------------------------- 11 packages / store */

/* Cards stretch to a common height so the buttons land on one line — with
   `align-items: start` the CTA row goes ragged and the set stops reading as
   a comparison. */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, 1.8vw, 1.4rem);
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.6rem 1.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(172deg, var(--surface) 0%, rgba(13, 27, 61, 0.8) 100%);
  transition: transform 0.5s var(--ease), border-color 0.4s;
}
.tier:hover { transform: translateY(-4px); border-color: var(--line); }

.tier--popular {
  border-color: rgba(91, 224, 255, 0.42);
  background:
    linear-gradient(172deg, var(--surface-2) 0%, rgba(13, 27, 61, 0.86) 100%);
  box-shadow: 0 26px 70px -34px var(--glow-cyan);
}

.tier__badge {
  position: absolute;
  top: -0.75rem;
  left: 1.6rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(96deg, var(--blue), var(--cyan));
  color: #04122E;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tier__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.tier__summary {
  margin: 0.35rem 0 1.4rem;
  font-size: 0.88rem;
  color: var(--dim);
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
}
.tier__price-from {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  align-self: center;
}
.tier__price-value {
  font-size: clamp(2.1rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.tier__price-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--dim);
}

.tier__monthly {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--cyan);
}
/* Small print, not a machine string — body face, not mono. */
.tier__range {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--dim);
}

.tier__list {
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.6rem;
}
.tier__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.tier__cta { margin-top: auto; }

/* --- order configurator ------------------------------------------------- */

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.order-form { padding: clamp(1.5rem, 3vw, 2.25rem); }

.summary {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.summary__row:last-of-type { border-bottom: 0; }
.summary__label { color: var(--muted); }
.summary__value { font-family: var(--font-mono); font-size: 0.85rem; text-align: right; }

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.summary__total-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--cyan);
}
.summary__total-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.summary__recurring {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Tier picker inside the order form. */
.picker { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.picker__option { position: relative; }
.picker__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.picker__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.picker__label:hover { border-color: var(--line); }
.picker__option input:checked + .picker__label {
  border-color: var(--cyan);
  background: rgba(91, 224, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(91, 224, 255, 0.25);
}
.picker__option input:focus-visible + .picker__label {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.picker__name { font-weight: 600; font-size: 0.95rem; }
.picker__price { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }

/* Status pills, used on the success page and in admin. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.pill--paid      { color: #4ADE80; }
.pill--pending   { color: var(--cyan); }
.pill--failed    { color: #FB7185; }
.pill--cancelled { color: var(--dim); }
.pill--refunded  { color: #FBBF24; }

/* Simulated-payment notice. Deliberately loud — it must never be mistaken for
   a working payment path. */
.notice {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  font-size: 0.88rem;
  line-height: 1.55;
  color: #FDE68A;
}
.notice--error {
  border-color: rgba(251, 113, 133, 0.4);
  background: rgba(251, 113, 133, 0.08);
  color: #FECDD3;
}
.notice--ok {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
  color: #BBF7D0;
}
.notice__icon { flex-shrink: 0; font-family: var(--font-mono); }
.notice p { margin: 0; }
.notice p + p { margin-top: 0.5rem; }

/* --------------------------------------------------------------- 12 about */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-story {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 54ch;
  margin: 0;
  text-wrap: pretty;
}

.about-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }

.fact-list {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.fact-list li {
  display: flex;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
.fact-list dt,
.fact-list__key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  min-width: 8.5rem;
  flex-shrink: 0;
  padding-top: 0.2rem;
}
.fact-list__value { color: var(--muted); }

/* -------------------------------------------------- 13 contact + forms --*/

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.form { display: grid; gap: 1.1rem; }
.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.1rem;
}

.field { display: grid; gap: 0.45rem; }

.field__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.field__label span { color: var(--cyan); }

.field__control,
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(7, 15, 39, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(242, 244, 247, 0.2); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(7, 15, 39, 0.8);
  box-shadow: 0 0 0 3px rgba(91, 224, 255, 0.14);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(242, 244, 247, 0.3); }

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
                    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field select option { background: var(--navy); color: var(--text); }

.field__error {
  font-size: 0.8rem;
  color: #FB7185;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #FB7185; }

/* Domain entry: name and TLD read as one control. */
.domain-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

/* Honeypot — off-screen, never focusable, invisible to real users. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-card { padding: clamp(1.4rem, 2.5vw, 1.9rem); }
.contact-card + .contact-card { margin-top: 1rem; }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.contact-list__key {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.3rem;
}
.contact-list a:hover { color: var(--cyan); }

/* ------------------------------------------------------------- 14 footer */

.site-footer {
  position: relative;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, rgba(7, 15, 39, 0.9));
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.site-footer__brand img { height: 46px; width: auto; }
.site-footer__tagline {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 22ch;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 2rem;
}
.site-footer__col { display: grid; gap: 0.55rem; align-content: start; }
.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.35rem;
}
.site-footer__col a,
.site-footer__col span,
.site-footer__col address {
  font-size: 0.9rem;
  color: var(--muted);
  font-style: normal;
  line-height: 1.5;
  transition: color 0.25s;
}
.site-footer__col a:hover { color: var(--cyan); }

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.6rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--dim);
}
.site-footer__bottom p { margin: 0; }
.site-footer__mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; }

.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #04122E;
  background: linear-gradient(140deg, var(--cyan), var(--blue));
  box-shadow: 0 14px 34px -14px var(--glow-cyan);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 20px 44px -14px var(--glow-cyan);
}

/* ------------------------------------------------- 15 motion + responsive */

/* Scroll reveal. JS adds .is-in; without JS everything stays visible because
   the hidden state is only applied once .js-reveal-ready is on <html>. */
.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}
.js-reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

@media (max-width: 1024px) {
  .order-layout,
  .about-layout,
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .about-visual { max-width: 420px; }
}

@media (max-width: 860px) {
  .site-header__inner { padding-block: 0.8rem; }
  .site-logo img { height: 36px; }
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--gutter) 2rem;
    background: rgba(7, 15, 39, 0.97);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s var(--ease), opacity 0.35s, visibility 0.35s;
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .site-nav__link {
    padding: 1rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .site-nav__link::after { display: none; }
  .site-nav__cta { margin-top: 1.5rem; justify-content: center; }

  .index-list { grid-template-columns: minmax(0, 1fr); }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }

  .hero { min-height: auto; padding-top: 8rem; }
  .hero__scroll { display: none; }
}

/* Three-across stops being neat long before the phone breakpoint: the longest
   label ("Register my domain") needs about 200px of button, so the rows
   collapse to a single stacked column while there is still room to do it
   gracefully. */
@media (max-width: 720px) {
  .hero__actions-row--3,
  .hero__actions-row--2 { grid-template-columns: minmax(0, 1fr); }
  .hero__actions-row { max-width: 380px; }
}

@media (max-width: 560px) {
  /* 38vw is a good share of a wide screen and far too little of a phone, so
     the mark takes a bigger cut of the viewport only once the viewport is
     actually small. */
  .hero__mark { width: 62vw; }
  .btn { width: 100%; }
  .btn--sm, .site-nav__cta { width: auto; }
  .btn-row .btn { width: 100%; }
  .domain-input { grid-template-columns: minmax(0, 1fr); }
  .fact-list li { flex-direction: column; gap: 0.2rem; }
}

@media (min-width: 1100px) {
  .index-row__line { display: block; }
}

/* Reduced motion: no parallax, no smooth-scroll hijack, no sweeps. Content is
   never hidden behind an animation that will not run (brief 05 + 09). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .hero__scroll-track::after { display: none; }
  .btn:hover, .tier:hover, .svc:hover, .whatsapp-fab:hover { transform: none; }
  .ilk:hover::before, .ilk:hover::after { transform: none; }
}

@media print {
  body::before, body::after, .whatsapp-fab, .site-header, .hero__mark { display: none; }
  body { background: #fff; color: #000; }
}

/* Motif stand-ins used until the generated imagery from brief 07 lands. */
.motif {
  width: 100%;
  height: 100%;
  padding: 12%;
  opacity: 0.9;
}

/* --------------------------------------------------- tap target sizing --- */
/* WCAG 2.2 Target Size (Minimum) is 24x24 CSS px. Inline links at body size
   land under that on their own, so the small interactive elements get enough
   vertical padding to clear it comfortably on a phone. */

.link-arrow { padding-block: 0.4rem; }

.svc__toggle { padding-block: 0.4rem; min-height: 32px; }
.svc__link { padding-block: 0.35rem; }

.contact-list a,
.contact-list address,
.contact-list > li > span:not(.contact-list__key) { display: inline-block; padding-block: 0.3rem; }

.site-footer__col a { padding-block: 0.22rem; }

/* Long unbreakable strings — email addresses, domains, order references — are
   wider than a narrow grid track and push the page sideways on a phone. Grid
   and flex children default to a min-content floor, so both parts are needed:
   let the string wrap, and let the track shrink below it. */
.site-footer__col,
.site-footer__col a,
.site-footer__col address,
.site-footer__nav,
.contact-list,
.contact-list a,
.contact-list address,
.summary__value {
  min-width: 0;
  overflow-wrap: anywhere;
}