/* =============================================================
   LABS ON CALL, Design System v3
   Editorial, not templated. No monospace anywhere.
   Tiers: 375 · 768 · 1024 · 1440 · 1920+
   ============================================================= */

:root {
  /* Brand */
  --navy-900: #0F1A2E;
  --navy-800: #16233D;
  --navy: #1D2D50;
  --navy-600: #2A3F6B;
  --navy-400: #55688F;

  --teal: #3AA99A;
  --teal-600: #2C8377;
  --teal-700: #226A60;
  --teal-300: #7FCCC0;
  --teal-100: #E4F4F1;

  --blue: #3A8FB5;
  --ice: #8EC5FF;
  --slate: #6C7C93;
  --slate-300: #AAB6C5;

  --paper: #FDFEFB;
  --mist: #F5F8FB;
  --mist-200: #E4EBF3;
  --ink: #0E1621;
  --ink-600: #3C4A63;

  --warn: #B4623A;
  --warn-100: #F7EAE2;

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-600);
  --text-on-deep: rgba(253, 254, 251, 0.94);
  --text-on-deep-muted: rgba(253, 254, 251, 0.70);
  --line: rgba(29, 45, 80, 0.11);
  --line-strong: rgba(29, 45, 80, 0.20);
  --line-deep: rgba(253, 254, 251, 0.16);

  /* Type */
  --f-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  /* Public Sans, the US design system face. Chosen over Inter, which is the
     default of most modern software sites and reads as generic; this keeps the
     same neutral, highly legible register while being far less common. */
  --f-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-hero: clamp(2.5rem, 1.45rem + 4.4vw, 5.5rem);
  --t-h1: clamp(2.1rem, 1.4rem + 3vw, 4.15rem);
  --t-h2: clamp(1.55rem, 1.2rem + 1.35vw, 2.35rem);
  --t-h3: clamp(1.2rem, 1.06rem + 0.66vw, 1.6rem);
  --t-lead: clamp(1rem, 0.96rem + 0.24vw, 1.15rem);
  --t-body: 1rem;
  --t-sm: 0.925rem;
  --t-xs: 0.8rem;

  /* Space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;
  --section-y: clamp(3.75rem, 2rem + 6.4vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 4.25rem);
  --maxw: 1240px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px -3px rgba(15, 26, 46, 0.10);
  --shadow-md: 0 16px 38px -22px rgba(15, 26, 46, 0.34);
  --shadow-lg: 0 38px 78px -38px rgba(15, 26, 46, 0.46);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 160ms; --d-mid: 260ms; --d-slow: 440ms;

  --header-h: 62px;
}

@media (min-width: 1024px) { :root { --header-h: 80px; } }
@media (min-width: 1600px) { :root { --maxw: 1380px; } }
@media (min-width: 1920px) { :root { --maxw: 1500px; --gutter: 5rem; } }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.021em;
  color: var(--navy);
  margin: 0 0 0.42em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
/* Looser than h1: 1.07 is display leading and squeezes a 2-3 line h2 */
h2 { font-size: var(--t-h2); line-height: 1.16; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.012em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

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

/* =============================================================
   Layout
   ============================================================= */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 940px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--alt { background: var(--mist); }
.section--deep { background: var(--navy); color: var(--text-on-deep); }
.section--deep h2, .section--deep h3, .section--deep h4 { color: var(--paper); }
.section--deep p { color: var(--text-on-deep-muted); }

.lede { font-size: var(--t-lead); line-height: 1.56; color: var(--text-muted); max-width: 56ch; }
.section--deep .lede { color: var(--text-on-deep-muted); }
.measure { max-width: 64ch; }

/* Section heading block. */
.shead { max-width: 52ch; margin-bottom: clamp(2.25rem, 1rem + 3.4vw, 4rem); }
.shead .lede { margin-top: var(--s-6); }
.shead--wide { max-width: 66ch; }

/* Section label.
   A label above a heading is the most recognisable piece of marketing-site
   furniture there is, and the reason is always the same execution: small
   uppercase sans, tracked wide, set in the accent colour. This inverts that.
   The accent lives in the rule; the word itself is the display serif in
   italic, at reading size, in sentence case. Georgia italic is doing the
   labelling, which is the one thing a template never reaches for.

   Its job is orientation, so it names the subject the section covers and
   never restates the heading underneath it. */
.slabel {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 var(--s-4);
  font-family: var(--f-display); font-style: italic;
  font-size: 1.02rem; line-height: 1.3;
  color: var(--teal-700);
}
.slabel::before {
  content: ""; flex: none;
  width: 2.25rem; height: 2px;
  background: var(--teal);
}
.section--deep .slabel { color: var(--teal-300); }
.section--deep .slabel::before { background: var(--teal-300); }

/* Grids */
.grid { display: grid; gap: var(--s-6); }
.g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 4.5rem); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: clamp(2.25rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-l { grid-template-columns: 1.18fr 0.82fr; }
  .split--wide-r { grid-template-columns: 0.82fr 1.18fr; }
  .split--top { align-items: start; }
}

