/* =============================================================
   inSynergy Wellness — Stylesheet
   Table of contents:
   1. Design tokens
   2. Reset & base
   3. Typography utilities
   4. Layout utilities
   5. Buttons
   6. Navigation
   7. Hero
   8. Synergy mark (signature graphic)
   9. Philosophy
   10. Meet Loral
   11. Coaching services
   12. Facility
   13. Process
   14. Testimonials
   15. FAQ accordion
   16. Contact / CTA
   17. Footer
   18. Scroll-reveal animation
   19. Responsive breakpoints
   20. Reduced motion & accessibility
============================================================= */


/* -------------------------------------------------------------
   1. Design tokens
------------------------------------------------------------- */
:root {
  /* Colour palette */
  --color-black: #0a0a0a;
  --color-charcoal: #171614;
  --color-charcoal-light: #232220;
  --color-warm-grey: #8c8579;
  --color-warm-grey-light: #b9b3a8;
  --color-fog: #f5f3ef;
  --color-white: #ffffff;
  --color-gold: #c0962d;
  --color-gold-light: #d4ac52;
  --color-gold-soft: rgba(192, 150, 45, 0.14);
  --color-line: rgba(10, 10, 10, 0.1);
  --color-line-on-dark: rgba(245, 243, 239, 0.14);

  /* Typography */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (fluid) */
  --fs-display: clamp(2.75rem, 3vw + 2rem, 5.5rem);
  --fs-h2: clamp(2.1rem, 1.6vw + 1.6rem, 3.4rem);
  --fs-h3: clamp(1.3rem, 0.6vw + 1.1rem, 1.65rem);
  --fs-lede: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Layout */
  --container-max: 1240px;
  --container-narrow-max: 820px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-standard: 0.7s;
}

/* -------------------------------------------------------------
   2. Reset & base
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-charcoal);
  background-color: var(--color-fog);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, p, blockquote, figure { margin: 0; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.8rem 1.5rem;
  z-index: 1000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Visible keyboard focus throughout */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}


/* -------------------------------------------------------------
   3. Typography utilities
------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.eyebrow--on-dark { color: var(--color-gold-light); }

.section__heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-black);
  max-width: 18ch;
}
.section__heading--on-dark { color: var(--color-white); }

.section__lede {
  font-size: var(--fs-lede);
  font-weight: 400;
  color: var(--color-warm-grey);
  max-width: 58ch;
  margin-top: var(--space-md);
}
.section__lede--on-dark { color: var(--color-warm-grey-light); }

.section__intro { margin-bottom: var(--space-xl); }


/* -------------------------------------------------------------
   4. Layout utilities
------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.container--narrow { max-width: var(--container-narrow-max); }

.section {
  padding-block: var(--space-2xl);
  position: relative;
}
.section--dark {
  background-color: var(--color-charcoal);
  color: var(--color-fog);
}


/* -------------------------------------------------------------
   5. Buttons
------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 0.35s var(--ease-standard),
              color 0.35s var(--ease-standard),
              border-color 0.35s var(--ease-standard),
              transform 0.35s var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--gold {
  background-color: var(--color-gold);
  color: var(--color-black);
}
.btn--gold:hover { background-color: var(--color-gold-light); }

.btn--ghost-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(245, 243, 239, 0.4);
}
.btn--ghost-light:hover {
  border-color: var(--color-white);
  background-color: rgba(245, 243, 239, 0.08);
}


/* -------------------------------------------------------------
   6. Navigation
------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  padding-block: 1.1rem;
  background-color: var(--color-black);
}

.nav {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The logo SVG carries its own gold fill, so it reads correctly against
   both the transparent hero and the solid scrolled header state — no
   colour inversion needed. */
.nav__logo-img { filter: none; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-white);
  position: relative;
  padding-bottom: 4px;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 0.3s var(--ease-standard);
}
.nav__link:hover::after { width: 100%; }

.nav__cta {
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav__toggle-line {
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard);
}

/* Dropdown nav items (trial header only — not used by the live
   nav, so these rules have zero effect unless header-trial.php is
   the one actually included on a given page). */
