/* ==========================================================================
   Uplink Technologies — v2
   Built from the "Uplink Home" / "Uplink Managed IT" design-system mocks.
   One hue family (navy + beacon blue), dark brand surfaces bookending a
   light informational band. No CSS framework.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* dark surfaces */
  --bg:            #050c18;
  --bg-panel:      linear-gradient(165deg, rgba(18,36,70,.85), rgba(8,17,36,.9));
  --bg-chip:       #0a1440;
  --ink:           #e8eef8;
  --ink-72:        rgba(232,238,248,.72);
  --ink-66:        rgba(232,238,248,.66);
  --ink-60:        rgba(232,238,248,.60);
  --ink-45:        rgba(232,238,248,.45);
  --ink-32:        rgba(232,238,248,.32);
  --line:          rgba(255,255,255,.09);
  --line-soft:     rgba(255,255,255,.06);

  /* beacon blue family — the only accent */
  --blue:          #2f8bff;
  --blue-deep:     #1a6ab2;
  --blue-light:    #7ab6ff;
  --blue-pale:     #9cc9ff;
  --blue-paler:    #cfe2ff;

  /* light band */
  --light-bg:      #eef3fa;
  --light-ink:     #0b1a2e;
  --light-muted:   #4a5b72;
  --light-line:    #dfe8f4;
  --light-faint:   #6b7f99;

  /* geometry */
  --r-ctl:  11px;
  --r-card: 18px;
  --r-lg:   22px;
  --r-show: 28px;

  --pad-x:  clamp(16px, 4vw, 44px);
  --sec-y:  clamp(70px, 9vw, 130px);
  --wrap:   1280px;

  --font:      Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-disp: 'Space Grotesk', var(--font);
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* height:auto neutralises the HTML height attribute so aspect-ratio can win. */
img { max-width: 100%; height: auto; display: block; }
/* <picture> is a wrapper, not a box: letting the <img> stay the layout child
   keeps the existing .shot / .collage rules applying to it unchanged. */
picture { display: contents; }
a   { color: var(--blue-light); text-decoration: none; transition: color .2s ease; }
a:hover { color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-disp); font-weight: 700; letter-spacing: -.03em; margin: 0; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--blue); color: #fff;
  border-radius: 0 0 var(--r-ctl) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* Film-grain overlay — the one texture in the system. */
