/*
Theme Name: Summerlin Med Spa
Theme URI: https://summerlinmedspa.com/
Description: Summerlin Med Spa child theme. Carries the site header, footer and the full design system for the service pages. Sits on Twenty Twenty-One. Do not delete the parent theme.
Author: Summerlin Med Spa
Version: 1.5.0
Template: twentytwentyone
Text Domain: summerlinmedspa
*/

/* ============================================================
   HOW THIS FILE IS ORGANISED

   1.  Design tokens
   2.  Reset and page canvas
   3.  Layout helpers
   4.  Buttons
   5.  Header and navigation
   6.  Footer
   7.  Page sections, all prefixed ds-
   8.  Responsive

   Every colour, size and timing value lives in section 1. Reskinning this
   site means editing those values, not hunting through rules.

   STANDING RULE. Any edit to this file bumps the Version number in the
   comment block above, in the same edit. WordPress serves this stylesheet
   as style.css?ver=<that number> and the server caches static files for
   360 days. If the number does not move, nobody sees the new CSS. Not
   after a cache purge, not in a fresh incognito window.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {

  /* Brand */
  --color-brand-taupe:        #CBA590;
  --color-brand-taupe-dark:   #A77F6A;
  --color-brand-taupe-light:  #E7D2C7;

  /* Surfaces */
  --color-white:              #FFFFFF;
  --color-off-white:          #FCFAF8;
  --color-cream:              #F7F2EF;
  --color-sand:               #F5E6D0;

  /* Ink */
  --color-ink:                #1B1817;
  --color-charcoal:           #2B2725;
  --color-body:               #544D49;
  --color-muted:              #746C67;
  --color-border:             #DED3CD;
  --color-black:              #080808;

  /* Semantic text roles */
  --text-heading:             var(--color-charcoal);
  --text-body:                var(--color-body);
  --text-muted:               var(--color-muted);

  /* Type families */
  --font-display: "Brygada 1918", Georgia, "Times New Roman", serif;
  --font-body:    "Lato", Arial, Helvetica, sans-serif;

  /* Type scale */
  --text-eyebrow:   12px;
  --text-nav:       13px;
  --text-button:    12px;
  --text-body-size: 17px;
  /* 6.11vw resolves to 88px at a 1440 viewport, which is what the live
     site renders. Worth knowing why. The old page CSS declared a
     --text-h1 of clamp(52px, 5.2vw, 76px) and then never applied it to
     anything, so the H1 was silently taking its size from Astra instead.
     Astra is gone, so the real number is set here. */
  --text-h1: clamp(38px, 6.11vw, 88px);
  --text-h2: clamp(38px, 3.5vw, 54px);
  --text-h3: 27px;
  --text-h4: 21px;

  --line-heading: 1.05;
  --line-body:    1.72;

  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.12em;
  --tracking-nav:     0.14em;

  /* Layout */
  --container:        1140px;
  --container-footer: 1200px;
  --header-pad:       40px;
  --gutter:           24px;
  --section-pad:      112px;
  --header-height:    132px;
  /* The room the page reserves for the bar. Fixed per breakpoint and
     never altered by .sms-scrolled, so shrinking the bar cannot move
     the document underneath it. */
  --header-space:     132px;

  /* Header geometry, measured directly off the live site at a 1440
     viewport rather than off a screenshot. Screenshots were captured on
     a 125 percent display, which made every value read 25 percent large
     and is why earlier versions were oversized across the board.

     Live numbers at 1440. Header 132 tall. Logo artwork 84 tall with its
     top edge at y17. Nav and button both centred on y73, which is 7px
     below the header's own centre line, not level with it.

     The logo file carries transparent padding at the bottom, so the live
     img box is 100 tall while the visible artwork is only 84. Ours is
     trimmed, so --logo-h is the artwork height directly. */
  --nav-pad:     24px;
  --logo-h:      84px;
  --logo-offset: -7px;
  --nav-drop:    7px;

  /* Motion */
  --duration-standard: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ============================================================
   2. RESET AND PAGE CANVAS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* clip, not hidden, and only on the root element. This matters.
   overflow-x: hidden turns whatever carries it into a scroll container,
   and a sticky header inside a scroll container sticks to that box
   rather than to the window, so it scrolls away like any other element.
   overflow-x: clip does the same clipping job without that side effect. */
html { overflow-x: clip; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* The bar is fixed, so the page has to reserve its height. This sits
   after the reset above, which zeroes body padding. */
body { padding-top: var(--header-space); }


body {
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--line-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  margin: 0;
  font-weight: 500;
  line-height: var(--line-heading);
  letter-spacing: -0.015em;  /* Splits a wrapped heading into roughly even lines instead of dumping
     the last word on a line of its own. A single short word under a long
     line reads as broken even when the heading is perfectly centred. */
  text-wrap: balance;
}

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

a { color: var(--color-brand-taupe-dark); text-decoration: none; }
a:hover { color: var(--color-ink); }

/* WordPress convention. Keeps the skip link out of sight until focused. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.screen-reader-text:focus {
  width: auto; height: auto; clip: auto;
  top: 8px; left: 8px; z-index: 100;
  padding: 12px 20px;
  background: var(--color-white); color: var(--color-ink);
}


/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.ds-container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* A comfortable reading column, for anything that is prose rather than
   a designed section. Used by the post and 404 shells. */
.ds-measure { max-width: 760px; margin-inline: auto; }
.ds-measure h1 { font-size: var(--text-h2); margin-bottom: 24px; }
.ds-measure p { font-size: 17px; line-height: var(--line-body); }

/* Page content on this site is edge to edge by design. The wrapper
   WordPress prints around the content is stripped of its own width,
   padding and trailing margin, so a section can run to both edges.

   This is deliberately not the usual 100vw bleed trick. 100vw includes
   the scrollbar, so on a desktop browser every banded section ends up
   about 15px wider than the viewport and sits 7px off centre. Widening
   the wrapper instead has no such error. */
.entry-content,
.site-content,
article {
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.ds-bleed { width: 100%; }


/* ============================================================
   4. BUTTONS
   ============================================================ */
.ds-btn {
  min-height: 50px;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-white);
  transition:
    background-color var(--duration-standard) var(--ease-standard),
    color var(--duration-standard) var(--ease-standard),
    border-color var(--duration-standard) var(--ease-standard);
}
.ds-btn:hover {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

/* Outline variant, for use on the taupe header bar. */
.ds-btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.85);
}
.ds-btn-outline:hover {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}


/* ============================================================
   5. HEADER AND NAVIGATION

   The nav is plain HTML in header.php, written twice, once for the
   desktop bar and once for the mobile drawer. There is no WordPress
   menu to configure, so both copies have to be edited together.
   ============================================================ */
.sms-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: var(--color-brand-taupe);
  transition: box-shadow var(--duration-standard) var(--ease-standard);
}

/* Once past the hero the bar shrinks, so Book Now stays reachable
   without eating a third of a laptop screen for the whole scroll.
   The class goes on the root element rather than the header, so the
   mobile drawer can read the new header height too. */
:root.sms-scrolled {
  --logo-h:      58px;
  --header-height: 84px;
  --logo-offset: -4px;
  --nav-drop:    5px;
}
:root.sms-scrolled .sms-header { box-shadow: 0 2px 18px rgba(27, 24, 23, 0.16); }
/* The bar is out of the flow and the page reserves a constant
   --header-space, so animating its height moves nothing below it.
   That is what makes the shrink smooth instead of a shake. */
.sms-nav-inner { transition: height var(--duration-standard) var(--ease-standard); }
.sms-logo img  { transition: height var(--duration-standard) var(--ease-standard); }

/* A sticky bar hides anything you jump to, unless the page reserves
   room for it. Invisible until someone links to a heading. */
html { scroll-padding-top: calc(var(--header-height) + 16px); }
/* No max-width. The live header runs the full window less 40px each
   side at every width, so a cap here would part company with it on a
   wide monitor. */
