/* ==========================================================================
   OrbitPoint Technologies — marketing site
   Layout and section rhythm follow a conventional MSP marketing structure:
   dark hero, commitments strip, problem, process, outcomes, audiences,
   before/after, insights, assessment form, footer.
   ========================================================================== */

:root {
  /* Surfaces */
  --navy:        #1E2937;
  --navy-deep:   #1A2430;
  --navy-card:   #253141;
  --navy-line:   #33404F;

  /* Accent */
  --red:         #E11D2A;
  --red-hover:   #C4141F;
  --red-soft:    #F05560;   /* eyebrows on dark */
  --red-tint:    #FDECEE;   /* icon chips */

  /* Type */
  --ink:         #1A222E;
  --body:        #4E5866;
  --muted:       #6B7684;
  --on-dark:     #FFFFFF;
  --on-dark-dim: #AAB4C0;

  /* Neutrals */
  --white:       #FFFFFF;
  --grey-bg:     #F4F6F8;
  --line:        #E4E8EC;

  --radius:      10px;
  --radius-sm:   6px;
  --shell:       1180px;
  --gutter:      48px;
}

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

html {
  scroll-behavior: smooth;
  /* Clears the sticky header so in-page anchors don't land underneath it. */
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, .display {
  font-family: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Shared section furniture ------------------------------------------ */

.section { padding: 104px 0; }
.section--grey { background: var(--grey-bg); }
.section--dark { background: var(--navy); color: var(--on-dark); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.section--dark .eyebrow { color: var(--red-soft); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  margin-bottom: 56px;
}
.section-head h2 { font-size: 46px; max-width: 640px; }
.section--dark h2 { color: var(--on-dark); }
.section-lede {
  font-size: 18px;
  color: var(--body);
  max-width: 560px;
  margin-top: 18px;
}
.section--dark .section-lede { color: var(--on-dark-dim); }

.script {
  /* Dancing Script at 700, not Parisienne: the ornate face was pretty and
     genuinely hard to read at a glance, which is the one job this line has. */
  font-family: 'Dancing Script', 'Segoe Script', cursive;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.28;
  letter-spacing: 0.005em;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: Barlow, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-hover); }
.btn--ghost-light { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn--ghost-light:hover { background: rgba(255,255,255,.10); }
.btn--outline-red {
  border-color: var(--red);
  color: var(--red);
  background: var(--white);
  border-radius: 8px;
  padding: 13px 24px;
  font-size: 15px;
}
.btn--outline-red:hover { background: var(--red); color: var(--white); }
.btn--wide { width: 100%; padding: 17px 28px; font-size: 17px; }

.arrow { width: 17px; height: 17px; flex-shrink: 0; }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  color: var(--on-dark);
}
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  max-width: 1360px;
}
/* flex-shrink:0 is load-bearing. The brand is a flex item, and above 1600px
   the Client portal pill gains its text label and squeezes the row; the brand
   then gave up 31px, and because the global `img { max-width: 100% }` clamps
   an image to its parent, the wordmark quietly scaled 158px -> 126.6px. It
   looked deliberate rather than broken, which is why it needs saying. */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__emblem { width: 44px; height: auto; flex-shrink: 0; }
.brand__type { display: block; }
.brand__wordmark { display: block; width: 158px; max-width: none; height: auto; }

/* The supplied artwork as ONE asset, used on index.html. The emblem keeps its
   full colour; only the type is knocked out for the navy bar. Sized to 250px
   because the lockup is 3.79:1 — the strap scales with the whole image, so
   250px is the largest that still clears the 84px header, and it sets
   "TECHNOLOGIES" at ~7px against the 10.5px of the live-text build below.
   max-width:none defeats the global `img { max-width: 100% }` clamp, same
   reason it is on .brand__wordmark. */
.brand--lockup { gap: 0; }
.brand__lockup { display: block; width: 250px; max-width: none; height: auto; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Barlow, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  background: none;
  border: 0;
  padding: 10px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.nav > .nav__link { position: relative; }

.nav__caret { width: 13px; height: 13px; opacity: .7; transition: transform .16s ease; }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__toggle[aria-expanded="true"] { color: var(--white); background: rgba(255,255,255,.07); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 22px 48px rgba(15,22,32,.22);
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 70;
}
/* display:flex above outranks the UA rule for [hidden], so restate it —
   without this every dropdown renders open at once. */
.nav__menu[hidden] { display: none; }
/* The 12px gap above would break a hover chain, so bridge it. */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.nav__menu a {
  font-family: Barlow, sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav__menu a:hover { background: var(--grey-bg); color: var(--red); }
.nav__menu a[aria-current="page"] { color: var(--red); font-weight: 600; }
/* First entry in each menu is the section index — set it apart. */
.nav__menu a:first-child {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 6px;
  padding-bottom: 13px;
  font-weight: 600;
}

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

.header-actions { display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.pill:hover { background: var(--red-hover); }
.pill--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  color: rgba(255,255,255,.92);
}
.pill--ghost:hover { background: rgba(255,255,255,.10); }
.pill__icon { width: 15px; height: 15px; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--on-dark);
  overflow: hidden;
}
/* Hero photograph. Sits under .hero__scrim, which is what keeps the white
   headline readable regardless of what the picture is doing. */
.hero__img,
.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Photos are mid-tone; darken before the scrim so the text has real contrast. */
  filter: brightness(.62) saturate(.9);
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, #000 20%, transparent 75%);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,28,38,.94) 0%, rgba(20,28,38,.86) 42%, rgba(20,28,38,.55) 100%);
}
.hero .shell { position: relative; z-index: 2; }
.hero__inner { padding: 118px 0 128px; max-width: 760px; }
.hero .eyebrow { color: var(--red-soft); }
.hero h1 {
  font-size: 68px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin-bottom: 26px;
}
.hero__lede {
  font-size: 20px;
  line-height: 1.62;
  color: rgba(255,255,255,.80);
  max-width: 610px;
  margin-bottom: 38px;
}
.hero__actions { display: flex; align-items: center; gap: 14px; margin-bottom: 68px; }
/* Uses the lighter red, not --red: the same token the eyebrow above it uses,
   and the only one that clears contrast against the scrimmed photo. */
.hero .script { color: var(--red-soft); }

/* --- Interior page hero ------------------------------------------------- */

.page-hero {
  background: var(--navy-deep);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
/* Scrim: opaque on the text side, clearing toward the right so the photo
   still reads. Same treatment as the homepage hero. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,28,38,.94) 0%, rgba(20,28,38,.84) 44%, rgba(20,28,38,.48) 100%),
    radial-gradient(ellipse 50% 60% at 88% 40%, rgba(225,29,42,.14), transparent 64%);
  pointer-events: none;
}
.page-hero .shell { position: relative; z-index: 2; }
.page-hero__inner { padding: 96px 0 108px; max-width: 720px; }
.page-hero .eyebrow { color: var(--red-soft); }
.page-hero h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.page-hero__lede {
  font-size: 19px;
  line-height: 1.62;
  color: rgba(255,255,255,.78);
  max-width: 600px;
  margin-bottom: 34px;
}
.page-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-hero__meta { font-size: 15.5px; color: var(--on-dark-dim); margin-top: 22px; }

/* Centred section head — the interior-page variant. */
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.section-head--center h2 { max-width: 760px; }
.section-head--center .section-lede { margin-left: auto; margin-right: auto; }

/* --- Commitments strip (replaces a stats/social-proof strip) ------------ */

.strip { background: var(--white); border-bottom: 1px solid var(--line); }
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 44px 0;
}
.strip__value {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
}
.strip__label { font-size: 15.5px; color: var(--muted); margin-top: 4px; }

/* --- Problem ------------------------------------------------------------ */

.problem__body {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 64px;
  align-items: start;
}
.problem__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 40px;
}
.mini { display: flex; gap: 13px; align-items: flex-start; }
.mini__icon { width: 21px; height: 21px; color: var(--red); flex-shrink: 0; margin-top: 3px; }
.mini__title { font-weight: 600; font-size: 17.5px; color: var(--ink); line-height: 1.35; }
.mini__text { font-size: 16px; color: var(--body); line-height: 1.55; margin-top: 3px; }

