/* ==========================================================================
   AME SO BEAUTY & WELLNESS — GLOBAL STYLESHEET
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset & base
   03. Typography primitives
   04. Layout primitives
   05. Buttons & links
   06. Icons & sprite
   07. Topbar
   08. Site header & navigation
   09. Hero
   10. Trust strip
   11. About
   12. Services
   13. Why choose us
   14. Stats
   15. Testimonials
   16. Steps / values
   17. FAQ
   18. CTA band
   19. Page hero (inner pages)
   20. Contact & form
   21. Footer
   22. Motion
   23. Responsive
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand — amber gold, sampled from the logo (#AF915F, hue 38deg) */
  --gold-50:  #faf6ee;
  --gold-100: #f2e9d8;
  --gold-200: #e4d3b3;
  --gold-300: #d2ba90;
  --gold-400: #bda070;
  --gold-500: #af915f; /* exact logo mean */
  --gold-600: #9a7842;
  --gold-700: #8f6d3b; /* 4.75:1 on white — safe button fill */
  --gold-800: #7a5a31; /* 6.30:1 on white — safe for text */

  /* Brand — deep bronze */
  --bronze-500: #6e5130;
  --bronze-700: #4e3a22;

  /* Neutrals — warmed to sit with the gold */
  --white:      #ffffff;
  --cream:      #fbf8f2;
  --cream-2:    #f4ede1;
  --ink:        #221d16;
  --ink-soft:   #3b332a;
  --body:       #5a5147;
  --muted:      #6e655a;
  --line:       #e8ddc9;
  --line-soft:  #f1e9da;
  --dark:       #1d1913;
  --dark-2:     #252019;
  --on-dark:    #d3cabd;
  --on-dark-2:  #aca290;

  /* Typography */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.25rem, 8vw, 7.25rem);

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(45, 30, 25, .05);
  --shadow-sm: 0 4px 16px -4px rgba(45, 30, 25, .10);
  --shadow-md: 0 16px 36px -14px rgba(45, 30, 25, .22);
  --shadow-lg: 0 34px 64px -26px rgba(45, 30, 25, .32);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .35s;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem; /* keeps anchors clear of the sticky header */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

strong { font-weight: 600; color: var(--ink); }

::selection { background: var(--gold-200); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 1rem;
  z-index: 300;
  padding: .8rem 1.4rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }


/* ==========================================================================
   03. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

.display  { font-size: clamp(2.5rem, 4.8vw, 4.1rem); line-height: 1.05; letter-spacing: -.025em; }
h1        { font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.08; letter-spacing: -.02em; }
h2        { font-size: clamp(1.95rem, 3.2vw, 2.9rem); letter-spacing: -.018em; }
h3        { font-size: 1.3rem; }
h4        { font-size: 1.0625rem; }

.lead {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.75;
  color: var(--body);
  max-width: 54ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.15rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }

.prose > * + * { margin-top: 1.1rem; }
.prose p { max-width: 62ch; }


/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--soft  { background: var(--cream); }
.section--tint  { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.section--plain { background: #fff; }

.section-head {
  max-width: 66ch;
  margin: 0 auto clamp(2.5rem, 4.5vw, 3.75rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head p:not(.eyebrow) { color: var(--muted); }
.section-head--left { margin-inline: 0; align-items: flex-start; text-align: left; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.25rem, 5vw, 4.5rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.center { text-align: center; }
.mt-lg { margin-top: 2.25rem; }


/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary { background: var(--gold-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--gold-800); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--gold-50); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--outline-light:hover .icon { transform: none; }

.btn--block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--gold-800);
  font-size: .9375rem;
  font-weight: 600;
}
.text-link .icon { transition: transform var(--dur) var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }


/* ==========================================================================
   06. ICONS & SPRITE
   ========================================================================== */

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ==========================================================================
   07. TOPBAR
   ========================================================================== */

