/*
Theme Name: Stephanie Kollmann
Theme URI: https://www.stephaniekollmann.com
Description: Custom theme for Stephanie Kollmann — The Point of Change
Version: 1.10.2
Author: Bruno Moreira
Text Domain: stephanie-kollmann
*/

/* ─── Fonts ──────────────────────────────────────────────────────────────────

   Self-hosted rather than loaded from Google Fonts, for three reasons:

   1. WooCommerce ships its own @font-face for a family named "Inter". While
      --font-sans asked for plain 'Inter', body text across the whole site
      resolved to WooCommerce's face and pulled down a 319 KB variable file.
      The families below are named so that nothing else can claim them.
   2. Google Fonts cost a second origin and a third hop: HTML → stylesheet →
      font. Same-origin fonts start downloading as soon as the CSS is parsed.
   3. Five static cuts came down from Google, 188 KB, where two variable files
      cover every weight the stylesheet actually uses (400, 500 and 600).

   These are the latin subsets — the same files Google serves — which covers
   English and German including umlauts and ß. Anything outside the range below
   falls back per glyph, as it would have anyway.

   ⚠ The metrics on 'Georgia Adjusted' are computed, not guessed: size-adjust
   matches Georgia's x-height to Cormorant's (Cormorant's is much smaller, which
   is why the unadjusted swap moved the hero headline and was the single largest
   contributor to the page's layout shift). Recompute them if the serif changes.
─────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond Var';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond Var';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-var-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Georgia, resized and remetricked to sit where Cormorant will sit, so the
   swap when the real serif arrives moves nothing. Derived from both fonts'
   OS/2 tables: Cormorant x-height 386/1000 against Georgia's 986/2048. */
@font-face {
  font-family: 'Georgia Adjusted';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 80.18%;
  ascent-override: 115.25%;
  descent-override: 35.80%;
  line-gap-override: 0%;
}

/* ─── Design tokens ──────────────────────────────────────────────────────── */

:root {
  --color-sky-50:  #F7FAFB;
  --color-sky-100: #EDF3F7;
  --color-sky-200: #D8E8F0;
  --color-sky-300: #B8D2E2;
  --color-sky-400: #8BB4CA;
  --color-sky-500: #5B8FA8;
  --color-sky-600: #3D6F88;
  --color-sky-700: #2A5068;
  --color-sky-800: #1A3348;
  --color-sky-900: #0F1F2E;

  --color-teal-400: #4A9898;
  --color-teal-500: #3A7E7E;
  --color-teal-600: #2A6060;

  --color-gold-300: #DEB96A;
  --color-gold-400: #C9A030;
  --color-gold-500: #A07A20;

  --color-success: #8FDDB5;
  --color-error: #E39B9B;

  --font-serif: 'Cormorant Garamond Var', 'Georgia Adjusted', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter Var', system-ui, -apple-system, sans-serif;
}

/* ─── Reset & base ───────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* The canvas colour, which is what iOS Safari samples to tint its status bar
     and toolbar — it cannot be painted by CSS, only sampled from. Without this,
     body's sky-50 propagates to the canvas and Safari renders near-white bands
     against the navy header and footer. theme-color alone does not override it.
     body keeps its own light background, so only the strips beyond the body box
     (browser chrome, overscroll) pick this up. */
  background-color: var(--color-sky-900);
}

body {
  background-color: var(--color-sky-50);
  color: var(--color-sky-800);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

p { line-height: 1.75; }

a {
  color: inherit;
  text-decoration: none;
}

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

ul { list-style: none; }

/* ─── Layout utilities ───────────────────────────────────────────────────── */

.container-site {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .container-site {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .container-site {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Visually hidden but readable by screen readers — used for form labels whose
   purpose is already carried visually by a placeholder or icon. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Typography utilities ───────────────────────────────────────────────── */

.serif {
  font-family: var(--font-serif);
}

.label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sky-700);
}

/* ─── Divider ────────────────────────────────────────────────────────────── */

.divider {
  width: 3rem;
  height: 1px;
  background-color: var(--color-sky-500);
  margin: 1.5rem auto;
}

.divider-left {
  margin-left: 0;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-block;
  background-color: var(--color-sky-600);
  color: #ffffff;
  padding: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-sky-800);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-block;
  border: 1px solid var(--color-sky-500);
  color: var(--color-sky-600);
  padding: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--color-sky-600);
  color: var(--color-sky-50);
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */

/* Offset anchor links so fixed nav doesn't cover the target section */
section[id] {
  scroll-margin-top: 80px;
}

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 50;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: rgba(247, 250, 251, 0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* On dark-hero pages (homepage, about) nav starts transparent */
body.home #site-header,
body.dark-hero #site-header {
  background-color: transparent;
  box-shadow: none;
}

/* Once scrolled or menu open — always solid dark (must beat body.home and body.dark-hero selectors) */
#site-header.scrolled,
#site-header.menu-open,
body.home #site-header.scrolled,
body.home #site-header.menu-open,
body.dark-hero #site-header.scrolled,
body.dark-hero #site-header.menu-open {
  background-color: rgba(15, 31, 46, 0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Logo */
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.nav-logo-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.025em;
  color: var(--color-sky-800);
  transition: color 0.3s;
}

.nav-logo-tagline {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-top: 3px;
  display: block;
}

/* Logo image variant */
.nav-logo--image {
  line-height: 0;
}
.nav-logo--image .custom-logo {
  height: 40px;
  width: auto;
  display: block;
}
/* Invert logo image to white on dark hero backgrounds */
.dark-hero #site-header .nav-logo--image .custom-logo,
body.home #site-header .nav-logo--image .custom-logo,
#site-header.scrolled .nav-logo--image .custom-logo,
#site-header.menu-open .nav-logo--image .custom-logo {
  filter: brightness(0) invert(1);
}

/* Light logo text on dark hero or when scrolled/open */
.dark-hero #site-header .nav-logo-name,
body.home #site-header .nav-logo-name,
#site-header.scrolled .nav-logo-name,
#site-header.menu-open .nav-logo-name {
  color: #ffffff;
}

