/* ==========================================================================
   Eden Medical Aesthetics, design system
   Replaces style5.css, services.css and treatment-format.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette (carried over from the original site).
     --navy matches the accreditation card artwork; --navy-deep is sampled
     straight from the Eden logo background so the logo blends seamlessly. */
  --navy: #2c374b;
  --navy-deep: #122045;
  --navy-soft: #475878;
  --accent: #d1a080;
  --accent-deep: #a86b44;   /* accessible tan for text on light surfaces */
  --accent-soft: #e8cdb9;
  --muted: #8f9ab0;
  --muted-deep: #4a5570;    /* accessible grey-blue for body copy */
  --cream: #f5f1e9;
  --paper: #ffffff;
  --shell: #faf9f7;
  --line: rgba(44, 55, 75, 0.12);

  /* Typography */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.29rem + 0.75vw, 2rem);
  --step-3: clamp(1.73rem, 1.48rem + 1.24vw, 2.66rem);
  --step-4: clamp(2.07rem, 1.68rem + 1.97vw, 3.55rem);
  --step-5: clamp(2.49rem, 1.87rem + 3.1vw, 4.73rem);

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Shape & depth */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --shadow-s: 0 1px 2px rgba(30, 38, 54, 0.06), 0 2px 8px rgba(30, 38, 54, 0.05);
  --shadow-m: 0 4px 12px rgba(30, 38, 54, 0.07), 0 12px 32px rgba(30, 38, 54, 0.07);
  --shadow-l: 0 8px 24px rgba(30, 38, 54, 0.09), 0 24px 64px rgba(30, 38, 54, 0.1);

  --wrap: 1180px;
  --measure: 68ch;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Safe-area insets resolve to 0px on every device without a notch or home
     indicator, so these can be added unconditionally. The fixed header, the
     nav overlay and the page gutters all read them. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Phones: a shorter bar so the hero isn't pushed down a small screen. */
@media (max-width: 560px) {
  :root {
    --header-h: 64px;
  }
}

/* Landscape phones have very little height to spend, shrink it again. */
@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --header-h: 56px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-t) + var(--space-m));
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--navy);
  background-color: var(--shell);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Long treatment names, URLs and the clinic email must never widen the
     viewport on a 320px phone. */
  overflow-wrap: break-word;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--accent-deep);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--navy);
}

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

::selection {
  background: var(--accent-soft);
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--safe-l) + var(--safe-r));
  margin-inline: auto;
  padding-left: calc(clamp(1.25rem, 5vw, 3rem) + var(--safe-l));
  padding-right: calc(clamp(1.25rem, 5vw, 3rem) + var(--safe-r));
}

.wrap--narrow {
  max-width: 820px;
}

.section {
  padding-block: clamp(var(--space-xl), 9vw, var(--space-3xl));
}

.section--cream {
  background: var(--cream);
}

.section--paper {
  background: var(--paper);
}

.section-head {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(var(--space-l), 5vw, var(--space-xl));
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-s);
}

.section-head h2 {
  font-size: var(--step-4);
}

.section-head p {
  margin-top: var(--space-m);
  color: var(--muted-deep);
  font-size: var(--step-1);
  line-height: 1.6;
}

.rule {
  width: min(220px, 40%);
  height: 1px;
  margin: var(--space-l) auto 0;
  border: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent) 35%,
    var(--accent) 65%,
    transparent
  );
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-s);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.95em 2em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.button:hover {
  background: var(--accent-soft);
  color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.button:active {
  transform: translateY(0);
}

.button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--paper);
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
  border-color: var(--paper);
}

.button--outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-deep);
}

.button--outline:hover {
  background: var(--accent);
  color: var(--navy-deep);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
}

.text-link::after {
  content: "\2192";
  transition: transform 0.25s var(--ease);
}

.text-link:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5. Site header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: calc(var(--header-h) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(30, 38, 54, 0.55),
    rgba(30, 38, 54, 0)
  );
  opacity: 1;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

/* Solid state: once scrolled, and always on interior pages */
.site-header.is-stuck,
.site-header--solid {
  background: rgba(44, 55, 75, 0.94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-m);
  backdrop-filter: saturate(150%) blur(12px);
}