.topbar {
  background: var(--dark);
  color: var(--on-dark);
  font-size: .8125rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
}
.topbar__item .icon { width: 16px; height: 16px; color: var(--gold-400); }
.topbar__links { display: flex; align-items: center; gap: 1.5rem; }
.topbar__links a { transition: color .2s var(--ease); }
.topbar__links a:hover { color: #fff; }


/* ==========================================================================
   08. SITE HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(45, 30, 25, .45);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 96px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  flex: none;
}
.brand__logo {
  display: block;
  height: 68px;
  width: auto;
  object-fit: contain;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.brand:hover .brand__logo { transform: scale(1.03); }
.brand__name {
  font-family: var(--serif);
  font-size: 2.05rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand__name em { font-style: italic; color: var(--gold-700); }
.brand__tag {
  margin-top: .42rem;
  padding-left: .32em;
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav__mobile-cta { display: none; }
.nav__link {
  position: relative;
  padding-block: .35rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
.header__phone .icon { color: var(--gold-700); }
.header__phone:hover { color: var(--gold-800); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   09. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(580px, 74vh, 720px);
  background: var(--cream);
  overflow: hidden;
}
/* Full-bleed background image + readability scrim (mirrors .cta__bg) */
.hero__bg {
  /* index.php sets `background-image` inline from the `hero_bg` image slot;
     this is only the fallback when that slot is empty. */
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: 74% center;
  background-repeat: no-repeat;
}
/* Dark scrim over the hero photo. Kept on a pseudo-element because index.php
   sets `background-image` inline on .hero__bg from the `hero_bg` image slot,
   and an inline declaration would wipe out an overlay declared here. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(0 0 0 / 15%) 0%, rgba(0, 0, 0, .48) 38%, rgba(0, 0, 0, .32) 62%, rgba(0, 0, 0, .20) 100%);
}
/* Light copy now sits on a dark scrim, so drop the old white glow. */
.hero__copy { color: #fff; }
.hero__copy .eyebrow { color: var(--gold-400); }
.hero__copy .hero__title { color: #fff; }
.hero__copy .hero__lead { color: rgba(255, 255, 255, .88); }
.hero__copy .hero__points { color: rgba(255, 255, 255, .92); border-top-color: rgba(255, 255, 255, .25); }
.hero__copy .hero__points .icon { color: var(--gold-400); }
.hero__copy .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero__copy .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
/* The form card is glassy; on a dark scrim it needs to be near-opaque. */
.hero__panel { background: rgba(255, 255, 255, .93); }
.hero__panel .hero__panel-title,
.hero__panel h2 { color: var(--ink); }
.hero__panel p { color: var(--body); }
.hero::after {
  content: "";
  position: absolute;
  right: -180px; top: -180px;
  width: 520px; height: 520px;
  border: 1px solid rgba(175, 145, 95, .18);
  border-radius: 50%;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(4rem, 9vw, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero__copy { max-width: 37rem; }
.hero__title { margin-bottom: 1.4rem; }
.hero__title em {
  position: relative;
  z-index: 0;
  font-style: italic;
  white-space: nowrap;
}
.hero__title em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.04em; right: -.04em;
  bottom: .04em;
  height: .2em;
  background: linear-gradient(90deg, var(--gold-200), rgba(228, 211, 179, .3));
}
.hero__lead { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 2rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero__points li {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: #ffffff;
}
.hero__points .icon { color: var(--gold-700); }

/* ---- Hero booking form panel — frosted glass so the photo reads through ---- */
.hero__panel {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.15rem);
  background: rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-lg);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(175, 145, 95, .18);
}
/* Fallback for browsers without backdrop-filter — keep text readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero__panel { background: rgba(255, 255, 255, .93); }
}
.hero__panel-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(175, 145, 95, .28);
}
.hero__panel-head .stars { color: var(--gold-400); }
.hero__panel-rating { font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.hero__panel-rating strong { color: var(--ink); }
.hero__panel-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -.01em;
}
.hero__panel-sub { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.hero-form { display: grid; gap: .9rem; margin-top: 1.4rem; }
/* Rows handle their own rhythm — drop the per-field margin inside the panel */
.hero-form .field { margin-bottom: 0; }
/* Date pickers render a dark calendar glyph, so pin the control to a light scheme */
.hero-form .control { color-scheme: light; }
/* Fields stay near-opaque so typed text is always legible over the glass */
.hero-form .control {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(175, 145, 95, .3);
}
.hero-form .control:focus {
  background: #fff;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(175, 145, 95, .22);
}
.hero__panel-note { font-size: .75rem; line-height: 1.5; color: var(--muted); text-align: center; }


/* ==========================================================================
   10. TRUST STRIP
   ========================================================================== */

.trust-wrap {
  position: relative;
  z-index: 3;
  margin-top: -3.25rem;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.7rem 1.5rem;
  border-right: 1px solid var(--line);
}
.trust__item:last-child { border-right: 0; }
.trust__icon {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-100);
  border-radius: 50%;
  background: var(--gold-50);
  color: var(--gold-700);
}
.trust__item strong { display: block; font-size: .9375rem; }
.trust__item span { font-size: .8125rem; line-height: 1.45; color: var(--muted); }


/* ==========================================================================
   11. ABOUT
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* Image collage: main portrait + offset secondary shot */
.about__media { position: relative; isolation: isolate; }
.about__img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.about__img-sub {
  position: absolute;
  z-index: 2;
  left: -2.25rem; bottom: -2.25rem;
  width: 44%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.about__frame {
  position: absolute;
  z-index: 0;
  right: -1.75rem; bottom: -1.75rem;
  width: 58%; height: 58%;
  border: 1px solid var(--gold-200);
  border-radius: var(--r-lg);
}
.about__badge {
  position: absolute;
  z-index: 3;
  top: 2.25rem; right: -1.75rem;
  padding: 1.15rem 1.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.about__badge strong { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--gold-700); }
.about__badge span { display: block; margin-top: .35rem; font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Pull quote */
.about__quote {
  position: relative;
  margin: 2.25rem 0 2rem;
  padding: 1.5rem 1.75rem 1.5rem 2.25rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.about__quote p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
}
.about__quote footer { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.about__quote footer .brand__name { font-size: 1.35rem; }
.about__quote footer strong { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-800); }

.check-list { display: grid; gap: .85rem; margin: 1.9rem 0 2.25rem; }
.check-list li { display: flex; align-items: flex-start; gap: .8rem; font-size: .9375rem; }
.check-list .icon { color: var(--gold-700); margin-top: 3px; }

/* Differentiator pillars */
.about__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.about__pillar { display: flex; gap: 1.1rem; }
.about__pillar .value__icon { width: 44px; height: 44px; margin: 0; border-radius: 50%; }
.about__pillar h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.about__pillar p { margin-top: .25rem; font-size: .875rem; color: var(--muted); }

.about-detail { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.about-detail img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.promise { text-align: center; }
.promise p:not(.eyebrow) { max-width: 62ch; margin-inline: auto; color: var(--muted); }


/* ==========================================================================
   12. SERVICES
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
/* 3-up grid is wide, so a portrait 4/5 image balloons to ~480px tall.
   Landscape 4/3 keeps the cards compact (~288px). */
.cards .card__media { aspect-ratio: 4 / 3; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Gold accent bar sweeps across the top edge on hover */
.card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-300), var(--gold-600));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--gold-200); }
.card:hover::before { transform: scaleX(1); }

.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
/* Bottom scrim so the index number reads over any photo */
.card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(29, 25, 19, 0), rgba(29, 25, 19, .5));
  pointer-events: none;
}
.card__num {
  position: absolute;
  z-index: 2;
  right: 1.1rem;
  bottom: .7rem;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
.card__body h3 { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.01em; }
.card__body p { flex: 1; font-size: .9rem; line-height: 1.7; color: var(--muted); }
/* Pill link with a circular arrow that fills gold on hover */
.card .card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-800);
}
.card .card__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-800);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card .card__arrow .icon { width: 17px; height: 17px; }
.card:hover .card__arrow { background: var(--gold-700); color: #fff; transform: translateX(4px); }


/* ==========================================================================
   13. WHY CHOOSE US
   ========================================================================== */

.why__grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.why__media { position: relative; padding-bottom: 2.5rem; padding-right: 2.5rem; }
/* Offset gold outline sitting behind the photo */
.why__frame {
  position: absolute;
  left: 1.75rem; bottom: 0; right: 0; top: 1.75rem;
  border: 1px solid var(--gold-300);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.why__media img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.why__badge {
  position: absolute;
  right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.3rem;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.why__badge .stars { color: var(--gold-400); }
.why__badge strong { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.why__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* Six reasons as a 2-up card grid — a single column list was far too tall */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.features li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .95rem;
  padding: 1.25rem 1.25rem 1.3rem;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.features li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-200);
}
.feature__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--gold-200);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--gold-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.features li:hover .feature__icon { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
.features strong { display: block; margin-bottom: .2rem; font-size: .9375rem; line-height: 1.35; color: var(--ink); }
.features p { font-size: .8125rem; line-height: 1.6; color: var(--muted); }


/* ==========================================================================
   14. STATS
   ========================================================================== */

.stats { background: var(--cream); border-block: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats__grid > li {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1rem;
  border-right: 1px solid var(--line);
}
.stats__grid > li:last-child { border-right: 0; }
.stats__grid strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold-700);
}
.stats__grid span { display: block; margin-top: .4rem; font-size: .875rem; color: var(--muted); }


/* ==========================================================================
   15. TESTIMONIALS
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. TESTIMONIALS
   -------------------------------------------------------------------------- */

.rating-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  padding: 1.1rem 1.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.rating-bar__score { display: flex; align-items: center; gap: .95rem; }
.rating-bar__score > strong { font-family: var(--serif); font-size: 2.35rem; line-height: 1; color: var(--gold-700); }
.rating-bar__score span { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--muted); }
.rating-bar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  padding-left: 2.25rem;
  border-left: 1px solid var(--line);
}
.rating-bar__tags li { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 500; color: var(--ink); }
.rating-bar__tags .icon { width: 15px; height: 15px; color: var(--gold-500); }

