/*
Theme Name: Marley Marketing
Theme URI: https://marleymarketing.co.uk
Author: Marley Marketing
Description: Custom theme for Marley Marketing
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: marleymarketing
*/

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* Brand colours */
  --color-accent:    #FF3131;
  --color-black:     #000000;
  --color-white:     #FFFFFF;

  /* Supporting greys */
  --color-grey-100:  #F7F7F7;
  --color-grey-200:  #E8E8E8;
  --color-grey-400:  #A0A0A0;
  --color-grey-600:  #555555;
  --color-grey-800:  #222222;

  /* Typography */
  --font-family:          'Montserrat', sans-serif;
  --font-body-size:       17px;
  --font-body-weight:     400;
  --font-heading-weight:  600;

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Layout */
  --container-max:     1200px;
  --container-pad:     1.5rem;

  /* Header */
  --header-height:     72px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
}


/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  font-size: var(--font-body-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-body-weight);
  font-size: 1rem;
  color: var(--color-black);
  background-color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-black);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-accent);
}

.u-nowrap {
  white-space: nowrap;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
}

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-heading-weight);
  color: var(--color-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin-bottom: var(--space-4);
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: var(--font-heading-weight);
}

small {
  font-size: var(--text-sm);
}

/* Responsive heading sizes */
@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
  h4 { font-size: var(--text-2xl); }
}


/* ============================================
   LAYOUT
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-main {
  min-height: 60vh;
  padding-block: var(--space-16);
}


/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn:disabled {
  background-color: var(--color-grey-400);
  border-color: var(--color-grey-400);
  color: var(--color-white);
  cursor: not-allowed;
}

/* Primary — accent filled */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* Secondary — outline */
.btn-secondary {
  background-color: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* Ghost — accent outline */
.btn-ghost {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--color-accent);
  color: var(--color-white);
}


/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-grey-200);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Branding */
.site-branding {
  flex-shrink: 0;
}

.site-branding .custom-logo-link img,
.site-branding .custom-logo-link {
  display: block;
}

.site-branding .custom-logo-link img {
  max-height: 60px;
  width: auto;
}

.site-logo {
  display: block;
}

.site-logo__img {
  max-height: 60px;
  width: auto;
}

/* Primary nav */
.primary-nav {
  display: none;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-grey-200);
  padding: var(--space-4) 0;
}

.primary-nav.is-open {
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-list li a {
  display: block;
  padding: var(--space-3) var(--container-pad);
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-black);
  transition: color var(--transition-fast);
}

.nav-list li a:hover,
.nav-list li a:focus,
.nav-list li a.current-menu-item {
  color: var(--color-accent);
}

/* Hamburger toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--space-2);
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-black);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Desktop nav — 768px+ */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    display: flex !important;
    position: static;
    background: none;
    border: none;
    padding: 0;
    align-items: center;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .nav-list li a {
    padding: var(--space-2) var(--space-3);
  }
}

@media (min-width: 1200px) {
  .nav-list {
    gap: var(--space-2);
  }

  .nav-list li a {
    padding: var(--space-2) var(--space-4);
  }
}


/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-10);
  margin-top: auto;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

.footer-brand {
  flex-shrink: 0;
}

.footer-logo {
  display: block;
}

.footer-logo__img {
  max-height: var(--space-12);
  width: auto;
}

.site-footer .custom-logo-link img {
  max-height: var(--space-12);
  width: auto;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-grey-400);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-contact a:hover,
.footer-contact a:focus {
  color: var(--color-accent);
}

