/*
   OWN YOUR VOICE — styles.css

   Structure:
   1.  Design tokens (custom properties)
   2.  Reset & base
   3.  Typography
   4.  Layout utilities
   5.  Header & nav
   6.  Hero
   7.  Homepage: intro section
   8.  Homepage: info boxes
   9.  Services: nav boxes & icon halo
   10. Services: two-column rows & quote cards
   11. Contact form & channels
   12. Testimonials
   13. Pull quote (aside.quote)
   14. FAQ accordion
   15. Journey diagram (contact page)
   16. Booking embed (contact page)
   17. Testimonials page CTA
   18. YouTube Embed
   19. Footer
   20. Animations
   21. Media queries — tablet (max 1024px)
   22. Media queries — mobile landscape (max 900px)
   23. Media queries — mobile portrait (max 768px)
   24. Media queries — small mobile (max 640px)

================================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Colours */
  color-scheme: light only;
  --c-dark:       #2A2828;
  --c-midgray:    #3E3C3C;
  --c-grey:       #6b7280;
  --c-sand:       #F7F2E4;
  --c-lightblue:  #D4EAED;
  --c-teal:       #147A8F;
  --c-hover:      #0D4C59;
  --c-burgundy:   #520C0C;

  /* Typography */
  --ff: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Ubuntu, Cantarell, "Open Sans", sans-serif;

  --fs-base: 1.125rem;   /* 18px — body text */
  --fs-sm:   1rem;       /* 16px — labels, captions, nav links */
  --fs-md:   1.25rem;    /* 20px — list items, form text */
  --fs-lg:   1.5rem;     /* 24px — subheads, contact items */
  --fs-xl:   2rem;       /* 32px — h3, testimonial titles */
  --fs-2xl:  2.5rem;     /* 40px — h2 */
  --fs-3xl:  3.5rem;     /* 56px — hero h1 */

  /* Spacing — tightened to a consistent 8px grid */
  --gap:       48px;
  --gap-cards: 32px;
  --pad:       20px;
  --pad-cta:   50px;
  --pad-form:  32px;

  /* Section vertical rhythm */
  --section-pad: clamp(56px, 7vw, 96px);

  /* Sizing */
  --w:        1440px;
  --w-card:   400px;
  --w-heroimg:520px;
  --w-form:   700px;
  --w-quote:  800px;

  /* Radii */
  --r-sm: 6px;
  --r:    14px;
  --r-lg: 20px;
  --r-md: 12px;

  /* Shadows */
  --shadow:      0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.07);
  --shadow-soft: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --shadow-card: 0 2px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);

  /* Journey diagram */
  --pill-h:    130px;
  --pill-gap:  10px;
  --radius:    999px;
  --badge:     92px;
  --padx:      22px;
  --border:    2px;
  --inner-safe: calc(var(--padx) + (var(--badge) / 2));

  /* FAQ icons */
  --icon-plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

html {
  box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: #111;
  background: #fff;
  overflow-x: hidden;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  color: var(--c-dark);
  line-height: 1.2;
  margin-top: 0;
}

h2 {
  font-size: var(--fs-2xl);
  font-weight: 800;
}

h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
}

p {
  font-size: var(--fs-base);
  margin-top: 0;
  margin-bottom: 1em;
  text-wrap: pretty;
}

a {
  color: var(--c-teal);
}

/* Hero typography */
.hero-h1-centered {
  text-align: center;
  margin: 0 auto 0.5em;
  max-width:20ch;
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-dark);
  letter-spacing: -0.02em;
}

.hero-h2-centered {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-midgray);
  margin: 0 auto 0.75em;
  max-width: 50ch;
}

.hero-text--centered {
  text-align: center;
  font-size: var(--fs-lg);
  max-width: 45ch;
  margin: 0 auto 1em;
  color: var(--c-midgray);
  line-height: 1.5;
}

/* Section headings */
.info-boxes-heading {
  text-align: center;
  margin-top: 56px;
  margin-bottom: 0.3em;
  font-size: var(--fs-2xl);
}

