/* Variant look: side-by-side design test. Loads after styles.css on every page. */

/* ---------- Fonts ---------- */

/* Anton (SIL OFL, see assets/fonts/OFL-anton.txt): the display face for headings and big numbers.
   Manrope (styles.css) stays the body face. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-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;
}

/* ---------- Tokens ---------- */

:root {
  --bg:          #EFEEEA;
  --bg-deep:     #E4E3DE;   /* back layers of the stacked card */
  --card:        #FFFFFF;
  --fg:          #141824;
  --muted:       #4D5260;
  --gold:        #E2BE62;   /* the one accent. Gold text only on navy; on light use --gold-dark */
  --gold-hover:  #D6AE4E;
  --gold-dark:   #7A5710;
  --navy:        #141824;
  --line:        rgba(20,24,36,.14);
  --line-dark:   rgba(255,255,255,.2);
  --grid-line:   rgba(20,24,36,.16);

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font:    'Manrope', system-ui, sans-serif;

  --radius-btn:  10px;
  --radius-card: 20px;

  /* Distance from the viewport's left edge to the content edge. The grid lines use it to run off the page. */
  --bleed: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter));

  /* Floating header: pill height plus the gap above it. */
  --header-h: 72px;

  /* Icons drawn with CSS masks (inherit the text colour, no extra files). */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

@media (min-width: 761px) {
  :root { --header-h: 86px; }
}

/* ---------- Base ---------- */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.6;
}

/* Focus: navy ring on the light grey and white surfaces, gold ring on navy. */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.section--navy :focus-visible,
.page-hero--navy :focus-visible,
.stats-band :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.contact-card :focus-visible,
.note-card :focus-visible {
  outline-color: var(--gold);
}

/* ---------- Display type ---------- */

/* Anton has one weight, so synthesis is off to stop the browser faking a bold. */
.display-1,
.display-2,
.display-3 {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0;
}

.display-1 {
  font-size: clamp(3.5rem, 1.6rem + 7vw, 8.75rem);
  line-height: .92;
  letter-spacing: -.01em;
}

.display-2 {
  font-size: clamp(2.75rem, 1.5rem + 4.6vw, 6rem);
  line-height: .95;
  text-wrap: balance;
}

.display-3 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.5rem);
  line-height: 1;
  text-wrap: balance;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold-dark);
}

@media (min-width: 1025px) {
  .eyebrow { font-size: 13px; }
}

/* ---------- Buttons and links ---------- */

.btn {
  padding: 16px 28px;
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 700;
  box-shadow: none;
}

.btn--sm {
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
}

.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-hover); }

/* Underlined text link with a small round arrow. The label carries the arrow, the circle only draws it. */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  color: var(--fg);
}

.cta-link__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--ease);
}

.cta-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: 13px;
  line-height: 1;
  transition: transform var(--ease), background-color var(--ease);
}

.cta-link:hover .cta-link__label { text-decoration-color: var(--gold-dark); }
.cta-link:hover .cta-link__icon { background: var(--gold-hover); transform: translateX(3px); }

/* ---------- Header: floating pill ---------- */

.site-header {
  padding: 10px var(--gutter) 0;
  background: transparent;
  border-bottom: 0;
  pointer-events: none;   /* the empty strip beside the pill lets clicks through to the page */
}

.site-header .header-inner {
  position: relative;
  pointer-events: auto;
  max-width: calc(var(--container) - 2 * var(--gutter));
  height: 60px;
  padding: 0 8px 0 16px;
  gap: 16px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,24,36,.06), 0 18px 34px -18px rgba(20,24,36,.32);
}

.brand-mark { height: 32px; }
.brand-name { font-size: 20px; letter-spacing: .12em; }

.nav-toggle { margin-right: 0; }

/* The gold button, in the bar and in the mobile panel. */
.site-header .btn { background: var(--gold); color: var(--navy); }
.site-header .btn:hover { background: var(--gold-hover); }