.footer-bottom {
  border-top: 1px solid var(--color-grey-800);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.footer-copyright,
.footer-legal {
  font-size: var(--text-xs);
  color: var(--color-grey-400);
  line-height: 1.6;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover,
.footer-legal a:focus {
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-contact {
    flex-direction: row;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}


/* ============================================
   BUTTON VARIANT — on accent background
   ============================================ */

.btn-on-accent {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-on-accent:hover,
.btn-on-accent:focus {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}


/* ============================================
   SHARED — SCROLL REVEAL
   ============================================ */

/* Scroll-in reveal (progressive enhancement), used across the homepage
   and Case Studies page. JS adds .js-reveal to <body> once it confirms
   it can animate, then .reveal to each target element, then .is-visible
   when it scrolls into view. Without JS, or with reduced motion,
   content stays fully visible — nothing here overrides the browser
   default of opacity: 1. */
@media (prefers-reduced-motion: no-preference) {
  body.js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  body.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================
   HOMEPAGE — shared
   ============================================ */

.hp-main {
  padding-block: 0;
}

.hp-section-heading {
  margin-bottom: var(--space-10);
}

/* ============================================
   HOMEPAGE — 1. Hero
   ============================================ */

.hp-hero {
  padding-block: var(--space-20);
  background-color: var(--color-white);
  overflow: hidden;
}

.hp-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

/* Photo sits above text on mobile via order */
.hp-hero__graphic {
  order: -1;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.hp-hero__photo-ring {
  padding: 4px;
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.hp-hero__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hp-hero__heading {
  margin-bottom: var(--space-6);
}

.hp-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-grey-600);
  margin-bottom: var(--space-8);
  max-width: 60ch;
}

.hp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .hp-hero {
    padding-block: var(--space-24);
  }

  .hp-hero__inner {
    grid-template-columns: 55fr 45fr;
    align-items: center;
    gap: var(--space-12);
    min-height: 420px;
    justify-items: start;
    text-align: left;
  }

  .hp-hero__graphic {
    order: 0;
    margin-bottom: 0;
  }

  .hp-hero__photo-ring {
    padding: 6px;
    border: 4px solid var(--color-accent);
    width: 440px;
    height: 440px;
  }

  .hp-hero__ctas {
    justify-content: flex-start;
  }
}


/* ============================================
   HOMEPAGE — 2. Client logos
   ============================================ */

.hp-hero-quote {
  padding-block: 0 var(--space-12);
  background-color: var(--color-white);
}

.hp-hero-quote .hp-testimonials__pull-quote {
  margin-top: 0;
  margin-bottom: 0;
}

.hp-logos {
  padding-block: var(--space-10) var(--space-12);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-grey-200);
}

.hp-logos__kicker {
  font-size: var(--text-xs);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  text-align: center;
  margin-bottom: var(--space-8);
}

.hp-logos__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--space-8) var(--space-4);
}

.hp-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-logos__img {
  max-height: var(--space-12);
  width: auto;
}

@media (min-width: 768px) {
  .hp-logos {
    padding-block: var(--space-12) var(--space-16);
  }

  .hp-logos__row {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6);
  }
}


/* ============================================
   HOMEPAGE — 3. Metrics strip
   ============================================ */

/* Same padding-block as .hp-work — the other grey-background,
   card-grid section on this page — now that this section has a real
   H2 + card treatment rather than a flat eyebrow strip */
.hp-metrics {
  background-color: var(--color-grey-100);
  padding-block: var(--space-20);
}

/* Single column on mobile — the headlines are full sentences now,
   not short figures, so a 2-up grid left too little room per item */
.hp-metrics__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-8) var(--space-6);
}

/* Each item subgrids the parent's 3 row tracks (headline / client /
   label) so the label always starts on the same track across items,
   whether or not that item has a client row in between. Because the
   row heights are shared and the frame padding below is identical
   for every item, this also makes all 4 cards equal height for free */
.hp-metrics__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: var(--space-2);
}

.hp-metrics__number {
  grid-row: 1;
  align-self: start;
  /* Red, matching the results cards on services/case-studies — was
     black, which was the main reason this section read as detached
     from the rest of the site.
     Capped at 22px (down from 32px) — the card's own padding
     (space-10 at desktop, shared with .srv-proof) eats into the
     ~226-270px column width more than it first looks; 22px is as far
     as this gets column 1 towards 2 lines without going small enough
     to stop reading as a headline. See the final report for the
     honest fit assessment */
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-accent);
}