/* ------- Review carousel: every card sits in one horizontal row ------- */
.slider { position: relative; }
.slider__viewport {
  overflow: hidden;
  /* Bleed to the viewport edge so cards fade out instead of being cut hard */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  cursor: grab;
  touch-action: pan-y;
}
.slider__viewport:active { cursor: grabbing; }
.slider__track {
  display: flex;
  gap: 1.5rem;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.slider__viewport.is-dragging .slider__track { transition: none; }

/* 3 cards per view on desktop */
.slide {
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.15rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  margin: 10px 0;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.quote blockquote { position: relative; margin: 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.75; color: var(--ink-soft); }
.quote figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: .95rem; margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--line-soft); }
.quote__avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-800);
  font-size: .875rem;
  font-weight: 600;
}
.quote__name { display: block; font-size: .9375rem; color: var(--ink); }
.quote__meta { display: block; font-size: .8125rem; color: var(--muted); }
.quote__verified { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; font-size: .75rem; color: var(--muted); }
.quote__verified .icon { width: 14px; height: 14px; color: var(--gold-600); }
.stars { display: flex; gap: 2px; color: var(--gold-400); }
.stars .icon { width: 15px; height: 15px; }

/* ------- Controls ------- */
.slider__nav { display: flex; gap: .6rem; flex: none; }
.slider__btn {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity .2s var(--ease);
}
.slider__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.slider__btn:disabled { opacity: .35; cursor: not-allowed; }
.slider__btn:first-child .icon { transform: rotate(180deg); }

