/* =====================================================================
   COSMALIFE SKIN CLINIC — Acne Treatment landing page
   Archetype : Diagonal split  |  Rhythm : asymmetric  |  Type : editorial
   Palette   : sage + terracotta on warm cream  (day + night)
   --------------------------------------------------------------------- */

:root {
  /* Day-mode colour pairs — light sky-blue palette -------------------- */
  /* --c-primary is the brand sky-blue. Used everywhere — diagonal
     bands, hero figure, footer, buttons, brand mark, accents. White
     text sits on top per the chosen design direction. */
  --c-primary:        #60A5FA;          /* brand sky blue */
  --c-primary-deep:   #3B82F6;          /* hover / pressed (one shade deeper) */
  --c-primary-soft:   #DBEAFE;          /* very pale sky — tinted surface */
  --c-on-primary:     #FFFFFF;          /* white text on sky panels */

  /* Accent matches primary so the page stays in one blue family. */
  --c-accent:         #60A5FA;
  --c-accent-deep:    #3B82F6;
  --c-on-accent:      #FFFFFF;

  --c-ink:            #0F1A2B;          /* body text — deep navy ink */
  --c-ink-soft:       #3D4A5E;          /* secondary text */
  --c-ink-faint:      #6B7689;          /* meta / micro */

  --c-surface:        #FFFFFF;          /* pure white page bg */
  --c-surface-2:      #F4F8FC;          /* card surface — barely-blue */
  --c-surface-3:      #FFFFFF;          /* lifted surface */
  --c-rule:           #DBE6F0;          /* hair rules — soft blue-gray */

  --c-success:        #60A5FA;
  --c-danger:         #B14A3D;

  /* WhatsApp pill — same brand sky as the rest. */
  --c-whatsapp:       #60A5FA;
  --c-whatsapp-deep:  #3B82F6;
  --c-on-whatsapp:    #FFFFFF;

  /* Typography ----------------------------------------------------------- */
  /* All-sans-serif, no italic — professional medical look. The display
     font is now the same Inter as the body; weight + size differences
     create hierarchy. */
  --f-display: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (clamp) --------------------------------------------- */
  --fs-micro:   clamp(0.72rem, 0.68rem + 0.2vw, 0.80rem);
  --fs-meta:    clamp(0.80rem, 0.74rem + 0.3vw, 0.92rem);
  --fs-body:    clamp(0.98rem, 0.93rem + 0.25vw, 1.06rem);
  --fs-lead:    clamp(1.08rem, 1.00rem + 0.45vw, 1.28rem);
  --fs-h4:      clamp(1.10rem, 1.00rem + 0.6vw, 1.35rem);
  --fs-h3:      clamp(1.40rem, 1.20rem + 1.0vw, 1.85rem);
  --fs-h2:      clamp(1.85rem, 1.45rem + 2.0vw, 2.85rem);
  --fs-h1:      clamp(2.40rem, 1.90rem + 3.5vw, 4.40rem);
  /* hero headline — capped lower so the two CTAs sit inside the first viewport */
  --fs-display: clamp(2.40rem, 1.80rem + 3.4vw, 4.00rem);

  /* Layout --------------------------------------------------------------- */
  --maxw:        1240px;
  --gutter:      clamp(1rem, 0.6rem + 2vw, 2rem);
  /* Distance from the viewport's left edge to the centered .wrap's content
     edge — used by full-bleed sections (e.g. .hero) to align their text
     with the masthead while letting their background panels bleed. */
  --wrap-edge:   max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
  --section-pad: clamp(3.5rem, 2rem + 5vw, 6rem);
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 22px;

  /* Icon sizing ---------------------------------------------------------- */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
  --icon-xl: 38px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --speed: 220ms;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(27,37,34,.06), 0 4px 14px rgba(27,37,34,.06);
  --shadow-2: 0 4px 12px rgba(27,37,34,.08), 0 18px 40px rgba(27,37,34,.10);

  color-scheme: light;
}