.nav__item--has-dropdown {
  position: relative;
}
.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav__dropdown-arrow {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-gold-light);
  border-bottom: 1.5px solid var(--color-gold-light);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-standard);
  margin-top: -3px;
}
.nav__item--has-dropdown.is-open .nav__dropdown-arrow {
  transform: rotate(225deg);
  margin-top: 3px;
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background-color: var(--color-charcoal);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
}
.nav__item--has-dropdown.is-open .nav__dropdown-menu {
  display: flex;
}
.nav__dropdown-link {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-warm-grey-light);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}
.nav__dropdown-link:hover {
  background-color: var(--color-gold-soft);
  color: var(--color-white);
}


/* -------------------------------------------------------------
   7. Hero
------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-black);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.25) 35%,
    rgba(10, 10, 10, 0.4) 65%,
    rgba(10, 10, 10, 0.92) 100%
  );
}

.hero__synergy-mark {
  position: absolute;
  top: 14%;
  right: 6%;
  width: min(28vw, 320px);
  z-index: 2;
  opacity: 0.5;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-2xl);
  color: var(--color-white);
}

.hero__headline {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  max-width: 16ch;
}
.hero__headline-dot { color: var(--color-gold); }

.hero__subcopy {
  margin-top: var(--space-md);
  font-size: var(--fs-lede);
  color: var(--color-warm-grey-light);
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px;
  height: 48px;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-gold) 0%, transparent 100%);
  animation: scrollPulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0% { opacity: 0.2; transform: scaleY(0.3); }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.2; transform: scaleY(0.3); }
}

/* Compact hero variant — used on supporting/interior pages (e.g.
   Group Training) where a full-height hero would push content too
   far down, especially on mobile. Same visual treatment (image +
   scrim + overlaid text) as the homepage hero, just shorter and
   with a smaller headline scale suited to a secondary page. */
.hero--compact {
  min-height: 62vh;
}
.hero--compact .hero__headline {
  font-size: var(--fs-h2);
  max-width: 20ch;
}


/* -------------------------------------------------------------
   8. Synergy mark (signature graphic)
------------------------------------------------------------- */
.synergy-svg__tri {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.synergy-svg__node {
  fill: var(--color-gold);
}
.synergy-svg__line {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.4s var(--ease-standard);
}
.pillars__diagram.is-visible .synergy-svg__line[data-line="1"] { stroke-dashoffset: 0; transition-delay: 0.1s; }
.pillars__diagram.is-visible .synergy-svg__line[data-line="2"] { stroke-dashoffset: 0; transition-delay: 0.4s; }
.pillars__diagram.is-visible .synergy-svg__line[data-line="3"] { stroke-dashoffset: 0; transition-delay: 0.7s; }

/* Morph: once the triangle has fully drawn itself in (last line
   finishes at 0.7s delay + 1.4s draw = 2.1s), it fades away while a
   single unifying ring grows in behind it — three lines becoming
   one shape, echoing "Three foundations. One practice." */
.synergy-svg__triangle-group {
  opacity: 1;
}
.pillars__diagram.is-visible .synergy-svg__triangle-group {
  animation: synergyTriangleFadeOut 0.9s var(--ease-standard) 2.3s forwards;
}
@keyframes synergyTriangleFadeOut {
  to { opacity: 0; }
}
.synergy-svg__mark-segment {
  fill: var(--color-gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
}
/* Static use (e.g. the hero overlay) — always visible, no entrance
   animation, since that choreography belongs to the Philosophy
   section's triangle-to-mark morph only. */
.synergy-svg__mark-segment--static {
  opacity: 1;
  transform: none;
}
.pillars__diagram.is-visible .synergy-svg__mark-segment[data-segment="1"] {
  animation: synergyMarkIn 0.75s var(--ease-standard) 2.3s forwards;
}
.pillars__diagram.is-visible .synergy-svg__mark-segment[data-segment="2"] {
  animation: synergyMarkIn 0.75s var(--ease-standard) 2.5s forwards;
}
.pillars__diagram.is-visible .synergy-svg__mark-segment[data-segment="3"] {
  animation: synergyMarkIn 0.75s var(--ease-standard) 2.7s forwards;
}
@keyframes synergyMarkIn {
  to { opacity: 1; transform: scale(1); }
}

.pillars__diagram { display: flex; justify-content: center; }
.synergy-svg--large { width: min(100%, 340px); }


/* -------------------------------------------------------------
   9. Philosophy
------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-2xl);
  align-items: center;
}

.pillars__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pillar {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}
.pillar__index {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}
.pillar__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}
.pillar__copy {
  color: var(--color-warm-grey);
  max-width: 52ch;
}


/* -------------------------------------------------------------
   10. Meet Loral
------------------------------------------------------------- */
.loral__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.loral__media img {
  border-radius: var(--radius-md);
  width: 100%;
}

.loral__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--space-md) 0 var(--space-lg);
}
.credential {
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-line-on-dark);
  border-radius: 999px;
  color: var(--color-warm-grey-light);
}