.info-boxes-intro {
  margin: 0 auto 32px;
  text-align: center;
  max-width: 55ch;
  font-size: var(--fs-md);
  color: var(--c-midgray);
}

.services-h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-midgray);
  margin-top: 0;
  margin-bottom: 1em;
}

.center { text-align: center; }

.subhead {
  font-size: var(--fs-lg);
  font-weight: 400;
  opacity: .8;
  margin: 0;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

/* Scroll offset so tall header doesn't hide anchor targets */
[id] {
  scroll-margin-top: 210px;
}

/* ============================================================
   5. HEADER & NAV
   ============================================================ */

.header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 160px;
  background: #fff;
  color: var(--c-dark);
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-left {
  flex: 0 0 auto;
  margin-left: 80px;
  margin-right: 120px;
}

.logo-left img {
  height: 200px;
  display: block;
}

.nav-right ul {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-right a {
  position: relative;
  display: inline-block;
  color: var(--c-midgray);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 16px;
  letter-spacing: 0.05em;
  border-radius: var(--r-sm);
  transition: color 180ms ease, background-color 180ms ease;
}

/* Underline slide-in on hover */
.nav-right a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -4px;
  height: 2px;
  background: var(--c-burgundy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

.nav-right a:not([aria-current="page"]):hover::after,
.nav-right a:not([aria-current="page"]):focus-visible::after {
  transform: scaleX(1);
}

.nav-right a:not([aria-current="page"]):hover {
  color: var(--c-dark);
}

/* Active page indicator */
.nav-right a[aria-current="page"] {
  font-weight: 700;
  color: var(--c-burgundy);
}

/* Header CTA button */
.header-cta {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 11px 22px;
  background: var(--c-teal);
  color: #fff;
  border: 0;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background-color 200ms ease, transform 220ms cubic-bezier(.4,0,.2,1);
}

.header-cta:hover {
  background: var(--c-hover);
  transform: scale(1.04);
  color: #fff;
}

.header-cta.active {
  background: var(--c-burgundy);
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   6. HERO
   ============================================================ */

.hero-section--centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--c-lightblue);
  min-height: max(380px, 50vh);
  padding-block: clamp(48px, 6vw, 88px);
}

.hero-inner--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 840px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

/* Hero CTA spacing */
.hero-cta {
  margin-top: 36px;
}

/* ============================================================
   7. HOMEPAGE: INTRO SECTION
   ============================================================ */

.landing-intro-inner {
  background-color: var(--c-sand);
  width: 100%;
  padding: clamp(48px, 6vw, 88px) 0;
}

.brent-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: clamp(40px, 6vw, 100px);
  max-width: var(--w);
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 60px);
}

.brent-intro p {
  font-size: var(--fs-md);
  line-height: 1.65;
}

.intro-left {
  background-color: #fff;
  max-width: 58ch;
  padding: 36px 40px;
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

.intro-left h2 {
  margin-bottom: 0.6em;
  font-size: 2rem;
}

/* The vertical burgundy rule between intro text and photo */
.intro-divider {
  flex-shrink: 0;
  width: 4px;
  height: 280px;
  background: var(--c-burgundy);
  opacity: .5;
  align-self: center;
  border-radius: 3px;
}

.intro-right {
  background: var(--c-lightblue);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.intro-right img {
  display: block;
  max-width: 400px;
  max-height: 560px;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

/* Spacing for the intro CTA */
.intro-cta {
  display: block;
  width: fit-content;
  margin: 0 auto;
  margin-top: 32px;
  align-items: center;
}
  
/* ============================================================
   8. HOMEPAGE: INFO BOXES
   ============================================================ */

.info-boxes-section {
  padding-block: 24px 72px;
  padding-inline: 16px;
}

.home-info-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-cards);
  padding: 24px var(--pad) 16px;
  max-width: 1240px;
  margin: 0 auto;
  justify-content: center;
  align-content: center;
  align-items: stretch;
}

.box-with-text {
  max-width: var(--w-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}

.box-head {
  margin-top: 20px;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  width: 100%;
  max-width: 20ch;
  color: var(--c-dark);
}

/* Burgundy rule under box headings */
.box-with-text.has-divider h3::after {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--c-burgundy);
  margin: 12px auto 0;
  border-radius: 2px;
}

.home-info-boxes .box-with-text.has-divider .sign-up-cta {
  margin-top: 20px;
}

.box-background {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin: 12px;
  background-color: #fff;
  padding-bottom: 36px;
  border-radius: var(--r);
}

.box {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  background: var(--c-sand);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms ease;
}

.box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.box img {
  max-width: 55%;
  margin-bottom: 15px;
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

.star-list {
  font-weight: 600;
  font-size: var(--fs-md);
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0 0 0 0.25rem;
}

.star-list li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: 0.5em;
  line-height: 1.45;
}

.star-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: .15em;
  color: var(--c-burgundy);
}