/* =============================================================
   Buttons
   ============================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.004em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease),
              box-shadow var(--d-mid) var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn .ic { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--d-mid) var(--ease); }
.btn:hover .ic { transform: translateX(3px); }

.btn--primary { background: var(--teal); color: #06231F; }
.btn--primary:hover { background: var(--teal-300); box-shadow: 0 12px 28px -14px rgba(58,169,154,.9); }

.btn--navy { background: var(--navy); color: var(--paper); }
.btn--navy:hover { background: var(--navy-600); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); background: rgba(29,45,80,.045); }

/* Ghost buttons sitting on any dark surface must invert.
   (Previously the phone number rendered navy-on-navy and vanished.) */
.section--deep .btn--ghost,
.cta .btn--ghost,
.hero--framed .btn--ghost {
  color: var(--paper);
  border-color: rgba(253,254,251,.42);
}
.section--deep .btn--ghost:hover,
.cta .btn--ghost:hover,
.hero--framed .btn--ghost:hover {
  border-color: var(--paper);
  background: rgba(253,254,251,.12);
  color: var(--paper);
}

.btn--sm { min-height: 44px; padding: .55em 1.15em; font-size: .875rem; }
.btn--lg { min-height: 56px; padding: .95em 2.05em; font-size: 1.02rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
@media (max-width: 419px) { .btn-row .btn { width: 100%; } }

/* Two buttons of equal width. Left to themselves they size to their labels,
   so a short primary beside a long secondary reads as the secondary being
   the more important of the two.

   inline-grid with equal fr tracks, rather than flex: an inline grid resolves
   to its max-content, and equal fr tracks all take the width of the widest
   one, so the longer label sets the shared width and neither button wraps.
   Equal flex basis instead sizes against the container, which wrapped the
   long label onto a second line and made both buttons taller, not smaller. */
@media (min-width: 420px) {
  .btn-row--even {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.tlink {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .95rem;
  color: var(--teal-700); text-decoration: none;
  padding-block: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--d-mid) var(--ease);
}
.tlink:hover { background-size: 100% 1.5px; }
.section--deep .tlink { color: var(--teal-300); }
/* Each service panel's link carries that panel's accent, so the two read as
   separate systems rather than two instances of the same card */
.svc--a .tlink { color: var(--navy); }

/* =============================================================
   Header, centered navigation
   ============================================================= */

.hdr {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(253,254,251,.85);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-mid) var(--ease), background var(--d-mid) var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--line); background: rgba(253,254,251,.96); }

.hdr__in {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 26px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 31px; } }

/* Nav occupies the centre column and centres within it */
.nav { display: none; justify-content: center; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 2rem); list-style: none; margin: 0; padding: 0; }

.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .34em;
  min-height: 44px;
  font-size: .95rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 11px;
  width: 100%; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-mid) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--teal-700); }
.nav__link .chev { width: 13px; height: 13px; transition: transform var(--d-mid) var(--ease); }
.nav__item--has-menu[data-open="true"] .chev { transform: rotate(180deg); }

/* Dropdown */
.nav__item { position: relative; }
.nav__menu {
  position: absolute;
  top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 340px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease), visibility var(--d-mid);
}

/* Two columns once there's room, seven items in one column is a wall */
@media (min-width: 1200px) {
  .nav__menu {
    width: 620px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px var(--s-2);
  }
  .nav__menu-foot { grid-column: 1 / -1; }
}
.nav__item[data-open="true"] .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__menu a {
  display: block;
  padding: .62rem .8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease);
}
.nav__menu a:hover { background: var(--mist); }
.nav__menu b {
  display: block;
  font-family: var(--f-body);
  font-size: .93rem; font-weight: 600; color: var(--navy);
  margin-bottom: .1em;
}
.nav__menu span { display: block; font-size: .8rem; line-height: 1.4; color: var(--slate); }