/* Night mode — sky family, inverted ------------------------------------ */
:root[data-theme="dark"] {
  --c-primary:        #60A5FA;          /* same brand sky on dark bg */
  --c-primary-deep:   #93C5FD;          /* even lighter for hover on dark */
  --c-primary-soft:   #142336;
  --c-on-primary:     #FFFFFF;          /* white text stays per user choice */

  --c-accent:         #60A5FA;
  --c-accent-deep:    #93C5FD;
  --c-on-accent:      #FFFFFF;

  --c-ink:            #ECF2FA;
  --c-ink-soft:       #B8C3D4;
  --c-ink-faint:      #7C8AA0;

  --c-surface:        #06182A;          /* deep navy page bg */
  --c-surface-2:      #122236;
  --c-surface-3:      #1A2C44;
  --c-rule:           #1F3251;

  --c-whatsapp:       #60A5FA;
  --c-whatsapp-deep:  #93C5FD;
  --c-on-whatsapp:    #FFFFFF;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45);
  --shadow-2: 0 4px 14px rgba(0,0,0,.5), 0 22px 44px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* =====================================================================
   Reset / base
   --------------------------------------------------------------------- */

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

html, body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
  background: var(--c-surface);
  color: var(--c-ink);
}

html {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: var(--fs-body);
  font-feature-settings: "ss01", "cv11";
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 780px) {
  body { font-weight: 450; }
}

img, svg, video {
  max-width: 100%;
  height: auto;
}
/* Standalone media renders as a block; inline <svg> icons keep their
   default inline rendering so check-mark / arrow icons inside flowing
   text (e.g. the hero micro-trust line) sit beside their label, not
   above it. */
img, video { display: block; }

a {
  color: var(--c-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--speed) var(--ease);
}
a:hover { color: var(--c-accent-deep); }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 0.4em;
  color: var(--c-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 780px) {
  h1 { font-weight: 700; }
  h2, h3 { font-weight: 650; }
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }

p, li { overflow-wrap: anywhere; }

p { margin: 0 0 1em; max-width: 64ch; }

.lead {
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink-soft);
  max-width: 56ch;
  /* Sits below the section h2 with consistent breathing room. Applied
     globally so every section (Services, About, FAQ, Enquire, Contact,
     etc.) reads with the same heading → lead rhythm. */
  margin-top: 0.6rem;
}

@media (max-width: 780px) {
  .lead { font-weight: 600; }
}

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1px;
  background: currentColor;
}

/* =====================================================================
   Layout helpers
   --------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}

section { padding-block: var(--section-pad); position: relative; }
section[id], [id^="anchor-"], .scroll-anchor { scroll-margin-top: 5.5rem; }

/* Diagonal split between coloured bands.
   We use clip-path on a wrapper element rather than horizontal rules. */
.diagonal-band {
  position: relative;
  background: var(--c-primary);
  color: var(--c-on-primary);
  --diag-h: clamp(40px, 6vw, 90px);
  margin-block: calc(var(--diag-h) * -0.4);
  padding-block: calc(var(--section-pad) + var(--diag-h));
  clip-path: polygon(0 var(--diag-h), 100% 0, 100% calc(100% - var(--diag-h)), 0 100%);
}
.diagonal-band h1, .diagonal-band h2, .diagonal-band h3, .diagonal-band h4 { color: var(--c-on-primary); }
.diagonal-band .eyebrow { color: var(--c-accent); }
.diagonal-band p, .diagonal-band li { color: var(--c-on-primary); opacity: .92; }
.diagonal-band a { color: var(--c-on-primary); }

/* Reverse diagonal for variation */
.diagonal-band.reverse {
  clip-path: polygon(0 0, 100% var(--diag-h), 100% 100%, 0 calc(100% - var(--diag-h)));
}