body.home #site-header .nav-logo-tagline {
  color: var(--color-sky-500);
}

/* Desktop nav */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .nav-desktop { display: flex; }
}

.nav-link {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-800);
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-teal-600);
}

/* Nav links on dark background */
.dark-hero #site-header .nav-link,
body.home #site-header .nav-link,
#site-header.scrolled .nav-link,
#site-header.menu-open .nav-link {
  color: rgba(255, 255, 255, 0.72);
}

.dark-hero #site-header .nav-link:hover,
.dark-hero #site-header .nav-link.active,
#site-header.scrolled .nav-link:hover,
#site-header.scrolled .nav-link.active,
#site-header.menu-open .nav-link.active {
  color: #ffffff;
}

.nav-cta {
  background-color: var(--color-sky-600);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.625rem 1.25rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  text-decoration: none;
}

.nav-cta:hover {
  background-color: var(--color-sky-700);
  color: #ffffff;
}

/* Cart link — printed by sk_woo_cart_link() only when the cart is non-empty,
   so it never appears in the cacheable markup an anonymous visitor sees.
   Outlined rather than filled so it reads as secondary to .nav-cta, and it
   follows the same light/dark context rules as .nav-link. */
.nav-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-sky-500);
  color: var(--color-sky-700);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nav-cart-link:hover {
  background-color: var(--color-sky-600);
  border-color: var(--color-sky-600);
  color: #ffffff;
}

.nav-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background-color: var(--color-sky-600);
  color: #ffffff;
  font-size: 0.65rem;
  line-height: 1;
}

.nav-cart-link:hover .nav-cart-count {
  background-color: #ffffff;
  color: var(--color-sky-700);
}

.dark-hero #site-header .nav-cart-link,
body.home #site-header .nav-cart-link,
#site-header.scrolled .nav-cart-link,
#site-header.menu-open .nav-cart-link {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.88);
}

.nav-mobile-inner .nav-cart-link {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav-hamburger { display: none; }
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-sky-800);
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}

.dark-hero #site-header .nav-hamburger span,
body.home #site-header .nav-hamburger span,
#site-header.scrolled .nav-hamburger span,
#site-header.menu-open .nav-hamburger span {
  background-color: #ffffff;
}

#site-header.menu-open .nav-hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#site-header.menu-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
}

#site-header.menu-open .nav-hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.nav-mobile {
  display: block;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  background-color: var(--color-sky-900);
}

.nav-mobile.open {
  max-height: 100vh;
  border-top: 1px solid var(--color-sky-800);
}

.nav-mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 2rem 1.75rem 2.5rem;
}

.nav-mobile-section {
  display: flex;
  flex-direction: column;
}

.nav-mobile-heading {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sky-600);
  margin-bottom: 1.25rem;
}

.nav-mobile-section-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-mobile-link {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s;
}

.nav-mobile-link:hover,
.nav-mobile-link.active {
  color: #ffffff;
}

.nav-mobile-cta {
  background-color: var(--color-sky-500);
  color: #ffffff;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.875rem 1.25rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  transition: background-color 0.2s;
}

.nav-mobile-cta:hover {
  background-color: var(--color-sky-600);
  color: #ffffff;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

#site-footer {
  background-color: var(--color-sky-900);
  color: var(--color-sky-400);
  /* With viewport-fit=cover the page reaches into the home-indicator strip, so
     the footer's navy paints it instead of leaving a band of body background. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-image-strip {
  position: relative;
  height: 10rem;
  overflow: hidden;
}

.footer-image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  opacity: 0.4;
}

.footer-image-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--color-sky-900) 100%);
}

/* Footer newsletter — its own moment, not an afterthought under the brand
   column. Reuses the eyebrow → serif headline → sans copy → button vocabulary
   from template-parts/sections/cta.php, so it reads as one designed system. */
.footer-newsletter {
  padding-top: 3.15rem;
  text-align: center;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.footer-newsletter-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-300);
  margin-bottom: 1rem;
}

.footer-newsletter-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-newsletter-copy {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-sky-300);
  max-width: 26rem;
  margin: 0 auto 2.25rem;
}

.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 26rem;
  margin: 0 auto;
}

.footer-newsletter-field-row {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

@media (max-width: 479px) {
  .footer-newsletter-field-row {
    flex-direction: column;
  }
}

.footer-newsletter-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #ffffff;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid var(--color-sky-700);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  width: 100%;
  min-width: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.footer-newsletter-input::placeholder { color: var(--color-sky-500); }
.footer-newsletter-input:focus,
.footer-newsletter-input:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 2px;
  border-color: var(--color-sky-500);
  background-color: rgba(255,255,255,0.1);
}

.footer-newsletter-submit {
  flex-shrink: 0;
  white-space: nowrap;
}
.footer-newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.footer-newsletter-submit:focus-visible {
  outline: 2px solid var(--color-sky-300);
  outline-offset: 2px;
}

.footer-newsletter-error {
  align-self: flex-start;
  font-size: 0.8rem;
  color: #E39B9B;
  margin-top: -0.5rem;
}

/* Consent stays legally present but visually quiet — small, muted, secondary
   to the headline/CTA above it rather than competing with them. */
.footer-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--color-sky-500);
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
}
.footer-newsletter-consent input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.footer-newsletter-consent .legal-modal-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-sky-400);
  text-decoration: underline;
  cursor: pointer;
}
.footer-newsletter-consent .legal-modal-trigger:focus-visible {
  outline: 2px solid var(--color-sky-300);
  outline-offset: 2px;
}

/* Honeypot — off-screen, zero-dimension, out of tab order and unreadable to
   screen readers; never a visible field for a real visitor. */
.footer-newsletter-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-newsletter-banner {
  font-size: 0.85rem;
  line-height: 1.6;
  animation: footer-newsletter-banner-in 0.4s ease both;
}
.footer-newsletter-banner-success { color: var(--color-success); }
.footer-newsletter-banner-error { color: var(--color-error); }

