/* ==========================================================================
   PINHAN GROUP — low orbit
   The planet seen at night from a few hundred kilometres up: deep space,
   the ion blue of the atmosphere on the limb, and the brass of city lights
   and of the mark. The live Earth in the home page hero is the one loud
   thing; everything else is hairlines, glass and plain type.
   ========================================================================== */

/* ------------------------------- fonts ---------------------------------- */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/unbounded-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/plexsans-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/plexsans-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------- tokens --------------------------------- */
:root {
  /* space, and the hulls that float in it */
  --space: #050b16; /* page */
  --space-2: #03070f; /* footer, the deepest band */
  --hull: #0a1524; /* raised surfaces: cards, tables */
  --hull-2: #0f1d31; /* hover and header rows */
  --line: #15263b; /* hairlines between things */
  --line-2: #22384f;
  --line-ion: rgba(142, 42, 74, 0.45); /* outlines that should read as lit */

  /* the atmosphere on the limb: the accent, actions, live things */
  --ion: #8e2a4a;
  --ion-lt: #d46a8c;
  --ion-wash: rgba(142, 42, 74, 0.12);
  --ion-ink: #fdf2f5; /* text on an ion button */

  /* city lights and the mark: traffic, and the odd warm highlight */
  --brass: #ffbf73;
  --brass-mark: #d9b27a; /* the lockup, matched to the metal of the logo */

  --paper: #eef5fa; /* headings */
  --text: #b6c4d4; /* body copy */
  --text-2: #8195ab; /* secondary copy, labels */

  --signal: #6ee7b7; /* delivered / available */
  --signal-wash: rgba(110, 231, 183, 0.07);
  --signal-line: rgba(110, 231, 183, 0.3);
  --alert-wash: rgba(255, 120, 130, 0.08);
  --alert-line: rgba(255, 120, 130, 0.4);
  --code-bg: #030810;
  --code-text: #d6e6f5;
  --code-muted: #8195ab;

  /* a wide display face for headlines and the lockup, a plain one for reading */
  --disp: "Unbounded", "Arial Black", sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --navh: clamp(66px, 7vw, 82px);
  /* the only side margin: content runs the full width, this far from each edge */
  --gut: clamp(20px, 3.6vw, 56px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --r: 18px; /* large surfaces */
  --r-s: 10px; /* controls and small surfaces */
}

/* -------------------------------- base ---------------------------------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--space);
}

body {
  margin: 0;
  background: var(--space);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* the office block is data, not an aside */
address {
  font-style: normal;
}

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

::selection {
  background: var(--ion);
  color: var(--ion-ink);
}

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

.wrap {
  width: 100%;
  padding: 0 var(--gut);
}

[id] {
  scroll-margin-top: calc(var(--navh) + 14px);
}

/* for screen readers only: the text a glyph stands for */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Line icons from /assets/icons.svg. They draw with currentColor, so an icon
   takes the colour of whatever it sits in. */
.i {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------- sections ------------------------------- */
.sect {
  padding: clamp(60px, 7vw, 104px) 0;
}

/* a band set slightly apart from the one above it */
.sect.tint {
  background: linear-gradient(180deg, var(--ion-wash), transparent);
}

.sect.edge {
  border-top: 1px solid var(--line);
}

/* ------------------------------ typography ------------------------------ */
h1,
h2 {
  margin: 0;
  color: var(--paper);
  font-family: var(--disp);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h3,
h4 {
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
}

h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
}

p {
  margin: 0 0 1.05em;
}

.lede {
  font-size: clamp(1.04rem, 1.35vw, 1.17rem);
  color: var(--text);
  line-height: 1.6;
  max-width: 60ch;
}

.muted {
  color: var(--text-2);
}

.small {
  font-size: 14.5px;
  line-height: 1.55;
}

.note {
  font-size: 13.5px;
  color: var(--text-2);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

strong {
  font-weight: 600;
  color: var(--paper);
}

/* which part of the site this is: a lit dot and a few plain words */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ion);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ion);
  box-shadow: 0 0 12px var(--ion);
}

