/* ==========================================================================
   Meditarina Hair and Skin Clinic - Landing Page
   Palette sampled from the brand logo (leaf greens, sky-to-navy blues, gold)
   Type: Primary "Span" (serif display) / Secondary "Google Sans" (UI + body)
         Web-safe fallbacks: Newsreader / DM Sans
   ========================================================================== */

/* --------------------------------------------------------------------------
   LICENSED FONTS
   The brief specifies Span (display) and Google Sans (UI). Neither is served
   by Google Fonts, so drop the licensed files into assets/fonts/ and
   uncomment the block below. Until then the page renders in the fallbacks
   declared in --font-display / --font-ui (Newsreader and DM Sans), which are
   loaded from Google Fonts in index.html.

@font-face {
  font-family: 'Span';
  src: url('assets/fonts/Span-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Span';
  src: url('assets/fonts/Span-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand: navy (wordmark + face gradient) --- */
  --navy-900: #101C36;
  --navy-800: #1B2F6B;
  --navy-700: #24399A;
  --navy:     #2F4A9B;
  --navy-400: #5C79C6;

  /* --- Brand: blue (face highlight) --- */
  --blue-600: #2A8FC4;
  --blue:     #3FA9DC;
  --blue-300: #8FD9F2;
  --blue-50:  #EEF7FC;

  /* --- Brand: green (leaves) --- */
  --green-900: #145F10;
  --green-800: #18780C;
  --green-700: #238F1B;
  --green:     #4FAE22;
  --green-400: #6CC018;
  --lime:      #9BD91F;
  --green-50:  #F1F8ED;

  /* --- Brand: gold (florets) --- */
  --gold: #C6B024;

  /* --- Neutrals --- */
  --ink:      #101C36;
  --body:     #4E5B75;
  --muted:    #7C88A0;
  --line:     #E4EAF2;
  --line-soft:#EFF3F8;
  --surface:  #FFFFFF;
  --bg-soft:  #F6FAF6;
  --bg-blue:  #F4F8FC;

  /* --- Gradients --- */
  --grad-brand: linear-gradient(135deg, var(--green-700) 0%, var(--blue) 52%, var(--navy) 100%);
  --grad-cta:   linear-gradient(120deg, var(--navy-700) 0%, var(--navy) 45%, var(--blue-600) 100%);
  --grad-leaf:  linear-gradient(130deg, var(--green-800) 0%, var(--green) 55%, var(--lime) 100%);

  /* --- Type --- */
  --font-display: 'Span', 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Google Sans', 'Google Sans Text', 'DM Sans', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- Rhythm --- */
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(68px, 8vw, 124px);
  --radius-lg: 24px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-btn: 999px;   /* every button shares this */
  --header-h: 76px;
  --btn-h: 50px;         /* and this height */

  /* --- Elevation (soft, clinical, never heavy) --- */
  --sh-sm: 0 1px 2px rgba(16, 28, 54, .05), 0 4px 14px rgba(16, 28, 54, .05);
  --sh-md: 0 2px 6px rgba(16, 28, 54, .05), 0 14px 34px rgba(16, 28, 54, .07);
  --sh-lg: 0 4px 12px rgba(16, 28, 54, .06), 0 28px 60px rgba(16, 28, 54, .10);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, .84, .30, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.68;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

h1 { font-size: clamp(1.82rem, 1.28rem + 2.05vw, 2.85rem); line-height: 1.14; }
h2 { font-size: clamp(1.72rem, 1.15rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.06rem, .98rem + .35vw, 1.25rem); letter-spacing: -.01em; }
h4 { font-size: .95rem; }
p  { margin: 0; }

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

