/* ==========================================================================
   ArmourTel, modern site stylesheet
   Fresh palette: deep ink/navy + electric blue → cyan accent
   ========================================================================== */

:root {
  /* Palette */
  --ink: #0b1220;           /* near-black navy, headings, dark surfaces */
  --navy: #101c33;          /* deep navy surface */
  --navy-2: #16233d;
  --blue: #2563eb;          /* primary brand */
  --blue-600: #1d4ed8;
  --cyan: #06b6d4;          /* accent */
  --sky: #38bdf8;

  --bg: #ffffff;
  --bg-soft: #f4f7fb;
  --border: #e7ecf3;
  --text: #1c2536;
  --muted: #5a6779;
  --muted-dark: #a9b6ca;    /* muted text on dark surfaces */

  --grad: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --grad-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(6, 182, 212, 0.10) 100%);

  /* Typography */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing / radius / shadow */
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 3px rgba(11, 18, 32, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(11, 18, 32, 0.22);
  --shadow-lg: 0 24px 60px -24px rgba(11, 18, 32, 0.35);

  --container: 1140px;
  --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.5); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink); color: var(--muted-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.9rem;
}
.section--dark .eyebrow { color: var(--sky); }
.section-head p.lead { margin-top: 1rem; font-size: 1.08rem; color: var(--muted); }
.section--dark .section-head p.lead { color: var(--muted-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.78rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--gradient { background: var(--grad); color: #fff; box-shadow: 0 8px 24px -10px rgba(37, 99, 235, 0.7); }
.btn--gradient:hover { box-shadow: 0 14px 30px -10px rgba(6, 182, 212, 0.7); transform: translateY(-1px); }
.btn--ghost { border: 1px solid var(--border); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost-dark { border: 1px solid rgba(255,255,255,0.22); color: #fff; }
.btn--ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--lg { padding: 0.95rem 1.7rem; font-size: 1.03rem; border-radius: 12px; }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.88rem; }
.btn .icon { width: 18px; height: 18px; flex: none; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-name span { color: var(--blue); }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  padding: 0.5rem 0.68rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-links a.is-active { color: var(--blue); font-weight: 600; }
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(6, 182, 212, 0.18), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(37, 99, 235, 0.22), transparent 55%),
    var(--ink);
  color: #fff;
  padding-block: clamp(4rem, 10vw, 7.5rem);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 70% 20%, black, transparent 75%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}
.hero .eyebrow { color: var(--sky); }
.hero h1 { color: #fff; }
.hero h1 .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead { margin-top: 1.25rem; font-size: 1.13rem; color: #c2cee0; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.4rem; color: #a9b6ca; font-size: 0.9rem; }
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); display: inline-block; vertical-align: middle; margin-right: 6px; }

.hero-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.hero-card h3 { color: #fff; margin-bottom: 1rem; }
.hero-card ul { display: grid; gap: 0.7rem; }
.hero-card li { display: flex; gap: 0.6rem; align-items: flex-start; color: #d3ddec; font-size: 0.95rem; }
.hero-card li svg { width: 18px; height: 18px; flex: none; color: var(--sky); margin-top: 2px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.7rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d6e0ee; }
.card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--grad-soft);
  color: var(--blue);
  margin-bottom: 1.1rem;
}
.card .card-icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 0.55rem; color: var(--ink); }
.card p { color: var(--muted); font-size: 0.96rem; }
.card a.arrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 1rem; font-weight: 600; font-size: 0.92rem; color: var(--blue);
}
.card a.arrow:hover { gap: 10px; }
.card a.arrow svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.card-price { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--blue); }

/* Stat / feature highlight */
.stat-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 2.2rem; }
.stat { text-align: center; }
.stat strong { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--ink); }
.stat span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Logo strip ---------- */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 4rem; }
.logo-strip img { height: 42px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease; }
.logo-strip img:hover { opacity: 1; filter: none; }