/* =====================================================================
   Masthead
   --------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solid bg (no backdrop-filter) — backdrop-filter was creating a CSS
     containing block that trapped the mobile menu overlay (.nav.open
     uses position: fixed) inside the masthead's height instead of
     covering the viewport. */
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
}
.masthead-inner {
  /* 3-col grid keeps the nav truly centred in the masthead regardless of
     the brand's or actions group's width. The two outer 1fr columns are
     always equal, so the centre column (nav) sits at the wrap's middle.
     This is robust across system zoom levels — previous flex + auto
     margins centred the nav between brand and actions, which drifted
     off-centre as the rem-scaled font sizes changed widths under zoom. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 5.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  flex: 0 0 auto;
  /* Anchor brand to the left edge of its grid column. */
  justify-self: start;
}
.brand:hover { color: var(--c-primary); }
/* Horizontal wordmark (PNG) — intrinsic ratio 3126×692 */
.brand-logo {
  display: block;
  height: 3.2rem;
  width: auto;
  max-width: min(340px, 46vw);
  flex: 0 1 auto;
  object-fit: contain;
}
.brand-mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  color: var(--c-primary);
}
.brand-name { white-space: nowrap; }

.footer .brand-logo {
  max-width: min(300px, 70vw);
  height: 2.8rem;
}


.nav {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  /* Lives in the centre auto column of the masthead grid — naturally
     centred in the wrap regardless of brand or actions widths. */
  justify-self: center;
}
.nav a {
  color: var(--c-ink);
  font-size: var(--fs-meta);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}
.nav a:hover { color: var(--c-primary); }
.nav a[data-cta="primary"] {
  display: none;
}
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--c-ink);
  border: 1px solid var(--c-rule);
  background: var(--c-surface-2);
  transition: transform var(--speed) var(--ease), background var(--speed);
}
.theme-toggle:hover { background: var(--c-primary-soft); transform: rotate(15deg); }
.theme-toggle .icon-sun { display: inline; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: var(--c-whatsapp);
  color: var(--c-on-whatsapp);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--speed), transform var(--speed);
}
.wa-pill:hover { background: var(--c-whatsapp-deep); color: var(--c-on-whatsapp); transform: translateY(-1px); }
.wa-pill svg { width: var(--icon-sm); height: var(--icon-sm); }

.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  border: 1px solid var(--c-rule);
  background: var(--c-surface-2);
  position: relative;
}
.menu-toggle svg { width: var(--icon-md); height: var(--icon-md); }
/* The full-screen menu has its own .nav-close button at the top-right of
   the panel — hide the masthead toggle entirely when the menu is open
   so we never show two X buttons stacked on each other. */
.menu-toggle .icon-close { display: none; }
/* Lift the toggle above the full-screen menu overlay so it stays
   tappable as the close button. */
/* Hide the masthead hamburger entirely while the menu is open — the
   in-menu close button (.nav-close) is the only X visible. */
.menu-toggle[aria-expanded="true"] { display: none; }

/* Close (X) button lives inside the nav and is only visible while the
   menu is open. */
.nav-close { display: none; }

/* Right-side controls grouped into a single grid cell so the masthead's
   3-col grid (1fr auto 1fr) can place them as one unit on the right edge,
   leaving the centre column free for the truly-centred nav. */
.masthead-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
}