/* ============================================================
   9. SERVICES: NAV BOXES (REDESIGNED — minimal, clean)
   ============================================================ */

.box-nav {
  padding-block: 56px 40px;
  background: #fff;
}

.box-nav-label {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-grey);
  margin-bottom: 24px;
}

.service-nav-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 var(--pad);
  max-width: 880px;
  margin: 0 auto;
  justify-content: center;
}

/* Clean minimal nav card */
.icon-nav-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 192px;
  padding: 28px 20px 24px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 220ms cubic-bezier(.4,0,.2,1);
}

.icon-nav-box:hover {
  border-color: var(--c-teal);
  box-shadow: 0 4px 20px rgba(20,122,143,.12);
  transform: translateY(-2px);
}

/* Make the whole card a link — wrap approach */
a.icon-nav-box {
  color: inherit;
  text-decoration: none;
}

.icon-nav-box .icon-halo {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: var(--c-sand);
  display: grid;
  place-items: center;
  transition: background 200ms ease;
  position: relative;
}

.icon-nav-box:hover .icon-halo {
  background: var(--c-lightblue);
}

/* Remove old pseudo halo — replaced by background approach */
.icon-halo::before {
  display: none;
}

.icon-halo img {
  width: 65px;
  height: 65px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.box-head.service {
  display: block;
  max-width: 16ch;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
  color: var(--c-dark);
  line-height: 1.35;
}

.services-cta {
  display: none; /* Hidden — whole card is now the link */
}

/* ============================================================
   10. SERVICES: TWO-COLUMN ROWS & QUOTE CARDS
   ============================================================ */

.twoclm-intro-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.two-clm-wrap {
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 56px);
  line-height: 1.5;
}

.two-clm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.two-clm-row:last-child {
  border-bottom: none;
}

.two-clm-row--reversed .services-left-container {
  order: 2;
}

.two-clm-row--reversed .services-quote-container {
  order: 1;
}

/* Text column — always left-aligned, both normal and reversed */
.services-left-container {
  min-width: 0;
}

.two-clm-text {
  text-align: left;
  font-size: var(--fs-base);
}

.two-clm-text h2 {
  margin-bottom: 0.15em;
  letter-spacing: -0.01em;
}

.two-clm-text h3 {
  margin-top: 0;
}

.two-clm-text p {
  text-align: left;
  font-size: var(--fs-base);
  color: #333;
  line-height: 1.7;
}

.two-clm-text .star-list {
  padding-left: 0;
  margin-left: 0.25rem;
  text-align: left;
}

.two-clm-text .star-list li {
  text-align: left;
}

.two-clm-text .sign-up-cta,
.sign-up-cta--services,
.two-clm-row--reversed .sign-up-cta--services {
  display: block;
  width: fit-content;
  margin: 40px auto 0;
  text-align:center;
}

/* Reversed rows: text stays left, button floats right */
.two-clm-row--reversed .two-clm-text {
  text-align: left;
}

/* Quote column */
.services-quote-container {
  display: flex;
  flex-direction:column;
  gap:20px;
  justify-content: center;
  align-items: center;
  padding-top: 48px;
}

/* Quote card */
.quote-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--c-sand);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 24px 20px 28px;
}

.quote-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 260px;
  padding: 40px 36px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  color: var(--c-midgray);
  animation: popIn .5s ease both;
}

.quote-panel::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  opacity: .18;
  color: var(--c-burgundy);
  pointer-events: none;
}