.site-header.is-stuck::after,
.site-header--solid::after {
  opacity: 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* Brand lockup: the emblem cut from the real logo artwork, beside a wordmark
   set in the brand copper rather than plain white. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  width: 42px;
  height: 42px;
  flex: none;
  transition: transform 0.4s var(--ease);
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.22em;
  line-height: 1;
}

.brand__text strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  /* negative right margin cancels the trailing space that tracking adds,
     so the two lines stay optically aligned */
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  color: var(--accent);
  transition: color 0.25s var(--ease);
}

.brand__text > span {
  font-family: var(--font-body);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  margin-right: -0.26em;
  text-transform: uppercase;
  color: rgba(232, 205, 185, 0.72);
}

.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.06);
}

.brand:hover .brand__text strong {
  color: var(--accent-soft);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  padding: 0;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.35rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--paper);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav .nav-cta a {
  padding: 0.6em 1.4em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
}

.site-nav .nav-cta a::after {
  display: none;
}

.site-nav .nav-cta a:hover {
  background: var(--accent);
  color: var(--navy-deep);
}

@media (max-width: 860px) {
  /* Both sit above the full-screen overlay so the header stays readable. */
  .nav-toggle,
  .brand {
    position: relative;
    z-index: 2;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    display: grid;
    /* align-content (not place-items) so a menu taller than a landscape
       phone can scroll instead of having its top row cut off. */
    align-content: center;
    justify-items: center;
    padding: calc(var(--header-h) + var(--safe-t) + var(--space-m))
      calc(var(--space-m) + var(--safe-r))
      calc(var(--space-l) + var(--safe-b))
      calc(var(--space-m) + var(--safe-l));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(30, 38, 54, 0.98);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    /* visibility is a discrete property: transitioning it means the panel is
       still `hidden` for the first half of the fade, and nothing inside a
       hidden subtree can take focus. Flip it instantly on open, and defer it
       to the end of the fade on close. */
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .site-nav ul {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  .site-nav li {
    width: 100%;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.5rem 1.25rem;
    font-size: var(--step-1);
    letter-spacing: 0.1em;
  }

  .site-nav .nav-cta a {
    margin-top: var(--space-s);
  }

  body.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0s;
  }

  /* JS pins the body and restores scrollY on close; overflow alone does not
     stop the page moving underneath the overlay on iOS. */
  body.nav-open {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow: hidden;
  }

  body.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  /* svh = viewport with the mobile browser chrome *shown*, so the hero never
     overflows when the URL bar slides back in. vh is the fallback. */
  min-height: min(92vh, 820px);
  min-height: min(92svh, 820px);
  padding-block: calc(var(--header-h) + var(--safe-t) + var(--space-xl))
    var(--space-2xl);
  overflow: hidden;
  /* Flat at the top so the logo (same navy) merges into the background. */
  background: var(--navy-deep);
  isolation: isolate;
}

/* The logo artwork is a #122045 JPEG rectangle, so ANY tint drifting across
   it makes its edges visible. The glow is therefore anchored to the bottom
   of the hero, well clear of the logo, which sits in the upper third. */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -78%;
  width: min(1000px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(209, 160, 128, 0.16) 0%,
    rgba(209, 160, 128, 0.05) 42%,
    transparent 70%
  );
  pointer-events: none;
}

/* Vignette to seat the hero against the section below. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(8, 15, 33, 0.75) 100%
  );
  pointer-events: none;
}

/* Optional: drop a wide photo in here and it layers under the text. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 32, 69, 0.82) 0%,
    rgba(18, 32, 69, 0.62) 45%,
    rgba(18, 32, 69, 0.9) 100%
  );
}

.hero__inner {
  position: relative;
  text-align: center;
  color: var(--paper);
  max-width: 46rem;
  margin-inline: auto;
}

.hero__logo {
  width: clamp(140px, 17vw, 210px);
  margin: 0 auto var(--space-s);
}

.hero h1 {
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.6rem);
  font-weight: 500;
  color: var(--paper);
  margin-bottom: var(--space-s);
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 34rem;
  margin-inline: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-xl);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.hero__trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(var(--space-l), 5vw, var(--space-2xl));
  align-items: center;
}

.about-grid__text p + p {
  margin-top: var(--space-m);
}

.about-grid__text p {
  color: var(--muted-deep);
}

.about-grid__media {
  position: relative;
  /* Contains the decorative frame's negative z-index so it paints above the
     section background rather than behind it. */
  isolation: isolate;
}