@media (max-width: 860px) {
  /* Two-column layout when the desktop nav is hidden: brand on left,
     actions group on right. Drops the centre column entirely so nothing
     drifts to the middle. */
  .masthead-inner { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* TRUE full-viewport overlay — covers everything including the
       masthead. The menu's own close button (.nav-close, top-right)
       is the way out. Belt-and-braces sizing (inset + width/height)
       so dark-mode browser extensions that override layout properties
       can't shrink the panel. */
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--c-surface);
    padding: 1.2rem var(--gutter) 2rem;
    gap: 0.2rem;
    overflow-y: auto;
    /* Stop scroll-chaining — when the user scrolls inside the menu's
       empty space, the scroll event MUST stop here and not bleed
       through to the page behind it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Above absolutely everything on the page (masthead is z-index: 50). */
    z-index: 100;
  }
  .nav.open .nav-close {
    display: inline-flex;
    align-self: flex-end;
    width: 44px; height: 44px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    border: 1px solid var(--c-rule);
    background: var(--c-surface-2);
    margin-bottom: 1rem;
    cursor: pointer;
  }
  .nav.open .nav-close svg { width: var(--icon-md); height: var(--icon-md); }
  .nav.open a {
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--c-rule);
    font-size: var(--fs-lead);
    font-family: var(--f-display);
    color: var(--c-ink);
    text-decoration: none;
  }
  .nav.open a:last-of-type { border-bottom: 0; }
}

/* Phone widths — masthead has limited horizontal room. Compress the
   WhatsApp pill to icon-only, tighten the gap between masthead items,
   and slim the brand mark so the hamburger button always stays inside
   the viewport (and remains tappable). */
@media (max-width: 520px) {
  .masthead-inner { gap: 0.5rem; }
  .wa-pill { padding: 0.55rem; }
  .wa-pill span { display: none; }
  .brand { font-size: 1rem; letter-spacing: 0.03em; }
  .brand-logo {
    height: 2.6rem;
    max-width: min(260px, 50vw);
  }
}

/* =====================================================================
   Hero — diagonal split, no centred hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Compact hero — HARD height (not min-height) so the content can't
     push the section taller than this range. Combined with the smaller
     h1 + tighter padding below, the eyebrow + headline + lead + CTAs
     fit comfortably while the figure cell crops cleanly to fill. */
  height: clamp(26rem, 95vh, 40rem);
  display: grid;
  grid-template-columns: 1fr;
  /* Make the single grid row absorb the full min-height so the sage
     figure cell always extends to where the hero ends — no cream
     dead-space between the figure bottom and the trust strip below. */
  grid-template-rows: 1fr;
  align-items: stretch;
  align-content: stretch;
  padding-block: 0;
  overflow: hidden;
}
.hero-content {
  /* Align the LEFT edge of hero text with the masthead's centered .wrap
     content edge. The diagonal sage panel still bleeds full-width to the
     right viewport edge (its visual purpose), but the text never extends
     past the wrap boundary on the left. */
  padding-block-start: clamp(1.25rem, 2vw + 0.25rem, 2rem);
  padding-block-end: clamp(0.75rem, 1vw + 0.25rem, 1.25rem);
  padding-inline-start: var(--wrap-edge);
  padding-inline-end: var(--gutter);
  display: flex;
  flex-direction: column;
  /* Top-align so the eyebrow sits just under the masthead — the previous
     'center' value floated the entire block down and left a cream band
     above the eyebrow. */
  justify-content: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
}
/* Keep individual lines readable inside the (now wider) hero-content cell. */
.hero-content > h1,
.hero-content > .lead,
.hero-content > .hero-highlights,
.hero-content > .hero-cta-hint,
.hero-content > p:not(.hero-trust),
.hero-content > .hero-actions {
  max-width: min(56ch, 100%);
}
.hero-highlights {
  list-style: none;
  padding: 0;
  margin: 0.15rem 0 0;
  display: grid;
  gap: 0.35rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  font-weight: 600;
  color: var(--c-ink-soft);
  letter-spacing: 0.01em;
}
.hero-highlights li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  line-height: 1.35;
}
.hero-highlights li::before {
  content: "•";
  color: var(--c-primary);
  font-weight: 800;
  flex: 0 0 auto;
}
.hero-cta-hint {
  margin: 0.35rem 0 0.15rem;
  font-size: var(--fs-meta);
  font-weight: 500;
}
.hero-content h1 {
  /* Capped smaller than the global --fs-display so the headline fits
     comfortably inside the compact hero height without overflowing. */
  font-size: clamp(1.5rem, 1.05rem + 1.35vw, 2.35rem);
  font-weight: 600;
  line-height: 1.08;
}

