/* ==========================================================================
   Celtic Heart Day Spa
   --------------------------------------------------------------------------
   Values in this file are read from the original site's compiled Divi CSS
   (captured 2026-08-21), not estimated. Where a number looks oddly specific
   — 1080px rows, a -250px image offset, 100px hero type — it is because that
   is the original's value.

   Tokens live in :root. Change them there, not inline.
   ========================================================================== */

:root {
  /* Palette --------------------------------------------------------------
     bg-band  tinted sections + header + footer
     ink      body copy
     green    buttons and icon accents
     gold     button border only                                          */
  --bg-page:    #ffffff;
  --bg-band:    #f7f5f1;
  --ink:        #24211f;
  --ink-black:  #000000;
  --hero-sub:   #e8f9df;
  --green:      #476f4d;
  --gold:       #be9667;
  --white:      #ffffff;
  --rule:       #e0dcd4;
  --link:       #66b2c9;   /* Divi global link colour */
  --heading:    #333333;   /* Divi default heading colour */

  /* Type ----------------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", Helvetica, Arial, sans-serif;

  /* Layout — Divi's row is 80% wide, capped at 1080px --------------------- */
  --row-width: 80%;
  --row-max: 1080px;
  --section-y: 4%;
  --row-y: 2%;
}

@media (min-width: 1350px) {
  :root { --section-y: 54px; --row-y: 27px; }
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, textarea, button, select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--green); }

/* `bolder` resolves to only 400 against a 300-weight body — pin it. */
strong, b { font-weight: 700; }

/* Divi's heading defaults, confirmed by computed style against the original:
   weight 500 and #333333 — not 400/#000 as I first assumed. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--heading);
  line-height: 1.3;
  margin: 0 0 0.4em;
}
h2 { font-size: 55px; }
h3 { font-size: 30px; }
h4 { font-size: 22px; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Layout ----------------------------------------------------------------- */
.row {
  width: var(--row-width);
  max-width: var(--row-max);
  margin-inline: auto;
  padding-block: var(--row-y);
}
.section { padding-block: var(--section-y); }
.section--band { background: var(--bg-band); }
.section--flush { padding-block: 0; }

.cols { display: flex; flex-wrap: wrap; gap: 0 5.5%; }
.cols > * { flex: 1 1 47.25%; min-width: 0; }
.cols--4 { gap: 40px 5.5%; }
.cols--4 > * { flex: 1 1 20.875%; }

.center { text-align: center; }

/* Kicker — the small uppercase Playfair line above a heading ------------- */
/* Two kickers in the original: a plain text module (14px / 23.8px) and an
   <h5> one (18px / 18px). Both Playfair, uppercase, weight 500, #333. */
.kicker {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink-black);
  font-size: 14px;
  line-height: 23.8px;
  margin: 0 0 10px;
}
h5.kicker { font-size: 18px; line-height: 18px; color: var(--heading); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.7em;
  padding: 10px 50px;
  color: var(--white);
  background: var(--green);
  border: 0;            /* Divi global sets border-width:0 !important */
  border-radius: 0;
  transition: all 300ms ease;
  cursor: pointer;
}
.btn:hover { background: var(--ink-black); border-color: var(--ink-black); color: var(--white); }

/* The dermaplaning "Contact us" button is left on Divi's default button
   shape — Roboto 14px, dark text on a lighter green, tight padding — rather
   than the styled green button used everywhere else. Computed off the
   original: #6bb071 / rgba(0,0,0,.7) / 4.2px 14px. */
.btn--plain {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4.2px 14px;
  background: #6bb071;
  color: rgba(0, 0, 0, 0.7);
}
.btn--plain:hover { background: var(--green); color: var(--white); }