.sms-nav-inner {
  margin: 0 auto;
  padding: 0 var(--header-pad);
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.sms-logo { flex: none; display: flex; align-items: center; }
.sms-logo img {
  height: var(--logo-h);
  width: auto;
  position: relative;
  top: var(--logo-offset);
}

/* Nav and button sit below the row's centre line, not on it. */
.sms-nav-links,
.sms-nav-right { position: relative; top: var(--nav-drop); }

/* Spacing between items comes from each link's own padding rather than
   a gap, which is how the live nav is built and is why its hit targets
   are as generous as they are. */
.sms-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 41px;
}
.sms-nav-links a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  padding: 0 var(--nav-pad);
  position: relative;
}
/* The rule is inset by exactly the link's own padding, so it sits under
   the word rather than under the whole hit area. A border on the box
   would run the full padded width. */
.sms-nav-links a::after {
  content: '';
  position: absolute;
  left: var(--nav-pad);
  right: var(--nav-pad);
  bottom: -7px;
  height: 1.5px;
  background: var(--color-white);
  opacity: 0;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.sms-nav-links a:hover { color: var(--color-white); }
.sms-nav-links a:hover::after { opacity: 1; }

.sms-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: none;
}
.sms-nav-cta {
  min-height: 37px;
  padding: 0 45px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
}

/* Social icons are footer only, by decision. The old site also had them
   in the header beside Book Now, and they were dropped from there so
   nothing sits next to that button competing for the click. */
.sms-socials { display: flex; align-items: center; gap: 24px; }
.sms-socials a { display: inline-flex; }
.sms-socials svg {
  width: 18px; height: 18px;
  fill: var(--color-white);
  opacity: 0.92;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.sms-socials a:hover svg { opacity: 1; }

/* Mobile burger and drawer. Hidden above 900px by the rules in section 8. */
.sms-burger {
  display: none;
  margin-left: 14px;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: var(--color-brand-taupe);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.sms-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-white);
  transition: transform 160ms var(--ease-standard), opacity 160ms var(--ease-standard);
}
.sms-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sms-burger.is-open span:nth-child(2) { opacity: 0; }
.sms-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sms-drawer {
  display: none;
  position: fixed;
  top: var(--header-height); left: 0; right: 0;
  z-index: 25;
  background: var(--color-brand-taupe-dark);
  padding: 8px 22px 26px;
  flex-direction: column;
  box-shadow: 0 28px 60px rgba(27, 24, 23, 0.28);
}
.sms-drawer.is-open { display: flex; }
.sms-drawer a {
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}
.sms-drawer a:last-child { border-bottom: none; }


/* ---------- Services dropdown ------------------------------------
   Six pillar categories only. Deliberately not the 39 child pages: a
   site-wide link is the strongest internal link on the site, and
   spending it on six pillars concentrates authority where it belongs
   instead of flattening the silo. Every child is one click further,
   from its own pillar page.

   The trigger stays a real link, so Services is still clickable. The
   panel opens on hover and on keyboard focus. */
.sms-nav-drop { position: relative; display: inline-flex; align-items: center; }

/* The panel is styled from the same palette as the page, not from
   browser defaults: cream ground, hairline taupe rules between items,
   category names in the display face. It reads as a continuation of
   the site rather than a control bolted onto it. */
.sms-submenu {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 288px;
  padding: 4px 0;
  background: var(--color-cream);
  border: 1px solid rgba(203, 165, 144, 0.38);
  box-shadow: 0 26px 62px rgba(27, 24, 23, 0.17);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 170ms var(--ease-standard), transform 170ms var(--ease-standard);
  z-index: 40;
}
.sms-submenu::before {
  content: '';
  position: absolute;
  top: -24px; left: 0; right: 0; height: 24px;
}
.sms-nav-drop.is-open .sms-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Category names use the display face at the same weight as the H4
   category headings on the page, so a pillar is named the same way
   wherever it appears. */
.sms-nav-links .sms-submenu a {
  display: block;
  position: relative;
  padding: 15px 30px;
  /* Identical to the bar above it: same face, same size, same casing.
     The panel should read as the menu opening, not as page content
     appearing. Brygada at 17px made it a different component. */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-charcoal);
  border-bottom: 1px solid rgba(203, 165, 144, 0.3);
  transition: background 150ms var(--ease-standard), color 150ms var(--ease-standard);
}
.sms-nav-links .sms-submenu a::after { display: none; }

/* A taupe edge marks the hovered row instead of a heavy fill. */
.sms-nav-links .sms-submenu a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-brand-taupe);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 150ms var(--ease-standard);
}
.sms-nav-links .sms-submenu a:hover,
.sms-nav-links .sms-submenu a:focus-visible {
  background: var(--color-white);
  color: var(--color-brand-taupe-dark);
}
.sms-nav-links .sms-submenu a:hover::before,
.sms-nav-links .sms-submenu a:focus-visible::before { transform: scaleY(1); }

/* The closing row is a button-style line, matching the letterspaced
   uppercase used on every call to action across the site. */
.sms-nav-links .sms-submenu .sms-submenu-all {
  border-bottom: 0;
  padding: 15px 30px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-brand-taupe-dark);
  background: rgba(203, 165, 144, 0.13);
}
.sms-nav-links .sms-submenu .sms-submenu-all:hover,
.sms-nav-links .sms-submenu .sms-submenu-all:focus-visible {
  background: var(--color-brand-taupe);
  color: var(--color-white);
}
.sms-nav-links .sms-submenu .sms-submenu-all::before { display: none; }

/* A quiet caret so the word reads as something that opens. */
.sms-nav-drop-trigger::before {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -3px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
  transition: transform 170ms var(--ease-standard);
}
.sms-nav-drop.is-open .sms-nav-drop-trigger::before {
  transform: rotate(-135deg);
}
.sms-nav-links .sms-nav-drop-trigger { padding-right: calc(var(--nav-pad) + 6px); }

/* ---------- drawer accordion (mobile) ---------- */
.sms-drawer-group { display: flex; flex-direction: column; }
.sms-drawer-toggle {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding: 17px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sms-drawer-toggle::after {
  content: '+';
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transition: transform 180ms var(--ease-standard);
}
.sms-drawer-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.sms-drawer-sub { display: none; flex-direction: column; padding-left: 16px; }
.sms-drawer-sub.is-open { display: flex; }
.sms-drawer .sms-drawer-sub a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Below the burger breakpoint the desktop bar is hidden anyway, but be
   explicit so the panel can never appear over the drawer. */
@media (max-width: 900px) {
  .sms-submenu { display: none; }
}


/* ============================================================
   6. FOOTER
   ============================================================ */
/* A white band between the page and the footer. The closing call to
   action sits on taupe and so does the footer, so without this break
   the two run together as one undifferentiated block. It lives in
   footer.php rather than in page content, so every page gets it and
   nobody has to remember to add it. */
/* The white band is gone. The closing block and the footer are the same
   taupe, so a single rule at the top of the footer marks the join.
   Kept as a rule rather than a gap because a gap separates by absence,
   which is what made it read as a void. */
.sms-footer-break { display: none; }

.sms-footer {
  background: var(--color-brand-taupe);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding: 96px 0 0;
}

/* Four columns, and the second one is deliberately empty. That gap is
   what separates the logo from the two text blocks and keeps them over
   on the right, which is how the live footer reads. Do not collapse it
   to three columns, the spacing is the design. */
.sms-footer-inner {
  width: min(100% - 96px, var(--container-footer));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  align-items: start;
  /* The live site leaves 112 here. This is deliberately tighter, so the
     copyright and social row sits closer to the block above it. */
  padding-bottom: 56px;
}
.sms-footer-logo    { grid-column: 1; }
.sms-footer-hours   { grid-column: 3; }
.sms-footer-contact { grid-column: 4; }

/* Width driven, not height driven. The live footer logo fills its
   column exactly, which is what keeps it in step with the two text
   columns beside it. */
.sms-footer-logo img { width: 100%; height: auto; max-width: 262px; }

/* Every cell reads from the same left edge, headings included. */
.sms-footer-hours,
.sms-footer-contact { text-align: left; }

.sms-footer h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: 0;
  margin: 0 0 20px;
}
.sms-footer-hours ul { list-style: none; margin: 0; padding: 0; }
.sms-footer-hours li,
.sms-footer-contact p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-white);
  margin: 0;
}
.sms-footer-contact .sms-footer-note { font-style: italic; }
.sms-footer-contact a { color: var(--color-white); }
.sms-footer-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The address block is one link to Google Maps. The phone stays its own
   link, so a tap on a phone still dials rather than opening a map. */