.loral__bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-warm-grey-light);
  max-width: 60ch;
}
.loral__bio p:first-child {
  color: var(--color-fog);
  font-size: var(--fs-lede);
  font-weight: 500;
}


/* -------------------------------------------------------------
   11. Coaching services
------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.service-card {
  display: flex;
  flex-direction: column;
}
.service-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  aspect-ratio: 4 / 5;
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-standard);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }

/* Coaching card images as links to "How it works" / Group Training
   (trial page only) — same blur + overlay + rising-text treatment
   as the sauna image. Chained under .service-card:hover to match
   (and safely out-specificity) the plain hover-zoom rule above, so
   the live site's coaching cards — which don't use this modifier
   class — are completely unaffected. */
.service-card__media--hover {
  position: relative;
  display: block;
}
.service-card:hover .service-card__media--hover img,
.service-card__media--hover:focus-visible img {
  filter: blur(7px);
  transform: scale(1.08);
}
.service-card__hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(10, 10, 10, 0.45);
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}
.service-card:hover .service-card__hover-overlay,
.service-card__media--hover:focus-visible .service-card__hover-overlay {
  opacity: 1;
}
.service-card__hover-overlay-text {
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease-standard) 0.1s, opacity 0.5s var(--ease-standard) 0.1s;
}
.service-card:hover .service-card__hover-overlay-text,
.service-card__media--hover:focus-visible .service-card__hover-overlay-text {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile scroll-glow cue — the actual glow only appears within the
   mobile media query below; this just wires up the transition so
   it fades smoothly rather than snapping on/off. Harmless on
   desktop since no glow value is ever applied there. */
.service-card__media--hover,
.facility-gallery__item--sauna {
  transition: box-shadow 0.7s var(--ease-standard);
}

.service-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.service-card__copy {
  color: var(--color-warm-grey);
  font-size: 0.95rem;
}


/* -------------------------------------------------------------
   12. Facility
------------------------------------------------------------- */
.facility-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.facility-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.facility-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facility-gallery__item--large {
  grid-column: span 2;
  grid-row: span 2;
}
.facility-gallery__item--wide {
  grid-column: span 2;
}

.equipment-list {
  border-top: 1px solid var(--color-line-on-dark);
  padding-top: var(--space-lg);
}
.equipment-list__title {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-md);
}
.equipment-list__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem 1.5rem;
  color: var(--color-warm-grey-light);
  font-size: 0.95rem;
}
.equipment-list__grid li {
  padding-left: 1rem;
  position: relative;
}
.equipment-list__grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 1px;
  background-color: var(--color-gold);
}

.facility__sauna-cta-btn {
  margin-top: var(--space-lg);
}

/* Sauna image — clickable link to the booking page, with a
   blur + dark overlay + rising text on hover (trial page only). */
.facility-gallery__item--sauna {
  position: relative;
  display: block;
}
.facility-gallery__item--sauna img {
  transition: filter 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);
}
.facility-gallery__item--sauna:hover img,
.facility-gallery__item--sauna:focus-visible img {
  filter: blur(7px);
  transform: scale(1.08);
}
.facility-gallery__sauna-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(10, 10, 10, 0.45);
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}
.facility-gallery__item--sauna:hover .facility-gallery__sauna-overlay,
.facility-gallery__item--sauna:focus-visible .facility-gallery__sauna-overlay {
  opacity: 1;
}
.facility-gallery__sauna-overlay-text {
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease-standard) 0.1s, opacity 0.5s var(--ease-standard) 0.1s;
}
.facility-gallery__item--sauna:hover .facility-gallery__sauna-overlay-text,
.facility-gallery__item--sauna:focus-visible .facility-gallery__sauna-overlay-text {
  transform: translateY(0);
  opacity: 1;
}