/* Source image is 687x458 (3:2), 4/3 crops only slightly and never upscales. */
.about-grid__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
}

.about-grid__media::after {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 55%;
  height: 55%;
  z-index: -1;
  border: 1px solid var(--accent);
  border-radius: var(--radius-l);
}

@media (max-width: 820px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-grid__media {
    order: -1;
    max-width: 460px;
    margin-inline: auto;
  }

  .about-grid__media img {
    aspect-ratio: 3 / 2;
  }

  .about-grid__media::after {
    display: none;
  }
}

/* Founder / values strip */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-m);
  margin-top: clamp(var(--space-l), 5vw, var(--space-xl));
}

.pillar {
  padding: var(--space-l) var(--space-m);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.pillar i {
  font-size: 1.5rem;
  color: var(--accent-deep);
  margin-bottom: var(--space-s);
}

.pillar h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}

.pillar p {
  font-size: var(--step--1);
  color: var(--muted-deep);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   8. Treatment cards
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(var(--space-m), 3vw, var(--space-l));
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-m), 3vw, var(--space-l));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
  border-color: var(--accent-soft);
}

.card h3 {
  font-size: var(--step-2);
  margin-bottom: var(--space-s);
}

.card p {
  color: var(--muted-deep);
  font-size: var(--step-0);
  line-height: 1.7;
  margin-bottom: var(--space-m);
}

.card .text-link {
  margin-top: auto;
  align-self: flex-start;
}

.card--feature {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: transparent;
  color: var(--paper);
  justify-content: center;
  text-align: center;
  align-items: center;
}

.card--feature h3 {
  color: var(--paper);
}

.card--feature p {
  color: rgba(255, 255, 255, 0.78);
}

.card--feature .button {
  align-self: center;
}

/* --------------------------------------------------------------------------
   9. Call to action band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding-block: clamp(var(--space-xl), 8vw, var(--space-2xl));
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  text-align: center;
}

.cta-band h2 {
  font-size: var(--step-4);
  color: var(--paper);
  max-width: 20ch;
  margin-inline: auto;
}

.cta-band p {
  max-width: 46ch;
  margin: var(--space-m) auto 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--step-1);
}

.cta-band .button {
  margin-top: var(--space-l);
}

/* --------------------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(var(--space-m), 3vw, var(--space-l));
  align-items: start;
}

.contact-info {
  padding: clamp(var(--space-m), 4vw, var(--space-xl));
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.contact-info h2 {
  font-size: var(--step-2);
  color: var(--paper);
  margin-bottom: var(--space-s);
}

.contact-info > p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--step--1);
  margin-bottom: var(--space-l);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-item i {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(209, 160, 128, 0.16);
  color: var(--accent);
  font-size: 0.85rem;
}

.contact-item__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.contact-item a,
.contact-item p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--step--1);
  text-decoration: none;
  line-height: 1.55;
  /* The clinic email is a single 32-character token, without this it
     pushes the grid past the viewport on narrow screens. */
  overflow-wrap: anywhere;
}

.contact-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.contact-socials {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}

.contact-socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--paper);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.contact-socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-deep);
}

.contact-form {
  padding: clamp(var(--space-m), 4vw, var(--space-xl));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.contact-form h2 {
  font-size: var(--step-2);
  margin-bottom: var(--space-2xs);
}

.contact-form > p {
  color: var(--muted-deep);
  font-size: var(--step--1);
  margin-bottom: var(--space-l);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-m);
}

.field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: var(--step-0);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(95, 107, 130, 0.65);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(209, 160, 128, 0.2);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form .button {
  width: 100%;
}

.form-note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--muted-deep);
  text-align: center;
}

.form-status {
  margin-top: var(--space-s);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  text-align: center;
}

.form-status:empty {
  display: none;
}

.form-status.is-success {
  background: rgba(63, 138, 106, 0.12);
  color: #2f6b51;
}

.form-status.is-error {
  background: rgba(176, 58, 58, 0.1);
  color: #9c3232;
}

@media (max-width: 860px) {
  .contact-grid,
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. Accreditation strip
   -------------------------------------------------------------------------- */

/* The accreditation artwork is supplied on a #2c374b card, so the strip uses
   the same navy and the cards sit flush against it. */
.certs {
  padding-block: clamp(var(--space-l), 6vw, var(--space-xl));
  background: var(--navy);
}

.certs p {
  text-align: center;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-l);
}