.hp-metrics__number--stat {
  /* Narrowed to match the reduced base range above, so the numeric
     headline still reads as "biggest" but proportionately, not as an
     unrelated scale */
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Optional — omitted entirely in the markup for items with no
   client result behind them, rather than rendered empty. Deliberately
   quiet: no bold, smaller than the other text-xs labels in the site
   (there's no smaller step in the type scale), muted grey with no
   underline at rest, underlining only on hover/focus so it still
   reads as clickable without competing with the headline or label */
.hp-metrics__client {
  grid-row: 2;
  align-self: start;
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--font-body-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-400);
}

.hp-metrics__client a {
  color: var(--color-grey-400);
  text-decoration: none;
}

.hp-metrics__client a:hover,
.hp-metrics__client a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Fourth tile only — this one is credited to Marley Marketing rather
   than a client, so it shows the site's square icon mark, centered,
   in place of a name/link. Not a link (no case study to point to),
   so no hover state and no underline, unlike the other three */
.hp-metrics__client--self {
  display: flex;
  justify-content: center;
}

.hp-metrics__client-logo {
  display: block;
  width: 64px;
  height: 64px;
  /* contain, not cover — the source is a mark-plus-wordmark lockup,
     not a photo, so it shouldn't be cropped. This version isn't
     square (523x384), so contain letterboxes it within the box
     rather than distorting it */
  object-fit: contain;
  flex-shrink: 0;
}

.hp-metrics__label {
  grid-row: 3;
  align-self: start;
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  max-width: none;
}

/* Tablet gets 2 columns rather than jumping straight to 4 — at
   ~768px, 4 columns leaves so little width per item that even the
   clamped headline could still wrap to 3 lines */
@media (min-width: 768px) {
  .hp-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .hp-metrics__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------
   Lighter alternative: no card containers, thin divider rules
   instead. Not used by default — add "hp-metrics--dividers" to the
   <section class="hp-metrics"> element to switch. The divider is
   simplest to reason about at the 4-column desktop width; at 2-col
   tablet and single-col mobile it falls back to a top border between
   wrapped/stacked rows, which is a reasonable approximation rather
   than a full per-breakpoint grid of dividers.
   --------------------------------------------------------------- */
.hp-metrics--dividers .hp-metrics__item {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.hp-metrics--dividers .hp-metrics__item:not(:first-child) {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-grey-200);
}

@media (min-width: 1024px) {
  .hp-metrics--dividers .hp-metrics__item {
    padding-top: 0;
    padding-left: var(--space-8);
    border-top: none;
    border-left: 1px solid var(--color-grey-200);
  }

  .hp-metrics--dividers .hp-metrics__item:first-child {
    padding-left: 0;
    border-left: none;
  }
}


/* ============================================
   HOMEPAGE — 4. What I do
   ============================================ */

.hp-services {
  padding-block: var(--space-20);
}

.hp-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.hp-services__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}

.hp-services__card:hover {
  border-color: var(--color-grey-400);
}

.hp-services__icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.hp-services__title {
  font-size: var(--text-lg);
  font-weight: var(--font-heading-weight);
  line-height: 1.3;
  margin: 0;
}

.hp-services__desc {
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  margin: 0;
  max-width: none;
}

.hp-services__footer {
  text-align: center;
}

@media (min-width: 768px) {
  .hp-services__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hp-services__footer {
    text-align: left;
  }
}


/* ============================================
   HOMEPAGE — 5. Case studies
   ============================================ */

.hp-work {
  padding-block: var(--space-20);
  background-color: var(--color-grey-100);
}

.hp-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.hp-work__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-grey-200);
}

.hp-work__sector {
  font-size: var(--text-xs);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-400);
}

.hp-work__client {
  font-size: var(--text-2xl);
  margin: 0;
}

.hp-work__stat {
  font-size: var(--text-lg);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent);
  margin: 0;
  max-width: none;
}

.hp-work__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-black);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-grey-200);
  transition: color var(--transition-fast);
}

.hp-work__link:hover,
.hp-work__link:focus {
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .hp-work__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================
   HOMEPAGE — 6. About strip
   ============================================ */

.hp-about {
  padding-block: var(--space-20);
}

.hp-about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.hp-about__image-wrap {
  max-width: 360px;
}

.hp-about__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.hp-about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

.hp-about__content p {
  max-width: 58ch;
  color: var(--color-grey-600);
}

.hp-about__content .hp-section-heading {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hp-about__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-16);
  }

  .hp-about__image-wrap {
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .hp-about__inner {
    grid-template-columns: 420px 1fr;
  }
}


/* ============================================
   HOMEPAGE — 7. Testimonials
   ============================================ */

.hp-testimonials {
  padding-block: var(--space-16);
  background-color: var(--color-grey-100);
}