@keyframes footer-newsletter-banner-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer-newsletter-divider {
  border-top: 1px solid var(--color-sky-800);
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 640px) {
  .footer-newsletter { padding-top: 3.85rem; }
  .footer-newsletter-field-row { gap: 1rem; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: #ffffff;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-brand-tagline {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  display: block;
  margin-top: 0.25rem;
}

.footer-brand-description {
  font-size: 0.875rem;
  color: var(--color-sky-300);
  line-height: 1.75;
  margin-top: 1rem;
  max-width: 220px;
}

.footer-brand-cta {
  display: inline-block;
  margin-top: 1.5rem;
  border: 1px solid var(--color-sky-500);
  color: var(--color-sky-500);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.footer-brand-cta:hover {
  background-color: var(--color-sky-500);
  color: #ffffff;
}

.footer-col-heading {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: 1.25rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col a {
  font-size: 0.875rem;
  color: var(--color-sky-300);
  transition: color 0.2s;
}

.footer-col a:hover {
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid var(--color-sky-800);
  margin-top: 3.5rem;
  padding-top: 2rem;
  /* The last row sat flush with the end of the page, which put it under
     Safari's floating toolbar once scrolled to the bottom. */
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-copyright,
.footer-legal {
  font-size: 0.75rem;
  color: var(--color-sky-400);
}

.footer-legal {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.footer-legal:hover {
  color: var(--color-sky-200);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The link sits beside a button and has to read as the same control. */
a.footer-legal { text-decoration: none; }

.booking-legal-notice {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-sky-400);
  text-align: center;
}

.booking-legal-link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--color-sky-500);
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Homepage ───────────────────────────────────────────────────────────── */

/* Hero */
.hero {
  position: relative;
  min-height: 75vh;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero { min-height: 100vh; }
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x-mobile, 80%) center;
}

@media (min-width: 1024px) {
  .hero-bg img { object-position: var(--focus-x-desktop, center) center; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Uniform wash — content is centered/full-width below 1024px, so contrast
     can't depend on which part of the photo happens to sit behind the text. */
  background: rgba(15,31,46,0.72);
}

@media (min-width: 1024px) {
  .hero-overlay {
    /* Diagonal gradient — paired with left-aligned text at this breakpoint,
       so it only needs to darken the left portion of the photo. */
    background: linear-gradient(100deg, rgba(15,31,46,0.88) 0%, rgba(15,31,46,0.60) 50%, rgba(15,31,46,0.20) 100%);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 75vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    min-height: 100vh;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

.hero-content {
  padding-top: 6rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}

@media (min-width: 1024px) {
  .hero-content {
    padding-top: 0;
    padding-bottom: 6rem;
    justify-content: flex-end;
    height: 100vh;
    text-align: left;
  }
}

.hero-eyebrow {
  display: inline-block;
  color: var(--color-gold-300);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  background-color: rgba(15,31,46,0.45);
  border: 1px solid rgba(222,185,106,0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  margin-bottom: 1.5rem;
  align-self: center;
}

@media (min-width: 1024px) {
  .hero-eyebrow { align-self: flex-start; }
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

@media (min-width: 768px) {
  .hero-headline { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .hero-headline { font-size: 3.25rem; }
}

@media (min-width: 1280px) {
  .hero-headline { font-size: 4.25rem; }
}

.hero-headline em {
  font-style: italic;
  color: var(--color-gold-300);
}

.hero-subheadline {
  color: var(--color-sky-300);
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

@media (min-width: 1024px) {
  .hero-subheadline { margin-left: 0; }
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.hero-ctas .btn-outline {
  color: #B8D2E2;
  border-color: #8BB4CA;
}

@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; justify-content: center; }
}

@media (min-width: 1024px) {
  .hero-ctas { justify-content: flex-start; }
}

.hero-portrait {
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100vh;
}

@media (min-width: 1024px) {
  .hero-portrait { display: flex; }
}

.hero-portrait img {
  object-fit: contain;
  object-position: bottom;
  max-height: 85vh;
  width: auto;
}

/* Trust bar */
.trust-bar {
  background-color: var(--color-sky-800);
  padding: 1.75rem 0;
}

.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .trust-bar-inner { gap: 3.5rem; }
}

.trust-bar-item {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C8DDE8;
}

/* Why Stephanie cards */
.why-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.why-card {
  background-color: var(--color-sky-50);
  padding: 2rem;
}

.why-card-number {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--color-sky-600);
  margin-bottom: 1.5rem;
  line-height: 1;
}

.why-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-sky-800);
  margin-bottom: 0.75rem;
}

.why-card-body {
  font-size: 0.95rem;
  color: #3D5468;
  line-height: 1.75;
}

/* Is This You */
.is-this-you-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .is-this-you-grid { grid-template-columns: 1fr 1fr; }
}

.pain-points {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pain-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: #3D5468;
}

.pain-point-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-sky-500);
  margin-top: 9px;
}

/* Focus areas */
.focus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-sky-200);
}

@media (min-width: 640px) {
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.focus-card {
  background-color: var(--color-sky-50);
  padding: 2.5rem;
}

.focus-card-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-sky-600);
}

.focus-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-sky-800);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.focus-card-desc {
  font-size: 0.875rem;
  color: #4A6070;
  line-height: 1.75;
}

.focus-cta-card {
  background-color: var(--color-sky-600);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.focus-cta-card p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #ffffff;
}

.focus-cta-card a {
  display: inline-block;
  margin-top: 1.5rem;
  border: 1px solid rgba(255,255,255,0.6);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  align-self: flex-start;
}

.focus-cta-card a:hover {
  background-color: #ffffff;
  color: var(--color-sky-600);
}

/* Pull quote */
.pull-quote {
  position: relative;
  height: 420px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .pull-quote { height: 520px; }
}

.pull-quote-bg {
  position: absolute;
  inset: 0;
}

.pull-quote-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pull-quote-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15,31,46,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pull-quote-inner {
  text-align: center;
  padding: 0 1.5rem;
}