/* -------------------------- section headings ----------------------------
   The heading on the left and a short note on the right: what the section
   is, then why it matters. */
.sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36ch);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 4.4vw, 58px);
}

.sechead .sub {
  margin: 14px 0 0;
  color: var(--text-2);
}

.sechead .aside {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid var(--line-ion);
  font-size: 15px;
  color: var(--text-2);
}

/* the simpler heading the inner pages use: title, then a lede under it */
.opener {
  display: grid;
  gap: 16px;
  max-width: 74ch;
  margin-bottom: clamp(30px, 4vw, 48px);
}

/* -------------------------------- header -------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s var(--ease),
    border-color 0.35s,
    backdrop-filter 0.35s;
}

header.stuck,
body.navopen header {
  background: color-mix(in srgb, var(--space) 80%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  height: var(--navh);
  padding: 0 var(--gut);
}

/* The lockup as drawn on the original: the name, a rule broken by GROUP, then
   the strapline. PINHAN is the widest line; the rule measures itself against it. */
.lock {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lock img {
  width: clamp(42px, 4.4vw, 60px);
  height: auto;
  flex: 0 0 auto;
}

.lock .bt {
  display: grid;
  line-height: 1;
  justify-items: stretch;
}

.lock .bn {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-align: center;
  color: var(--brass-mark);
}

.lock .bg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}

.lock .bg i {
  flex: 1 1 auto;
  height: 1px;
  background: var(--brass-mark);
  opacity: 0.7;
}

.lock .bg em {
  font-family: var(--disp);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(7.5px, 0.7vw, 8.5px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--brass-mark);
  flex: 0 0 auto;
}

.lock .bs {
  margin-top: 6px;
  font-size: clamp(6.5px, 0.58vw, 7.2px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.brand {
  flex: 0 0 auto;
  margin-right: auto;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

.navlinks a {
  position: relative;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.25s;
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ion);
  box-shadow: 0 0 8px var(--ion);
  opacity: 0;
  transition: opacity 0.25s;
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  color: var(--paper);
}

.navlinks a:hover::after,
.navlinks a[aria-current="page"]::after {
  opacity: 1;
}

/* --------------------------- services dropdown ---------------------------
   Opens on hover and on keyboard focus, so it works without JavaScript and
   without a mouse. On the mobile panel it is always open: there is nothing to
   hover on a touch screen, and a nested tap target would only hide links. */
.hasmenu {
  position: relative;
}

.menubtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.25s;
}

.menubtn::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.hasmenu:hover .menubtn,
.hasmenu:focus-within .menubtn {
  color: var(--paper);
}

.hasmenu:hover .menubtn::after,
.hasmenu:focus-within .menubtn::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.menu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 280px;
  padding: 8px;
  background: color-mix(in srgb, var(--hull) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    visibility 0.25s;
}

.hasmenu:hover .menu,
.hasmenu:focus-within .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* a gap between the button and the panel would drop the hover mid-travel */
.menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.navlinks .menu a {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border-radius: var(--r-s);
  font-weight: 600;
  color: var(--paper);
  transition: background 0.2s;
}

.navlinks .menu a::after {
  display: none;
}

.navlinks .menu a em {
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-2);
}

.navlinks .menu a:hover,
.navlinks .menu a[aria-current="page"] {
  background: var(--hull-2);
}

.navlinks .menu a[aria-current="page"] span {
  color: var(--ion);
}

/* the quote link is an action, not another destination: it reads as a button */
.navlinks .navcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 9px 16px;
  border: 1px solid var(--line-ion);
  border-radius: var(--r-s);
  color: var(--ion-lt);
  font-weight: 600;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.navlinks .navcta::after {
  display: none;
}

.navlinks .navcta:hover {
  background: var(--ion);
  border-color: var(--ion);
  color: var(--ion-ink);
}

/* holds only the burger, so it takes no room (and no flex gap) until phones */
.navend {
  display: none;
  align-items: center;
  flex: 0 0 auto;
}

.burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.burger i {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--paper);
  transition:
    top 0.3s var(--ease),
    transform 0.3s var(--ease),
    opacity 0.2s;
}

.burger i:nth-child(1) {
  top: 15px;
}

.burger i:nth-child(2) {
  top: 20px;
}

.burger i:nth-child(3) {
  top: 25px;
}

body.navopen .burger i:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}

body.navopen .burger i:nth-child(2) {
  opacity: 0;
}

body.navopen .burger i:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}

/* -------------------------------- buttons ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    box-shadow 0.3s;
}

.btn .i {
  font-size: 17px;
  transition: transform 0.3s var(--ease);
}

.btn:hover .i {
  transform: translateX(4px);
}

/* the one primary action on any screen */
.btn.primary {
  background: var(--ion);
  color: var(--ion-ink);
}

.btn.primary:hover {
  background: var(--ion-lt);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ion) 14%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--ion) 70%, transparent);
}

.btn.ghost {
  border-color: var(--line-2);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.02);
}

.btn.ghost:hover {
  border-color: var(--ion);
  color: var(--ion-lt);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* --------------------------------- hero ---------------------------------
   The Earth from low orbit, rising from the bottom right. The rendered still
   is the background; the live globe (earth.js) is drawn on the canvas over
   it and fades in once its first frame is up, so nothing jumps. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: max(640px, 100svh);
  display: flex;
  align-items: center;
  padding: calc(var(--navh) + 40px) 0 160px;
  background: var(--space) url(/assets/img/earth-hero-wine.webp) right bottom / cover no-repeat;
}

.earth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.hero.live .earth {
  opacity: 1;
}

/* a shade behind the copy, so the arcs crossing it never cut the words */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--space) 85%, transparent) 0%, color-mix(in srgb, var(--space) 45%, transparent) 38%, transparent 58%);
}

.heroin {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 15ch;
}

.hero .lede {
  margin-top: 26px;
  max-width: 46ch;
}

.hero .btnrow {
  margin-top: 34px;
}

/* what we move, in four words, under the buttons */
.herolinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.herolinks a {
  color: var(--text-2);
  border-bottom: 1px solid transparent;
  transition:
    color 0.25s,
    border-color 0.25s;
}

.herolinks a:hover {
  color: var(--ion-lt);
  border-bottom-color: var(--line-ion);
}

/* ------------------------------- ribbon ---------------------------------
   The four numbers, on a pane of glass laid over the bottom of the hero so
   the planet shows through. */
.ribbon {
  position: relative;
  z-index: 3;
  margin-top: -110px;
  padding: 0 var(--gut);
}

.ribbon .in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--hull) 62%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}

.ribbon .cell {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 32px);
  border-right: 1px solid var(--line);
}

.ribbon .cell:last-child {
  border-right: 0;
}

.ribbon .cell > .i {
  font-size: 30px;
  color: var(--ion);
  stroke-width: 1.4;
}

.ribbon .v {
  font-family: var(--disp);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--paper);
}

.ribbon .k {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
  max-width: 20ch;
}

/* ------------------------------- services ------------------------------- */
.svcgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.svcgrid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svc {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--hull);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.35s;
}

.svc:hover {
  border-color: var(--line-ion);
}

/* the rendered picture runs to the card's edges and fades into it */
.svc .art {
  width: calc(100% + 2 * clamp(24px, 2.6vw, 34px));
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: calc(-1 * clamp(24px, 2.6vw, 34px)) calc(-1 * clamp(24px, 2.6vw, 34px)) 4px;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
  transition: transform 0.8s var(--ease);
}

.svc:hover .art {
  transform: scale(1.03);
}

.svc .ic {
  /* some cards draw their own inline icon without .i, so size it here too */
  width: 1em;
  height: 1em;
  font-size: 30px;
  color: var(--ion);
  margin-bottom: 18px;
  stroke-width: 1.4;
}

.svc .art + .ic {
  position: relative;
  margin-top: -28px;
}

.svc h3 {
  margin-bottom: 6px;
  font-size: 1.35rem;
}