.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* --- Type roles ----------------------------------------------------------- */
.display {
  font-family: var(--font-disp);
  font-size: clamp(2.7rem, 6.6vw, 5.6rem);
  line-height: .98; letter-spacing: -.035em;
  color: #fff; text-wrap: balance; margin: 0;
}
.display .glow {
  background: linear-gradient(100deg, #7ab6ff 10%, #2f8bff 55%, #bcd9ff 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.h-sec {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.03; color: #fff; text-wrap: balance;
}
.h-sub { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; color: #fff; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.6; color: var(--ink-66); text-wrap: pretty; margin: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45);
}
.mono--blue { color: var(--blue-light); }

.dim { color: var(--ink-60); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 27px; border-radius: var(--r-ctl);
  font-size: 16px; font-weight: 600; font-family: var(--font);
  border: 1px solid transparent; cursor: pointer;
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, #3d97ff, var(--blue-deep));
  color: #fff;
  box-shadow: 0 7px 20px rgba(47,139,255,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover {
  color: #fff;
  box-shadow: 0 18px 52px rgba(47,139,255,.6), inset 0 1px 0 rgba(255,255,255,.45);
}

.btn-ghost {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(122,182,255,.5); color: #fff; }

/* on the light band */
.btn-ink { background: var(--light-ink); color: #fff; box-shadow: 0 12px 30px rgba(11,26,46,.22); }
.btn-ink:hover { background: var(--blue-deep); color: #fff; box-shadow: 0 14px 36px rgba(30,111,181,.35); }

.btn-outline-blue { border-color: var(--blue-deep); color: var(--blue-deep); background: transparent; }
.btn-outline-blue:hover { background: var(--blue-deep); color: #fff; }

.btn-sm { padding: 11px 18px; font-size: 14px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; }

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 13px var(--pad-x);
  background: rgba(5,12,24,0);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  transition: background .3s ease, border-color .3s ease;
}
.site-head.is-stuck {
  background: rgba(5,12,24,.82);
  border-bottom-color: var(--line-soft);
}

.brand { flex: none; display: flex; }
.brand-chip {
  display: flex; align-items: center; padding: 7px 14px;
  border-radius: 12px; background: var(--bg-chip);
  border: 1px solid rgba(122,182,255,.22);
  box-shadow: 0 6px 24px rgba(10,20,64,.6);
}
.brand-chip img { height: 40px; width: auto; }

.nav-desk { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; }
.nav-desk > a, .nav-item > a { color: var(--ink-72); }
.nav-desk > a:hover, .nav-item > a:hover { color: #fff; }
.nav-desk a.is-here { color: var(--blue-light); }

/* Dropdown: hover / focus-within, never clipped. */
.nav-item { position: relative; }
.nav-item > a::after {
  content: ""; display: inline-block; margin-left: 7px;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}
.nav-menu {
  position: absolute; top: 100%; left: 50%; translate: -50% 8px;
  min-width: 250px; padding: 8px;
  background: linear-gradient(165deg, #12244a, #08122a);
  border: 1px solid rgba(122,182,255,.2);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, translate .22s ease, visibility .22s;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; translate: -50% 0; }
.nav-menu::before { content: ""; position: absolute; inset: -14px 0 100%; }
.nav-menu a {
  display: block; padding: 10px 14px; border-radius: 10px;
  color: var(--ink-72); font-size: 14.5px; font-weight: 500;
}
.nav-menu a:hover { background: rgba(122,182,255,.1); color: #fff; }

.head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.head-phone { font-family: var(--font-mono); font-size: 13px; color: var(--ink-60); }
.head-phone:hover { color: #fff; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); cursor: pointer;
}
.burger span {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile slide-in panel */
.mob-panel {
  position: fixed; inset: 0; z-index: 49;
  padding: 96px clamp(20px,6vw,44px) 40px;
  background: rgba(3,8,17,.96); backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.mob-panel.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mob-panel a {
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-disp); font-size: 1.55rem; font-weight: 600;
  letter-spacing: -.02em; color: #fff;
}
.mob-panel .sub a { font-size: 1.05rem; font-family: var(--font); color: var(--ink-72); padding: 12px 0 12px 16px; }
.mob-panel .mono { margin: 26px 0 8px; border: 0; padding: 0; }
.mob-panel .tel { border: 0; font-family: var(--font-mono); font-size: 15px; color: var(--blue-light); }

@media (max-width: 1023px) {
  .nav-desk, .head-phone { display: none; }
  .burger { display: flex; }
  .brand-chip img { height: 34px; }
}

/* --- Hero (home) ---------------------------------------------------------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 150px var(--pad-x) 90px; overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero-glow-a, .hero-glow-b { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.hero-glow-a {
  top: -20%; right: -10%; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(47,139,255,.28), rgba(47,139,255,0) 62%);
  filter: blur(20px);
}
.hero-glow-b {
  bottom: -30%; left: -15%; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(20,70,160,.35), rgba(20,70,160,0) 65%);
}
.hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,12,24,.55) 0%, rgba(5,12,24,0) 30%, rgba(5,12,24,.25) 70%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px; border-radius: 100px;
  border: 1px solid rgba(122,182,255,.28); background: rgba(10,23,48,.55);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(232,238,248,.78);
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 12px #4ade80; animation: pulse 2.4s ease-in-out infinite;
}
.badge .tag {
  padding: 4px 10px; border-radius: 100px;
  background: rgba(122,182,255,.14); color: var(--blue-pale); white-space: nowrap;
}
@media (max-width: 640px) { .badge .tag { display: none; } }

.hero h1 { margin: 26px 0 0; max-width: 17ch; }
.hero .lead { margin-top: 28px; max-width: 54ch; }
.hero .btn-row { margin-top: 38px; }

/* Stat grid — 1px gaps become hairlines over the tinted backdrop. */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  margin-top: clamp(48px, 7vw, 74px); max-width: 860px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px);
}
.stat { padding: 22px 24px; background: rgba(10,23,48,.62); }
.stat b {
  display: block; font-family: var(--font-disp); font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.stat span {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(232,238,248,.5);
}

/* --- Marquee -------------------------------------------------------------- */
.marquee-sec {
  position: relative; z-index: 2; padding: 34px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: var(--bg); overflow: hidden;
}
.marquee-head { display: flex; align-items: center; gap: 20px; padding: 0 var(--pad-x) 20px; }
.marquee-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee-run {
  display: flex; align-items: center;
  gap: clamp(36px, 5vw, 68px); padding-right: clamp(36px, 5vw, 68px);
  font-family: var(--font-disp); font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  font-weight: 600; letter-spacing: -.01em; color: rgba(232,238,248,.3); white-space: nowrap;
}

/* --- Sections ------------------------------------------------------------- */
.sec { position: relative; z-index: 2; padding: var(--sec-y) var(--pad-x); background: var(--bg); }
.sec--tight { padding-block: clamp(50px, 7vw, 90px); }
.sec--light { background: var(--light-bg); color: var(--light-ink); }
.sec--light h2, .sec--light h3 { color: var(--light-ink); }
.sec--light .lead, .sec--light .dim { color: var(--light-muted); }
.sec--rule { border-top: 1px solid var(--line-soft); }

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(38px, 5vw, 60px); }
.sec-head h2 { max-width: 16ch; }
.sec-head .lead { max-width: 38ch; font-size: 1.02rem; }

.prose-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 56px); }
.prose-head h2 { margin: 14px 0 14px; }
.prose-head p + p { margin-top: 14px; }

/* --- Service cards (dark, numbered, tilt) --------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; perspective: 1400px; }
/* Holds at three columns so the check lists inside stay readable. */
.card-grid--tight { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }

.card {
  position: relative; padding: 32px 30px 36px;
  border-radius: 20px; border: 1px solid var(--line);
  background: var(--bg-panel);
  transform-style: preserve-3d; will-change: transform;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.card:hover {
  border-color: rgba(122,182,255,.42);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(122,182,255,.12);
}
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-num {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(122,182,255,.28), rgba(47,139,255,.1));
  border: 1px solid rgba(122,182,255,.3);
  font-family: var(--font-mono); font-size: 16px; color: var(--blue-pale);
}
.card h3 { margin: 0 0 10px; font-size: 1.36rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.card p  { margin: 0 0 18px; color: var(--ink-60); font-size: .98rem; line-height: 1.62; }
.card .card-link { font-size: .95rem; font-weight: 600; }

.pill-soon {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 11px; border-radius: 100px;
  border: 1px solid rgba(122,182,255,.3); background: rgba(122,182,255,.1);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-pale);
}

/* Check lists inside dark cards */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li {
  position: relative; padding-left: 26px;
  color: var(--ink-60); font-size: .95rem; line-height: 1.55;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 13px; height: 8px; border-left: 2px solid var(--blue-light); border-bottom: 2px solid var(--blue-light);
  transform: rotate(-45deg);
}

/* --- Sticky split (why-us / who-it's-for) --------------------------------- */
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 6vw, 84px); align-items: start;
}
.split-aside { position: sticky; top: 110px; }
.split-aside h2 { margin: 16px 0 16px; }
.split-aside p { margin: 0 0 28px; max-width: 40ch; }

.step-list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.step {
  display: flex; gap: 22px; padding: 24px 26px; border-radius: var(--r-card);
  background: #fff; border: 1px solid var(--light-line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(11,26,46,.12); }
.step .n { flex: none; font-family: var(--font-mono); font-size: 13px; color: var(--blue-deep); padding-top: 4px; }
.step h3 { margin: 0 0 7px; font-size: 1.18rem; font-weight: 600; letter-spacing: -.015em; }
.step p  { margin: 0; color: var(--light-muted); font-size: .97rem; }

/* dark variant of the same list, used on service pages */
.step--dark { background: rgba(255,255,255,.025); border-color: var(--line); }
.step--dark:hover { transform: none; border-color: rgba(122,182,255,.35); box-shadow: none; }
.step--dark h3 { color: #fff; }
.step--dark p  { color: var(--ink-60); }
.step--dark .n { color: var(--blue-light); }

/* --- Photo collage -------------------------------------------------------- */
.collage { display: flex; flex-wrap: wrap; gap: 20px; margin-top: clamp(44px, 6vw, 80px); }
.collage figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #dbe6f4; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .wide { flex: 2 1 460px; aspect-ratio: 16/10; }
.collage .stack { flex: 1 1 260px; display: flex; flex-direction: column; gap: 20px; }
.collage .stack figure { flex: 1; min-height: 150px; }

/* --- Coverage ------------------------------------------------------------- */
.coverage { overflow: hidden; }
.coverage::before {
  content: ""; position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  width: 80vw; height: 600px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(47,139,255,.16), rgba(47,139,255,0) 66%);
}
.coverage .wrap { position: relative; }
.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 70px); align-items: center;
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 8px 15px; border-radius: 100px; border: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px; color: var(--ink-66);
}
.chip--home { border-color: rgba(122,182,255,.28); background: rgba(122,182,255,.08); color: var(--blue-paler); }

.map-frame {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-show);
  border: 1px solid rgba(122,182,255,.18); overflow: hidden;
  background: linear-gradient(165deg, rgba(18,36,70,.7), rgba(8,17,36,.85));
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}
/* The tiles are a standard light-mode map, shown in their native colors
   (not inverted/recolored) so place names stay legible and the map reads
   as a normal, recognizable map rather than a stylized one. */
.map-frame iframe,
.map-frame .leaflet-map { width: 100%; height: 100%; border: 0; display: block; }
.map-frame .leaflet-map { background: transparent; }
.map-frame .leaflet-control-attribution {
  background: rgba(8,17,36,.65); color: var(--ink-45);
}
.map-frame .leaflet-control-attribution a { color: var(--ink-66); }
.map-fig { margin: 0; }
.map-cap {
  display: block; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-45);
}

/* --- Testimonials --------------------------------------------------------- */
/* Full-width rows rather than a three-up grid. Review lengths vary a lot, and
   equal-height columns made the short quotes look padded out next to a long
   one — each row now sizes to its own text. Attribution sits in a fixed-width
   rail on the left so the quotes all start on the same vertical line. */
.quote-list { display: flex; flex-direction: column; gap: 16px; }
.quote-card {
  padding: 26px 30px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
  display: flex; flex-direction: row; align-items: flex-start; gap: 30px;
}
.quote-by { display: flex; align-items: center; gap: 14px; flex: none; width: 190px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(122,182,255,.28), rgba(47,139,255,.12));
  border: 1px solid rgba(122,182,255,.3);
  font-family: var(--font-disp); font-weight: 700; color: var(--blue-pale);
}
.quote-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.quote-who b { font-weight: 700; font-size: .97rem; }
/* Scoped to .quote-who deliberately: the stars are a <span> nested inside it,
   so a bare `.stars` (0,1,0) loses to any `.quote-who span` rule (0,1,1) and
   the amber silently turns grey. */
