/* ==========================================================================
   Gentle Procedures — stylesheet
   Bootstrap 5 provides grid, utilities & base components.
   Everything below layers brand type, color and bespoke section treatments.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Canela Trial";
  src: url("../fonts/Canela-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Canela Trial";
  src: url("../fonts/Canela-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Canela Trial";
  src: url("../fonts/Canela-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Noto Naskh Arabic / IBM Plex Sans Arabic are loaded from Google Fonts'
   CDN instead of self-hosted here — see gp_enqueue_base_assets() in
   inc/enqueue.php (same is_rtl()-gated CDN pattern already used for the
   Bootstrap RTL stylesheet swap). No local @font-face needed. */

/* ---------- Tokens ---------- */
:root {
  --gp-navy: #1e3a5f;
  --gp-navy-deep: #1b3a5e;
  --gp-sky: #08a4de;
  --gp-cream: #f3ecd8;
  --gp-cream-soft: #f4eee0;
  --gp-ink: #2d2d2d;
  --gp-ink-soft: #6e5f4b;
  --gp-serif: "Canela Trial", Georgia, "Times New Roman", serif;
  --gp-sans: "Sohne", "Helvetica Neue", Arial, sans-serif;
  --gp-header-h: 92px;
  --gp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--gp-header-h);
}
body {
  font-family: var(--gp-sans);
  font-weight: 400;
  color: var(--gp-ink);
  background-color: var(--gp-cream);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; }
/* .container, .container-fluid { max-width: 1480px; } */
.container-fluid {
  padding: 0 50px;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--gp-navy);
  color: var(--gp-cream);
  padding: 0.6rem 1rem;
  border-radius: 6px;
}

/* ---------- Type utilities ---------- */
.gp-eyebrow {
  font-family: var(--gp-sans);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gp-navy);
  margin-bottom: 1rem;
}
.gp-eyebrow--light { color: rgba(243, 236, 216, 0.65); }
.gp-eyebrow--navy { color: var(--gp-navy); }

/* Sized to the actual Figma px values per section, not one oversized scale:
   lg ≈ 64-67px (Stats, Journey), xl ≈ 74-80px (FAQ, Visiting Us),
   md ≈ 36px (Our Approach, The Day). */
.gp-heading-lg {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.1rem + 2.6vw, 4.1875rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--gp-ink);
}
/* .gp-heading-lg .gp-accent-navy {
  display: block;
} */
.gp-heading-lg--light { color: var(--gp-cream); }

.gp-heading-xl {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--gp-ink);
}
.gp-heading-xl .gp-accent-navy {
  display: block;
}
.gp-heading-xl--light { color: var(--gp-cream); }

.gp-heading-md {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 1.1vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--gp-ink);
}
.gp-heading-md--light { color: var(--gp-cream); }

.gp-accent-navy { color: var(--gp-navy); }
.gp-section--dark .gp-accent-navy { color: #9fd2ec; }

.gp-body-xl {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.gp-body-lg {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gp-ink);
  max-width: 38rem; /* GP-27: was 49rem (~98 chars/line on desktop) — brief specifies ~65 chars/line for readability */
  margin-bottom: 1.75rem;
}
.gp-body-lg--light { color: rgba(243, 236, 216, 0.85); }
p.gp-body-lg.mb-0.pd-left-top {
    padding-top: 2.5rem;
}

/* ---------- Country list (inner pages) ---------- */
.gp-country-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  border-top: 1px solid rgba(243, 236, 216, 0.7);
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  color: rgba(243, 236, 216, 0.72);
}
.gp-country-list__dot { opacity: 0.28; }
.gp-country-list__highlight { color: var(--gp-cream); }
.gp-body-md { font-size: 1.02rem; opacity: 0.75; line-height: 1.6; }
.gp-body-md--serif { font-family: var(--gp-serif); opacity: 0.75; font-size: 1.05rem; }
.gp-label {
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.search-sec .gp-label {
  color: #6E5F4B;
  font-size: 12.947px;
  font-weight: 400;
}

.gp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-navy);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--gp-ease), gap 0.25s var(--gp-ease);
}
.gp-link-arrow:hover { border-color: currentColor; gap: 0.75rem; }
.gp-link-arrow--light { color: var(--gp-cream); }

/* ---------- Buttons ---------- */
.gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--gp-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: 50px;
  border: 1px solid transparent;
  transition: transform 0.25s var(--gp-ease), background-color 0.25s var(--gp-ease), color 0.25s var(--gp-ease), border-color 0.25s var(--gp-ease);
}
.gp-btn:hover { transform: translateY(-2px); }
.gp-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Every solid button darkens its own hue on hover; every outline button
   fills with a version of its own hue. Same rule, every variant. */
.gp-btn--cream {
  background-color: var(--gp-cream);
  border-color: var(--gp-cream);
  color: var(--gp-navy);
}
.gp-btn--cream:hover { background-color: #e9dfc4; border-color: #e9dfc4; color: var(--gp-navy); }

.gp-btn--outline-light {
  background-color: transparent;
  border-color: rgba(243, 236, 216, 0.5);
  color: var(--gp-cream);
}
.gp-btn--outline-light:hover { background-color: rgba(243, 236, 216, 0.16); color: var(--gp-cream); }

.gp-btn--navy {
  background-color: var(--gp-navy);
  border-color: var(--gp-navy);
  color: #fff;
}
.gp-btn--navy:hover { background-color: #15304c; border-color: #15304c; color: #fff; }

.gp-btn--outline-navy {
  background-color: transparent;
  border-color: var(--gp-navy);
  color: var(--gp-navy);
}
.gp-btn--outline-navy:hover { background-color: var(--gp-navy); color: #fff; }

.gp-btn--sm { padding: 0.55rem 1.1rem; font-size: 0.62rem; }

/* Row of outline pill CTAs (inner pages, e.g. "The promise") */
.gp-promise-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
  padding-top: 4rem;
  border-top: 0;
}

/* Frosted safety-note callout (dark sections) */
.gp-callout {
  display: inline-block;
  max-width: 32rem;
  background-color: rgba(243, 236, 216, 0.1);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  color: var(--gp-cream);
  font-size: 1.02rem;
  line-height: 1.65;
}
.gp-callout strong { font-weight: 600; }
.gp-callout--wide { display: block; max-width: none; padding: 2.25rem; }
.gp-callout--wide .gp-heading-md { color: var(--gp-cream); margin-bottom: 1rem; }

/* Inline serif emphasis within a body paragraph (e.g. "Gentle Evolution") */
.gp-accent-cream-serif {
  font-family: var(--gp-serif);
  font-weight: 400;
  font-style: normal;
  color: var(--gp-cream);
  font-size: 1.1em;
}

.gp-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}
.gp-icon-arrow { width: 100%; height: 100%; }

/* ---------- Header ---------- */
.gp-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1050;
  transition: background-color 0.35s var(--gp-ease), box-shadow 0.35s var(--gp-ease);
}
.gp-header.is-scrolled {
  background-color: rgba(30, 58, 95, 0.96);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
}
.gp-navbar { padding: 1rem 0; }
.gp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* padding-inline: clamp(1.25rem, 4vw, 3.4rem); */
}

.gp-brand { display: inline-flex; align-items: center; gap: 0.75rem; }
.gp-brand__mark { display: block; }
.navbar-brand.gp-brand .gp-brand__mark--dark { display: none; }
.gp-header--onlight:not(.is-scrolled) .navbar-brand.gp-brand .gp-brand__mark--light { display: none; }
.gp-header--onlight:not(.is-scrolled) .navbar-brand.gp-brand .gp-brand__mark--dark { display: block; }
.gp-brand__wordmark { height: 32px; width: auto; }
.gp-brand__wordmark--light { filter: brightness(0) invert(1); }

.gp-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
}
.gp-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gp-cream);
  transition: transform 0.25s var(--gp-ease), opacity 0.25s var(--gp-ease);
}

.gp-nav { gap: 1.75rem; }
.gp-nav .nav-link {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gp-cream);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.25s var(--gp-ease), opacity 0.25s var(--gp-ease);
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.gp-nav .nav-link:hover { opacity: 0.75; }
.gp-nav .nav-link.active { border-bottom-color: var(--gp-cream); color: var(--gp-cream) ; }

.gp-nav-actions { display: flex; align-items: center; gap: 1.5rem; }

.gp-lang__btn {
  background: transparent;
  border: none;
  color: var(--gp-cream);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0;
  font-weight: 500;
}
.gp-lang__btn::after { margin-left: 0.4rem; vertical-align: 0.05em; }
.gp-lang__btn:focus,   
.gp-lang__btn:hover { opacity: 0.75;     color: var(--gp-cream);}
.gp-lang__btn:focus-visible {
  outline: 2px solid var(--gp-cream);
  outline-offset: 3px;
  border-radius: 4px;
  color: var(--gp-cream);
}
.gp-lang__menu { min-width: 8rem; border-radius: 10px; border: none; box-shadow: 0 12px 30px rgba(0,0,0,0.15); padding: 0.4rem; background-color: var(--gp-cream); }
.gp-lang__menu .dropdown-item {
  font-family: var(--gp-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gp-navy);
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  transition: background-color 0.2s var(--gp-ease), color 0.2s var(--gp-ease);
}
.gp-lang__menu .dropdown-item:hover,
.gp-lang__menu .dropdown-item:focus {
  background-color: rgba(30, 58, 95, 0.08);
  color: var(--gp-navy);
}
.gp-lang__menu .dropdown-item.active,
.gp-lang__menu .dropdown-item:active {
  background-color: var(--gp-navy);
  color: var(--gp-cream);
}

/* ---------- Header on a light/photo-less page (no dark hero beneath it) ---------- */
.gp-header--onlight .gp-burger span { background: var(--gp-navy); }
.gp-header--onlight .gp-nav .nav-link { color: var(--gp-navy); }
.gp-header--onlight .gp-nav .nav-link.active { border-bottom-color: var(--gp-navy); color: var(--gp-navy); }
.gp-header--onlight .gp-lang__btn { color: var(--gp-navy); }
.gp-header--onlight .gp-lang__btn:focus,
.gp-header--onlight .gp-lang__btn:hover { color: var(--gp-navy); }
.gp-header--onlight .gp-btn--outline-light { border-color: var(--gp-navy); color: var(--gp-navy); }
.gp-header--onlight .gp-btn--outline-light:hover { background-color: rgba(30, 58, 95, 0.08); color: var(--gp-navy); }
.gp-header--onlight.is-scrolled .gp-burger span,
.gp-header--onlight.is-scrolled .gp-nav .nav-link,
.gp-header--onlight.is-scrolled .gp-lang__btn { color: var(--gp-cream); }
.gp-header--onlight.is-scrolled .gp-burger span { background: var(--gp-cream); }
.gp-header--onlight.is-scrolled .gp-btn--outline-light { border-color: var(--gp-cream); color: var(--gp-cream); }

/* ---------- Offcanvas mobile menu ---------- */
.gp-offcanvas {
  width: min(86vw, 360px);
  background-color: var(--gp-navy);
  color: var(--gp-cream);
  /* Must sit above .gp-header (z-index: 1050) — Bootstrap's own default
     offcanvas z-index (1045) is LOWER than the fixed header, so without
     this the menu opens correctly but renders entirely behind the header,
     making every link in it invisible and unreachable. */
  z-index: 1060;
}
.offcanvas-backdrop {
  /* Same reasoning: the dimming backdrop needs to sit above the header
     too, or the header stays crisp and undimmed while everything else
     darkens, which looks like only part of the page responded to the
     menu opening. */
  z-index: 1055;
}
.gp-offcanvas .offcanvas-header { padding: 1.5rem 1.5rem 0; }
.gp-offcanvas__close { filter: invert(1) grayscale(1) brightness(2); }
.gp-offcanvas__nav { margin-top: 1rem; }
.gp-offcanvas__nav li + li { margin-top: 0.35rem; }
.gp-offcanvas__nav a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--gp-serif);
  font-size: 1.35rem;
  color: var(--gp-cream);
  border-bottom: 1px solid rgba(243, 236, 216, 0.12);
}