.sms-footer-address { display: block; }
.sms-footer-address:hover p { text-decoration: underline; text-underline-offset: 3px; }

.sms-footer-legal {
  /* No second rule here. One line at the top of the footer is the
     division, and a second one this close reads as a table. */
  padding: 24px 0 24px;
}
.sms-footer-legal-inner {
  width: min(100% - 96px, var(--container-footer));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sms-footer-legal p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-white);
}


/* ============================================================
   7. PAGE SECTIONS

   Everything below styles the markup that lives in a page's content.
   Page content carries markup and words. It carries no CSS of its own,
   so a change here updates every service page at once.
   ============================================================ */

/* Any paragraph that follows another one gets a gap. Put on the second
   paragraph rather than on all of them, so every single paragraph section
   in the design keeps its existing spacing exactly. */
.entry-content p + p { margin-top: 1.4em; }

/* ---------- shared section furniture ---------- */
.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 700;
  color: var(--color-brand-taupe-dark);
  margin-bottom: 16px;
}
.ds-eyebrow.light { color: rgba(255, 255, 255, 0.85); }
.ds-eyebrow.centered { text-align: center; }

.ds-section { padding: var(--section-pad) 0; }
.ds-section-white { background: var(--color-white); }
.ds-section-cream { background: var(--color-cream); }

.ds-section-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 64px;
}
.ds-section-head h2 { font-size: var(--text-h2); }

/* The section directly under the hero introduces the page rather than
   opening a chapter, so its heading is a deliberate step down. The hero
   runs at 88, this at 36, chapter headings at 50.4, and the cards inside
   them at 27 and 24. Everything stays larger than what it contains. */
.ds-lead h2 { font-size: 36px !important; line-height: 1.14; }

/* ---------- hero ---------- */
/* Top padding is measured off the live site, as the gap from the base
   of the logo down to the eyebrow. The header bar and this section are
   the same taupe, so the two read as one block and the spacing between
   them has to be right or the header looks like it is floating. */
.ds-hero {
  background: var(--color-brand-taupe);
  padding: 38px 0 104px;
}
.ds-hero-inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.ds-hero h1 { font-size: var(--text-h1); color: var(--color-white); }
.ds-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: var(--line-body);
  margin: 24px auto 0;
  max-width: 62ch;
}
.ds-hero-cta { margin-top: 36px; display: flex; justify-content: center; }

/* ---------- split, image beside text ---------- */
.ds-split { padding: var(--section-pad) 0; }
.ds-split-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.ds-split-grid.reverse { grid-template-columns: 1.05fr 0.95fr; }
.ds-split-grid.reverse .ds-split-img { order: 2; }
.ds-split h2 { font-size: var(--text-h2); margin-bottom: 28px; }
.ds-split p {
  font-size: 16px;
  line-height: var(--line-body);
  max-width: 62ch;
  margin: 0;
}

/* ---------- text block, a split with no image ---------- */
.ds-textblock { padding: var(--section-pad) 0; }
/* Left aligned. Centred body copy makes every line start in a
   different place, so the eye has to hunt for each new line, and it
   also broke the left edge the rest of the page is built on. */
.ds-textblock-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.ds-textblock h2 { font-size: var(--text-h2); margin-bottom: 28px; }
.ds-textblock p {
  font-size: 16px;
  line-height: var(--line-body);
  margin: 0 auto;
  max-width: 68ch;
  text-align: left;
}

/* ---------- the page's one photograph ----------
   Held at the image's own 16 by 9 rather than a 4 by 3 crop, because
   these photographs put their subjects across the full width and a
   4 by 3 box cuts the outer ones in half.

   The !important trio is load bearing. An image optimiser rewrites img
   tags server side and stamps an inline height on them, which collapses
   any image sitting in an aspect-ratio box. Inline styles beat normal
   rules, so only !important wins. Do not tidy it away. */
.ds-split-photo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ---------- image placeholder ----------
   Stands in until a page's real photograph is uploaded. Swapping it
   for a real image means replacing this div with an img tag carrying
   class ds-split-photo. */
.ds-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-brand-taupe-light);
  border: 1px dashed var(--color-brand-taupe-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--color-brand-taupe-dark);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---------- three column numbered grid ---------- */
/* Flex rather than grid purely so an incomplete final row centres itself.
   Injectables splits into six, seven and two by what actually exists, and a
   seventh card alone on the left reads as a mistake rather than a design. */
.ds-grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 48px;
}
.ds-grid-3 > * { flex: 0 1 calc((100% - 96px) / 3); min-width: 0; }
.ds-grid-item { padding: 28px 0 34px; border-top: 1px solid var(--color-border); }
.ds-grid-num {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-brand-taupe-dark);
  font-weight: 700;
}
/* Two lines are reserved whether the heading uses them or not, so a one
   line card and a two line card start their copy at the same height and
   the row stays level. The copy cap that goes with this is 44 characters,
   which is what keeps any of them from reaching a third line at the
   narrowest width where these still sit three across.

   1.05 is right for a large single line headline and too tight for a
   heading that wraps, hence the looser spacing here. */
.ds-grid-item h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
  min-height: 2.4em;
  margin: 12px 0 14px;
}
.ds-grid-item p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}
.ds-treatment-link { color: inherit; }
.ds-treatment-link:hover {
  color: var(--color-brand-taupe-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- benefits ---------- */
.ds-benefits { padding: var(--section-pad) 0; }
/* Centred block with equal air either side. The heading centres, the
   copy inside stays left aligned because centred prose is harder to read. */
.ds-benefits-head {
  margin: 0 auto 56px;
  max-width: 780px;
  text-align: center;
}
.ds-benefits-head h2 { font-size: var(--text-h2); margin-bottom: 20px; }
.ds-benefits-head p {
  font-size: 16px;
  line-height: var(--line-body);
  /* fit-content is the whole trick. A one line intro gets a box exactly
     as wide as its sentence, so centring the box centres the words. A
     long paragraph still fills the full reading width and stays left
     aligned. One rule, both cases, nothing to decide per page. */
  width: fit-content;
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
}
.ds-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
}
.ds-benefit-row { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.ds-benefit-row strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
}
.ds-benefit-row span { font-size: 15px; line-height: 1.65; color: var(--text-muted); }

/* ---------- process ---------- */
.ds-process { padding: var(--section-pad) 0; }
.ds-process-inner { max-width: 860px; margin-inline: auto; }
/* Identical construction to the benefits head, so the two read as the
   same thing. Block centred, heading centred, copy left aligned. */
.ds-process-head {
  margin: 0 auto 56px;
  max-width: 780px;
  text-align: center;
}
.ds-process-head h2 { font-size: var(--text-h2); margin-bottom: 20px; }
.ds-process-intro {
  font-size: 16px;
  line-height: var(--line-body);
  /* fit-content is the whole trick. A one line intro gets a box exactly
     as wide as its sentence, so centring the box centres the words. A
     long paragraph still fills the full reading width and stays left
     aligned. One rule, both cases, nothing to decide per page. */
  width: fit-content;
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
}
.ds-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}
.ds-step-num {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-brand-taupe-dark);
  font-weight: 700;
  padding-top: 6px;
}
.ds-step h3 { font-size: 24px; margin: 0 0 8px; }
.ds-step p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* ---------- why choose ---------- */
.ds-why { background: var(--color-sand); padding: var(--section-pad) 0; }
.ds-why h2 { color: var(--color-ink); }
.ds-why .ds-eyebrow { color: var(--color-brand-taupe-dark); }
.ds-why-item { padding: 30px 0 36px; border-top: 1px solid var(--color-border); }
.ds-why-item h3 {
  font-size: 24px;
  line-height: 1.2;
  min-height: 2.4em;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.ds-why-item p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* ---------- FAQ ----------
   The toggle is handled by js/sms-ui.js. There are no inline handlers,
   so the behaviour is defined once for the whole site. */
.ds-faq { padding: var(--section-pad) 0; background: var(--color-white); }
.ds-faq-head { text-align: center; margin-bottom: 56px; }
.ds-faq-head h2 { font-size: var(--text-h2); }
.ds-faq-list { max-width: 880px; margin-inline: auto; }
.ds-faq-item { border-bottom: 1px solid var(--color-border); }
.ds-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-heading);
}
.ds-faq-q .q {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  padding-right: 24px;
}
.ds-faq-q .icon {
  font-size: 22px;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--duration-standard) var(--ease-standard);
}
.ds-faq-item.open .ds-faq-q .icon { transform: rotate(45deg); }
/* The open and closed states animate through grid-template-rows rather
   than a max-height number. A max-height has to be guessed high enough
   for the longest answer on the site, and any answer taller than the
   guess is silently clipped. Across 45 pages of FAQs that is a bug
   waiting to happen, and 0fr to 1fr fits whatever the answer actually
   is, at any width. */