.quote-who .stars { display: flex; gap: 3px; color: #f5a623; font-size: 13px; letter-spacing: 2px; }
.quote-card blockquote {
  margin: 0; flex: 1; min-width: 0;
  color: var(--ink-72); font-size: 1rem; line-height: 1.65;
}

/* Below this the rail costs more than it buys — stack it. */
@media (max-width: 720px) {
  .quote-card { flex-direction: column; gap: 18px; }
  .quote-by { width: auto; }
}

/* --- Tiers (light band, middle card featured) ----------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
/* Caps at three columns — six items read better as 3+3 than 4+2. */
.tier-grid--3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tier {
  padding: 32px 30px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--light-line);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; height: 100%;
}
.tier:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(11,26,46,.13); }
.tier .mono { color: var(--blue-deep); }
.tier h3 { margin: 14px 0 10px; font-size: 1.45rem; letter-spacing: -.025em; }
.tier p  { margin: 0 0 20px; color: var(--light-muted); font-size: .96rem; }
.tier .checks li { color: #33455e; }

.tier--featured {
  position: relative; padding: 38px 32px;
  background: linear-gradient(160deg, #102a58, #07132b);
  border-color: rgba(122,182,255,.3);
  box-shadow: 0 34px 80px rgba(11,26,46,.3);
  color: var(--ink);
}
.tier--featured:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(11,26,46,.38); }
.tier--featured .mono { color: var(--blue-light); }
.tier--featured h3 { color: #fff; }
.tier--featured p  { color: var(--ink-60); }
.tier--featured .checks li { color: rgba(232,238,248,.82); }
.tier-flag {
  position: absolute; top: -13px; left: 32px;
  padding: 6px 14px; border-radius: 100px;
  background: linear-gradient(180deg, #3d97ff, var(--blue-deep)); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(47,139,255,.45);
}
.tier-note { margin: 34px auto 0; max-width: 62ch; text-align: center; font-size: .94rem; color: var(--light-faint); }

/* --- CTA banner ----------------------------------------------------------- */
.cta-sec { position: relative; z-index: 2; padding: 0 var(--pad-x) clamp(70px, 9vw, 120px); background: var(--bg); }
.cta {
  position: relative; padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 76px);
  border-radius: var(--r-show); overflow: hidden;
  border: 1px solid rgba(122,182,255,.22);
  background: linear-gradient(150deg, #0d2350, #07132b 55%, #0a1c3d);
}
.cta::before {
  content: ""; position: absolute; top: -40%; right: -5%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,139,255,.42), rgba(47,139,255,0) 65%);
}
.cta-inner {
  position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px; align-items: center;
}
.cta h2 { margin: 0 0 16px; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.05; }
.cta p  { margin: 0; max-width: 44ch; color: var(--ink-66); }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-actions .btn { padding: 18px 28px; font-size: 16.5px; border-radius: 13px; }
.cta-hours {
  text-align: center; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; color: var(--ink-45); margin-top: 4px;
}

/* --- Footer --------------------------------------------------------------- */
.site-foot {
  position: relative; z-index: 2;
  padding: clamp(50px, 6vw, 80px) var(--pad-x) 40px;
  background: rgba(4,9,19,.35); border-top: 1px solid var(--line-soft);
}
.foot-cols { display: flex; flex-wrap: wrap; gap: 44px clamp(28px, 3.5vw, 56px); }
.foot-brand { flex: 1 1 280px; min-width: 260px; max-width: 360px; }
.foot-brand .brand-chip { padding: 12px 16px; border-radius: 14px; display: inline-flex; }
.foot-brand .brand-chip img { height: 84px; }
.foot-brand p { margin: 20px 0 0; max-width: 36ch; color: rgba(232,238,248,.5); font-size: .95rem; }
.foot-brand .tagline { margin-top: 12px; color: var(--blue-light); font-size: .9rem; font-style: italic; }
.foot-col { flex: 0 1 190px; }
.foot-col .mono { display: block; margin-bottom: 16px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.foot-col a, .foot-col li { color: var(--ink-72); }
.foot-col a:hover { color: #fff; }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; color: rgba(232,238,248,.36);
}
.foot-bottom a { color: inherit; }

/* --- Service page hero ---------------------------------------------------- */
.page-hero { position: relative; padding: 160px var(--pad-x) clamp(60px, 8vw, 100px); overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 60vw; height: 60vw; max-width: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(47,139,255,.22), rgba(47,139,255,0) 64%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(122,182,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(122,182,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 72%);
}
.page-hero .wrap { position: relative; z-index: 1; }

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.crumbs a { color: var(--ink-45); }
.crumbs a:hover { color: #fff; }
.crumbs .here { color: var(--blue-light); }

.hero-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(36px, 5vw, 68px); align-items: center; margin-top: 32px; perspective: 1400px;
}
.hero-split h1 { max-width: 15ch; font-size: clamp(2.4rem, 5.2vw, 4.2rem); line-height: 1.02; color: #fff; }
.hero-split .lead { margin-top: 24px; max-width: 48ch; }
.hero-split .btn-row { margin-top: 32px; }

.shot {
  position: relative; padding: 14px; border-radius: var(--r-show);
  border: 1px solid rgba(122,182,255,.2);
  background: linear-gradient(160deg, rgba(20,42,84,.75), rgba(7,15,32,.9));
  box-shadow: 0 44px 100px rgba(0,0,0,.55);
  transform-style: preserve-3d; will-change: transform;
}
.shot img { border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.shot figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 6px 2px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-32);
}
.shot figcaption .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 10px #4ade80; animation: pulse 2.4s ease-in-out infinite;
}

/* ==========================================================================
   Forms, wizard, prose
   The intake wizard's markup and JS were carried over from the existing site,
   which was built on Bootstrap. Rather than rewrite 580 lines of form markup
   (and the JS that walks it), this section reimplements just the grid and
   control classes those files actually use — restyled for the v2 dark
   surfaces. It is a deliberately small, closed set, not a framework.
   ========================================================================== */

/* --- Minimal grid --------------------------------------------------------- */
.row {
  --gx: 24px; --gy: 0px;
  display: flex; flex-wrap: wrap;
  margin: calc(-1 * var(--gy)) calc(-.5 * var(--gx)) 0;
}
.row > * {
  flex: 0 0 auto; width: 100%; max-width: 100%;
  padding: 0 calc(var(--gx) * .5); margin-top: var(--gy);
}
.g-0 { --gx: 0;    --gy: 0; }
.g-2 { --gx: 10px; --gy: 10px; }
.g-3 { --gx: 16px; --gy: 16px; }
.g-4 { --gx: 22px; --gy: 22px; }
.g-5 { --gx: 34px; --gy: 34px; }

.col     { flex: 1 0 0%; width: auto; }
.col-6   { width: 50%; }
.col-12  { width: 100%; }
@media (min-width: 576px) {
  .col-sm-3 { width: 25%; }      .col-sm-4 { width: 33.3333%; }
  .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; }
}
@media (min-width: 768px) {
  .col-md-3 { width: 25%; }      .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; }
}
/* row-cols-* must win over .col's flex:1, so it follows it here. */
.row-cols-1 > * { width: 100%; flex: 0 0 auto; }
.row-cols-2 > * { width: 50%;  flex: 0 0 auto; }
@media (min-width: 576px) { .row-cols-sm-2 > * { width: 50%; flex: 0 0 auto; } }
@media (min-width: 768px) { .row-cols-md-3 > * { width: 33.3333%; flex: 0 0 auto; } }