/* ---------- Hero ---------- */
.gp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--gp-navy);
}
.gp-hero__media { position: absolute; inset: 0; }
.gp-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@media (max-width: 991.98px) {
  .gp-hero__img { object-position: center 5%; }
}
.gp-hero__gradient {
  position: absolute; inset: 0;
      background: linear-gradient(100deg, rgba(22, 48, 79, 0.31) 9.49%, rgba(22, 48, 79, 0.12) 36.79%, rgba(22, 48, 79, 0.00) 57.05%), linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(15, 29, 48, 0.18) 38%, rgba(23, 44, 71, 0.24) 44%, rgba(30, 58, 95, 0.36) 56%, rgba(30, 58, 95, 0.92) 100%);
}
.gp-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.4rem) 50px clamp(3rem, 6vw, 3rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
/* .gp-hero--page (inner-page heroes) is min-height:70vh/58vh with its
   text bottom-anchored (align-items:flex-end above) — a normal short
   heading never reaches the top. But .gp-header is position:fixed at
   92px tall, while the padding-top above maxes out around 54px. An
   unusually long heading (e.g. Careers' six-line mobile heading) grows
   the text block tall enough to push its own top edge under the fixed
   header, since nothing scales with content length to prevent that.
   Guarantee at least the header's own height as clearance here,
   however tall the heading gets. */
.gp-hero--page .gp-hero__content {
  padding-top: calc(var(--gp-header-h) + 1rem);
}
.gp-hero__title {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem);
line-height: 1.2;  letter-spacing: -0.015em;
  color: var(--gp-cream);
  margin-bottom: 1.5rem;
}
.gp-hero__title span { display: block; }

/* Rolling word slider (e.g. "One [procedure. / technique. / focus.]") */
.gp-hero__title .gp-hero__title-static { display: inline-block; }
.gp-hero__title .gp-hero__title-rotator {
  display: inline-grid;
  align-items: baseline;
  overflow: hidden;
  vertical-align: baseline;
  min-height: 1.35em;
}
.gp-hero__title-rotator-word {
  grid-row: 1;
  grid-column: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(35%);
  transition: transform 0.55s var(--gp-ease), opacity 0.4s var(--gp-ease);
}
.gp-hero__title-rotator-word.is-active { opacity: 1; transform: translateY(0); }
.gp-hero__title-rotator-word.is-leaving { opacity: 0; transform: translateY(-35%); }
.gp-hero__lead {
  color: rgba(243, 236, 216, 0.88);
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  max-width: 34rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-weight: 300;
  font-family: var(--gp-serif);
}
.gp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Shorter hero variant for inner pages: same media/gradient treatment,
   just not a full-viewport-height moment like the homepage. */
.gp-hero--page { min-height: 70vh; }



.gp-scroll-indicator {
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(243, 236, 216, 0.8);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* .gp-hero is min-height:100vh with align-items:flex-end, so this
     flex-aligns flush to the hero's bottom-right corner with zero
     clearance of its own — landing in exactly the same corner as the
     fixed .gp-whatsapp-float button (position:fixed, always bottom/right
     clamp(1rem,3vw,2.5rem)), which sits there on every page regardless
     of scroll. On the homepage the hero is viewport-height, so on first
     load the two collide. margin-bottom pushes this up above the
     button's own footprint (~0.85rem padding + icon/label height + its
     own bottom offset) instead. Works in RTL too — the WhatsApp button
     mirrors to bottom-left there and this indicator's flex order mirrors
     with it, but the clearance is vertical, so it clears either side. */
  margin-bottom: 6rem;
}
.gp-scroll-indicator__line { width: 1px; height: 46px; background: rgba(243, 236, 216, 0.4); position: relative; overflow: hidden; }
.gp-scroll-indicator__line::after {
  content: ""; position: absolute; inset: 0; background: var(--gp-cream);
  transform: translateY(-100%);
  animation: gp-scroll-line 2.2s var(--gp-ease) infinite;
}
@keyframes gp-scroll-line {
  0% { transform: translateY(-100%); }
  60% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* GP-18: hero/article-header text used AOS (data-aos="fade-up"), which keeps
   it at opacity 0 until aos.js has downloaded and run — on mobile that held
   the main content back by seconds. Same fade-up, but pure CSS, so it
   starts on first paint. Reduced-motion users get no animation (as AOS). */
.gp-reveal-now { animation: gp-reveal-up 0.9s var(--gp-ease) both; }
@keyframes gp-reveal-up {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-reveal-now { animation: none; }
}

/* ---------- Floating WhatsApp ---------- */
.gp-whatsapp-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--gp-navy);
  color: var(--gp-cream);
  padding: 0.85rem;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--gp-ease), background-color 0.25s var(--gp-ease);
}
.gp-whatsapp-float:hover { transform: translateY(-3px); background-color: var(--gp-sky); }
.gp-whatsapp-float__label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding-right: 0.3rem;
  display: none;
}
@media (min-width: 992px) {
  .gp-whatsapp-float__label { display: inline; }
}

/* ---------- Generic sections ---------- */
.gp-section { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 3rem); }
.gp-section--cream { background-color: var(--gp-cream); }
.gp-section--dark { background-color: var(--gp-navy); }
.gp-section__inner { position: relative; z-index: 2; }
.gp-section__inner--narrow { max-width: 60rem; }
section.gp-section.gp-section--cream.pb-0 {
    margin-bottom: 3rem;
}

/* Decorative textures are painted as section backgrounds (background-blend-mode)
   rather than layered <img> + mix-blend-mode — far more reliable across
   browsers/GPUs than blending a stretched absolutely-positioned image, and it
   lets each section carry the exact blend mode Figma specifies for it. */
#stats {
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
}
#visiting {
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

.gp-section__bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gp-section__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.09) 0%, rgba(30,58,95,0.79) 100%);
}
.gp-section__overlay--diagonal {
  background: linear-gradient(104deg, rgba(24,36,52,0.69) 4%, rgba(28,42,60,0.55) 39%, rgba(28,42,60,0.5) 61%, rgba(24,38,56,0.62) 96%);
}
.gp-section__bg-photo--top { object-position: top; }
.gp-section__overlay--fadedown {
  background:
    linear-gradient(180deg, rgba(18, 30, 46, 0.50) 0%, rgba(18, 30, 46, 0.42) 30%, rgba(23, 42, 66, 0.54) 44%, rgba(26, 49, 79, 0.66) 58%, rgba(30, 58, 95, 0.90) 86%, #1E3A5F 100%),
    linear-gradient(96deg, rgba(24, 36, 52, 0.00) 4.26%, rgba(28, 42, 60, 0.00) 40.85%, rgba(24, 38, 56, 0.00) 95.74%);
}
/* Fixed-height photo band at the top of a tall section, fading into the
   section's own solid background — not stretched across the whole section. */
.gp-section__band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(500px, 50vw, 950px);
  overflow: hidden;
}
.gp-section__band .gp-section__bg-photo,
.gp-section__band .gp-section__overlay { position: absolute; inset: 0; }

/* ---------- Breadcrumb (inner pages) ---------- */
.gp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-ink-soft);
}
.gp-breadcrumb a { color: var(--gp-ink-soft); transition: color 0.2s var(--gp-ease); }
.gp-breadcrumb a:hover { color: var(--gp-navy); }
.gp-breadcrumb__sep { opacity: 0.4; }
.gp-breadcrumb__current { color: var(--gp-navy); }
.gp-breadcrumb--light, .gp-breadcrumb--light a { color: rgba(243, 236, 216, 0.72); }
.gp-breadcrumb--light a:hover { color: var(--gp-cream); }
.gp-breadcrumb--light .gp-breadcrumb__current { color: var(--gp-cream); }

/* Pages with no preceding Hero block (e.g. search results) sit directly
   below the fixed header instead of after a full-height hero, so the
   breadcrumb needs its own clearance to avoid overlapping the header. */
.gp-breadcrumb-offset { padding-top: var(--gp-header-h); }

/* Sections with no preceding Hero block (e.g. the Legal Page template)
   need the same fixed-header clearance, plus normal breathing room above
   the heading rather than a bare 92px. Compounded with .gp-section so it
   still wins over the .gp-section padding-block reset inside the
   @media (max-width: 767px) block below, regardless of source order. */
.gp-section.gp-section--header-offset { padding-top: calc(var(--gp-header-h) + 2rem); }

/* ---------- Statement paragraph (large serif lead-in, inner pages) ----------
   .gp-statement-block carries the top divider + spacing (shared by an
   optional eyebrow and the statement text); .gp-statement is just the type. */
.gp-statement-block {
  padding-top: 2.5rem;
  border-top: 1px solid rgba(42, 33, 21, 0.12);
}
.gp-statement-block--dark { border-top-color: rgba(243, 236, 216, 0.16); }
.gp-statement {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #2a2115;
  max-width: 62rem;
}
.gp-statement--wide { max-width: none; }
.gp-statement p { margin-bottom: 1.25rem; }
.gp-statement p:last-child { margin-bottom: 0; }

/* ---------- Quote / "One Voice" ---------- */
.gp-quote {
  position: relative;
  overflow: hidden;
  min-height: 40rem;
  display: flex;
  align-items: center;
  background-color: var(--gp-navy);
}
.gp-quote.gp-quote-long-height {
  min-height: 40rem;
}
.gp-quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-quote__overlay {
  display: none;
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(30,58,95,0.57) 0%, rgba(30,58,95,0) 70%),
    linear-gradient(0deg, rgba(0,0,0,0.26), rgba(0,0,0,0.26));
}
/* Some quote backgrounds (bright interiors) need the gradient at every
   width, not only the mobile fallback, for the text to stay legible. */
.gp-quote__overlay--visible { display: block; }
.gp-quote__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5rem); }
.gp-quote__text {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--gp-cream);
  text-align: right;
  max-width: 50rem;
  margin-left: auto;
  margin-bottom: 1.75rem;
}
.gp-quote__voice {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 236, 216, 0.85);
}

/* Left-aligned variant: quote sits over the left side of the photo instead
   of the right (used on inner pages where the image composition differs). */
.gp-quote--left .gp-quote__text,
.gp-quote--left .gp-quote__voice {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Stats ---------- */
.gp-media-card { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(30,58,95,0.15); }
.gp-media-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;aspect-ratio: 6/5; }
.gp-media-card--stats img { object-position: center 15%; }
.gp-media-card--journey img { aspect-ratio: 16/10; }

/* ---------- Team card (headshot grid, inner pages) ---------- */
.gp-team-card__photo {
  border-radius: 16px;
  overflow: hidden;
  background-color: #ece2c8;
  margin-bottom: 1.1rem;
  height: 310px;
}
.gp-team-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover;object-position: top; }
.gp-team-card__name {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: 1.35rem;
  color: #2a2115;
  margin-bottom: 0.2rem;
}
.gp-team-card__role { color: var(--gp-ink-soft); font-size: 0.9rem; margin-bottom: 0; }

.gp-stats { margin-top: clamp(3rem, 6vw, 5.5rem); row-gap: 2.5rem;    justify-content: space-between; }
.gp-stats__item { text-align: center;     width: auto;}
.gp-stats__number {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4.2rem);
  color: var(--gp-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gp-stats__unit { color: var(--gp-navy); font-size: 0.62em; margin-left: 0.1em; }
.gp-stats__label {
  font-size: 0.85rem;
  color: var(--gp-ink-soft);
  letter-spacing: 0.01em;
  margin-top: 0.6rem;
}

/* ---------- Video / lounge ---------- */
.gp-video { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.gp-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-video__inner { position: relative; z-index: 2; padding-block: 4rem; }
.gp-video-card {
  background-color: rgba(243, 236, 216, 0.94);
  border-radius: 20px;
  padding: 2rem 2.2rem;
  max-width: 24rem;
  backdrop-filter: blur(4px);
}
.gp-video-card__title { font-family: var(--gp-serif); font-size: 1.35rem; margin-bottom: 1.5rem; color: var(--gp-ink); }
.gp-video-card__controls { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; }
.gp-video-card__playgroup { display: flex; align-items: center; gap: 0.9rem; }
.gp-play-btn, .gp-mute-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gp-navy);
  background-color: transparent;
  transition: transform 0.25s var(--gp-ease), background-color 0.25s var(--gp-ease);
  flex-shrink: 0;
}
.gp-play-btn { background-color: var(--gp-navy); border-color: var(--gp-navy); }
.gp-play-btn__icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.gp-play-btn:hover, .gp-mute-btn:hover { transform: scale(1.08); }

.gp-play-btn__pause-icon { display: none; position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.gp-play-btn__pause-icon::before, .gp-play-btn__pause-icon::after {
  content: "";
  position: absolute;
  top: 1px; bottom: 1px;
  width: 4px;
  background-color: #fff;
  border-radius: 1px;
}
.gp-play-btn__pause-icon::before { left: 3px; }
.gp-play-btn__pause-icon::after { right: 3px; }

.gp-play-btn[aria-pressed="true"] .gp-play-btn__icon { display: none; }
.gp-play-btn[aria-pressed="true"] .gp-play-btn__pause-icon { display: block; }

/* mute button: "on" (speaker, sound playing) is shown while aria-pressed is
   false; "off" (speaker with a cross, muted) swaps in once pressed. */
.gp-mute-btn__icon--off { display: none; }
.gp-mute-btn[aria-pressed="true"] .gp-mute-btn__icon--on { display: none; }
.gp-mute-btn[aria-pressed="true"] .gp-mute-btn__icon--off { display: block; }
.gp-video-card__label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-ink);
  white-space: nowrap;
}