.slider__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.slider__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-200);
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.slider__dot:hover { background: var(--gold-300); }
.slider__dot[aria-current="true"] { width: 28px; border-radius: var(--r-pill); background: var(--gold-700); }

/* Section head becomes a row so the arrows sit beside the heading.
   A 1fr auto 1fr grid keeps the heading block optically centred on the page
   (the two equal side columns cancel each other out) while the arrows stay
   pinned to the right edge. Flexbox + space-between could not do this: it
   left the heading sitting in the left half of the screen. */
.section-head--slider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 2rem;
  text-align: center;
  max-width: none;
}
.section-head--slider .section-head__text { grid-column: 2; text-align: center; }
.section-head--slider .slider__nav { grid-column: 3; justify-self: end; align-self: end; }
.section-head--slider .eyebrow { justify-content: center; }


/* ==========================================================================
   16. STEPS & VALUES
   ========================================================================== */

.steps { position: relative; }
.step {
  position: relative;
  padding: 4.4rem 1.85rem 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.step__num {
  position: absolute;
  top: 1.6rem; left: 1.85rem;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.step p { margin-top: .6rem; font-size: .9375rem; color: var(--muted); }

.value {
  padding: 2.1rem 1.85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.value__icon {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--gold-50), var(--gold-100));
  color: var(--gold-800);
}
.value h3 { font-size: 1.1875rem; }
.value p { margin-top: .5rem; font-size: .9375rem; color: var(--muted); }


/* ==========================================================================
   17. FAQ
   ========================================================================== */

.faq { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: 1rem; }
.faq details {
  padding: 1.35rem 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 10px; height: 10px;
  flex: none;
  border-right: 2px solid var(--gold-700);
  border-bottom: 2px solid var(--gold-700);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { margin-top: .9rem; font-size: .9375rem; color: var(--muted); }


/* ==========================================================================
   18. CTA BAND
   ========================================================================== */

    .cta {
     position: relative;
     isolation: isolate;
     overflow: hidden;
     background: transparent;
     color: #fff;
   }
    .cta__bg {
      /* No colour wash over the photo. index.php sets `background-image`
         inline from the `cta_bg` image slot; this is only the fallback when
         that slot is empty. */
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: url("../images/cta-bg.png");
      background-size: cover;
      background-position: center;
    }
    /* Light copy sits directly on the photo, so add a gentle scrim to keep it
       readable without washing the image out. */
    .cta__bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgb(0 0 0 / 10%) 0%, rgba(0, 0, 0, .22) 40%, rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .09) 100%);
    }