.quote-panel::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: #fff;
  z-index: 0;
}

.quote-close {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  opacity: .18;
  color: var(--c-burgundy);
  pointer-events: none;
}

.quote-close::before {
  content: "\201D";
}

.quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.quote-text--large {
  font-size: 1.35rem;
}

.author-photo {
  object-fit: cover;
  margin-top: 24px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background-position: center;
  background-size: cover;
  border: 3px solid #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.author-photo.photo-a { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Stephen_Covey.jpg/1280px-Stephen_Covey.jpg?_=20170807194853"); }
.author-photo.photo-b { background-image: url("https://images.unsplash.com/photo-1715610237622-748477adf2e4?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); }
.author-photo.photo-c { background-image: url("https://images.unsplash.com/photo-1709715357510-b687304cee3a?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); }
.author-photo.photo-d { background-image: url("https://images.unsplash.com/photo-1546872006-42c78c0ccb29?q=80&w=686&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); }

.quote-mark-tst {
  font-size: 1.4em;
  color: var(--c-burgundy);
  opacity: .4;
  font-weight: 900;
  line-height: 0;
  vertical-align: -0.15em;
}

/* ============================================================
   11. CONTACT FORM & CHANNELS
   ============================================================ */

.service-query {
  background: var(--c-lightblue);
  padding: 56px clamp(20px, 4vw, 56px) 72px;
}

.service-query h2 {
  margin: 0;
}

.service-query h3 {
  font-weight: 400;
  opacity: .8;
  margin: 0;
}

.service-query-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 20px 80px;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  flex: 1;
  min-width: 220px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.contact-item a {
  color: var(--c-dark);
  text-decoration: none;
  transition: color 180ms ease;
}

.contact-item a:hover {
  color: var(--c-teal);
}

.email-icon,
.mobile-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(36%) saturate(2200%)
          hue-rotate(330deg) brightness(90%) contrast(95%);
}

.query-form {
  flex: 1.25;
  min-width: 320px;
  max-width: var(--w-form);
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--pad-form);
  box-shadow: var(--shadow);
  margin: 0 auto;
}

.query-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
}

/* Remove double shadow inside .service-query */
.service-query .query-form {
  box-shadow: none;
}

fieldset {
  border: 0;
  padding: 0 0 16px 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

legend {
  text-align: center;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--c-burgundy);
  font-size: var(--fs-md);
}

.query-form fieldset label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-md);
  gap: 0;
  padding: 10px 0;
  cursor: pointer;
}

.query-form fieldset label > input[type="radio"] {
  margin: 0;
}

.query-form label,
.input-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-dark);
}

input:focus, textarea:focus {
  outline: 0;
  border-color: var(--c-burgundy);
  box-shadow: 0 0 0 3px rgba(122,30,30,.15);
}

input:not([type="radio"]),
textarea {
  resize: vertical;
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-sm);
  font-family: var(--ff);
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,.14);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  margin-bottom:10px;
}

input:not([type="radio"]):focus,
textarea:focus {
  outline: 0;
  border-color: var(--c-burgundy);
  box-shadow: 0 0 0 3px rgba(122,30,30,.15);
}

.query-form fieldset label:last-child {
  margin-bottom: 8px;
}

.form-head {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-burgundy);
}

.form-success {
  font-size: var(--fs-md);
  text-align: center;
  padding: 20px 0;
}

/* CTA buttons */
.sign-up-cta,
.sign-up-cta-block {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--r-sm);
}

.sign-up-cta {
  max-width:200px;
  margin: 0 auto;
  font-size: var(--fs-sm);
  padding: 13px 26px;
  min-width: 160px;
  background: var(--c-teal);
  color: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgba(20,122,143,.25);
  transition: background-color 200ms ease, transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 200ms ease;
}

.sign-up-cta:hover {
  background: var(--c-hover);
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(20,122,143,.3);
  color: #fff;
}

.sign-up-cta--services {
  margin-top: 24px;
  align-self: flex-start;
}

.two-clm-row--reversed .sign-up-cta--services {
  align-self: flex-end;
}