.quote-card {
  background: var(--navy);
  color: var(--on-dark);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 42px 40px 44px;
}
.quote-card p {
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: 29px;
  line-height: 1.28;
  letter-spacing: -0.025em;
}

/* --- Cards -------------------------------------------------------------- */

.card-grid { display: grid; gap: 22px; }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 34px;
}
.card__chip {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--red-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.card__chip svg { width: 21px; height: 21px; color: var(--red); }
.card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 9px; }
.card p { font-size: 16px; color: var(--body); line-height: 1.55; }

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  margin-top: 22px;
}
.service-row > div { padding: 26px 24px 28px; border-right: 1px solid var(--line); }
.service-row > div:last-child { border-right: 0; }
.service-row h3 {
  font-family: Archivo, sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 7px;
}
.service-row p { font-size: 15px; color: var(--body); line-height: 1.5; }

/* --- Audiences (vertical rules, like a column set) ---------------------- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.audience-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.audience {
  padding: 0 30px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.audience:first-child { padding-left: 0; border-left: 0; }
.audience:last-child { padding-right: 0; }
.audience__icon { width: 26px; height: 26px; color: var(--red); }
.audience h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.audience p { font-size: 16px; color: var(--body); line-height: 1.55; }
.link-red {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--red);
  font-weight: 600;
  font-size: 15.5px;
  margin-top: auto;
  padding-top: 10px;
}
.link-red:hover { gap: 13px; }

/* --- Before / after ----------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.compare__card { border-radius: var(--radius); padding: 34px 34px 36px; }
.compare__card--before { background: var(--navy-card); }
.compare__card--after  { background: var(--white); color: var(--ink); }
.compare__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.compare__card--before .compare__label { color: var(--on-dark-dim); }
.compare__card--after  .compare__label { color: var(--red); }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.compare li { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.compare li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; }
.compare__card--before li { color: var(--on-dark-dim); }
.compare__card--before li svg { color: #7A8697; }
.compare__card--after li svg { color: var(--red); }
.compare__arrow { display: flex; align-items: center; justify-content: center; color: var(--red); }
.compare__arrow svg { width: 30px; height: 30px; }

/* --- Insights ----------------------------------------------------------- */

