/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
 Description: Child theme for TT5
 Version: 1.0.0
*/

/* =========================
   WEBFONTS (top-level only)
========================= */
@font-face {
  font-family: "Pangaia";
  src: url("./fonts/Pangaia-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pangaia";
  src: url("./fonts/Pangaia-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   GLOBAL TOKENS
========================= */
:root {
  --font-heading: "Pangaia", system-ui, sans-serif;
  --font-body: "Neue Montreal", system-ui, sans-serif;

  /* header heights */
  --header-h-desktop: 72px; /* adjust to your real desktop height */
  --header-h-touch: 64px; /* tablet/mobile header height */
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}
body,
p,
li {
  font-family: var(--font-body);
}

/* Kill TT5’s default top padding so the hero can sit flush under the header */
:root {
  --wp--style--root--padding-top: 0 !important;
}
.wp-site-blocks {
  padding-top: 0 !important;
}
.wp-site-blocks > *:first-child {
  margin-block-start: 0 !important;
}

/* =========================
   NAVBAR (Header behavior)
   - Header template part must have class: .site-header
========================= */

/* Fixed header; truly transparent over hero */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent !important;
  color: #fff;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color 0.22s ease, color 0.22s ease,
    border-color 0.22s ease, transform 0.22s ease;
  will-change: transform;
}

/* Desktop hide-on-scroll distance (JS toggles .nav-hidden) */
@media (min-width: 769px) {
  .site-header.nav-hidden {
    transform: translate3d(0, calc(-1 * var(--header-h-desktop)), 0);
  }
}
/* Tablet/Mobile never hide */
@media (max-width: 768px) {
  .site-header.nav-hidden {
    transform: none;
  }
}

/* Admin bar offsets (when logged in) */
@media (min-width: 782px) {
  .admin-bar .site-header {
    top: 32px;
  }
}
@media (max-width: 781.98px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Solid state after leaving hero (JS toggles body.nav-solid) */
body.nav-solid .site-header {
  background: #fff !important;
  color: #111 !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06) !important;
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.04);
}

/* Nuke any header-internal backgrounds */
.site-header .wp-block-group,
.site-header .wp-block-navigation,
.site-header .wp-block-columns,
.site-header .wp-block-cover,
.site-header .wp-block-group > *,
.site-header [style*="background"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Links inherit current color */
.site-header a,
.site-header .wp-block-navigation__submenu-container a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   HERO (scoped to .is-hero only)
   Structure:
   Group.is-hero
     └─ Cover.cover-hero
         └─ Group.hero-content
             ├─ Row.hero-corners (two paragraphs)
             └─ Group.hero-title-wrap → h1.hero-title (+ p.hero-subtitle)
========================= */

/* Make the entire hero group underlap the fixed header */
.is-hero {
  position: relative;
}
/* Desktop underlap: pull up by header height, pad inside by same */
@media (min-width: 769px) {
  .is-hero {
    margin-top: calc(-1 * var(--header-h-desktop)) !important;
    padding-top: calc(var(--header-h-desktop)) !important;
  }
}
/* Tablet/Mobile underlap */
@media (max-width: 768px) {
  .is-hero {
    margin-top: calc(-1 * var(--header-h-touch)) !important;
    padding-top: calc(var(--header-h-touch)) !important;
  }
}
/* First child inside hero shouldn’t re-add top margin */
.is-hero > *:first-child {
  margin-block-start: 0 !important;
}

/* Cover visuals inside hero */
.is-hero .cover-hero {
  position: relative;
}
.is-hero .cover-hero .wp-block-cover__inner-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* Ensure hero cover fills viewport and inner container drives layout */
.is-hero .wp-block-cover {
  min-height: 100svh;
  align-items: stretch !important;
}
.is-hero .wp-block-cover__inner-container {
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* Stack manager (only inside hero) */
.is-hero .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* sit toward bottom on desktop */
  align-items: stretch;
  gap: 1rem;
  min-height: min(100vh, 100svh);
}

/* Labels row */
.is-hero .hero-corners {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-inline: clamp(16px, 3.5vw, 48px);
}
.is-hero .hero-caption {
  margin: 0;
  font-family: "Neue Montreal", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.95;
}

/* Title wrapper + H1 */
.is-hero .hero-title-wrap {
  display: flex;
  justify-content: center; /* desktop centered */
  width: 100%;
}
.is-hero h1.hero-title {
  margin: 0;
  display: block;
  width: 100%;
  text-align: center; /* desktop centered */
  font-family: "Pangaia", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1; /* EN desktop ~100% */
  font-size: clamp(64px, 10vw, 15em);
}
.is-hero h1.hero-title br {
  display: none;
} /* no forced break on desktop */

/* Optional subtitle under H1 */
.is-hero .hero-subtitle {
  font-family: "Neue Montreal", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 0.4vw + 0.625rem, 1.25rem); /* ~16→20px */
}

/* =========================
   TABLET (480–768px) — inside hero only
========================= */
@media (min-width: 480px) and (max-width: 768px) {
  .is-hero .cover-hero .wp-block-cover__inner-container {
    padding-inline: clamp(16px, 6vw, 40px);
  }
  .is-hero .hero-content {
    justify-content: flex-end;
    gap: 0.75rem;
  }
  .is-hero .hero-corners {
    justify-content: space-between;
    padding-inline: clamp(16px, 5vw, 40px);
  }
  .is-hero .hero-title-wrap {
    justify-content: flex-start;
  } /* left-align title */
  .is-hero h1.hero-title {
    text-align: left;
    line-height: 0.95;
    font-size: clamp(48px, 9vw, 8rem);
  }
  .is-hero h1.hero-title br {
    display: none;
  }
  .is-hero .hero-subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem); /* ~15–17px */
    line-height: 1.35;
  }
}