/* Header ----------------------------------------------------------------- */
.site-header { background: var(--bg-band); }
.site-header__inner {
  width: var(--row-width);
  max-width: var(--row-max);
  margin-inline: auto;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Divi's menu logo: the wrap is 14% of the row, but the logo itself is
   inset by a constant 30px inside it — measured at 1400/1214/1024px, the
   image is always exactly (14% - 30px) wide. box-sizing keeps that exact. */
.site-logo {
  display: block;
  line-height: 0;
  flex: 0 0 14%;
  max-width: 14%;
  padding-right: 30px;
}
.site-logo img { width: 100%; height: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  padding: 9px 13px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 980px) {
  .site-logo { flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 767px) {
  .site-logo { flex-basis: 40%; max-width: 40%; }
  .nav-toggle { display: block; }
  .site-header__inner { position: relative; flex-wrap: wrap; }
  .nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 14px 0 6px;
  }
  .nav.is-open { display: flex; }
}

/* Hero --------------------------------------------------------------------
   The scrim is a radial gradient anchored left, exactly as the original —
   it darkens behind the headline and fades out across the photo. */
.hero {
  background-image:
    radial-gradient(circle at left, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 100%),
    url("/assets/img/Hero-banner.webp");
  background-size: cover;
  background-position: center;
  padding-block: 8%;
}
.hero__inner { width: var(--row-width); max-width: var(--row-max); margin-inline: auto; }
.hero__text { width: 65%; color: var(--hero-sub); font-size: 18px; line-height: 1.6; }
.hero h1 {
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 0.2em;
}
.hero__tagline { margin-bottom: 1.6em; }

@media (max-width: 980px) {
  .hero h1 { font-size: 60px; }
  .hero__text { width: 100%; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: 45px; }
}

/* Page hero (interior pages) ----------------------------------------------
   Not a photo hero — a tinted band with centred black Playfair at 60px. */
.page-hero { background: var(--bg-band); padding-block: var(--section-y); text-align: center; }
.page-hero h1 { font-family: var(--font-display); font-size: 60px; color: var(--ink-black); line-height: 1.3; margin: 0; }
@media (max-width: 767px) { .page-hero h1 { font-size: 45px; } }

/* Intro photo pair --------------------------------------------------------
   The original overlaps these with a negative top margin on the portrait
   (-250px desktop, -190px phone), not absolute positioning. */
/* Divi's image drop shadow. Per the capture it is on: both intro photos and
   the Meet Sandra portrait (home), every photo on the services page, and both
   on dermaplaning. NOT on the Premium Products gallery, the Sit Back & Relax
   photo, or anything on the contact page. */
.photo-pair img,
.svc__photo img,
.img-shadow { box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3); }
.photo-pair__back { width: 70%; margin-right: auto; }
.photo-pair__front { width: 70%; margin-top: -250px; margin-left: auto; }
.copy-col { padding-top: 60px; }

@media (max-width: 767px) {
  .photo-pair__back  { width: 60%; }
  .photo-pair__front { width: 60%; margin-top: -190px; }
}

/* Blurbs — icon over a Playfair label ------------------------------------ */
/* On the services page each blurb is a link to its section further down
   the page (Divi's "et_clickable" module link, stored in a JS array rather
   than in the markup — which is why it isn't visible in the HTML). */
.blurb { text-align: center; display: block; color: inherit; text-decoration: none; }
a.blurb { cursor: pointer; }
a.blurb:hover .blurb__title { color: var(--green); }
a.blurb:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.blurb__icon { color: var(--green); margin: 0 auto 10px; display: block; }
.blurb__icon svg { width: 32px; height: 32px; display: block; margin-inline: auto; fill: currentColor; }
.blurb__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-black);
  margin: 0;
}
/* The services page rules a hairline between its Top Services columns. */
.cols--divided > *:not(:last-child) { border-right: 1px solid #e3e0d8; padding-right: 20px; }
@media (max-width: 980px) { .cols--divided > * { border-right: 0; padding-right: 0; } }

/* The services page left-aligns its blurbs; the homepage centres them. */
.blurb--left { text-align: left; }
.blurb--left .blurb__icon svg { margin-inline: 0; }

/* Inline icon + label (phone) -------------------------------------------- */
.icon-line { display: flex; align-items: center; gap: 12px; margin-top: 1.4em; }
.icon-line svg { width: 21px; height: 21px; fill: var(--green); flex: none; }
.icon-line a { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--ink); line-height: 1.3; }

/* Price list ------------------------------------------------------------- */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
}
.price-row .name,
.price-row .amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  color: var(--heading);
}
.price-row .amount { white-space: nowrap; }