.nav__menu-foot {
  margin-top: var(--s-2);
  padding: .62rem .8rem 0;
  border-top: 1px solid var(--line);
}
.nav__menu-foot a {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px;
  padding: .5rem 0;
  color: var(--teal-700); font-weight: 600; font-size: .88rem;
  white-space: nowrap;
}
.nav__menu-foot a:hover { background: none; text-decoration: underline; }
.nav__menu-foot svg { flex: none; }

.hdr__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.hdr__cta { display: none; }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .hdr__cta { display: inline-flex; }
}

/* Burger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: none; cursor: pointer;
}
.burger span { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px;
  transition: transform var(--d-mid) var(--ease), opacity var(--d-fast) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--paper);
  padding: var(--s-6) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease), visibility var(--d-mid);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* No bottom margin: this list sits directly above the Partners <details>,
   and the gap made that one row look spaced differently from the rest. The
   drawer CTA below carries its own top margin. */
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__list > li > a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  font-family: var(--f-display); font-size: 1.3rem; color: var(--navy); text-decoration: none;
}
.drawer__list > li > a[aria-current="page"] { color: var(--teal-700); }

/* Collapsible group (Partners), native <details>, no JS needed */
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__group > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  font-family: var(--f-display); font-size: 1.3rem; color: var(--navy);
  cursor: pointer; list-style: none;
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary .chev {
  width: 20px; height: 20px; flex: none;
  color: var(--teal-700);
  transition: transform var(--d-mid) var(--ease);
}
.drawer__group[open] > summary .chev { transform: rotate(180deg); }

.drawer__sub { list-style: none; margin: 0 0 var(--s-4); padding: 0 0 0 var(--s-4); }
.drawer__sub a {
  display: block; min-height: 44px;
  padding: .6rem 0;
  font-size: .95rem; color: var(--text-muted); text-decoration: none;
}
.drawer__sub a:hover { color: var(--teal-700); }
.drawer__meta { margin-top: auto; padding-top: var(--s-8); font-size: var(--t-sm); color: var(--text-muted); }
.drawer__meta a { color: var(--navy); font-weight: 600; text-decoration: none; }
@media (min-width: 1024px) { .drawer { display: none; } }
body.nav-open { overflow: hidden; }


/* =============================================================
   Framed hero
   -------------------------------------------------------------
   The photograph sits inside the Drop brandmark silhouette rather
   than running full bleed behind the copy. Two reasons beyond
   taste: a full-bleed photo needs a heavy scrim to carry text,
   which means degrading the image to rescue the type, and a
   contained image puts the copy on flat navy where contrast is
   controllable outright. It also makes the brandmark structural
   instead of decorative, which is the thing a competitor cannot
   copy.

   The silhouette is a circle with one square corner, so plain
   border-radius reproduces it. No SVG mask, no extra asset.
   ============================================================= */

.hero--framed {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--text-on-deep);
  padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem);
}
.hero--framed h1 {
  color: var(--paper);
  font-size: clamp(2.2rem, 1.3rem + 2.9vw, 4rem);
  margin-bottom: .34em;
}
.hero--framed .lede { color: rgba(253, 254, 251, .86); max-width: 46ch; }

.hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2.5rem, 5vw, 5rem); }
}

/* ---- The framed photograph ---- */
.hero__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  /* Solid fill rather than a hairline outline: the mark reads as a printed
     shape the photograph sits inside, not as a stroke drawn around it */
  background: var(--teal);
  border-radius: 50% 50% 50% 0;
  padding: clamp(.7rem, 1.15vw, 1.15rem);
  /* Caps the frame on very wide screens so it stays a portrait, not a poster */
  max-width: 520px;
  justify-self: center;
  width: 100%;
}
.hero__frame img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  /* Subject sits left of centre, so a centred square crop would cut her out */
  object-position: 34% 42%;
  border-radius: 50% 50% 50% 0;
}

/* ---- Background brandmarks ----
   Depth without noise. Kept under 5% contrast against the navy so they read
   as texture rather than as shapes competing with the headline. */
.hero__field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__mark {
  position: absolute;
  display: block;
  border-radius: 50% 50% 50% 0;
  will-change: transform;
}
/* All three sit in the right half, clustered behind and around the framed
   photograph, and all keep the brandmark's own orientation: square corner at
   the lower left, never rotated off-axis. A tilted brandmark stops reading as
   the brandmark. */