.pull-quote-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-300);
  margin-bottom: 1.5rem;
}

.pull-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  color: #ffffff;
  font-style: italic;
  line-height: 1.2;
  max-width: 48rem;
  margin: 0 auto;
}

/* How it works */
.how-it-works {
  background-color: var(--color-sky-900);
}

.how-it-works-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .how-it-works-steps { grid-template-columns: repeat(3, 1fr); gap: 5rem; }
}

.how-step {
  text-align: center;
}

.how-step-number {
  font-family: var(--font-serif);
  font-size: 3.75rem;
  color: var(--color-sky-500);
  line-height: 1;
}

.how-step-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.how-step-desc {
  font-size: 0.875rem;
  color: var(--color-sky-400);
  line-height: 1.75;
}

/* Testimonials */
.testimonials-carousel {
  position: relative;
}

.testimonials-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  /* Track gap (1.5rem) + the peek (1rem). The card fills the content box the
     padding leaves behind, so this is what sizes the card on phones. */
  padding-right: 2.5rem;
}

.testimonials-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  background-color: var(--color-sky-100);
  padding: 2rem;
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* The strip of the next card left visible on mobile is a fixed 1rem, never a
   percentage: it has to stay narrower than the card's 2rem padding, or it
   exposes sliced glyphs instead of blank card. A percentage peek grows with the
   viewport while that padding doesn't, which is exactly how it used to break. */
@media (min-width: 640px) and (max-width: 767px) {
  /* Room here for a strip on both sides, so the card reads as centred. Below
     this width the same treatment would cost too much text width. */
  .testimonials-track { padding-inline: 2.5rem; }
  .testimonial-card { scroll-snap-align: center; }
}

/* Widths subtract the track gap so a whole number of cards fits the container:
   percentages alone overflow, because the gaps sit outside the percentage. */
@media (min-width: 768px) {
  .testimonials-track { padding-inline: 0; }
  .testimonial-card { width: calc((100% - 1.5rem) / 2); }
}

@media (min-width: 1024px) {
  .testimonial-card {
    padding: 2.5rem;
    width: calc((100% - 3rem) / 3);
  }
}

.testimonials-controls {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.testimonials-controls[hidden] { display: none; }

.testimonials-prev,
.testimonials-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-sky-200);
  background-color: #fff;
  color: #3D6F88;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.testimonials-prev:hover,
.testimonials-next:hover { background-color: var(--color-sky-100); }

.testimonials-prev:disabled,
.testimonials-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.testimonials-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The dot people see is 10px; the dot people can hit is 24px. WCAG 2.2 asks for
   24px of target, and a 10px button is a genuinely hard thing to tap — so the
   button carries the target and a pseudo-element carries the look. */
.testimonials-dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.testimonials-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-sky-200);
  transition: background-color 0.2s ease;
}

.testimonials-dot.active::before { background-color: #5B8FA8; }

.testimonials-dot:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: -2px;
  border-radius: 50%;
}

.testimonial-quote-mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--color-sky-300);
  line-height: 1;
  display: block;
}

.testimonial-text {
  position: relative;
  font-size: 0.95rem;
  color: #3D5468;
  line-height: 1.75;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.testimonial-text p + p { margin-top: 1rem; }

/* Longer quotes are clipped in the card and read in full in the dialog. The
   clamp is switched on from JS (.testimonials-clamped) so a visitor without
   JS — who would have no dialog to open — still gets the whole quote. */
.testimonials-clamped .testimonial-text {
  max-height: 12.25rem;
  overflow: hidden;
}

.testimonial-card.is-clamped .testimonial-text {
  margin-bottom: 0.85rem;
}

.testimonial-card.is-clamped .testimonial-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, rgba(237, 243, 247, 0), var(--color-sky-100));
  pointer-events: none;
}

.testimonial-readmore {
  align-self: flex-start;
  margin-bottom: 2rem;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sky-600);
  cursor: pointer;
  transition: color 0.2s ease;
}

.testimonial-readmore[hidden] { display: none; }
.testimonial-readmore:hover { color: var(--color-sky-800); }
.testimonial-readmore:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 3px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-sky-200);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.testimonial-avatar-initials {
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-sky-800);
  font-family: var(--font-serif);
}

.testimonial-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-sky-800);
}

/* Full-testimonial dialog — same visual language as .info-dialog, sized for
   long-form reading rather than a short list. */
.testimonial-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.testimonial-dialog[hidden] { display: none; }

.testimonial-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 46, 0.7);
  backdrop-filter: blur(3px);
}

.testimonial-dialog-panel {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.testimonial-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--color-sky-100);
}

.testimonial-dialog-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-sky-800);
  font-weight: 400;
}

.testimonial-dialog-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-sky-500);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s;
}

.testimonial-dialog-close:hover { color: var(--color-sky-800); }
.testimonial-dialog-close:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 2px;
}

.testimonial-dialog-body {
  overflow-y: auto;
  padding: 1.75rem;
  flex: 1;
}

.testimonial-dialog-body:focus { outline: none; }

.testimonial-dialog-mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--color-sky-300);
  line-height: 1;
  display: block;
}

.testimonial-dialog-text {
  font-size: 0.95rem;
  color: #3D5468;
  line-height: 1.85;
  margin-top: 0.5rem;
}

.testimonial-dialog-text p + p { margin-top: 1rem; }

.testimonial-dialog-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-sky-100);
}

/* Google reviews badge — a quiet line of evidence, not a shouted rating. The
   whole thing is a link, because a number you can't check is just a claim. */
.google-reviews {
  margin-top: 1.5rem;
  text-align: center;
}

.google-reviews a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--color-sky-600);
  transition: color 0.2s ease;
}

.google-reviews a:hover { color: var(--color-sky-800); }
.google-reviews a:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 3px;
}

.google-reviews-stars {
  color: var(--color-gold-400);
  font-size: 1rem;
  line-height: 1;
}

.google-reviews-rating {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
}