/* Trust strip — full-width band directly under the hero. By living
   outside the .hero (which is a 2-col grid with a clipped sage panel),
   the trust pills get the entire viewport width and never get clipped
   by the diagonal. */
.trust-strip {
  background: var(--c-surface);
  border-block: 1px solid var(--c-rule);
  padding-block: 0.85rem;
}
:root[data-theme="dark"] .trust-strip { background: var(--c-surface-2); }

/* Three icon+label pills laid out horizontally. Each <span> is an
   inline-flex unit that never splits across lines; the parent <p> uses
   flex-wrap so on truly narrow viewports the pills wrap as a group.
   Sizes are tuned to keep all three pills on one row down to ~720px
   viewport — typical laptop side-by-side window width. */
.hero-trust {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.01em;
  color: var(--c-ink-soft);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.hero-trust svg {
  width: 14px;
  height: 14px;
  color: var(--c-primary);
  flex: 0 0 auto;
  display: inline-block;
}
.hero-content h1 em {
  color: var(--c-primary);
  font-weight: 500;
}
.hero-content .lead { max-width: 56ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

/* Real verified GBP rating pill below the CTAs — fills the empty hero
   space below the buttons with social proof. Sits in a soft sky pill,
   links to the real Google Maps page. */
.hero-rating {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--c-primary-soft);
  border: 1px solid var(--c-rule);
  color: var(--c-ink);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  white-space: nowrap;
  transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.hero-rating:hover {
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
  color: var(--c-ink);
}
.hero-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--c-primary);
}
.hero-rating-stars svg {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.hero-rating strong {
  font-weight: 700;
  color: var(--c-ink);
  font-size: 1rem;
}
.hero-rating-text {
  color: var(--c-ink-soft);
  font-weight: 500;
}

.hero-figure {
  position: relative;
  background: var(--c-primary);
  color: var(--c-on-primary);
  display: grid;
  place-items: stretch;
  /* No padding — the photo bleeds edge-to-edge to the diagonal cut so
     the sage panel reads as the photograph itself, not a frame around
     a smaller picture. The hero-meta overlay positions absolutely
     inside the figure regardless. */
  padding: 0;
  clip-path: polygon(0 var(--diag-h, 60px), 100% 0, 100% 100%, 0 100%);
  /* No negative margin in mobile — the figure sits directly below the
     content. The clip-path's transparent upper-left triangle still
     shows the cream page bg, keeping the diagonal visual without the
     sage panel ever creeping over the CTA buttons. */
  margin-top: 0;
}
/* Stretch the inner <figure class="placeholder-figure"> wrapper to fill
   the .hero-figure cell. Without this it collapses to image-natural
   height and leaves visible sage bands above and below the photo. */
.hero-figure .placeholder-figure {
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
}
/* Selector is more specific than the global .placeholder-figure img rule
   below, so it wins for the hero only — letting the other usages keep
   their default object-fit: contain behaviour. */
.hero-figure .placeholder-figure img,
.hero-figure img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.hero-meta {
  position: absolute;
  inset: auto auto 1.4rem 1.4rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-on-primary);
  opacity: .8;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; }
  .hero-figure { clip-path: polygon(var(--diag-h,80px) 0, 100% 0, 100% 100%, 0 100%); margin-top: 0; }
  /* Slightly tighter right-side padding on the desktop split */
  .hero-content { padding-inline-end: clamp(2rem, 3vw, 3.5rem); }
}