.ds-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--duration-standard) var(--ease-standard),
    opacity var(--duration-standard) var(--ease-standard);
}
.ds-faq-a > * { overflow: hidden; min-height: 0; }
.ds-faq-item.open .ds-faq-a { grid-template-rows: 1fr; opacity: 1; }
.ds-faq-a p {
  font-size: 16px;
  line-height: var(--line-body);
  max-width: 70ch;
  color: var(--text-body);
  margin: 0;
  /* Padding has to collapse with the answer. A grid row at 0fr gives the
     paragraph no height, but its own padding survives, which leaves every
     closed question carrying a 26px gap underneath it. */
  padding-bottom: 0;
  transition: padding-bottom var(--duration-standard) var(--ease-standard);
}
.ds-faq-item.open .ds-faq-a p { padding-bottom: 26px; }

/* ---------- closing call to action ----------
   Fixed block above the footer on every service page. The heading, the
   two paragraphs and the button label change per page. The portrait and
   the layout do not. */
.ds-cta { background: var(--color-brand-taupe); padding: 96px 0; }
.ds-cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.ds-cta h2 { font-size: var(--text-h2); color: var(--color-white); margin-bottom: 20px; }
.ds-cta p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: var(--line-body);
  margin: 0 0 16px;
}
.ds-cta p.strong { color: var(--color-white); font-weight: 700; margin-bottom: 32px; }
.ds-cta .inline-link {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The !important trio is load bearing, not laziness. 10Web's image
   optimiser rewrites img tags server side and stamps an inline
   height:56.25% on them, which collapses any image inside an
   aspect-ratio box. Inline styles beat normal rules, so only
   !important wins. Do not tidy this up. */
.ds-cta-img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* ============================================================
   8. RESPONSIVE

   Breakpoints, largest first. 1024 tightens the header, which carries
   five links plus a button and needs the room. 900 is where the nav
   becomes a burger. 768 collapses every two column grid.
   ============================================================ */

/* The header carries five links plus a button, which is one more link
   than the previous build's header was designed for. It runs out of
   room well before the burger appears at 900, and when it does the
   button is pushed past the edge and every page scrolls sideways.
   These two steps tighten it in stages. Measured at 1600, 1440, 1366,
   1280, 1200, 1100, 1024, 1000, 960 and 901. Do not remove either step
   without re-measuring that whole range.

   No rules here touch .sms-socials. Those icons live in the footer
   only, so shrinking them at narrow widths would shrink the wrong
   thing. */
@media (max-width: 1200px) {
  :root {
    --nav-pad: 16px;
    --logo-h: 74px;
    --logo-offset: -6px;
    --nav-drop: 6px;
    --header-height: 116px;
    --header-space: 116px;
    --header-pad: 28px;
  }
  .sms-nav-links { margin-left: 24px; }
  .sms-nav-cta { padding: 0 32px; }
}

@media (max-width: 1000px) {
  :root {
    --nav-pad: 12px;
    --logo-h: 66px;
    --logo-offset: -5px;
    --nav-drop: 5px;
    --header-height: 104px;
    --header-space: 104px;
    --header-pad: 22px;
  }
  .sms-nav-links { margin-left: 16px; }
  .sms-nav-links a { font-size: 12px; }
  .sms-nav-cta { padding: 0 24px; font-size: 14px; min-height: 34px; }
}

@media (max-width: 1024px) {
  :root { --text-h1: 50px; --text-h2: 38px; --text-h3: 25px; --section-pad: 88px; }
  .ds-split-grid,
  .ds-cta-grid { gap: 48px; }

  /* The empty column is a luxury that only pays off on a wide screen.
     Below this the three real columns need the room, or a line like
     Wednesday: 6 PM - 9 PM starts wrapping. */
  .sms-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .sms-footer-logo    { grid-column: 1; }
  .sms-footer-hours   { grid-column: 2; }
  .sms-footer-contact { grid-column: 3; }
  .sms-footer { padding-top: 88px; }
}

@media (max-width: 900px) {
  :root { --logo-h: 62px; --logo-offset: -5px; --nav-drop: 0px; --header-height: 96px; --header-space: 96px; }
  :root.sms-scrolled { --logo-h: 46px; --header-height: 72px; --logo-offset: -3px; }
  .sms-nav-links { display: none; }
  /* Book Now stays visible on a phone. Burying the one action you want
     people to take inside a closed menu is the most expensive thing a
     mobile header can do. */
  .sms-nav-right { display: flex; }
  .sms-burger { display: flex; }
  .sms-nav-cta { min-height: 34px; padding: 0 16px; font-size: 12px; }
  .ds-hero { padding: 40px 0 76px; }
  .sms-footer-logo img { max-width: 220px; }
}

/* On the narrowest phones the logo, the button and the burger stop
   fitting on one row. Measured at 320 and 360, where the row was running
   43px and 3px past the edge. */
@media (max-width: 420px) {
  :root { --logo-h: 42px; --header-height: 76px; --header-space: 76px; --header-pad: 16px; }
  :root.sms-scrolled { --logo-h: 36px; --header-height: 64px; }
  .sms-nav-cta { min-height: 32px; padding: 0 10px; font-size: 11px; letter-spacing: 0.03em; }
  .sms-burger { margin-left: 6px; width: 40px; height: 40px; }
}

@media (min-width: 901px) {
  .sms-burger,
  .sms-drawer { display: none; }
}

@media (max-width: 768px) {
  :root {
    --text-h1: 40px;
    --text-h2: 32px;
    --text-h3: 24px;
    --section-pad: 64px;
    --gutter: 20px;
  }
  .ds-split-grid,
  .ds-split-grid.reverse,
  .ds-benefits-grid,
  .ds-cta-grid,
  .ds-grid-3 { grid-template-columns: 1fr; gap: 36px; }
  .ds-split-grid.reverse .ds-split-img { order: 0; }
  .ds-grid-3 > * { flex-basis: 100%; }
  /* The label has to be allowed to wrap. .ds-btn is nowrap by default,
     which is right in a row of desktop buttons but on a narrow phone it
     sets a hard floor on the width of whatever contains it, and that
     floor is what pushes a 320px layout off the edge. */
  .ds-btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 14px 20px;
  }
  .ds-hero-cta .ds-btn,
  .ds-cta .ds-btn { width: 100%; }
  .ds-faq-q .q { font-size: 19px; }
  .ds-cta-img { aspect-ratio: 4 / 3; }
  /* One column on a phone. The grid-column placements above have to be
     released or column three and four would create phantom tracks off
     the side of the screen. */
  .sms-footer { padding-top: 72px; }
  .sms-footer-inner {
    width: min(100% - 40px, var(--container-footer));
    grid-template-columns: 1fr;
    gap: 44px;
    padding-bottom: 56px;
  }
  .sms-footer-logo,
  .sms-footer-hours,
  .sms-footer-contact { grid-column: auto; }
  .sms-footer h2 { margin-bottom: 22px; }
  .sms-footer-legal { padding: 32px 0 30px; }
  .sms-footer-legal-inner {
    width: min(100% - 40px, var(--container-footer));
    gap: 22px;
  }
}

