/* SOHO Barbershop, Spa & Hair Studio. Built by Red Isle Web, 2026.
   Matches SOHO's own site and brand guide: black ground, gold #C6A766, Geogrotesque.
   Written to port to a Shopify Online Store 2.0 theme: one stylesheet, plain components. */

/* Text font: Saira (SIL Open Font License) stands in for SOHO's brand face, Geogrotesque, until her web licence is confirmed for the new site.
   The SOHO logo is her own artwork and is unchanged. */
@font-face { font-family: "Saira"; src: url("fonts/saira-200.woff2?v=1") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira"; src: url("fonts/saira-300.woff2?v=1") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira"; src: url("fonts/saira-300-italic.woff2?v=1") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Saira"; src: url("fonts/saira-400.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira"; src: url("fonts/saira-600.woff2?v=1") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --gold: #C6A766;
  --gold-deep: #b39352;
  --black: #000;
  --ink: #0a0a0a;
  --panel: #111;
  --line: #2b2b2b;
  --grey: #636466;
  --soft: #d7d8da;
  --muted: #b8b8b8;
  --white: #fff;
  --navy: #213C68;
  --blue: #5479B7;
  --mist: #9DB1D8;
  --ice: #E4EEF9;
  --wrap: 1180px;
  --head-h: 116px;
  --font: "Saira", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font); font-size: 18px; line-height: 1.55; font-weight: 300; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
main a:not(.btn):not(.circle):not(.square):hover, .foot-in a:not(.btn):hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--gold); color: var(--black); padding: 12px 18px; font-weight: 600; }
.skip:focus { left: 12px; top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.narrow { width: min(880px, 100% - 48px); margin-inline: auto; }

h1, h2, h3, h4 { font-weight: 400; text-transform: uppercase; letter-spacing: .05em; line-height: 1.1; margin: 0 0 .5em; color: var(--gold); }
h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; }
p { margin: 0 0 1em; }

/* Buttons: square, gold outline, as on sohospa.ca */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border: 1.5px solid var(--gold); color: var(--gold); background: transparent; font: inherit; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border-radius: 0; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--black); }
.btn-solid { background: var(--gold); color: var(--black); }
.btn-solid:hover, .btn-solid:focus-visible { background: var(--white); border-color: var(--white); color: var(--black); }
.btn-sm { min-height: 46px; font-size: 1.05rem; padding: 10px 22px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Header: sticky, opaque black, centred SOHO logo (design-standards 13) */
.site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 120; overflow-anchor: none; background: var(--black); border-bottom: 1px solid #1d1d1d; }
.head-in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "left logo right"; align-items: center; height: var(--head-h); width: min(1360px, 100% - 48px); margin-inline: auto; transition: height .25s ease; }
.site-header.shrunk .head-in { height: 76px; }
.head-left { grid-area: left; }
.head-right { grid-area: right; }
.logo { grid-area: logo; }
.head-left, .head-right { display: flex; align-items: center; gap: 22px; min-width: 0; }
.head-right { justify-content: flex-end; }
.aveda { display: inline-flex; align-items: center; min-height: 44px; }
.aveda img { width: 84px; height: auto; }
.logo { display: block; text-decoration: none; }
.logo img { height: 94px; width: auto; transition: height .25s ease; }
.site-header.shrunk .logo img { height: 60px; }
.nav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; }
.nav a, .nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--white); background: none; border: 0; font: inherit; font-size: .98rem; text-transform: uppercase; letter-spacing: .09em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav a:hover, .nav button:hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav .caret { width: 9px; height: 9px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.drop { position: absolute; top: 100%; left: 0; min-width: 270px; padding: 10px 0; margin: 0; list-style: none; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--gold); opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 130; }
.nav > li:hover > .drop, .nav > li:focus-within > .drop, .nav > li.open > .drop { opacity: 1; visibility: visible; }
.drop a { display: flex; width: 100%; padding: 0 20px; min-height: 44px; font-size: .92rem; }
.menu-btn, .search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: 0; color: var(--gold); cursor: pointer; padding: 0; }
.menu-btn svg { width: 40px; height: 26px; }
.search-toggle svg { width: 24px; height: 24px; }
.search-toggle { display: none; }