.hero__mark--a {
  width: 38vw; max-width: 540px; aspect-ratio: 1;
  top: -16%; right: -7%;
  background: rgba(253, 254, 251, .06);
  transform: translateY(calc(var(--sy, 0px) * .05));
}
.hero__mark--b {
  width: 22vw; max-width: 290px; aspect-ratio: 1;
  bottom: -12%; right: 26%;
  background: rgba(58, 169, 154, .17);
  transform: translateY(calc(var(--sy, 0px) * -.09));
}
.hero__mark--c {
  width: 13vw; max-width: 165px; aspect-ratio: 1;
  top: 10%; right: 33%;
  background: rgba(253, 254, 251, .045);
  transform: translateY(calc(var(--sy, 0px) * .13));
}
@media (max-width: 899px) {
  /* Stacked, the copy runs full width, so the small mark would sit under the
     headline instead of behind the photograph */
  .hero__mark--c { display: none; }
  .hero__mark--a { top: -6%; right: -20%; width: 62vw; }
  /* Stays on the right, down beside the photograph rather than the headline */
  .hero__mark--b { bottom: 4%; right: -12%; width: 40vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mark { transform: none !important; }
}

/* Trust row */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-8);
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid rgba(253,254,251,.24);
  font-size: var(--t-xs);
  color: rgba(253,254,251,.82);
}
.trust span { display: inline-flex; align-items: center; gap: .5em; }
.trust svg { width: 15px; height: 15px; color: var(--teal-300); flex: none; }
.trust--light { border-top-color: var(--line); color: var(--text-muted); }
.trust--light svg { color: var(--teal-600); }

/* Hero specification row. Deliberately not a badge strip: no check icons,
   no chips. It borrows the term treatment from the credentials list at the
   foot of the page so the two ends of the argument are visibly the same
   system. Separated by space rather than rules, because rules strand
   themselves at the start of a wrapped line. */
.hspec {
  list-style: none;
  margin: var(--s-8) 0 0; padding: var(--s-6) 0 0;
  display: flex; flex-wrap: wrap;
  gap: .55rem clamp(1.25rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(253,254,251,.24);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-300);
}
/* Centred on phones. The row wraps to two lines there, and left-aligned it
   left a ragged short second line under a full first one. */
@media (max-width: 767px) {
  .hspec { justify-content: center; text-align: center; }
}

/* Partner lab strip */
.partners-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-6) clamp(1.75rem, 4vw, 3.5rem);
}
.partners-strip__l {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.02rem; color: var(--slate);
  flex-basis: 100%; text-align: center;
}
@media (min-width: 900px) { .partners-strip__l { flex-basis: auto; text-align: left; } }

.partners-strip img {
  /* Supplied logo files are cropped inconsistently: the Quest artwork carries
     roughly 15% internal padding, the Wellness file is trimmed tight. Matching
     them on raw height makes Quest read noticeably smaller, so each logo gets
     its own scale factor and they balance optically instead of numerically. */
  height: calc(clamp(26px, 2.4vw, 34px) * var(--logo-scale, 1));
  width: auto;
  object-fit: contain;
  /* The Quest file is a JPEG on solid white. Multiply drops that white against
     the light section background so it doesn't sit in a visible box. */
  mix-blend-mode: multiply;
}

/* -------- Photography --------
   Every photograph reserves its aspect ratio before the file arrives, so a
   1 MB JPEG loading late can't shove the copy beside it down the page.
   The corner treatment echoes the Drop brandmark: three rounded corners,
   one square, which is what makes an ordinary stock photo read as ours. */
.photo {
  margin: 0;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--shadow-md);
  position: relative;
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(29, 45, 80, .09);
  pointer-events: none;
}
.photo img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  object-fit: cover;
  /* Faces sit high in most of this set, so bias the crop upward rather than
     centring it and cutting heads at narrow widths. */
  object-position: 50% 32%;
}
/* The copy needs room to breathe under the photograph, otherwise the
   paragraph reads as a caption rather than as the body of the block. */
.svc .photo { margin: 0 0 clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem); }
.svc .photo img { aspect-ratio: var(--ratio, 16 / 10); }

@media (max-width: 767px) {
  /* Wide editorial crops go square-ish on phones or the subject disappears. */
  .photo img { aspect-ratio: var(--ratio-m, var(--ratio, 4 / 3)); }
  .section--tight > .wrap > .photo img { aspect-ratio: 3 / 2; }
}