.certs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-m), 5vw, var(--space-2xl));
}

.certs-row img {
  height: clamp(78px, 11vw, 120px);
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-s);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.certs-row img:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

@media (max-width: 560px) {
  .certs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-s);
    align-items: center;
  }

  .certs-row img {
    width: 100%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   12. Treatment detail pages
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  text-align: center;
}

.page-hero h1 {
  font-size: var(--step-5);
  font-weight: 500;
  color: var(--paper);
}

.page-hero p {
  max-width: 52ch;
  margin: var(--space-m) auto 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--step-1);
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* Readable article column */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--navy);
}

.prose > * + * {
  margin-top: var(--space-m);
}

.prose h2 {
  font-size: var(--step-3);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  color: var(--navy);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  font-size: var(--step-1);
  margin-top: var(--space-l);
  color: var(--navy);
}

.prose p {
  color: var(--muted-deep);
}

.prose strong {
  color: var(--navy);
  font-weight: 700;
}

.prose img {
  width: 100%;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  margin-block: var(--space-l);
}

.prose a {
  color: var(--accent-deep);
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
  color: var(--muted-deep);
}

.prose li + li {
  margin-top: var(--space-2xs);
}

/* Lede paragraph, the opening <strong> block on treatment pages */
.prose > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--navy);
}

.prose > p:first-of-type strong {
  font-weight: 400;
}

/* Callout blocks: aftercare + pricing */
.prose .aftercare,
.prose .pricing,
.prose .faq {
  margin-top: var(--space-xl);
  padding: clamp(var(--space-s), 4vw, var(--space-l));
  border-radius: var(--radius-m);
}

.prose .aftercare {
  background: var(--cream);
  border: 1px solid rgba(209, 160, 128, 0.35);
}

.prose .pricing {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
}

.prose .aftercare h2,
.prose .pricing h2,
.prose .faq h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--step-2);
}

.prose .pricing p {
  font-size: var(--step-1);
  line-height: 2;
  color: var(--navy);
}

.prose .pricing table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-m);
}

.prose .pricing th,
.prose .pricing td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.prose .pricing th {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.treatment-footer-cta {
  margin-top: var(--space-xl);
  padding: clamp(var(--space-m), 5vw, var(--space-xl));
  text-align: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-l);
  color: var(--paper);
}

.treatment-footer-cta h2 {
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
  font-size: var(--step-2);
  color: var(--paper);
}

.treatment-footer-cta p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
  margin-inline: auto;
}

.treatment-footer-cta .button {
  margin-top: var(--space-m);
}

/* --------------------------------------------------------------------------
   13. Treatments index page
   -------------------------------------------------------------------------- */

.group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-block: clamp(var(--space-xl), 6vw, var(--space-2xl)) var(--space-l);
  font-size: var(--step-2);
  color: var(--navy);
  white-space: nowrap;
}

.group-title::after {
  content: "";
  flex: 1;
  min-width: 60px;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
}

@media (max-width: 640px) {
  .group-title {
    white-space: normal;
    gap: var(--space-s);
  }

  /* When the heading wraps, the rule drops to its own full-width line
     rather than squeezing into a few pixels beside it. */
  .group-title::after {
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)) var(--space-l);
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--step--1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(var(--space-l), 5vw, var(--space-xl));
}

.site-footer h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-m);
}

.site-footer .brand {
  margin-bottom: var(--space-s);
}

.site-footer p {
  line-height: 1.7;
  max-width: 38ch;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease);
}

.site-footer a:hover {
  color: var(--accent);
}

.footer-socials {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.footer-socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
}