::selection { background: var(--green-400); color: #fff; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed; top: -60px; left: 20px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-size: .85rem; transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

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

.section { padding-block: var(--section-y); position: relative; }
.section-soft { background: var(--bg-soft); }

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-800); margin-bottom: 18px;
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad-leaf); flex: none;
}
.eyebrow-light { color: var(--blue-300); }
.eyebrow-light .eyebrow-dot { background: var(--lime); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .eyebrow { justify-content: center; }

.grid-3 {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--grad-cta);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: .95rem; font-weight: 600; letter-spacing: .005em;
  min-height: var(--btn-h); padding: 0 28px;
  border-radius: var(--radius-btn); border: 1px solid transparent;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease);
}
.btn:hover svg { transform: translateX(3px); }
.btn-sm { --btn-h: 44px; padding: 0 20px; font-size: .875rem; white-space: nowrap; }
.btn-block { width: 100%; }

.btn-primary { background-image: var(--grad-cta); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--green-800) 0%, var(--green-700) 55%, var(--green) 100%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost svg { width: 16px; height: 16px; }
.btn-ghost:hover { border-color: var(--navy-400); background: var(--blue-50); transform: translateY(-2px); }
.btn-ghost:hover svg { transform: none; }


.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--green); color: var(--green-800); transform: translateY(-2px); }
.btn-outline:hover svg { transform: none; }

.link-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 600; color: var(--navy);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-cta svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.link-cta:hover { gap: 12px; color: var(--green-800); }

/* ---------- Header ---------- */
/* Transparent over the hero, white once the hero has scrolled past. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease-soft), border-color .45s var(--ease-soft),
              box-shadow .45s var(--ease-soft), backdrop-filter .45s var(--ease-soft);
}
.site-header.is-solid {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 6px 24px rgba(16,28,54,.05);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h); padding-block: 8px;
}
.brand { position: relative; display: block; line-height: 0; }
.brand img {
  width: clamp(72px, 7vw, 92px); height: auto;
  transition: opacity .45s var(--ease-soft);
}
.brand .brand-light { position: absolute; top: 0; left: 0; }
.site-header.is-solid .brand-light,
.site-header:not(.is-solid) .brand-dark { opacity: 0; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Over the hero photo the CTA goes white, so it reads against the picture.
   It returns to the brand gradient once the bar turns solid. */
.site-header:not(.is-solid) .header-actions .btn-primary {
  background-image: none; background-color: #fff; color: var(--navy-900);
  box-shadow: 0 8px 24px rgba(5,12,30,.28);
}
.site-header:not(.is-solid) .header-actions .btn-primary::after { display: none; }
.site-header:not(.is-solid) .header-actions .btn-primary:hover { background-color: var(--blue-50); }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(540px, 53vw, 900px);
  padding-block: calc(var(--header-h) + clamp(32px, 3.4vw, 56px)) clamp(48px, 5vw, 80px);
  background: var(--navy-900);
}

/* inset 0, not a taller overflow, so the banner is cropped as little as
   possible. The parallax drift is off for the same reason. */
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg > picture { display: block; width: 100%; height: 100%; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0; margin: 0; aspect-ratio: auto;
}

/* Just enough darkening under the headline to keep white text legible, and
   almost none over the right of the frame so the photograph reads clearly. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(9,18,42,.86) 0%, rgba(9,18,42,.66) 34%,
      rgba(9,18,42,.28) 62%, rgba(9,18,42,.08) 100%),
    linear-gradient(to top, rgba(9,18,42,.42) 0%, rgba(9,18,42,0) 38%);
}

.hero-inner { position: relative; }

.hero-copy { max-width: 46rem; }
.hero-copy h1 { color: #fff; }
.h1-accent { display: block; color: var(--blue-300); }
.hero-copy .lede {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(1rem, .95rem + .28vw, 1.115rem); color: rgba(255,255,255,.80);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Trust bar: one glass strip, three columns divided by hairlines */
.hero-trust { position: relative; }
.trust-bar {
  margin-top: clamp(30px, 3.6vw, 48px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
}
.trust-bar li {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2.2vw, 30px);
  transition: background-color .4s var(--ease-soft);
}
.trust-bar li + li { border-left: 1px solid rgba(255,255,255,.12); }
.trust-bar li:hover { background: rgba(255,255,255,.05); }

.trust-icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(155,217,31,.16); border: 1px solid rgba(155,217,31,.34);
}
.trust-icon svg {
  width: 19px; height: 19px; fill: none; stroke: var(--lime);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.trust-text { display: block; font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.62); }