/* -------------------------------------------------------------
   13. Process
------------------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}
.process-step {
  border-top: 2px solid var(--color-black);
  padding-top: var(--space-sm);
}
.process-step__number {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}
.process-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.process-step__copy {
  color: var(--color-warm-grey);
  font-size: 0.92rem;
}


/* -------------------------------------------------------------
   14. Testimonials
------------------------------------------------------------- */
.testimonial-slider { position: relative; }
.testimonial-slider__track {
  display: flex;
  transition: transform 0.6s var(--ease-standard);
}
.testimonial {
  flex: 0 0 100%;
  max-width: 100%;
  padding-inline: 2px;
}
.testimonial__quote {
  font-size: clamp(1.3rem, 1.2vw + 1rem, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-white);
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial__quote.is-expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.testimonial__read-more {
  display: none;
  margin-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gold-light);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.testimonial__read-more.is-visible { display: inline-block; }
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-warm-grey-light);
}
.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-slider__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.testimonial-slider__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line-on-dark);
  color: var(--color-white);
  transition: border-color 0.3s var(--ease-standard), background-color 0.3s var(--ease-standard);
}
.testimonial-slider__btn:hover {
  border-color: var(--color-gold);
  background-color: var(--color-gold-soft);
}
.testimonial-slider__dots {
  display: flex;
  gap: 0.5rem;
}
.testimonial-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-line-on-dark);
  transition: background-color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
}
.testimonial-slider__dot.is-active {
  background-color: var(--color-gold);
  transform: scale(1.2);
}


/* -------------------------------------------------------------
   15. FAQ accordion
------------------------------------------------------------- */
.accordion__item {
  border-bottom: 1px solid var(--color-line);
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.5rem;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-black);
}
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-gold);
  transition: transform 0.3s var(--ease-standard);
}
.accordion__icon::before {
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  transform: translateY(-50%);
}
.accordion__icon::after {
  top: 0; left: 50%;
  width: 1.5px; height: 100%;
  transform: translateX(-50%);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-standard);
}
.accordion__panel p {
  color: var(--color-warm-grey);
  padding-bottom: 1.5rem;
  max-width: 60ch;
}


/* -------------------------------------------------------------
   16. Contact / CTA
------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
}
.cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.94) 20%,
    rgba(10, 10, 10, 0.55) 100%
  );
}

.cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contact-form {
  background-color: rgba(23, 22, 20, 0.6);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  backdrop-filter: blur(6px);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
}
.contact-form__field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-warm-grey-light);
}
.contact-form__field input,
.contact-form__field textarea {
  background-color: rgba(245, 243, 239, 0.06);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  color: var(--color-white);
  transition: border-color 0.3s var(--ease-standard);
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-gold);
}
.contact-form__field textarea { resize: vertical; }

/* Custom dropdown — replaces the native <select>, whose open option
   list is rendered by the browser/OS and can ignore author CSS
   entirely (some platforms force their own colors on it). Building
   our own trigger + listbox guarantees identical styling everywhere. */
.custom-select {
  position: relative;
}

.custom-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background-color: rgba(245, 243, 239, 0.06);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  color: var(--color-white);
  text-align: left;
  transition: border-color 0.3s var(--ease-standard);
}
.custom-select__trigger:hover {
  border-color: rgba(245, 243, 239, 0.3);
}
.custom-select.is-open .custom-select__trigger,
.custom-select__trigger:focus-visible {
  border-color: var(--color-gold);
}

.custom-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__arrow {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-gold-light);
  border-bottom: 1.5px solid var(--color-gold-light);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-standard);
  margin-top: -3px;
}
.custom-select.is-open .custom-select__arrow {
  transform: rotate(225deg);
  margin-top: 3px;
}

.custom-select__options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background-color: var(--color-charcoal-light);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  max-height: 220px;
  overflow-y: auto;
  padding: 0.35rem;
}
.custom-select__options[hidden] { display: none; }

.custom-select__option {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-warm-grey-light);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}
.custom-select__option:hover,
.custom-select__option.is-active {
  background-color: var(--color-gold-soft);
  color: var(--color-white);
}
.custom-select__option.is-selected {
  color: var(--color-gold-light);
  font-weight: 600;
}

.contact-form__submit {
  width: 100%;
  margin-top: var(--space-xs);
}
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.contact-form__status {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-gold-light);
  min-height: 1.2em;
}