.footer-socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-deep);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: clamp(var(--space-l), 5vw, var(--space-xl));
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 761px) and (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   15. Scroll reveal (progressive enhancement, no JS means no hiding)
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. Device tiers
   Everything above is fluid by default; this section handles the cases fluid
   layout alone can't: touch input, landscape phones, very small screens and
   printed pages. Appended last so these rules win on ties.
   -------------------------------------------------------------------------- */

/* --- Touch devices -------------------------------------------------------
   Tapping an element on a touch screen leaves it in :hover until the next tap
   elsewhere, so a tapped card stays lifted and a tapped button stays pale.
   Neutralise the decorative hovers where there is no real pointer. */
@media (hover: none) {
  .button:hover {
    background: var(--accent);
    color: var(--navy-deep);
    transform: none;
    box-shadow: none;
  }

  .button--ghost:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
  }

  .button--outline:hover {
    background: transparent;
    color: var(--accent-deep);
  }

  .card:hover {
    transform: none;
    box-shadow: var(--shadow-s);
    border-color: var(--line);
  }

  .certs-row img:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.14);
  }

  .brand:hover .brand__mark {
    transform: none;
  }

  .brand:hover .brand__text strong {
    color: var(--accent);
  }

  .text-link:hover::after {
    transform: none;
  }

  .site-nav a:hover::after {
    transform: scaleX(0);
  }

  .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* --- Coarse pointers -----------------------------------------------------
   Footer, contact and "read more" links are set small by design; on a finger
   they need vertical padding to reach a comfortable target size. */
@media (pointer: coarse) {
  .site-footer li a,
  .footer-bottom a {
    display: inline-block;
    padding-block: 0.6rem;
  }

  .contact-item {
    padding-block: var(--space-m);
  }

  .contact-item a {
    display: inline-block;
    padding-block: 0.4rem;
  }

  /* inline-flex, so min-height gives the full 44px target without
     changing where the arrow sits. */
  .text-link {
    min-height: 44px;
    align-items: center;
  }

  .nav-toggle {
    width: 48px;
    height: 48px;
  }

  .breadcrumb a {
    display: inline-block;
    padding-block: 0.3rem;
  }
}

/* --- Landscape phones ----------------------------------------------------
   A phone on its side has ~350px of height. A 92svh hero would fill it with
   a logo and nothing else, so the hero collapses to its content height. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + var(--safe-t) + var(--space-l))
      var(--space-l);
  }

  .hero__logo {
    width: clamp(88px, 20vh, 150px);
    margin-bottom: var(--space-2xs);
  }

  .hero h1 {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  }

  .hero__actions,
  .hero__trust {
    margin-top: var(--space-m);
  }

  .page-hero {
    padding-block: calc(var(--header-h) + var(--safe-t) + var(--space-l))
      var(--space-l);
  }

  .section {
    padding-block: var(--space-xl);
  }

  .field textarea {
    min-height: 96px;
  }
}

/* --- Small phones (<=400px) ---------------------------------------------
   Side-by-side pill buttons wrap into a ragged two-line block at this width;
   stacking them full-width reads as intentional and doubles the tap area. */
@media (max-width: 400px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .button,
  .cta-band .button,
  .card--feature .button,
  .treatment-footer-cta .button {
    width: 100%;
  }

  .button {
    padding-inline: 1.25em;
  }

  .hero__trust {
    gap: var(--space-2xs) var(--space-s);
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  .brand__text strong {
    font-size: 1.15rem;
  }
}

/* --- Tables --------------------------------------------------------------
   Pricing tables scroll sideways inside their own box rather than widening
   the page. .table-scroll wraps the table in the markup. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.prose .pricing .table-scroll table {
  margin-top: var(--space-m);
}

@media (max-width: 480px) {
  .prose .pricing th,
  .prose .pricing td {
    padding: 0.65rem 0.5rem;
    font-size: var(--step--1);
  }

  .prose .pricing p {
    font-size: var(--step-0);
    line-height: 1.8;
  }
}

/* --- Wide screens --------------------------------------------------------
   On a large laptop or desktop the hero cap keeps the logo from floating in
   an ocean of navy, and the reading column stays a comfortable width. */
@media (min-width: 1600px) {
  .hero {
    min-height: min(80vh, 820px);
    min-height: min(80svh, 820px);
  }
}

/* --- Print ---------------------------------------------------------------
   Aftercare advice and price lists are the pages people print. */
@media print {
  .site-header,
  .site-nav,
  .nav-toggle,
  .skip-link,
  .cta-band,
  .treatment-footer-cta,
  .certs,
  .site-footer,
  .hero__actions {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section,
  .page-hero {
    padding-block: 1rem;
  }

  .page-hero {
    background: none;
    color: #000;
  }

  .page-hero h1,
  .page-hero p {
    color: #000;
  }

  .prose {
    max-width: none;
  }

  .prose .aftercare,
  .prose .pricing,
  .prose .faq {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }

  .prose img {
    box-shadow: none;
    max-width: 60%;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}