.trust-text strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.02rem; letter-spacing: -.005em; color: #fff; margin-bottom: 2px;
}

.check-list { display: grid; gap: 11px; }
.check-list li {
  position: relative; padding-left: 27px; font-size: .885rem; color: var(--body); line-height: 1.5;
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .1em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--grad-leaf);
}
.check-list li::after {
  content: ""; position: absolute; left: 4.4px; top: .42em;
  width: 8px; height: 4.4px; border-left: 1.7px solid #fff; border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 2.6vw, 34px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: #DDE6F1; }

.card-concern { padding-top: 30px; }
.card-index {
  font-family: var(--font-display); font-size: .95rem; color: var(--green-700);
  letter-spacing: .06em; display: block; margin-bottom: 16px;
}
.card-concern h3 { margin-bottom: 10px; }
.card-concern p { font-size: .93rem; }

/* The closing card runs the full width beneath the three concerns */
.card-note {
  margin-top: clamp(16px, 2vw, 24px);
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vw, 30px);
  background: linear-gradient(120deg, var(--green-50) 0%, var(--blue-50) 100%);
  border-color: #E2EDE0;
}
.note-icon {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid #DDEAD6; box-shadow: var(--sh-sm);
}
.note-icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--green-700);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.card-note h3 { margin-bottom: 6px; }
.card-note p { font-size: .93rem; max-width: 62ch; }
.card-note .link-cta { white-space: nowrap; }

/* Treatments */
.grid-treatments .card { display: flex; flex-direction: column; gap: 18px; }
.card-photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: -2px;
}
.card-treatment { background: var(--surface); }
.treatment-top { display: grid; gap: 10px; }
.card-treatment > p { font-size: .93rem; flex: 1; }
.tag {
  justify-self: start; display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.tag-hair { background: var(--green-50); color: var(--green-800); }
.tag-skin { background: var(--blue-50); color: var(--navy-700); }
.small-print {
  margin-top: 26px; font-size: .83rem; color: var(--muted); text-align: center;
}

/* ---------- Why ---------- */
.why-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.why-head { position: sticky; top: 118px; }
.why-sub { margin-top: 18px; margin-bottom: 30px; font-size: 1.02rem; max-width: 30em; }

.why-list { display: grid; }
.why-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: 24px 0; border-bottom: 1px solid var(--line-soft);
}
.why-list li:first-child { padding-top: 0; }
.why-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.why-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--green-50); border: 1px solid #DEEDD6;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.why-icon svg {
  width: 15px; height: 15px; fill: none; stroke: var(--green-700);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .4s var(--ease);
}
.why-list li:hover .why-icon { background: var(--grad-leaf); border-color: transparent; transform: scale(1.06); }
.why-list li:hover .why-icon svg { stroke: #fff; }
.why-list h3 { margin-bottom: 6px; }
.why-list p { font-size: .93rem; }

/* ---------- Process ---------- */
.section-navy {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(63,169,220,.22) 0%, rgba(63,169,220,0) 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(108,192,24,.16) 0%, rgba(108,192,24,0) 55%),
    var(--navy-900);
}
.section-navy h2 { color: #fff; }

.steps {
  position: relative; display: grid; gap: clamp(20px, 2.4vw, 28px);
  grid-template-columns: repeat(4, 1fr);
}
.steps::before {
  content: ""; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.24), rgba(255,255,255,.05));
}
.step { position: relative; padding-top: 0; }
.step-num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 20px;
  font-family: var(--font-display); font-size: 1.05rem; color: #fff;
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,.22);
  transition: background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.step:hover .step-num {
  background: var(--grad-leaf); border-color: transparent; transform: translateY(-3px);
}
.step h3 { color: #fff; margin-bottom: 8px; }
.step p { font-size: .9rem; color: rgba(255,255,255,.66); }

/* ---------- Location ---------- */
.location-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 60px); align-items: center;
}
.location-copy > p { margin-top: 20px; font-size: 1rem; max-width: 42em; }