/* =========================
   MOBILE (≤479px) — inside hero only
========================= */
@media (max-width: 479px) {
  /* H1 ABOVE labels; left aligned; center vertically */
  .is-hero .hero-content {
    display: flex !important;
    flex-direction: column-reverse !important; /* reverse DOM order */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.5rem; /* space between H1 and row */
    text-align: left;
  }
  .is-hero .hero-title-wrap,
  .is-hero .hero-corners {
    width: 100%;
  }

  .is-hero h1.hero-title {
    text-align: left !important;
    margin: 0;
    line-height: 0.9; /* 90% like EN */
    font-size: 23vw; /* EN mobile size */
    max-width: 92vw; /* side gutter */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .is-hero h1.hero-title br {
    display: inline !important;
  } /* "Only↵Gyals" */

  /* Labels under the H1 (stacked) */
  .is-hero .hero-corners {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.4rem; /* space between Pg1/Pg2 */
    padding: 0;
    margin: 0;
    text-align: left;
  }

  /* Subtitle restrained on phones */
  .is-hero .hero-subtitle {
    font-size: 1rem; /* ~16px fixed */
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  /* Gutters and top padding if header overlaps */
  .is-hero .cover-hero .wp-block-cover__inner-container {
    padding-inline: clamp(16px, 5vw, 28px);
    padding-top: 72px; /* adjust if mobile header overlaps */
  }
}

/* Safety: prevent accidental positioning/margins from pushing hero content */
.is-hero .hero-content,
.is-hero .hero-title-wrap,
.is-hero .hero-corners {
  position: static !important;
}
.is-hero .hero-content > * {
  margin-block: 0 !important;
}

/* =========================
   PAGE-LEVEL HERO SUPPORT (.home .cover-hero)
   Mirrors the .is-hero rules so you can tag the Cover in the Page editor.
========================= */

/* Ensure hero cover fills viewport and inner container drives layout */
.home .cover-hero .wp-block-cover {
  min-height: 100svh;
  align-items: stretch !important;
}
.home .cover-hero .wp-block-cover__inner-container {
  height: 100%;
  display: flex;
  align-items: stretch;
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* Stack manager */
.home .cover-hero .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* sit toward bottom on desktop */
  align-items: stretch;
  gap: 1rem;
  min-height: min(100vh, 100svh);
  margin: 0;
}

/* Corners row */
.home .cover-hero .hero-corners {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 0.5rem;
  margin: 0;
  padding-inline: clamp(16px, 3.5vw, 48px);
}
.home .cover-hero .hero-caption {
  margin: 0;
  font-family: "Neue Montreal", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.95;
}

/* Title wrapper + H1 */
.home .cover-hero .hero-title-wrap {
  display: flex;
  justify-content: center; /* desktop centered */
  width: 100%;
  margin: 0;
  padding: 0;
}
.home h1.hero-title {
  margin: 0;
  width: 100%;
  text-align: center; /* desktop centered */
  font-family: "Pangaia", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1; /* EN desktop ~100% */
  font-size: clamp(64px, 10vw, 15em);
}
.home h1.hero-title br {
  display: none;
} /* no forced break on desktop */

/* Optional subtitle */
.home .cover-hero .hero-subtitle {
  font-family: "Neue Montreal", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 0.4vw + 0.625rem, 1.25rem);
}

/* TABLET (480–768px) */
@media (min-width: 480px) and (max-width: 768px) {
  .home .cover-hero .wp-block-cover__inner-container {
    padding-inline: clamp(16px, 6vw, 40px);
  }
  .home .cover-hero .hero-content {
    justify-content: flex-end;
    gap: 0.75rem;
  }
  .home .cover-hero .hero-corners {
    justify-content: space-between;
    padding-inline: clamp(16px, 5vw, 40px);
  }
  .home .cover-hero .hero-title-wrap {
    justify-content: flex-start;
  } /* left align */
  .home h1.hero-title {
    text-align: left;
    line-height: 0.95;
    font-size: clamp(48px, 9vw, 8rem);
  }
  .home h1.hero-title br {
    display: none;
  }
  .home .cover-hero .hero-subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.35;
  }
}