/* -------- Credentials strip --------
   Sits directly under the hero, where this category conventionally puts a
   proof bar. Labs On Call has no client logos cleared for publication and no
   volume figures worth quoting yet, so it carries standards instead: what
   every collection is held to, regardless of who ordered it. */
/* -------- Credentials band --------
   Was three checkmarks and a sentence each, which is the feature-bullet
   vocabulary of every software site and says nothing about this industry.
   Set instead as a specification band: term, rule, value. The device is
   borrowed from a spec sheet or a lab report header rather than a marketing
   page, so the furniture itself reads clinical before a word is read. */
.creds {
  display: grid;
  gap: var(--s-8) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .creds { grid-template-columns: 1fr auto; } }

.creds__spec {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5, 1.25rem);
}
@media (min-width: 640px) {
  .creds__spec { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
  /* Hairline between terms, the way a printed specification separates rows */
  .creds__item + .creds__item { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.75rem); }
}

.creds__item dt {
  font-family: var(--f-body);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: .5rem;
}
.creds__item dd {
  margin: 0;
  font-size: var(--t-sm); line-height: 1.5;
  color: var(--ink-600);
}
.creds__item dd b { color: var(--navy); font-weight: 650; }

.creds__marks { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); flex-wrap: wrap; }
.creds__note { flex-basis: 100%; margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-600); max-width: 44ch; }
.creds__marks img {
  height: clamp(44px, 4vw, 58px); width: auto; object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 899px) {
  .creds__marks { justify-content: flex-start; padding-top: var(--s-6); border-top: 1px solid var(--line); }
}

/* Compliance badges */
.badges {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-deep);
}
.badges img {
  height: clamp(52px, 5vw, 68px);
  width: auto;
  object-fit: contain;
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}
.badges__note {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--text-on-deep-muted);
  margin: 0;
}

/* Partner type sections: kicker leads, heading sits beneath it */
.ptype__kicker {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-700);
  background: var(--teal-100);
  padding: .45em 1em;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.section--alt .ptype__kicker { background: var(--paper); }
.ptype h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.3rem); }
/* Sits after the benefit list, at the end of that block's argument */
.ptype__cta { margin: var(--s-8) 0 0; }

/* Two of these labels wrap on a phone. `.tlink` is inline-flex, which makes
   the arrow a sibling flex item, so a wrapped label strands it out to the
   right of the widest line instead of following the last word. Going inline
   here lets the arrow flow with the text and land after it. The underline
   animation still works, painting per line box. */
.ptype__cta .tlink { display: inline; }
.ptype__cta .tlink svg {
  display: inline;
  vertical-align: -0.1em;
  margin-left: .38em;
}

/* =============================================================
   Cards
   ============================================================= */

.card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.15rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease);
}
.card h3 { margin-bottom: .35em; }
.card p { color: var(--text-muted); font-size: var(--t-sm); }
@media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } }
.section--deep .card { background: rgba(253,254,251,.055); border-color: var(--line-deep); }
.section--deep .card p { color: var(--text-on-deep-muted); }
.section--deep .card h3 { color: var(--paper); }



/* =============================================================
   Service panels
   ============================================================= */

/* Both services sit on light surfaces. Two saturated dark panels read as
   consumer software; every credible-services pattern (B2B service, legal,
   healthcare) lands on the same instrument instead: white card, navy
   structure, one accent used sparingly, soft elevation, high contrast.

   The panels are told apart by an accent rail, an icon and a name, never by
   background colour alone, so the distinction survives greyscale and
   colour-blindness. Navy on paper measures 13.4:1, comfortably AAA. */
/* Two services as a pair of cards, side by side.

   Held at half width rather than full-bleed rows: the point is that these
   are two parallel options of equal standing, and a card at moderate scale
   says that faster than two stacked rows do. The accent rail across the top
   is what tells them apart now that the icon mark is gone, so the pair
   still survives greyscale. */
.svcs { display: grid; gap: var(--s-8); }
@media (min-width: 820px) {
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
}

/* Border stays a uniform hairline. A heavier top edge against 1px sides
   tapers unevenly through the corner radius, which is visible at the two
   top corners. The accent moved onto the service name instead, where it
   also matches how every other label on the page opens. */
.svc {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease);
}
@media (hover: hover) {
  .svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
}

.svc .photo { margin: 0; }
.svc .photo img { aspect-ratio: var(--ratio, 16 / 10); }

.svc__copy {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
}

/* Opened by a short rule, the same device the section label and the hairline
   list use. The rule inherits currentColor, so each service carries its own
   accent without a second declaration. Sans and uppercase where the section
   label is serif and italic: same structure, different rank. */
