/* =========================================================
   Black & White Coaching: Design System
   Premium, minimal, monochrome. White canvas, black anchors.
   ========================================================= */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* ---- Design tokens ---- */
:root {
  /* Colour: strictly monochrome to match the brand mark */
  --black: #0a0a0a;
  --ink: #141414;
  --grey-900: #1f1f1f;
  --grey-700: #4a4a4a;
  --grey-500: #767676;
  --grey-300: #d8d8d6;
  --grey-150: #ececea;
  --grey-100: #f6f6f4;
  --white: #ffffff;

  /* Type */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  /* Layout */
  --container: 1200px;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  /* Removes the browser's own default blue "tap flash" on links/buttons on
     mobile (Android Chrome in particular), so the only blue on the site is
     the intentional CTA blue below, not a system default underneath it. */
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--black);
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.05rem; }

p { color: var(--grey-700); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--grey-700); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--black);
  display: inline-block;
}

/* ---- Layout helpers ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 640px) {
  .container { padding-inline: var(--space-4); }
}

section { padding-block: var(--space-6); }
.section-tight { padding-block: var(--space-5); }
.section-alt { background: var(--grey-100); }
.section-dark { background: var(--black); color: var(--white); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.68); }
.section-dark .eyebrow { color: rgba(255,255,255,0.55); }
.section-dark .eyebrow::before { background: var(--white); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--space-2); }
.section-head h2 { margin-bottom: var(--space-2); }

.grid { display: grid; gap: var(--space-4); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.9rem;
  min-height: 52px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--ink); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
/* "Start Online Coaching" CTA: brand blue per Jonny (#0084FF), the one
   accent colour against an otherwise monochrome palette so it stands out
   as the site's one conversion action. Note: white text on #0084FF measures
   ~3.7:1 contrast, below the 4.5:1 WCAG AA guideline for this text size.
   Left as requested; a slightly deeper #006ED6 or #0066CC would hit AA
   (~5:1) while staying the same blue if that ever needs revisiting. */
.btn-cta { background: #0084FF; border-color: #0084FF; color: var(--white); }
.btn-cta:hover { background: #0074e0; border-color: #0074e0; }
.btn-ghost-light { border-color: var(--white); color: var(--white); }
.btn-ghost-light:hover { background: var(--white); color: var(--black); }
.btn-block { width: 100%; }
.btn-lg { padding: 1.15rem 2.4rem; font-size: 1rem; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid background, not a translucent/blurred one: a backdrop-filter here
     would force any position:fixed descendant (the mobile menu panel) to be
     sized relative to this 84px bar instead of the full screen, which is
     what was causing the mobile menu to render with no visible background. */
  background: var(--white);
  border-bottom: 1px solid var(--grey-150);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-links a {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  position: relative;
  padding: 0.4rem 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--black);
  transition: right 0.25s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--black); }
.nav-cta { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px; height: 40px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--black);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span { top: 19px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links { position: fixed; inset: 84px 0 0 0; background: var(--white); flex-direction: column; justify-content: flex-start; align-items: stretch; padding: var(--space-4) var(--space-3); gap: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
  .nav-links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a { padding: 1.1rem 0; border-bottom: 1px solid var(--grey-150); font-size: 1.05rem; }
  .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: block; }
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--space-6) var(--space-6);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}
.hero h1 { margin-block: var(--space-3) var(--space-3); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-media {
  position: relative;
  border: 1px solid var(--grey-150);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--grey-100);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  background: var(--white);
  padding: 0.65rem 1rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--grey-150);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Keep the same portrait ratio as desktop (4/5). The photo itself is
     portrait (1350x1800): forcing it into a wide 16/10 box on mobile meant
     object-fit: cover had to crop away roughly half the image height
     (centred top/bottom), which is what was cutting the head off. */
  .hero-media { order: -1; aspect-ratio: 4/5; max-width: 420px; margin-inline: auto; }
}

/* ---- Stat bar (social proof) ---- */
.stat-bar {
  border-top: 1px solid var(--grey-150);
  border-bottom: 1px solid var(--grey-150);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  border-left: 1px solid var(--grey-150);
}
.stat:first-child { border-left: none; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--black);
  display: block;
}
.stat .label {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--grey-500);
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 700px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(odd) { border-left: none; }
  .stat { border-top: 1px solid var(--grey-150); }
  .stat:nth-child(-n+2) { border-top: none; }
}