.google-reviews-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* "Read more client stories" — same quiet uppercase treatment as the card's
   read-more control, so the two read as one family. */
.testimonials-more {
  margin-top: 2.5rem;
  text-align: center;
}

.testimonials-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sky-600);
  transition: color 0.2s ease;
}

.testimonials-more a:hover { color: var(--color-sky-800); }
.testimonials-more a span { transition: transform 0.2s ease; }
.testimonials-more a:hover span { transform: translateX(3px); }
.testimonials-more a:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 3px;
}

/* Testimonials page — the same card, laid out to be read rather than swiped.
   Two columns at most: these quotes run to several paragraphs, and a third
   column would make the lines too short to read comfortably. */
.testimonials-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .testimonials-page-grid { gap: 2rem; grid-template-columns: 1fr 1fr; }
}

/* The card's width rules exist to fit cards across the carousel track; in a
   grid the cell already decides the width. */
.testimonials-page-grid .testimonial-card { width: auto; }

/* About preview */
.about-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-preview-grid { grid-template-columns: 1fr 1fr; }
}

.about-preview-portrait {
  position: relative;
}

.about-preview-portrait-wrap {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}

.about-preview-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.about-preview-floating-quote {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background-color: #ffffff;
  padding: 1.5rem;
  max-width: 240px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  display: none;
}

@media (min-width: 768px) {
  .about-preview-floating-quote { display: block; right: -2.5rem; }
}

.about-preview-floating-quote p {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  color: #3D5468;
  font-style: italic;
  font-weight: 600;
  line-height: 1.75;
}

.about-preview-content {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .about-preview-content { padding-left: 2rem; }
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.about-stat {
  background-color: #ffffff;
  padding: 1.25rem;
}

.about-stat-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-sky-500);
}

.about-stat-label {
  font-size: 0.68rem;
  color: #4A6070;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* FAQ */
.faq-list {
  border-top: 1px solid var(--color-sky-200);
}

.faq-item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-sky-200);
}

.faq-question {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-sky-800);
  margin-bottom: 0.75rem;
}

.faq-answer {
  font-size: 0.875rem;
  color: #3D5468;
  line-height: 1.75;
}

/* Final CTA section */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section-bg {
  position: absolute;
  inset: 0;
}

.cta-section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cta-section-overlay {
  position: absolute;
  inset: 0;
}

.cta-section-inner {
  position: relative;
  z-index: 1;
  padding-top: 8rem;
  padding-bottom: 8rem;
  text-align: center;
}

.cta-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-300);
  margin-bottom: 1.5rem;
}

.cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: #ffffff;
  margin-bottom: 1.5rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.cta-subheadline {
  color: var(--color-sky-300);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}

/* ─── About page ─────────────────────────────────────────────────────────── */

.about-hero {
  background-color: var(--color-sky-900);
  padding-top: 9rem;
  overflow: hidden;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 0;
}

@media (min-width: 1024px) {
  .about-hero-grid { grid-template-columns: 1fr 1fr; }
}

.about-hero-content {
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .about-hero-content { padding-bottom: 5rem; }
}

.about-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 7vw, 3.75rem);
  color: #ffffff;
  line-height: 1.08;
  max-width: 32rem;
}

.about-hero-divider {
  width: 3rem;
  height: 1px;
  background-color: var(--color-sky-500);
  margin: 2rem 0;
}

.about-hero-sub {
  color: var(--color-sky-400);
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 28rem;
}

.about-hero-portrait {
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .about-hero-portrait { justify-content: flex-end; }
}

.about-hero-portrait-wrap {
  position: relative;
  width: 360px;
  height: 480px;
}

@media (min-width: 1024px) {
  .about-hero-portrait-wrap { width: 440px; height: 600px; }
}

.about-hero-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* Foundation */
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .foundation-grid { grid-template-columns: 1fr 1fr; }
}

.foundation-body p + p { margin-top: 1.25rem; }

.foundation-blockquote {
  border-left: 2px solid var(--color-sky-500);
  padding-left: 2rem;
}

.foundation-blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-sky-800);
  font-style: italic;
  line-height: 1.4;
}

.foundation-portrait {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}

.foundation-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Story */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .story-grid { grid-template-columns: 3fr 2fr; }
}

.story-body p + p { margin-top: 1.25rem; }

.story-images {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.story-img-tall {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
}

.story-img-square {
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}

.story-img-tall img,
.story-img-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Self-hosted video block — the frame takes its shape from the file via
   aspect-ratio, so an upright video renders upright. The old site put this same
   clip in a landscape box and paid for it in black bars down both sides. */
.video-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.video-block-player {
  width: 100%;
  height: auto;
  display: block;
  background-color: var(--color-sky-200);
}

.video-block-caption {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-sky-600);
}

/* Upright video in a centred text block: held to roughly a phone's width, or
   it towers over the paragraphs it belongs to. */
.video-block-centred {
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
}

.video-block-centred .video-block-caption { text-align: center; }

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-sky-800);
}

@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

.value-card {
  background-color: var(--color-sky-900);
  padding: 2.5rem;
}

.value-card-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.value-card-desc {
  font-size: 0.875rem;
  color: var(--color-sky-400);
  line-height: 1.75;
}

/* Media & Appearances */
.media-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.media-item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
  transition: background-color 0.2s;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 640px) {
  .media-item { flex-direction: row; }
}

.media-item:hover { background-color: var(--color-sky-50); }

.media-thumbnail {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background-color: var(--color-sky-200);
}

@media (min-width: 640px) {
  .media-thumbnail { width: 13rem; aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .media-thumbnail { width: 15rem; }
}

.media-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15,31,46,0.3);
  transition: background-color 0.2s;
}

.media-item:hover .media-play-overlay {
  background-color: rgba(15,31,46,0.2);
}

.media-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 2rem;
}

.media-platform {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: 0.5rem;
}

.media-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-sky-800);
  line-height: 1.3;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}

.media-item:hover .media-title { color: var(--color-sky-600); }

.media-desc {
  font-size: 0.875rem;
  color: #6B8498;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.media-watch {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-500);
}

