/* Corthal website (v3, live from 2026-10-10).
   Brand: logo blue #0A2A8A, Newsreader (headings), Hanken Grotesk (body).
   Direction: restrained, left-aligned, sharp corners, one blue band for the case study and one for contact. */

/* Fonts are self-hosted (latin subset, variable weight) so no third-party request blocks the first paint. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-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: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-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;
}

:root {
  --blue: #0A2A8A;
  --blue-deep: #071E66;
  --ink: #12182A;
  --muted: #535B6E;
  --line: #DDE1EA;
  --paper: #FFFFFF;
  --tint: #F5F6FA;
  --on-blue: #FFFFFF;
  --on-blue-muted: #C3CCEA;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 11vw, 136px);
  color-scheme: light;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

a { color: var(--blue); }
a:focus-visible, .button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Type */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: clamp(32px, 5vw, 56px);
}
h3 {
  font-size: 24px;
  line-height: 1.2;
}

.label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 24px;
}

.intro {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 clamp(40px, 6vw, 64px);
  text-wrap: pretty;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}
.brand img { width: 148px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding-block: 8px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover { border-bottom-color: var(--blue); color: var(--blue); }
/* The section you're reading is underlined too (script.js sets .is-active) */
.nav-link.is-active { border-bottom-color: var(--blue); color: var(--blue); }
.nav-cta {
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 9px 18px;
}
.nav-cta:hover, .nav-cta.is-active { background: var(--blue); color: var(--on-blue); }

/* Hero: a looping video (from 2026-10-31) under a brand-blue tint, white text on top.
   Layers, bottom to top: Kingston photo (shows until the video plays, and stays for reduced motion,
   save-data or no script), the video, the blue gradient (::after), the text.
   Photo: Kingston City Hall, Yajun Dong on Pexels (free licence, no credit required). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue);
  color: var(--on-blue);
  padding-block: clamp(96px, 15vw, 200px) clamp(88px, 13vw, 168px);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/hero-kingston.jpg") center 45% / cover no-repeat;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 30, 102, 0.92) 0%, rgba(10, 42, 138, 0.78) 45%, rgba(10, 42, 138, 0.45) 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-video.is-playing { opacity: 1; }
.hero h1 { color: var(--on-blue); }
.hero .label { color: var(--on-blue-muted); }
.hero .lede { color: #DCE2F5; }
.hero .button { background: var(--paper); color: var(--blue); }
.hero .button:hover { background: var(--tint); }
.hero .button:focus-visible { outline-color: var(--paper); }
.lede {
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin: 28px 0 40px;
}
.button {
  display: inline-block;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 30px;
  transition: background-color 0.2s ease;
}
.button:hover { background: var(--blue-deep); }

/* Sections */
section[id] { scroll-margin-top: 72px; }
.section { padding-block: var(--section); }
.section-tint { background: var(--tint); }

.aside {
  margin: clamp(40px, 6vw, 64px) 0 0;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  color: var(--ink);
}

/* ------------------------------------------------------------------
   How it works.
   Steps 1-4 sit on one horizontal timeline. Step 5 (custom builds) has its own wide row
   underneath, with a hollow marker. A dashed line carries on from
   step 4's marker, runs out to the right, and curves down and back left into step 5's
   marker. script.js draws that line from the real marker positions and reveals it as you
   scroll. Under 901px the steps are one vertical list instead.
   ------------------------------------------------------------------ */
.section-how { overflow-x: clip; }
.timeline { position: relative; }

.steps {
  --node: 11px;
  --gap-x: clamp(28px, 4vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 72px) var(--gap-x);
}
/* The solid timeline. Without script it runs the full width; with the dashed line drawn it stops at step 4's marker. */
.steps::before {
  content: "";
  position: absolute;
  top: calc(64px + var(--node) / 2 - 0.5px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.timeline.has-path .steps::before {
  right: calc((100% - 3 * var(--gap-x)) / 4 - var(--node) / 2);
}
.steps > li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.step-num {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--blue);
  height: 48px;
}
.step-dot {
  width: var(--node);
  height: var(--node);
  background: var(--blue);
  margin-block: 4px 18px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--paper);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.steps > li > p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

/* Step 5: the same kind of step. Its hollow marker, the dashed line and the "When it fits" tag mark it as optional. */
.steps > .step-set-apart .step-dot {
  background: var(--paper);
  border: 1px solid var(--blue);
}
/* The dashed line has arrived: the marker gets a small blue centre */
.timeline.is-reached .step-set-apart .step-dot {
  background: var(--blue);
  box-shadow: 0 0 0 6px var(--paper), inset 0 0 0 2px var(--paper);
}
.step-num-tagged {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.step-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 5px 8px;
  white-space: nowrap;
}
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Examples, not buttons: a thin rule above plain text, like the stats and bios */
.tags li {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  position: relative;
}
/* A short blue lead-in on each rule, echoing the timeline */
.tags li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: 1px;
  background: var(--blue);
}

/* The dashed connector (inline SVG, sized to the steps; script.js writes the path) */
.timeline-path {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.timeline-path-line {
  fill: none;
  stroke: var(--blue);
  stroke-opacity: 0.5;
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
/* Mask path: a solid stroke that is drawn in as you scroll, uncovering the dashes */
.timeline-path-draw {
  fill: none;
  stroke: var(--paper);
  stroke-width: 6;
}

@media (min-width: 901px) {
  /* Step 5 on its own wide row: sentence on the left, tags on the right */
  .steps > .step-set-apart {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap-x);
  }
  .step-set-apart > .step-num { grid-column: 1 / -1; }
  .step-set-apart > .step-dot { grid-column: 1; }
  .step-set-apart > h3,
  .step-set-apart > p { grid-column: 1 / 3; }
  .step-set-apart > p { max-width: 46ch; }
  /* Seven examples as two full-width rows, four over three, lined up with the step columns */
  .step-set-apart > .tags {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px var(--gap-x);
    margin-top: 18px;
  }
  /* Fallback if script doesn't run: a plain dashed line along step 5's row */
  .steps > .step-set-apart::before {
    content: "";
    position: absolute;
    top: calc(64px + var(--node) / 2 - 0.5px);
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(10, 42, 138, 0.5) 0 4px, transparent 4px 10px);
  }
  .timeline.has-path .steps > .step-set-apart::before { display: none; }
}

@media (max-width: 900px) {
  /* One vertical line. Step 5 follows step 4 and the segment between them is dashed. */
  .timeline-path { display: none; }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-left: 36px;
  }
  .steps::before { display: none; }
  .steps > li > .step-dot {
    position: absolute;
    left: -36px;
    top: 10px;
    margin: 0;
  }
  .step-num { font-size: 32px; height: auto; }
  .steps > li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(10px + var(--node) / 2);
    left: -31px;
    width: 1px;
    height: calc(100% + 36px);
    background: var(--line);
  }
  .steps > li:nth-child(4)::before {
    background: repeating-linear-gradient(180deg, rgba(10, 42, 138, 0.5) 0 4px, transparent 4px 10px);
  }
  .steps > li > p { max-width: 62ch; }
  .steps > li > .tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: 10px;
  }
  .steps > li > .tags li { font-size: 14px; padding-top: 10px; }
}