.hp-testimonials__heading {
  text-align: center;
}

.hp-testimonials__pull-quote {
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
  text-align: center;
}

.hp-testimonials__pull-quote-text {
  max-width: 900px;
  margin: 0 auto var(--space-5);
  font-size: var(--text-2xl);
  line-height: 1.4;
  color: var(--color-black);
}

.hp-testimonials__pull-quote-highlight {
  color: var(--color-accent);
}

.hp-testimonials__pull-quote-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hp-testimonials__pull-quote-cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-style: normal;
}

.hp-testimonials__pull-quote-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-black);
}

.hp-testimonials__pull-quote-company {
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.hp-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.hp-testimonial {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.hp-testimonial__quote {
  flex: 1 0 auto;
  margin-bottom: var(--space-4);
  max-width: none;
}

.hp-testimonial__quote-text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-grey-800);
  text-align: left;
  max-width: none;
}

.hp-testimonial__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hp-testimonial__link:hover .hp-testimonial__name {
  color: var(--color-accent);
}

.hp-testimonial__link:hover .hp-testimonial__role {
  text-decoration: underline;
}

.hp-testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-style: normal;
}

.hp-testimonial__name {
  font-weight: 700;
  color: var(--color-black);
  transition: color var(--transition-fast);
}

.hp-testimonial__role {
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.hp-testimonial__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .hp-testimonials {
    padding-block: var(--space-20);
  }

  .hp-testimonials__pull-quote {
    margin-top: var(--space-10);
    margin-bottom: var(--space-16);
  }

  .hp-testimonials__pull-quote-text {
    font-size: var(--text-3xl);
  }

  .hp-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .hp-testimonials__pull-quote-text {
    font-size: var(--text-4xl);
  }

  .hp-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================
   HOMEPAGE — 8. CTA banner
   ============================================ */

.hp-cta-banner {
  background-color: var(--color-accent);
  padding-block: var(--space-16);
  text-align: center;
}

.hp-cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.hp-cta-banner__heading {
  color: var(--color-white);
  margin: 0;
}

@media (min-width: 768px) {
  .hp-cta-banner {
    padding-block: var(--space-20);
  }
}


/* ============================================
   SERVICES PAGE
   ============================================ */

.srv-main {
  padding-block: 0;
}

/* Offset anchor targets so sticky header doesn't overlap */
.srv-detail {
  scroll-margin-top: var(--header-height);
}

/* --- Hero --- */

.srv-hero {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-grey-200);
}

.srv-hero__heading {
  margin-bottom: var(--space-4);
}

.srv-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-grey-600);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .srv-hero {
    padding-block: var(--space-20) var(--space-16);
  }
}

/* --- Overview grid --- */

.srv-nav {
  padding-block: var(--space-12);
  background-color: var(--color-grey-100);
}

.srv-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.srv-nav__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}

.srv-nav__card:hover {
  border-color: var(--color-accent);
}

.srv-nav__icon {
  color: var(--color-accent);
}

.srv-nav__title {
  font-size: var(--text-lg);
  font-weight: var(--font-heading-weight);
  margin: 0;
  line-height: 1.3;
}

.srv-nav__desc {
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  margin: 0;
  max-width: none;
  flex: 1;
}

.srv-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-accent);
  margin-top: auto;
  transition: gap var(--transition-fast);
}

.srv-nav__link:hover,
.srv-nav__link:focus {
  color: var(--color-accent);
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .srv-nav__grid {
    /* 3+2 layout: 6-column base, first 3 cards span 2, last 2 span 3 */
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-5);
  }

  .srv-nav__card {
    grid-column: span 2;
  }

  /* Last 2 cards centred in the row */
  .srv-nav__card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .srv-nav__card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (min-width: 1200px) {
  .srv-nav {
    padding-block: var(--space-16);
  }
}

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

.srv-detail__inner {
  max-width: 760px;
}

.srv-detail--alt-a {
  padding-block: var(--space-16);
  background-color: var(--color-white);
}

.srv-detail--alt-b {
  padding-block: var(--space-16);
  background-color: var(--color-grey-100);
}

.srv-detail__heading {
  margin-bottom: var(--space-6);
}