.media-item:hover .media-watch { text-decoration: underline; }

/* Credentials */
.credentials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .credentials-grid { grid-template-columns: 1fr 1fr; }
}

.credentials-intro-img {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}

.credentials-intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.credentials-list {
  border-top: 1px solid var(--color-sky-200);
}

.credential-item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-sky-200);
}

.credential-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-sky-800);
  margin-bottom: 0.25rem;
}

.credential-detail {
  font-size: 0.875rem;
  color: #6B8498;
}

/* ─── Coaching page ──────────────────────────────────────────────────────── */

.coaching-hero {
  background-color: var(--color-sky-100);
  padding-top: 9rem;
  padding-bottom: 5rem;
  overflow: hidden;
}
.coaching-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .coaching-hero-grid { grid-template-columns: 1fr 1fr; }
}
.coaching-hero-img {
  display: none;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.coaching-hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .coaching-hero-img { display: block; }
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.service-for-whom {
  background-color: var(--color-sky-900);
  padding: 2.5rem;
}
@media (min-width: 1024px) { .service-for-whom { padding: 3rem; } }
.service-for-whom-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: 1.5rem;
}
.service-for-whom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-for-whom-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: #8BB4CA;
  font-size: 0.9rem;
  line-height: 1.5;
}
.service-for-whom-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-sky-500);
  margin-top: 0.55rem;
}

.topics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-sky-800);
}
@media (min-width: 640px)  { .topics-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .topics-grid { grid-template-columns: repeat(4, 1fr); } }
.topic-card {
  background-color: var(--color-sky-900);
  padding: 2rem;
}
.topic-card-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.topic-card-desc { font-size: 0.875rem; color: #6B8498; line-height: 1.6; }

.session-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
@media (min-width: 1024px) { .session-grid { grid-template-columns: 1fr 1fr; } }
.session-details-panel {
  background-color: var(--color-sky-100);
  padding: 2.5rem;
}
.session-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  gap: 1.5rem;
  border-bottom: 1px solid #D8E8F0;
}
.session-info-item:first-child { border-top: 1px solid #D8E8F0; }
.session-info-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #6B8498;
}
.session-info-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-sky-800);
  text-align: right;
}
.session-landscape-img { aspect-ratio: 16/9; overflow: hidden; }
.session-landscape-img img { width: 100%; height: 100%; object-fit: cover; }
.session-info-dialog-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--color-sky-600);
  text-decoration: underline;
  cursor: pointer;
}