/* MOBILE (≤479px) */
@media (max-width: 479px) {
  /* H1 ABOVE row; two-line split */
  .home .cover-hero .hero-content {
    display: flex !important;
    flex-direction: column-reverse !important; /* reverse order */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.5rem;
    text-align: left;
  }
  .home .cover-hero .hero-title-wrap,
  .home .cover-hero .hero-corners {
    width: 100%;
  }

  .home h1.hero-title {
    text-align: left !important;
    margin: 0;
    line-height: 0.9;
    font-size: 23vw;
    max-width: 92vw;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .home h1.hero-title br {
    display: inline !important;
  } /* "Only↵Gyals" */

  .home .cover-hero .hero-corners {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  .home .cover-hero .hero-subtitle {
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  .home .cover-hero .wp-block-cover__inner-container {
    padding-inline: clamp(16px, 5vw, 28px);
    padding-top: 72px; /* if mobile header overlaps */
  }
}

/* Safety: prevent accidental positioning/margins on page-level hero */
.home .cover-hero .hero-content,
.home .cover-hero .hero-title-wrap,
.home .cover-hero .hero-corners {
  position: static !important;
}
.home .cover-hero .hero-content > * {
  margin-block: 0 !important;
}

/* === HERO CENTERING PATCH === */

/* Treat 768px as desktop (center title) */
@media (min-width: 768px) {
  /* template-level hero */
  .is-hero .hero-title-wrap {
    justify-content: center !important;
  }
  .is-hero h1.hero-title {
    text-align: center !important;
    max-width: none !important; /* remove any content-size cap */
    width: 100% !important; /* fill the inner container */
    margin-inline: auto !important; /* ensure centered block */
  }

  /* page-level hero */
  .home .cover-hero .hero-title-wrap {
    justify-content: center !important;
  }
  .home h1.hero-title {
    text-align: center !important;
    max-width: none !important;
    width: 100% !important;
    margin-inline: auto !important;
  }
}

/* Make sure the cover’s inner container is full-bleed (with only our gutters) */
.is-hero .wp-block-cover__inner-container,
.home .cover-hero .wp-block-cover__inner-container {
  max-width: none !important; /* ignore theme content width */
  width: 100% !important;
  margin: 0 auto !important;
  /* keep your padding clamps as you already have */
}

/* === DESKTOP HERO SPAN/CENTER FIX (>=769px) ============================= */
@media (min-width: 769px) {
  /* Ensure the title container itself isn't width-capped */
  :is(.is-hero, .home .cover-hero) .hero-title-wrap {
    justify-content: center !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Make the H1 fill the inner width and center the text; scale larger */
  :is(.is-hero, .home .cover-hero) h1.hero-title {
    text-align: center !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-self: stretch !important;

    /* Bigger so it spans the container like EN */
    font-size: clamp(120px, 14vw, 15em);
    line-height: 1;
    letter-spacing: -0.01em;
  }

  /* Guard against core heading width caps */
  :is(.is-hero, .home .cover-hero) .wp-block-heading.hero-title {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Ensure no upstream max-width sneaks in from content width settings */
:is(.is-hero, .home .cover-hero) .wp-block-cover__inner-container,
:is(.is-hero, .home .cover-hero) .hero-content {
  max-width: none !important;
  width: 100% !important;
}
/* ========== About Section (EaglesNest-style) — NO BADGE ========== */

/* Section container */
.section-about {
  background: #f6f1e6; /* tweak to your palette */
  padding: clamp(32px, 6vw, 80px) 0;
  position: relative;
}

/* Inner wrap aligned to content width */
.section-about .about-wrap {
  max-width: min(1200px, 92vw);
  margin-inline: auto;
  position: relative;
}

/* Display H2 (“About us”) */
.section-about .about-title {
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(40px, 6vw, 96px);
  margin: 0 0 0.25em 0;
}

/* Multi-line deck (subhead) */
.section-about .about-deck {
  font-family: var(--font-body, "Neue Montreal"), system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: clamp(18px, 1.6vw, 28px);
  margin: 0 0 clamp(20px, 3vw, 36px) 0;
}

/* Grid: 12 cols desktop; stacks on smaller */
.section-about .about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

/* Left media spans 8; right map spans 4 on desktop */
.section-about .about-media {
  grid-column: 1 / span 8;
  position: relative;
}
.section-about .about-map {
  grid-column: 9 / span 4;
}

/* Media & map cards */
.section-about .about-media > img,
.section-about .about-map > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Overlay info card on the photo */
.section-about .about-card {
  position: absolute;
  inset: auto clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px) auto; /* bottom-right */
  width: min(480px, 55%);
  padding: clamp(12px, 1.5vw, 18px);
  border-radius: 12px;
  background: rgba(17, 17, 17, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
}

/* ===== Tablet (480–768px) ===== */
@media (min-width: 480px) and (max-width: 768px) {
  .section-about .about-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .section-about .about-media {
    grid-column: 1 / -1;
  }
  .section-about .about-map {
    grid-column: 1 / -1;
  }

  /* Overlay card moves inside-bottom-left for readability */
  .section-about .about-card {
    inset: auto auto clamp(12px, 3vw, 20px) clamp(12px, 3vw, 20px);
    width: min(520px, 80%);
    background: rgba(17, 17, 17, 0.55);
  }
}

/* ===== Mobile (≤479px) ===== */
@media (max-width: 479px) {
  .section-about .about-title {
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.05;
  }
  .section-about .about-deck {
    font-size: clamp(16px, 4.2vw, 22px);
    line-height: 1.3;
  }

  .section-about .about-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .section-about .about-media,
  .section-about .about-map {
    grid-column: 1;
  }

  /* On phones, make the info card flow below the image with slight overlap */
  .section-about .about-card {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: -10px;
    border-radius: 12px;
  }
}
/* === ABOUT: SCALE-UP PACK (desktop-first, keeps tablet/mobile as-is) === */

/* 1) Give the section a wider working canvas */
.section-about .about-wrap {
  /* EN feels closer to 1360–1500px wide on big screens */
  max-width: min(1460px, 94vw) !important;
}

/* 2) Bigger display title + deck on large screens */
@media (min-width: 1024px) {
  .section-about .about-title {
    font-size: clamp(72px, 7.5vw, 128px) !important; /* was 96px cap */
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin-bottom: 0.3em;
  }
  .section-about .about-deck {
    font-size: clamp(22px, 1.7vw, 32px) !important; /* bolder subhead */
    line-height: 1.25;
    max-width: 60ch; /* readable width */
    margin-bottom: clamp(24px, 3.2vw, 40px);
  }
}

/* 3) Make the media feel huge (taller, edge-y) */
.section-about .about-media > img {
  aspect-ratio: 16 / 9; /* consistent height */
  object-fit: cover;
}

/* 4) Let the overlay card be a touch larger on desktop */
@media (min-width: 1024px) {
  .section-about .about-card {
    width: min(520px, 50%) !important;
    font-size: clamp(15px, 1.1vw, 18px);
    padding: clamp(14px, 1.2vw, 22px);
    border-radius: 14px;
  }
}

/* 5) On very wide screens, give the grid more room and tighten the gap */
@media (min-width: 1440px) {
  .section-about .about-wrap {
    max-width: min(1600px, 94vw) !important; /* push even wider */
  }
  .section-about .about-grid {
    gap: clamp(16px, 1.4vw, 20px);
  }
}

/* 6) Optional: bring the whole section visually “up” the page a bit */
@media (min-width: 1024px) {
  .section-about {
    padding-block: clamp(40px, 7vw, 100px) !important;
  }
}

/* ===== ABOUT — Option A: Use Cover for the big photo with overlay text ===== */
/* In the editor: Replace the Image in .about-media with a Cover block.
   Give the Cover class: about-photo
   Inside the Cover, add a Group for your text and give it class: about-overlay */

.section-about .about-media .about-photo {
  min-height: clamp(420px, 48vw, 720px);
  border-radius: 16px;
  overflow: hidden; /* clip inner media to rounded corners */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  align-items: flex-end; /* place overlay towards bottom */
}
/* Ensure media fills cover nicely */
.section-about .about-media .about-photo .wp-block-cover__image-background,
.section-about .about-media .about-photo video {
  object-fit: cover;
}
/* Inner container controls overlay placement & padding */
.section-about .about-media .about-photo .wp-block-cover__inner-container {
  width: 100%;
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  justify-content: flex-end; /* push overlay to right like EN */
}
/* Overlay panel */
.section-about .about-overlay {
  max-width: min(520px, 55%);
  padding: clamp(12px, 1.2vw, 20px);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.4;
}
/* Tablet: optionally move overlay toward left for balance */
@media (min-width: 480px) and (max-width: 768px) {
  .section-about .about-media .about-photo .wp-block-cover__inner-container {
    justify-content: flex-start; /* place overlay on left on tablet */
  }
  .section-about .about-overlay {
    max-width: min(520px, 70%);
  }
}
/* Mobile: overlay becomes an in-flow panel under the image for readability */
@media (max-width: 479px) {
  .section-about .about-media .about-photo {
    min-height: 360px;
  }
  .section-about .about-media .about-photo .wp-block-cover__inner-container {
    justify-content: flex-start; /* left aligned text on phones */
  }
  .section-about .about-overlay {
    max-width: 100%;
    margin-top: 8px;
    border-radius: 12px;
  }
}
/* === ABOUT: FULL-WIDTH + RIGHT-ALIGNED HEADER + MAP-WITH-LIST (EN-style) === */

/* Full-bleed section; comfy side gutters controlled here */
.section-about {
  background: var(--wp--preset--color--base, #f6f1e6);
  padding-block: clamp(36px, 6vw, 96px);
}
.section-about .about-wrap {
  max-width: none !important; /* FULL WIDTH */
  width: 100%;
  margin: 0;
  padding-inline: clamp(16px, 5vw, 72px);
}

/* Right-aligned heading block */
.section-about .about-head {
  text-align: right;
  margin-bottom: clamp(20px, 3vw, 40px);
}
.section-about .about-title {
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(56px, 7.5vw, 128px);
  margin: 0 0 0.2em 0;
}
.section-about .about-deck {
  font-family: var(--font-body, "Neue Montreal"), system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  font-size: clamp(18px, 1.8vw, 32px);
  margin: 0;
}

/* Desktop grid with named areas */
.section-about .about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "media media media media media media media media map map map map"
    "media media media media media media media media meta meta meta meta";
  gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
}

/* Area assignment */
.section-about .about-media {
  grid-area: media;
  position: relative;
}
.section-about .about-map {
  grid-area: map;
}
.section-about .about-meta {
  grid-area: meta;
}

/* Neutralize Gutenberg alignment widths inside the grid */
.section-about .about-grid .alignfull,
.section-about .about-grid .alignwide,
.section-about .about-grid [data-align="full"],
.section-about .about-grid [data-align="wide"] {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ABOUT — Option A (Cover as photo) */
.section-about .about-media .about-photo {
  /* Ensure no theme-imposed width; behave as a normal grid child */
  width: 100% !important;
  min-height: clamp(420px, 48vw, 720px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  align-items: flex-end;
}
.section-about .about-media .about-photo .wp-block-cover__image-background,
.section-about .about-media .about-photo video {
  object-fit: cover;
}
.section-about .about-media .about-photo .wp-block-cover__inner-container {
  width: 100%;
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  justify-content: flex-end; /* overlay to right on desktop */
}

/* Overlay panel */
.section-about .about-overlay {
  max-width: min(520px, 55%);
  padding: clamp(12px, 1.2vw, 20px);
  border-radius: 12px;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.4;
}

/* Map image tidy */
.section-about .about-map .wp-block-image {
  margin: 0;
}
.section-about .about-map .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

/* Countries list under the map */
.section-about .about-meta {
  align-self: start;
  border-radius: 14px;
  padding: clamp(12px, 1.4vw, 18px);
}
.section-about .about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.section-about .about-list li {
  font-family: var(--font-body, "Neue Montreal"), system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 18px);
  background: transparent !important;
  line-height: 1.35;
  padding: 6px 8px;
  border-radius: 8px;
}

/* Tablet (480–768px): stack map & list below photo; overlay to left */
@media (min-width: 480px) and (max-width: 768px) {
  .section-about .about-head {
    text-align: left;
  }
  .section-about .about-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "media media media media media media media media media media media media"
      "map   map   map   map   map   map   map   map   map   map   map   map"
      "meta  meta  meta  meta  meta  meta  meta  meta  meta  meta  meta  meta";
  }
  .section-about .about-media .about-photo .wp-block-cover__inner-container {
    justify-content: flex-start;
  }
  .section-about .about-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile (≤479px): simple vertical stack; overlay becomes in-flow */
@media (max-width: 479px) {
  .section-about .about-head {
    text-align: left;
  }
  .section-about .about-title {
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.05;
  }
  .section-about .about-deck {
    font-size: clamp(16px, 4.2vw, 22px);
  }
  .section-about .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "map"
      "meta";
    gap: 14px;
  }
  .section-about .about-photo {
    min-height: 360px;
  }
  .section-about .about-photo .wp-block-cover__inner-container {
    justify-content: flex-start;
  }
  .section-about .about-overlay {
    max-width: 100%;
    margin-top: 8px;
    border-radius: 12px;
  }
  .section-about .about-list {
    grid-template-columns: 1fr;
  }
}

/* ===== ABOUT — FINAL OVERRIDES (left-aligned, full-width, map+list column) ===== */
.section-about {
  padding-block: clamp(36px, 6vw, 96px) !important;
}
.section-about .about-wrap {
  max-width: none !important; /* FULL WIDTH canvas */
  width: 100% !important;
  margin: 0 !important;
  padding-inline: clamp(16px, 5vw, 72px) !important; /* side gutters */
}

/* Header block: LEFT aligned */
.section-about .about-head {
  text-align: left !important;
  margin-bottom: clamp(20px, 3vw, 40px) !important;
}
.section-about .about-title {
  margin: 0 0 0.25em 0 !important;
}
.section-about .about-deck {
  margin: 0 !important;
}

/* Grid: 12 columns; named areas to ensure list sits right under the map */
.section-about .about-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-areas:
    "media media media media media media media media map map map map"
    "media media media media media media media media meta meta meta meta" !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
  align-items: start !important;
}
.section-about .about-media {
  grid-area: media !important;
  position: relative;
}
.section-about .about-map {
  grid-area: map !important;
}
.section-about .about-meta {
  grid-area: meta !important;
}

/* Neutralize any Gutenberg alignment widths inside the grid */
.section-about
  .about-grid
  :is(.alignfull, .alignwide, [data-align="full"], [data-align="wide"]) {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Kill Cover dim on the about photo, force clean image */
.section-about .about-photo .wp-block-cover__background {
  opacity: 0 !important;
}
.section-about .about-photo {
  min-height: clamp(420px, 48vw, 720px) !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  align-items: flex-end;
}
.section-about .about-photo .wp-block-cover__inner-container {
  width: 100%;
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  justify-content: flex-end;
}
.section-about .about-photo :is(.wp-block-cover__image-background, video) {
  object-fit: cover;
}

/* Map image tidy */
.section-about .about-map .wp-block-image {
  margin: 0 !important;
}
.section-about .about-map .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

/* List block sits directly below map; remove stray margins */
.section-about .about-meta {
  align-self: start !important;
  margin: 0 !important;
}
.section-about .about-meta > * {
  margin: 0 !important;
}
.section-about .about-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.section-about .about-list li {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.035);
  font-weight: 500;
}

/* Tablet stack: map and list below media */
@media (min-width: 480px) and (max-width: 768px) {
  .section-about .about-grid {
    grid-template-areas:
      "media media media media media media media media media media media media"
      "map   map   map   map   map   map   map   map   map   map   map   map"
      "meta  meta  meta  meta  meta  meta  meta  meta  meta  meta  meta  meta" !important;
  }
  .section-about .about-photo .wp-block-cover__inner-container {
    justify-content: flex-start;
  }
  .section-about .about-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile stack */
@media (max-width: 479px) {
  .section-about .about-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "media" "map" "meta" !important;
    gap: 14px !important;
  }
  .section-about .about-photo {
    min-height: 360px !important;
  }
  .section-about .about-photo .wp-block-cover__inner-container {
    justify-content: flex-start;
  }
  .section-about .about-overlay {
    max-width: 100%;
    margin-top: 8px;
    border-radius: 12px;
  }
  .section-about .about-list {
    grid-template-columns: 1fr;
  }
}
/* Tighten spacing between map and list */
.section-about .about-map {
  margin-bottom: 0 !important; /* kill stray margins */
}
.section-about .about-meta {
  margin-top: 0 !important; /* remove extra gap */
  padding: clamp(12px, 1.2vw, 18px);
}

/* Two-column section spacing (optional helper) */
.wp-block-columns.numbers-two-col {
  column-gap: clamp(24px, 4vw, 56px);
}

/* Right-column media container */
.numbers-media {
  display: grid;
  gap: 12px; /* space between image and buttons */
  align-content: start;
}

/* Frame the image nicely */
.numbers-carousel {
  aspect-ratio: 16 / 10; /* shape similar to your mock */
  border-radius: 22px;
  overflow: hidden;
  background: #f4f6f8;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.numbers-carousel .swiper-slide {
  height: 100%;
}
.numbers-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Buttons under the image */
.numbers-nav {
  display: flex;
  justify-content: flex-end; /* right-aligned like your mock */
  gap: 10px;
}
.numbers-nav button {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.numbers-nav button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* Small screens: center the buttons */
@media (max-width: 980px) {
  .numbers-carousel {
    aspect-ratio: 16 / 11;
  }
  .numbers-nav {
    justify-content: center;
  }
}

/* ===== RESULTS (Numbers) — full-viewport, left/right like mock ===== */

.numbers-section {
  background: var(
    --wp--preset--color--base,
    #f6f7f9
  ); /* match page bg or set yours */
  padding-block: clamp(28px, 5vh, 64px);
}

.numbers-wrap {
  max-width: none !important; /* full width */
  width: 100% !important;
  margin: 0 !important;
  padding-inline: clamp(16px, 5vw, 72px); /* site gutters */
}

/* Two-column grid that fills the viewport height */
.numbers-two-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); /* left a hair wider */
  gap: clamp(16px, 3vw, 56px);
  align-items: center; /* vertically center by default */
  min-height: 100svh; /* fit the whole section without scroll */
}

/* LEFT side */
.numbers-left {
  align-self: start; /* nudges the block slightly higher than exact middle */
}

.numbers-title {
  margin: 0 0 clamp(8px, 1.8vh, 14px) 0;
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(40px, 6vw, 96px);
}

.numbers-lines {
  margin: 0 0 clamp(16px, 2.2vh, 24px) 0;
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.1;
  font-size: clamp(22px, 2.6vw, 40px);
}

.numbers-deck {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-body, "Neue Montreal"), system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  color: #101010;
}

/* RIGHT side (carousel) */
.numbers-media {
  justify-self: end; /* hug right edge */
  align-self: start; /* sit a bit higher than center */
  width: min(900px, 48vw); /* responsive width cap like the mock */
}

.numbers-carousel {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  background: #fff;
}

/* Ensure images never collapse/disappear in Swiper */
.numbers-carousel .swiper-wrapper {
  align-items: stretch;
}
.numbers-carousel .swiper-slide {
  height: auto;
}
.numbers-carousel img {
  display: block;
  width: 100%;
  height: auto; /* no forced height; keeps image visible */
  object-fit: cover;
}

/* Buttons under image */
.numbers-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: clamp(8px, 1.5vh, 18px);
}
.numbers-nav button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #111;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.numbers-nav button:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* Tablet stack tweaks */
@media (max-width: 980px) {
  .numbers-two-col {
    grid-template-columns: 1fr;
    min-height: auto; /* allow stacking without forced viewport height */
    gap: clamp(16px, 3vh, 28px);
  }
  .numbers-media {
    justify-self: stretch;
    width: 100%;
  }
}

/* Phone adjustments */
@media (max-width: 560px) {
  .numbers-title {
    font-size: clamp(36px, 9.5vw, 56px);
  }
  .numbers-lines {
    font-size: clamp(18px, 6vw, 32px);
  }
  .numbers-deck {
    font-size: clamp(15px, 4vw, 18px);
  }
  .numbers-nav button {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}
/* ===== Love Us (Testimonials) ===== */
.love-section {
  background: var(--wp--preset--color--base, #fff);
  padding-block: clamp(28px, 6vw, 72px);
}
.love-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: clamp(16px, 5vw, 72px);
}

/* Header row: title left, arrows right */
.love-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  margin-bottom: clamp(16px, 3vw, 32px);
}
.love-title {
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 7.5vw, 112px);
}
.love-arrows {
  display: inline-flex;
  gap: 10px;
  align-self: center;
}
.love-arrows button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #111;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.love-arrows button:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* Carousel + cards */
.love-carousel {
  overflow: visible;
  padding-block: 6px;
}
.love-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  padding: clamp(14px, 2vw, 20px);
  height: auto; /* keep slides sized to content */
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
}