.svc__name {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 var(--s-3);
  font-family: var(--f-body);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.svc__name::before {
  content: ""; flex: none;
  width: 1.75rem; height: 2px;
  background: currentColor;
}
.svc--a .svc__name { color: var(--navy); }
/* teal-700 rather than teal: brand teal is only 2.8:1 on white, so it carries
   the rule but never body-sized text */
.svc--b .svc__name { color: var(--teal-700); }

.svc h3 { color: var(--navy); }
.svc p { color: var(--text-muted); }

/* Down from a 2.05rem ceiling. At half width the tagline is a card heading,
   not a section heading, and it should not compete with the h2 above it. */
.svc h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.5rem); line-height: 1.22; }
.svc p { font-size: var(--t-sm); }
.svc__foot { margin-top: auto; padding-top: var(--s-6); }

.svc__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.svc__list li { display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start; font-size: var(--t-sm); }
.svc__list svg { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.svc .svc__list li { color: var(--text-muted); }
.svc--a .svc__list svg { color: var(--navy); }
.svc--b .svc__list svg { color: var(--teal-700); }
.svc__list li { padding-block: 2px; }

/* =============================================================
   Benefit list
   ============================================================= */

.blist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .blist--2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-12); } }
.blist li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-4); align-items: start; }

/* Bullet marker uses the Labs On Call drop brandmark silhouette:
   round on three corners, square on the lower left. */
.blist .bmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50% 50% 50% 0;
  background: var(--teal); color: #06231F; flex: none;
}
.blist .bmark svg { width: 15px; height: 15px; }
.section--deep .blist .bmark { background: var(--teal-300); color: #06231F; }
.blist strong { display: block; color: var(--navy); font-size: 1.03rem; font-weight: 650; margin-bottom: .18em; }
.section--deep .blist strong { color: var(--paper); }
.blist span.d { display: block; color: var(--text-muted); font-size: var(--t-sm); line-height: 1.56; }
.section--deep .blist span.d { color: var(--text-on-deep-muted); }

/* =============================================================
   Test categories
   -------------------------------------------------------------
   Deliberately not boxed. The point of the section is breadth, and
   six cards would read as six products rather than six areas of one
   catalog. Hairline-opened columns, same device as the stat row
   and the hairline list. No icons: six marks next to six one-line
   labels stood in for content rather than adding to it.
   ============================================================= */

.tcat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 560px) { .tcat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tcat { grid-template-columns: repeat(3, 1fr); gap: var(--s-8) clamp(2rem, 4vw, 3.25rem); } }
.tcat li { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.tcat h3 { font-size: 1.05rem; margin-bottom: .3em; }
.tcat p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--text-muted); }
.tcat__note { margin: var(--s-12) 0 0; max-width: 62ch; font-size: var(--t-sm); color: var(--text-muted); }

/* =============================================================
   Partner index
   -------------------------------------------------------------
   A contents page rather than a card grid. Seven industries share
   one set of hairlines, and the industry name is what links, so no
   row needs a repeated "learn more" label underneath it.
   ============================================================= */

.idx {
  list-style: none; margin: var(--s-12) 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.idx__row { border-bottom: 1px solid var(--line); }
/* Placement is explicit rather than auto-flowed. With a full-width
   description in the middle, auto-flow pushes the arrow onto a third row
   of its own and stretches it across the column. */
.idx__row > a {
  display: grid; align-items: baseline;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "desc desc";
  gap: .3rem var(--s-8);
  padding: var(--s-6) 0;
  color: inherit; text-decoration: none;
}
@media (min-width: 768px) {
  .idx__row > a {
    grid-template-columns: minmax(0, 15rem) 1fr auto;
    grid-template-areas: "name desc arrow";
    align-items: center;
  }
}

.idx__n {
  grid-area: name;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1rem + .32vw, 1.32rem);
  line-height: 1.2; color: var(--navy);
  transition: color var(--d-mid) var(--ease);
}
.idx__d {
  grid-area: desc;
  font-size: var(--t-sm); line-height: 1.55; color: var(--text-muted);
}

/* The arrow stays put on touch, where there is no hover to reveal it. */
.idx__a { grid-area: arrow; display: inline-flex; color: var(--teal-700); }
.idx__a svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .idx__a {
    opacity: 0; transform: translateX(-8px);
    transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease);
  }
  .idx__row > a:hover .idx__a { opacity: 1; transform: none; }
  .idx__row > a:hover .idx__n { color: var(--teal-700); }
}
.idx__row > a:focus-visible .idx__a { opacity: 1; transform: none; }