/* Mobile: the menu drops down as its own rounded card under the pill. */
@media (max-width: 760px) {
  .site-nav {
    top: calc(100% + 8px);
    padding: 4px 20px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(20,24,36,.06), 0 28px 44px -22px rgba(20,24,36,.4);
  }

  .nav-links li:last-child a { border-bottom: 0; }
}

@media (min-width: 761px) {
  .site-header { padding-top: 14px; }

  .site-header .header-inner {
    height: 68px;
    padding: 0 12px 0 22px;
  }

  .brand-mark { height: 40px; }
  .brand-name { font-size: 22px; }
  .brand-sub { margin-top: 3px; font-size: 9.5px; }

  .nav-links { gap: 22px; }
  .nav-links a { font-weight: 600; }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--gold); }
}

@media (min-width: 1025px) {
  .nav-links { gap: 34px; }
}

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

.site-footer {
  border-top: 1px solid var(--line-dark);
  padding-block: 56px 28px;
}

.footer-brand span {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (min-width: 761px) {
  .site-footer { padding-block: 80px 32px; }
  .footer-brand span { font-size: 30px; }
}

/* ---------- Mobile and tablet action bar ---------- */

.action-bar {
  background: var(--card);
  border-top: 1px solid var(--line);
}

.action-bar__link {
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--fg);
  background: var(--card);
  color: var(--fg);
}

.action-bar__link--primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
}

/* ---------- Grid lines (hero arch and credentials pill) ---------- */

/* A patch of 1px lines, 56px apart, that runs off the left edge of the page. The photo sits on top. */
.grid-lines {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to top, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 100% 100%;
}

/* =====================================================================
   HOME PAGE  (body.home)
   ===================================================================== */

/* ---------- Home: sections ---------- */

.home .section,
.home .section--cream,
.home .clients {
  background: transparent;
}

.home .section {
  padding-block: clamp(64px, 8vw, 112px);
}

.home .section-head { margin-bottom: 0; }
.home .section-head h2 { max-width: none; }

.home .section-head--center { text-align: center; }

.home .section-intro {
  max-width: 60ch;
  margin: 20px 0 0;
  font-size: 17px;
  color: var(--muted);
  text-wrap: balance;
}

.home .section-head--center .section-intro { margin-inline: auto; }

@media (min-width: 1025px) {
  .home .section-intro { font-size: 18px; }
}

/* ---------- Home: hero ---------- */

.home .hero {
  --hero-pb: 84px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: 24px var(--hero-pb);
  background: transparent;
  color: var(--fg);
}

/* A very soft diagonal shade on the right, like light falling across the wall.
   It starts behind the floating header so there is no seam where the header ends. */
.home .hero::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-h)) 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 40%, rgba(20,24,36,.075) 60%, transparent 82%);
}

.home .hero__inner {
  display: grid;
  grid-template-areas:
    "title"
    "copy"
    "visual";
  gap: 28px;
}

.home .hero__title {
  grid-area: title;
  margin: 0;
  line-height: .98;  /* home screen 2 keeps its own leading; only home screen 1 changed to 1.04 */
}

/* Staggered: the first line sits left, the second and third step out to the right. */
.home .hero__line { display: block; }
.home .hero__line--2,
.home .hero__line--3 { text-align: right; }

.home .hero__copy { grid-area: copy; }

.home .hero__text {
  max-width: 34ch;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
  opacity: 1;
}

.home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin-top: 28px;
}

.home .hero__actions .btn { margin-top: 0; }

.home .hero__visual {
  grid-area: visual;
  position: relative;
  z-index: 0;
  width: min(100%, 420px);
  margin-top: 12px;
}

.home .hero__grid {
  left: calc(-1 * var(--bleed));
  right: 0;
  top: 30%;
  bottom: calc(-1 * var(--hero-pb));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
  mask-image: linear-gradient(to bottom, transparent, #000 26%);
}

/* The arch: small top corners, a dome for the bottom edge. */
.home .hero__arch {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 10px 10px 50% 50% / 10px 10px 41.67% 41.67%;
  background: var(--bg-deep);
}

.home .hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% 50%;
}

/* The navy label on the bottom edge of the photo. It hangs below the dome so the curve stays in view. */
.home .hero__badge {
  z-index: 2;
  left: 50%;
  bottom: -46px;
  width: max-content;
  max-width: min(100%, 300px);
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
  transform: translateX(-50%);
}

.home .hero__badge-title { font-size: 15px; }
.home .hero__badge-text { font-size: 13px; text-wrap: balance; }

@media (min-width: 761px) {
  .home .hero {
    --hero-pb: 96px;
    padding-top: 32px;
  }

  .home .hero__inner {
    grid-template-columns: 38vw minmax(0, 1fr);
    grid-template-areas:
      "title  title"
      "visual copy";
    column-gap: 32px;
    row-gap: 40px;
    align-items: start;
  }

  .home .hero__visual { width: 100%; margin-top: 0; }

  .home .hero__copy {
    justify-self: end;
    width: min(100%, 420px);
    padding-top: 12px;
  }

  .home .hero__text { font-size: 18px; }
}

@media (min-width: 1025px) {
  .home .hero__inner {
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 44px;
  }

  .home .hero__copy { width: min(100%, 460px); padding-top: 32px; }
  .home .hero__text { font-size: 19px; }
}

/* ---------- Home: stats band ---------- */

.home .stats-band {
  padding-block: clamp(44px, 5vw, 72px);
  background: var(--navy);
}

.home .stat__value {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(3.25rem, 2rem + 3.4vw, 5.25rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold);
}

.home .stat__label {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.home .stat__note {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  opacity: 1;
}

@media (min-width: 761px) {
  .home .stat:not(:first-child) { padding-left: 28px; }
}

/* ---------- Home: services ---------- */

/* One track holds the stage and the list of eight services. From 1025px they sit side by side: the stage stays
   pinned on the left while the list scrolls on the right. Below that the stage is a strip under the header and
   the list scrolls beneath it. Either way the list fills the space the stage leaves, so nothing is blank. */
.home .deck-track {
  position: relative;
  margin-top: clamp(56px, 7vw, 88px);
}

/* The header pill ends 82px from the top from 761px up, and 70px below that. --deck-top clears it. The script in
   home-2.html reads this value, so change it here only. */
.home { --deck-top: 84px; }

@media (min-width: 761px) {
  .home { --deck-top: 104px; }
}

.home .deck-stage {
  position: sticky;
  top: var(--deck-top);
  z-index: 2;
  margin-bottom: 20px;
}

/* The stacked card: two darker cards peek out above it. */
.home .deck {
  --deck-far: #DAD9D3;
  position: relative;
  isolation: isolate;
}

.home .deck__back {
  position: absolute;
  z-index: -1;
  height: 70%;
  border-radius: var(--radius-card);
  background: var(--bg-deep);
  box-shadow: 0 -1px 0 rgba(255,255,255,.6);
}

.home .deck__back--far {
  top: -26px;
  left: 7%;
  right: 7%;
  background: var(--deck-far);
}

.home .deck__back--mid {
  top: -13px;
  left: 3.5%;
  right: 3.5%;
}

/* Below 1025px the stage is a strip: number, name and an arrow. The photo is shown from 1025px up. */
.home .deck__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20,24,36,.05), 0 30px 50px -36px rgba(20,24,36,.45);
}

.home .deck__media { display: none; }

/* One photo per service, stacked in the same box. The current service's photo is on; the others fade out. */
.home .deck__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms ease;
}

.home .deck__photo.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .home .deck__photo { transition: none; }
}

.home .deck__body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.home .deck__num {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--gold-dark);
}

.home .deck__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.35rem;
  line-height: 1.02;
}

/* On phones the arrow is the link and its label is hidden. The list carries the full links. */
.home .deck__body .cta-link { flex: none; min-height: 26px; }
.home .deck__body .cta-link__label { display: none; }

@media (min-width: 761px) {
  .home .deck__card { padding: 16px 16px 16px 24px; }
  .home .deck__num { font-size: 2.5rem; }
  .home .deck__title { font-size: 1.85rem; }
  .home .deck__body .cta-link { min-height: 44px; }
  .home .deck__body .cta-link__label { display: inline; }
}

/* From 1025px the stage is a tall card on the left. It fills the window below the header, so no space under it
   is empty. The photo takes the height the text does not need. */
@media (min-width: 1025px) {
  .home .deck-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: start;
  }

  .home .deck-stage {
    height: calc(100vh - var(--deck-top) - 24px);
    min-height: 380px;
    margin-bottom: 0;
  }

  .home .deck { height: 100%; }

  .home .deck__card {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    height: 100%;
    padding: 14px;
  }

  .home .deck__media {
    display: block;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg-deep);
  }

  .home .deck__body {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 12px 10px;
  }

  .home .deck__num { font-size: 3.25rem; }

  .home .deck__title {
    flex: none;
    font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);
    line-height: .98;
  }

  .home .deck__body .cta-link { margin-top: 6px; }

  .home .deck__back--far { top: -30px; }
  .home .deck__back--mid { top: -15px; }
}

/* The eight services, as a list of cards. The card the stage shows is navy. */
.home .service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* one column at every width; styles.css sets four or two */
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home .service-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 4px 14px;
  height: auto;
  min-height: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(20,24,36,.05);
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}

/* Hovering a row shows its service on the stage (see the script in home-2.html), so the row does not lift. */
.home .service-card:hover {
  transform: none;
  box-shadow: none;
}

.home .service-card::after {
  content: "";
  justify-self: end;
  width: 22px;
  height: 22px;
  background-color: var(--gold-dark);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: background-color var(--ease);
}

.home .service-card__num {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold-dark);
}

.home .service-card__body { min-width: 0; }

.home .service-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.05;
}

.home .service-card__desc { display: none; }

.home .service-card.is-current {
  background: var(--navy);
  color: #fff;
  box-shadow: none;
}

.home .service-card.is-current .service-card__num { color: var(--gold); }
.home .service-card.is-current::after { background-color: var(--gold); }

@media (min-width: 761px) {
  .home .service-card {
    grid-template-columns: 64px minmax(0, 1fr) 24px;
    gap: 6px 18px;
    padding: 22px 26px;
  }

  .home .service-card__num { font-size: 2.25rem; }

  .home .service-card__title { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.95rem); }

  .home .service-card__desc {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
    opacity: 1;
  }

  .home .service-card.is-current .service-card__desc { color: rgba(255,255,255,.8); }
}

.home .deck__cta {
  margin: 40px 0 0;
  text-align: center;
}

/* ---------- Home: clients ---------- */

.home .clients {
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.home .clients .clients__title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
  line-height: .98;
}

.home .logo-band {
  gap: 12px;
  margin-top: 36px;
}

.home .logo-band__item {
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.home .logo-band__item--placeholder { border: 1px solid var(--line); }

@media (min-width: 1025px) {
  .home .logo-band { gap: 16px; }
}

/* ---------- Home: approach ---------- */

.home .approach .section-head { margin-bottom: clamp(36px, 5vw, 64px); }

.home .step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 14px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--fg);
}

.home .step__num {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold-dark);
}

.home .step__title { margin: 4px 0 6px; }

.home .step__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

@media (min-width: 761px) {
  .home .steps { gap: 40px 28px; }

  .home .step {
    display: block;
    padding: 22px 0 0;
    border-top-width: 1px;
  }

  .home .step__num { font-size: 4rem; }
  .home .step__title { margin: 18px 0 10px; }
}

.home .steps-footer {
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}

/* ---------- Home: credentials ---------- */

.home .credentials {
  overflow-x: clip;
}

.home .credentials .section-head { margin-bottom: clamp(32px, 5vw, 64px); }

.home .credentials__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.home .credentials__visual {
  position: relative;
  z-index: 0;
  padding-block: 40px;
}

.home .credentials__lines {
  left: calc(-1 * var(--bleed));
  right: -40px;
  top: 0;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* The pill: fully rounded ends. */
.home .credentials__pill {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-deep);
}

.home .credentials__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.home .credentials__list {
  display: grid;
  gap: 28px;
}

.home .credential {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.home .credential__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--gold-dark);
}

.home .credential__icon .icon {
  width: 28px;
  height: 28px;
}

.home .credential__label {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 1.9vw, 2.6rem);
  line-height: 1;
  color: var(--fg);
}

@media (min-width: 761px) {
  .home .credentials__visual { max-width: 600px; }
  .home .credentials__list { gap: 32px; }
}

@media (min-width: 1025px) {
  .home .credentials__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
  }

  .home .credentials__visual { max-width: none; }
}

/* ---------- Home: call-to-action band ---------- */

.home .cta-band {
  padding-block: clamp(72px, 10vw, 136px);
  background: var(--navy);
  text-align: center;
}

.home .cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.home .cta-band__body { max-width: 1000px; }

.home .cta-band__title {
  font-size: clamp(2.75rem, 1.5rem + 4.6vw, 6rem);
  line-height: .95;
  color: #fff;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .home .service-card:hover,
  .cta-link:hover .cta-link__icon { transform: none; }
}

/* TEMP: home screen switch (remove when Linda decides) */

/* Home screen 2. The pill is centred on the page, like the content, so the nav sits in the middle.
   Desktop (1025px and up): the switch sits at the far left, outside the pill. The pill narrows on
   both sides when the switch would reach it, so it stays centred.
   Tablet and phones: the pill is full width, so the switch sits inside its left end and the logo
   starts after it.
   The labels match home screen 1: long from 1280px, short below and on phones. */

:root { --temp-rail: 160px; }

@media (min-width: 761px) and (max-width: 1279px) {
  :root { --temp-rail: 192px; }
}

@media (min-width: 1280px) {
  :root { --temp-rail: 277px; }
}

/* Vertically centred on the pill. */
.temp-switch { top: 40px; pointer-events: auto; }

@media (min-width: 761px) {
  .temp-switch { top: 48px; }
}

@media (min-width: 1025px) {
  .site-header .header-inner {
    padding-left: 22px;
    padding-right: 22px;   /* equal sides, so the nav sits exactly in the middle of the pill */
    max-width: min(calc(var(--container) - 2 * var(--gutter)), calc(100vw - 2 * (var(--temp-rail) + 26px)));
  }

  .temp-switch { left: 12px; }
}

/* From 1025px the Get in touch button sits outside the pill, at the right, so the pill can stay narrow
   and the nav stays in the middle. The bar is static here so the button can use the page edge. */
@media (min-width: 1025px) {
  .site-header .header-inner { position: static; }

  .site-header .header-cta {
    position: absolute;
    top: 48px;
    right: 12px;
    transform: translateY(-50%);
  }
}

@media (min-width: 1025px) and (max-width: 1099px) {
  .site-header .nav-links { gap: 18px; }
}

/* 1280 to 1415px: the long labels take the room the wordmark needs, so the wordmark goes here. */
@media (min-width: 1280px) and (max-width: 1415px) {
  .site-header .nav-links { gap: 18px; }
}

@media (max-width: 1024px) {
  .site-header .header-inner { padding-left: calc(var(--temp-rail) + 16px); }

  .temp-switch { left: calc(var(--gutter) + 8px); }
}

/* The wordmark goes where it cannot sit beside the switch and the nav. */
@media (max-width: 559px), (min-width: 761px) and (max-width: 1599px) {
  .brand-text { display: none; }
}