/* ---------- Accordions ---------- */
.gp-accordion .accordion-item { background: transparent;border-right: 0;border-left: 0; }
.gp-accordion__item { border-bottom: 1px solid rgba(30, 58, 95, 0.18); }
.gp-accordion__item:first-child { border-top: 1px solid rgba(30, 58, 95, 0.18); }

section#faq  .accordion {
  margin-bottom: 2rem;
}
section#faq .gp-accordion .accordion-item  {
  border: 0;
}
.home section#faq .gp-accordion .accordion-item {
  border: 0;
  border-top: 1px solid rgba(243, 236, 216, 0.25);
}
.home section#faq .gp-accordion .accordion-item:last-child {
  border-bottom: 1px solid rgba(243, 236, 216, 0.25);
}
.aftercare-faq .gp-accordion .accordion-item,
.faq-contact .gp-accordion .accordion-item,
.resources-faq .gp-accordion .accordion-item,
.faq-pricing .gp-accordion .accordion-item ,
.the-day-sec .gp-accordion .accordion-item  {
  border: 0;
}
section#stay-open .gp-accordion__button,
.faq-contact .gp-accordion--dark .gp-accordion__button,
.resources-faq .gp-accordion--dark .gp-accordion__button,
.faq-pricing  .gp-accordion--dark .gp-accordion__button ,
.the-day-sec .gp-accordion--dark .gp-accordion__button,
#aftercarePageAccordion .gp-accordion__button {
    justify-content: flex-start;
}

.gp-accordion__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background-color: transparent !important;
  color: inherit !important;
  border: 0;
  padding: 1.4rem 0;
  text-align: left;
  box-shadow: none !important;
}
.gp-accordion__button::after { display: none; }
.gp-accordion__label { display: flex; align-items: baseline; gap: 1.5rem; }
.gp-accordion__num {
  font-family: var(--gp-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gp-ink);
  flex-shrink: 0;
}
.gp-accordion__title {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  color: var(--gp-ink);
  transition: color 0.2s var(--gp-ease);
}
.gp-accordion__button[aria-expanded="true"] .gp-accordion__title,
.gp-accordion__button[aria-expanded="true"] .gp-accordion__num {
  color: var(--gp-navy);
}
.gp-accordion__button:hover .gp-accordion__title { opacity: .6; }
.gp-accordion__body {
  padding: 0 0 1.75rem 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gp-ink);
max-width: 100%;
}
.gp-accordion__body p:last-of-type { margin-bottom: 1rem; }

.gp-accordion--dark .gp-accordion__item { border-bottom-color: rgba(243, 236, 216, 0.18); }
.gp-accordion--dark .gp-accordion__item:first-child { border-top-color: rgba(243, 236, 216, 0.18); }
.gp-accordion--dark .gp-accordion__button { align-items: center; justify-content: flex-start; gap: 1rem; }
.gp-accordion--dark .gp-accordion__title { color: var(--gp-cream); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); }
.gp-accordion--dark .gp-accordion__button[aria-expanded="true"] .gp-accordion__title { color: var(--gp-cream); }
.gp-accordion--dark .gp-accordion__body { color: rgba(243, 236, 216, 0.8); }
.gp-accordion--dark { margin-top: clamp(2rem, 4vw, 3rem); }

.gp-accordion__chevron {
  flex-shrink: 0;
  width: 16px; height: 16px;
  position: relative;
}
.gp-accordion__chevron::before {
  content: "";
  position: absolute; inset: 0;
  border-right: 1.5px solid var(--gp-cream);
  border-bottom: 1.5px solid var(--gp-cream);
  width: 8px; height: 8px;
  margin: auto;
  transform: rotate(45deg);
  transition: transform 0.3s var(--gp-ease);
}
.gp-accordion__button[aria-expanded="true"] .gp-accordion__chevron::before {
  transform: rotate(225deg);
}
.gp-accordion__chevron--navy::before { border-color: var(--gp-navy); }

/* ---------- Footer ---------- */
.gp-footer { position: relative; overflow: hidden; background-color: var(--gp-navy); padding-top: clamp(3rem, 6vw, 4.5rem); }
.gp-footer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-footer__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, var(--gp-navy-deep) 99%); }
.gp-footer__inner { position: relative; z-index: 2; padding-bottom: 2rem; }

.gp-brand--footer { margin-bottom: 1.5rem; }
.gp-footer__tagline { color: var(--gp-cream); font-size: 1rem; line-height: 1.6; max-width: 20rem; margin-bottom: 1.25rem;font-weight: 300; }
.gp-footer__meta-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.gp-lang--footer .gp-lang__btn { padding: 0; }
.gp-footer__licence { color: var(--gp-cream); font-size: 1rem; opacity: 0.85; font-family: var(--gp-serif); margin: 0; }

.gp-footer__heading {
  font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gp-cream); font-weight: 600; margin-bottom: 1rem;
}
.gp-footer__links a {
  display: block; padding: 0.45rem 0;
  font-size: 1.02rem;
  color: var(--gp-cream); opacity: 0.85;
  transition: opacity 0.2s var(--gp-ease), padding-left 0.2s var(--gp-ease);
  font-weight: 300;
}
.gp-footer__links a:hover { opacity: 1; padding-left: 0.35rem; }

.gp-footer__wordmark {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.4rem + 7vw, 9.5rem);
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(243, 236, 216, 0.35);
  margin: clamp(2rem, 6vw, 4rem) 0 0;
  line-height: 1;
}

.gp-footer__bottom {
  border-top: 1px solid rgba(243, 236, 216, 0.14);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}
.gp-footer__bottom p {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: rgba(243, 236, 216, 0.5);
  margin: 0;
}

/* Footer redesign (2026-10): descriptor, social icons, clinic block, legal stack */
footer .gp-brand__mark { width: 16.625rem; max-width: 100%; height: auto; }
.gp-footer__descriptor { color: var(--gp-cream); font-size: 0.875rem; letter-spacing: 0.02em; opacity: 0.75; margin: -0.5rem 0 0.75rem; }
.gp-footer__links a.gp-footer__social { display: flex; align-items: center; gap: 0.6rem; }
.gp-footer__social-icon { flex: 0 0 auto; width: 1rem; height: 1rem; }
.gp-footer__bottom { align-items: flex-end; }
.gp-footer__clinic {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(243, 236, 216, 0.72);
}
.gp-footer__clinic span:first-child { color: var(--gp-cream); font-weight: 500; }
.gp-footer__clinic a { color: inherit; text-decoration: underline rgba(243, 236, 216, 0.3); text-underline-offset: 0.2em; }
.gp-footer__clinic a:hover { color: var(--gp-cream); text-decoration-color: currentColor; }
.gp-footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: end; }

/* ---------- Pricing: ways to pay (2026-10) ---------- */
.gp-pay { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid rgba(42, 33, 21, 0.12); }
.gp-pay--under-price { margin-top: 2rem; padding-top: 0; border-top: 0; }
.gp-pay__tabby { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.6rem; max-width: 34em; margin: 0 auto 2.5rem; text-align: center; opacity: 1; }
.gp-pay__tabby > span { opacity: 0.75; text-wrap: balance; }
.gp-pay__tabby-logo { display: block; width: auto; height: 1.5em; }
.gp-pay__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.gp-pay__mark { display: flex; align-items: center; justify-content: center; min-width: 4.5rem; height: 2.75rem; padding: 0 0.875rem; background-color: var(--gp-cream-soft); border: 1px solid rgba(42, 33, 21, 0.12); border-radius: 0.5rem; }
.gp-pay__mark img { display: block; width: auto; height: 1.625rem; }
.gp-pay__mark--badge img { height: 1.5rem; }
.gp-pay__note { max-width: 34em; margin-inline: auto; }

/* ---------- Back to top ---------- */
.gp-back-to-top {
  position: fixed;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 1030;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(30, 58, 95, 0.3);
  background-color: var(--gp-cream);
  color: var(--gp-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--gp-ease), transform 0.3s var(--gp-ease), visibility 0.3s;
}
.gp-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.gp-back-to-top:hover { background-color: var(--gp-navy); color: var(--gp-cream); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px)  {
  .container-fluid {
    padding: 0 15px;
  }
  .gp-hero__content {
      padding: clamp(1.5rem, 4vw, 3.4rem) 15px clamp(3rem, 6vw, 4.6rem);
  }
  .gp-nav {
    gap: .5rem;
}
.gp-video__inner {
    padding-block: 4rem;
}
.offcanvas.offcanvas-start {
    z-index: 5555;
}
}
@media (max-width: 991.98px) {
  /* .gp-header__inner { padding-inline: 1.25rem; } */
  .gp-nav-collapse { display: none !important; }
  /* burger left, brand centered, language on the right.
     Selector uses the navbar > container-fluid combinator to out-specificity
     Bootstrap's own `.navbar > .container-fluid { display: flex; }` rule,
     which otherwise wins over a plain single-class selector here. */
  .gp-navbar > .gp-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  /* grid-row: 1 on all three is required — since .gp-brand (column 2) comes
     before .gp-burger (column 1) in DOM order, auto-placement's cursor can't
     move backward to fill column 1 in row 1, so it drops the burger to a
     second row unless every item is pinned to row 1 explicitly. */
  .gp-header__inner .gp-burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .gp-header__inner .gp-brand { grid-column: 2; grid-row: 1; justify-self: center;margin: 0; }
  .gp-header__mobile-lang { grid-column: 3; grid-row: 1; justify-self: end; }
  .gp-hero__content { flex-direction: column; align-items: flex-start; }
  .gp-video-card { max-width: 100%; }
  .offcanvas-body .gp-btn--navy {
    filter: invert(1);
    max-width: max-content;

}
}

@media (min-width: 992px) {
  .gp-burger { display: none; }
}

@media (max-width: 767px){
  .gp-quote {
    align-items: flex-end;
}
.gp-quote__voice,
.gp-quote__text {
    text-align: center;
}
.gp-quote__overlay {
  display: block;
  background: linear-gradient(0deg, rgba(30, 58, 95, 0.57) 0%, rgba(30, 58, 95, 0) 70%), linear-gradient(0deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26));
}
.gp-stats__item {
  width: 50%;
}
}

@media (max-width: 575.98px) {
  .gp-hero__actions { flex-direction: column; align-items: stretch; }
  .gp-hero__actions .gp-btn { justify-content: center; }
  .gp-footer__bottom { flex-direction: column; padding-bottom: .5rem;text-align: center; }
  .gp-footer__bottom { align-items: center; }
  .gp-footer__legal { align-items: center; text-align: center; }

}

/* ---------- Movements nav (What's Included sidebar) ---------- */
.gp-movements-nav__meta { font-family: var(--gp-sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }
.gp-movements-nav__meta .gp-eyebrow { display: inline; }
.gp-movements-nav__meta-sep { color: var(--gp-ink-soft); opacity: 0.7; margin-left: 0.5rem; }
.gp-movements-nav__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.gp-movements-nav__link {
  display: block;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(45, 45, 45, 0.24);
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--gp-ink-soft);
  transition: color 0.2s var(--gp-ease);
}
.gp-movements-nav__list li:last-child .gp-movements-nav__link { border-bottom: 1px solid rgba(45, 45, 45, 0.24); }
.gp-movements-nav__link:hover { color: var(--gp-navy); }
.gp-movements-nav__link--active { color: var(--gp-navy); opacity: 1; }

/* ---------- Roles list (Careers open roles) ---------- */
.gp-roles-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.gp-roles-list__link {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(45, 45, 45, 0.24);
}
.gp-roles-list__item:last-child .gp-roles-list__link { border-bottom: 1px solid rgba(45, 45, 45, 0.24); }
.gp-roles-list__index {
  flex: 0 0 auto;
  font-family: var(--gp-sans);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--gp-navy);
}
.gp-roles-list__text {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--gp-ink-soft);
  transition: color 0.2s var(--gp-ease);
}
/* Hover affordance only for roles that actually have a link (rendered as
   <a>) — plain <div> items (no URL set) get no hover treatment, so they
   don't visually imply they're clickable when they're not. */
a.gp-roles-list__link { text-decoration: none; }
a.gp-roles-list__link:hover .gp-roles-list__text { color: var(--gp-navy); }

/* ---------- Movement content blocks ---------- */
.gp-movement + .gp-movement { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(42, 33, 21, 0.12); }
.gp-movement .gp-statement { margin-top: 1.75rem; }
.gp-movement__num { display: block; font-family: var(--gp-serif); font-weight: 300; font-size: 1.6rem; color: var(--gp-navy); opacity: 0.46; margin-bottom: 0.5rem; }
.gp-movement__num--final { color: var(--gp-navy); opacity: 1; }
.gp-movement__head { display: flex; align-items: flex-start; gap: 1.5rem; }
.gp-movement__head .gp-accordion__chevron { margin-top: 0.55rem; }