.srv-detail__desc {
  color: var(--color-grey-600);
  margin-bottom: var(--space-6);
  max-width: none;
}

.srv-detail__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.srv-detail__bullets li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-grey-800);
}

.srv-detail__bullets li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.45em;
}

/* Proof point — pull quote style */

/* Always white with a light border, regardless of the alt-a/alt-b
   section background behind it — a grey card on a grey section (or
   the old alternating white-on-white) had no visible edge.
   Shared with .hp-metrics__item (homepage stats band) — same card
   frame, reused rather than redeclared, so this stays the single
   place that defines what a "results card" looks like. The homepage
   grid has its own width/columns handled separately; only the frame
   (background/border/radius/accent) is shared here */
.srv-proof,
.hp-metrics__item {
  margin: 0;
  padding: var(--space-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
}

.srv-proof__stat {
  display: block;
  /* Fluid — most stat headlines are now short phrases rather than
     figures, so this can't stay fixed at text-5xl (48px) */
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent);
  letter-spacing: -0.03em;
  /* Tighter leading for display-size type — 1.15 was still loose
     enough to add visible height across 2-4 line headlines */
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.srv-proof__client {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  font-style: normal;
  margin-bottom: var(--space-2);
}

.srv-proof__label {
  font-size: var(--text-base);
  color: var(--color-grey-800);
  margin: 0;
  max-width: none;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .srv-detail--alt-a,
  .srv-detail--alt-b {
    padding-block: var(--space-20);
  }

  /* Fill the container properly instead of sitting flush-left with
     dead space to the right — same fix as cs-detail__inner */
  .srv-detail__inner {
    max-width: none;
  }

  /* Tighten the gap into the proof block so the section reads as one
     cohesive block rather than scattered pieces */
  .srv-detail__bullets {
    margin-bottom: var(--space-6);
  }

  /* Give the proof block more presence and anchor it to the section.
     One consistent max-width for both left and right placements —
     previously only the right-aligned variant was capped, so left
     cards stretched the full column width while right ones didn't.
     .hp-metrics__item shares the padding/shadow step but not the
     max-width — its width is handled by the homepage grid columns */
  .srv-proof,
  .hp-metrics__item {
    padding: var(--space-10);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .srv-proof {
    max-width: 520px;
  }

  .srv-proof--right {
    margin-left: auto;
    border-left: none;
    border-right: 4px solid var(--color-accent);
    text-align: right;
  }
}

/* --- Inline platform logos (per service section) --- */

.srv-detail__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.srv-detail__header .srv-detail__heading {
  margin-bottom: 0;
}

.srv-detail__logos {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.srv-detail__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* --- CTA banner --- */

.srv-cta {
  background-color: var(--color-accent);
  padding-block: var(--space-16);
  text-align: center;
}

.srv-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.srv-cta__heading {
  color: var(--color-white);
  margin: 0;
}

.srv-cta__sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  margin: 0;
  max-width: none;
}

@media (min-width: 768px) {
  .srv-cta {
    padding-block: var(--space-20);
  }

  .srv-cta .container {
    gap: var(--space-6);
  }
}


/* ============================================
   CASE STUDIES PAGE
   ============================================ */

.cs-main {
  padding-block: 0;
}

/* Offset anchor targets so sticky header doesn't overlap */
.cs-detail {
  scroll-margin-top: var(--header-height);
}

/* --- Hero --- */

.cs-hero {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-grey-200);
}

.cs-hero__heading {
  margin-bottom: var(--space-4);
}

.cs-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-grey-600);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .cs-hero {
    padding-block: var(--space-20) var(--space-16);
  }
}

/* --- Overview grid --- */

.cs-nav {
  padding-block: var(--space-12);
  background-color: var(--color-grey-100);
}

.cs-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.cs-nav__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}

.cs-nav__card:hover {
  border-color: var(--color-accent);
}

.cs-nav__icon {
  color: var(--color-accent);
}

.cs-nav__title {
  font-size: var(--text-lg);
  font-weight: var(--font-heading-weight);
  margin: 0;
  line-height: 1.3;
}

.cs-nav__desc {
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  margin: 0;
  max-width: none;
  flex: 1;
}

.cs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-accent);
  margin-top: auto;
  transition: gap var(--transition-fast);
}