/* =====================================================================
   Buttons & CTAs
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-meta);
  text-decoration: none;
  transition: transform var(--speed) var(--ease), background var(--speed), color var(--speed), box-shadow var(--speed);
  white-space: nowrap;
  line-height: 1;
}
.btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover { background: var(--c-primary-deep); color: var(--c-on-primary); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-whatsapp {
  background: var(--c-whatsapp);
  color: var(--c-on-whatsapp);
  box-shadow: var(--shadow-1);
}
.btn-whatsapp:hover { background: var(--c-whatsapp-deep); color: var(--c-on-whatsapp); transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* Buttons that sit directly on a blue band (Services CTA, any future
   band-level CTA in .enquire) — flip to WHITE bg with blue text/icon
   so the button shape pops against the matching blue panel. Buttons on
   white surfaces (hero, what's-included, about, contact, the form-card)
   keep the standard blue-with-white-text style above. */
.diagonal-band .cta-row .btn-whatsapp,
.diagonal-band .cta-row .btn-primary,
.enquire > .wrap > .cta-row .btn-whatsapp,
.enquire > .wrap > .cta-row .btn-primary {
  background: #FFFFFF;
  color: var(--c-primary);
}
.diagonal-band .cta-row .btn-whatsapp:hover,
.diagonal-band .cta-row .btn-primary:hover,
.enquire > .wrap > .cta-row .btn-whatsapp:hover,
.enquire > .wrap > .cta-row .btn-primary:hover {
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn-ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--c-ink);
}
.btn-ghost:hover { background: var(--c-primary-soft); color: var(--c-ink); }
.diagonal-band .btn-ghost { color: var(--c-on-primary); }
.diagonal-band .btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--c-on-primary); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.text-link:hover { color: var(--c-accent-deep); }

/* =====================================================================
   What's included — 3 cards (asymmetric)
   --------------------------------------------------------------------- */
.included {
  background: var(--c-surface);
}
.included-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 860px) {
  .included-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
}
.cards-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 780px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; align-items: stretch; }
}
.feature-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
.feature-card .num {
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--c-accent);
  font-weight: 500;
  line-height: 1;
}
.feature-card h3 {
  font-size: var(--fs-h4);
  font-family: var(--f-display);
  font-weight: 600;
}
.feature-card p { color: var(--c-ink-soft); margin: 0; }
.feature-card ul { margin: 0; padding-left: 1.1em; color: var(--c-ink-soft); }
.feature-card li { padding-block: 0.15em; }
.cta-row {
  margin-top: clamp(2rem, 3vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* =====================================================================
   Services / Key Facilities — 12 cards in a responsive grid
   (1 col mobile → 2 col small tablet → 3 col tablet → 4 col desktop).
   12 fits 4×3 or 3×4 perfectly so there's never an empty cell.
   --------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  list-style: none;
  padding: 0;
}
@media (min-width: 560px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }

.service-card {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  /* No outer padding — the image runs edge-to-edge to the card border;
     content padding lives on .service-body below. */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Reset the inherited on-primary text from .diagonal-band so card
     text is readable on the white card surface in both themes. */
  color: var(--c-ink);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed);
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

/* Square image container at the top of the card — 1:1 aspect at every
   column count so swapping in real square photos later is plug-and-play. */
.service-card .service-img {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--c-primary-soft);
  display: block;
  overflow: hidden;
}
.service-card .service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body sits below the image with its own padding and a clear vertical
   rhythm. flex: 1 lets it fill remaining card height so all cards in
   a row stay the same total height. */
.service-card .service-body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Override the cream/white inheritance from the diagonal-band parent. */
.service-card h3,
.service-card p { color: var(--c-ink); }
.service-card ul,
.service-card li { color: var(--c-ink-soft); opacity: 1; }

.service-card h3 {
  font-size: 1.08rem;
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.005em;
}

.service-card ul {
  margin: 0;
  padding-left: 1em;
  font-size: var(--fs-meta);
  display: grid;
  gap: 0.15rem;
}
.service-card li {
  padding-block: 0.05em;
  line-height: 1.45;
}