/* ---- Benefit / feature cards ---- */
.card {
  border: 1px solid var(--grey-150);
  padding: var(--space-4);
  background: var(--white);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--black); transform: translateY(-4px); }
.card .num-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--grey-500);
  margin-bottom: var(--space-2);
  display: block;
}
.card h3 { margin-bottom: 0.65rem; }
.card p { font-size: 0.96rem; }
.icon-mark {
  width: 46px; height: 46px;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.icon-mark svg { width: 22px; height: 22px; }

/* ---- Services ---- */
.service-card {
  border: 1px solid var(--grey-150);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card .service-body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.service-card h3 { margin-bottom: 0.6rem; }
.service-card p { font-size: 0.95rem; margin-bottom: var(--space-3); }
.service-card ul { margin-bottom: var(--space-3); }
.service-card ul li {
  font-size: 0.9rem;
  color: var(--grey-700);
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.45rem;
}
.service-card ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--black);
}
.service-card .service-cta { margin-top: auto; }
.service-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--black);
  margin-bottom: var(--space-3);
  align-self: flex-start;
}

/* ---- Process / steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--space-4); border-top: 2px solid var(--black); }
.step .step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--grey-300);
  display: block;
  margin-bottom: var(--space-2);
}
.step h4 { margin-bottom: 0.5rem; }
.step p { font-size: 0.92rem; }

/* ---- Results / transformation grid ---- */
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .result-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .result-grid { grid-template-columns: 1fr; } }
.result-card { border: 1px solid var(--grey-150); overflow: hidden; background: var(--white); }
.result-media { aspect-ratio: 4/5; overflow: hidden; background: var(--grey-100); }
/* object-fit: contain, not cover: these are before/after collage photos
   (two side-by-side shots in one file), often wider than the 4:5 card.
   Cover was cropping into the "before" and "after" shots from both edges,
   which is the last thing a results/proof photo should do. Contain shows
   the full comparison, letterboxed on the card's grey background. */
.result-media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease); }
.result-card:hover .result-media img { transform: scale(1.04); }
.result-caption { padding: 0.9rem 1.1rem; font-size: 0.85rem; font-weight: 600; color: var(--grey-700); }

/* ---- Testimonials ---- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card {
  border: 1px solid var(--grey-150);
  padding: var(--space-4);
  background: var(--white);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.stars { letter-spacing: 0.15em; margin-bottom: var(--space-3); font-size: 0.95rem; color: var(--black); }
.testi-quote { font-size: 1rem; color: var(--ink); margin-bottom: var(--space-4); flex: 1; }
.testi-quote::before { content: '\201C'; }
.testi-quote::after { content: '\201D'; }
.testi-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--grey-150); padding-top: var(--space-3); }
.testi-name { font-weight: 700; font-size: 0.92rem; }
.testi-service { font-size: 0.78rem; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- FAQ (accordion) ---- */
.faq-list { max-width: 780px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--grey-150); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  background: none; border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--black);
}
.faq-q .plus { flex-shrink: 0; font-size: 1.4rem; font-weight: 300; transition: transform 0.25s var(--ease); }
.faq-item.is-open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.faq-a p { padding-bottom: var(--space-3); max-width: 640px; }
.faq-item.is-open .faq-a { max-height: 320px; }

/* ---- CTA band ---- */
.cta-band {
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--space-2); }
.cta-band p { max-width: 560px; margin-inline: auto; margin-bottom: var(--space-4); }
.cta-band .hero-actions { justify-content: center; }

/* ---- Footer ---- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.7); padding-block: var(--space-6) var(--space-4); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 26px; margin-bottom: var(--space-3); filter: invert(1); }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.9rem; max-width: 280px; }
.footer-col h4 { color: var(--white); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col a { color: rgba(255,255,255,0.65); font-size: 0.92rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: 0.8rem; color: rgba(255,255,255,0.45); }

/* ---- Page hero (inner pages) ---- */
.page-hero { padding-block: var(--space-5) var(--space-5); border-bottom: 1px solid var(--grey-150); }
.page-hero .eyebrow { margin-bottom: var(--space-2); }
.page-hero h1 { margin-bottom: var(--space-2); }
.page-hero p { max-width: 620px; }
.breadcrumb { font-size: 0.82rem; color: var(--grey-500); margin-bottom: var(--space-3); }
.breadcrumb a { color: var(--grey-500); }
.breadcrumb a:hover { color: var(--black); }

/* ---- About page specifics ---- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
/* Desktop: some sections put the photo on the left instead of the right,
   for a left-right zig-zag down the page. */