.cs-nav__link:hover,
.cs-nav__link:focus {
  color: var(--color-accent);
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .cs-nav__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1200px) {
  .cs-nav {
    padding-block: var(--space-16);
  }
}

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

.cs-detail__inner {
  max-width: 760px;
}

/* Sidebar + main content layout — mobile: stacked, sidebar first;
   desktop: fixed-width sidebar card beside the main column */
.cs-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.cs-detail__sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: 1.5rem;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base);
}

.cs-detail__sidebar:hover,
.cs-detail__sidebar:focus-visible {
  border-color: var(--color-accent);
  color: inherit;
}

.cs-detail__sidebar .cs-detail__heading {
  font-size: var(--text-xl);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .cs-detail__inner {
    max-width: none;
  }

  .cs-detail__layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.cs-detail--alt-a {
  padding-block: var(--space-16);
  background-color: var(--color-white);
}

.cs-detail--alt-b {
  padding-block: var(--space-16);
  background-color: var(--color-grey-100);
}

.cs-detail__heading {
  margin-bottom: var(--space-8);
}

/* Sub-section label ("The Challenge", "What I Did", "The Results") */
.cs-detail__label {
  font-size: var(--text-xs);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  margin-bottom: var(--space-3);
  margin-top: var(--space-8);
}

.cs-detail__label:first-of-type {
  margin-top: 0;
}

.cs-detail__body {
  color: var(--color-grey-600);
  margin-bottom: var(--space-2);
  max-width: none;
}

.cs-detail__body--outcome {
  padding: var(--space-6);
  background-color: var(--color-grey-100);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
  color: var(--color-grey-800);
  margin-bottom: 0;
}

.cs-detail--alt-b .cs-detail__body--outcome {
  background-color: var(--color-white);
}

.cs-detail__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-detail__bullets li {
  position: relative;
  padding-left: calc(6px + var(--space-3));
  font-size: var(--text-base);
  color: var(--color-grey-800);
}

.cs-detail__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Client logo frame — white tile so logos with baked-in backgrounds
   (or genuine transparency) all sit consistently regardless of the
   section's alt-a/alt-b background colour */
.cs-detail__logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cs-detail__logo {
  display: block;
  max-width: 140px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Multi-stat proof variant (LV Bespoke). Shares .srv-proof's white
   background/border treatment (issue 4), but stays its own width —
   it needs to hold a 3-column grid, not the 520px single-stat cap */
.cs-proof--multi {
  margin: 0;
  padding: var(--space-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
  max-width: none;
}

.cs-proof__stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

/* Subgrids the parent's 2 row tracks (headline / label) so all three
   supporting paragraphs start on the same line regardless of how
   many lines their own headline wrapped to */
.cs-proof__stat-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: var(--space-2);
}

.cs-proof__stat-item .srv-proof__stat {
  grid-row: 1;
  align-self: start;
  margin-bottom: 0;
  /* Tighter ceiling than the base .srv-proof__stat clamp — these
     columns are much narrower than a single-item card, so the same
     size that works there still wrapped to 3-4 lines here */
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
}

.cs-proof__stat-item .srv-proof__label {
  grid-row: 2;
  align-self: start;
}

.cs-proof--multi .srv-proof__client {
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .cs-detail--alt-a,
  .cs-detail--alt-b {
    padding-block: var(--space-20);
  }

  /* Tighten the rhythm between sub-sections so the column reads as
     one cohesive block rather than loosely scattered pieces */
  .cs-detail__label {
    margin-top: var(--space-6);
  }

  .cs-detail__label:first-of-type {
    margin-top: 0;
  }

  /* The LV Bespoke blockquote also carries .srv-proof, which already
     sets padding/shadow at this width — restated here only because
     .cs-proof--multi's own max-width:none (above) needs to win the
     cascade over .srv-proof's max-width:520px for this element.
     Padding trimmed from space-10 — with the headline fix the panel
     no longer needs as much room to breathe into */
  .cs-proof--multi {
    padding: var(--space-8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
}

/* 3 columns only once there's genuinely enough width per column —
   at 768px, with the sidebar layout already active, 3 columns leaves
   under 150px each and headlines wrap heavily regardless of size */
@media (min-width: 1024px) {
  .cs-proof__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* ---------------------------------------------------------------
   Alternative layout for the multi-stat variant: full-width rows
   with a divider, instead of 3 narrow columns. NOT used by default.
   To switch a block over, add "cs-proof--stacked" to its class list
   alongside "srv-proof cs-proof--multi" — e.g. LV Bespoke's
   blockquote in page-case-studies.php. Kept alongside the column
   layout rather than replacing it, so the two can be compared.
   --------------------------------------------------------------- */
.cs-proof--stacked .cs-proof__stats {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: 0;
}

.cs-proof--stacked .cs-proof__stat-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  grid-row: auto;
  row-gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-grey-200);
}

.cs-proof--stacked .cs-proof__stat-item:first-child {
  padding-top: 0;
}

.cs-proof--stacked .cs-proof__stat-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cs-proof--stacked .srv-proof__stat,
.cs-proof--stacked .srv-proof__label {
  grid-row: auto;
  align-self: start;
}

@media (min-width: 600px) {
  .cs-proof--stacked .cs-proof__stat-item {
    grid-template-columns: 1fr 2fr;
    column-gap: var(--space-8);
  }
}


/* ============================================
   ABOUT PAGE
   ============================================ */

.about-main {
  padding-block: 0;
}

/* --- Hero (same visual weight as srv-hero / cs-hero) --- */

.about-hero {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-grey-200);
}

.about-hero__heading {
  margin-bottom: var(--space-4);
}

.about-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-grey-600);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .about-hero {
    padding-block: var(--space-20) var(--space-16);
  }
}