/* Quote text */
.love-quote {
  margin: 0;
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-size: clamp(16px, 1.4vw, 22px);
}

/* Media block (image OR video) */
.love-media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 3 / 4; /* tall card media like the mock */
  background: #f1f3f6;
}
.love-media img,
.love-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Meta */
.love-meta {
  display: grid;
  gap: 2px;
}
.love-name {
  font-weight: 800;
  font-family: var(--font-heading, "Pangaia"), system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 22px);
}
.love-tag {
  font-weight: 700;
  color: #111;
  opacity: 0.75;
  font-size: clamp(12px, 0.95vw, 14px);
}
.love-role {
  color: #111;
  opacity: 0.7;
  font-size: clamp(12px, 0.95vw, 14px);
}

/* Responsive header stack */
@media (max-width: 720px) {
  .love-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .love-arrows {
    justify-content: flex-start;
  }
}
/* keep the section full-bleed but don't clip children */
.love-section,
.love-wrap {
  overflow: visible !important;
}

/* the inner wrapper is the positioning context */
.love-wrap {
  position: relative;
}

/* arrows sit inside the right gutter, not off-screen */
.love-arrows {
  position: absolute;
  top: clamp(8px, 1.5vw, 24px); /* a bit below the big heading */
  right: clamp(16px, 5vw, 72px); /* match your side gutter */
  display: flex;
  gap: 10px;
  z-index: 5;
}