@media (hover: none) and (pointer: coarse) {
  .sign-up-cta:active { background: var(--c-hover); }
}
/* WPForms — OYV design overrides */
.wpforms-container {
  width: 100%;
}
.wpforms-form .wpforms-title {
  color: var(--c-burgundy) !important;
  margin-top: 0px !important;
  font-size: 1.2rem !important;
}
.wpforms-form .wpforms-field-label,
.wpforms-form legend {
  color: var(--c-burgundy) !important;
}
.wpforms-form .wpforms-field-label {
  font-family: var(--ff);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-dark);
  margin-bottom: 6px;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
  font-family: var(--ff);
  font-size: var(--fs-sm);
  border: 1.5px solid rgba(0,0,0,.14);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form textarea:focus {
  outline: 0;
  border-color: var(--c-burgundy);
  box-shadow: 0 0 0 3px rgba(122,30,30,.15);
}

.wpforms-form .wpforms-field-radio label {
  font-family: var(--ff);
  font-size: var(--fs-md);
  font-weight: 400;
  cursor: pointer;
}

.wpforms-form .wpforms-field-sublabel {
  display: none;
}

.wpforms-form .wpforms-field-label.wpforms-label-hide + .wpforms-field-radio ul {
  color: var(--c-burgundy);
  font-weight: 700;
  font-size: var(--fs-md);
}

.wpforms-submit-container {
  text-align: center;
}

.wpforms-form .wpforms-submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--ff);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  min-width: 160px;
  max-width: 200px;
  background: var(--c-teal);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(20,122,143,.25);
  cursor: pointer;
  transition: background-color 200ms ease, transform 220ms cubic-bezier(.4,0,.2,1);
}

.wpforms-form .wpforms-submit:hover {
  background: var(--c-hover);
  transform: scale(1.04);
}
.wpforms-form .wpforms-submit-container {
  display: flex;
  justify-content: center;
}

.wpforms-form .wpforms-submit-container button.wpforms-submit.sign-up-cta {
  background: var(--c-teal) !important;
  color: #fff !important;
  max-width: 200px;
  width: auto;
}

.wpforms-form .wpforms-submit-container button.wpforms-submit.sign-up-cta:hover {
  background: var(--c-hover) !important;
  transform: scale(1.04);
}

/* ============================================================
   12. TESTIMONIALS
   ============================================================ */

.testimonials {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-sand);
  padding-block: 20px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: min(1360px, 92%);
  margin: 72px 72px auto;
}

.testimonial-block {
  background-color: #fff;
  padding: 32px;
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.testimonial-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.testimonial-block p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: #333;
}

.testimonial-title {
  position: relative;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
  padding-bottom: 20px;
  max-width: 32ch;
  color: var(--c-dark);
}

.quote-attrib {
  color: var(--c-burgundy);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 1em;
  text-align: right;
}

/* ============================================================
   13. PULL QUOTE (aside.quote)
   ============================================================ */

.quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--c-sand);
  padding: clamp(48px, 8vw, 100px) clamp(24px, 5vw, 100px);
  margin: 0;
}

.quote .quote-text {
  font-size: var(--fs-xl);
  font-weight: 300;
  max-width: var(--w-quote);
  margin: 0 auto;
  text-align: center;
  color: var(--c-dark);
  line-height: 1.5;
}

.quote .quote-attrib {
  font-size: var(--fs-md);
  align-self: center;
  text-align: center;
  padding-left: 0;
  margin-top: 1.5em;
}

/* ============================================================
   14. FAQ ACCORDION
   ============================================================ */

.faq-container {
  padding-top: 80px;
  padding-bottom: 24px;
}

.faq-section {
  background: #fff;
  max-width: 680px;
  width: 100%;
  margin: 0 auto 80px;
  padding: 16px;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  font-size: var(--fs-base);
}

.faq-section h2 {
  text-align: center;
  margin: 0 0 16px;
  font-size: var(--fs-xl);
}

.faq-section details {
  padding: 12px 8px 12px 30px;
  font-weight: 600;
  color: var(--c-midgray);
  min-width: 0;
  word-wrap: break-word;
  padding-right: 8px;
}