/* --- Story / who I am --- */

.about-intro {
  padding-block: var(--space-16);
}

.about-intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.about-intro__image-wrap {
  max-width: 360px;
  margin-inline: auto;
}

.about-intro__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.about-intro__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.about-intro__body {
  color: var(--color-grey-600);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .about-intro {
    padding-block: var(--space-20);
  }

  .about-intro__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-16);
  }

  .about-intro__image-wrap {
    max-width: none;
    margin-inline: 0;
  }
}

/* --- How I work / why it's different ---
   Three alternating-background panels, same pattern as
   srv-detail--alt-a / --alt-b and cs-detail--alt-a / --alt-b. */

.about-approach--alt-a {
  padding-block: var(--space-16);
  background-color: var(--color-white);
}

.about-approach--alt-b {
  padding-block: var(--space-16);
  background-color: var(--color-grey-100);
}

.about-approach__heading {
  margin-bottom: var(--space-4);
}

.about-approach__body {
  color: var(--color-grey-600);
  max-width: 68ch;
}

.about-approach__inner .srv-detail__bullets {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .about-approach--alt-a,
  .about-approach--alt-b {
    padding-block: var(--space-20);
  }
}

/* --- Proof / credibility --- */

.about-proof {
  padding-block: var(--space-16);
  background-color: var(--color-white);
}

.about-section-heading {
  margin-bottom: var(--space-8);
  max-width: 44ch;
}

.about-proof__block {
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .about-proof {
    padding-block: var(--space-20);
  }
}

/* --- Shared inline "read more" link (approach + proof sections) --- */

.about-link {
  margin: 0;
}

.about-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.about-link a:hover,
.about-link a:focus {
  gap: var(--space-2);
}


/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-main {
  padding-block: 0;
}

/* --- Hero (same visual weight as srv-hero / cs-hero / about-hero) --- */

.contact-hero {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-grey-200);
}

.contact-hero__heading {
  margin-bottom: var(--space-4);
}

.contact-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-grey-600);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .contact-hero {
    padding-block: var(--space-20) var(--space-16);
  }
}

/* --- Form + booking two-column body --- */

.contact-body {
  padding-block: var(--space-16);
}

.contact-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .contact-body {
    padding-block: var(--space-20);
  }

  .contact-body__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

/* --- Business info form --- */

.contact-form__heading {
  margin-bottom: var(--space-6);
}

.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
}

.contact-form__optional {
  font-weight: var(--font-body-weight);
  color: var(--color-grey-400);
}

.contact-form__input,
.contact-form__textarea {
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--color-black);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form__consent {
  font-size: var(--text-xs);
  color: var(--color-grey-600);
  max-width: none;
}

.contact-form__submit {
  align-self: flex-start;
}