/* =============================================================
   Hairline list
   -------------------------------------------------------------
   Same opening device as a stat: a rule, then the term. Used where
   three points need to sit side by side without becoming another
   row of icon chips.
   ============================================================= */

.klist { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; gap: var(--s-8); }
@media (min-width: 860px) {
  .klist { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.klist li { padding-top: var(--s-4); border-top: 2px solid var(--teal); }
.klist__ic { display: block; width: 30px; height: 30px; margin-bottom: var(--s-4); color: var(--teal-700); }
.klist__ic svg { width: 100%; height: 100%; }
.section--deep .klist__ic { color: var(--teal-300); }
.klist h3 { font-size: 1.08rem; margin-bottom: .45em; color: var(--navy); }
.klist p { font-size: var(--t-sm); line-height: 1.6; color: var(--text-muted); }
.section--deep .klist li { border-top-color: var(--teal-300); }
.section--deep .klist h3 { color: var(--paper); }
.section--deep .klist p { color: var(--text-on-deep-muted); }

/* =============================================================
   Stats, editorial figures
   ============================================================= */

.stats { display: grid; gap: var(--s-8); }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }

.stat { padding-top: var(--s-6); border-top: 1px solid var(--line-deep); }
.section:not(.section--deep) .stat { border-top-color: var(--line); }
/* The numeral carries the accent and the unit stays white, so the figure
   itself is what the eye picks up rather than the percent sign or the word
   after it. */
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(1.95rem, 1.45rem + 1.75vw, 2.9rem);
  font-weight: 700; line-height: 1; letter-spacing: -.035em;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
/* The unit drops to regular weight as well as changing colour. Bold on both
   halves made the whole figure one heavy block and the numeral stopped
   leading; at regular weight the accent digits carry it on their own. */
.stat__n .stat__u { color: var(--paper); font-weight: 400; }
.section:not(.section--deep) .stat__n { color: var(--teal-700); }
.section:not(.section--deep) .stat__n .stat__u { color: var(--navy); }
/* Word-based figures need a smaller size than numerals or they break badly */
.stat__n--word {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem);
  letter-spacing: -.022em;
  overflow-wrap: normal;
  hyphens: none;
}
.stat__l { font-size: var(--t-sm); line-height: 1.5; color: var(--text-on-deep-muted); max-width: 28ch; }

/* =============================================================
   Quotes
   ============================================================= */

.quote { display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.4vw, 2.15rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.quote__mark { width: 26px; height: 26px; color: var(--teal-300); margin-bottom: var(--s-4); }
.quote p { font-family: var(--f-display); font-size: clamp(1.04rem, .96rem + .36vw, 1.18rem);
  line-height: 1.5; color: var(--navy); flex: 1; }
.quote footer {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-600); letter-spacing: .01em;
}

/* =============================================================
   CTA band
   ============================================================= */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  /* Ends on the brand navy itself rather than the near-black navy-900, so
     the colour you actually read off this panel is #1D2D50. */
  background: linear-gradient(148deg, var(--navy-600) 0%, var(--navy) 100%);
  color: var(--text-on-deep);
  padding: clamp(2.4rem, 1.5rem + 4vw, 4.75rem);
  text-align: center;
}
.cta::before {
  content: ""; position: absolute; width: 480px; height: 480px;
  top: -230px; right: -150px;
  background: radial-gradient(circle, rgba(58,169,154,.28), transparent 68%);
  pointer-events: none;
}
.cta__in { position: relative; max-width: 48ch; margin-inline: auto; }
.cta h2 { color: var(--paper); }
.cta p { color: var(--text-on-deep-muted); margin-bottom: 0; }
.cta .btn-row { justify-content: center; }
.cta .btn--primary { background: var(--teal); color: #06231F; }

/* =============================================================
   Forms
   ============================================================= */

.form { display: grid; gap: var(--s-6); }
.form__row { display: grid; gap: var(--s-6); }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field label { display: block; margin-bottom: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--navy); }
.section--deep .field label { color: var(--paper); }
.field .hint { display: block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--slate); }
.field .req { color: var(--warn); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75em .95em;
  font-family: var(--f-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--mist-200); border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.17);
}
.field select {
  appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7C93' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 18px;
}

/* =============================================================
   FAQ
   ============================================================= */