/* FAQs page: every accordion icon sits to the left of the question, per Figma */
.faqs-page .gp-accordion__button { justify-content: flex-start; }
.faqs-page .gp-accordion__chevron { order: -1; }
.faqs-page .gp-accordion__chevron--navy { margin-top: 0.15rem; }

/* ---------- Floating info card over an image ---------- */
.gp-floating-card {
  position: absolute;
  max-width: 22rem;
  background-color: var(--gp-cream);
  border-radius: 20px;
  padding: 1.7rem 1.9rem;
  box-shadow: 0 24px 30px rgba(20, 32, 48, 0.4);
}
.gp-floating-card__title { font-family: var(--gp-serif); font-weight: 300; font-size: 1.3rem; color: #2a2115; margin: 0.9rem 0 1.2rem; line-height: 1.35; }
.gp-floating-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gp-floating-card__link { display: flex; align-items: center; gap: 0.6rem; color: var(--gp-navy); }
.gp-floating-card__link-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--gp-navy); flex-shrink: 0; }
.gp-floating-card__link-icon::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--gp-cream); margin-left: 2px; }
.gp-floating-card__arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(30, 58, 95, 0.3); color: var(--gp-navy); font-size: 0.85rem; flex-shrink: 0; }
@media (max-width: 767px) {
  .gp-floating-card { position: static; max-width: none; margin-top: -3rem; margin-inline: 1rem; }
}

/* ---------- Always list (numbered, dark) ---------- */
.gp-always-list { list-style: none; margin: 0; padding: 0; }
.gp-always-list__item { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(243, 236, 216, 0.16); }
.gp-always-list__num { flex-shrink: 0; width: 1.6rem; font-family: var(--gp-sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--gp-cream); opacity: 0.72; padding-top: 0.35rem; }
.gp-always-list__text { font-family: var(--gp-serif); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.35; color: var(--gp-cream); margin: 0; }

/* ---------- The day, in short (Home) ---------- */
.gp-day-lede { margin-bottom: 1.6rem; }
.gp-day-list { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.gp-day-list__item { font-family: var(--gp-serif); font-weight: 300; font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem); line-height: 1.42; color: var(--gp-ink); padding: 1.2rem 0; border-top: 1px solid rgba(45, 45, 45, 0.14); }
.gp-day-list__item:last-child { border-bottom: 1px solid rgba(45, 45, 45, 0.14); }

.gp-day-list--light .gp-day-list__item { color: var(--gp-cream); border-top-color: rgba(243, 236, 216, 0.22); }
.gp-day-list--light .gp-day-list__item:last-child { border-bottom-color: rgba(243, 236, 216, 0.22); }
.gp-day-list__link { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; color: inherit; text-decoration: none; transition: opacity 0.35s var(--gp-ease); }
.gp-day-list__link:hover, .gp-day-list__link:focus-visible { color: inherit; opacity: 0.68; }
.gp-day-list__link span { flex-shrink: 0; font-family: var(--gp-sans); font-size: 0.95rem; opacity: 0.55; }

.gp-day-list--compact .gp-day-list__item { font-family: var(--gp-sans); font-weight: 400; font-size: .8rem; line-height: 1.55; padding: 0.5rem 0; }
.gp-surgeon__title { margin-bottom: 1.8rem; }

/* ---------- Media columns that grow with the copy beside them ----------
   .gp-media-col on the column. The card keeps its natural aspect ratio as a floor
   (flex-shrink 0) and grows to close any gap left by taller copy (flex-grow 1).
   Works whether the card is the whole column or sits under copy. Below lg the
   columns stack and everything falls back to the natural ratio. */
@media (min-width: 992px) {
  .gp-media-col { display: flex; flex-direction: column; }
  .gp-media-col > .btn { align-self: flex-start; }
  .gp-media-col > .gp-media-card { position: relative; flex: 1 0 auto; aspect-ratio: 6/5; }
  .gp-media-col > .gp-media-card--journey { aspect-ratio: 16/10; }
  .gp-media-col > .gp-media-card img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}

/* ---------- Article card (Resources "Longer reads") ---------- */
.gp-article-card { display: block; color: inherit; text-decoration: none; }
.gp-article-card__figure { background-color: var(--gp-cream-soft); border-radius: 20px; overflow: hidden; aspect-ratio: 408/255; margin-bottom: 1.4rem; }
.gp-article-card__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-article-card__title { font-family: var(--gp-serif); font-weight: 300; font-size: 1.35rem; line-height: 1.2; color: #2a2115; margin-bottom: 0.7rem; }
.gp-article-card__text { color: var(--gp-ink-soft); font-size: 0.95rem; line-height: 1.6; max-width: 19rem; margin-bottom: 1.1rem; }
.gp-article-card__read { display: inline-flex; align-items: center; gap: 0.5rem; }
.gp-article-card:hover .gp-article-card__title { color: var(--gp-navy); }

/* ---------- Fridge-sheet mockup (Resources "Keep this one") ---------- */
.gp-fridge-sheet {
  transform: rotate(-1.1deg);
  background-color: #f7f1e2;
  border: 1px solid rgba(42, 33, 21, 0.12);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(42, 33, 21, 0.06), 0 22px 22px rgba(42, 33, 21, 0.3);
  padding: 2.2rem 2.4rem;
}
.gp-fridge-sheet__title { font-family: var(--gp-serif); font-weight: 300; font-size: 1.75rem; color: #2a2115; margin: 0.5rem 0 0; }
.gp-fridge-sheet__rule { border: none; border-top: 1px solid rgba(45, 45, 45, 0.24); opacity: 0.6; margin: 1.1rem 0 0; }
.gp-fridge-sheet__list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.gp-fridge-sheet__item { position: relative; padding: 0.55rem 0 0.55rem 1.4rem; border-bottom: 1px dashed rgba(42, 33, 21, 0.16); font-size: 0.94rem; line-height: 1.5; color: #2a2115; }
.gp-fridge-sheet__item::before { content: ""; position: absolute; left: 0.1rem; top: 0.95rem; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gp-navy); opacity: 0.55; }
.gp-fridge-sheet__item--warn { font-weight: 500; border-bottom: none; }
.gp-fridge-sheet__item--warn::before { background-color: var(--gp-navy); border-color: var(--gp-navy); }
.gp-fridge-sheet__item strong { color: var(--gp-navy); font-weight: 600; }
.gp-fridge-sheet__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; font-family: var(--gp-sans); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gp-ink-soft); }
@media (max-width: 991.98px) {
  .gp-fridge-sheet { transform: none; margin-top: 2rem; }
}

/* ---------- Live FAQ search ---------- */
.gp-faq-search { display: block; position: relative; max-width: 35rem; margin-top: 1.75rem; cursor: default; }
.gp-faq-search input {
  width: 100%;
  background-color: #eaeaea;
  border: 2px solid rgba(30, 58, 95, 0.51);
border-radius: 58px;
padding: 1.2rem 3rem 1.2rem 1.875rem;  font-family: var(--gp-sans);
  font-size: 1.02rem;text-align: left;
  color: var(--gp-navy);
}
.gp-faq-search input::placeholder { color: var(--gp-navy); opacity: 0.85; }
.gp-faq-search__icon { position: absolute; right: 1.875rem; top: 50%; transform: translateY(-50%); font-size: 0.95rem; opacity: 0.6; }
.gp-faq-search__reset { display: inline-block; margin-top: 0.6rem; padding: 0; border: none; background: none; font-family: var(--gp-sans); font-size: 0.88rem; color: var(--gp-navy); text-decoration: underline; opacity: 0.75; cursor: pointer; }
.gp-faq-search__reset:hover,
.gp-faq-search__reset:focus { opacity: 1; }
.gp-faq-search__status { font-family: var(--gp-sans); font-size: 0.9rem; color: var(--gp-navy); opacity: 0.75; margin: 0.6rem 0 0; min-height: 1.2em; }
.gp-faq-search__empty { margin-top: 1.25rem; padding: 1.1rem 1.4rem; border: 1px solid rgba(30, 58, 95, 0.2); border-radius: 10px; background: rgba(30, 58, 95, 0.04); }
.gp-faq-search__empty p { margin: 0; font-family: var(--gp-sans); font-size: 0.98rem; color: var(--gp-navy); }
.gp-faq-search__empty a { color: var(--gp-navy); text-decoration: underline; }
.gp-faq-search__results { margin-top: 1.25rem; border: 1px solid rgba(30, 58, 95, 0.16); border-radius: 10px; overflow: hidden; background: var(--gp-cream); text-align: left; }
.gp-faq-search__results-list { list-style: none; margin: 0; padding: 0; counter-reset: faq-result; }
.gp-faq-search__result { position: relative; counter-increment: faq-result; padding: 1.1rem 1.25rem 1.1rem 4.2rem; text-align: left; }
.gp-faq-search__result::before {
  content: counter(faq-result, decimal-leading-zero);
  position: absolute;
  left: 1.25rem;
  top: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--gp-navy);
  color: var(--gp-cream);
  font-family: var(--gp-sans);
  font-weight: 600;
  font-size: 0.8rem;
}
.gp-faq-search__result + .gp-faq-search__result { border-top: 1px solid rgba(30, 58, 95, 0.12); }
.gp-faq-search__result-title {
  display: block;
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 1.1vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--gp-ink);
  text-align: left;
}
.gp-faq-search__result-body {
  color: var(--gp-ink-soft);
  font-family: var(--gp-sans);
  font-size: 0.95rem;
  line-height: 1.6;

  margin-bottom: 1.1rem;
  text-align: left;
}
.gp-faq-search__result-body p { margin: 0 0 0.75rem; }
.gp-faq-search__result-body p:last-child { margin-bottom: 0; }
mark.gp-faq-highlight { background: rgba(30, 58, 95, 0.18); color: inherit; padding: 0 0.05em; border-radius: 2px; }
.gp-faq-hidden { display: none !important; }

/* ---------- Contact form ---------- */
.gp-form-card { 
 padding: clamp(2rem, 3vw, 2.75rem);
      border-radius: 20px;
    border: 1px solid rgba(42, 33, 21, 0.12);
    background: #F7F1E2;
 }
.gp-form-label { display: block; font-family: var(--gp-sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gp-navy); margin-bottom: 0.6rem; }
/* Asterisk on required fields, same colour as the label */
.gp-form-label:has(+ .wpcf7-form-control-wrap .wpcf7-validates-as-required)::after { content: " *"; }
/* Validation messages only after Send is pressed (class added in site.js) */
.wpcf7-form:not(.gp-was-submitted) .wpcf7-not-valid-tip { display: none; }
/* Calm validation message under a missed field — brand navy, not CF7's red */
.wpcf7-form .wpcf7-not-valid-tip { color: var(--gp-navy); font-size: 0.78rem; margin-top: 0.35rem; }
/* The per-field messages are enough — hide CF7's general "One or more
   fields have an error" box. Other send errors still show, in calm colours. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { display: none; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: 0.6rem 0.9rem; border: 1px solid rgba(30, 58, 95, 0.3); border-radius: 10px; color: var(--gp-navy); font-size: 0.85rem; }
/* "* required" note at the top of the form (in the CF7 form template) */
.gp-form-required-note { font-size: 0.72rem; color: var(--gp-ink-soft); margin: 0 0 0.75rem; }
/* Thank-you panel after a successful send (shown by site.js) */
.wpcf7-form .gp-form-success { display: none; } /* hidden until moved out of the form */
.gp-form-card.gp-is-sent > :not(.gp-form-success) { display: none; }
.gp-form-success { border-left: 3px solid var(--gp-navy); padding: 0.25rem 0 0.25rem 1.25rem; }
[dir="rtl"] .gp-form-success { border-left: 0; border-right: 3px solid var(--gp-navy); padding: 0.25rem 1.25rem 0.25rem 0; }
.gp-form-success:focus { outline: none; }
.gp-form-success .gp-form-success__title { font-family: var(--gp-serif); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1.2; color: var(--gp-navy); margin: 0 0 1rem; }
.gp-form-success p { font-size: 0.95rem; line-height: 1.6; color: var(--gp-ink); margin: 0 0 0.75rem; }
.gp-form-success p:last-child { margin-bottom: 0; }
.gp-form-control {
  width: 100%;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(45, 45, 45, 0.24);
  border-radius: 0;
  padding: 0.9rem 0;
  font-family: var(--gp-sans);
  font-size: 1rem;
  color: var(--gp-ink);
}
.gp-form-control:focus { outline: none; border-color: var(--gp-navy); }
/* One explicit placeholder color for every field type, instead of each
   browser's own default gray (which varies between Chrome/Firefox/Safari
   and didn't match the custom date-field overlay's colour below). */
.gp-form-control::placeholder { color: var(--gp-ink-soft); opacity: 1; }
textarea.gp-form-control { resize: vertical; min-height: 8rem; }
/* iOS Safari centers the text inside native date/time inputs by default
   (its own system picker styling) — every other field type in this form
   defaults to left-aligned, so without this the Preferred Date/Time
   fields visually stand out as centered while everything else lines up
   on the left. */