.coaching-faq-list { max-width: 48rem; margin: 0 auto; }
.coaching-faq-item {
  padding: 2rem 0;
  border-bottom: 1px solid #D8E8F0;
}
.coaching-faq-item:first-child { border-top: 1px solid #D8E8F0; }
.coaching-faq-q {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-sky-800);
  margin-bottom: 0.75rem;
}
.coaching-faq-a { font-size: 0.875rem; color: #3D5468; line-height: 1.75; }

/* ─── Book page ───────────────────────────────────────────────────────────── */

.book-hero {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 5rem;
  overflow: hidden;
}
.book-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.book-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.book-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,24,38,0.65);
  z-index: 1;
}
.book-hero-inner { position: relative; z-index: 2; }
.book-hero-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: 1.25rem;
}
.book-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  color: #fff;
  line-height: 1.1;
  max-width: 36rem;
  margin-bottom: 2rem;
}
.book-hero-divider { width: 3rem; height: 1px; background-color: var(--color-sky-500); margin-bottom: 2rem; }
.book-hero-sub { color: #8BB4CA; font-size: 1.125rem; line-height: 1.75; max-width: 36rem; }

.discovery-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .discovery-steps { grid-template-columns: repeat(3, 1fr); } }
.discovery-step-card {
  background-color: var(--color-sky-100);
  padding: 2.5rem;
  text-align: center;
}
.discovery-step-number {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--color-sky-500);
  display: block;
}
.discovery-step-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-sky-800);
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
.discovery-step-desc { font-size: 0.875rem; color: #6B8498; line-height: 1.6; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 3fr 2fr; } }

.booking-calendar-box {
  background: #fff;
  border: 1px solid #D8E8F0;
  padding: 2.5rem;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.booking-calendar-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-sky-800);
}
.booking-calendar-sub { font-size: 0.875rem; color: #6B8498; max-width: 24rem; }
.booking-calendar-links { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 20rem; }
.booking-calendar-email { font-size: 0.75rem; color: #8BB4CA; }

/* ─── Contact form ────────────────────────────────────────────────────────── */

.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-sky-700);
}
.contact-form-input,
.contact-form-textarea {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-sky-800);
  background: #fff;
  border: 1px solid var(--color-sky-200);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  width: 100%;
}
.contact-form-textarea { resize: vertical; }
.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: var(--color-sky-500);
}
.contact-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: #3D5468;
  line-height: 1.5;
  cursor: pointer;
}
.contact-form-consent input { margin-top: 0.2rem; }
.contact-form-consent .legal-modal-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-sky-600);
  text-decoration: underline;
  cursor: pointer;
}
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-banner {
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.contact-form-banner-success {
  background: #E4F3EC;
  border: 1px solid #B7DEC9;
  color: #1F5C3C;
}
.contact-form-banner-error {
  background: #FBEAEA;
  border: 1px solid #EFC2C2;
  color: #7A2727;
}

.book-testimonial { max-width: 40rem; margin: 0 auto; text-align: center; }
.book-testimonial-mark {
  font-family: var(--font-serif);
  font-size: 4rem;
  color: #D8E8F0;
  line-height: 1;
  display: block;
}
.book-testimonial-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-style: italic;
  color: var(--color-sky-800);
  line-height: 1.5;
}
.book-testimonial-attr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.book-testimonial-attr-line { width: 2rem; height: 1px; background: var(--color-sky-500); }
.book-testimonial-attr-name { font-size: 0.875rem; font-weight: 500; color: #3D5468; }

.book-faq-list { max-width: 40rem; margin: 0 auto; }
.book-faq-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid #D8E8F0;
}
.book-faq-item:first-child { border-top: 1px solid #D8E8F0; }
.book-faq-q {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-sky-800);
  margin-bottom: 0.5rem;
}
.book-faq-a { font-size: 0.875rem; color: #3D5468; line-height: 1.75; }
.book-faq-footer { margin-top: 2rem; text-align: center; }

/* ─── Blog archive (home.php / archive.php) ─────────────────────────────── */

.blog-hero {
  position: relative;
  padding-top: 9rem;
  padding-bottom: 5rem;
  overflow: hidden;
}
.blog-hero-bg { position: absolute; inset: 0; z-index: 0; }
.blog-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blog-hero-overlay { position: absolute; inset: 0; background: rgba(10,24,38,0.65); z-index: 1; }
.blog-hero-inner { position: relative; z-index: 2; }
.blog-hero-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: 1.25rem;
}
.blog-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  color: #fff;
  line-height: 1.1;
  max-width: 36rem;
  margin-bottom: 2rem;
}
.blog-hero-divider { width: 3rem; height: 1px; background: var(--color-sky-500); margin-bottom: 2rem; }
.blog-hero-sub { color: #8BB4CA; font-size: 1.125rem; line-height: 1.75; max-width: 32rem; }

.featured-post {
  display: block;
  background-color: var(--color-sky-100);
  padding: 2.5rem;
  text-decoration: none;
  transition: background-color 0.3s;
}
@media (min-width: 1024px) { .featured-post { padding: 4rem; } }
.featured-post:hover { background-color: #D8E8F0; }
.featured-post-thumbnail {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.featured-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.featured-post:hover .featured-post-thumbnail img { transform: scale(1.03); }
.featured-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.featured-post-meta-dot { color: #B8D2E2; font-size: 0.75rem; }
.featured-post-meta-text { font-size: 0.75rem; color: #6B8498; }
.featured-post-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--color-sky-800);
  line-height: 1.15;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.featured-post:hover .featured-post-title { color: #3D6F88; }
.featured-post-excerpt {
  color: #3D5468;
  line-height: 1.75;
  max-width: 40rem;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.featured-post-read {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-sky-500);
}
.featured-post:hover .featured-post-read { text-decoration: underline; }

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px)  { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: block;
  background-color: var(--color-sky-50);
  text-decoration: none;
  transition: background-color 0.3s;
}
.post-card:hover { background-color: #fff; }
.post-card-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.post-card-thumbnail img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.post-card:hover .post-card-thumbnail img { transform: scale(1.03); }
.post-card-body { padding: 2rem; }
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.post-card-meta-dot { color: #B8D2E2; font-size: 0.75rem; }
.post-card-meta-text { font-size: 0.75rem; color: #6B8498; }
.post-card-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-sky-800);
  line-height: 1.3;
  margin-bottom: 1rem;
  transition: color 0.2s;
}
.post-card:hover .post-card-title { color: #3D6F88; }
.post-card-excerpt {
  font-size: 0.875rem;
  color: #6B8498;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.post-card-date { font-size: 0.75rem; color: #8BB4CA; }
.post-card-read {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-sky-500);
}

.archive-header { text-align: center; margin-bottom: 3rem; }
.archive-header-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: 1rem;
}
.archive-header-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-sky-800);
  margin-bottom: 1.5rem;
}

.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}
.blog-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: var(--color-sky-700);
  border: 1px solid #D8E8F0;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.blog-pagination span.page-numbers.dots {
  border-color: transparent;
}
.blog-pagination a.page-numbers.current,
.blog-pagination span.page-numbers.current,
.blog-pagination a.page-numbers:hover {
  background-color: var(--color-sky-800);
  color: #fff;
  border-color: var(--color-sky-800);
}

/* ─── Single post ────────────────────────────────────────────────────────── */

.single-article-hero {
  background-color: var(--color-sky-100);
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

.single-article-body-section {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .single-article-hero { padding-top: 7rem; padding-bottom: 3rem; }
  .single-article-body-section { padding-top: 3rem; padding-bottom: 7rem; }
}
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.article-breadcrumb a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-sky-600);
  text-decoration: none;
  transition: color 0.2s;
}
.article-breadcrumb a:hover { color: var(--color-sky-800); }
.article-breadcrumb-dot { color: #B8D2E2; font-size: 0.75rem; }
.article-breadcrumb-cat {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6B8498;
}
.single-article-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-sky-800);
  line-height: 1.15;
  max-width: 40rem;
  margin-bottom: 1.5rem;
}
.single-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #6B8498;
}
.single-article-meta-dot { color: #B8D2E2; }

.single-article-featured-image {
  width: 100%;
  height: 280px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  background-color: var(--color-sky-100);
  border-radius: 8px;
}
.single-article-featured-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.article-body { max-width: 40rem; }
.article-excerpt-pull {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #3D5468;
  line-height: 1.75;
  font-style: italic;
  border-left: 2px solid var(--color-sky-500);
  padding-left: 2rem;
  margin-bottom: 2.5rem;
}
.article-content {
  color: #3D5468;
  line-height: 1.8;
  font-size: 0.97rem;
}
.article-content p { margin-bottom: 1.25rem; }
.article-content h2 { font-family: var(--font-serif); font-size: 1.75rem; color: var(--color-sky-800); margin-top: 2.5rem; margin-bottom: 1rem; }
.article-content h3 { font-family: var(--font-serif); font-size: 1.35rem; color: var(--color-sky-800); margin-top: 2rem; margin-bottom: 0.75rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-content li { margin-bottom: 0.5rem; }
.article-content a { color: var(--color-sky-600); text-decoration: underline; }
.article-content a:hover { color: var(--color-sky-800); }
.article-content blockquote {
  border-left: 2px solid var(--color-sky-500);
  padding-left: 2rem;
  font-style: italic;
  color: #6B8498;
  margin: 2rem 0;
}
.article-content img { max-width: 100%; height: auto; }

.author-bio {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #D8E8F0;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.author-bio-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #D8E8F0;
}
.author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.author-bio-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-sky-800);
  margin-bottom: 0.25rem;
}
.author-bio-desc { font-size: 0.875rem; color: #6B8498; line-height: 1.6; margin-bottom: 0.75rem; }
.author-bio-link {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-sky-500);
  text-decoration: none;
}
.author-bio-link:hover { color: var(--color-sky-800); }