/* button styling (feel free to keep yours) */
.love-arrows button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.love-arrows button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* tablet/phone: put arrows under the title so they never clip */
@media (max-width: 900px) {
  .love-arrows {
    position: static;
    margin: 10px 0 0;
    justify-content: flex-end;
  }
}

/* Li Styling */
.li-styling {
  color: #00aff0;
}

.li-text-styling {
  color: #0f1419;
}

/* === OnlyGyals Testimonials === */
.creators .og-testimonials {
  --wrap-max: 1180px;
  --pad-y: clamp(60px, 10vw, 120px);
  --gap: clamp(16px, 2.2vw, 28px);
  --card-radius: 20px;
  --arrow-gap: 72px; /* how far outside arrows sit */

  width: 100%;
  margin: 0 auto;
  padding: var(--pad-y) clamp(16px, 4vw, 28px);
  box-sizing: border-box;
}
.creators .og-t-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}

/* Header */
.creators .og-t-head {
  text-align: center;
  display: grid;
  gap: 8px;
}
.creators .og-kicker {
  font: 700 12px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.creators .og-title {
  margin: 0;
  font: 800 clamp(26px, 4.6vw, 42px) / 1.05 Pangaia, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #0f1419;
}

/* Slider shell */
.creators .og-slider {
  position: relative;
  overflow: visible; /* allow arrows outside */
  border-radius: var(--card-radius);
  background: #fff;
  border: 1px solid rgba(15, 20, 25, 0.08);
  box-shadow: 0 12px 28px rgba(15, 20, 25, 0.06);
}

/* Track: clip slides so only one shows */
.creators .og-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  clip-path: inset(0 var(--arrow-gap) 0 var(--arrow-gap));
}