/* =====================================================================
   About / Meet your dermatologist (asymmetric: sticky figure on desktop)
   --------------------------------------------------------------------- */
.about {
  background: var(--c-surface);
  /* Tight bottom padding so the About → Reviews transition stays
     compact. The default section-pad (~6rem) was leaving a big cream
     band between the "Start with a consultation" button and the
     "PATIENT REVIEWS" eyebrow. */
  padding-block-end: clamp(2rem, 1vw + 1.2rem, 3rem);
}
.reviews {
  /* In-page #reviews anchor: clear sticky masthead when jumping from hero / nav */
  scroll-margin-top: 5.5rem;
  /* Match the tighter About-bottom with a tighter Reviews-top so the
     two sections sit close together. */
  padding-block-start: clamp(2rem, 1vw + 1.2rem, 3rem);
  /* Also tighten Reviews → FAQ — same problem, same fix. */
  padding-block-end: clamp(2rem, 1vw + 1.2rem, 3rem);
}
section#faq {
  /* Match the tighter Reviews-bottom so the Reviews → FAQ flow stays
     compact (no big cream void between the last review card and the
     'FREQUENTLY ASKED' eyebrow). */
  padding-block-start: clamp(2rem, 1vw + 1.2rem, 3rem);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 0.85fr 1.15fr; }
}
.about-figure {
  background: var(--c-primary-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
@media (min-width: 900px) {
  .about-figure { position: sticky; top: 5.5rem; }
}
.about-figure img {
  /* Image fills the figure cell edge-to-edge — no sage bands around
     the photograph. The figure itself is capped via aspect-ratio so it
     no longer drives the About section's row height: with align-items:
     start on .about-grid, the row still collapses to the content's
     natural height. */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.about-figure {
  /* Constrain the figure's own height instead of capping the img. With
     aspect-ratio set, width:100% determines the figure's height, the
     img stretches to fill, and object-fit: cover crops cleanly. */
  aspect-ratio: 5 / 6;
  max-height: 540px;
}
.about-content { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.credentials {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.55rem;
}
.credentials li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-meta);
  color: var(--c-ink-soft);
}
.credentials svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--c-primary); flex: 0 0 auto; margin-top: 2px; }
.dr-meta {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  color: var(--c-ink);
}

/* =====================================================================
   Reviews
   --------------------------------------------------------------------- */
.reviews {
  position: relative;
}
.reviews-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: clamp(2rem, 3vw, 2.5rem);
  align-items: end;
}
@media (min-width: 860px) {
  .reviews-head { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}
.review {
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.review .stars {
  color: var(--c-accent);
  display: inline-flex;
  gap: 1px;
}
.review .stars svg { width: var(--icon-sm); height: var(--icon-sm); }
.review blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.review blockquote p {
  max-width: none;
  margin: 0 0 0.65em;
}
.review blockquote p:last-child {
  margin-bottom: 0;
}
.review .who {
  font-size: var(--fs-meta);
  color: var(--c-ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--c-rule);
  padding-top: 0.8rem;
}

/* =====================================================================
   FAQ — accordion
   --------------------------------------------------------------------- */
.faq-list {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
}
.faq-item {
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--c-accent);
  transition: transform var(--speed) var(--ease);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .body {
  padding: 0 1.2rem 1.1rem;
  color: var(--c-ink-soft);
}

/* =====================================================================
   Enquire form
   --------------------------------------------------------------------- */
.enquire {
  background: var(--c-primary);
  color: var(--c-on-primary);
  --diag-h: clamp(40px, 5.5vw, 80px);
  position: relative;
  padding-block: calc(var(--section-pad) + var(--diag-h));
  margin-block: calc(var(--diag-h) * -0.4);
  clip-path: polygon(0 var(--diag-h), 100% 0, 100% calc(100% - var(--diag-h)), 0 100%);
}
.enquire h2, .enquire h3 { color: var(--c-on-primary); }
.enquire .eyebrow { color: var(--c-accent); }
.enquire .lead { color: var(--c-on-primary); opacity: .9; }

.enquire-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .enquire-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.form-card {
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2vw + 0.6rem, 2rem);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* keep the Send button visible inside one viewport */
  max-height: min(620px, calc(100dvh - 6.5rem));
  overflow: visible;
}
.form-card label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-soft);
}
.form-card input,
.form-card select,
.form-card textarea {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-surface-3);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  width: 100%;
  min-width: 0;
  font-weight: 500;
}
.form-card textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-primary);
}
.form-card .send-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.form-card .btn-whatsapp { width: 100%; justify-content: center; padding: 0.95rem 1.2rem; }
.form-card .secondary-link {
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--c-ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  align-self: center;
  padding-bottom: 2px;
}
.form-card .secondary-link:hover { color: var(--c-primary); }