/* ---------- Scrolling logo carousel ---------- */
.logo-carousel-wrap { margin-top: 3.25rem; }
.logo-carousel-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.logo-carousel {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.logo-carousel-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-scroll 22s linear infinite;
  will-change: transform;
}
.logo-carousel:hover .logo-carousel-track { animation-play-state: paused; }
.logo-carousel-track img {
  width: 170px;
  height: 46px;
  object-fit: contain;
  margin-right: 4.5rem;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-carousel-track img:hover { opacity: 1; filter: none; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Feature list (Cloud Phones) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.feature svg { width: 22px; height: 22px; flex: none; color: var(--blue); margin-top: 2px; }
.feature .feat-name { font-weight: 600; color: var(--ink); }
.feature .feat-desc { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.feature .badge-addon {
  display: inline-block; margin-top: 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-600); background: var(--grad-soft);
  padding: 2px 8px; border-radius: 999px;
}

/* Who-benefits table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
table.benefits { width: 100%; border-collapse: collapse; min-width: 560px; }
table.benefits th, table.benefits td { text-align: left; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--border); }
table.benefits thead th { background: var(--bg-soft); font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
table.benefits tbody tr:last-child td { border-bottom: 0; }
table.benefits td:first-child { font-weight: 600; color: var(--ink); }
table.benefits td { color: var(--muted); font-size: 0.94rem; }

/* ---------- Portal cards ---------- */
.portal-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.9rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.portal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.portal-card .portal-tag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue); background: var(--grad-soft); padding: 3px 10px; border-radius: 999px;
}
.portal-card .card-icon { width: 54px; height: 54px; }
.portal-card h3 { color: var(--ink); }
.portal-card p { color: var(--muted); flex: 1; }

/* ---------- Check list ---------- */
.check-list { display: grid; gap: 0.8rem; align-content: start; }
.check-list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--muted); font-size: 0.95rem; }
.check-list svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: 2px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.5rem; align-items: start; }
.contact-list { display: grid; gap: 1rem; }
.contact-item { display: flex; gap: 0.9rem; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.contact-item .card-icon { width: 42px; height: 42px; margin-bottom: 0; }
.contact-item h4 { margin-bottom: 2px; }
.contact-item p, .contact-item a { color: var(--muted); font-size: 0.95rem; }
.contact-item a:hover { color: var(--blue); }

.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.form-field input, .form-field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  padding: 0.72rem 0.9rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.form-field textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.9rem; }
.form-status { display: none; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.92rem; }
.form-status.ok { display: block; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.form-status.err { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--grad);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 0.7rem; color: rgba(255,255,255,0.9); font-size: 1.05rem; }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn--ghost-dark { border-color: rgba(255,255,255,0.4); }

/* ---------- Photo background band ---------- */
/* Background images on these bands never tile. `cover` hides a tiling bug by
   always filling the panel, but the moment a band is taller than its image
   the default `repeat` draws a second copy underneath — so it is set
   explicitly here as well as in the narrow-screen block below. */
.photo-band,
.teaser-band,
.teams-panel,
.hero.hero--photo,
.page-hero.page-hero--photo {
  background-repeat: no-repeat;
}
.photo-band {
  position: relative;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--band-overlay, linear-gradient(100deg, rgba(11,18,32,0.93) 15%, rgba(16,28,51,0.74) 60%, rgba(6,182,212,0.22) 100%));
}
.photo-band .container { position: relative; z-index: 1; }
.photo-band .section-head { text-align: left; margin: 0 0 1.75rem; max-width: 560px; }
.photo-band h2 { color: #fff; }
.photo-band .eyebrow { color: var(--sky); }
/* ---------- Full-bleed artwork band ----------
   Artwork that carries the headline itself. The wide source crop keeps the
   subject clear of the copy, which sits bottom-left over a gradient scrim.
   --art-focus tunes which part of the artwork the crop favours. */
.art-band {
  position: relative;
  width: 100%;
  height: clamp(280px, 60vw, 500px);
  background-color: var(--ink);
  background-size: cover;
  background-position: var(--art-focus, center 42%);
  background-repeat: no-repeat;
}
/* Scrim: dark under the copy, fading out to the right so the character and
   the train stay clearly visible. */
.art-band--copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 18, 32, 0.85) 0%,
    rgba(11, 18, 32, 0.62) 32%,
    rgba(11, 18, 32, 0.22) 60%,
    rgba(11, 18, 32, 0.00) 100%
  );
}
.art-band--copy .container {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.art-band-copy { max-width: 34rem; }
.art-band-copy h2 {
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.art-band-copy .eyebrow { color: var(--sky); }
.art-band-copy .art-sub {
  margin-top: 0.8rem;
  font-size: clamp(0.95rem, 1.7vw, 1.06rem);
  line-height: 1.6;
  color: #cfdcee;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.art-band-copy .art-sub strong { color: #fff; }

/* Cards that belong to the band above sit closer to it */
.section--flush-top { padding-top: clamp(2rem, 5vw, 3rem); }
.photo-band p.lead { color: #c2cee0; }

.page-hero.page-hero--photo {
  background-size: cover;
  background-position: center;
  /* For page heroes the artwork ratio is already declared as --hero-ratio. */
  --img-ratio: var(--hero-ratio, 1920 / 616);
}
.page-hero.page-hero--tall { padding-block: clamp(4.5rem, 10vw, 7.5rem); }
/* Photo heroes whose height follows the artwork, so the whole subject stays in
   frame at every viewport width. Set --hero-ratio (and often background-position)
   inline on the section. */
.page-hero.page-hero--ratio {
  width: 100%;
  aspect-ratio: var(--hero-ratio, 1920 / 616);
  padding-block: 2rem;
  display: flex;
  align-items: center;      /* centres the copy vertically in the panel */
}
/* Below this width the ratio would leave too little room for the text, so the
   image gets cropped horizontally instead (fine on small screens). */
@media (max-width: 1200px) {
  .page-hero.page-hero--ratio { aspect-ratio: auto; padding-block: clamp(2.75rem, 8vw, 4rem); }
}
.page-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Opacity is tunable per hero via --ov-a / --ov-b / --ov-c, because how much
     darkening the copy needs depends on how dark the artwork already is. */
  background: linear-gradient(
    120deg,
    rgba(11, 18, 32, var(--ov-a, 0.94)) 15%,
    rgba(11, 18, 32, var(--ov-b, 0.66)) 60%,
    rgba(6, 182, 212, var(--ov-c, 0.16)) 100%
  );
}
.page-hero--lighter-left::after { --ov-a: 0.78; }
.page-hero--photo .container { position: relative; z-index: 1; }

/* Credential row inside the About hero */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 46rem;
}
.hero-facts li { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-facts b {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
}
.hero-facts span { font-size: 0.83rem; color: var(--muted-dark); line-height: 1.4; }

/* ---------- Hero with photo background ---------- */
.hero.hero--photo { background-size: cover; background-position: center; }
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11,18,32,0.90) 15%, rgba(11,18,32,0.66) 55%, rgba(6,182,212,0.18) 100%);
}

/* ---------- Teaser band ---------- */
.teaser-band {
  position: relative;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.teaser-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,18,32,0.95) 35%, rgba(11,18,32,0.62) 70%, rgba(11,18,32,0.18) 100%);
}
.teaser-band .container { position: relative; z-index: 1; }
.teaser-text { max-width: 30rem; padding-block: 3rem; }
.teaser-band .eyebrow { color: var(--sky); }
.teaser-band h2 { color: #fff; font-size: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: 1.4rem; }

/* ---------- Teams panel (image background section) ---------- */
.teams-panel { background-size: cover; background-position: center; position: relative; }
.teams-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11,18,32,0.95) 20%, rgba(11,18,32,0.84) 60%, rgba(11,18,32,0.60) 100%);
}
.teams-panel .container { position: relative; z-index: 1; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Device cards ---------- */
.device-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.device-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.device-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.device-card figcaption { padding: 1rem 1.2rem 1.25rem; display: grid; gap: 4px; }
.device-card strong { color: var(--ink); font-family: var(--font-display); font-size: 1.02rem; }
.device-card span { color: var(--muted); font-size: 0.92rem; }

/* ---------- Pricing cards ---------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.price-card--featured {
  border-color: var(--blue);
  box-shadow: 0 18px 44px -20px rgba(37, 99, 235, 0.55);
}
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 { margin-bottom: 0.9rem; }
.price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.3rem; }
.price-amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.price-unit { font-size: 0.86rem; color: var(--muted); }
/* Was/now price, e.g. "£3.00 £2.00" with the old price struck through */
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; }
.price-was {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.price-card .check-list { margin-bottom: 1.6rem; }
.price-card .btn { width: 100%; margin-top: auto; }
.price-note {
  margin-top: 1.8rem;
  margin-inline: auto;
  max-width: 46rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { margin-top: 0.9rem; font-size: 0.92rem; max-width: 26rem; }
.site-footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: 0.6rem; }
.footer-col a { color: var(--muted-dark); font-size: 0.94rem; transition: color 0.15s ease; }
.footer-col a:hover { color: #fff; }
.footer-contact { display: grid; gap: 0.6rem; }
.footer-contact a { display: flex; gap: 8px; align-items: center; color: var(--muted-dark); font-size: 0.94rem; }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 16px; height: 16px; color: var(--sky); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.86rem;
}
.footer-bottom .subdomains { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; }
.footer-bottom .subdomains a:hover { color: #fff; }

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 85% -20%, rgba(6, 182, 212, 0.16), transparent 60%),
    radial-gradient(700px 400px at 0% 0%, rgba(37, 99, 235, 0.2), transparent 55%),
    var(--ink);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.page-hero h1 { color: #fff; }
.page-hero p { margin-top: 1rem; color: #c2cee0; font-size: 1.1rem; max-width: 46rem; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gap-2 { gap: 2rem; }

/* ---------- Reveal animation ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  /* The provider logo marquee keeps scrolling: it is decorative and explicitly wanted. */
  .logo-carousel-track { animation: logo-scroll 22s linear infinite !important; }
}

/* Cards that finish with a call to action (button sits on the card baseline) */
.card--cta { display: flex; flex-direction: column; }
.card--cta .card-cta { margin-top: auto; padding-top: 1.1rem; }

/* ---------- Legal document (Terms) ----------
   Clause numbering is generated by CSS counters. The counter mechanics below
   mirror the original document exactly; only the presentation has changed. */
.legal { max-width: 820px; }
.legal > p:first-of-type {
  background: var(--bg-soft);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.6rem;
  color: var(--ink);
  font-size: 0.96rem;
}
.legal ol {
  counter-reset: section;
  list-style-type: decimal;
  line-height: 1.75;
  padding-left: 1.5rem;
}
.legal ol > li { counter-increment: section; }
.legal > ol > li {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin-top: 2.4rem;
}
.legal > ol > li:first-child { margin-top: 0; }
.legal > ol > li > ol {
  counter-reset: section;
  list-style-type: none;
  line-height: 1.7;
  padding-left: 0.9rem;
  margin-top: 1rem;
}
.legal > ol > li > ol > li {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  list-style-type: none;
  margin-bottom: 0.7rem;
}
.legal > ol > li > ol > li::before {
  content: counters(section, '.') '.  ';
  font-weight: 600;
  color: var(--blue);
}
.legal > ol > li > ul > li > ol > li,
.legal > ol > li > ol > li > ol > li { list-style-type: lower-alpha; }
.legal > ol > li > ol > li > ol > li > ol > li { list-style-type: lower-roman; }
.legal ul { padding-left: 1.3rem; margin: 0.5rem 0 0.9rem; }
.legal ul > li { margin-bottom: 0.4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 480px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 0.8rem 1rem 1.2rem; box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.8rem 0.9rem; }
}

@media (max-width: 680px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Narrow screens: an intentional stacked hero ----------
   These hero images are 2.4:1 to 3.1:1. Filling a tall phone panel with one
   means `cover` has to discard most of its width — 70% of the About
   timeline, for example. So below the breakpoint the artwork is drawn at
   full width with its own height and the copy sits beneath it on dark.

   The band heights are released here because they were sized for a
   background that fills the panel. Left alone, a 280px band holding a 125px
   artwork leaves 55% of itself empty, which reads as a letterbox rather than
   a hero. Letting the content set the height keeps the image and its copy
   together, with no dead space.

   `background-position: top` needs !important because several heroes set
   their crop point inline, and a media query cannot outrank an inline style. */
@media (max-width: 1200px) {
  .hero.hero--photo,
  .page-hero.page-hero--photo,
  .photo-band,
  .teaser-band,
  .teams-panel,
  .art-band {
    background-color: var(--ink);
    background-size: 100% auto;
    background-position: top center !important;
    /* essential now the image no longer fills the panel: without this the
       leftover space below it is filled with a tiled second copy */
    background-repeat: no-repeat;
  }

  /* Soften the bottom edge of the artwork into the dark panel instead of
     cutting it off. Needs to know where the image ends, which is its rendered
     height: viewport width / --img-ratio. 100vw is exact at these widths
     because there is no vertical scrollbar in play on a touch device. */
  .hero.hero--photo::before,
  .page-hero.page-hero--photo::after,
  .photo-band::after,
  .teaser-band::after,
  .teams-panel::after,
  .art-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    top: calc(100vw / var(--img-ratio, 1.79) - var(--fade-h, clamp(4.5rem, 14vw, 9rem)));
    height: var(--fade-h, clamp(4.5rem, 14vw, 9rem));
    background: linear-gradient(
      to bottom,
      rgba(11, 18, 32, 0) 0%,
      rgba(11, 18, 32, 0.45) 45%,
      rgba(11, 18, 32, 0.88) 80%,
      var(--ink) 100%
    );
  }

  /* release the fixed/aspect heights so nothing has to be filled */
  .art-band { height: auto; min-height: clamp(240px, 62vw, 420px); }
  .page-hero.page-hero--photo { min-height: 0; }
  .hero.hero--photo { min-height: 0; padding-block: clamp(2rem, 6vw, 3.5rem); }
  .teaser-text { padding-block: 2rem; }
  .teams-panel .container,
  .photo-band .container { position: relative; }

  /* a little more room to breathe above the copy now the artwork sits on top */
  .art-band--copy .container { padding-block: 1.5rem 2rem; }
  .art-band-copy h2 { font-size: clamp(1.5rem, 6.4vw, 2.1rem); }
}