.about-grid .media-first { order: -1; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  /* On a single stacked column the zig-zag has no visual purpose, and left
     it looking random (image before text on some sections, after on
     others). Force the same order everywhere on mobile: text, then photo. */
  .about-grid .media-first { order: 0; }
}
.about-media { border: 1px solid var(--grey-150); overflow: hidden; aspect-ratio: 4/5; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.credential-list { margin-top: var(--space-4); display: grid; gap: 0.9rem; }
.credential-list li { display: flex; gap: 0.8rem; font-size: 0.96rem; color: var(--grey-700); align-items: flex-start; }
.credential-list li::before { content: ''; width: 8px; height: 8px; background: var(--black); margin-top: 0.5em; flex-shrink: 0; }

/* ---- Video embed (click-to-load facade, keeps YouTube's JS off the
   initial page load so it doesn't cost page speed until someone presses play) ---- */
.video-embed {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--grey-900);
  border: 1px solid var(--grey-150);
  overflow: hidden;
}
.yt-facade {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-color: var(--grey-900);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  transition: background 0.25s var(--ease);
}
.yt-facade:hover::after,
.yt-facade:focus-visible::after { background: rgba(0,0,0,0.42); }
.yt-facade .play-btn {
  position: relative;
  z-index: 1;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.yt-facade .play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.video-embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* ---- Gallery page ---- */
.gallery-filter { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--space-5); }
.filter-btn {
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--grey-300);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--white);
  transition: all 0.2s;
}
.filter-btn.active, .filter-btn:hover { border-color: var(--black); background: var(--black); color: var(--white); }
.masonry { column-count: 3; column-gap: var(--space-3); }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }
.masonry-item { display: block; width: 100%; border: 1px solid var(--grey-150); overflow: hidden; break-inside: avoid; margin-bottom: var(--space-3); }
.masonry-item img { width: 100%; height: auto; transition: transform 0.5s var(--ease); }
.masonry-item:hover img { transform: scale(1.03); }
.masonry-item .cap { padding: 0.85rem 1rem; font-size: 0.82rem; font-weight: 600; color: var(--grey-700); border-top: 1px solid var(--grey-150); }
/* Self-hosted video clips in the gallery: same frame as a photo, native
   controls only (no autoplay, no custom player) so it costs nothing on
   page load until someone presses play. preload="metadata" on the <video>
   tag itself fetches just the header, not the video bytes. */
.masonry-item video { width: 100%; height: auto; display: block; background: var(--grey-100); }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--space-3); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--black); }
.field .hint { font-size: 0.78rem; color: var(--grey-500); font-weight: 400; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--grey-300);
  padding: 0.85rem 1rem;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--black);
}
.field textarea { min-height: 120px; resize: vertical; }
.radio-group { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.92rem; color: var(--grey-700); }
.radio-group input { width: 16px; height: 16px; accent-color: var(--black); }
fieldset { border: none; }
legend { font-size: 0.85rem; font-weight: 700; color: var(--black); margin-bottom: 0.6rem; padding: 0; }

.enquire-layout { display: grid; grid-template-columns: 1fr 0.62fr; gap: var(--space-6); align-items: start; }
@media (max-width: 960px) { .enquire-layout { grid-template-columns: 1fr; } }
.side-card { border: 1px solid var(--grey-150); padding: var(--space-4); margin-bottom: var(--space-3); }
.side-card h4 { margin-bottom: 0.6rem; }
.side-card p { font-size: 0.92rem; }
.contact-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; font-size: 0.92rem; }
.contact-row:last-child { margin-bottom: 0; }

.form-success {
  display: none;
  border: 1.5px solid var(--black);
  padding: var(--space-4);
  text-align: center;
}
.form-success.is-visible { display: block; }
.form-success.is-visible + form { display: none; }

/* ---- Utility ---- */
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
/* Content is visible by default. Never dependent on JS running.
   JS only adds ".pending" to elements it can safely animate, then
   removes it on scroll-into-view. No JS / slow JS = content still shows. */
.reveal { opacity: 1; transform: none; }
.reveal.pending { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.pending.is-visible { opacity: 1; transform: translateY(0); }
.badge-strip { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; justify-content: center; }
.badge-strip span { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--grey-500); letter-spacing: 0.03em; text-transform: uppercase; }

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: 1rem 1.5rem;
  z-index: 1000;
}
.skip-link:focus { left: var(--space-3); top: var(--space-2); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}