/* =============================================================
   Question card
   -------------------------------------------------------------
   The homepage list is the short version, split by service so the
   answers are relevant rather than generic, with the full list a
   link away on each service page. The card exists because an
   unboxed list of rules on a white section had nothing holding it
   together and read as page furniture.
   ============================================================= */

.qcard {
  max-width: 840px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, .9rem + 1.5vw, 2.25rem);
}

.qtabs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.qtab {
  min-height: 44px; padding: .55em 1.35em;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--f-body); font-size: .9rem; font-weight: 600;
  color: var(--navy); cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
@media (hover: hover) { .qtab:hover { border-color: var(--navy); background: rgba(29,45,80,.045); } }
/* Selected state is carried by fill and border together, not colour alone,
   so it survives greyscale and does not rely on hue perception. */
.qtab[aria-selected="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--paper);
}

.qmore { margin: var(--s-6) 0 0; }

.faq { border-top: 1px solid var(--line); }
/* Inside the card the list already has the card's own edge above it */
.qpanel .faq { border-top: 0; }
.qpanel .faq details:last-child { border-bottom: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  min-height: 66px; padding-block: var(--s-4);
  font-family: var(--f-display); font-size: clamp(1.04rem, .97rem + .32vw, 1.18rem);
  font-weight: 700; color: var(--navy); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: var(--teal-700);
  transition: transform var(--d-mid) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--s-6); }
.faq details p { color: var(--text-muted); max-width: 70ch; font-size: var(--t-sm); }

/* =============================================================
   Footer
   ============================================================= */

/* The footer opens with the phone number set as display type rather than as
   the third item of the third column. On a service whose fastest answer is a
   phone call, a link list buried the one thing a decided visitor wants.
   The oversized Drop behind it is the mark used at architectural scale, the
   one place on the site it is allowed to be large and quiet. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--text-on-deep-muted);
  padding-block: var(--s-16) var(--s-8);
}
.site-footer > .wrap { position: relative; z-index: 1; }
.site-footer::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -30%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  border-radius: 50% 50% 50% 0;
  background: rgba(253, 254, 251, .028);
  pointer-events: none;
}

.foot__grid { display: grid; gap: var(--s-12); }
@media (min-width: 640px) { .foot__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--s-8); } }

.foot__brand img { height: 27px; margin-bottom: var(--s-4); }
.foot__brand p { font-size: var(--t-sm); max-width: 34ch; }
.foot__h {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.05rem; color: var(--teal-300);
  margin: 0 0 var(--s-4); letter-spacing: 0;
}
/* Padding rather than gap, so each link's tap area is ~37px instead of the
   17px the text alone gave. Visual rhythm is unchanged; only the hit area
   grows. Footer links are the most commonly mis-tapped thing on a phone. */
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot ul a { display: inline-block; padding-block: 10px; }
.foot a { color: var(--text-on-deep-muted); text-decoration: none; font-size: var(--t-sm); transition: color var(--d-fast) var(--ease); }
.foot a:hover { color: var(--paper); }

.foot__bottom {
  margin-top: var(--s-16); padding-top: var(--s-6);
  border-top: 1px solid var(--line-deep);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6);
  font-size: var(--t-xs); color: rgba(253,254,251,.62);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.foot__legal a { font-size: var(--t-xs); color: rgba(253,254,251,.62); display: inline-block; padding-block: 8px; }
.foot__legal a:hover { color: rgba(253,254,251,.9); }
/* .42 measured 3.65:1 at 12.8px, under the 4.5:1 AA floor, on the sentence
   carrying the not-a-laboratory boundary. Measure also cut from 92ch, which
   rendered ~107 real characters per line. */
.foot__disc { margin-top: var(--s-6); font-size: var(--t-xs); line-height: 1.62; color: rgba(253,254,251,.66); max-width: 76ch; }

/* =============================================================
   Interior page hero
   ============================================================= */

.phero { padding-block: clamp(2.5rem, 1.5rem + 3.2vw, 5rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.phero h1 { max-width: 19ch; }
.phero .lede { max-width: 58ch; }

/* =============================================================
   Reveal
   ============================================================= */

.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* =============================================================
   Utilities
   ============================================================= */

.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; }
.skip { position: absolute; top: -100px; left: var(--s-4); z-index: 200; padding: .75em 1.25em;
  background: var(--navy); color: var(--paper); border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
  transition: top var(--d-fast) var(--ease); }
.skip:focus { top: var(--s-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }