/* ==========================================================================
   Strategic Science Solutions — brand system
   Palette (brand kit): navy #092557 · gold #F5A201 · ink #323232 · white
   Type: Bernoru Black Ultra Expanded (display) · Avenir Light (body),
   self-hosted per the brand kit. Personal-use licences for this preview;
   commercial licences to be purchased before launch.
   ========================================================================== */

/* The brand kit's headings use the standard-width Bernoru Black, but only
   the Ultra Expanded cut is available free. This file is that cut scaled
   to 0.558 horizontal — measured from the kit's own specimen, where it
   overlays the genuine glyphs almost exactly. Replace with the licensed
   Bernoru family at launch. TrueType outlines (CFF hinting wobbled the
   baseline at small sizes); the wide weight range stops faux-bolding. */
@font-face {
  font-family: "Bernoru";
  src: url("assets/fonts/bernoru-std.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Light cut only, capped at 500 so 600/700 labels still synthesise bolder. */
@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir-light.woff2") format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #092557;
  --navy-deep: #06193b;
  --navy-panel: #0c2e66;
  --gold: #f5a201;
  --gold-deep: #d68e01;
  --ink: #323232;
  --ink-soft: #5b6270;
  --paper: #ffffff;
  --mist: #f2f5fa;
  --line: #dde4ef;

  --font-display: "Bernoru", "Arial Black", sans-serif;
  --font-body: "Avenir", "Avenir Next", "Segoe UI", sans-serif;

  --radius: 4px;
  --shadow: 0 14px 40px rgba(9, 37, 87, 0.10);
  --container: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------- type roles ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}

.section-lede {
  max-width: 42em;
  color: var(--ink-soft);
}

/* the lightbulb-base motif from the logo */
.tri-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 1.1rem 0 1.4rem;
}
.tri-bar i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--gold);
}
.tri-bar i:nth-child(1) { width: 40px; }
.tri-bar i:nth-child(2) { width: 28px; }
.tri-bar i:nth-child(3) { width: 16px; }

.section-head { max-width: 46em; }

.text-gold { color: var(--gold); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); }

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

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

.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.08); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.72rem; }
.btn-block { width: 100%; }

/* ---------- preview ribbon ---------- */

.preview-note {
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
  position: relative;
}

.brand-logo img { width: auto; height: 44px; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
}

.nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--navy);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.nav-link:hover { border-bottom-color: var(--gold); }

/* keep the header CTA compact so the nav holds one line down to 960px */
.header .btn { font-size: 0.74rem; }

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.mobile-toggle span {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90rem 40rem at 80% -10%, var(--navy-panel), transparent 60%),
    linear-gradient(160deg, var(--navy) 55%, var(--navy-deep));
  color: var(--paper);
  padding-block: 5.5rem 5rem;
}

.hero-helix,
.band-helix {
  position: absolute;
  top: -8%;
  right: -3rem;
  height: 130%;
  width: auto;
  transform: rotate(14deg);
  pointer-events: none;
}

.strand,
.rungs path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.055;
}
.rungs path { stroke-width: 5; opacity: 0.045; }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(1.75rem, 3.9vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 1.3rem;
}

.hero-lede {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}

.cred-bar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
}
.cred-bar li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.78);
}
.cred-bar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* hero profile panel — echo of the brand business card */
.profile-panel {
  position: relative;
  background: linear-gradient(170deg, var(--navy-panel), var(--navy-deep));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.profile-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.2rem;
  border: 3px solid var(--gold);
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}

.profile-role {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
  margin-top: 0.2rem;
}

.profile-panel .tri-bar { align-items: center; margin: 1rem 0; }

.profile-line {
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.2rem;
}

.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 160ms ease, color 160ms ease;
}
.linkedin-link:hover { color: var(--gold); border-color: var(--gold); }
.linkedin-link svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- sections ---------- */

.section { padding-block: 5rem; }
.section-mist { background: var(--mist); }

.section-navy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 60%, var(--navy-deep));
  color: var(--paper);
}
.section-navy .section-title { color: var(--paper); }
.on-navy { color: rgba(255, 255, 255, 0.88); max-width: 36em; }
.on-navy strong { color: var(--paper); }

.section .section-head { margin-bottom: 3rem; }

/* ---------- services ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.service-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.service-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mist);
  color: var(--navy);
  margin-bottom: 1.2rem;
}
.service-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.service-body {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.service-list {
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.service-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.93rem;
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 14px;
  height: 14px;
  background-color: var(--gold);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg>') center / contain no-repeat;
}

/* ---------- about ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about-text p { margin-bottom: 1.1rem; }
.about-text strong { color: var(--navy); }
.about-text .btn { margin-top: 1.2rem; }

.chip-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.2rem 0 0.4rem;
}
.chip-row li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

.timeline {
  list-style: none;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 1.6rem;
  padding-left: 1.6rem;
  margin-top: 0.4rem;
}

.timeline-item {
  position: relative;
  display: grid;
  gap: 0.1rem;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1.6rem - 7px);
  top: 0.4em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--mist);
}

.timeline-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.timeline-role { font-weight: 700; color: var(--navy); }
.timeline-org { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- strategy strolls ---------- */

.strolls-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.strolls-grid .on-navy { margin-bottom: 1.8rem; }
.strolls-grid .hero-actions { margin-bottom: 0; }

.strolls-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 2rem;
}

.strolls-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  margin-bottom: 1.1rem;
}

.strolls-note { font-size: 0.95rem; }

/* ---------- feedback ---------- */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.quote-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 2.4rem 2rem 2rem;
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  left: 1.4rem;
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--gold);
}
.quote-card blockquote {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-info > p { margin-bottom: 2rem; max-width: 32em; }

.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}

.contact-icon {
  flex: none;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--navy);
}
.contact-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-title {
  display: block;
  font-weight: 700;
  color: var(--navy);
}
.contact-desc { display: block; font-size: 0.92rem; color: var(--ink-soft); }
.contact-desc a { color: var(--navy); font-weight: 600; }

.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow);
}

.form-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.4rem;
}

.form-group { margin-bottom: 1.1rem; }

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 162, 1, 0.22);
}

textarea.form-control { resize: vertical; }

.form-note {
  margin-top: 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--mist);
  border-left: 3px solid var(--gold);
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
}

.form-caption {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.8);
  padding-block: 4rem 2rem;
  font-size: 0.94rem;
}

.footer .band-helix { top: auto; bottom: -20%; right: -4rem; transform: rotate(-12deg); }

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-brand img { width: auto; height: 40px; margin-bottom: 1.2rem; }
.footer-brand p { max-width: 34em; font-size: 0.9rem; }

.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.footer-links { list-style: none; display: grid; gap: 0.5rem; }
.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 160ms ease;
}
.footer-links a:hover { color: var(--gold); }

/* Its own row above the copyright line, because the company disclosure that
   now sits there is long enough that squeezing links alongside it wraps
   badly. */
.footer-legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.6rem;
  font-size: 0.85rem;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--gold); }

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.build-hash {
  position: relative;
  display: block;
  text-align: center;
  margin-top: 1.6rem;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}
.build-hash[hidden] { display: none; }

.partner-credit a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-decoration: none;
}
.partner-credit a:hover { color: var(--gold); }

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

[data-rise] {
  animation: rise 640ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--d, 0) * 110ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise] { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .service-card:hover { transform: none; }
}

.prose-column { max-width: 46rem; }
.prose h3:first-child { margin-top: 0; }

/* ---------- packages and prices ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.pricing-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.pricing-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.pricing-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.pricing-card.is-featured {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.pricing-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.2rem;
}

.pricing-list { margin-bottom: 1.6rem; }

/* The price is pushed to the bottom of every box, so all three sit on the same
   line however many bullets each one has. Without this a pricing table stops
   reading as a comparison. */
.pricing-price {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  /* A floor so the dividing lines sit level across the row even when one price
     wraps to two lines and another has no note under it. Bottom-aligned inside
     that space, so the prices themselves still line up. */
  min-height: 5.4rem;
  display: flex;
  flex-direction: column;
  /* Top aligned, NOT bottom. Bottom aligning lines the last line of each block
     up, which means a price with a note under it sits higher than one without,
     and "£149" ends up level with "per month" rather than with "From £449".
     Anchoring the top puts every figure on the same line and lets the notes
     hang below. */
  justify-content: flex-start;
}

.pricing-figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
  text-wrap: balance;
}

/* A price that is words rather than a figure is much longer, and Bernoru is a
   wide face, so it would wrap to two lines and break the row. Set smaller so it
   stays on one line and keeps its place in the row. Applied by the template on
   length, so it also covers whatever she types in future. */
.pricing-figure.is-long {
  /* Only as small as it needs to be to stay on one line. Dropping it further
     makes the box read as the cheap option rather than the bespoke one. */
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.25;
}

.pricing-note {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.pricing-card .btn { margin-top: 1.2rem; }

.pricing-footnote {
  margin-top: 1.75rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 46em;
}

@media (max-width: 960px) {
  .pricing-grid,
  .pricing-grid[data-columns="2"],
  .pricing-grid[data-columns="4"] { grid-template-columns: 1fr; }
  /* Stacked, the price no longer needs pushing down to line up with anything. */
  .pricing-price { margin-top: 1rem; }
}

/* ---------- responsive ---------- */


@media (max-width: 960px) {
  .hero-grid,
  .about-grid,
  .strolls-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 2.6rem; }

  /* stacked grid items must be allowed to shrink below their
     min-content width or a wide child overflows the viewport */
  .hero-grid > *,
  .about-grid > *,
  .strolls-grid > *,
  .contact-grid > * { min-width: 0; }

  .profile-panel { max-width: 420px; margin-inline: auto; }

  .mobile-toggle { display: flex; }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 1.5rem 1.2rem;
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu li { padding-block: 0.35rem; }
  .nav-menu .btn { margin-top: 0.6rem; text-align: center; }

  .hero { padding-block: 4rem 3.5rem; }
  .hero-helix { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .services-grid,
  .quote-grid { grid-template-columns: 1fr; }
  .section { padding-block: 3.5rem; }
  .brand-logo img { height: 36px; }

  /* long labels (VISIT STRATEGYSTROLLS.CO.UK) must fit a 390px screen */
  .btn { white-space: normal; font-size: 0.74rem; text-align: center; }
}

/* ==========================================================================
   News
   ========================================================================== */

.news-head { padding-block: 4rem 3.5rem; }
.news-head .section-title { color: var(--paper); }
.news-head .section-lede { color: rgba(255, 255, 255, 0.86); }

.article-list { display: grid; gap: 2.5rem; }

.article-card {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.75rem;
  align-items: start;
}
.article-card:not(:last-child) { border-bottom: 1px solid var(--line); padding-bottom: 2.5rem; }

/* With no picture, the body is the only child and should take the whole width
   rather than sitting in the column the image would have used. */
.article-card-body:only-child { grid-column: 1 / -1; }

.article-card-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}
.article-card-media img { width: 100%; height: 100%; object-fit: cover; }

.article-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.article-meta a { color: var(--ink-soft); }

.article-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.article-card-title a { color: var(--navy); text-decoration: none; }
.article-card-title a:hover { color: var(--gold-deep); }

.article-card-excerpt { color: var(--ink-soft); margin-bottom: 0.9rem; max-width: 46em; }

.article-more {
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.article-more:hover { color: var(--gold-deep); }

.article-list-compact { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); display: grid; gap: 1.5rem; }
.article-list-compact .article-card { grid-template-columns: 1fr; border: 0; padding-bottom: 0; }

.pagination {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- a single article ---------- */

.article-page { padding-block: 3.5rem 4rem; }
.article-container { max-width: 46rem; }

.article-title {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}

.article-standfirst {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.article-hero { width: 100%; border-radius: var(--radius); margin-bottom: 2rem; }

.article-body, .prose { font-size: 1.05rem; line-height: 1.75; }
.article-body p, .prose p { margin-bottom: 1.25rem; }
.article-body h3, .prose h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 2rem 0 0.85rem;
}
.article-body h4, .prose h4 { font-weight: 600; color: var(--navy); margin: 1.5rem 0 0.6rem; }
.article-body ul, .article-body ol, .prose ul, .prose ol { margin: 0 0 1.25rem 1.25rem; }
.article-body li, .prose li { margin-bottom: 0.4rem; }
.article-body blockquote, .prose blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1.25rem;
  margin: 1.75rem 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.article-body a, .prose a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); }

.article-origin { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1.75rem; }

.article-cta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.article-cta p { font-weight: 500; color: var(--navy); margin: 0; }

/* Quote attribution, added with the news work because the block gained the
   field at the same time. */
.quote-card figcaption {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--navy);
}

@media (max-width: 720px) {
  .article-card { grid-template-columns: 1fr; gap: 1rem; }
  /* With no picture, the body is the only child and should take the whole width
   rather than sitting in the column the image would have used. */
.article-card-body:only-child { grid-column: 1 / -1; }

.article-card-media { aspect-ratio: 16 / 9; }
  .article-cta { flex-direction: column; align-items: flex-start; }
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is display:none, which would defeat the point. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
  line-height: 1.5;
}
.form-note[hidden] { display: none; }
.form-note.is-error { color: #b3261e; }
.form-note.is-ok { color: #1c7a4a; }