.svc .tag {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--text-2);
}

/* the inner pages keep a paragraph and plain bullets in their service cards */
.svc p {
  font-size: 15.5px;
  color: var(--text);
}

.svc ul {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.svc li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}

.svc ul:not(.ticks) li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ion);
}

.ticks .i {
  font-size: 17px;
  margin-top: 1px;
  color: var(--ion);
}

.svc .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--ion-lt);
}

.svc .go .i,
.svc .go svg {
  font-size: 17px;
  transition: transform 0.3s var(--ease);
}

.svc:hover .go .i,
.svc:hover .go svg {
  transform: translateX(5px);
}

/* ------------------------------- coverage ------------------------------- */
.coverage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.mapfig {
  position: relative;
  aspect-ratio: 2.4 / 1;
  /* the map runs off the right edge of the page, as a map of the world should */
  margin-right: calc(var(--gut) * -1);
}

.mapfig canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* -------------------------------- tables -------------------------------- */
.tablewrap {
  /* positioned, so screen-reader-only text in a cell stays inside the scroller
     instead of hanging off the page and widening it on phones */
  position: relative;
  overflow-x: auto;
  background: var(--hull);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

table.data {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

table.data th {
  padding: 15px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--hull-2);
  border-bottom: 1px solid var(--line-2);
}

table.data td {
  padding: 14px 16px;
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

table.data tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr:hover td {
  background: var(--ion-wash);
}

table.data td:first-child {
  font-weight: 600;
  color: var(--paper);
}

table.data .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.data .mid {
  text-align: center;
}

table.data .ok {
  font-weight: 600;
  color: var(--signal);
}

table.data .yes {
  font-size: 18px;
  color: var(--ion);
  stroke-width: 2;
  vertical-align: middle;
}

/* -------------------------------- reasons -------------------------------
   Claims. On the inner pages, cards with a short label; on the home page
   (.icons) an open grid of icon, heading and paragraph under a hairline. */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.reason {
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--hull);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.reason .n {
  font-size: 13px;
  font-weight: 600;
  color: var(--brass);
}

.reason h3 {
  margin: 12px 0 8px;
  font-size: 1.12rem;
}

.reason p {
  margin: 0;
  font-size: 15px;
  color: var(--text-2);
}

.reasons.icons {
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(34px, 4vw, 52px);
}

.reasons.icons .reason {
  padding: 26px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
}

.reasons.icons .reason > .i {
  font-size: 30px;
  color: var(--ion);
  stroke-width: 1.4;
}

.reasons.icons h3 {
  margin-top: 18px;
}

/* --------------------------------- flow ---------------------------------
   The four onboarding steps: a sequence, so they are numbered and strung on
   one line. site.js fills the line (--progress) and lights each step (.lit)
   as the section scrolls by; without it, the whole line is lit. */
.flow {
  --progress: 1;
  counter-reset: step;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow.tracked {
  --progress: 0;
}

.flow::before,
.flow::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 23px;
  height: 1px;
}

.flow::before {
  right: 0;
  background: var(--line-2);
}

.flow::after {
  width: calc((100% - 23px) * var(--progress));
  background: linear-gradient(90deg, var(--ion), var(--brass));
  box-shadow: 0 0 10px color-mix(in srgb, var(--ion) 60%, transparent);
}

.flow li {
  counter-increment: step;
  position: relative;
  z-index: 1;
}

.flow li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 500;
  color: var(--ion);
  background: var(--space);
  border: 1px solid var(--line-ion);
  border-radius: 50%;
  transition:
    background 0.4s,
    color 0.4s,
    box-shadow 0.4s;
}

.flow:not(.tracked) li::before,
.flow li.lit::before {
  background: var(--ion);
  color: var(--ion-ink);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ion) 45%, transparent);
}

.flow li > .i {
  position: absolute;
  top: 12px;
  left: 62px;
  font-size: 22px;
  padding: 0 8px;
  color: var(--text-2);
  background: var(--space);
  box-sizing: content-box;
}

.flow h3 {
  margin: 0 0 8px;
  font-size: 1.04rem;
}

.flow p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-2);
}

/* the inner pages' vertical step list */
.steps {
  counter-reset: s;
  display: grid;
}

.step {
  counter-increment: s;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--line);
}

.step:last-child {
  border-bottom: 1px solid var(--line);
}

.step::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 500;
  color: var(--ion);
  border: 1px solid var(--line-ion);
  border-radius: 50%;
}

.step h3 {
  margin-bottom: 7px;
  font-size: 1.1rem;
}

.step p {
  margin: 0;
  max-width: 64ch;
  font-size: 15.5px;
  color: var(--text-2);
}

/* ---------------------------------- FAQ --------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 22px 42px 22px 0;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--paper);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-right: 1.6px solid var(--ion);
  border-bottom: 1.6px solid var(--ion);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  top: 34px;
  transform: rotate(225deg);
}

.faq .ans {
  max-width: 74ch;
  padding: 0 0 24px;
  color: var(--text);
}

/* ---------------------------------- CTA ---------------------------------
   A wide band over the planet's limb; the copy sits on the dark left side. */
.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: calc(var(--r) + 4px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--space) 94%, transparent) 0%, color-mix(in srgb, var(--space) 70%, transparent) 50%, color-mix(in srgb, var(--space) 10%, transparent) 80%),
    var(--space) url(/assets/img/earth-band-wine.webp) 5% 72% / max(140%, 900px) auto no-repeat;
}

.cta .in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: clamp(36px, 5vw, 72px);
}

.cta h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  line-height: 1.18;
}

.cta p {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--text);
}

.cta .btnrow {
  justify-content: flex-end;
}

.ctaact {
  display: grid;
  justify-items: end;
  gap: 16px;
}

.maillink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--paper);
  transition: color 0.25s;
}

.maillink .i {
  font-size: 18px;
  color: var(--ion);
}

.maillink:hover {
  color: var(--ion-lt);
}

/* --------------------------------- footer ------------------------------- */
footer {
  padding: clamp(50px, 6vw, 80px) 0 28px;
  background: var(--space-2);
  border-top: 1px solid var(--line);
}

.fgrid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(26px, 3vw, 50px);
}

.fbrand .lock {
  margin-bottom: 20px;
}

.fbrand .lock img {
  width: 68px;
}

.fbrand p {
  max-width: 36ch;
  margin: 0;
  font-size: 14.5px;
  color: var(--text-2);
}

footer h4 {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}

footer ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

footer li a,
footer address a {
  font-size: 14.5px;
  color: var(--text);
  transition: color 0.25s;
}

footer li a:hover,
footer address a:hover {
  color: var(--ion-lt);
}

footer address {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text);
}

.office-line {
  display: flex;
  gap: 12px;
}

.office-line > .i {
  font-size: 20px;
  margin-top: 3px;
  color: var(--ion);
}

.social {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}

.social a {
  color: var(--text);
  transition: color 0.25s;
}

.social a:hover {
  color: var(--ion-lt);
}

.social .i {
  font-size: 20px;
}

.fbot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-2);
}

.fbot nav {
  display: flex;
  gap: 22px;
}

.fbot a:hover {
  color: var(--ion-lt);
}

/* ------------------------------ inner pages -----------------------------
   The banner at the top of every page but the home page: the same planet,
   further off, low on the right. */
.pagehead {
  position: relative;
  overflow: hidden;
  padding: calc(var(--navh) + clamp(48px, 7vw, 100px)) 0 clamp(52px, 6.4vw, 92px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--space) 95%, transparent) 0%, color-mix(in srgb, var(--space) 60%, transparent) 50%, color-mix(in srgb, var(--space) 15%, transparent) 80%),
    var(--space) url(/assets/img/earth-band-wine.webp) 5% 80% / max(140%, 900px) auto no-repeat;
}

.pagehead .wrap {
  position: relative;
  z-index: 2;
}

.pagehead h1 {
  max-width: 16ch;
}

.pagehead .lede {
  margin-top: 22px;
}

.pagehead .btnrow {
  margin-top: 30px;
}

.crumb {
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--text-2);
}

.crumb a:hover {
  color: var(--ion-lt);
}

/* --------------------------------- blocks ------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: start;
}

.stack {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.card {
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--hull);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.card.wash {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ion) 9%, transparent), color-mix(in srgb, var(--ion) 2%, transparent));
  border-color: var(--line-ion);
}

.card.sig {
  background: var(--signal-wash);
  border-color: var(--signal-line);
}

.kv {
  display: grid;
}

.kv div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}

.kv div:last-child {
  border-bottom: 0;
}

.kv dt {
  margin: 0;
  color: var(--text-2);
}

.kv dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--paper);
}

.kv dd.ok {
  color: var(--signal);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line-ion);
  border-radius: 999px;
  color: var(--ion-lt);
}

.pill.sig {
  border-color: var(--signal-line);
  color: var(--signal);
}

.hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line);
}

/* the sister brand: a band that reads as a doorway out, not another service card */
.sister {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line-ion);
  border-radius: calc(var(--r) + 4px);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ion) 14%, transparent), transparent 55%),
    var(--hull);
}

.sister h2 {
  margin: 18px 0 14px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.sister p {
  max-width: 56ch;
  margin: 0;
}

.sisterfig {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin: 26px 0 28px;
}

.sisterfig div {
  display: grid;
}

.sisterfig dt {
  font-family: var(--disp);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1;
  color: var(--paper);
}

.sisterfig dd {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-2);
}

.sisternote {
  align-self: end;
  max-width: 34ch;
  padding-left: 18px;
  font-size: 14.5px;
  color: var(--text-2);
  border-left: 1px solid var(--line-ion);
}

/* --------------------------------- forms -------------------------------- */
.form {
  display: grid;
  gap: 16px;
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}

label .opt {
  margin-left: 5px;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-2);
}

input,
select,
textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 15.5px;
  color: var(--paper);
  background: var(--hull);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-2);
  opacity: 0.8;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ion);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ion) 14%, transparent);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

/* the challenge sits just above the button */
.cf-turnstile {
  margin: 2px 0 4px;
}

/* the honeypot must be reachable by bots but invisible and unfocusable to people */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------- legal -------------------------------- */
.prose {
  max-width: 74ch;
}

.prose h2 {
  margin: 46px 0 14px;
  font-size: 1.35rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 20px;
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  color: var(--ion-lt);
  text-decoration: underline;
  text-decoration-color: var(--line-ion);
  text-underline-offset: 3px;
}

/* --------------------------------- motion --------------------------------
   Blocks come up out of the dark as they reach the screen: a fade, no slide.
   The hero globe and the onboarding line are the only things that move. */
.rv {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.rv.on {
  opacity: 1;
}

.rv.d1 {
  transition-delay: 0.08s;
}

.rv.d2 {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rv {
    opacity: 1;
  }
}

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 1100px) {
  .svcgrid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* minmax(0, …) lets the table scroll inside its box instead of widening the page */
  .coverage {
    grid-template-columns: minmax(0, 1fr);
  }

  .mapfig {
    max-width: 720px;
    margin-right: 0;
  }

  .fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 960px) {
  /* the planet sinks under the copy; the shade keeps the words readable */
  .hero {
    align-items: flex-start;
    background-position: 60% bottom;
  }

  .hero::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--space) 70%, transparent) 0%, color-mix(in srgb, var(--space) 35%, transparent) 55%, transparent 80%);
  }

  .ribbon .in {
    grid-template-columns: 1fr 1fr;
  }

  .ribbon .cell:nth-child(2) {
    border-right: 0;
  }

  .ribbon .cell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .sechead {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cta .in {
    grid-template-columns: 1fr;
  }

  .ctaact {
    justify-items: start;
  }

  .cta .btnrow {
    justify-content: flex-start;
  }

  /* the line turns to run down the left of the steps */
  .flow {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  .flow::before,
  .flow::after {
    top: 23px;
    left: 23px;
    width: 1px;
    height: auto;
  }

  .flow::before {
    right: auto;
    bottom: 0;
  }

  .flow::after {
    height: calc((100% - 23px) * var(--progress));
    background: linear-gradient(180deg, var(--ion), var(--brass));
  }

  .flow li {
    padding-left: 70px;
  }

  .flow li::before {
    position: absolute;
    top: 0;
    left: 0;
  }

  .flow li > .i {
    position: static;
    display: block;
    padding: 0;
    margin: 12px 0 10px;
    background: none;
  }
}

@media (max-width: 860px) {
  .svcgrid,
  .svcgrid.three {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .sister {
    grid-template-columns: 1fr;
  }

  .sisternote {
    max-width: none;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-ion);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .navend {
    display: flex;
  }

  .burger {
    display: block;
  }

  .navlinks {
    position: fixed;
    inset: var(--navh) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--navh));
    overflow: auto;
    padding: 8px var(--gut) 26px;
    background: var(--space);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.3s var(--ease),
      transform 0.3s var(--ease),
      visibility 0.3s;
  }

  body.navopen .navlinks {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .navlinks a {
    padding: 16px 2px;
    font-size: 16.5px;
    color: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .navlinks a::after {
    display: none;
  }

  .navlinks a[aria-current="page"] {
    color: var(--ion);
  }

  /* no hover on touch: the group is simply always open, indented under a label */
  .hasmenu {
    position: static;
  }

  .menubtn {
    width: 100%;
    justify-content: space-between;
    padding: 18px 2px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    pointer-events: none;
  }

  .menubtn::after {
    display: none;
  }

  .menu {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .menu::before {
    display: none;
  }

  .navlinks .menu a {
    padding: 16px 2px 16px 14px;
    font-weight: 500;
    font-size: 16.5px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .navlinks .menu a em {
    display: none;
  }

  .navlinks .menu a:hover,
  .navlinks .menu a[aria-current="page"] {
    background: none;
  }

  .navlinks .navcta {
    justify-content: center;
    margin: 18px 0 0;
    padding: 13px 18px;
    background: var(--ion);
    border-color: var(--ion);
    color: var(--ion-ink);
  }

  .hero {
    min-height: 760px;
    padding-bottom: 300px;
  }

  /* the menu already lists these; under the buttons they would sit on the planet */
  .herolinks {
    display: none;
  }

  .ribbon {
    margin-top: -150px;
  }

  .reasons {
    grid-template-columns: 1fr;
  }

  .fgrid {
    grid-template-columns: 1fr;
  }

  .row2 {
    grid-template-columns: 1fr;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  /* two by two still fits a phone once the icons step aside */
  .ribbon .cell > .i {
    display: none;
  }

  .brand .bs {
    display: none;
  }
}

/* ------------------------------ components -------------------------------
   Small pieces that used to be styled inline, page by page. */

/* continues the section above */
.sect.flush {
  padding-top: 0;
}

.sect.snug {
  padding-top: clamp(30px, 4vw, 54px);
}

.checklist {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}

.checklist.loose {
  line-height: 1.85;
}

.checklist li::marker {
  color: var(--ion);
}

.card.code {
  background: var(--code-bg);
  border-color: var(--line-2);
}

.card.code pre {
  margin: 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.75;
  color: var(--code-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.code-caption {
  color: var(--code-muted);
  margin-bottom: 14px;
}

.card.alert {
  border-color: var(--alert-line);
  background: var(--alert-wash);
}

.office {
  font-size: 15.5px;
  line-height: 1.8;
}

.mail {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
}

.mail a {
  color: var(--ion-lt);
}

/* -------------------------------- spacing --------------------------------
   One-off gaps between blocks. Last in the file so they win over the
   component defaults above without needing !important. */
.mt-6 {
  margin-top: 6px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-14 {
  margin-top: 14px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-26 {
  margin-top: 26px;
}

.mt-28 {
  margin-top: 28px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-6 {
  margin-bottom: 6px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-26 {
  margin-bottom: 26px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}