/* ------------------------------------------------------------------
   Worked examples: Today / With AI, one row per job
   ------------------------------------------------------------------ */
.section-cando { border-top: 1px solid var(--line); }
.section-cando .label { margin-bottom: 16px; }
.section-cando h2 { margin-bottom: 20px; }
.section-cando .intro { margin-bottom: clamp(32px, 5vw, 48px); }
.compare-head,
.cmp-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(56px, 8vw, 112px);
}
.compare-head { border-bottom: 1px solid var(--ink); }
.compare-head span { padding-block: 14px; }
.compare-head span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-head span:last-child { color: var(--blue); }
.compare {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cmp-row {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.cmp-row p { margin: 0; padding-block: 28px; }
.cmp-today { color: var(--muted); }
.cmp-ai { color: var(--ink); }
/* "With AI" sits on a flat tinted panel, header included, so the after side reads at a glance */
.compare-head span:last-child,
.cmp-ai {
  background: var(--tint);
  padding-inline: 28px;
}
/* Blue arrow in the gap between the two columns */
.cmp-row::before {
  content: "";
  position: absolute;
  left: calc(50% - 11px);
  top: 37px;
  width: 22px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9' fill='none' stroke='%230A2A8A' stroke-width='1.2'%3E%3Cpath d='M0 4.5h21M17 .5l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Labels are read by screen readers, and shown only when the columns stack */
.cmp-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Case study
   ------------------------------------------------------------------ */
.case {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue);
  color: var(--on-blue);
  padding-block: clamp(80px, 10vw, 120px);
}
/* Fine diagonal lines, fading in from the left */
.case-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
}
.case-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(40px, 7vw, 112px);
  align-items: start;
}
.case-text { display: grid; gap: 18px; }
.case-body-2 { color: var(--on-blue-muted); font-size: 16px; }
.case h2 { color: var(--on-blue); margin-bottom: 8px; }
.label-inverse { color: var(--on-blue-muted); }
.case-sub {
  margin: 0;
  color: var(--on-blue-muted);
  font-size: 16px;
}
.case-body {
  max-width: 62ch;
  font-size: 18px;
  margin: 0;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: clamp(56px, 7vw, 80px) 0 0;
  padding: 0;
}
.stats div {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.stats dd {
  order: -1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 4.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stats dt {
  font-size: 15px;
  color: var(--on-blue-muted);
  line-height: 1.45;
}
.source {
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--on-blue-muted);
}

/* ------------------------------------------------------------------
   Who we are
   ------------------------------------------------------------------ */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.person {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  min-width: 0;
}
.role {
  margin: 6px 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.person p:last-child {
  margin: 0;
  color: var(--muted);
  max-width: 52ch;
}

/* ------------------------------------------------------------------
   FAQ: one centred column, questions open one at a time
   ------------------------------------------------------------------ */
.faq-head h2 { margin-bottom: 16px; }
.faq-note { margin: 0; color: var(--muted); }
.faq-center { max-width: 860px; }
.faq-center .faq-head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 52px);
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 26px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.faq-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--blue);
  transition: transform 0.25s ease;
}
.faq-icon::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.faq-icon::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item p {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Contact: centred closing statement on a brand-blue band
   ------------------------------------------------------------------ */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(80px, 11vw, 144px);
  text-align: center;
  background: var(--blue);
  color: var(--on-blue);
}
/* Very faint diagonal lines at the edges */
.contact-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
}
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact h2 {
  color: var(--on-blue);
  font-size: clamp(34px, 4.8vw, 52px);
  margin-bottom: 20px;
  max-width: 20ch;
}
.contact-intro {
  margin: 0 0 clamp(32px, 5vw, 52px);
  font-size: clamp(18px, 1.8vw, 20px);
  color: #DCE2F5;
  max-width: 46ch;
  text-wrap: balance;
}
.contact-email {
  font-family: var(--serif);
  font-size: clamp(28px, 6.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--on-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s ease;
}
.contact-email:hover { text-decoration-color: currentColor; }
.contact-email:focus-visible,
.contact-person a:focus-visible { outline-color: var(--paper); }
.contact-or {
  margin: clamp(36px, 5vw, 52px) 0 20px;
  font-size: 15px;
  color: var(--on-blue-muted);
}
.contact-people {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
}
.contact-person {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding-inline: clamp(24px, 6vw, 64px);
}
.contact-person + .contact-person { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.contact-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-blue-muted);
}
.contact-person a {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--on-blue);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.contact-person a:hover { border-bottom-color: var(--on-blue); }
.where {
  margin: clamp(36px, 5vw, 52px) 0 0;
  color: var(--on-blue-muted);
  font-size: 15px;
  max-width: 62ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: #A9B0C2;
  padding-block: 48px 36px;
  font-size: 14px;
}
.footer-logo { width: 120px; }
.footer-text, .footer-copy { margin: 0; }
.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 28px;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #DCE2F5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-links a:hover { color: var(--on-blue); border-bottom-color: var(--on-blue); }
.footer-links a:focus-visible { outline: 2px solid var(--on-blue); outline-offset: 3px; }
.footer-icon { flex: none; width: 16px; height: 16px; }
.footer-rule {
  height: 1px;
  margin: 32px 0 20px;
  background: rgba(255, 255, 255, 0.15);
}

/* Fade-in on scroll (class added by script.js; nothing is hidden without it) */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* The timeline steps only fade: a slide would shift the markers the connector line is measured from */
.reveal-ready .steps > li.reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* Narrow screens */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .site-nav { gap: 18px; }
  .nav-link { font-size: 14px; }
  .nav-cta { padding: 8px 14px; }
}
/* Five nav items need more room than the live site's four: only the button is kept below 721px */
@media (max-width: 720px) {
  .site-nav .nav-link:not(.nav-cta) { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-row { height: 64px; }
  section[id] { scroll-margin-top: 64px; }
  .nav-cta { padding: 7px 14px; font-size: 14px; }
  .hero-media { background: url("assets/hero-kingston-1200.jpg") center / cover no-repeat; }
  .hero-media::after { background: linear-gradient(180deg, rgba(7, 30, 102, 0.88) 0%, rgba(10, 42, 138, 0.80) 100%); }  .brand img { width: 124px; }
  .people, .stats { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 28px; }
  .faq-item summary { font-size: 19px; padding-block: 22px; }
  /* Today / With AI: each row stacks */
  .compare-head { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; }
  .cmp-row .cmp-today { padding-block: 24px 14px; }
  .cmp-row .cmp-ai { padding: 16px 18px; }
  .cmp-row::before { display: none; }
  .cmp-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cmp-ai .cmp-label { color: var(--blue); }
  /* Contact: founders stack */
  .contact-people { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .contact-person { padding-inline: 0; }
  .contact-person + .contact-person { border-left: 0; }
  .footer-main { flex-direction: column; align-items: flex-start; }
}