.placeholder-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9AA4B2;
  border: 1px dashed #C7CED7;
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 14px;
}

/* --- Get started -------------------------------------------------------- */

.start__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: 72px;
  align-items: start;
}
.start h2 { font-size: 46px; }
.start .script { color: var(--red); margin: 26px 0 30px; }
.start__points { display: flex; flex-direction: column; gap: 22px; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 38px 36px 40px;
  box-shadow: 0 18px 44px rgba(26,34,46,.07);
}
.form-card h3 { font-size: 25px; margin-bottom: 8px; }
.form-card__lede { font-size: 16px; color: var(--body); margin-bottom: 26px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field input,
.field textarea {
  font-family: Barlow, sans-serif;
  font-size: 16px;
  color: var(--ink);
  border: 1px solid #D6DCE3;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  background: var(--white);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder,
.field textarea::placeholder { color: #A6AEB9; }
.field input:focus,
.field textarea:focus { outline: 2px solid rgba(225,29,42,.35); outline-offset: 1px; border-color: var(--red); }
.form-note { font-size: 15px; color: var(--muted); text-align: center; margin-top: 15px; }
.form-note a { color: var(--red); font-weight: 600; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--on-dark-dim);
  border-top: 4px solid var(--red);
  padding: 60px 0 34px;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--navy-line);
}
.footer-tagline { font-size: 17px; color: rgba(255,255,255,.72); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 1.5fr;
  gap: 40px;
  padding: 40px 0 44px;
}
.footer-cols h2 {
  font-family: Barlow, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 20px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.footer-cols a:hover { color: var(--white); }
.footer-area {
  background: var(--navy-card);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
}
.footer-area .footer-area__title { color: var(--white); font-weight: 600; margin-bottom: 10px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--navy-line);
  font-size: 15px;
}
.footer-bottom nav { display: flex; gap: 26px; }

/* --- Section scroll dots ------------------------------------------------ */

.dots {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(225,29,42,.34);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.dots button:hover { background: rgba(225,29,42,.65); }
.dots button[aria-current="true"] { background: var(--red); transform: scale(1.85); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .problem__body { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .audience { border-left: 0; padding: 0 26px 0 0; }
  .service-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-row > div { border-bottom: 1px solid var(--line); }
  .start__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dots { display: none; }
}

@media (max-width: 1260px) {
  .site-header .shell { height: 76px; }
  .nav-burger { display: flex; }
  .header-actions .pill--ghost { display: none; }

  /* Nav becomes a drawer under the header rather than a row inside it. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--navy);
    border-top: 1px solid var(--navy-line);
    padding: 14px var(--gutter) 24px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav__item { position: static; }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 15px; }
  .nav__link[aria-current="page"]::after { left: 4px; right: auto; width: 22px; bottom: 6px; }

  .nav__menu {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--navy-line);
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 10px 6px;
    padding: 2px 0 2px 14px;
  }
  .nav__menu::before { display: none; }
  .nav__menu a { color: rgba(255,255,255,.80); font-size: 15px; padding: 10px 6px; }
  .nav__menu a:hover { background: rgba(255,255,255,.07); color: var(--white); }
  .nav__menu a[aria-current="page"] { color: var(--red-soft); }
  .nav__menu a:first-child { border-bottom-color: var(--navy-line); }
}

@media (max-width: 860px) {
  :root { --gutter: 26px; }

  /* Brand has to shrink or it wraps and shoves the burger off the row.
     Sizes for the lockup live with the other .brand rules further down. */
  .site-header .shell { gap: 14px; }
  .header-actions .pill { padding: 10px 16px; font-size: 13px; }
  .nav { max-height: calc(100vh - 76px); }
  .section { padding: 72px 0; }
  .hero__inner { padding: 84px 0 88px; }
  .hero h1 { font-size: 44px; }
  .hero__lede { font-size: 18px; }
  .hero__actions { flex-wrap: wrap; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 26px; margin-bottom: 40px; }
  .section-head h2, .start h2 { font-size: 34px; }
  .script { font-size: 30px; }
  .problem__list { grid-template-columns: minmax(0, 1fr); }
  .card-grid--3, .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .service-row { grid-template-columns: minmax(0, 1fr); }
  .audience-grid { grid-template-columns: minmax(0, 1fr); }
  .audience { padding: 0; }
  .compare { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .compare__arrow { transform: rotate(90deg); padding: 4px 0; }
  .quote-card p { font-size: 23px; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* ==========================================================================
   Resources & Tools
   ========================================================================== */

/* --- Knowledge base / FAQ accordion ------------------------------------- */

.qa { max-width: 820px; margin: 0 auto; }
.qa details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 12px;
  overflow: hidden;
}
.qa details[open] { border-color: #C9D1DA; }
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 54px 20px 24px;
  font-family: Archivo, sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2.4px solid var(--red);
  border-bottom: 2.4px solid var(--red);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.qa summary:hover { color: var(--red); }
.qa .qa__body { padding: 0 24px 22px; }
.qa .qa__body p { color: var(--body); font-size: 16.5px; line-height: 1.62; }
.qa .qa__body p + p { margin-top: 12px; }

/* --- Checklist ---------------------------------------------------------- */

.checklist { max-width: 820px; margin: 0 auto; }
.checklist__group { margin-bottom: 34px; }
.checklist__group h2 {
  font-size: 15px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.checklist label {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 16.5px;
  line-height: 1.5;
}
.checklist label:hover { border-color: #C2CBD4; }
.checklist input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--red);
  flex-shrink: 0;
}
.checklist label span small {
  display: block;
  color: var(--muted);
  font-size: 15px;
  margin-top: 3px;
}
.checklist__score {
  position: sticky;
  bottom: 18px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 14px 32px rgba(15,22,32,.28);
}
.checklist__score b { font-family: Archivo, sans-serif; font-size: 25px; letter-spacing: -0.02em; }

/* --- Tool cards & forms ------------------------------------------------- */

.tool-card {
  max-width: 780px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 34px 36px;
  box-shadow: 0 18px 44px rgba(26,34,46,.07);
}
.tool-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tool-row .field { flex: 1 1 260px; margin-bottom: 0; }

.meter {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 20px 0 10px;
}
.meter__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--red);
  transition: width .25s ease, background-color .25s ease;
}
.verdict { font-family: Archivo, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.verdict small { display: block; font-family: Barlow, sans-serif; font-size: 15.5px; font-weight: 400; color: var(--body); margin-top: 6px; letter-spacing: 0; }

.result { margin-top: 26px; }
.result[hidden] { display: none; }
.result__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.result__row:first-child { border-top: 0; }
.result__badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 2px;
  min-width: 74px;
  text-align: center;
}
.badge--pass { background: #E3F5EA; color: #10693C; }
.badge--warn { background: #FFF2DC; color: #8A5A00; }
.badge--fail { background: var(--red-tint); color: #A5121C; }
.badge--info { background: var(--grey-bg); color: var(--muted); }
.result__row b { font-size: 16.5px; }
.result__row p { font-size: 15.5px; color: var(--body); line-height: 1.55; margin-top: 3px; }
.result__row code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px;
  background: var(--grey-bg);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.big-number {
  font-family: Archivo, sans-serif;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
}
.privacy-note {
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tool-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
}
.tool-tile:hover { border-color: var(--red); }
.tool-tile h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.tool-tile p { font-size: 16px; color: var(--body); line-height: 1.55; }
.tool-tile .link-red { margin-top: auto; padding-top: 12px; }

@media (max-width: 1080px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-card { padding: 26px 22px 28px; }
  .big-number { font-size: 40px; }
}

/* --- Header at six nav items -------------------------------------------- */
/* Solutions · Industries · Resources · Pricing · Company · Tools leaves the
   brand and the CTA fighting for room, and both were wrapping to two lines. */
.pill { white-space: nowrap; }

/* The shell gap and .nav__link padding/letter-spacing used to be relaxed above
   1460px and tightened below it, which is why the row overflowed on 1600px+
   monitors: .site-header .shell is capped at 1360px regardless of viewport, so
   above the breakpoint the nav reverted to roomy spacing and stopped fitting
   the very box it had to fit. The shell never gets wider, so the tight values
   are now the base rules — set with the other header rules above, ahead of the
   media queries, so the drawer's own .nav__link padding still wins. */

/* --- Phone in the header ------------------------------------------------ */

.pill--phone {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 14.5px;
  letter-spacing: .02em;
}
.pill--phone:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }
.pill--phone .pill__icon { width: 16px; height: 16px; }

/* Call and email rows inside the mobile drawer only. */
.nav__call,
.nav__mail { display: none; }

.footer-phone {
  font-family: Archivo, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.footer-phone:hover { color: var(--red-soft); }

@media (max-width: 1260px) {
  /* In the drawer the phone is the most useful thing on the page — give it
     a full-width tap target at the top rather than a pill in the header. */
  .nav__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--red);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 15px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
  }
  .nav__call .pill__icon { width: 18px; height: 18px; }
  .nav__mail {
    display: block;
    margin-top: 14px;
    padding: 14px 4px 0;
    border-top: 1px solid var(--navy-line);
    color: rgba(255,255,255,.78);
    font-size: 15px;
  }
  /* Header keeps a compact icon-only phone button beside the burger. */
  .pill--phone { padding: 11px; }
  .pill--phone .pill__label { display: none; }
  .pill--phone .pill__icon { width: 18px; height: 18px; }
}

/* Touch targets: the compact phone button must still clear 44px. */
@media (max-width: 1260px) {
  .pill--phone { min-width: 44px; min-height: 44px; }
  .nav-burger { min-height: 44px; }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .header-actions { gap: 8px; }
  .header-actions .pill:last-child { padding: 10px 14px; font-size: 12.5px; }
}

@media (max-width: 400px) {
  /* No room for four things. The header phone goes: tapping the burger
     reveals a full-width Call button as the first item, so the number is
     one tap away either way. */
  .pill--phone { display: none; }
}

/* --- Form status + Turnstile -------------------------------------------- */

.cf-turnstile { margin: 4px 0 18px; min-height: 65px; }

.form-status {
  font-size: 15.5px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.form-status[data-kind="ok"]    { background: #E3F5EA; color: #10693C; border: 1px solid #B8E3C9; }
.form-status[data-kind="error"] { background: var(--red-tint); color: #A5121C; border: 1px solid #F5C9CE; }


/* --- Plan cards -------------------------------------------------------- */
/* The cards stretch to equal height already; this pins the price line and the
   button to the bottom so the three read as a row rather than three drifting
   boxes. Buttons go full width so they cannot come out different sizes. */
#plans .card { display: flex; flex-direction: column; }
/* Pin the price line to the bottom of whatever description length precedes
   it, so all three buttons land on the same line. */
.plan__price { margin-top: auto; padding-top: 18px; color: var(--muted); font-size: 15px; }
.plan__cta { margin-top: 16px; }
#plans .card .btn { width: 100%; }

/* The outlined variant is deliberately smaller than the solid one elsewhere,
   but inside the plan row that made the middle CTA 6px taller than its
   neighbours. Match them here only. */
#plans .btn { padding: 15px 28px; font-size: 16px; border-radius: var(--radius-sm); }

/* --- Lead capture inside a tool ----------------------------------------- */

.capture {
  margin-top: 26px;
  padding: 24px 24px 26px;
  border: 1px solid #F5C9CE;
  border-radius: var(--radius);
  background: #FFFAFA;
}
.capture[hidden] { display: none; }
.capture h2 {
  font-family: Archivo, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.capture > p { font-size: 16px; color: var(--body); line-height: 1.55; margin-bottom: 18px; }
.capture__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.capture .cf-turnstile { margin: 16px 0 14px; }
.capture .btn { width: 100%; }

@media (max-width: 620px) { .capture__row { grid-template-columns: minmax(0, 1fr); } }

/* Town-page links under the service-area section. */
.area-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

/* ==========================================================================
   Tools catalogue — light directory-style head and tile grid
   ========================================================================== */

.catalogue-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
.catalogue-head h1 {
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.catalogue-head p {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 620px;
  margin: 0 auto;
}

/* Search card sits in its own bordered panel above the grid. */
.tool-search {
  max-width: 860px;
  margin: 0 auto 52px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 28px rgba(26,34,46,.05);
}
.tool-search__row { display: flex; gap: 14px; }
.tool-search input {
  flex: 1 1 auto;
  font-family: Barlow, sans-serif;
  font-size: 16.5px;
  color: var(--ink);
  border: 1px solid #D6DCE3;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  min-width: 0;
}
.tool-search input::placeholder { color: #A6AEB9; }
.tool-search input:focus { outline: 2px solid rgba(225,29,42,.3); outline-offset: 1px; border-color: var(--red); }
.tool-search__count { font-size: 15px; color: var(--muted); margin-top: 12px; text-align: center; }

.catalogue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.tool-card-tile {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 24px 24px;
}
.tool-card-tile[hidden] { display: none; }
.tool-card-tile:hover { border-color: #C9D1DA; box-shadow: 0 8px 22px rgba(26,34,46,.06); }
.tool-card-tile__chip {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: var(--grey-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.tool-card-tile__chip svg { width: 21px; height: 21px; color: var(--red); }
.tool-card-tile h2 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.tool-card-tile p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 22px;
}
/* Buttons align across a row whatever the description length. */
.tool-card-tile .btn {
  margin-top: auto;
  width: 100%;
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
  font-size: 15px;
}
.tool-card-tile .btn:hover { background: var(--navy-deep); }

.no-results {
  text-align: center;
  padding: 40px 0 0;
  font-size: 17px;
  color: var(--muted);
}
.no-results[hidden] { display: none; }

@media (max-width: 1080px) { .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .catalogue { grid-template-columns: minmax(0, 1fr); }
  .catalogue-head h1 { font-size: 36px; }
  .tool-search__row { flex-direction: column; }
}

/* Visually hidden but available to screen readers. */
.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;
}

/* Back-to-catalogue link on an individual tool page. */
.tool-back { margin-bottom: 18px; }
.tool-back a {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.tool-back a:hover { color: var(--red); }

/* On a tool page the intro block sits directly above the tool, so the
   section's own top padding doubles up with the head's bottom margin. */
.catalogue-head + * , 
#top + .section { padding-top: 24px; }

/* ==========================================================================
   Video testimonials
   ========================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.testimonial { margin: 0; display: flex; flex-direction: column; }

.testimonial__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Unfilled slot: obviously a slot, not a broken video. */
.testimonial[data-empty] .testimonial__video {
  background-image:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(225,29,42,.14), transparent 70%),
    linear-gradient(140deg, #1E2937, #2A3849);
  border: 1px dashed #4A5867;
}

.testimonial__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.testimonial__play svg { width: 26px; height: 26px; margin-left: 3px; }
.testimonial__play:hover:not(:disabled) { transform: scale(1.08); background: var(--red-hover); }
.testimonial__play:disabled {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.45);
  cursor: default;
  box-shadow: none;
}

.testimonial__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  border: 1px dashed rgba(255,255,255,.34);
  border-radius: 4px;
  padding: 4px 9px;
}

/* The loaded player fills the same box the poster occupied. */
.testimonial__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.testimonial figcaption { padding-top: 20px; }
.testimonial blockquote {
  margin: 0 0 12px;
  font-family: Archivo, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink);
}
.testimonial[data-empty] blockquote { color: var(--muted); font-weight: 500; }
.testimonial cite {
  font-style: normal;
  font-size: 15.5px;
  color: var(--muted);
}

@media (max-width: 1080px) { .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .testimonial-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Social icons in the footer ----------------------------------------- */

.social { display: flex; gap: 10px; margin-left: auto; }
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--navy-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-dim);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover { background: var(--red); border-color: var(--red); color: #fff; }

@media (max-width: 860px) {
  .footer-top { flex-wrap: wrap; }
  .social { margin-left: 0; }
}

/* --- Footer: four columns plus a contact block --------------------------- */

.footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.35fr; }

/* The contact block uses the same heading treatment as the link columns so
   the five slots read as one row rather than four plus a card. */
.footer-area h4 {
  font-family: Barlow, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 20px;
}
.footer-area__line { font-size: 15px; line-height: 1.55; margin-top: 8px; }
.footer-area__line a:hover { color: var(--white); }
.footer-area__towns a { color: var(--white); }
.footer-area__towns a:not(:last-child)::after { content: ","; color: var(--on-dark-dim); }
.footer-area__towns a:hover { color: var(--red-soft); }

@media (max-width: 1260px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Social sits on the logo row, pushed to the right: "Follow us" then the
   icons, all on one line with the wordmark and the tagline. */
.social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.social__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  white-space: nowrap;
}
.social__row { display: flex; gap: 10px; }
.social-link { width: 44px; height: 44px; }
.social-link svg { width: 21px; height: 21px; }

/* Six services now, not five — six across at 1440 is too tight, so wrap to
   three and three. */
.service-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-row > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.service-row > div:nth-child(3n) { border-right: 0; }
@media (max-width: 1080px) { .service-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .service-row { grid-template-columns: minmax(0, 1fr); } }

/* --- Client portal ------------------------------------------------------- */

.pill--portal {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 13.5px;
}
.pill--portal:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }
.pill--portal .pill__icon { width: 15px; height: 15px; }

.nav__portal { display: none; }

@media (max-width: 1440px) {
  /* Three actions plus six nav items is a lot of row. The phone keeps its
     number; the portal drops to an icon first, since a client looking for it
     knows what it is. */
  .pill--portal .pill__label { display: none; }
  .pill--portal { padding: 11px; min-width: 44px; min-height: 44px; }
}

@media (max-width: 1260px) {
  .pill--portal { display: none; }
  .nav__portal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--navy-line);
    color: rgba(255,255,255,.9);
    font-weight: 600;
    font-size: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-top: 14px;
  }
  .nav__portal:hover { background: rgba(255,255,255,.07); }
  .nav__portal .pill__icon { width: 18px; height: 18px; }
}

/* ==========================================================================
   Plan comparison matrix
   ========================================================================== */

.matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 20px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--navy-line);
}
.matrix thead th:first-child { width: 44%; }
.matrix__plan {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.matrix__blurb {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--on-dark-dim);
  margin-top: 5px;
  max-width: 190px;
}

/* Group headers break the table into readable chunks. */
.matrix__group th {
  background: var(--grey-bg);
  font-family: Barlow, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.matrix tbody th[scope="row"] {
  font-weight: 500;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.matrix__label { display: block; font-size: 16.5px; color: var(--ink); }
.matrix__note { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }

.matrix td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
  width: 18.6%;
}
.matrix__tick { width: 20px; height: 20px; color: #1E8E52; }
.matrix__dash { color: #C2CBD4; font-size: 18px; }
.matrix__text { font-size: 15.5px; color: var(--body); }

/* The recommended tier gets a tinted column so the eye lands on it. */
.matrix thead th:nth-child(3) { background: var(--red); }
.matrix tbody tr:not(.matrix__group) td:nth-child(3) { background: #FFF7F8; }

.matrix tbody tr:not(.matrix__group):hover th,
.matrix tbody tr:not(.matrix__group):hover td { background: #FAFBFC; }
.matrix tbody tr:not(.matrix__group):hover td:nth-child(3) { background: #FFF1F3; }

.matrix__foot {
  font-size: 16px;
  color: var(--body);
  line-height: 1.6;
  text-align: center;
  max-width: 640px;
  margin: 26px auto 0;
}

@media (max-width: 860px) {
  .matrix-wrap { border-radius: var(--radius); }
  .matrix thead th { padding: 16px 12px; }
  .matrix__plan { font-size: 17px; }
  .matrix__blurb { display: none; }
  .matrix tbody th[scope="row"], .matrix td { padding: 13px 12px; }
}


/* --- Brand lockup ------------------------------------------------------- */
/* The supplied artwork is a horizontal lockup at 3.79:1. Reproduced whole in
   an 84px header it would set "TECHNOLOGIES" at ~5px tall, so the strap is
   live text instead and only the emblem and "ORBITPOINT" come in as pixels.
   Each letter-spacing below was solved in the browser so the strap's painted
   glyphs span exactly the wordmark's width at that breakpoint (matched to
   under 0.05px). They are not round numbers and should not be tidied into
   any: if you change a .brand__wordmark width or the font, re-solve them.
   Do NOT add a negative margin-right to "pull back" the trailing letter-space
   — .brand__word2 is a block, so a negative margin widens its box instead and
   pushes the strap past the wordmark by exactly that amount. */
.brand__word2 {
  display: block;
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.588em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-top: 5px;
  white-space: nowrap;
}
.site-footer .brand__word2 { color: rgba(255,255,255,.55); }

@media (max-width: 900px) {
  .brand__emblem { width: 38px; }
  .brand__wordmark { width: 136px; }
  .brand__word2 { font-size: 9px; letter-spacing: 0.593em; }
  .brand__lockup { width: 215px; }
}
@media (max-width: 480px) {
  .brand { gap: 9px; }
  .brand__emblem { width: 33px; }
  .brand__wordmark { width: 116px; }
  .brand__word2 { font-size: 7.6px; letter-spacing: 0.606em; margin-top: 4px; }
  .brand__lockup { width: 185px; }
}
@media (max-width: 400px) {
  .brand__emblem { width: 30px; }
  .brand__wordmark { width: 104px; }
  .brand__word2 { font-size: 6.8px; letter-spacing: 0.608em; }
  .brand__lockup { width: 165px; }
}

/* --- Long-form legal pages ---------------------------------------------- */
/* Privacy and Security are read, not skimmed like the marketing pages, so they
   get a narrower measure than .shell and real spacing between ideas. Shared by
   privacy.html and security.html; nothing else uses it. */
.legal {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
}
.legal h2 {
  font-size: 22px;
  color: var(--ink);
  margin: 44px 0 14px;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--red); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal__updated {
  font-size: 14.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 36px;
}
/* The one thing on these pages a visitor should be able to find without
   reading: a plain-language summary before the detail. */
.legal__summary {
  background: var(--grey-bg);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 24px 26px;
  margin-bottom: 40px;
}
.legal__summary p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .legal { font-size: 16.5px; }
  .legal h2 { font-size: 20px; margin-top: 36px; }
  .legal__summary { padding: 20px 20px; }
}