/* Honeypot — visually hidden off-screen rather than display:none, since
   basic spam bots that skip display:none fields still fill this in */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__errors {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-grey-100);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.contact-form__errors p {
  font-weight: var(--font-heading-weight);
  margin-bottom: var(--space-2);
}

.contact-form__errors ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-form__errors li {
  font-size: var(--text-sm);
  color: var(--color-grey-800);
}

.contact-form__success {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-grey-100);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
}

/* Progressive enhancement, same pattern as the shared scroll-reveal system
   above: without JS, or with reduced motion, the message is simply visible
   the instant [hidden] is removed — nothing here overrides that default. */
@media (prefers-reduced-motion: no-preference) {
  .contact-form__success {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
  }

  .contact-form__success.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Booking embed + direct contact --- */

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.contact-methods__kicker {
  font-size: var(--text-xs);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.contact-methods__heading {
  margin-bottom: var(--space-6);
}

.contact-methods__embed-wrap {
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
}

.contact-methods__embed-wrap iframe {
  display: block;
}

.contact-methods__fallback-link {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  max-width: none;
}

.contact-methods__fallback-link a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-heading-weight);
}

.contact-methods__fallback-link a:hover,
.contact-methods__fallback-link a:focus {
  text-decoration: underline;
}

.contact-methods__direct {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-grey-200);
}

.contact-methods__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-heading-weight);
  text-decoration: none;
  color: var(--color-black);
}

.contact-methods__link:hover,
.contact-methods__link:focus {
  color: var(--color-accent);
}


/* ============================================
   SITE-WIDE STICKY CTA
   ============================================ */

/* Persistent, low-friction CTA shown on every page except Contact itself.
   Mobile: full-width bar pinned to the bottom (thumb-reachable). Desktop:
   a small floating pill in the bottom-right so it doesn't compete with
   the page's own content or CTA banners. */
.site-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background-color: var(--color-black);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity var(--transition-base);
}

.site-cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.site-cta-bar__text {
  display: none;
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-heading-weight);
  margin: 0;
}

.site-cta-bar__btn {
  flex: 1;
  padding-left: 2.5rem;
}

.site-cta-bar.is-near-footer {
  opacity: 0;
  pointer-events: none;
}

/* Entrance animation — progressive enhancement only. Without JS the bar
   is simply always visible (position: fixed, no transform); with JS and
   no reduced-motion preference it slides up on load, mirroring the same
   body.js-reveal pattern used by the shared scroll-reveal system above. */
@media (prefers-reduced-motion: no-preference) {
  body.js-cta-bar .site-cta-bar {
    transform: translateY(100%);
    transition: transform 0.4s ease-out, opacity var(--transition-base);
  }

  body.js-cta-bar .site-cta-bar.is-visible {
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .site-cta-bar {
    left: auto;
    right: 24px;
    bottom: 24px;
    border-top: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    /* Hug the two segments' actual content width instead of guessing a
       fixed cap — a fixed max-width could end up narrower than
       "Ready to get started?" + "Work with me" combined, and since this
       box now clips overflow (for the rounded corners), a too-narrow cap
       would silently truncate the button instead of just wrapping. */
    width: fit-content;
    max-width: calc(100vw - 48px);
  }

  /* Padding moves onto the text/button segments themselves (rather than
     the row), so the button's box can reach the container's edges flush
     and get clipped into a matching rounded corner by overflow above. */
  .site-cta-bar__inner {
    padding: 0;
    gap: 0;
  }

  .site-cta-bar__text {
    display: block;
    white-space: nowrap;
    padding: var(--space-3) var(--space-5);
  }

  .site-cta-bar__btn {
    flex: none;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    border-radius: 0;
  }

  /* Keep the focus ring inside the pill's clipped edge instead of
     letting overflow:hidden above cut it off. Matches .btn:focus-visible's
     specificity so this (later) declaration wins the tie. */
  .site-cta-bar__btn:focus-visible {
    outline-offset: -3px;
  }
}


/* ============================================
   WORDPRESS CORE — required classes
   ============================================ */

.wp-block-image img {
  border-radius: var(--radius-md);
}

.alignleft  { float: left; margin-right: var(--space-6); }
.alignright { float: right; margin-left: var(--space-6); }
.aligncenter { margin-inline: auto; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}