.cta__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
    .cta .eyebrow { color: #ffffff; }
.cta h2 { color: #fff; max-width: 18ch; }
    .cta p {
    color: #ffffff;
    max-width: 48ch;
  }
.cta .hero__actions, .cta__actions { margin-top: 2rem; }
.cta__list {
  display: grid;
  gap: 1.05rem;
  padding: 1.75rem 1.9rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cta__list li { display: flex; align-items: flex-start; gap: 1rem; }
.cta__list .icon { color: var(--gold-400); margin-top: 2px; }
.cta__list strong { display: block; color: #fff; font-size: .9375rem; }
    .cta__list span {
    font-size: .8125rem;
    color: #ffffff;
  }


/* ==========================================================================
   19. PAGE HERO (INNER PAGES)
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--cream) 0%, #f8efe9 55%, var(--cream-2) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -140px; top: -190px;
  width: 440px; height: 440px;
  border: 1px solid rgba(175, 145, 95, .18);
  border-radius: 50%;
  pointer-events: none;
}
/* The hero shares .container, so it must KEEP the container width.
   Overriding max-width here would centre a narrow column and break the
   left alignment with every section below. Line length is capped on the
   children instead. */
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.page-hero h1 { margin-bottom: 1.1rem; max-width: 22ch; }
.page-hero p:not(.eyebrow) { max-width: 54ch; font-size: 1.0625rem; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin-bottom: 1.5rem; font-size: .8125rem; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: "/"; color: var(--gold-300); }
.breadcrumb a { transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold-800); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }


/* ==========================================================================
   20. CONTACT & FORM
   ========================================================================== */

.contact__grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.25rem; }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.contact-card .icon { color: var(--gold-700); margin-top: 3px; }
.contact-card strong { display: block; margin-bottom: .2rem; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-card p, .contact-card a { font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.contact-card a:hover { color: var(--gold-800); }

.hours-list { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.hours-list li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.hours-list li span:last-child { color: var(--muted); text-align: right; }

.form {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; }
.field__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.field__label .req { color: var(--gold-700); }
.control {
  width: 100%;
  padding: .9rem 1.05rem;
  font-size: .9375rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.control::placeholder { color: #a9a19d; }
.control:hover { border-color: var(--gold-200); }
.control:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(175, 145, 95, .18); }
select.control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6d3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 15px;
  cursor: pointer;
}
textarea.control { resize: vertical; min-height: 135px; }
.form__note { margin-top: 1rem; font-size: .8125rem; color: var(--muted); }
.form-status {
  display: none;
  margin-top: 1.15rem;
  padding: .95rem 1.15rem;
  font-size: .875rem;
  color: var(--gold-800);
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-sm);
}
.form-status.is-visible { display: block; }


/* ==========================================================================
   21. FOOTER
   ========================================================================== */

.footer { position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark); }
.footer::after {
  content: "";
  position: absolute;
  left: -180px; bottom: -240px;
  width: 420px; height: 420px;
  border: 1px solid rgba(198, 154, 92, .16);
  border-radius: 50%;
  pointer-events: none;
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 5rem);
}
.footer .brand { align-items: flex-start; }
.footer .brand__logo { height: 80px; }
.footer .brand__name { color: #fff; }
.footer .brand__tag { color: var(--gold-400); padding-left: 0; }
.footer__brand p { margin-top: 1.25rem; max-width: 34ch; font-size: .9375rem; line-height: 1.8; color: var(--on-dark-2); }

.footer h3 {
  margin-bottom: 1.4rem;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
}
.footer__links li + li { margin-top: .7rem; }
.footer__links a { font-size: .9375rem; color: var(--on-dark-2); transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer__links a:hover { color: #fff; padding-left: 4px; }

.footer__contact li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; line-height: 1.7; color: var(--on-dark-2); }
.footer__contact li + li { margin-top: .8rem; }
.footer__contact .icon { width: 18px; height: 18px; margin-top: 4px; color: var(--gold-400); }
.footer__contact a:hover { color: #fff; }

.socials { display: flex; gap: .6rem; margin-top: 1.75rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.socials a:hover { background: var(--gold-500); border-color: var(--gold-500); color: #fff; transform: translateY(-2px); }

.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8125rem;
  color: #8d8481;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__bottom a { color: #8d8481; transition: color .2s var(--ease); }
.footer__bottom a:hover { color: #fff; }


/* ==========================================================================
   22. MOTION
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .header__phone { display: none; }
  .nav { gap: 1.6rem; }
}

@media (max-width: 1080px) {
  /* Scrim goes near-solid so the copy stays readable over the photo */
  .hero { min-height: 0; }
  .hero__bg {
    background-image: url("../images/hero-bg.jpg");
    background-position: 68% center;
  }
  /* Copy stacks over the photo on small screens, so deepen the scrim. */
  .hero__bg::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .58) 60%, rgba(0, 0, 0, .48) 100%);
  }
  .hero__inner {
    padding-block: clamp(3rem, 8vw, 4.5rem);
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__copy { max-width: 34rem; }
  .hero__panel { max-width: 32rem; box-shadow: var(--shadow-md); }
  /* 3-up is already the base; at tablet width drop to a clean 2-up */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* About collage: pull the offset elements back inside the column */
  .about__frame { right: -1rem; bottom: -1rem; }
  .about__img-sub { left: -1rem; bottom: -1rem; width: 40%; }
  .about__badge { right: -1rem; top: 1.5rem; }
}

@media (max-width: 1024px) {
  .header__inner { min-height: 86px; }
  .brand__logo { height: 56px; }
  .nav-toggle { display: flex; }
  .header__actions .btn { display: none; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav__link { padding-block: .95rem; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--gold-800); }
  .nav .btn { margin-top: 1.25rem; }
  .nav__mobile-cta { display: inline-flex; }

  .about__grid, .about-detail, .why__grid, .contact__grid, .cta__inner, .grid-2 { grid-template-columns: 1fr; }
  .about-detail img, .why__media img { aspect-ratio: 16 / 11; }
  .cta__inner { gap: 2.5rem; }
  /* 2 reviews per view on tablet */
  .slide { flex-basis: calc((100% - 1.5rem) / 2); }
  .rating-bar { border-radius: var(--r-md); justify-content: flex-start; }
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-wrap { margin-top: -2.5rem; }
  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item:nth-child(2n) { border-right: 0; }
  .trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__grid > li:nth-child(2n) { border-right: 0; }
  .stats__grid > li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .topbar__item:nth-child(2) { display: none; }
  /* Six reason cards go full width once the copy column is a single column */
  .features { grid-template-columns: 1fr; }
  .why__media { padding-bottom: 1.75rem; padding-right: 1.75rem; }
  .why__frame { left: 1.1rem; top: 1.1rem; }
}

@media (max-width: 620px) {
  .topbar__inner { justify-content: center; }
  /* CTA removed — only the phone number remains here, so drop the whole group */
  .topbar__links { display: none; }
  .hero__points { gap: .7rem 1.25rem; }
  .hero__actions .btn { width: 100%; }
  .hero__panel { padding: 1.35rem; }
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.25rem 1.35rem; }
  .trust__item:last-child { border-bottom: 0; }
  .cards, .stats__grid, .footer__inner, .contact-cards, .form__row { grid-template-columns: 1fr; }
  /* 1 review per view on phones, arrows centred under the heading */
  .slide { flex-basis: 100%; }
  .section-head--slider { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-head--slider .section-head__text,
  .section-head--slider .slider__nav { grid-column: 1; justify-self: center; align-self: auto; }
  .slider__btn { width: 44px; height: 44px; }
  .stats__grid > li { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats__grid > li:last-child { border-bottom: 0; }
  .card__media { aspect-ratio: 16 / 11; }
  .about__grid, .about-detail { gap: 3.25rem; }
  .about__pillars { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Collapse the collage to a single image so nothing overlaps the copy */
  .about__img { aspect-ratio: 4 / 3; }
  .about__img-sub, .about__frame { display: none; }
  .about__badge {
    position: static;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    text-align: left;
  }
  .brand__logo { height: 50px; }
  .about__badge { position: static; margin-top: 1rem; display: flex; align-items: center; gap: 1rem; text-align: left; }
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { width: 100%; }
  .footer__bottom { flex-direction: column; text-align: center; }
}