@media (max-width: 420px) {
  :root { --text-h1: 34px; --text-h2: 28px; }
  /* Logo height is set by --logo-h above. A hard value here would win on
     source order and quietly break the shrinking header. */
  .ds-step { grid-template-columns: 34px 1fr; gap: 14px; }
}


/* ============================================================
   9. HOMEPAGE
   Merged from home-extra.css. Scoped to .hp- so it cannot reach
   the 45 service pages.
   ============================================================ */
/* ============================================================
   HOMEPAGE ONLY.  Every value below was measured off the live
   page at summerlinmedspa.com, not eyeballed from a screenshot.
   Namespaced .hp- so nothing here reaches the 45 service pages.

   Measured tokens:
     heading gold   #E0C8A6   (rgb 224,200,166)
     eyebrow sand   #F5E6D0   (rgb 245,230,208)
     brand taupe    #CBA590   (rgb 203,165,144)
     body grey      #7F7C76   (rgb 127,124,118)
     body font      Inter 16px / 26.4px  (homepage only, matching live)
     H2             Brygada 48px / 62.4px weight 600
     H4             Brygada 24px / 28.8px weight 600
     buttons        12px, letter-spacing 2px, weight 600, radius 0
   ============================================================ */
.hp-page {
  --hp-gold:  #E0C8A6;
  --hp-sand:  #F5E6D0;
  --hp-taupe: #CBA590;
  --hp-body:  #7F7C76;
  --hp-font:  Inter, "Helvetica Neue", Arial, sans-serif;
}

/* Body copy on the homepage is Inter, matching the live site.
   The 45 service pages stay on Lato for now; owner's call. */
.hp-page p,
.hp-page li,
.hp-page blockquote,
.hp-page .hp-treat-num,
.hp-page .ds-btn { font-family: var(--hp-font); }

.hp-page p { color: var(--hp-body); font-size: 16px; line-height: 26.4px; }

/* headings: display face, gold, weight 600 */
.hp-page h2 { font-size: 48px; line-height: 62.4px; font-weight: 600; color: var(--hp-gold); margin: 0; }
.hp-page h3 { font-size: 32px; line-height: 41.6px; font-weight: 600; color: var(--hp-gold); margin: 0; }
.hp-page h4 { font-size: 24px; line-height: 28.8px; font-weight: 600; color: var(--hp-gold); margin: 0; }