input[type="date"].gp-form-control,
input[type="time"].gp-form-control {
  text-align: left;
}
select.gp-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%233A5A8C%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M2%205l6%206%206-6%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 0.9rem;
  padding-right: 1.5rem;
  color: var(--gp-ink);
}
/* Native <select> has no equivalent to ::placeholder for its first
   option, so without this its "Select a time"-style placeholder option
   just displays in normal dark text — identical to a real chosen value —
   instead of looking greyed-out like every other empty field. site.js
   toggles this class based on whether the placeholder option is still
   selected. */
select.gp-form-control.gp-is-placeholder { color: var(--gp-ink-soft); }
/* flatpickr's altInput is a plain text field with no icon of its own —
   this matches the time <select>'s chevron above exactly: same navy
   stroke color, same size, same right-side position, so both fields in
   the "Preferred date / Preferred time" row read as one visual family. */
input.gp-date-alt-input {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2212%22%20height%3D%2211%22%20rx%3D%221%22%20fill%3D%22none%22%20stroke%3D%22%233A5A8C%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M2%206h12%22%20stroke%3D%22%233A5A8C%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M5%201.5v3M11%201.5v3%22%20stroke%3D%22%233A5A8C%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 0.9rem;
  padding-right: 1.5rem;
  cursor: pointer;
}
[dir="rtl"] input.gp-date-alt-input {
  background-position: left 0.25rem center;
  padding-right: 0;
  padding-left: 1.5rem;
}
.gp-form-note { font-size: 0.85rem; color: var(--gp-ink-soft); margin-top: 1rem; margin-bottom: 0; }
/* Native date field overlay (see site.js) — the real input's own text is
   made invisible; only the calendar icon (unaffected by `color`) stays
   visible and clickable, since it's rendered separately by the browser. */
.gp-date-field { position: relative; display: block; }
.gp-date-field input[type="date"].gp-form-control {
  position: relative;
  z-index: 1;
  color: transparent;
  background: transparent;
}
.gp-date-field__display {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--gp-sans);
  font-size: 1rem;
  color: var(--gp-ink-soft);
}
.gp-date-field__display.has-value { color: var(--gp-ink); }
/* reCAPTCHA renders inside a cross-origin Google iframe, so its internal
   colours can't be restyled — this styles the space AROUND it instead,
   framing the white box as a deliberate inset panel (matching the same
   border/radius language as .gp-form-card) rather than a plain white
   rectangle sitting directly on the card's cream background. */
.wpcf7-form-control-wrap.recaptcha {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
  padding: 0.85rem;
  background: var(--gp-cream);
  border: 1px solid rgba(42, 33, 21, 0.12);
  border-radius: 12px;
}
/* Honeypot field for spam protection (see inc/cf7-honeypot.php). Hidden
   off-screen rather than display:none, since some bots specifically
   skip filling in display:none fields — this still reports as visually
   present to a bot's form-parsing, while being invisible and
   unreachable to real visitors and screen readers alike. */
.gp-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* On Contact Us, this note is the last thing in the form card, sitting in
   the same bottom-right screen region as the fixed WhatsApp button —
   on desktop, the note can end up rendering directly underneath it.
   Reserve clearance equal to the button's own footprint (roughly its
   height + bottom offset) so the two never overlap. Scoped to this one
   section (#send-message) rather than every .gp-form-note sitewide,
   since other pages using this same block may not have this issue. */
@media (min-width: 992px) {
  #send-message .gp-form-note { padding-right: 9rem; }
  /* The WhatsApp float button itself already moves to bottom-left in
     RTL ([dir="rtl"] .gp-whatsapp-float, above) — this clearance space
     has to move with it, or the note keeps a gap on the side the button
     no longer occupies while crowding the side it moved to. */
  [dir="rtl"] #send-message .gp-form-note { padding-right: 0; padding-left: 9rem; }
}

/* ---------- Directions pill links ---------- */
.gp-pill-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gp-pill-links a {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(45, 45, 45, 0.24);
  border-radius: 100px;
  padding: 0.55rem 1rem;
  font-family: var(--gp-sans);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-navy);
  transition: background-color 0.2s var(--gp-ease);
}
.gp-pill-links a:hover { background-color: rgba(30, 58, 95, 0.08); }

/* ---------- Contact method rows ---------- */
.gp-contact-row { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid rgba(45, 45, 45, 0.24); }
.gp-contact-row:first-child { border-top: 1px solid rgba(45, 45, 45, 0.24); }
.gp-contact-row__label { flex-shrink: 0; width: 7rem; font-family: var(--gp-sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gp-ink-soft); }
.gp-contact-row__value { font-family: var(--gp-serif); font-weight: 300; font-size: 1.35rem; color: #2a2115; }
.gp-contact-row a.gp-contact-row__value { color: #2a2115; }
.gp-contact-row a.gp-contact-row__value:hover { color: var(--gp-navy); }

div#before-your-visit {
    border-top: 1px solid rgba(42, 33, 21, 0.12);
    padding-top: 2rem;
}
.gp-section--fadedown .gp-eyebrow--light {
  color: rgba(243, 236, 216, 0.62);
  font-size: 11.196px;
  font-weight: 700;
  letter-spacing: 2.463px;
  text-transform: uppercase;
}
.gp-section--fadedown .gp-movements-nav__link {
  color: #F3ECD8;
  font-size: 15.04px;
  font-weight: 400;
  border-top: 1px solid rgba(243, 236, 216, 0.16);
}
.gp-section--fadedown .gp-movements-nav__link:hover {
  opacity: .6;
}

@media (max-width: 767px) {
  .gp-hero--page { min-height: 58vh; }
  .gp-header__inner .gp-brand img {
  max-width: 120px;
}
footer .gp-brand__mark {
    max-width: 200px;
}
.gp-quote.gp-quote-long-height {
    min-height: 28rem;
}
p.gp-body-lg.mb-0.pd-left-top {
    padding-top: 0;
}
.gp-section {
    padding-block: clamp(2rem, 6vw, 2rem);
}
.gp-contact-row__value {
  font-size: 14px;
}
.gp-heading-lg {
  font-size: 26px;
}
.gp-form-card {
    padding: clamp(1.5rem, 3vw, 2.75rem);
}

}

/* ============ 404 PAGE ============ */
.gp-404 { min-height: 60vh; display: flex; align-items: center; }
.gp-404__inner { max-width: 60rem; }
.gp-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* ---------- FAQ intro (centered statement + search) ---------- */
.gp-faq-intro {
  max-width: 100%;
  padding-block: 1.5rem;
}

.gp-faq-intro .gp-body-lg {
  max-width: 100%;
  font-family: var(--gp-serif);
  font-size: 36px;
  color: #2A2115;
  font-weight: 300;
}
@media (max-width: 575.98px) {
  .gp-faq-search input {
    font-size: 0.85rem;
    padding: 1.4rem 2.5rem 1.4rem 1.25rem;
  }

  .gp-faq-search__icon {
    right: 1.25rem;
  }
}
section.gp-section.gp-section--cream.pb-0.search-sec {
  padding-top: 0;
}
@media (max-width: 991px) {
  .gp-faq-intro .gp-body-lg {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .gp-faq-intro .gp-body-lg {
    font-size: 20px;
  }
}

/* ---------- Search results pagination ---------- */
.gp-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gp-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-family: var(--gp-sans);
  font-size: 0.95rem;
  color: var(--gp-navy);
  text-decoration: none;
  border: 1px solid rgba(30, 58, 95, 0.24);
  transition: background-color 0.25s var(--gp-ease), color 0.25s var(--gp-ease);
}
.gp-pagination a.page-numbers:hover { background-color: var(--gp-navy); color: var(--gp-cream); }
.gp-pagination .page-numbers.current { background-color: var(--gp-navy); color: var(--gp-cream); border-color: var(--gp-navy); }
.gp-pagination .page-numbers.dots { border: 0; background: none; }
/* ---------- Legal page (Privacy Policy, Terms, etc.) ---------- */
.gp-legal { padding-block: 1rem 4rem; }
.gp-legal-content {
  font-family: var(--gp-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gp-ink);
  
}
.gp-legal-content > *:first-child { margin-top: 0; }
.gp-legal-content h2 {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--gp-ink);
  margin: 2.75rem 0 1rem;
}
.gp-legal-content h3 {
  font-family: var(--gp-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--gp-ink);
  margin: 2rem 0 0.85rem;
}
.gp-legal-content h4 {
  font-family: var(--gp-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--gp-ink);
  margin: 1.5rem 0 0.5rem;
}
.gp-legal-content p { margin-bottom: 1.25rem; }
.gp-legal-content ul,
.gp-legal-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
.gp-legal-content li { margin-bottom: 0.5rem; }
.gp-legal-content a { color: var(--gp-navy); text-decoration: underline; text-underline-offset: 2px; }
.gp-legal-content a:hover { opacity: 0.75; }
.gp-legal-content strong { font-weight: 600; }
.gp-legal-content hr { border: none; border-top: 1px solid rgba(45, 45, 45, 0.14); margin: 2.5rem 0; }
.gp-legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.gp-legal-content table th,
.gp-legal-content table td { padding: 0.6rem 0.75rem; border: 1px solid rgba(45, 45, 45, 0.14); text-align: left; }

/* ==========================================================================
   RTL OVERRIDES (Arabic)
   Bootstrap's own grid/flex classes already mirror via the RTL stylesheet
   swap in inc/enqueue.php (is_rtl() conditional). Everything below is this
   theme's own CSS — physical left/right values that Bootstrap's swap can't
   touch, so each needs an explicit mirrored value here.
   NOT included below (deliberately, needs visual sign-off, not a blind
   mirror): .gp-quote__text / .gp-quote__voice and the .gp-quote--left
   variant. Which side that quote block sits on is tied to which side of
   the photo has visual weight, not just text direction — mirroring it
   automatically could put the text over a face or subject in the image.
   Check each quote section's photo once Arabic content is live and pick
   the correct variant class per instance rather than relying on this file.
   ========================================================================== */
[dir="rtl"] .skip-link { left: auto; right: 0.5rem; }
[dir="rtl"] .gp-lang__btn::after { margin-left: 0; margin-right: 0.4rem; }
[dir="rtl"] .gp-whatsapp-float { right: auto; left: clamp(1rem, 3vw, 2.5rem); }
[dir="rtl"] .gp-whatsapp-float__label { padding-right: 0; padding-left: 0.3rem; }
[dir="rtl"] .gp-back-to-top { left: auto; right: clamp(1rem, 3vw, 2.5rem); }
[dir="rtl"] .gp-accordion__button { text-align: right; }
[dir="rtl"] .gp-footer__links a { transition: opacity 0.2s var(--gp-ease), padding-right 0.2s var(--gp-ease); }
[dir="rtl"] .gp-footer__links a:hover { padding-left: 0; padding-right: 0.35rem; }
[dir="rtl"] .gp-movements-nav__meta-sep { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .gp-floating-card__link-icon::before {
  margin-left: 0;
  margin-right: 2px;
  border-width: 5px 8px 5px 0;
  border-color: transparent var(--gp-cream) transparent transparent;
}
[dir="rtl"] .gp-fridge-sheet__item { padding: 0.55rem 1.4rem 0.55rem 0; }
[dir="rtl"] .gp-fridge-sheet__item::before { left: auto; right: 0.1rem; }
[dir="rtl"] .gp-faq-search input { padding: 1.2rem 1.875rem 1.2rem 3rem; text-align: right; }
[dir="rtl"] .gp-faq-search__icon { right: auto; left: 1.875rem; }
@media (max-width: 767px) {
  [dir="rtl"] .gp-faq-search input { padding: 1.4rem 1.25rem 1.4rem 2.5rem; }
  [dir="rtl"] .gp-faq-search__icon { right: auto; left: 1.25rem; }
}
[dir="rtl"] .gp-faq-search__results,
[dir="rtl"] .gp-faq-search__result,
[dir="rtl"] .gp-faq-search__result-title,
[dir="rtl"] .gp-faq-search__result-body { text-align: right; }
[dir="rtl"] .gp-faq-search__result { padding: 1.1rem 4.2rem 1.1rem 1.25rem; }
[dir="rtl"] .gp-faq-search__result::before { left: auto; right: 1.25rem; }
[dir="rtl"] select.gp-form-control {
  background-position: left 0.25rem center;
  padding-right: 0;
  padding-left: 1.5rem;
}
[dir="rtl"] input[type="date"].gp-form-control,
[dir="rtl"] input[type="time"].gp-form-control {
  text-align: right;
}
[dir="rtl"] .gp-date-field__display {
  left: auto;
  right: 0;
}

/* The calendar icon itself is the browser's own native control
   (::-webkit-calendar-picker-indicator) — a separate layer from the
   .gp-date-field__display text overlay above, and from the invisible
   real <input> underneath it. It had no positioning rule at all before,
   so it rendered wherever the browser defaults to, which reads as
   floating next to the text rather than pinned to an edge. This pins it
   to the field's left edge, opposite the right-aligned Arabic text,
   matching the same left-side-icon pattern already used elsewhere (e.g.
   the FAQ search field's magnifying glass). Chrome/Edge/Safari only —
   Firefox doesn't expose this pseudo-element the same way, so this has
   no effect there and the icon falls back to Firefox's own default. */
[dir="rtl"] input[type="date"].gp-form-control::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0.4rem;
  right: auto;
}