/* Slide (card) */
.creators .og-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap);
  align-items: center;
}
@media (max-width: 880px) {
  .creators .og-slide {
    grid-template-columns: 1fr;
  }
}

/* Text side */
.creators .og-quote {
  margin: 0 0 14px;
  font: 700 italic clamp(16px, 2vw, 20px) / 1.45 Pangaia, system-ui, sans-serif;
  letter-spacing: 0.005em;
}
.creators .og-author {
  display: grid;
  gap: 2px;
  font-family: "Neue Montreal", system-ui, sans-serif;
}
.creators .og-name {
  font-weight: 800;
}
.creators .og-meta {
  opacity: 0.8;
  font-weight: 600;
}

/* Image side */
.creators .og-media {
  border-radius: clamp(14px, 2vw, 18px);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #f1f3f6;
}
.creators .og-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrows */
.creators .og-arrows {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--arrow-gap) + 12px);
  right: calc(-1 * var(--arrow-gap) + 12px);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.creators .og-arrows button {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.creators .og-arrows button:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
.creators .og-arrows button:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
}

/* Dots */
.creators .og-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 18px;
}
.creators .og-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.creators .og-dot[aria-current="true"] {
  background: #111;
  transform: scale(1.2);
}

/* Fallback if clip-path isn’t supported */
@supports not (clip-path: inset(0 1px)) {
  .creators .og-slider {
    overflow: hidden;
    padding-inline: var(--arrow-gap);
  }
  .creators .og-track {
    margin-inline: calc(-1 * var(--arrow-gap));
  }
  .creators .og-arrows {
    inset-inline: 0;
  }
}

/* Responsive */
@media (max-width: 560px) {
  .creators .og-testimonials {
    --arrow-gap: 36px;
  }
}
/* === OVERRIDES: arrows off-card with gutters, slides stay clipped === */

/* 1) Make a gutter inside the slider for arrows, but keep slides clipped */
.creators .og-slider {
  overflow: hidden !important; /* clip previous/next slides */
  padding-inline: var(
    --arrow-pad,
    56px
  ) !important; /* space at left/right for arrows */
}

/* 2) Cancel that padding for the slide track so slides remain full-bleed */
.creators .og-track {
  margin-inline: calc(-1 * var(--arrow-pad, 56px)) !important;
  clip-path: none !important; /* we don't need clip-path with gutters */
}

/* 3) Park arrows in the gutter (no negatives, no clipping) */
.creators .og-arrows {
  position: absolute !important;
  inset-inline: 0 !important; /* span the padded gutter area */
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  right: auto !important;
  pointer-events: none;
}

/* keep your existing arrow button styles; just ensure hover doesn't reset placement */
.creators .og-arrows button {
  pointer-events: auto;
}

/* 4) Mobile: smaller gutters */
@media (max-width: 560px) {
  .creators .og-slider {
    padding-inline: 28px !important;
  }
  .creators .og-track {
    margin-inline: -28px !important;
  }
}
/* --- make the arrow wrapper a positioning context --- */
.creators .og-shelf {
  position: relative !important;
  overflow: visible !important; /* ensure arrows aren't clipped by the shelf */
}

/* --- slider stays the viewport; keep slides clipped --- */
.creators .og-slider {
  overflow: hidden !important;
}

/* --- actually place the arrows OUTSIDE the card --- */
.creators .og-arrows {
  position: absolute !important;
  top: 50% !important;
  left: calc(-1 * var(--arrow-gap, 72px) + 12px) !important;
  right: calc(-1 * var(--arrow-gap, 72px) + 12px) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: none !important;
  z-index: 3 !important; /* sit above the card */
}

/* buttons style (use yours if already present) */
.creators .og-arrows button {
  pointer-events: auto !important;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* safety: don't let any parent clip them */
.creators .og-t-inner {
  overflow: visible !important;
}

/* CTA Section */
#cta-plan {
  width: 100%;
  padding: clamp(50px, 8vw, 100px) 20px;
  display: flex;
  justify-content: center;
}

#cta-plan .wrap {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);

  max-width: 960px;
  width: 100%;
  padding: clamp(40px, 6vw, 80px);
  text-align: center;

  display: grid;
  gap: clamp(28px, 4vw, 48px);
  justify-items: center;
}