/* eyebrow: display face, uppercase, 3px tracking */
.hp-page .hp-eyebrow {
  font-family: var(--font-display);
  font-size: 14px; line-height: 17.5px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--color-brand-taupe-dark);
  /* The hero paragraph rule caps prose at 62ch. An eyebrow is not prose,
     and inheriting that cap gave it a 528px box inside an 800px column,
     flush left, so centring happened inside the wrong box. */
  max-width: none;
  margin: 0 auto 18px;
}
.hp-page .hp-eyebrow-light { color: #FFFFFF; }

/* buttons ---------------------------------------------------- */
.hp-btn-solid {
  background: var(--hp-taupe); border-color: var(--hp-taupe); color: #FFFFFF;
  font-family: var(--hp-font); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; border-radius: 0;
}
.hp-btn-solid:hover, .hp-btn-solid:focus-visible {
  background: var(--hp-gold); border-color: var(--hp-gold); color: var(--color-ink);
}
.hp-btn-light {
  background: #FFFFFF; border: 1px solid #FFFFFF; color: var(--hp-gold);
  font-family: var(--hp-font); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; border-radius: 0;
}
.hp-btn-light:hover, .hp-btn-light:focus-visible {
  background: transparent; border-color: #FFFFFF; color: #FFFFFF;
}

/* a linked heading keeps its section colour, never the global link colour */
.hp-page h2 a, .hp-page h3 a, .hp-page h4 a { color: inherit; }
.hp-page h3 a:hover, .hp-page h4 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hp-book-cta-tel a:hover, .hp-ready p a:hover { color: var(--hp-taupe); }

/* ---------- 1. hero ----------------------------------------
   The photograph is a transparent PNG. It is placed in the right
   half of the hero and contained, so it is never cropped and the
   taupe shows through its alpha channel. It is held out of the
   text column at every width, which a full-bleed background image
   cannot promise on a wide monitor. */
.hp-hero {
  position: relative;
  background: var(--hp-taupe);
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.hp-hero .ds-container { position: relative; z-index: 2; }
.hp-hero-copy { width: 46%; padding: 56px 36px 56px 0; }
.hp-page .hp-hero .hp-eyebrow { color: #FFFFFF; }
.hp-hero h1 {
  font-size: 88px; line-height: 96.8px; font-weight: 500;
  color: #FFFFFF; margin: 0;
}
.hp-hero p { color: #FFFFFF; margin: 26px 0 0; max-width: 34ch; }
.hp-hero-cta { margin-top: 36px; }
.hp-hero-photo {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 46%;
  z-index: 1;
  pointer-events: none;
}
.hp-hero-photo img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: contain;
  object-position: 100% 100%;
  display: block;
}

/* ---------- 2. meet nurse nikki ---------- */
.hp-about { background: var(--color-cream); padding: var(--section-pad) 0; }
.hp-about-head { text-align: center; max-width: 1000px; margin: 0 auto 64px; }
.hp-about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.hp-about-photo img {
  width: 100% !important; max-width: none !important;
  aspect-ratio: 358 / 400; object-fit: cover; object-position: center 12%;
  display: block; border-radius: 0;
}
.hp-about-copy p + p { margin-top: 1.4em; }
.hp-about-link {
  display: inline-block; margin-top: 28px;
  font-family: var(--hp-font); font-size: 16px; font-weight: 700;
  color: var(--hp-gold);
}
.hp-about-link:hover { color: var(--hp-taupe); }

/* ---------- 3. four injectable cards ---------- */
.hp-cards { background: #FFFFFF; padding: var(--section-pad) 0; }
.hp-cards-head { text-align: center; margin: 0 auto 64px; }
.hp-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.hp-card-icon { color: var(--hp-gold); margin-bottom: 18px; display: block; }
.hp-card h4 { margin-bottom: 14px; }
.hp-card p { font-size: 15px; line-height: 25px; }

/* ---------- 4. treatments designed for you ---------- */
.hp-designed { position: relative; background: #FFFFFF; padding: var(--section-pad) 0; }
.hp-designed-panel {
  position: absolute; top: 4%; bottom: 0; right: 0; left: 52%;
  background: var(--hp-sand); border-radius: 220px 0 0 0; z-index: 1;
}
.hp-designed .ds-container { position: relative; z-index: 2; }
.hp-designed-grid { display: grid; grid-template-columns: 0.9fr 1fr 1fr; gap: 48px; align-items: center; }
.hp-designed-copy h2 { margin-bottom: 26px; }
.hp-designed-copy p { margin-bottom: 32px; }
.hp-designed-photo img {
  width: 100% !important; max-width: none !important;
  aspect-ratio: 400 / 615; object-fit: cover; object-position: center 12%;
  display: block; border-radius: 24px;
}
/* The live list is separated by thin rules, including one above the
   first item. They span the list column, not the whole panel. */
.hp-designed-list { display: grid; gap: 0; }
.hp-designed-item {
  border-top: 1px solid rgba(203, 165, 144, 0.55);
  padding: 26px 0;
}
.hp-designed-item:last-child { padding-bottom: 0; }
.hp-designed-item h4 { margin-bottom: 8px; }
.hp-designed-item p { font-size: 15px; line-height: 25px; }

/* ---------- 5. ready to get started ---------- */
.hp-ready { background: var(--color-cream); padding: 104px 0; text-align: center; }
.hp-ready h2 { font-size: 64px; line-height: 83.2px; }
.hp-ready p { margin: 22px 0 0; }
.hp-ready p a { color: var(--hp-gold); font-weight: 700; }
.hp-ready-cta { margin-top: 34px; display: flex; justify-content: center; }

/* ---------- 6. medical spa treatments over a photograph ----
   The live section runs the photograph close to full brightness.
   A very light scrim plus a text shadow keeps the white type
   readable without the heavy wash v10 had. */
/* The intro band is white, so its heading and copy take the same
   colours as every other heading on a light ground. */
.hp-treat-intro { background: #FFFFFF; padding: var(--section-pad) 0 64px; }
.hp-treat-intro .hp-treat-head h2 { color: var(--hp-gold); }
.hp-treat-intro .hp-treat-head p { color: var(--hp-body); font-weight: 400; }
.hp-treat-intro .hp-treat-head { margin-bottom: 0; }
.hp-treat {
  position: relative; padding: 96px 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hp-treat::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(22, 18, 15, 0.16);
}
.hp-treat .ds-container { position: relative; z-index: 2; }
.hp-treat-head { text-align: center; max-width: 900px; margin: 0 auto 72px; }
.hp-treat .hp-treat-head h2 { color: #FFFFFF; }
.hp-treat-head p { margin: 22px auto 0; max-width: 62ch; }
.hp-treat .hp-treat-head p { color: #FFFFFF; font-weight: 700; }
.hp-treat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 52px 72px; }
.hp-treat-num {
  font-family: var(--font-display); font-size: 14px; line-height: 17.5px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: #FFFFFF;
  display: block; margin-bottom: 20px;
}
.hp-treat-item h3 { color: #FFFFFF; margin-bottom: 14px; font-size: 27px; line-height: 1.2; }
.hp-treat-item p { color: #FFFFFF; font-weight: 500; margin: 0 0 22px; }
.hp-treat, .hp-treat h2, .hp-treat h3, .hp-treat p, .hp-treat span, .hp-treat a {
  text-shadow: 0 1px 10px rgba(20, 15, 12, 0.45);
}
.hp-treat-link {
  font-family: var(--hp-font); font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 5px;
}
.hp-treat-link:hover { border-bottom-color: #FFFFFF; }

/* ---------- 7. testimonial ---------- */
.hp-quote { background: var(--hp-sand); padding: 96px 0; text-align: center; }
.hp-quote-mark {
  font-family: var(--font-display); font-size: 54px; line-height: 1;
  color: var(--hp-gold); display: block; margin-bottom: 18px;
}
.hp-quote blockquote {
  margin: 0 auto; max-width: 62ch;
  font-family: var(--hp-font); font-size: 19px; font-weight: 700; line-height: 1.62;
  color: var(--color-ink);
}
.hp-quote-by { margin-top: 26px; }
.hp-quote-by strong {
  display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--hp-taupe);
}
.hp-quote-by span { display: block; font-size: 13px; color: var(--hp-body); margin-top: 6px; }

/* ---------- 8. book your appointment ---------- */
.hp-book { background: #FFFFFF; padding: var(--section-pad) 0; }
.hp-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hp-book h2 { margin-bottom: 24px; }
.hp-book-copy p { max-width: 52ch; }
/* The live page carries a form here. With the form dropped, the column
   holds the call to action and nothing else, so there is no card chrome
   to look like an empty box. */
.hp-book-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.hp-book-cta .ds-btn { padding: 0 44px; }
.hp-book-cta-tel { font-family: var(--hp-font); font-size: 15px; color: var(--hp-body); }
.hp-book-cta-tel a { color: var(--hp-gold); font-weight: 700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .hp-hero { min-height: 520px; }
  .hp-page h2 { font-size: 42px; line-height: 54px; }
  .hp-ready h2 { font-size: 52px; line-height: 66px; }
  .hp-hero h1 { font-size: 72px; line-height: 80px; }
}

@media (max-width: 1100px) {
  .hp-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .hp-designed-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hp-designed-photo { grid-row: span 2; }
  .hp-designed-panel { left: 48%; border-radius: 140px 0 0 0; }
  .hp-hero-copy { width: 52%; }
}

@media (max-width: 900px) {
  /* the photograph moves below the copy so it is never behind text */
  .hp-hero { display: block; min-height: 0; padding: 64px 0 0; overflow: visible; }
  .hp-hero-copy { width: 100%; padding: 0 0 40px; }
  .hp-hero-photo { position: static; left: auto; height: auto; }
  .hp-hero-photo img { height: auto !important; aspect-ratio: 1280 / 1080; object-fit: contain; }
  .hp-hero h1 { font-size: 54px; line-height: 60px; }
  .hp-hero p { max-width: 46ch; }
  .hp-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .hp-about-photo img { aspect-ratio: 3 / 2; object-position: center 10%; }
  .hp-designed-panel { display: none; }
  .hp-designed { background: var(--hp-sand); }
  .hp-designed-grid { grid-template-columns: 1fr; gap: 40px; }
  .hp-designed-photo { grid-row: auto; }
  .hp-designed-photo img { aspect-ratio: 3 / 2; }
  .hp-treat-grid { grid-template-columns: 1fr; gap: 48px; }
  .hp-book-grid { grid-template-columns: 1fr; gap: 40px; }
  .hp-page h2 { font-size: 36px; line-height: 46px; }
  .hp-ready h2 { font-size: 42px; line-height: 54px; }
  .hp-page h3 { font-size: 27px; line-height: 35px; }
}

@media (max-width: 640px) {
  .hp-about, .hp-cards, .hp-designed, .hp-book { padding: 72px 0; }
  .hp-ready, .hp-treat, .hp-quote { padding: 72px 0; }
  .hp-cards-grid { grid-template-columns: 1fr; gap: 40px; }
  .hp-about-head { margin-bottom: 40px; }
  .hp-book-card { padding: 40px 26px; }
  .hp-quote blockquote { font-size: 17px; }
  .hp-hero h1 { font-size: 44px; line-height: 50px; }
  .hp-page h2 { font-size: 32px; line-height: 41px; }
  .hp-ready h2 { font-size: 36px; line-height: 46px; }
}


/* ============================================================
   10. BIO PAGE
   Values measured off the live /meet-nurse-nikki-long/ page:
   H2 48px and H3 32px in #E0C8A6, body and bullets #7F7C76 at
   16px / 26.4px. The page is wrapped in .hp-page so it inherits
   the same Inter body and gold headings as the homepage.
   ============================================================ */
.bio-head { text-align: center; max-width: 1000px; margin: 0 auto 64px; }
.bio-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start; }
.bio-grid.reverse { grid-template-columns: 0.95fr 1.05fr; }
.bio-grid.reverse .bio-photo { order: -1; }
.bio-photo img {
  width: 100% !important; max-width: none !important;
  display: block; border-radius: 0; object-fit: cover;
}
.bio-copy p + p { margin-top: 1.4em; }
.bio-copy strong, .bio-lists strong { font-weight: 700; color: var(--color-charcoal); }
.bio-lists h3 { margin: 0 0 20px; }
.bio-lists h3 + ul { margin: 0 0 40px; padding-left: 20px; }
.bio-lists ul { list-style: disc; }
.bio-lists li {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 26.4px; color: #7F7C76; margin-bottom: 6px;
}
.bio-lists li::marker { color: var(--color-brand-taupe); }
.bio-lists ul:last-of-type { margin-bottom: 40px; }

@media (max-width: 900px) {
  .bio-grid, .bio-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
  .bio-grid.reverse .bio-photo { order: 0; }
  .bio-head { margin-bottom: 40px; }
}


/* ============================================================
   11. REVIEWS PAGE
   The source markup carried its styling in inline style attributes.
   That works, but it puts presentation in the database on every
   review, so a colour change means editing every block. The same
   look is expressed here once instead.
   ============================================================ */
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.rv-col { display: block; }
.rv-item { padding: 0 0 26px; }
.rv-col .rv-item + .rv-item {
  border-top: 1px solid var(--color-border);
  padding-top: 26px;
}
.rv-name {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--color-charcoal);
  margin: 0;
}
.rv-name strong { font-weight: 700; }
.rv-stars { letter-spacing: 1px; margin-left: 2px; }
.rv-quote {
  background: #F9F9F9;
  border-left: 4px solid var(--color-brand-taupe);
  padding: 12px 18px;
  margin: 12px 0 0;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 26.4px; font-style: italic;
  color: #7F7C76;
}
.rv-quote p { margin: 0; font-style: italic; }

@media (max-width: 900px) {
  .rv-grid { grid-template-columns: 1fr; gap: 0; }
  .rv-col + .rv-col .rv-item:first-child {
    border-top: 1px solid var(--color-border); padding-top: 26px;
  }
}


/* ============================================================
   12. SERVICES PAGE
   The pillar page for the six pillars. Deliberately carries no
   pricing, no durations and no deposits: this is a map of what
   is offered, not a menu to shop from.
   ============================================================ */

/* ---- jump bar: six categories, reachable without scrolling ---- */
.sv-jump { background: var(--color-cream); border-bottom: 1px solid var(--color-border); padding: 22px 0; }
.sv-jump-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sv-jump a {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid rgba(203, 165, 144, 0.55);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-button);
  text-transform: uppercase; color: var(--color-brand-taupe-dark);
  transition: background 150ms var(--ease-standard), color 150ms var(--ease-standard),
              border-color 150ms var(--ease-standard);
}
.sv-jump a:hover, .sv-jump a:focus-visible {
  background: var(--color-brand-taupe); border-color: var(--color-brand-taupe); color: var(--color-white);
}

/* ---- category header: oversized numeral beside the heading ---- */
.sv-sec { padding: var(--section-pad) 0; scroll-margin-top: calc(var(--header-space) + 24px); }
.sv-sec-head { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; margin-bottom: 56px; }
.sv-num {
  font-family: var(--font-display);
  font-size: 84px; line-height: 0.82; font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-brand-taupe);
  letter-spacing: -0.02em;
}
.sv-sec-head h2 { margin: 0 0 16px; }
.sv-sec-head p { max-width: 68ch; margin: 0; }

/* ---- treatment cards ---- */
.sv-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 26px;
}
.sv-cards > .sv-card { flex: 0 1 calc((100% - 52px) / 3); min-width: 0; }
.sv-card {
  border-top: 2px solid var(--color-brand-taupe);
  background: var(--color-white);
  padding: 24px 24px 26px;
  display: flex; flex-direction: column;
  transition: transform 170ms var(--ease-standard), box-shadow 170ms var(--ease-standard);
}
.sv-sec-cream .sv-card { background: var(--color-white); }
.sv-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(27, 24, 23, 0.10); }
.sv-card h3 {
  font-size: 21px; line-height: 1.24; margin: 0 0 10px;
}
.sv-card h3 a { color: inherit; }
.sv-card p {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 25px; color: #7F7C76; margin: 0 0 18px;
}
.sv-card-more {
  margin-top: auto;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-button);
  text-transform: uppercase; color: var(--color-brand-taupe-dark);
}
.sv-card-more::after { content: ' →'; }
.sv-card:hover .sv-card-more { color: var(--color-ink); }

/* Injectables carries fifteen treatments. Sub-grouping them by what a
   patient wants fixed turns a wall into four short, scannable lists. */
.sv-group + .sv-group { margin-top: 52px; }
.sv-group-name {
  font-size: 22px; line-height: 1.25; margin: 0 0 4px;
  color: var(--color-brand-taupe-dark);
}
.sv-group-name {
  position: relative;
  padding-bottom: 12px;
}
.sv-group-name::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: var(--color-brand-taupe);
}
.sv-group-note {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 22px; color: #7F7C76;
  margin: 10px 0 26px;
}
.sv-card h3 { min-height: 0; }

.sv-all { margin-top: 48px; text-align: center; }

@media (max-width: 1100px) { .sv-cards > .sv-card { flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 760px) {
  .sv-cards > .sv-card { flex-basis: 100%; }
  .sv-sec { padding: 72px 0; }
  .sv-sec-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .sv-num { font-size: 60px; }
}


/* ============================================================
   13. HP-PAGE ON DARK GROUNDS
   .hp-page sets gold headings and grey body copy, which is right
   on white and cream and wrong on the taupe closing band. Those
   rules out-specify the section's own colours, so the CTA came
   out gold-on-taupe with an invisible button. Restored here.
   ============================================================ */
.hp-page .ds-cta h2,
.hp-page .ds-cta h3 { color: var(--color-white); }
.hp-page .ds-cta p { color: rgba(255, 255, 255, 0.92); }
.hp-page .ds-cta .ds-btn,
.hp-page .ds-cta .hp-btn-solid {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-ink);
}
.hp-page .ds-cta .ds-btn:hover,
.hp-page .ds-cta .hp-btn-solid:hover {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.hp-page .ds-hero p { color: rgba(255, 255, 255, 0.9); }
.hp-page .ds-hero .hp-eyebrow { color: #FFFFFF; }

/* A long hero headline should break evenly rather than leaving a
   short orphan line. */
.hp-page .ds-hero h1 { text-wrap: balance; }


/* ============================================================
   14. CONTACT PAGE
   The form markup here is a placeholder. On the live site it is
   replaced by a WPForms shortcode, so these rules are written to
   target plain inputs and will need remapping to WPForms classes
   once that swap happens.
   ============================================================ */
.ct-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; }
.ct-col { flex: 0 1 calc((100% - 96px) / 3); min-width: 0; }
.ct-col h3 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
.ct-col p { margin: 0 0 12px; }
.ct-link, .ct-phone { color: var(--color-brand-taupe-dark); font-weight: 700; }
.ct-link:hover, .ct-phone:hover { color: var(--color-ink); }
.ct-phone { font-size: 21px; }

.ct-form-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.ct-form-wrap { max-width: 760px; margin: 0 auto; }
.ct-form { display: flex; flex-wrap: wrap; gap: 20px; }
.ct-field { flex: 0 1 calc((100% - 20px) / 2); display: flex; flex-direction: column; }
.ct-field-wide { flex: 0 1 100%; }
.ct-field label {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-button);
  text-transform: uppercase; color: var(--color-brand-taupe-dark);
  margin-bottom: 8px;
}
.ct-field input, .ct-field textarea {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 150ms var(--ease-standard);
}
.ct-field input:focus, .ct-field textarea:focus {
  outline: none; border-color: var(--color-brand-taupe);
}
.ct-field textarea { resize: vertical; }
.ct-submit { align-items: center; text-align: center; margin-top: 4px; }
.ct-note {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; color: var(--color-muted); margin: 14px 0 0;
}

@media (max-width: 900px) {
  .ct-col { flex-basis: 100%; }
  .ct-cols { gap: 34px; }
  .ct-field { flex-basis: 100%; }
}

/* =========================================================================
   15. REFINEMENTS
   ========================================================================= */

/* ---- 15.2 Testimonial, matched to the live homepage --------------------
   live: Inter 24px / 600 / 26.4px / #525252, 800px column
         name  Inter 13px / 600 / 3px tracking / #CBA590 uppercase
         place 14px / 400 / #525252                                      */
.hp-quote { padding: 88px 0; }
.hp-quote-mark {
  font-size: 96px;
  line-height: .8;
  color: var(--color-brand-taupe);
  margin-bottom: 6px;
}
.hp-quote blockquote {
  max-width: 800px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 26.4px;
  color: #525252;
}
.hp-quote-by { margin-top: 30px; }
.hp-quote-by strong {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #CBA590;
}
.hp-quote-by span {
  font-size: 14px;
  font-weight: 400;
  color: #525252;
  margin-top: 8px;
}
.hp-quote-more {
  display: inline-block;
  margin-top: 30px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-brand-taupe-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-taupe);
  text-underline-offset: 5px;
}
.hp-quote-more:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-ink);
}