/* Reviews ---------------------------------------------------------------- */
.reviews-head { text-align: center; margin-bottom: 40px; }
.reviews-head .score { font-family: var(--font-display); font-size: 44px; color: var(--ink-black); line-height: 1.2; }
.stars { color: #e7b84b; letter-spacing: 0.1em; font-size: 20px; }
.reviews { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.review { background: var(--bg-band); padding: 24px; }
.review__meta { font-size: 14px; color: #6b6762; margin-bottom: 8px; }
.review__name { font-weight: 500; color: var(--ink); }
.review p { font-size: 15px; line-height: 1.7; }

/* Gallery ---------------------------------------------------------------- */
.gallery img { width: 100%; }

/* Contact ---------------------------------------------------------------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.form-field input, .form-field textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule); border-radius: 0;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.map-embed { aspect-ratio: 16 / 10; border: 1px solid var(--rule); overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { padding: 8px 0; }

/* Footer ------------------------------------------------------------------
   Light band with a dark copyright bar underneath — NOT a dark footer. */
.site-footer { background: var(--bg-band); padding-block: 20px; }
.site-footer h6 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink-black);
  margin: 0 0 10px;
}
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 30px 5.5%; }
.site-footer__cols > * { flex: 1 1 20.875%; min-width: 200px; padding-top: 20px; }
.site-footer__cols > :first-child { padding-top: 0; }
.site-footer__logo img { width: 60%; margin-bottom: 10px; }
.site-footer p { color: var(--ink); font-size: 16px; line-height: 1.8; }
.site-footer a { font-size: 16px; line-height: 1.8; }
.site-footer h3 { font-family: var(--font-display); font-size: 26px; line-height: 1.3; }

.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 25px;
  background: var(--green); color: var(--white); margin-top: 6px;
}
.social-icon svg { width: 20px; height: 20px; fill: currentColor; }
.site-footer .social-icon { color: var(--white); }
.site-footer .social-icon:hover { color: var(--white); }
.social-icon:hover { background: var(--ink-black); color: var(--white); }

.colophon { background: var(--ink); padding-block: 14px; }
.colophon p { color: var(--white); font-size: 16px; line-height: 1.6; text-align: center; margin: 0; }

/* Responsive column stacking --------------------------------------------- */
@media (max-width: 980px) {
  h2 { font-size: 38px; }
  .page-hero h1 { font-size: 38px; }
  .cols > * { flex-basis: 100%; }
  .cols--4 > * { flex-basis: 47.25%; }
  .copy-col { padding-top: 40px; }
}
@media (max-width: 767px) {
  h2 { font-size: 26px; }
  .page-hero h1 { font-size: 26px; }
  .cols--4 > * { flex-basis: 100%; }
}

/* Utilities -------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink-black); color: #fff; padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   KAYAK Guides badge
   ========================================================================== */
/* The original's markup says height="50px", which browsers ignore (invalid —
   they want a bare number), so it renders at natural size there too. Measured
   off the live page it lands at ~296px wide; pinned here so it can't balloon. */
.kayak-badge { display: inline-block; width: 300px; max-width: 100%; height: auto; }

/* ==========================================================================
   Google Reviews widget
   Rebuild of the original's live widget. Swap for a real Places API feed
   before launch — a hardcoded 4.9 will drift from the real rating.
   ========================================================================== */
/* The widget is a third-party plugin and inherits Divi's body defaults:
   Roboto 500 / 14px / 23.8px / #666, with links in #66b2c9. */