/* Email field — no alignment override existed before, so it was
   inheriting the plain LTR default instead of matching every other
   right-aligned field/label in the form. */
[dir="rtl"] input[type="email"].gp-form-control {
  text-align: right;
  direction: rtl;
}

/* International Telephone Input for CF7 — confirmed against the live
   site's actual rendered markup: this build uses the older
   intl-tel-input naming (.intl-tel-input / .flag-container /
   .selected-dial-code / .country-list), not the newer .iti__* classes
   the initial version of this fix guessed at. In LTR it docks the
   flag+dropdown to the input's left edge; flip it to the right so it
   sits next to the field the same way the right-aligned "رقم الهاتف"
   label does. The phone number itself stays LTR (digits always read
   left-to-right even in an Arabic form) — only the dropdown's position,
   the reserved input padding, and the country-list menu are mirrored. */
[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type="tel"],
[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type="text"] {
  padding-right: 84px;
}
[dir="rtl"] .intl-tel-input.allow-dropdown .flag-container,
[dir="rtl"] .intl-tel-input.separate-dial-code .flag-container {
  right: 0;
  left: auto;
}
[dir="rtl"]  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, [dir="rtl"]  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel], [dir="rtl"]  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text] {
    padding-right: 92px;
    padding-left: 0px;
}

[dir="rtl"] .intl-tel-input.separate-dial-code .selected-dial-code {
  display: table-cell;
  vertical-align: middle;
  padding-right: 28px; padding-left:0px;
}
[dir="rtl"] .intl-tel-input ul.country-list { text-align: right; }

[dir="rtl"] .gp-legal-content ul,
[dir="rtl"] .gp-legal-content ol { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .gp-legal-content table th,
[dir="rtl"] .gp-legal-content table td { text-align: right; }

/* Directional arrow glyphs (→ ← used as trailing/leading icons on CTAs,
   pagination, and back-links) need to visually flip in RTL — Unicode
   bidi mirroring does NOT do this automatically for these characters in
   practice (confirmed by testing, not assumed). Every such glyph in this
   theme sits in a bare <span aria-hidden="true"> with no class — every
   other decorative span (breadcrumb separators, accordion chevrons, play/
   pause icons) already has its own class name — so this selector is safe
   and won't catch anything else. The lone exception, the ↑ "back to top"
   glyph, is vertically symmetric so flipping it horizontally is a no-op. */
[dir="rtl"] span[aria-hidden="true"]:not([class]) {
  display: inline-block;
  transform: scaleX(-1);
}

/* Same fix for the two places an arrow is an image/icon rather than a
   Unicode glyph: the floating card's arrow-only link button (a plain →
   character, mirrors fine), and the hero CTA's icon. The hero icon is
   NOT a horizontal arrow SVG — it's a vertical up-arrow (arrow-up-outline.svg)
   rotated 90deg by its .gp-icon-circle wrapper to point right for LTR.
   Since an up-arrow is left-right symmetric, mirroring the image itself
   (scaleX) is a visual no-op — the fix has to reverse the *rotation*
   instead, on the wrapper, so it points left (-90deg) rather than right. */
[dir="rtl"] .gp-floating-card__arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .gp-icon-circle {
  transform: rotate(-90deg);
}

/* Arabic type stack — Canela Trial / Sohne have no Arabic glyphs, so
   without this override Arabic text silently falls through to whatever
   default serif/sans-serif the visitor's OS provides, instead of a
   typeface chosen for the brand. Swap in Arabic-native pairings that
   echo the Latin design (serif display face, clean grotesque for UI/nav)
   while keeping the Latin fonts as a fallback for any mixed EN/AR string. */
[dir="rtl"] {
  --gp-serif: "Noto Naskh Arabic", "Canela Trial", Georgia, serif;
  --gp-sans: "IBM Plex Sans Arabic", "Sohne", "Helvetica Neue", Arial, sans-serif;
}

/* Letter-spacing throughout this file (0.1em–0.22em on eyebrows, labels,
   nav, pills) is a Latin uppercase-tracking technique. Arabic is a
   cursive, connected script — added letter-spacing breaks the joins
   between letterforms and is a well-documented Arabic readability
   problem, independent of font choice or size. Neutralize it wherever it
   was set. !important is deliberate: dozens of individual selectors set
   this earlier in the file, and RTL should override every one of them
   without maintaining a parallel duplicate selector list here. */
[dir="rtl"] * {
  letter-spacing: normal !important;
}

/* Arabic reads more comfortably slightly larger, with more line-height,
   than the equivalent Latin design scale — its diacritics and connected
   letterforms sit differently on the baseline. Scale the whole document
   rather than each heading class individually, so any el/rem-based sizing
   throughout the file (including the clamp() heading sizes) scales with
   it automatically. */
/* Arabic reads more comfortably at a larger size. rem is always relative
   to the ROOT (html) element's font-size, never body's, so a body-level
   em change (an earlier attempt) is invisible to any class below that
   sets its own explicit rem size — which every one of these does.
   Targeting the actual selectors at +20% over their LTR value is the
   only way this reaches eyebrow/body copy/nav text. Scoped to exactly
   what was asked — headings, buttons and labels elsewhere are untouched. */
/* Arabic reads more comfortably at a larger size. rem is always relative
   to the ROOT (html) element's font-size, never body's, so a body-level
   em change (an earlier attempt) is invisible to any class below that
   sets its own explicit rem size — which every one of these does.
   Targeting the actual selectors is the only way this reaches the actual
   rendered text. Scoped to exactly what was asked — headings elsewhere
   in the file are untouched. */
[dir="rtl"] .gp-eyebrow { font-size: 1rem; }
[dir="rtl"] .gp-body-lg { font-size: 1.2rem; }
[dir="rtl"] .gp-body-md { font-size: 1.224rem; }
[dir="rtl"] .gp-body-md--serif { font-size: 1.26rem; }
[dir="rtl"] .gp-nav .nav-link { font-size: 1rem; }
[dir="rtl"] .gp-btn { font-size: 0.8rem; }
[dir="rtl"] .gp-btn--sm { font-size: 0.8rem; }
[dir="rtl"] .gp-label { font-size: 0.8rem; }
[dir="rtl"] .gp-scroll-indicator { font-size: 0.8rem; }
[dir="rtl"] .gp-whatsapp-float__label { font-size: 0.8rem; }
[dir="rtl"] .gp-footer__bottom p { font-size: 0.8rem; }
[dir="rtl"] .gp-breadcrumb { font-size: 0.9rem; }
[dir="rtl"] .gp-quote__voice { font-size: 0.8rem; }

/* Base Arabic body font — switches the default (unclassed) text face
   from --gp-sans to the Arabic serif. Any element that sets its own
   explicit font-family (e.g. .gp-nav .nav-link uses var(--gp-sans)
   directly) is unaffected by this and keeps its own face; this only
   changes text that would otherwise inherit body's default. */
[dir="rtl"] body {
  font-family: "Noto Naskh Arabic", "Canela Trial", Georgia, serif;
}
.gp-form-note a {color: var(--gp-navy);}

/* ==========================================================================
   Contact Us — Hero + Form banner (layout "hero_form", blocks/hero_form.php)
   Client feedback 28 Sep 2026. Only targets .gp-hero--contact /
   .gp-hero--with-form / .gp-hero-form, so no other page's hero changes.
   ========================================================================== */

/* Title + lead */
.gp-hero--contact .gp-hero__title { font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); line-height: 1.15; }
.gp-hero--contact .gp-hero__lead { margin-bottom: 2rem; }