.post-nav {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav-item {
  background-color: var(--color-sky-100);
  padding: 1.5rem;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s;
}
.post-nav-item:hover { background-color: #D8E8F0; }
.post-nav-item--next { text-align: right; }
.post-nav-label {
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #6B8498;
  display: block;
  margin-bottom: 0.75rem;
}
.post-nav-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-sky-800);
  transition: color 0.2s;
}
.post-nav-item:hover .post-nav-title { color: #3D6F88; }

/* ─── Generic page (page.php) ────────────────────────────────────────────── */

.page-content {
  max-width: 44rem;
  color: #3D5468;
  line-height: 1.8;
  font-size: 0.97rem;
}
.page-content h1, .page-content h2, .page-content h3 {
  font-family: var(--font-serif);
  color: var(--color-sky-800);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.page-content h2 { font-size: 1.75rem; }
.page-content h3 { font-size: 1.35rem; }
.page-content p  { margin-bottom: 1.25rem; }
.page-content ul, .page-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.page-content li { margin-bottom: 0.5rem; }
.page-content a  { color: var(--color-sky-600); text-decoration: underline; }
.page-content a:hover { color: var(--color-sky-800); }
.page-content hr { border: none; border-top: 1px solid #D8E8F0; margin: 2.5rem 0; }
.page-content strong { color: var(--color-sky-800); font-weight: 600; }

/* ─── WordPress core overrides ───────────────────────────────────────────── */

.wp-block-image img { border-radius: 0; }
.alignwide  { max-width: 100%; }
.alignfull  { margin-left: calc(-1 * var(--wp--style--global--wide-size, 0px)); }

/* ─── Legal Modal ────────────────────────────────────────────────────────── */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.legal-modal[hidden] { display: none; }

.legal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 46, 0.7);
  backdrop-filter: blur(3px);
}

.legal-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--color-sky-100);
}

.legal-modal-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-sky-800);
  font-weight: 400;
}

.legal-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-sky-500);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s;
}

.legal-modal-close:hover { color: var(--color-sky-800); }

.legal-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.75rem;
  border-bottom: 1px solid var(--color-sky-100);
  overflow-x: auto;
  flex-shrink: 0;
}

.legal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}

.legal-tab:hover { color: var(--color-sky-700); }

.legal-tab.active {
  color: var(--color-sky-800);
  border-bottom-color: var(--color-sky-500);
}

.legal-modal-body {
  overflow-y: auto;
  padding: 1.75rem;
  flex: 1;
}

.legal-panel { display: none; }
.legal-panel.active { display: block; }

.legal-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-sky-800);
  font-weight: 400;
  margin-bottom: 1rem;
}

.legal-panel p {
  color: #3D5468;
  line-height: 1.75;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.legal-panel ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.legal-panel li {
  color: #3D5468;
  line-height: 1.75;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.legal-panel a {
  color: var(--color-sky-600);
  text-decoration: underline;
}

.legal-updated {
  font-size: 0.75rem !important;
  color: var(--color-sky-400) !important;
  margin-top: 1.5rem;
}

.legal-modal-trigger {
  cursor: pointer;
}

.info-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.info-dialog[hidden] { display: none; }

.info-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 46, 0.7);
  backdrop-filter: blur(3px);
}

.info-dialog-panel {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.info-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--color-sky-100);
}

.info-dialog-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-sky-800);
  font-weight: 400;
}

.info-dialog-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-sky-500);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s;
}

.info-dialog-close:hover { color: var(--color-sky-800); }

.info-dialog-body {
  overflow-y: auto;
  padding: 1.75rem;
  flex: 1;
}

.info-dialog-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.info-dialog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  gap: 1.5rem;
  border-bottom: 1px solid #D8E8F0;
}
.info-dialog-item:first-child { border-top: 1px solid #D8E8F0; }
.info-dialog-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #6B8498;
}
.info-dialog-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-sky-800);
  text-align: right;
}

.info-dialog-disclaimer-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #6B8498;
  margin-bottom: 0.75rem;
}
.info-dialog-disclaimer-text { font-size: 0.75rem; color: #6B8498; line-height: 1.75; }

/* ─── Page offset for fixed nav ──────────────────────────────────────────── */

/* Inner pages: push content below the fixed nav */
.site-main {
  padding-top: 72px;
}

/* Full-bleed hero pages: nav overlays the hero, no offset needed */
body.home .site-main,
body.dark-hero .site-main {
  padding-top: 0;
}

/* ─── Cookie consent banner ─────────────────────────────────────────────── */

/* A compact floating card, not a full-width bar — same dark-navy / gold
   treatment as .hero-eyebrow and the dark hero sections, so it reads as part
   of the site rather than a bolted-on plugin widget. Kept below the legal
   modal (z-index 1000) and above the nav. */
.cookie-consent {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;
  max-width: 26rem;
  width: calc(100% - 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  background: rgba(15, 31, 46, 0.96);
  border: 1px solid rgba(222, 185, 106, 0.25);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(8, 16, 26, 0.35);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent-copy {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-sky-200);
}

.cookie-consent-copy a {
  color: var(--color-gold-300);
  text-decoration: underline;
}

.cookie-consent-copy a:hover { color: var(--color-gold-400); }

.cookie-consent-actions {
  flex: 0 0 auto;
}

.cookie-consent-accept {
  display: inline-block;
  background-color: var(--color-gold-300);
  color: var(--color-sky-900);
  padding: 0.65rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cookie-consent-accept:hover { background-color: var(--color-gold-400); }

@media (max-width: 480px) {
  .cookie-consent {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    max-width: none;
  }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-accept { width: 100%; }
}