/* Headline */
#cta-plan h2 {
  margin: 0;
  font-family: var(--font-heading, Pangaia, system-ui, sans-serif);
  line-height: 1.1;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #111;
}

#cta-plan h2 .sub {
  display: block;
  margin-top: clamp(12px, 1.5vw, 18px);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px);
  opacity: 0.9;
}

/* CTA button */
#cta-plan .btn-wrap {
  text-decoration: none;
}

#cta-plan .btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 1.6vw, 18px) clamp(26px, 3vw, 40px);
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

#cta-plan .btn-inner:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

#cta-plan .btn-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

/* === CTA: force single-column, centered layout === */
#cta-plan .wrap {
  /* kill any inherited multi-column/grid rules */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  max-width: 1100px !important;
  width: 100% !important;
  padding: clamp(40px, 6vw, 80px) !important;
  gap: clamp(28px, 4vw, 48px) !important;
  text-align: center !important;
}

/* Headline: allow normal wrapping and full width */
#cta-plan h2 {
  margin: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  font-size: clamp(34px, 5.6vw, 68px) !important;
  max-width: 100% !important; /* don’t constrain to a narrow column */
}

/* Subline directly under the headline */
#cta-plan h2 .sub {
  display: block !important;
  margin-top: clamp(10px, 1.2vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  font-size: clamp(20px, 2.6vw, 30px) !important;
  opacity: 1 !important; /* keep your color; no fade */
}

/* Button: center under the text */
#cta-plan .btn-wrap {
  align-self: center !important;
  display: inline-block !important;
}

#cta-plan .btn-inner {
  padding: clamp(12px, 1.6vw, 18px) clamp(26px, 3vw, 40px) !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15) !important;
}

/* Safety: neutralize any rogue column widths on children */
#cta-plan .wrap > * {
  width: auto !important;
  max-width: none !important;
}

/* Kill bottom margin of the last group on the page */
.wp-block-group:last-of-type {
  margin-bottom: 0 !important;
}

.site-footer {
  margin-top: 0 !important;
}

footer {
  margin-top: 0 !important;
}

.hero {
  margin-bottom: 0 !important;
}

/* =========================
   RESULTS slider — portrait-friendly media
   Make the numbers-media slider tall enough for full iPhone
   screenshots and ensure media scales to fit without cropping.
========================= */
.numbers-media .numbers-carousel {
  aspect-ratio: 9 / 19.5; /* iPhone portrait */
  background: #f4f6f8;
}
.numbers-media .numbers-carousel .swiper,
.numbers-media .numbers-carousel .swiper-slide {
  height: 100%;
}
.numbers-media .numbers-carousel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.numbers-media .numbers-carousel img,
.numbers-media .numbers-carousel video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show entire screenshot/photo */
  display: block;
  background: transparent;
}

/* Keep portrait ratio on smaller screens too */
@media (max-width: 980px) {
  .numbers-media .numbers-carousel {
    aspect-ratio: 9 / 19.5; /* override earlier 16/11 */
  }
}

/* =========================
   RESULTS slider — remove letterboxing and enable swipe fallback
   Ensures the carousel grows to the natural height of the image and
   supports native swipe on touch devices even without JS.
========================= */
/* 1) Let the media define the height (no forced ratios) */
.numbers-media .numbers-carousel {
  aspect-ratio: auto !important;
}
.numbers-media .numbers-carousel .swiper-slide {
  height: auto !important;
}
.numbers-media .numbers-carousel img,
.numbers-media .numbers-carousel video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* show full screenshot */
  background: transparent !important;
}

/* 2) CSS-only swipe fallback when JS isn’t active */
.numbers-media .numbers-carousel .swiper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.numbers-media .numbers-carousel .swiper-wrapper {
  display: flex;
}
.numbers-media .numbers-carousel .swiper-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* =========================
   CTA — Mobile breathing room
   Loosens spacing, increases line-height, and right-sizes text
   so the card doesn’t feel cramped on phones.
========================= */
@media (max-width: 640px) {
  #cta-plan {
    padding: clamp(40px, 8vw, 64px) 16px !important;
  }
  #cta-plan .wrap {
    gap: clamp(36px, 8vw, 56px) !important; /* more space between blocks */
    padding: clamp(36px, 7vw, 56px) !important; /* a bit more inner air */
  }
  #cta-plan h2 {
    font-size: clamp(30px, 8.5vw, 40px) !important; /* slightly smaller */
    line-height: 1.2 !important; /* add vertical breathing room */
    letter-spacing: -0.005em !important; /* soften tight tracking */
  }
  #cta-plan h2 .sub {
    margin-top: clamp(12px, 3vw, 18px) !important;
    font-size: clamp(16px, 4.6vw, 22px) !important;
    line-height: 1.3 !important;
  }
  #cta-plan .btn-wrap {
    margin-top: 6px !important; /* tiny extra space from text block */
  }
  #cta-plan .btn-inner {
    padding: 14px 28px !important;
    font-size: 16px !important;
  }
}

/* =========================
   Achieved-style CTA (Webflow snippet look)
   Mirrors the provided structure/classes so dropping that HTML
   renders correctly without additional tweaks.
========================= */
.achieved-copy-copy {
  width: 100%;
  padding: clamp(50px, 8vw, 100px) 20px;
  display: flex;
  justify-content: center;
}
.achieved-copy-copy .achieved-left {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);

  max-width: 960px;
  width: 100%;
  padding: clamp(40px, 6vw, 80px);
  text-align: center;

  display: grid;
  gap: clamp(28px, 4vw, 48px);
  justify-items: center;
}

.achieved-title-copy-copy-copy {
  margin: 0;
  font-family: var(--font-heading, Pangaia, system-ui, sans-serif);
  letter-spacing: -0.01em;
  color: #111;
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(34px, 5.6vw, 60px);
}
.achieved-title-copy-copy-copy strong {
  display: block;
  font-weight: 800;
  margin-bottom: clamp(6px, 1.5vw, 10px);
}

/* Button inside snippet */
.achieved-copy-copy .btn-wrap {
  text-decoration: none;
}
.achieved-copy-copy .btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 1.6vw, 18px) clamp(26px, 3vw, 40px);
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.achieved-copy-copy .btn-inner:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.achieved-copy-copy .btn-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