/* ---- 15.3 Pool photo section: hairline grid ----------------------------
   Live draws 0.8px rgba(255,255,255,0.1) on every cell edge, so the six
   items sit inside one continuous grid instead of floating. Cells are
   equal by construction, which also settles the lopsided columns. */
.hp-treat::before { background: rgba(22, 18, 15, 0.10); }
.hp-treat-grid {
  gap: 0;
  border-top: 0.8px solid rgba(255, 255, 255, 0.18);
  border-left: 0.8px solid rgba(255, 255, 255, 0.18);
}
.hp-treat-item {
  border-right: 0.8px solid rgba(255, 255, 255, 0.18);
  border-bottom: 0.8px solid rgba(255, 255, 255, 0.18);
  padding: 40px 44px 36px;
  margin: 0;
  max-width: none;
}
.hp-treat-item p { max-width: none; }

/* ---- 15.4 Services subgroups: ornament in place of the accent bar ----- */
.sv-group-name::after { content: none; }
.sv-group-name {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sv-group-name .hp-card-icon {
  flex: 0 0 auto;
  margin-bottom: 0;
  color: var(--color-brand-taupe);
}
.sv-card { border-top: 0; box-shadow: 0 1px 0 rgba(27, 24, 23, 0.06); }

/* ---- 15.5 Every Skin Tone band ---------------------------------------- */
.hp-tone {
  background: var(--color-white);
  padding: 92px 0;
  text-align: center;
}
.hp-tone .hp-card-icon { margin: 0 auto 20px; color: var(--color-brand-taupe); }
.hp-tone h2 { margin: 0 0 22px; }
.hp-tone p {
  max-width: 68ch;
  margin: 0 auto 18px;
}
.hp-tone .hp-about-link { margin-top: 14px; }

@media (max-width: 782px) {
  .hp-quote blockquote { font-size: 20px; line-height: 1.4; }
  .hp-treat-item { padding: 32px 26px 28px; }
  .hp-treat-grid { border-left: 0; }
  .hp-treat-item { border-right: 0; }
  .sv-group-name { gap: 10px; }
}


/* =========================================================================
   16. THE LINK SYSTEM
   Three roles, and nothing else anywhere on the site:
     1. button      .ds-btn
     2. standalone  its own line, sends you to another page
     3. inline      inside a sentence
   Scoped to .entry-content so it reaches the 45 service pages, which have
   no .hp-page wrapper, as well as the newer pages, which do.
   ========================================================================= */

/* ---- 2. standalone ---------------------------------------------------- */
.hp-about-link,
.hp-treat-link,
.sv-card-more,
.hp-quote-more,
.ct-link,
.ds-treatment-link {
  display: inline-block;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-brand-taupe);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness .15s ease;
}
.hp-about-link:hover,
.hp-treat-link:hover,
.sv-card-more:hover,
.hp-quote-more:hover,
.ct-link:hover,
.ds-treatment-link:hover {
  color: var(--color-ink);
  border-bottom: 0;
  text-decoration-color: var(--color-brand-taupe);
  text-decoration-thickness: 2px;
}
.hp-about-link::after,
.hp-treat-link::after,
.sv-card-more::after,
.hp-quote-more::after,
.ct-link::after,
.ds-treatment-link::after { content: ' \2192'; }