.faq-section details + details {
  border-top: 1px solid color-mix(in srgb, var(--c-burgundy) 20%, transparent);
}

.faq-section summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  line-height: 1.4;
  gap: .5rem;
  width: 100%;
  min-width: 0;
}

.faq-section summary .question {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-base);
}

.faq-section summary::before {
  content: "✦";
  flex-shrink: 0;
  opacity: .65;
  color: var(--c-burgundy);
  font-size: 1em;
  line-height: 1;
}

.faq-section summary::after {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
  transition: transform .2s ease;
}

.faq-section summary:hover,
.faq-section summary:focus-visible {
  background: color-mix(in srgb, var(--c-burgundy) 6%, transparent);
  border-radius: 6px;
}

.faq-section details[open] > summary {
  background: color-mix(in srgb, var(--c-burgundy) 8%, transparent);
  border-radius: 6px 6px 0 0;
}

.faq-section details[open] > summary::after {
  transform: rotate(180deg);
  -webkit-mask: var(--icon-minus) center / contain no-repeat;
  mask: var(--icon-minus) center / contain no-repeat;
}

.faq-section details > *:not(summary) {
  margin: 8px 6px 6px;
  font-weight: 400;
  line-height: 1.65;
  padding-bottom: 5px;
  color: var(--c-midgray);
}

.faq-section details > *:not(summary) p {
  font-size: var(--fs-base);
}

/* ============================================================
   15. JOURNEY DIAGRAM (contact page)
   ============================================================ */

.diagram {
  padding: clamp(100px, 4vw, 56px) clamp(16px, 3vw, 28px);
  background: var(--c-sand);
}

.journey-diagram {
  margin: 0 auto;
  max-width: 900px;
}

.journey-h {
  text-align: center;
  margin: 0 0 clamp(10px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 4.2vw, 52px);
}

.journey-intro {
  text-align: center;
  margin: 0 auto clamp(18px, 2.6vw, 30px);
  max-width: 60ch;
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--c-midgray);
}

.journey {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--pill-gap);
  grid-template-rows: var(--pill-h);
  align-items: stretch;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}

.half {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--pill-h);
  padding: 0 var(--padx);
  border-radius: var(--radius);
  position: relative;
  z-index: 1;
}

.half p {
  margin: 0;
  line-height: 1.3;
  font-weight: 600;
  font-size: var(--fs-md);
  max-width: 28ch;
}