/* Mobile tweaks for the Webflow-like CTA */
@media (max-width: 640px) {
  .achieved-copy-copy {
    padding: clamp(40px, 8vw, 64px) 16px;
  }
  .achieved-copy-copy .achieved-left {
    gap: clamp(36px, 8vw, 56px);
    padding: clamp(36px, 7vw, 56px);
  }
  .achieved-title-copy-copy-copy {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.22;
    letter-spacing: -0.005em;
  }
  .achieved-copy-copy .btn-inner {
    padding: 14px 28px;
    font-size: 16px;
  }
}

/* =========================
   CTA — Mobile breathing room
   Loosens spacing, increases line-height, and right-sizes text
   so the card doesn’t feel cramped on phones.
========================= */
@media (max-width: 640px) {
  #cta-plan {
    padding: clamp(40px, 8vw, 64px) 16px !important;
  }
  #cta-plan .wrap {
    gap: clamp(36px, 8vw, 56px) !important; /* more space between blocks */
    padding: clamp(36px, 7vw, 56px) !important; /* a bit more inner air */
  }
  #cta-plan h2 {
    font-size: clamp(30px, 8.5vw, 40px) !important; /* slightly smaller */
    line-height: 1.2 !important; /* add vertical breathing room */
    letter-spacing: -0.005em !important; /* soften tight tracking */
  }
  #cta-plan h2 .sub {
    margin-top: clamp(12px, 3vw, 18px) !important;
    font-size: clamp(16px, 4.6vw, 22px) !important;
    line-height: 1.3 !important;
  }
  #cta-plan .btn-wrap {
    margin-top: 6px !important; /* tiny extra space from text block */
  }
  #cta-plan .btn-inner {
    padding: 14px 28px !important;
    font-size: 16px !important;
  }
}

.no-gap-below {
  margin-bottom: 0 !important;
}
.no-gap-below + .marquee {
  margin-top: 0 !important;
}

/* ===== Mobile: center stack (title above captions) and a bit higher too ===== */
@media (max-width: 820px) {
  .cover-hero .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding: clamp(20px, 6vh, 48px) 16px;
    box-sizing: border-box;
  }
  .cover-hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(8px, 1.8vh, 16px);
    transform: translateY(-8vh); /* nudge up on phones */
  }
  .cover-hero .hero-title-wrap {
    order: -1;
  }
  .cover-hero .hero-corners {
    order: 2;
  }

  .cover-hero .hero-title {
    margin: 0;
    line-height: 0.85;
    font-size: clamp(54px, 20vw, 96px); /* bigger on mobile, as requested */
  }
  .cover-hero .hero-caption {
    margin: 0;
    font-size: clamp(13px, 3.6vw, 18px);
  }
  .cover-hero .mob-break {
    display: none;
  } /* keep title on one line on phones */
}

/* 1) Never let the PAGE scroll sideways */
html,
body,
.wp-site-blocks {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* 2) Clip overflow from full-bleed blocks (alignfull, covers, etc.) */
.alignfull,
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.header-base,
.numbers-section,
.creators,
.calltoaction {
  overflow-x: clip; /* modern, better than hidden for perf */
}

/* 3) Fix sections that used 100vw + negative margins */
#love-snap,                       /* your testimonials */
.marquee {
  /* the logo marquee */
  width: 100%; /* avoid the 100vw scrollbar bug */
  margin-left: 0;
  margin-right: 0;
  max-width: 100vw; /* still full width */
}

/* If your theme adds side padding to the main wrapper,
   keep full-bleed visually but don’t cause page overflow */
.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-cover.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  overflow-x: clip;
}

/* 4) Make sure slider/media never exceed their container width */
.swiper,
.swiper-wrapper,
.swiper-slide,
.numbers-media img,
#love-snap .media img,
#love-snap .media video {
  max-width: 100%;
}
.numbers-media img,
#love-snap .media img,
#love-snap .media video {
  display: block;
}

/* 5) Prevent the browser from “panning” the page on iOS when
      horizontally scrolling inside carousels */
#love-snap .track,
.numbers-media .swiper {
  overscroll-behavior-x: contain;
  touch-action: pan-y;
}
/* =========================
   Testimonials — Mobile Viewport Fix
   Keeps the testimonials slider clipped to the viewport on phones
   and prevents arrow placement from widening the page.
========================= */
@media (max-width: 600px) {
  /* Never exceed the viewport; avoid sideways scroll */
  .creators .og-testimonials,
  .creators .og-t-inner,
  .creators .og-shelf,
  .creators .og-slider {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box;
  }

  /* Use internal gutters for arrows so they live inside the slider */
  .creators .og-slider {
    --arrow-pad: 28px; /* space for 42px buttons with a little gutter */
    padding-inline: var(--arrow-pad) !important;
    overflow: hidden !important; /* keep adjacent slides clipped */
  }
  .creators .og-track {
    margin-inline: calc(-1 * var(--arrow-pad)) !important;
    clip-path: none !important; /* avoid off-viewport widening */
  }

  /* Keep arrows within the created gutter (no negative offsets) */
  .creators .og-arrows {
    inset-inline: 0 !important; /* span the slider’s padded area */
    left: auto !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important; /* allow buttons to remain clickable */
  }
  .creators .og-arrows button {
    pointer-events: auto !important;
  }

  /* Extra safety: images/media never exceed container */
  .creators .og-media,
  .creators .og-media img {
    max-width: 100% !important;
  }
}

/* =========================
   Testimonials — Arrows Under Slider (Mobile)
   Places the navigation buttons below the slider on phones and
   removes side gutters used for overlayed arrows.
========================= */
@media (max-width: 600px) {
  /* Remove arrow gutters so the slider is full-width */
  .creators .og-slider {
    padding-inline: 0 !important;
  }
  .creators .og-track {
    margin-inline: 0 !important;
    clip-path: none !important;
  }

  /* Put arrows below the slider */
  .creators .og-arrows {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
    pointer-events: auto !important;
  }
}

/* =========================
   Testimonials — Arrows Under Slider (Mobile)
   Places the navigation buttons below the slider on phones and
   removes side gutters used for overlayed arrows.
========================= */
@media (max-width: 600px) {
  /* Remove arrow gutters so the slider is full-width */
  .creators .og-slider {
    padding-inline: 0 !important;
  }
  .creators .og-track {
    margin-inline: 0 !important;
    clip-path: none !important;
  }

  /* Put arrows below the slider */
  .creators .og-arrows {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
    pointer-events: auto !important;
  }
}