/* Search (design-standards 38) */
.site-search { position: relative; }
.site-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-search input { width: 190px; height: 44px; padding: 0 14px; background: #121212; border: 1px solid #3a3a3a; color: var(--white); font: inherit; font-size: .95rem; border-radius: 0; }
.site-search input::placeholder { color: #a3a3a3; }
.site-search input:focus { border-color: var(--gold); outline: none; }
.search-results { position: absolute; right: 0; top: calc(100% + 6px); width: min(380px, 92vw); background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--gold); z-index: 140; }
.search-results a { display: block; padding: 12px 16px; text-decoration: none; color: var(--white); border-bottom: 1px solid #222; }
.search-results a:hover, .search-results a:focus { background: #1b1b1b; }
.search-results strong { display: block; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.search-results span { display: block; font-size: .88rem; color: var(--muted); }
.search-empty { margin: 0; padding: 14px 16px; font-size: .92rem; color: var(--muted); }

/* Full menu (the gold wave button), as on sohospa.ca */
.menu-panel { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.97); overflow-y: auto; padding: 28px 24px 120px; }
.menu-panel[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; width: min(1100px, 100%); margin: 0 auto 30px; }
.menu-top img { height: 64px; width: auto; }
.menu-close { width: 48px; height: 48px; background: none; border: 1.5px solid var(--gold); color: var(--gold); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.menu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; width: min(1100px, 100%); margin: 0 auto; }
.menu-cols h2 { font-size: 1.35rem; font-weight: 600; border-bottom: 1px solid var(--gold); padding-bottom: 10px; margin-bottom: 8px; }
.menu-cols ul { list-style: none; margin: 0; padding: 0; }
.menu-cols a { display: flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; }
.menu-cols a:hover { color: var(--gold); }
.menu-social { display: flex; gap: 10px; margin-top: 12px; }

/* Vertical reserve tab on the left edge */
.reserve-tab { position: fixed; left: 0; top: 150px; z-index: 110; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--gold); color: var(--black); text-decoration: none; text-transform: uppercase; letter-spacing: .16em; font-size: 1.15rem; padding: 22px 11px; }
a.reserve-tab:hover, a.reserve-tab:focus-visible { background: var(--white); color: var(--black); }

/* Social icons */
.social { display: flex; gap: 6px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--white); }
.social a:hover { color: var(--gold); }
.social svg { width: 20px; height: 20px; }

/* Home hero: the split portrait with the gold waves */
.hero { position: relative; background: var(--black); }
.hero .hero-wide, .hero .hero-tall { width: 100%; height: auto; display: block; }
.hero .hero-tall { display: none; }
.hero .hero-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(330px, 30vw); height: auto; }

/* Intro */
.intro { padding: 110px 0 120px; text-align: center; }
.intro h1 { font-size: clamp(4rem, 9vw, 7.6rem); letter-spacing: .02em; margin-bottom: .1em; }
.intro h1 .sub { display: block; font-size: clamp(1.2rem, 2.1vw, 1.7rem); letter-spacing: .12em; color: var(--white); margin-top: 16px; font-weight: 300; }
.intro p { font-style: italic; font-weight: 300; color: var(--gold); font-size: 1.15rem; max-width: 880px; margin: 0 auto 1em; }
.intro .btn { margin-top: 26px; }