/* -------------------------------------------------------------
   17. Footer
------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-warm-grey-light);
  padding-top: var(--space-2xl);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-line-on-dark);
}
.site-footer__logo { margin-bottom: var(--space-sm); }
.site-footer__tagline { max-width: 32ch; font-size: 0.92rem; }

.site-footer__heading {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}
.site-footer__list { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__list a { font-size: 0.92rem; transition: color 0.3s var(--ease-standard); }
.site-footer__list a:hover { color: var(--color-gold-light); }

.site-footer__address { font-style: normal; font-size: 0.92rem; margin-bottom: var(--space-sm); }
.site-footer__social { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer__social a { font-size: 0.92rem; transition: color 0.3s var(--ease-standard); }
.site-footer__social a:hover { color: var(--color-gold-light); }

.site-footer__bottom {
  padding-block: var(--space-md);
  font-size: 0.82rem;
  color: var(--color-warm-grey);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.site-footer__legal-links {
  display: flex;
  gap: 1.25rem;
}
.site-footer__legal-links a {
  transition: color 0.3s var(--ease-standard);
}
.site-footer__legal-links a:hover { color: var(--color-gold-light); }


/* -------------------------------------------------------------
   17b. Legal pages (Privacy Policy, Terms of Service)
------------------------------------------------------------- */
.legal-page {
  padding-block: var(--space-2xl);
}
.legal-page__container {
  max-width: var(--container-narrow-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.legal-page__updated {
  color: var(--color-warm-grey);
  font-size: 0.9rem;
  margin-bottom: var(--space-xl);
}
.legal-page__container h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: var(--space-xl) 0 var(--space-sm);
}
.legal-page__container h2:first-of-type { margin-top: 0; }
.legal-page__container p {
  color: var(--color-warm-grey);
  margin-bottom: var(--space-sm);
  max-width: 68ch;
}
.legal-page__container a { color: var(--color-gold); font-weight: 600; }
.legal-page__container ul {
  list-style: disc;
  padding-left: 1.4rem;
  color: var(--color-warm-grey);
  margin-bottom: var(--space-sm);
}
.legal-page__container li { margin-bottom: 0.4rem; }


/* -------------------------------------------------------------
   18. Scroll-reveal animation
------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-standard) var(--ease-standard),
              transform var(--duration-standard) var(--ease-standard);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* -------------------------------------------------------------
   19. Responsive breakpoints
------------------------------------------------------------- */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .equipment-list__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .pillars,
  .loral__grid,
  .cta__grid {
    grid-template-columns: 1fr;
  }
  .loral__media { order: -1; max-width: 360px; }
  .facility-gallery { grid-template-columns: repeat(2, 1fr); }
  .facility-gallery__item--large { grid-column: span 2; grid-row: span 1; aspect-ratio: 4/3; }
  .facility-gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 760px) {
  :root { --space-2xl: 5rem; --space-xl: 3.25rem; }

  .container { padding-inline: var(--space-md); }

  .nav__toggle { display: flex; }
  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100vh;
    width: min(80vw, 340px);
    background-color: var(--color-black);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-lg);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-standard);
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .nav__link { font-size: 1.1rem; }

  /* Dropdown items become simple inline expansion on mobile, since
     an absolute-positioned flyout doesn't make sense inside the
     fixed slide-out panel (trial header only). */
  .nav__item--has-dropdown { width: 100%; }
  .nav__dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0.5rem 0 0 1rem;
    width: 100%;
  }
  .nav__dropdown-link { font-size: 1rem; padding: 0.5rem 0.6rem; }

  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .services-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .process-steps { grid-template-columns: 1fr; gap: var(--space-lg); }
  .equipment-list__grid { grid-template-columns: repeat(2, 1fr); }
  .facility-gallery { grid-template-columns: 1fr; }
  .facility-gallery__item--large,
  .facility-gallery__item--wide { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }

  .contact-form__row { grid-template-columns: 1fr; }

  .hero__synergy-mark { display: none; }
  .hero--compact { min-height: 52vh; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Scroll-triggered gold glow — substitutes for the hover cue on
     touch devices, since there's no hover state to signal these
     images are clickable. Toggled by IntersectionObserver in
     script.js as each image travels through the screen. */
  .service-card__media--hover.is-scroll-glow,
  .facility-gallery__item--sauna.is-scroll-glow {
    box-shadow: 0 0 26px 8px rgba(192, 150, 45, 0.35);
  }
}

@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------
   20. Reduced motion & accessibility
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__scroll-line { animation: none; }
  .synergy-svg__line { transition: none; stroke-dashoffset: 0; }
  .synergy-svg__triangle-group { animation: none; opacity: 0; }
  .synergy-svg__mark-segment { animation: none; opacity: 1; transform: scale(1); }
  * { scroll-behavior: auto !important; }
}