.grw { display: flex; flex-wrap: wrap; gap: 24px 3%; align-items: center;
       font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 500;
       font-size: 14px; line-height: 23.8px; color: #666; }
.grw p, .grw a { font-family: inherit; font-weight: inherit; font-size: 14px; line-height: 23.8px; }
.grw__summary { flex: 0 0 260px; display: flex; gap: 14px; align-items: flex-start; }
.grw__avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.grw__name { color: #66b2c9; margin: 0 0 6px; }
.grw__name a, .grw-card__name a { color: inherit; }
.grw__rating { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.grw__score { color: #666; }
.grw__stars { color: #e7711b; font-size: 17px; letter-spacing: 1px; }
.grw__based { margin: 0 0 4px; color: #666; }
.grw__powered { margin: 0 0 10px; color: #666; }
.grw__google span:nth-child(1) { color: #4285f4; }
.grw__google span:nth-child(2) { color: #ea4335; }
.grw__google span:nth-child(3) { color: #fbbc05; }
.grw__google span:nth-child(4) { color: #4285f4; }
.grw__google span:nth-child(5) { color: #34a853; }
.grw__google span:nth-child(6) { color: #ea4335; }
.grw__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #4285f4; color: #fff; font-size: 14px; font-weight: 500;
  padding: 7px 16px; border-radius: 20px;
}
.grw__cta:hover { background: #2b6cd4; color: #fff; }
.grw__g {
  background: #fff; color: #4285f4; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

.grw__carousel { flex: 1 1 480px; position: relative; min-width: 0; padding-bottom: 26px; }
.grw__track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.grw__track::-webkit-scrollbar { display: none; }

.grw-card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 220px;
  scroll-snap-align: start;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 16px;
}
.grw-card__head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.grw-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.grw-card__name { margin: 0; color: #66b2c9; }
.grw-card__when { margin: 0; color: #666; }
.grw-card__stars { margin: 0 0 6px; color: #e7711b; font-size: 15px; letter-spacing: 1px; }
.grw-card__text {
  margin: 0; color: #666;
  max-height: 8.6em; overflow-y: auto; padding-right: 6px;
}
.grw-card__text::-webkit-scrollbar { width: 4px; }
.grw-card__text::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.grw__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid #e2e2e2; color: #666;
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.grw__arrow:hover { background: #f2f2f2; }
.grw__arrow--prev { left: -17px; }
.grw__arrow--next { right: -17px; }

.grw__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.grw__dots button {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: #d5d5d5; cursor: pointer;
}
.grw__dots button[aria-current="true"] { background: #e7711b; }

@media (max-width: 980px) {
  .grw__summary { flex-basis: 100%; }
  .grw-card { flex-basis: calc((100% - 16px) / 2); }
  .grw__arrow--prev { left: -8px; }
  .grw__arrow--next { right: -8px; }
}
@media (max-width: 640px) {
  .grw-card { flex-basis: 88%; }
}

/* ==========================================================================
   Footer map
   ========================================================================== */
.footer-map { width: 100%; height: 450px; border: 0; display: block; }


/* ==========================================================================
   Service page components
   ========================================================================== */

/* A service block ---------------------------------------------------------
   Sections 3-6: a 3/4 content column with stacked inner rows, and a 1/4
   photo column beside it. Sections 7-10 are a plain half/half.
   The original has no dividers inside these blocks. */
.svc { display: flex; flex-wrap: wrap; gap: 0 5.5%; align-items: flex-start; }
/* Divi's column fractions exactly: 3/4 = 73.625%, 1/4 = 20.875%, 5.5% gutter. */
.svc__body { flex: 1 1 73.625%; min-width: 0; }
.svc__photo { flex: 0 1 20.875%; min-width: 160px; }
.svc--half > .svc__body,
.svc--half > .svc__photo { flex: 1 1 47.25%; }

/* capture: image_2 padding-top 90px; images 3, 4 and the makeup /
   spray-tan columns 100px. Drops to 0 below 980px. */
.svc__photo--drop90  { padding-top: 90px; }
.svc__photo--drop100 { padding-top: 100px; }

/* An inner row: one full-width column, or two side by side. */
.svc-row { display: flex; flex-wrap: wrap; gap: 0 5.5%; margin-top: 26px; }
.svc-row > * { flex: 1 1 47.25%; min-width: 220px; }
.svc-row--full > * { flex-basis: 100%; }

.svc h3 { font-family: var(--font-display); font-size: 20px; line-height: 32px; color: var(--ink-black); margin: 0 0 6px; }
/* The Vascular Lesions heading alone computes 26px in the original. */
.svc h3.svc__h3--lg { font-size: 26px; line-height: 26px; color: var(--heading); }
.svc__sub {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 23.8px;
  color: var(--ink-black);
  margin: 0 0 10px;
}
/* SharpLight block — measured against the original: the text column is
   pushed down 100px so it centres against the 500px logo panel, with 30px
   between the heading, the SHARPLIGHT label and the copy, and 24px before
   the button. */
.svc--sharplight .svc__body { padding-top: 100px; }
.svc--sharplight h3 { margin-bottom: 30px; }
.svc--sharplight .svc__sub { margin-bottom: 30px; }
.svc--sharplight__copy { margin-bottom: 24px; }
@media (max-width: 980px) {
  .svc--sharplight .svc__body { padding-top: 0; }
}

.svc__note { font-style: italic; font-size: 16px; line-height: 1.8; color: var(--ink); }

/* Price line: name — dotted leader — price, all Playfair 20px */
.price-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; margin: 0; }
.price-line .name,
.price-line .amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  color: var(--heading);
}
.price-line .dots { flex: 1 1 auto; border-bottom: 1px dotted #cfcabf; transform: translateY(-5px); min-width: 12px; }
.price-line .amount { white-space: nowrap; }
/* The homepage price names are wrapped in links in the original; they inherit
   the heading colour rather than the link blue. */
.price-row .name a, .price-line .name a { color: inherit; }
/* Later price modules (lash lift, facials, enhancements, makeup, spray
   tan) carry line-height 1.3em = 26px; the earlier ones sit at 20px. */
.price-line--tall .name,
.price-line--tall .amount { line-height: 26px; }

/* Feature list — the original's bullet is the ETmodules "W" glyph: a rounded
   square outline with a filled square inside, 26px, #476F4D. Not a tick. */
.featlist { list-style: none; margin: 0; padding: 0; }
.featlist li {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.featlist svg { width: 26px; height: 26px; flex: none; color: #476f4d; }


/* Contact page: icon + detail rows */
.contact-line { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.contact-line svg { width: 25px; height: 25px; fill: var(--green); flex: none; }
/* Computed against the original: Montserrat 300 / 16px / 27.2px / #24211f —
   body text, not the Playfair 20px I first assumed. */
.contact-line span, .contact-line a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 27.2px;
  color: var(--ink);
}
.contact-line a:hover { color: var(--green); }

/* Contact form — transparent inputs with a hairline rule, per the original */
.contact-form { margin-top: 50px; }
.contact-form .form-field input,
.contact-form .form-field textarea {
  background: transparent;
  border: 1px solid #cfcabf;
  color: var(--ink);
}
.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder { color: var(--ink); opacity: 0.75; }

@media (max-width: 980px) {
  .svc__body, .svc__photo { flex-basis: 100%; }
  .svc__photo--drop90, .svc__photo--drop100 { padding-top: 0; }
  .svc__photo { margin-top: 30px; max-width: 320px; }
  .svc__grid > * { flex-basis: 100%; border-right: 0; padding: 0 0 18px; }
}


/* ==========================================================================
   Divi fallback defaults
   --------------------------------------------------------------------------
   Text modules the original never styled fall through to Divi's body
   defaults: Roboto 500 / 14px / 1.7em / #666. Reproduced so those blocks
   match rather than picking up our Montserrat body style.
   ========================================================================== */
.divi-default {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  color: #666666;
}

/* The dermaplaning page's copy modules set no font-family, so they inherit
   Divi's Roboto rather than Montserrat. An inconsistency in the original —
   swap .font-roboto for nothing to normalise it onto Montserrat. */
.font-roboto { font-family: "Roboto", Helvetica, Arial, sans-serif; }
.lh-238 { line-height: 23.8px; }


/* ==========================================================================
   Toasts
   --------------------------------------------------------------------------
   Not part of the original site — the original gave no feedback at all on
   submit. Bottom-right on desktop, full-width along the bottom on phones.
   The tray ignores pointer events so it never blocks the page behind it;
   the toasts themselves take them back so they stay dismissable.
   ========================================================================== */
.toast-tray {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 380px;
  padding: 14px 16px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast--error { background: #a33333; }

.toast__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; fill: currentColor; }
.toast__msg  { margin: 0; flex: 1 1 auto; }

.toast__close {
  flex: 0 0 auto;
  padding: 0 0 0 4px;
  background: none;
  border: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}
.toast__close:hover, .toast__close:focus-visible { opacity: 1; }

@media (max-width: 600px) {
  .toast-tray { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
  .toast { max-width: none; }
}

/* Still appears and still disappears — it just doesn't slide. */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   Staging flag
   --------------------------------------------------------------------------
   Only ever rendered when site.js decides IS_STAGING — see the top of that
   file. Sits along the bottom so it never covers the header or the toast
   tray, which is raised to clear it.
   ========================================================================== */
.staging-flag {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  padding: 7px 14px;
  background: #b3541e;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
.has-staging-flag .toast-tray { bottom: 58px; }
@media (max-width: 600px) {
  .has-staging-flag .toast-tray { bottom: 62px; }
}