/* Section shells */
.band { padding: 100px 0; border-top: 1px solid #222; position: relative; }
.band-head { text-align: center; margin-bottom: 54px; }
.band-head p { color: var(--soft); max-width: 720px; margin: 0 auto; }
.lede { font-size: 1.15rem; color: var(--soft); }
.gold-rule { border: 0; border-top: 1px solid var(--gold); margin: 0; }

/* Round category tiles (services page and home) */
.circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px; }
.circle { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; text-decoration: none; background: #1a1a1a; }
.circle img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.circle:hover img { transform: scale(1.05); }
.circle .tile-name { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.55); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; text-align: center; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.08; padding: 12px 8px; }
.circle:hover .tile-name { color: var(--white); background: #000; }

.home-circles { grid-template-columns: repeat(3, 1fr); width: min(980px, 100%); margin-inline: auto; gap: 40px 46px; }

/* Square greyscale tiles (laser page) */
.squares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.square { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; text-decoration: none; }
.square img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.square .tile-name { position: absolute; left: 0; right: 0; top: 44%; background: rgba(0,0,0,.62); color: var(--gold); text-transform: uppercase; letter-spacing: .12em; text-align: center; font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.1; padding: 12px 6px; }
.square:hover .tile-name { color: var(--white); background: #000; }

/* Page heads: greyscale photo with gold waves, heading lower left (contact page) */
.page-head { position: relative; min-height: 520px; display: flex; align-items: flex-end; background: #111; overflow: hidden; }
.page-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.page-head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); pointer-events: none; }
.page-head .wrap { position: relative; padding-bottom: 56px; }
.page-head h1 { color: var(--white); margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.page-title { padding: 70px 0 30px; text-align: center; }
.page-title h1 { margin-bottom: .25em; }

/* Price lists */
.note-box { max-width: 880px; margin: 50px auto 30px; text-align: center; color: var(--soft); font-size: 1rem; }
.prices { position: relative; padding: 50px 0 40px; }
.prices .narrow { position: relative; z-index: 1; }
.price-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--gold); padding-bottom: 10px; margin-bottom: 18px; }
.price-head h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.price-head span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; }
.price-group { margin: 30px 0 10px; }
.price-group h3 { font-size: 1.15rem; letter-spacing: .1em; margin-bottom: 8px; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 11px 0; border-bottom: 1px solid #1f1f1f; }
.price-row .name { text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
.price-row .price { color: var(--gold); white-space: nowrap; font-size: 1.05rem; }
.price-row .desc { grid-column: 1 / -1; font-style: italic; color: var(--muted); font-size: .95rem; }
.price-callout { margin: 16px 0 26px; padding: 14px 18px; border-left: 3px solid var(--gold); background: #0f0f0f; color: var(--soft); }
.price-callout strong { color: var(--gold); font-weight: 600; }
.wave-left::before, .wave-right::before { content: ""; position: absolute; top: 40px; width: 150px; height: 326px; background: url("images/wave-strands.webp?v=1") no-repeat top / contain; pointer-events: none; z-index: 0; }
.wave-left::before { left: 0; }
.wave-right::before { right: 0; transform: scaleX(-1); }

/* Spa sections carry the blue-grey spa accent from the brand guide */
.spa .price-head { border-color: var(--mist); }
.spa .price-head h2, .spa .price-group h3 { color: var(--mist); }

/* Session tables (laser and medspa) */
.table-wrap { overflow-x: auto; margin: 0 0 46px; }
.sessions { width: 100%; border-collapse: collapse; font-size: .98rem; }
.sessions caption { text-align: left; }
.sessions th { background: var(--black); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-weight: 400; text-align: right; padding: 14px 16px; border-bottom: 1px solid var(--gold); }
.sessions th:first-child { text-align: left; }
.sessions td { padding: 10px 16px; border-bottom: 1px solid #1f1f1f; text-align: right; white-space: nowrap; }
.sessions td:first-child { text-align: left; white-space: normal; }
.sessions tr:hover td { background: #0e0e0e; }

/* Two-column text with photo */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split img { width: 100%; height: auto; }
.split.flip > :first-child { order: 2; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.member { text-align: center; }
.member .ph { aspect-ratio: 4 / 5; overflow: hidden; background: #151515; margin-bottom: 14px; }
.member img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1); }
.member h3 { margin: 0 0 4px; font-size: 1.35rem; }
.member p { margin: 0; color: var(--soft); font-size: .98rem; }
.team-section + .team-section { margin-top: 70px; }
.team-section > h2 { text-align: center; margin-bottom: 34px; }

/* Info cards (contact) */
.info-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; text-align: center; }
.info-cols h2 { font-size: 1.6rem; }
.info-cols .logo-box { border: 1px solid var(--line); padding: 26px; display: inline-block; margin-bottom: 16px; }
.info-cols .logo-box img { width: 170px; }

/* Forms */
.form { display: grid; gap: 18px; max-width: 720px; margin: 0 auto; }
.form label { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--gold); margin-bottom: 6px; }
.form input, .form textarea, .form select { width: 100%; min-height: 50px; padding: 12px 14px; background: #0f0f0f; border: 1px solid #3a3a3a; color: var(--white); font: inherit; border-radius: 0; }
.form textarea { min-height: 150px; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--gold); outline: none; }
.hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }

/* Prose pages (etiquette, aftercare, careers, acupuncture) */
.prose { font-size: 1.08rem; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--gold); font-weight: 600; }

/* Footer: grey waves over black, four columns, gold bottom bar */
.site-footer { position: relative; background: var(--black); border-top: 1px solid #3a3a3a; overflow: hidden; }
.foot-waves { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.foot-in { position: relative; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 40px; padding: 90px 0 80px; }
.foot-in h2 { font-size: 1.85rem; font-weight: 600; border-bottom: 1px solid var(--gold); padding-bottom: 6px; margin-bottom: 14px; }
.foot-in p, .foot-in li { color: var(--white); margin: 0 0 4px; }
.foot-in ul { list-style: none; padding: 0; margin: 0; }
.foot-in a:not(.btn) { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot-in a:not(.btn):hover { color: var(--gold); }
.foot-logo { width: 220px; height: auto; margin-bottom: 14px; }
.foot-aveda { width: 96px; margin-top: 18px; }
.foot-bar { position: relative; background: var(--gold); color: var(--black); }
.foot-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; flex-wrap: wrap; }
.foot-bar a { color: var(--black); text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
.foot-bar a:hover { color: var(--black); text-decoration: none; }
.call-bar a:hover { color: var(--gold); }
.call-bar a + a:hover { color: var(--black); }

/* Phone call bar */
.call-bar { display: none; }

/* Hidden live-review slot (filled at deploy) */
.reviews-slot[hidden] { display: none; }

/* Header nav collapses before it can wrap (build check B5) */
@media (max-width: 1359px) {
  .nav, .head-right .site-search { display: none; }
  .search-toggle { display: inline-flex; }
  .head-in { grid-template-columns: 1fr auto 1fr; }
  .site-search.open { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 12px 24px; background: var(--black); border-bottom: 1px solid #222; }
  .site-search.open input { width: 100%; }
  .site-search.open .search-results { left: 24px; right: 24px; width: auto; }
}
@media (max-width: 980px) {
  .circles, .home-circles { grid-template-columns: repeat(2, 1fr); }
  .squares { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.flip > :first-child { order: 0; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .info-cols { grid-template-columns: 1fr 1fr; }
  .menu-cols { grid-template-columns: 1fr 1fr; }
  .wave-left::before, .wave-right::before { width: 90px; opacity: .5; }
}
@media (max-width: 700px) {
  :root { --head-h: 84px; }
  body { font-size: 17px; padding-bottom: 64px; }
  .wrap, .narrow { width: calc(100% - 32px); }
  .head-in { width: calc(100% - 16px); }
  .site-header.shrunk .head-in { height: 68px; }
  .logo img { height: 66px; }
  .site-header.shrunk .logo img { height: 52px; }
  .aveda { display: none; }
  .head-left { gap: 0; }
  .reserve-tab { display: none; }
  .hero .hero-wide { display: none; }
  .hero .hero-tall { display: block; }
  .hero .hero-logo { top: auto; bottom: 6%; transform: translateX(-50%); width: 64vw; }
  .call-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 115; background: var(--black); border-top: 1px solid var(--gold); }
  .call-bar a { display: flex; align-items: center; justify-content: center; min-height: 60px; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; color: var(--gold); }
  .call-bar a + a { background: var(--gold); color: var(--black); }
  .intro { padding: 48px 0 38px; }
  .band { padding: 48px 0; }
  .prices { padding: 26px 0 20px; }
  .band-head { margin-bottom: 34px; }
  .circles, .home-circles { gap: 18px; }
  .circle .tile-name { font-size: .92rem; letter-spacing: .05em; padding: 9px 6px; }
  .square .tile-name { font-size: 1rem; letter-spacing: .06em; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .member h3 { font-size: 1.15rem; }
  .member p { font-size: .9rem; }
  .page-head { min-height: 340px; }
  .page-head .wrap { padding-bottom: 32px; }
  .foot-in { grid-template-columns: 1fr; gap: 30px; padding: 56px 0 46px; text-align: center; }
  .foot-in h2 { display: inline-block; }
  .foot-logo { margin-inline: auto; }
  .foot-aveda { margin-inline: auto; }
  .foot-bar .wrap { justify-content: center; text-align: center; padding: 8px 0; }
  .info-cols { grid-template-columns: 1fr; }
  .menu-cols { grid-template-columns: 1fr; gap: 22px; }
  .price-row .name { font-size: .95rem; }
  .wave-left::before, .wave-right::before { display: none; }
  .u-tall { padding: 56px 0 !important; }
  .note-box { margin-top: 34px; }
  .btn { font-size: 1.1rem; }
  .sessions { font-size: .9rem; }
  .sessions th, .sessions td { padding: 9px 8px; }
}

/* Aveda product row (shop) */
.product-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-row img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 700px) { .product-row { grid-template-columns: 1fr; } }

/* Utilities (replace inline styles; the CSP allows no inline style) */
.u-left { justify-content: flex-start; }
.u-left-mt { justify-content: flex-start; margin-top: 28px; }
.u-mt { margin-top: 48px; }
.u-mt-sm { margin-top: 14px; }
.u-gap { margin-top: 50px; }
.u-flat { border-top: 0; }
.u-flat-tight { border-top: 0; padding-top: 24px; }
.u-center { text-align: center; }
.u-three { grid-template-columns: repeat(3, 1fr); }
.u-plain { list-style: none; padding: 0; margin: 0; }
.u-tall { padding: 120px 0; }

/* Medspa page: white, as on SOHO's current laser page */
.light { background: var(--white); color: #111; }
.light h1, .light h2, .light h3 { color: #7a5f2a; }
.light .note-box { color: #333; margin-top: 0; padding-top: 50px; }
.light .price-head { border-color: #7a5f2a; }
.light .price-head span { color: #555; }
.light .sessions td { border-bottom-color: #e3e3e3; color: #111; }
.light .sessions tr:hover td { background: #f6f3ec; }
.light .btn-solid { background: #000; border-color: #000; color: var(--gold); }
.light .btn-solid:hover, .light .btn-solid:focus-visible { background: #7a5f2a; border-color: #7a5f2a; color: #fff; }
.light .prices { padding-bottom: 20px; }
.light > section:last-child { padding-bottom: 90px; }
@media (max-width: 700px) { .u-three { grid-template-columns: 1fr 1fr 1fr; } }

.prose > :last-child, .split .prose > :last-child { margin-bottom: 0; }
@media (max-width: 700px) { .prices + .band, .band + .prices { padding-top: 22px; } .prices + .band { border-top: 0; } }
.prose > h2:first-child { margin-top: 0; }
@media (max-width: 700px) { .band { padding: 36px 0; } .band-head { margin-bottom: 26px; } }