/* ---- 3. inline -------------------------------------------------------- */
.entry-content a:not([class]),
.ct-phone {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-taupe);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness .15s ease;
}
.entry-content a:not([class]):hover,
.ct-phone:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-brand-taupe);
  text-decoration-thickness: 2px;
}

/* ---- headings that link to their own page ----------------------------- */
.entry-content h1 a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a { text-decoration: none; }

/* ---- both roles, on grounds where ink would disappear ----------------- */
.ds-cta .hp-about-link,
.ds-cta .hp-treat-link,
.ds-cta .sv-card-more,
.ds-cta .hp-quote-more,
.ds-cta .ct-link,
.ds-cta .ds-treatment-link,
.ds-cta a:not([class]),
.hp-treat .hp-about-link,
.hp-treat .hp-treat-link,
.hp-treat .sv-card-more,
.hp-treat .hp-quote-more,
.hp-treat .ct-link,
.hp-treat .ds-treatment-link,
.hp-treat a:not([class]),
.ds-hero .hp-about-link,
.ds-hero .hp-treat-link,
.ds-hero .sv-card-more,
.ds-hero .hp-quote-more,
.ds-hero .ct-link,
.ds-hero .ds-treatment-link,
.ds-hero a:not([class]),
.hp-hero .hp-about-link,
.hp-hero .hp-treat-link,
.hp-hero .sv-card-more,
.hp-hero .hp-quote-more,
.hp-hero .ct-link,
.hp-hero .ds-treatment-link,
.hp-hero a:not([class]) {
  color: var(--color-white);
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
.ds-cta .hp-about-link:hover,
.ds-cta .hp-treat-link:hover,
.ds-cta .sv-card-more:hover,
.ds-cta .hp-quote-more:hover,
.ds-cta .ct-link:hover,
.ds-cta .ds-treatment-link:hover,
.ds-cta a:not([class]):hover,
.hp-treat .hp-about-link:hover,
.hp-treat .hp-treat-link:hover,
.hp-treat .sv-card-more:hover,
.hp-treat .hp-quote-more:hover,
.hp-treat .ct-link:hover,
.hp-treat .ds-treatment-link:hover,
.hp-treat a:not([class]):hover,
.ds-hero .hp-about-link:hover,
.ds-hero .hp-treat-link:hover,
.ds-hero .sv-card-more:hover,
.ds-hero .hp-quote-more:hover,
.ds-hero .ct-link:hover,
.ds-hero .ds-treatment-link:hover,
.ds-hero a:not([class]):hover,
.hp-hero .hp-about-link:hover,
.hp-hero .hp-treat-link:hover,
.hp-hero .sv-card-more:hover,
.hp-hero .hp-quote-more:hover,
.hp-hero .ct-link:hover,
.hp-hero .ds-treatment-link:hover,
.hp-hero a:not([class]):hover {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}

/* ---- exceptions: things that are links but are not prose -------------- */
.sv-jump a { color: var(--color-ink); text-decoration: none; }
.sv-jump a:hover, .sv-jump a:focus-visible { color: var(--color-white); text-decoration: none; }
.entry-content .ds-btn { text-decoration: none; }
.entry-content .ds-btn::after { content: none; }

/* =========================================================================
   17. SPACING AND MEASURE CORRECTIONS
   ========================================================================= */

/* ---- 17.1 Every Skin Tone: same measure as the treatments block ---------
   These paragraphs sat in a 68ch column inside the full 1200px container
   while the Medical Spa Treatments block sits in 62ch inside 900px. Same
   sentence length, wider box, so the centred lines broke unevenly and left
   short orphans. Matching both values makes them break the same way. */
.hp-tone .ds-container { max-width: 900px; }
.hp-tone p { max-width: 62ch; }

/* ---- 17.2 Consecutive sections sharing a background ---------------------
   Every section carries its own vertical padding. Where the background
   changes, that reads correctly, because the colour marks the boundary.
   Where two sections share a background the two paddings stack into one
   dead band: on the weight loss page that is 112px + 112px = 224px of
   empty cream. Collapse the second one's top padding so a shared-ground
   boundary gets one gap instead of two. */
.ds-section-cream + .ds-section-cream,
.ds-section-white + .ds-section-white,
.ds-section-cream + .ds-textblock.ds-section-cream,
.ds-section-white + .ds-textblock.ds-section-white,
.ds-textblock.ds-section-cream + .ds-section-cream,
.ds-textblock.ds-section-white + .ds-section-white {
  padding-top: 0;
}

/* ---- 17.3 404 ----------------------------------------------------------- */
.ds-404-links { max-width: 62ch; margin-inline: auto; text-align: center; }
.ds-404-links p { margin: 0 0 16px; }
.ds-404-links p:last-child { margin-bottom: 0; }

/* ---- 17.4 Portrait split photographs -----------------------------------
   The default split photograph is 16 by 9, which suits a wide landscape
   shot. Where the image is a person, that crop wastes the column and
   leaves dead space beside taller copy. ds-split-tall crops from a
   portrait window instead so the photograph fills its side. */
.ds-split-tall .ds-split-photo {
  aspect-ratio: 4 / 5;
  object-position: center 30%;
}
@media (max-width: 768px) {
  .ds-split-tall .ds-split-photo { aspect-ratio: 4 / 3; }
}

/* ---- 17.5 Full width image band ----------------------------------------
   A 16 by 9 image shown whole rather than cropped, sitting on white with
   the section rhythm above and below it. Used where the picture is the
   argument and does not need words beside it. */
.ds-banner {
  padding: 72px 0;
  background: #FFFFFF;
}
.ds-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 768px) { .ds-banner { padding: 44px 0; } }