.half--title p {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.half--desc p {
  max-width: 20ch;
}

.left {
  padding-right: var(--inner-safe);
  padding-left: 100px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.right {
  padding-left: var(--inner-safe);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Fill colours */
.is-fill1 { background: var(--c-lightblue); border: none; }
.is-fill2 { background: rgba(155, 196, 203, 0.4); border: none; }
.is-fill3 { background: rgba(97, 158, 172, 0.4); border: none; }
.is-fill4 { background: rgba(20, 122, 143, 0.35); border: none; }
.is-panel { background: #fff; border: var(--border) solid var(--c-burgundy); }
.is-panel.right { border-left: none; }
.is-panel.left  { border-right: none; }

.badge {
  position: absolute;
  left: 50%;
  top: calc(var(--pill-h) / 2);
  transform: translate(-50%, -50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  font-size: 34px;
  line-height: 1;
}

.badge-icon {
  width: 34px;
  height: 34px;
  display: block;
}

/* ============================================================
   16. BOOKING EMBED (contact page)
   ============================================================ */

.booking-form {
  padding: clamp(48px, 5vw, 72px) 20px;
  background: #fff;
}

.booking-h {
  text-align: center;
  margin-bottom: 1em;
}

.booking-embed {
  max-width: 900px;
  margin: 0 auto;
  min-height: 400px;
}

/* ============================================================
   17. TESTIMONIALS PAGE CTA
   ============================================================ */

.tst-cta {
  background: var(--c-sand);
  display: flex;
  justify-content: center;
  padding: clamp(48px, 6vw, 88px) 20px;
}

.tst-cta .intro-left {
  text-align: center;
  max-width: 55ch;
}

.tst-cta h2 {
  text-align: center;
}
/* ============================================================
   18. YOUTUBE EMBED
   ============================================================ */
 /* ── YouTube Shorts embed ─────────────────────────────── */
  /* Slots into your existing --c-*, --r-*, --shadow-card    */
  /* tokens with no extra dependencies.                      */
 
  .yt-short-wrap {
    /* Shorts are 9:16 — lock the ratio */
    position: relative;
    width: 100%;
    max-width: 340px;          /* comfortable column width   */
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--c-sand); /* placeholder colour while loading */
  }
 
  .yt-short-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
 
  /* ── Responsive tweaks (mirrors your existing breakpoints) */
  @media (max-width: 900px) {
    .yt-short-wrap {
      max-width: 280px;
    }
  }
 
  @media (max-width: 768px) {
    .yt-short-wrap {
      max-width: 240px;
    }
  }


/* ============================================================
   18. FOOTER
   ============================================================ */

footer.footer {
  background: var(--c-dark);
  padding: 28px 20px;
}

footer.footer p {
  text-align: center;
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
}

/* ============================================================
   19. ANIMATIONS
   ============================================================ */

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

@keyframes halo-soft {
  0%   { opacity: 0; transform: scale(.6); }
  25%  { opacity: .9; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   20. TABLET (max-width: 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .header {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-block: 16px;
  }

  .logo-left {
    margin-left: 0;
    margin-right: 0;
  }

  .logo-left img {
    height: 150px;
  }

  .nav-right ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .landing-intro-inner {
    min-height: auto;
  }

  .brent-intro {
    column-gap: 40px;
  }

  .intro-left {
    max-width: 480px;
  }

  .intro-right img {
    max-width: 280px;
  }

  .service-nav-boxes {
    max-width: 100vw;
  }

  .services-left-container {
    flex-basis: 300px;
  }

  .services-quote-container {
  padding-top: 32px;
}
}

/* ============================================================
   21. MOBILE LANDSCAPE (max-width: 900px)
   ============================================================ */

@media (max-width: 900px) {
  /* Nav underline hidden — too tight */
  .nav-right a::after { display: none; }

  h1, h2, h3, h4,
  .hero-h1-centered,
  .hero-h2-centered,
  .testimonial-title,
  .journey-h,
  .box-head,
  .info-boxes-heading {
    text-wrap: balance;
  }
  
  /* Divider becomes a short horizontal rule */
  .intro-divider {
    transform: none;
    width: min(200px, 60vw);
    height: 3px;
    opacity: .5;
  }

  /* Stack intro section */
  .landing-intro-inner {
    height: auto;
    padding: 36px 16px 48px;
    overflow: visible;
  }

  .brent-intro {
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    row-gap: 40px;
    column-gap: 0;
    padding: 12px 0 24px;
  }

  .intro-left {
    width: 100%;
    max-width: 65ch;
    margin: 0;
    padding: 28px 24px;
  }

  .intro-right {
    height: 340px;
    max-width: 85%;
    justify-content: center;
  }

  .intro-right img {
    max-width: 280px;
    height: auto;
  }

  /* Stack two-column rows */
  .two-clm-row,
  .two-clm-row--reversed {
  grid-template-columns: 1fr;
  }
  
  .two-clm-row--reversed .services-left-container,
  .two-clm-row--reversed .services-quote-container {
  order: unset;
  }

  .services-left-container {
    min-width: 0;
    text-align: left;
  }

  .two-clm-row--reversed .services-left-container {
    text-align: left;
  }

  .two-clm-row--reversed .two-clm-text .star-list {
  text-align: left;
  }

  .two-clm-row--reversed .two-clm-text {
    align-items: stretch;
  }

  .services-quote-container {
    padding-top: 8px;
  }

  .quote-card {
    max-width: 100%;
  }

  .two-clm-text h2 {
    text-align: center;
  }

  .services-h3 {
    text-align: center;
  }

  /* Centre CTA in both row types */
  .two-clm-row--reversed .sign-up-cta--services {
  display: flex;
  width: fit-content;
  margin: 24px auto 0;
  }

  /* Box wrapping */
  .box-with-text {
    flex: 0 1 calc(50% - 48px);
  }

  /* Contact form stacks */
  .service-query-row {
    flex-direction: column;
    gap: 28px;
    margin-top: 0;
  }

  .contact-channels {
    margin-top: 10px;
    margin-bottom:10px;
    align-items: center;
    align-self: center;
  }

  .contact-item {
    justify-content: center;
  }

  /* Service nav boxes adapt */
  .service-nav-boxes {
    gap: 12px;
  }

  .icon-nav-box {
    width: 160px;
    padding: 22px 16px 20px;
  }
}

/* ============================================================
   22. MOBILE PORTRAIT (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  p {
    font-size: var(--fs-base);
  }

  h2 {
    font-size: var(--fs-xl);
  }

  .header {
    flex-direction: column;
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .header-cta {margin-bottom:10px;}

  .nav-right ul {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
  }

  .hero-section--centered {
    min-height: max(280px, 46vh);
  }

  .hero-inner--centered {
    margin-block: 24px 36px;
  }

  .hero-h1-centered {
    font-size: clamp(1.75rem, 6vw, 3rem);
  }

  .hero-text--centered {
    max-width: 32ch;
    font-size: var(--fs-md);
  }

  .hero-h2-centered {
    font-size: var(--fs-lg);
    max-width: 28ch;
  }

  .subhead {
    font-size: var(--fs-base);
  }

  /* Box grid */
  .home-info-boxes {
    gap: 20px;
  }

  .box {
    width: 80vw;
  }

  .box-head {
    font-size: var(--fs-md);
  }

  .service-query {
    padding: 44px 16px 64px;
  }

  .service-query-row {
    padding: 0;
  }

  .query-form {
    width: 100%;
    max-width: none;
    padding: 20px;
  }

  .query-form button {
    width: 100%;
  }

  /* Service nav boxes: 2 per row on mobile */
  .service-nav-boxes {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    padding: 16px var(--pad);
  }

  .icon-nav-box {
    flex: 1 1 calc(50% - 8px);
    max-width: 200px;
    min-width: 140px;
    width: auto;
  }

  .box-with-text {
    flex: 1 1 calc(50% - 16px);
    max-width: none;
  }

  .box-head.service {
    max-width: 18ch;
  }

  .star-list {
    margin-left: 20px;
    max-width: 40ch;
  }

  /* Pull quote */
  .quote .quote-text {
    font-size: var(--fs-lg);
    text-align: center;
  }

  /* Testimonials: single column */
  .testimonial-grid {
    grid-template-columns: 1fr;
    margin: 0 auto;
  }

  /* Buttons */
  button, .sign-up-cta, a.sign-up-cta {
    display: flex;
    min-width: 150px;
    max-width: 220px;
    min-height: 48px;
    padding: 14px 20px;
  }
  .right {padding-left:55px;}
  .intro-cta {
    display: block;
    margin: 32px auto 0;
  }
}

/* ============================================================
   23. SMALL MOBILE (max-width: 640px)
   ============================================================ */

@media (max-width: 640px) {
  .logo-left img {
    height: 140px;
  }

  .sign-up-cta { margin: 0 auto; }

  .nav-right ul {
    flex-direction: column;
    gap: 8px;
  }

  .nav-right a {
    padding: 6px 12px;
    font-size: 1.15rem;
  }

  .intro-left {
    padding: 20px 18px;
  }

  .brent-intro p {
    font-size: var(--fs-base);
  }

  /* Journey diagram compresses */
  .left {
    padding-left: 35px;
    padding-right: 30px;
  }

  .right {
    padding-left: 30px;
    padding-right: 0;
  }

  .half p {
    font-size: 0.95rem;
  }

  .half--title p {
    font-size: 1.1rem;
    max-width:13ch;
  }

  .badge {
    width: 50px;
    height: 50px;
  }

  .badge-icon {
    width: 24px;
    height: 24px;
  }

  /* Service nav boxes: single column on very small screens */
  .icon-nav-box {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
  }
}
.intro-cta {
  display: block !important;
  text-align:center;
  margin-top:30px;
  margin-bottom:5px;
  width: fit-content;
}