/* Form card on the right of the hero */
.gp-hero--with-form .gp-hero__content { align-items: center; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.gp-hero--with-form .gp-hero__content > div:first-child { flex: 1 1 auto; min-width: 0; }
.gp-hero__form { flex: 0 0 auto; width: min(100%, 540px); }
.gp-hero-form { box-shadow: 0 24px 60px rgba(15, 29, 48, 0.28); }
.gp-hero-form .gp-body-md { font-size: 0.95rem; line-height: 1.6; }
.gp-hero-form textarea.gp-form-control { min-height: 0; height: 2rem; resize: none; }

/* Privacy Policy link in the form note — brand navy, underlined */
.gp-hero-form .gp-form-note a { color: var(--gp-navy); text-decoration: underline; text-underline-offset: 3px; }
.gp-hero-form .gp-form-note a:hover { color: #15304c; }

/* Desktop — compact card so the whole banner fits one screen */
@media (min-width: 992px) {
  .gp-hero--fit-card { min-height: 100vh; min-height: 100svh; }
  /* Bottom padding keeps the card clear of the fixed WhatsApp button
     (.gp-whatsapp-float: bottom offset clamp(1rem, 3vw, 2.5rem) + ~3.2rem tall),
     same idea as the .gp-scroll-indicator margin-bottom in site.css. */
  .gp-hero--fit-card .gp-hero__content { padding-top: calc(var(--gp-header-h) + 0.5rem); padding-bottom: calc(clamp(1rem, 3vw, 2.5rem) + 4.5rem); align-items: center; }
  .gp-hero--fit-card .gp-hero__form { width: min(100%, 500px); }
  .gp-hero--fit-card .gp-hero-form { padding: 1.6rem 2rem 1.5rem; }

  .gp-hero--fit .gp-hero-form .gp-heading-md { font-size: clamp(1.6rem, 1.1rem + 0.8vw, 2rem); margin-bottom: 0.4rem !important; }
  .gp-hero--fit .gp-hero-form .gp-body-md { font-size: 0.86rem; line-height: 1.5; margin-bottom: 1rem !important; }
  .gp-hero--fit .gp-hero-form form p { margin: 0; }
  .gp-hero--fit .gp-hero-form .row.gy-3 { --bs-gutter-y: 0.7rem; }
  .gp-hero--fit .gp-hero-form .gp-form-label { font-size: 0.66rem; margin-bottom: 0.2rem; }
  .gp-hero--fit .gp-hero-form .gp-form-control { padding: 0.5rem 0; font-size: 0.95rem; }
  .gp-hero--fit .gp-hero-form textarea.gp-form-control { height: 2.4rem; }

  /* Submit button + privacy note share one line */
  .gp-hero--fit .gp-hero-form .row > .col-12:nth-last-child(2),
  .gp-hero--fit .gp-hero-form .row > .col-12:last-child { width: auto; display: flex; align-items: center; }
  .gp-hero--fit .gp-hero-form .row > .col-12:last-child { order: 1; }
  .gp-hero--fit .gp-hero-form .row > .col-12:nth-last-child(2) { order: 2; flex: 1 1 0; }
  .gp-hero--fit .gp-hero-form form .gp-form-note { margin: 0; font-size: 0.78rem; white-space: nowrap; }
  /* CF7 adds a hidden loading spinner next to the Send button
     (.wpcf7-spinner, 24px wide + 24px side margins). It still takes space
     while hidden, which pushed the privacy note away and made it wrap.
     Take it out of the flow so the note sits right next to the button. */
  .gp-hero--fit .gp-hero-form .row > .col-12:last-child p { position: relative; margin: 0; }
  .gp-hero--fit .gp-hero-form .wpcf7-spinner { position: absolute; top: 50%; left: 100%; margin: -12px 0 0 0.5rem; }
  [dir="rtl"] .gp-hero--fit .gp-hero-form .wpcf7-spinner { left: auto; right: 100%; margin: -12px 0.5rem 0 0; }
  .gp-hero--fit .gp-hero-form > .gp-form-note { font-size: 0.78rem; margin-top: 0.9rem; }
}

/* Desktop (normal-height screens): a little more space between each row
   of form fields so they don't look crowded. Card position unchanged. */
@media (min-width: 992px) and (min-height: 821px) {
  .gp-hero--fit .gp-hero-form .row.gy-3 { --bs-gutter-y: 1rem; }
}

/* Shorter laptop screens (e.g. 1366x768, 1280x720): tighten the card a
   little more so it still fits above the WhatsApp button. */
@media (min-width: 992px) and (max-height: 820px) {
  .gp-hero--fit-card .gp-hero__content { padding-top: calc(var(--gp-header-h) - 0.5rem); padding-bottom: calc(clamp(1rem, 3vw, 2.5rem) + 4rem); }
  .gp-hero--fit-card .gp-hero-form { padding: 1.2rem 1.75rem 1.1rem; }
  .gp-hero--fit .gp-hero-form .gp-heading-md { font-size: 1.5rem; }
  .gp-hero--fit .gp-hero-form .gp-body-md { font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.7rem !important; }
  .gp-hero--fit .gp-hero-form .row.gy-3 { --bs-gutter-y: 0.45rem; }
  .gp-hero--fit .gp-hero-form .gp-form-control { padding: 0.35rem 0; font-size: 0.9rem; }
  .gp-hero--fit .gp-hero-form textarea.gp-form-control { height: 2rem; }
  .gp-hero--fit .gp-hero-form > .gp-form-note { margin-top: 0.6rem; margin-bottom: 0; }
}

/* Tablet + mobile — card drops under the heading, full width */
@media (max-width: 991.98px) {
  .gp-hero--with-form .gp-hero__content { align-items: stretch; }
  .gp-hero__form { width: 100%; }
}

/* Arabic (RTL) */
[dir="rtl"] .gp-hero--contact .gp-hero__title { letter-spacing: 0; }

/* ==========================================================================
   Contact Us — Visiting List (layout "visiting_list", blocks/visiting_list.php)
   Client feedback 28 Sep 2026. Only targets .gp-visiting-list classes,
   so Text + Roles List (Our Team) and every other section stay as they are.
   ========================================================================== */

/* Photo — taller portrait crop than the default .gp-media-card */
.gp-visiting-list__media img { aspect-ratio: 4 / 5; object-position: center 20%; }

/* Heading — accent line (navy) always starts on its own line via <br> */
@media (min-width: 992px) {
  /* Capped so "One procedure. One focus." stays on one line on wide screens */
  .gp-visiting-list__heading { font-size: clamp(2.4rem, 1.2rem + 2vw, 3.4rem); }
}

/* Numbered list */
.gp-visiting-list__list { list-style: none; margin: 2rem 0 0; padding: 0; }
.gp-visiting-list__item {
  display: flex;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(45, 45, 45, 0.14);
}
.gp-visiting-list__item:last-child { border-bottom: 1px solid rgba(45, 45, 45, 0.14); }
.gp-visiting-list__num {
  flex-shrink: 0;
  width: 1.8rem;
  font-family: var(--gp-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gp-navy);
  padding-top: 0.5rem;
}
.gp-visiting-list__title {
  font-family: var(--gp-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem);
  color: var(--gp-navy);
  margin-bottom: 0.35rem;
}
.gp-visiting-list__text { font-size: 1rem; line-height: 1.65; color: var(--gp-ink-soft); margin: 0; }

/* Mobile */
@media (max-width: 575.98px) {
  .gp-visiting-list__list { margin-top: 1.5rem; }
  .gp-visiting-list__item { gap: 1rem; padding: 1.1rem 0; }
  .gp-visiting-list__num { width: 1.5rem; padding-top: 0.35rem; }
  .gp-visiting-list__title { font-size: 1.25rem; }
  .gp-visiting-list__text { font-size: 0.95rem; }
}

/* ==========================================================================
   Contact Us — Stats band background (Text + Stats module)
   Page IDs: 306 = Contact Us (EN), 1873 = Contact Us (AR).
   Only the Text + Stats section on these two pages is targeted: it is the
   .gp-section whose container holds the stats list (.gp-stats), found with
   :has(). Every other page, and every other section on Contact Us, is
   unchanged.
   ========================================================================== */

.page-id-306 .gp-section:has(> .container > .gp-stats),
.page-id-1873 .gp-section:has(> .container > .gp-stats) {
  background-color: var(--gp-cream);
  background-image: url("/wp-content/uploads/2026/08/stats-texture.webp");
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

/* No heading/text used in this module here — hide the empty text row
   and drop the gap above the stats so the band matches the design. */
.page-id-306 .gp-section:has(> .container > .gp-stats) .container > .row:not(.gp-stats):not(:has(h2, p, a)),
.page-id-1873 .gp-section:has(> .container > .gp-stats) .container > .row:not(.gp-stats):not(:has(h2, p, a)) {
  display: none;
}
.page-id-306 .gp-section:has(> .container > .gp-stats) .gp-stats,
.page-id-1873 .gp-section:has(> .container > .gp-stats) .gp-stats {
  margin-top: 0;
}

/* Mobile — 2 x 2 grid, a bit tighter */
@media (max-width: 767.98px) {
  .page-id-306 .gp-section:has(> .container > .gp-stats),
  .page-id-1873 .gp-section:has(> .container > .gp-stats) {
    padding: 2.5rem 0;
  }
  .page-id-306 .gp-section:has(> .container > .gp-stats) .gp-stats,
  .page-id-1873 .gp-section:has(> .container > .gp-stats) .gp-stats {
    row-gap: 1.75rem;
  }
}

/* ==========================================================================
   Contact Us — How It Works (layout "how_it_works", blocks/how_it_works.php)
   Client feedback 28 Sep 2026. Only targets .gp-hiw classes, so Dark
   Numbered List and other dark sections stay as they are.
   ========================================================================== */

.gp-hiw { position: relative; overflow: hidden; }
.gp-hiw .gp-section__bg-photo { object-position: center 30%; }
/* Navy wash — strongest behind the text on the left, lighter on the right */
.gp-hiw__overlay {
  background: linear-gradient(100deg, rgba(27, 58, 94, 0.97) 0%, rgba(27, 58, 94, 0.9) 45%, rgba(27, 58, 94, 0.72) 100%);
}
[dir="rtl"] .gp-hiw__overlay {
  background: linear-gradient(260deg, rgba(27, 58, 94, 0.97) 0%, rgba(27, 58, 94, 0.9) 45%, rgba(27, 58, 94, 0.72) 100%);
}

/* Left column — stays in view while the steps scroll past (desktop) */
.gp-hiw__intro { position: sticky; top: calc(var(--gp-header-h) + 2rem); }
.gp-hiw__lede { color: rgba(243, 236, 216, 0.8); max-width: 26rem; }

/* Steps */
.gp-hiw__list .gp-always-list__item { gap: 2rem; padding: 2rem 0; align-items: flex-start; }
.gp-hiw__list .gp-always-list__item:last-child { border-bottom: 1px solid rgba(243, 236, 216, 0.16); }
.gp-hiw__num {
  flex-shrink: 0;
  width: 4.5rem;
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem);
  line-height: 0.9;
  color: var(--gp-cream);
}
.gp-hiw__title {
  font-family: var(--gp-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  color: var(--gp-cream);
  margin-bottom: 0.6rem;
}
.gp-hiw__text { font-size: 1.02rem; line-height: 1.65; color: rgba(243, 236, 216, 0.8); margin: 0; max-width: 32rem; }

/* Tablet + mobile — no sticky column once it stacks */
@media (max-width: 991.98px) {
  .gp-hiw__intro { position: static; }
}
/* Mobile */
@media (max-width: 575.98px) {
  .gp-hiw__num { width: 3rem; }
  .gp-hiw__list .gp-always-list__item { gap: 1.25rem; padding: 1.5rem 0; }
  .gp-hiw__text { font-size: 0.95rem; }
}

/* ==========================================================================
   Contact Us — Contact Tiles + Visit Card (layout "contact_tiles",
   blocks/contact_tiles.php). Client feedback 28 Sep 2026.
   Only targets .gp-contact-tiles / .gp-ctile / .gp-contact-visit classes,
   so Contact Info + Form and every other section stay as they are.
   ========================================================================== */

/* Tiles */
.gp-ctile {
  display: flex; flex-direction: column; gap: 0.9rem; height: 100%;
  padding: 1.25rem 1.25rem 1.35rem;
  background-color: var(--gp-cream-soft);
  border: 1px solid rgba(30, 58, 95, 0.12);
  border-radius: 16px;
  color: #2a2115;
  text-decoration: none;
  transition: transform 0.25s var(--gp-ease), border-color 0.25s var(--gp-ease), box-shadow 0.25s var(--gp-ease);
}
a.gp-ctile:hover { transform: translateY(-3px); border-color: rgba(30, 58, 95, 0.3); box-shadow: 0 14px 30px rgba(30, 58, 95, 0.08); color: var(--gp-navy); }
.gp-ctile__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background-color: var(--gp-navy); color: var(--gp-cream); }
.gp-ctile__icon svg { width: 19px; height: 19px; }
.gp-ctile__value { font-family: var(--gp-serif); font-weight: 300; font-size: 1.05rem; line-height: 1.35; overflow-wrap: break-word; }
/* Phone numbers / email stay left-to-right in Arabic */
[dir="rtl"] .gp-ctile__value { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* Visit card — stretches so its bottom lines up with the tiles column */
.gp-contact-visit {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  background-color: var(--gp-cream);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-shadow: 0 20px 45px rgba(30, 58, 95, 0.12);
}
.gp-contact-visit__row {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(45, 45, 45, 0.12);
}
.gp-contact-visit__row:first-child { border-top: 0; padding-top: 0.25rem; }
.gp-contact-visit__row .gp-label { color: var(--gp-navy); margin-bottom: 0.3rem; }
.gp-contact-visit__value { font-family: var(--gp-serif); font-weight: 300; font-size: 1.08rem; line-height: 1.4; color: #2a2115; margin: 0; }
.gp-contact-visit__link { padding-top: 1.25rem; border-top: 1px solid rgba(45, 45, 45, 0.12); }

/* Linked visit value (e.g. the address → Google Maps) — no underline,
   turns navy on hover */
.gp-contact-visit__value a { color: inherit; text-decoration: none; transition: color 0.2s var(--gp-ease); }
.gp-contact-visit__value a:hover { color: var(--gp-navy); text-decoration: none; }

/* "Get directions" — no underline/border on hover (the arrow still slides).
   Only this link; other .gp-link-arrow links on the site keep their hover. */
.gp-contact-visit .gp-contact-visit__link,
.gp-contact-visit .gp-contact-visit__link:hover { border-bottom-color: transparent; border-top-color: rgba(45, 45, 45, 0.12); text-decoration: none; }

/* Desktop — card top lines up with the tiles (below the eyebrow) */
@media (min-width: 992px) {
  .gp-contact-tiles .gp-contact-visit { margin-top: 2.9rem; }
}

/* Mobile */
@media (max-width: 575.98px) {
  .gp-ctile { padding: 1rem; }
  .gp-ctile__value { font-size: 0.95rem; }
  .gp-contact-visit { padding: 1.4rem 1.4rem; }
}

/* ==========================================================================
   Contact Us — FAQ Accordion (layout "faq_light", blocks/faq_light.php)
   Client feedback 28 Sep 2026. Only targets .gp-faq-light, so the FAQ
   page, FAQ Stay-Open and every other accordion stay as they are.
   ========================================================================== */

/* Sits straight under the contact tiles section — no double top spacing */
.gp-faq-light { padding-top: 0; }

/* Full-width rows, chevron before the question */
.gp-faq-light .gp-accordion .accordion-item { border-left: 0; border-right: 0; border-radius: 0; }
.gp-faq-light .gp-accordion__button { justify-content: flex-start; }
.gp-faq-light .gp-accordion__chevron { order: -1; }
/* Answer lines up with the question text (past the chevron) */
.gp-faq-light .gp-accordion__body {
  padding-inline-start: calc(16px + 1.5rem);
  color: var(--gp-ink-soft);
  max-width: none;
}

/* Mobile */
@media (max-width: 575.98px) {
  .gp-faq-light .gp-accordion__body { padding-inline-start: calc(16px + 1rem); }
}
@media (min-width: 992px) {
  .page-id-43 .gp-media-col,
  .page-id-1894 .gp-media-col { align-self: flex-start; position: sticky; top: calc(var(--gp-header-h) + 1.5rem); }

  .page-id-43 .gp-media-col > .gp-media-card,
  .page-id-1894 .gp-media-col > .gp-media-card { flex: 0 0 auto; aspect-ratio: 614 / 574; }
}

/* ==========================================================================
   Contact Us – map buttons (Waze, Google Maps, Apple Maps) in the visit card
   (blocks/contact_tiles.php). Client feedback 1 Oct 2026. Only targets the
   new .gp-contact-visit__maps / .gp-map-btn classes.
   ========================================================================== */
.gp-contact-visit__maps {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(45, 45, 45, 0.12);
}
.gp-contact-visit__maps-label { color: var(--gp-navy); margin-bottom: 0.75rem; }

.gp-map-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.gp-map-btns li { margin: 0; }

.gp-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;            /* 44px tap target */
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  background: transparent;
  border: 1px solid rgba(30, 58, 95, 0.25);
  border-radius: 999px;
  color: var(--gp-navy);
  font-size: 0.92rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s var(--gp-ease), color 0.2s var(--gp-ease), border-color 0.2s var(--gp-ease);
}
.gp-map-btn:hover,
.gp-map-btn:focus-visible {
  background-color: var(--gp-navy);
  border-color: var(--gp-navy);
  color: var(--gp-cream);
  text-decoration: none;
}
.gp-map-btn:focus-visible { outline: 2px solid var(--gp-navy); outline-offset: 2px; }
.gp-map-btn__icon { display: inline-flex; width: 1.15rem; height: 1.15rem; }
.gp-map-btn__icon svg { width: 100%; height: 100%; }
.gp-map-btn__name { white-space: nowrap; }

[dir="rtl"] .gp-map-btn { padding: 0.5rem 0.8rem 0.5rem 1rem; }

/* Small phones – three equal buttons on one row, name under the icon */
@media (max-width: 400px) {
  .gp-map-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .gp-map-btn { flex-direction: column; justify-content: center; gap: 0.3rem; width: 100%; padding: 0.6rem 0.4rem; border-radius: 14px; font-size: 0.8rem; text-align: center; }
  .gp-map-btn__name { white-space: normal; }
}
/* Arabic (RTL) phone field – reset the plugin's left padding */
[dir="rtl"] .intl-tel-input.separate-dial-code input,
[dir="rtl"] .intl-tel-input.separate-dial-code input[type="tel"],
[dir="rtl"] .intl-tel-input.separate-dial-code input[type="text"],
[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown[class*="iti-sdc-"] input,
[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown[class*="iti-sdc-"] input[type="tel"],
[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown[class*="iti-sdc-"] input[type="text"] {
  padding-left: 0;
  text-align: right;
}
/* ==========================================================================
   Hero + Form: map buttons under the booking card (feedback 5 Oct 2026)
   Light variant of .gp-map-btn for the dark hero image. The card is lifted
   by trimming the hero's bottom padding when the buttons are present.
   ========================================================================== */
.gp-hero__form .gp-hero__maps { margin-top: 0.85rem; justify-content: center; }
.gp-map-btns--light .gp-map-btn {
	color: var(--gp-cream);
	border-color: rgba(255, 255, 255, 0.45);
	background-color: rgba(30, 58, 95, 0.35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.gp-map-btns--light .gp-map-btn:hover,
.gp-map-btns--light .gp-map-btn:focus-visible {
	background-color: var(--gp-cream);
	border-color: var(--gp-cream);
	color: var(--gp-navy);
}
.gp-map-btns--light .gp-map-btn:focus-visible { outline-color: var(--gp-cream); }
@media (min-width: 992px) {
	.gp-hero--fit-card.gp-hero--has-maps .gp-hero__content { padding-bottom: calc(1.5rem + clamp(1rem, 3vw, 2.5rem)); }
}
@media (min-width: 992px) and (max-height: 820px) {
	.gp-hero--fit-card.gp-hero--has-maps .gp-hero__content { padding-bottom: calc(1rem + clamp(1rem, 3vw, 2.5rem)); }
}

/* GP-17: pull-out question line inside movement text (blog "What to Ask..." post). */
.gp-movement .gp-pullout {
  display: block;
  margin: 0.25rem 0 0.75rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--gp-navy);
  font-family: var(--gp-serif);
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--gp-navy);
}

/* ==========================================================================
   Contact Us — Parking Videos (layout "parking_videos",
   blocks/parking_videos.php). Client feedback 12 Oct 2026.
   Centred heading + intro on cream, full film on top, two vertical
   shorts below (side by side on desktop, stacked on mobile).
   Only targets .gp-pv / .gp-pv-player classes.
   ========================================================================== */

/* Heading + intro */
.gp-pv__head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.gp-pv__eyebrow { margin-bottom: 1rem; }
.gp-pv__heading { margin-bottom: 1rem; color: #2a2115; }
@media (min-width: 768px) {
  .gp-pv__heading { font-size: clamp(2.25rem, 1.4rem + 1.6vw, 2.75rem); }
}
.gp-pv__lead { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--gp-ink); }
.gp-pv__lead + .gp-pv__lead { margin-top: 0.4rem; font-family: var(--gp-serif); color: var(--gp-ink-soft); }

/* Full film */
.gp-pv__film { margin: 0 auto; max-width: 70rem; }

/* Shorts — side by side, centred; stack on phones */
.gp-pv__shorts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 3rem; }
.gp-pv__short { flex: 0 1 320px; min-width: 0; margin: 0; }

/* Captions under each video */
.gp-pv__caption {
  margin-top: 0.875rem;
  font-family: var(--gp-serif); font-weight: 300; font-size: 1.125rem; line-height: 1.35;
  text-align: center; color: #2a2115;
}
.gp-pv__caption--film { font-size: 1.1875rem; }

/* Player — poster + play button until pressed, then the YouTube iframe */
.gp-pv-player {
  position: relative; display: block; overflow: hidden;
  background-color: var(--gp-navy);
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(30, 58, 95, 0.12);
  text-decoration: none;
}
.gp-pv-player--film { width: 100%; aspect-ratio: 16 / 9; }
.gp-pv-player--short { width: 100%; aspect-ratio: 9 / 16; }
.gp-pv-player__poster,
.gp-pv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gp-pv-player__poster { object-fit: cover; transition: transform 0.6s var(--gp-ease); }
/* Soft navy wash so the play button and labels read on any poster */
.gp-pv-player:not(.is-playing)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: rgba(30, 58, 95, 0.22);
  transition: background-color 0.3s var(--gp-ease);
}
.gp-pv-player:hover .gp-pv-player__poster { transform: scale(1.03); }
.gp-pv-player:hover::after { background-color: rgba(30, 58, 95, 0.1); }
.gp-pv-player:focus-visible { outline: 2px solid var(--gp-navy); outline-offset: 4px; }

.gp-pv-player__icon {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background-color: var(--gp-cream);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--gp-ease);
}
.gp-pv-player--film .gp-pv-player__icon { width: 88px; height: 88px; }
.gp-pv-player:hover .gp-pv-player__icon { transform: translate(-50%, -50%) scale(1.06); }
.gp-pv-player__icon svg { width: 22px; height: 22px; fill: var(--gp-navy); }
.gp-pv-player--film .gp-pv-player__icon svg { width: 30px; height: 30px; }

/* "Full route · 2:10" / "1:08" — bottom corner of the video */
.gp-pv-player__info {
  position: absolute; z-index: 1; inset-block-end: 1.125rem; inset-inline-start: 1.125rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gp-cream);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.gp-pv-player--film .gp-pv-player__info { inset-block-end: 1.375rem; inset-inline-start: 1.5rem; }

/* Mobile */
@media (max-width: 767.98px) {
  .gp-pv__head { margin-bottom: 2rem; }
  .gp-pv__lead { font-size: 1rem; }
  .gp-pv__shorts { gap: 1.75rem; margin-top: 2.25rem; }
  .gp-pv__short { flex-basis: 100%; max-width: 320px; }
  .gp-pv-player { border-radius: 16px; }
  /* Film in portrait like the shorts — same width, same layout */
  .gp-pv__film { max-width: 320px; }
  .gp-pv-player--film { aspect-ratio: 9 / 16; }
  .gp-pv-player--film .gp-pv-player__icon { width: 64px; height: 64px; }
  .gp-pv-player--film .gp-pv-player__icon svg { width: 22px; height: 22px; }
  .gp-pv-player--film .gp-pv-player__info { inset-block-end: 1.125rem; inset-inline-start: 1.125rem; }
  /* Once playing, the (landscape) film goes back to full-width 16:9 — no black bars */
  .gp-pv__film:has(.is-playing) { max-width: none; }
  .gp-pv-player--film.is-playing { aspect-ratio: 16 / 9; }
  .gp-pv__caption { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-pv-player__poster,
  .gp-pv-player__icon { transition: none; }
}

/* =====================================================================
   GP-29: Article byline + "Medically reviewed by" author box (posts)
   MG Empower scheme in GP colours, sand card (no white, per client).
   Output by inc/gp-authors.php.
   ===================================================================== */
:root { --gp-sky-tint: #d9f0fa; }

/* 1. Byline under the article title */
.gp-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1rem 0 0;
  font-family: var(--gp-sans);
}
.gp-post-meta__date { font-size: 13px; font-weight: 500; color: var(--gp-ink-soft); letter-spacing: 0.02em; }
.gp-post-meta__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gp-sky); flex-shrink: 0; }
.gp-post-meta__author { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.gp-post-meta__label { color: var(--gp-ink-soft); }
.gp-post-meta__name { font-weight: 600; color: var(--gp-navy); text-decoration: none; }
a.gp-post-meta__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.gp-post-meta__job {
  position: relative;
  padding-inline-start: 12px;
  color: var(--gp-ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.gp-post-meta__job::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(30, 58, 95, 0.25);
}

/* 2. Author box at the end of the article column */
.gp-author-box {
  position: relative;
  max-width: 900px;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  background: #ebe1c6; /* sand card: one shade deeper than the cream page (client: no white) */
  border-top: 2px solid var(--gp-navy);
  overflow: hidden;
  color: var(--gp-navy);
  scroll-margin-top: 120px;
}
.gp-author-box + .gp-author-box { margin-top: 24px; }
.gp-author-box__accent {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 64px;
  height: 8px;
  background: var(--gp-sky);
}
.gp-author-box__inner { display: flex; align-items: flex-start; gap: 32px; padding: 40px; }
.gp-author-box__photo {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gp-navy);
  box-shadow: 4px 4px 0 var(--gp-sky);
}
.gp-author-box__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-author-box__content { flex: 1 1 0%; min-width: 0; }
.gp-author-box__header {
  display: flex;
  /* label row sits above; name + LinkedIn share this row */
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.gp-author-box__heading { min-width: 0; flex: 1 1 260px; }
.gp-author-box__labelrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; }
.gp-post-meta time,
.gp-author-box__date time { unicode-bidi: isolate; white-space: nowrap; }
.gp-author-box__label {
  display: inline-block;
  font-family: var(--gp-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-navy);
  background: #f3ecd8; /* page cream */
  padding: 3px 10px;
  border-radius: 20px;
}
.gp-author-box__date { font-family: var(--gp-sans); font-size: 12px; font-weight: 500; color: var(--gp-ink-soft); letter-spacing: 0.02em; }
.gp-author-box__date-dot { color: var(--gp-sky); font-weight: 700; font-size: 16px; line-height: 0; vertical-align: -1px; }
.gp-author-box__name {
  margin: 0 0 6px;
  font-family: var(--gp-serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--gp-navy);
}
.gp-author-box__name-link { color: inherit; text-decoration: none; }
a.gp-author-box__name-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gp-author-box__title,
.gp-author-box__licence {
  display: block;
  font-family: var(--gp-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.gp-author-box__licence { margin-top: 4px; font-size: 12px; text-transform: none; letter-spacing: 0.01em; }
.gp-author-box__bio { font-size: 15px; line-height: 1.65; color: var(--gp-ink); max-width: 620px; }
.gp-author-box__bio p { margin: 0 0 0.75em; }
.gp-author-box__bio p:last-child { margin-bottom: 0; }
.gp-author-box__linkedin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gp-navy);
  color: var(--gp-sky-tint);
  font-family: var(--gp-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 30px;
  border: 2px solid var(--gp-navy);
  white-space: nowrap;
  margin-top: 4px;
  transition: background 0.2s, color 0.2s;
}
.gp-author-box__linkedin:hover { background: var(--gp-sky-tint); color: var(--gp-navy); }
.gp-author-box__linkedin:focus-visible,
.gp-author-box__name-link:focus-visible { outline: 2px solid var(--gp-navy); outline-offset: 2px; }
.gp-author-box__linkedin-arrow { transition: transform 0.2s; }
.gp-author-box__linkedin:hover .gp-author-box__linkedin-arrow { transform: translate(2px, -2px); }

/* Arabic (RTL): uppercase/letter-spacing don't apply to Arabic script */
[dir="rtl"] .gp-author-box__photo { box-shadow: -4px 4px 0 var(--gp-sky); }
[dir="rtl"] .gp-author-box__linkedin-arrow { transform: scaleX(-1); }
[dir="rtl"] .gp-author-box__linkedin:hover .gp-author-box__linkedin-arrow { transform: scaleX(-1) translate(2px, -2px); }
[dir="rtl"] .gp-author-box__label,
[dir="rtl"] .gp-author-box__title,
[dir="rtl"] .gp-author-box__linkedin,
[dir="rtl"] .gp-post-meta__job { letter-spacing: 0; }

/* Tablet */
@media (max-width: 991px) {
  .gp-author-box__inner { padding: 32px; gap: 24px; }
  .gp-author-box__photo { width: 120px; height: 120px; }
}

/* Phones: stack and centre */
@media (max-width: 600px) {
  .gp-post-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gp-post-meta__dot { display: none; }
  .gp-post-meta__job { padding-inline-start: 0; }
  .gp-post-meta__job::before { display: none; }
  .gp-author-box__inner { flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; }
  .gp-author-box__header { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .gp-author-box__heading { flex: none; }
  .gp-author-box__labelrow { justify-content: center; }
  .gp-author-box__bio { max-width: none; }
}