.town-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.town-chips li {
  font-size: .8rem; font-weight: 500; color: var(--ink);
  padding: 8px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.town-chips li:first-child {
  background: var(--green-50); border-color: #DCEBD3; color: var(--green-900); font-weight: 600;
}
.town-chips li:hover { border-color: var(--green); color: var(--green-800); transform: translateY(-2px); }

.location-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn-outline svg { fill: none; stroke: var(--green-700); stroke-width: 1.8; }

/* Map. The styled block underneath shows through if the embed is blocked. */
.location-map {
  position: relative; overflow: hidden; width: 100%;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 3; min-height: 340px;
  background: linear-gradient(140deg, var(--green-50) 0%, var(--blue-50) 100%);
}
.location-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1;
  pointer-events: none;
}

/* The whole map is one link. It also hides Google's own overlay controls. */
.map-link { position: absolute; inset: 0; z-index: 2; display: block; }

/* Styled to read like a Google Maps place card. Roboto where it exists,
   Arial elsewhere, which is what Maps itself falls back to. */
.map-card {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
  max-width: 356px;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 16px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Clicks pass through to the map link underneath; only the two round
     buttons take their own click. */
  pointer-events: none;
}
.map-card-body { min-width: 0; flex: 1; }

.map-card-name {
  font-size: .97rem; font-weight: 500; line-height: 1.35;
  color: #202124; letter-spacing: normal; margin-bottom: 5px;
}
.map-card-address {
  font-size: .84rem; line-height: 1.45; color: #5f6368; letter-spacing: normal;
}
.map-card-rating {
  display: flex; align-items: center; gap: 5px;
  margin-top: 11px; font-size: .84rem; color: #5f6368;
}
.map-card-score { color: #202124; }
.map-card-stars { color: #e7711b; }
.map-card-count { text-decoration: underline; }

.map-card-actions { display: flex; gap: 9px; flex: none; }
.map-chip {
  pointer-events: auto;
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #e8f0fe;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.map-chip svg {
  width: 17px; height: 17px; fill: none; stroke: #1a73e8;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.map-chip:hover { background: #d2e3fc; }
/* color drives the arrow, because the path paints with currentColor */
.map-chip-dir { background: #1a73e8; color: #fff; }
.map-chip-dir svg { stroke: none; fill: currentColor; width: 18px; height: 18px; }
.map-chip-dir:hover { background: #1765cc; box-shadow: 0 1px 3px rgba(60,64,67,.4); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq-item.is-open { border-color: #D9E6F2; box-shadow: var(--sh-sm); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 21px clamp(20px, 2.4vw, 28px);
  font-family: var(--font-display); font-size: clamp(1rem, .96rem + .22vw, 1.11rem);
  color: var(--ink); letter-spacing: -.01em; line-height: 1.4;
  transition: color .3s var(--ease);
}
.faq-q:hover { color: var(--navy); }
.faq-icon {
  position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--bg-blue); transition: background .35s var(--ease), transform .35s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--navy);
  transform: translate(-50%, -50%); border-radius: 2px; transition: opacity .3s var(--ease), background .3s var(--ease);
}
.faq-icon::before { width: 10px; height: 1.7px; }
.faq-icon::after  { width: 1.7px; height: 10px; }
.faq-item.is-open .faq-icon { background: var(--grad-leaf); transform: rotate(180deg); }
.faq-item.is-open .faq-icon::before { background: #fff; }
.faq-item.is-open .faq-icon::after { opacity: 0; }

.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 clamp(20px, 2.4vw, 28px) 24px;
  font-size: .93rem; max-width: 62ch;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .35s var(--ease) .06s, transform .35s var(--ease) .06s;
}
.faq-item.is-open .faq-a p { opacity: 1; transform: none; }

/* ---------- Booking ---------- */
.booking {
  background:
    radial-gradient(80% 110% at 96% 8%, rgba(63,169,220,.20) 0%, rgba(63,169,220,0) 58%),
    radial-gradient(70% 100% at 0% 100%, rgba(108,192,24,.14) 0%, rgba(108,192,24,0) 55%),
    var(--navy-900);
}
.booking-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 4.5vw, 64px); align-items: start;
}
.booking-intro h2 { color: #fff; }
.booking-intro > p { margin-top: 18px; color: rgba(255,255,255,.72); max-width: 32em; }
.check-list-dark { margin-top: 28px; }
.check-list-dark li { color: rgba(255,255,255,.82); }

.booking-form {
  position: relative; align-items: start;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 38px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px;
  box-shadow: var(--sh-lg);
}
/* align-content:start keeps every input the same height whether or not the
   field below it is showing a validation message. */
.field { display: grid; gap: 7px; align-content: start; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: .795rem; font-weight: 600; color: var(--ink); letter-spacing: .005em;
}
.field input, .field select {
  width: 100%; font-family: var(--font-ui); font-size: .93rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; appearance: none; -webkit-appearance: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.field input::placeholder { color: #A8B2C4; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C88A0' 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 14px center; background-size: 16px;
  padding-right: 40px; color: var(--ink);
}
.field select:invalid { color: #A8B2C4; }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--navy-400);
  box-shadow: 0 0 0 3px rgba(47,74,155,.11);
}
.field.has-error input, .field.has-error select { border-color: #D2513F; }
.field.has-error input:focus, .field.has-error select:focus { box-shadow: 0 0 0 3px rgba(210,81,63,.12); }
.err { font-size: .74rem; color: #C6432F; min-height: 0; display: none; }
.field.has-error .err { display: block; }

.reassure { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--muted); }

/* Confirmation sits under the form as a compact bar. It never covers the
   fields, so the form stays usable if someone needs to send a second request. */
.form-success {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  margin-top: 4px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid #DDEAD6;
  background: linear-gradient(120deg, var(--green-50) 0%, var(--blue-50) 100%);
  animation: fadeUp .45s var(--ease-soft) both;
}
.form-success[hidden] { display: none; }
.success-tick {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-leaf);
}
.success-tick svg {
  width: 17px; height: 17px; fill: none; stroke: #fff;
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
.form-success h3 { font-size: 1rem; margin-bottom: 2px; }
.form-success p { font-size: .86rem; line-height: 1.5; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.site-footer {
  background: #0A1122; color: rgba(255,255,255,.62);
  padding-top: clamp(56px, 6.5vw, 88px);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
/* The contact column sits hard against the right edge of the grid,
   with its own text left aligned inside that block. */
.footer-col {
  display: flex; flex-direction: column;
  align-items: flex-start; text-align: left;
  margin-left: auto; width: max-content; max-width: 100%;
}

.footer-lockup { display: inline-block; line-height: 0; }
.footer-lockup img { width: clamp(72px, 7vw, 92px); height: auto; }
.footer-tagline {
  margin-top: 18px;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue-300);
}
.footer-blurb {
  margin-top: 20px; font-size: .93rem; line-height: 1.75; color: rgba(255,255,255,.70);
  max-width: 48ch;
}

.footer-phone {
  display: inline-block; color: #fff; font-size: 1.06rem; font-weight: 500;
  transition: color .3s var(--ease-soft);
}
.footer-phone:hover { color: var(--lime); }

.site-footer h4 {
  color: #fff; font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
}

.footer-col address {
  font-size: .93rem; line-height: 1.75; color: rgba(255,255,255,.70);
}
.footer-address { display: block; margin-top: 18px; }
.footer-address address { transition: color .3s var(--ease-soft); }
.footer-address:hover address,
.footer-address:focus-visible address { color: #fff; }
.credit-link {
  color: #fff; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: 1px;
  transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.credit-link:hover { color: var(--blue-300); border-color: var(--blue-300); }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  padding-block: 24px 28px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: .8rem; color: rgba(255,255,255,.50);
}

/* ---------- Mobile action bar ----------
   Pinned to the bottom of the screen on phones only. Hidden everywhere else,
   or it drops into the page as a stray button above the footer. */
.mobile-cta { display: none; }

/* ---------- Reveal on scroll ---------- */
/* Only hidden when JavaScript is running, so the page never sits blank. */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Large tablet / small laptop --- */
/* --- Tablet --- */
@media (max-width: 940px) {
  html { scroll-padding-top: 84px; }
  :root { --header-h: 66px; }

  .hero-copy { max-width: none; }
  .hero-copy .lede { max-width: none; }
  .trust-bar { grid-template-columns: repeat(3, 1fr); }
  .trust-bar li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .card-note { grid-template-columns: auto minmax(0, 1fr); }
  .card-note .link-cta { grid-column: 2; }

  .why-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-head { position: static; }
  .why-sub { margin-bottom: 24px; }

  .location-grid { grid-template-columns: 1fr; align-items: stretch; }
  .location-map { aspect-ratio: 16 / 10; min-height: 300px; order: -1; }

  .booking-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .steps::before { display: none; }

  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 40px; }
}

/* --- Tablet: an orphan third card fills the row instead of leaving a gap --- */
@media (min-width: 641px) and (max-width: 940px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3:not(.grid-treatments) > :nth-child(3):last-child { grid-column: 1 / -1; }
  .grid-treatments > :nth-child(3):last-child { grid-column: 1 / -1; }
  .grid-treatments > :nth-child(3):last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    grid-template-rows: auto auto 1fr;
    gap: 14px clamp(26px, 4vw, 44px); align-items: start;
  }
  .grid-treatments > :nth-child(3):last-child > .card-photo {
    grid-column: 2; grid-row: 1 / span 3;
    aspect-ratio: auto; height: 100%; min-height: 200px; margin: 0;
  }
  .grid-treatments > :nth-child(3):last-child > .treatment-top { grid-column: 1; grid-row: 1; }
  .grid-treatments > :nth-child(3):last-child > p { grid-column: 1; grid-row: 2; }
  .grid-treatments > :nth-child(3):last-child > .link-cta {
    grid-column: 1; grid-row: 3; align-self: end; justify-self: start;
  }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  :root { --radius-lg: 20px; --radius: 16px; }


  /* Centred logo only. Calling and booking live in the hero and the
     floating buttons, so the bar itself stays small. */
  :root { --header-h: 56px; }
  .header-inner { justify-content: center; padding-block: 6px; }
  .brand img { width: 62px; }
  .header-actions { display: none; }

  h1 { letter-spacing: -.02em; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .trust-line { gap: 9px; margin-top: 28px; padding-top: 22px; }
  .trust-line li { flex: 1 1 100%; }

  .grid-3 { grid-template-columns: 1fr; }
  .card-note { grid-template-columns: 1fr; gap: 16px; }
  .card-note .link-cta { grid-column: 1; }
  .trust-bar { grid-template-columns: 1fr; }
  .trust-bar li { flex-direction: row; align-items: center; gap: 14px; }
  .trust-bar li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }

  .steps { grid-template-columns: 1fr; gap: 26px; }
  .step { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: start; }
  .step-num { grid-row: 1 / span 2; width: 40px; height: 40px; margin-bottom: 0; }
  .step h3 { margin-bottom: 5px; }

  .location-map { aspect-ratio: 4 / 3; min-height: 260px; }
  .map-card { top: 10px; left: 10px; right: 10px; padding: 12px 13px; gap: 10px; }
  .map-card-name { font-size: .9rem; }
  .map-card-address { font-size: .78rem; }
  .map-chip { width: 34px; height: 34px; }
  .map-chip svg { width: 15px; height: 15px; }
  .map-chip-dir svg { width: 16px; height: 16px; }
  .location-actions .btn { flex: 1 1 100%; }

  .booking-form { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-col { margin-left: 0; width: auto; }
  .footer-blurb br { display: none; }
  .footer-bottom { flex-direction: column; gap: 8px; }

}

/* --- Tablet: the banner hero needs a little less height ------------------- */
@media (min-width: 641px) and (max-width: 940px) {
  .hero { min-height: clamp(480px, 62vw, 620px); }
  .hero-copy { max-width: 34rem; }
  .trust-bar { grid-template-columns: repeat(3, 1fr); }
  .trust-bar li { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Phone hero: the portrait is the banner --------------------------------
   No white panel. The whole 940 x 1672 shot runs full bleed and the copy sits
   over the empty wall at the top of it, which is what that space is for.
   Sits after the tablet block so it wins the cascade. */
@media (max-width: 640px) {
  .hero {
    position: relative;
    background: var(--navy-900);
    min-height: 0;
    padding-block: 0;
    row-gap: 0;
  }

  /* The photo, whole and uncropped, is the hero */
  .hero-bg {
    position: relative; inset: auto; order: 1;
    width: 100%; aspect-ratio: 940 / 1672; margin: 0;
    transform: none !important;
  }
  .hero-bg img { object-position: center; }

  /* Just enough shading over the top of the shot to hold white text */
  .hero-scrim {
    display: block; position: absolute; inset: 0 0 auto 0; z-index: 1;
    height: 62%;
    background: linear-gradient(to bottom,
      rgba(9,18,42,.78) 0%, rgba(9,18,42,.55) 42%, rgba(9,18,42,.16) 78%, rgba(9,18,42,0) 100%);
  }

  /* Copy floats on the photo rather than in a panel of its own */
  .hero-inner {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding-top: calc(var(--header-h) + 18px);
  }
  .hero-copy { text-align: center; max-width: none; }
  .hero-copy .lede { margin-inline: auto; margin-top: 16px; font-size: .93rem; }
  .hero-copy .eyebrow { display: block; margin-bottom: 14px; }
  .hero-copy .eyebrow-dot {
    display: inline-block; vertical-align: middle;
    margin-right: 8px; position: relative; top: -1px;
  }
  .hero-copy h1 { font-size: clamp(1.62rem, 1.1rem + 2.2vw, 2rem); }

  .hero-actions { display: none; }

  /* Trust bar follows the photo, on white */
  .hero-trust {
    order: 2; position: relative; z-index: 2;
    background: var(--surface);
    margin-top: 0; padding-block: 22px 6px;
  }
  .trust-bar {
    margin-top: 0;
    background: var(--bg-soft); border-color: var(--line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    grid-template-columns: 1fr;
  }
  .trust-bar li { flex-direction: row; align-items: center; gap: 14px; }
  .trust-bar li + li { border-left: 0; border-top: 1px solid var(--line); }
  .trust-bar li:hover { background: rgba(16,28,54,.02); }
  .trust-icon { background: var(--green-50); border-color: #DCEBD3; }
  .trust-icon svg { stroke: var(--green-700); }
  .trust-text { color: var(--muted); }
  .trust-text strong { color: var(--ink); }

  /* Both calls to action pinned to the bottom of the screen */
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    display: grid; grid-template-columns: 1fr;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.95);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(16,28,54,.08);
  }
  .mobile-cta .btn { --btn-h: 48px; padding: 0 12px; font-size: .84rem; gap: 7px; }
  .mobile-cta .btn svg { width: 15px; height: 15px; }

  /* Nothing at the foot of the page hides behind the bar */
  body { padding-bottom: 84px; }
}

/* --- Small phones --- */
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .mobile-cta { padding-inline: 12px; }
  .mobile-cta .btn { font-size: .76rem; padding: 0 9px; }
  .mobile-cta .btn svg { width: 14px; height: 14px; }
  .btn { font-size: .9rem; padding: 0 20px; }
  .trust-bar li { padding: 16px 16px; gap: 12px; }
  .trust-icon { width: 36px; height: 36px; }
  .trust-icon svg { width: 17px; height: 17px; }
  .card { padding: 22px; }
  .booking-form { padding: 20px; }
}

/* --- Touch targets ---------------------------------------------------------
   Inline text links sit around 24px tall, under the 44px minimum for a thumb.
   A transparent overlay grows the hit area without moving anything visually. */
@media (pointer: coarse) {
  .link-cta, .footer-phone, .credit-link, .footer-address { position: relative; }
  .link-cta::after,
  .footer-phone::after,
  .credit-link::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}

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

/* --- Print --- */
@media print {
  .site-header, .hero-scrim, .mobile-cta, .booking-form button { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}