/* =====================================================================
   Contact section + Map
   --------------------------------------------------------------------- */
.contact {
  background: var(--c-surface);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 860px) {
  .contact-grid { grid-template-columns: 1fr 1.2fr; }
}
.nap-block {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: var(--fs-body);
  color: var(--c-ink-soft);
  min-width: 0;
}
.nap-block .row {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.nap-block .row svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--c-primary); flex: 0 0 auto; margin-top: 3px; }
.nap-block strong { color: var(--c-ink); }
/* Plain anchor links inside the contact NAP block (phone, WhatsApp
   number) get the dotted-underline ink-tone style. Buttons are
   excluded so the WhatsApp pill's own white-on-blue treatment wins. */
.nap-block a:not(.btn) { color: var(--c-ink); text-decoration: none; border-bottom: 1px dotted var(--c-rule); }
.nap-block a:not(.btn):hover { color: var(--c-primary); }
.hours-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0.2rem;
  font-size: var(--fs-meta);
  color: var(--c-ink-soft);
}
.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-rule);
  background: var(--c-surface-2);
  aspect-ratio: 4 / 3;
  min-height: 280px;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =====================================================================
   Footer
   --------------------------------------------------------------------- */
.footer {
  background: #1B2A4A;
  color: #ECF2FA;
  padding-block: clamp(2.4rem, 4vw, 3.4rem);
}
.footer h4 { color: #C9A96E; font-family: var(--f-body); font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; opacity: .95; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
}
.footer .brand { color: #ECF2FA; }
.footer .brand:hover { color: #ECF2FA; opacity: .85; }
.footer .brand-mark { color: #C9A96E; }
.footer p, .footer li, .footer a { color: #ECF2FA; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: var(--fs-meta); }
.footer a { text-decoration: none; opacity: .9; }
.footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.social-row {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.8rem;
}
.social-row a {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  color: var(--c-on-primary);
  transition: background var(--speed), transform var(--speed);
}
.social-row a:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.social-row svg { width: var(--icon-md); height: var(--icon-md); }

.footer-base {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  opacity: .85;
}

/* =====================================================================
   Sticky mobile WA pill
   --------------------------------------------------------------------- */
.sticky-wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  background: var(--c-whatsapp);
  color: var(--c-on-whatsapp);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-2);
}
.sticky-wa svg { width: var(--icon-md); height: var(--icon-md); }
@media (max-width: 860px) {
  .sticky-wa { display: inline-flex; }
}

/* =====================================================================
   Utility classes
   --------------------------------------------------------------------- */
.flow > * + * { margin-top: 1rem; }
.muted { color: var(--c-ink-faint); }
.center { text-align: center; }
.divider {
  height: 1px;
  background: var(--c-rule);
  border: 0;
  margin-block: clamp(2rem, 4vw, 3rem);
}

/* PLACEHOLDER figure wrapper */
.placeholder-figure {
  background: transparent;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  width: 100%;
}
.placeholder-figure img {
  background: transparent;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

/* Print + reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}