/* --- Panels --------------------------------------------------------------- */
.panel {
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.panel--plain { background: rgba(255,255,255,.025); }
.panel h2, .panel h3 { color: #fff; }

/* --- Form controls -------------------------------------------------------- */
.form-label {
  display: block; margin-bottom: 6px;
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
.form-label.h6, legend.form-label { font-size: 1.02rem; font-family: var(--font-disp); letter-spacing: -.01em; }
legend.form-label { padding: 0; }
.form-text { font-size: .87rem; color: var(--ink-45); }
.req { color: var(--blue-light); margin-left: 3px; }

.form-control, .form-select {
  display: block; width: 100%;
  padding: 11px 13px;
  font-family: inherit; font-size: 1rem; line-height: 1.45;
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.form-control::placeholder { color: rgba(232,238,248,.32); }
.form-control:hover, .form-select:hover { border-color: rgba(255,255,255,.24); }
.form-control:focus, .form-select:focus {
  outline: none;
  background: rgba(255,255,255,.06);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,139,255,.2);
}
textarea.form-control { resize: vertical; min-height: 92px; }

.form-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237ab6ff'><path d='M8 11L3 5.5h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
}
/* The native dropdown list is painted by the OS, not the page — force a dark
   palette so the options aren't white-on-white in some browsers. */
.form-select option { background: #0d1b34; color: var(--ink); }

input[type="file"].form-control { padding: 9px 12px; font-size: .92rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin: -9px 12px -9px -12px; padding: 10px 14px;
  border: 0; border-right: 1.5px solid rgba(255,255,255,.14);
  background: rgba(122,182,255,.12); color: var(--blue-pale);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: rgba(122,182,255,.2); }
input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }

/* Error state */
.form-control.error, .form-select.error {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.18);
}
.field-error {
  display: none; margin-top: 6px;
  font-size: .85rem; color: #f87171;
}
.field-error.visible { display: block; }

/* Checkboxes */
.form-check { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.form-check-input {
  flex: none; width: 19px; height: 19px; margin-top: 2px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 5px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.form-check-input:checked {
  background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.5 3.5L13 5'/></svg>") center/12px no-repeat;
  border-color: var(--blue);
}
.form-check-input:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.form-check-input:disabled { opacity: .4; cursor: not-allowed; }
.form-check-label { font-size: .95rem; color: var(--ink-72); cursor: pointer; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* --- Alerts & the success box --------------------------------------------- */
.alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  font-size: .95rem; color: var(--ink-72);
}
.alert strong { color: #fff; }
.alert-info    { border-color: rgba(122,182,255,.3); background: rgba(122,182,255,.08); }
.alert-danger  { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: #fecaca; }
.alert-success { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.09); }
.alert .alert-mark { flex: none; font-size: 1.1rem; line-height: 1.4; }

/* Two-class reveal (.shown then .visible) — the intake and contact scripts
   both rely on this exact pattern, carried over from the original site. */
#form-success {
  display: none;
  padding: 26px 28px; border-radius: var(--r-card);
  border: 1px solid rgba(74,222,128,.35); background: rgba(74,222,128,.08);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
#form-success.shown   { display: block; }
#form-success.visible { opacity: 1; transform: none; }
#form-success h2 { color: #fff; margin: 0 0 8px; }

.hp-input { position: absolute !important; left: -9999px !important; }

/* --- Intake wizard -------------------------------------------------------- */
.wizard-wrap { max-width: 880px; margin: 0 auto; }

.wizard-progress-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0; counter-reset: none;
}
.wizard-progress-item {
  flex: 1 1 120px; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  cursor: default; transition: border-color .25s ease, background .25s ease;
}
.wizard-progress-item.is-done { cursor: pointer; }
.wizard-progress-item.is-done:hover { border-color: rgba(122,182,255,.4); background: rgba(122,182,255,.07); }
.wizard-progress-dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(255,255,255,.06); color: var(--ink-45);
  border: 1px solid rgba(255,255,255,.12);
}
.wizard-progress-label {
  font-size: .82rem; color: var(--ink-45); line-height: 1.25;
}
.wizard-progress-item.is-active { border-color: rgba(122,182,255,.45); background: rgba(122,182,255,.09); }
.wizard-progress-item.is-active .wizard-progress-dot {
  background: linear-gradient(180deg, #3d97ff, var(--blue-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(47,139,255,.4);
}
.wizard-progress-item.is-active .wizard-progress-label { color: #fff; font-weight: 600; }
.wizard-progress-item.is-done .wizard-progress-dot {
  background: rgba(122,182,255,.18); color: var(--blue-pale); border-color: rgba(122,182,255,.35);
}
.wizard-progress-item.is-done .wizard-progress-label { color: var(--ink-72); }

.wizard-step > .panel > h2 { outline: none; }
.wizard-step .form-divider { height: 1px; background: var(--line); border: 0; margin: 28px 0; }

.wizard-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
  position: sticky; bottom: 16px;
  backdrop-filter: blur(10px);
}
.wizard-nav .step-count { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }

/* A conditional block that reveals extra questions. */
.subpanel {
  padding: 18px 20px; border-radius: 12px;
  border: 1px solid rgba(122,182,255,.2); background: rgba(122,182,255,.05);
}
.subpanel > :last-child { margin-bottom: 0; }

/* --- Long-form prose (privacy policy, story copy) ------------------------- */
.prose { max-width: 68ch; }
.prose h2 {
  margin: 44px 0 14px; font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  letter-spacing: -.02em; color: #fff;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-66); }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.prose strong { color: var(--ink); }
.prose > :last-child { margin-bottom: 0; }

/* --- Contact detail list -------------------------------------------------- */
.info-list { display: flex; flex-direction: column; gap: 22px; list-style: none; margin: 0; padding: 0; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-item .k {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(122,182,255,.24), rgba(47,139,255,.08));
  border: 1px solid rgba(122,182,255,.28);
  font-family: var(--font-mono); font-size: 11px; color: var(--blue-pale);
}
.info-item h3 { font-size: 1.02rem; margin: 0 0 3px; color: #fff; }
.info-item p { margin: 0; color: var(--ink-66); font-size: .96rem; }

/* --- Layout utilities carried over from the Bootstrap markup -------------- */
.d-none { display: none !important; }
.d-flex { display: flex; }
.d-block { display: block; }
.justify-content-between { justify-content: space-between; }
.justify-content-center  { justify-content: center; }
.align-items-center      { align-items: center; }
.align-items-start       { align-items: flex-start; }
.flex-shrink-0 { flex-shrink: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 18px; }
.mb-4 { margin-bottom: 26px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 18px; }
.my-4 { margin: 26px 0; }
.me-1 { margin-right: 5px; }
.me-2 { margin-right: 9px; }
.ms-2 { margin-left: 9px; }
.p-3  { padding: 18px; }
.small { font-size: .87rem; }
.fw-normal { font-weight: 400; }
.text-muted-c { color: var(--ink-45); }
.text-success { color: #4ade80; }
.h4 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.h6 { font-size: 1.02rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Utilities ------------------------------------------------------------ */
.center { text-align: center; }
.center .lead, .center h2 { margin-left: auto; margin-right: auto; }
.max-prose { max-width: 60ch; }
.mt-4 { margin-top: 32px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

/* --- Motion --------------------------------------------------------------- */
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes pulse   { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes rise    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.rise    { animation: rise .7s ease both; }
.rise-1  { animation: rise .7s .06s ease both; }
.rise-2  { animation: rise .7s .12s ease both; }
.rise-3  { animation: rise .7s .18s ease both; }
.rise-4  { animation: rise .7s .24s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee-track { animation: none; }
}

@media (max-width: 900px) {
  .split-aside { position: static; }
}