/* site-additions.css — styles for components added AFTER the reconstruction.
   The reconstructed pages use only classes that exist in /legacy/site.css;
   anything new lives here so the compiled stylesheet stays exactly what the
   deployed site shipped. Palette: cream #FFFBF0 · slate-500 #59637E · slate-600 #3B4153. */

/* ── Brand custom properties the compiled stylesheet references but never defines ──
   Founder 2026-09-12 asked why the Signature Process list was not white. Cause:
   legacy/site.css styles it with color:var(--color-cream) and NOTHING declares that
   variable, so the rule is invalid and the text falls back to the dark inherited
   colour on a slate background. Same for two others:
     --color-cream      .index.on-slate links, and the cream pill button
     --color-ink        the pill button text on that cream
     --color-parchment  italic display accents, and a pill hover state
   Values are her brand palette from profile.md. Declaring them here repairs every
   use at once rather than overriding one section. */
:root {
  --color-cream: #FFFBF0;
  --color-ink: #3B4153;
  --color-parchment: #E2D8C1;
}

/* Direct-contact panel (contact + book pages, replacing the GHL embeds) */
.cta-panel { border-radius: .375rem; background: #FFFBF0; padding: 2.5rem 2rem; color: #59637E; }
.cta-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.cta-title { margin-top: .75rem; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; }
.cta-body { margin-top: 1rem; font-size: 14px; line-height: 1.75; color: #3B4153; }
.cta-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-note { margin-top: 1.5rem; font-size: 13px; line-height: 1.7; color: #3B4153; }

/* Google-reviews link row under the three home reviews */
.reviews-google { grid-column: 1 / -1; padding: 0 2rem 2.5rem; text-align: center; }

/* Review card with no photo on file: the ❝ mark in the same oval */
.quote-oval { display: flex; align-items: center; justify-content: center; background: #59637E; color: rgba(255, 251, 240, .8); }
.quote-oval span { font-size: 140px; line-height: 1; }

/* ── Digestibility pass (founder 2026-09-09) ──────────────────────────────── */

/* Step accordion: the 01/02/03 rows. Summary keeps the row grid (number · title),
   the body opens underneath, indented to the title column on desktop. */
.step-acc { display: block; }
.step-acc__summary { position: relative; cursor: pointer; list-style: none; }
.step-acc > .step-acc__summary { padding-right: 3.5rem; }
/* the pill is drawn for the slate header (cream on cream vanishes on this panel) */
.cta-panel .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; border: 1px solid #59637E; border-radius: 999px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #59637E; text-decoration: none; transition: background .2s ease, color .2s ease; }
.cta-panel .pill:hover { background: #59637E; color: #FFFBF0; }
.step-acc__summary::-webkit-details-marker { display: none; }
.step-acc__summary:hover { background: rgba(89, 99, 126, .05); }
.step-acc__chev { position: absolute; right: 1.5rem; top: 2rem; font-size: 18px; line-height: 1; transition: transform .25s ease; }
@media (min-width: 1024px) { .step-acc__chev { right: 3rem; } }
.step-acc[open] > .step-acc__summary .step-acc__chev { transform: rotate(180deg); }
.step-acc__body { padding: 0 1.5rem 2rem; }
@media (min-width: 1024px) { .step-acc__body { padding: 0 3rem 2rem var(--acc-indent, calc(3rem + 80px + 2rem + 250px + 2rem)); } }
/* the summary's third grid cell is empty now; keep the row height the same as before */
.step-acc__summary > h3 { align-self: center; }

/* Prose fold: first paragraph visible, the rest under "Read more" */
.more-fold { display: block; }
.more-fold__summary { cursor: pointer; list-style: none; display: inline-block; margin-top: .25rem; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #59637E; border-bottom: 1px solid currentColor; }
.more-fold__summary::-webkit-details-marker { display: none; }
.more-fold__close { display: none; }
.more-fold[open] > .more-fold__summary .more-fold__open { display: none; }
.more-fold[open] > .more-fold__summary .more-fold__close { display: inline; }
.more-fold > div { margin-top: 1rem; }

/* Smooth open/close where the browser supports it; instant elsewhere. */
@supports (interpolate-size: allow-keywords) {
  .step-acc, .more-fold { interpolate-size: allow-keywords; }
  .step-acc::details-content, .more-fold::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .step-acc[open]::details-content, .more-fold[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .step-acc::details-content, .more-fold::details-content, .step-acc__chev { transition: none; }
}

/* ── Cher's own copy, poured from browsbycher.ca (2026-09-09) ─────────────── */

/* Service menu — price cards. Replaces the paragraph stack so four prices can
   be compared at a glance. */
.price-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px)  { .price-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }
@media (min-width: 1180px) { .price-grid--two { grid-template-columns: repeat(2, 1fr); } }

.price-card { display: flex; flex-direction: column; border: 1px solid rgba(89,99,126,.25); border-radius: .375rem; background: #FFFDF8; padding: 1.75rem 1.5rem; }
.price-card__tagline { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(89,99,126,.75); min-height: 2.4em; }
.price-card__name { margin-top: .5rem; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.15; color: #59637E; }
.price-card__price { margin-top: 1rem; display: flex; align-items: baseline; gap: .75rem; border-top: 1px solid rgba(89,99,126,.2); padding-top: 1rem; }
.price-card__amount { font-family: var(--font-fraunces), Georgia, serif; font-size: 38px; line-height: 1; color: #3B4153; }
.price-card__dur { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(89,99,126,.7); }
.price-card__note { margin-top: .5rem; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(89,99,126,.7); }
.price-card__blurb { margin-top: .75rem; flex: 1; font-size: 13px; line-height: 1.7; color: #3B4153; }
.price-card__link { margin-top: 1.25rem; align-self: flex-start; }

/* Stat tiles — figures that were buried mid-sentence */
.stat-tiles { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; } }
.stat-tile { border: 1px solid rgba(89,99,126,.25); border-radius: .375rem; background: #FFFBF0; padding: 1.75rem 1.5rem; text-align: center; }
.stat-tile__value { display: block; font-family: var(--font-fraunces), Georgia, serif; font-size: 42px; line-height: 1; color: #3B4153; }
.stat-tile__label { display: block; margin-top: .5rem; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #59637E; }
.stat-tile__note { margin-top: .75rem; font-size: 13px; line-height: 1.7; color: #3B4153; }

/* Deposit / cancellation blocks — her label:value rows, kept as rows */
.policy-block__h { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.policy-block__body { margin-top: 1rem; font-size: 14px; line-height: 1.75; color: #3B4153; }
.policy-block__rows { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.policy-block__row { border-top: 1px solid rgba(89,99,126,.2); padding-top: .85rem; }
.policy-block__row dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #59637E; }
.policy-block__row dd { margin: .35rem 0 0; font-size: 14px; line-height: 1.7; color: #3B4153; }

/* Numbered policy clauses on /no-show-policy/ */
.policy-clause { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.75rem 0; }
@media (min-width: 1024px) { .policy-clause { grid-template-columns: 4rem 1fr; gap: 2rem; } }
.policy-clause__n { font-family: var(--font-fraunces), Georgia, serif; font-size: 30px; line-height: 1; color: rgba(89,99,126,.5); }
.policy-clause__h { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; color: #59637E; font-family: var(--font-fraunces), Georgia, serif; }
.policy-clause__body p { margin-top: .85rem; font-size: 14px; line-height: 1.75; color: #3B4153; }
.policy-clause__list { margin-top: .85rem; display: flex; flex-direction: column; gap: .6rem; }
.policy-clause__list li { position: relative; padding-left: 1.1rem; font-size: 14px; line-height: 1.7; color: #3B4153; }
.policy-clause__list li::before { content: "✦"; position: absolute; left: 0; color: rgba(89,99,126,.6); font-size: 11px; top: .3em; }

/* Her FAQ group labels */
.cher-faq__group { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #59637E; }

/* Her service-page copy: ✅ / ❌ / ✨ lists, touch-up note, 📞 line */
.cher-list { margin-top: 2rem; }
.cher-list__h { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #59637E; }
.cher-list__ul { margin-top: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.cher-list__ul li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; font-size: 14px; line-height: 1.7; color: #3B4153; }
.cher-list__mark { font-size: 13px; line-height: 1.7; }
.cher-touchup { margin-top: 2.5rem; border-left: 2px solid rgba(89,99,126,.45); padding: .25rem 0 .25rem 1.25rem; }
.cher-touchup__h { font-family: var(--font-fraunces), Georgia, serif; font-size: clamp(20px,1.8vw,25px); line-height: 1.2; color: #59637E; }
.cher-touchup p { margin-top: .6rem; font-size: 14px; line-height: 1.75; color: #3B4153; }
.cher-cta { margin-top: 2.5rem; border-top: 1px solid rgba(89,99,126,.2); padding-top: 1.5rem; font-size: 15px; line-height: 1.75; color: #3B4153; }

/* Her microblading explainer panels — 01 THE LOOK / 02 THE TOOLS / 03 COLOUR */
.cher-panels { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cher-panels { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.cher-panel { border-top: 1px solid rgba(89,99,126,.35); padding-top: 1.25rem; }
.cher-panel__n { font-family: var(--font-fraunces), Georgia, serif; font-size: 28px; line-height: 1; color: rgba(89,99,126,.5); }
.cher-panel__h { margin-top: .6rem; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #59637E; }
.cher-panel__b { margin-top: .8rem; font-size: 14px; line-height: 1.75; color: #3B4153; }

/* Her testimonial cards when no client photo is on file yet */
.cher-quote-mark { display: block; text-align: center; font-family: var(--font-fraunces), Georgia, serif; font-size: 96px; line-height: 1; color: rgba(89,99,126,.28); }
/* her two "What to expect?" paragraphs need real separation (legacy css resets margins) */
.cher-what > p + p { margin-top: 1.15rem; }

/* ── Gallery, ported from VRA's before-and-after route (founder 2026-09-09) ──
   Filter pills · square cards, 3-up · gentle hover scale · treatment name +
   Cher's own tagline beneath · whole card links to the treatment. */
.gal-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 2.75rem auto 0; max-width: 1000px; }
.gal-pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(89,99,126,.35); border-radius: 999px; background: transparent; padding: .62rem 1.15rem; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #59637E; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.gal-pill:hover { border-color: #59637E; }
.gal-pill.is-on { background: #59637E; border-color: #59637E; color: #FFFBF0; }
.gal-pill__n { font-size: 10px; opacity: .65; }

.gal-grid { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.5rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gal-grid { grid-template-columns: repeat(3, 1fr); gap: 2.1rem 1.5rem; } }

.gal-card { list-style: none; }
.gal-link { display: block; text-decoration: none; color: inherit; }
.gal-link:focus-visible { outline: 2px solid #59637E; outline-offset: 3px; border-radius: 14px; }
.gal-frame { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; box-shadow: 0 3px 12px rgba(59,65,83,.10); background: #EDE9DF; }
.gal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.gal-link:hover .gal-img { transform: scale(1.05); }
.gal-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-top: .9rem; }
.gal-meta__text { display: block; min-width: 0; }
.gal-name { display: block; font-family: var(--font-fraunces), Georgia, serif; font-size: 22px; line-height: 1.1; color: #59637E; }
.gal-desc { display: block; margin-top: .2rem; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(89,99,126,.75); }
.gal-arrow { flex-shrink: 0; margin-top: .25rem; color: rgba(89,99,126,.8); transition: transform .3s ease; }
.gal-link:hover .gal-arrow { transform: translateX(4px); }
.gal-disclaimer { margin: 2.75rem auto 0; max-width: 760px; text-align: center; font-size: 12px; font-style: italic; font-weight: 300; line-height: 1.6; color: rgba(89,99,126,.8); }
@media (prefers-reduced-motion: reduce) { .gal-img, .gal-arrow { transition: none; } }

/* ── Two-tier header (Jesse, 2026-09-09 call) ─────────────────────────────── */
/* Slim near-black strip above the nav: where she works + how to reach her. */
.util-bar { background: #0C1A2E; color: rgba(255,251,240,.86); }   /* her palette's blue-400 */
.util-bar__in { margin: 0 auto; max-width: 1440px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1.5rem; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 1024px) { .util-bar__in { padding-inline: 4rem; } }
.util-bar__where { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util-bar__reach { margin: 0; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.util-bar__reach a { color: inherit; text-decoration: none; }
.util-bar__reach a:hover { color: #FFFBF0; text-decoration: underline; }
@media (max-width: 560px) { .util-bar__where { display: none; } .util-bar__in { justify-content: center; } .util-bar__reach a + a { display: none; } .util-bar__reach span { display: none; } }

/* Book a consultation as a real button, not text with an icon */
.btn-book { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 999px; background: #FFFBF0; color: #59637E; padding: .68rem 1.4rem; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease; }
.btn-book:hover { background: #E2D8C1; color: #3B4153; }

/* A line of explanation under each service in the mega menu */
.mega-desc { display: block; margin: -.35rem 0 .75rem; font-size: 11px; letter-spacing: .04em; text-transform: none; line-height: 1.5; color: rgba(255,251,240,.6); }

/* ── Before/after composites ──────────────────────────────────────────────
   Cher, 2026-09-09: "Palmira's face is cut off … just with the ovalness."
   Every composite is a 1:1 square. They get a straight-edged square frame and
   are never masked; her oval motif stays on portraits and process shots.
   Sizing lives here because /legacy/site.css is precompiled — arbitrary
   Tailwind values that were not in the original build do not exist. */
.ba-frame{position:relative;overflow:hidden;border-radius:4px}
.ba-frame img{object-fit:cover}
.sq-279{width:279px;height:279px;margin-left:auto;margin-right:auto}
.sq-294{width:294px;height:294px}
.sq-300{width:300px;height:300px}
@media (max-width:420px){.sq-279,.sq-294{width:min(279px,86vw);height:min(279px,86vw)}}

/* ══ Service hero + tabbed card ═══════════════════════════════════════════
   On Essential Health Clinic's concern-spoke pattern. Founder 2026-09-09 (2nd
   pass): centred hero with NO image, everything moved into tabs, her BLUE as
   the section and a CREAM card rather than white, and a vertical timeline for
   "what to expect".

   Hand-written because bbc1 serves a precompiled stylesheet with no Tailwind
   pass. Tokens are Cher's: cream #fffbf0 · oat #ede9df · slate #59637e ·
   lavender #d9e2fc · ink #0C1A2E. */

.svc{background:#59637e;color:#fffbf0;padding:clamp(38px,6vw,80px) clamp(16px,4vw,48px) clamp(44px,6vw,88px)}

/* ── centred head ── */
.svc-head{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.svc-eyebrow{display:block;font-family:var(--font-poppins),system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#59637e;opacity:.85}
.svc-eyebrow--on-blue{color:#d9e2fc;opacity:1}
.svc-h1{font-family:var(--font-fraunces),Georgia,serif;font-variation-settings:"opsz" 144,"SOFT" 60;font-weight:400;line-height:1;letter-spacing:-.01em;font-size:clamp(36px,5vw,64px);color:#fffbf0;margin:0;text-wrap:balance}
.svc-tagline{font-family:var(--font-fraunces),Georgia,serif;font-weight:300;font-style:italic;font-size:clamp(17px,1.8vw,23px);line-height:1.35;color:#d9e2fc;margin:0}
.svc-sub{max-width:62ch;margin:6px 0 0;font-size:15px;line-height:1.75;color:rgba(255,251,240,.86)}
.svc-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;margin:12px 0 0}
.svc-meta__chip{border:1px solid rgba(255,251,240,.4);border-radius:999px;padding:6px 14px;font-family:var(--font-poppins),system-ui,sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#fffbf0}
.svc-cta{margin-top:16px;display:inline-flex;align-items:center;gap:.6em;background:#fffbf0;color:#2c3247;border-radius:999px;padding:13px 26px;font-family:var(--font-poppins),system-ui,sans-serif;font-size:13.5px;font-weight:500;letter-spacing:.04em;transition:background-color .22s,transform .22s}
.svc-cta:hover{background:#ede9df;transform:translateY(-1px)}

/* ── tabs ── */
.svc-tabs{max-width:1200px;margin:clamp(30px,4vw,52px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;scroll-margin-top:140px}
.svc-tab{display:inline-flex;align-items:center;gap:.55em;border:0;background:none;cursor:pointer;border-radius:12px;padding:11px 16px;font-family:var(--font-poppins),system-ui,sans-serif;font-size:13.5px;font-weight:500;color:rgba(255,251,240,.68);transition:background-color .22s,color .22s;white-space:nowrap}
.svc-tab:hover{color:#fffbf0}
.svc-tab.is-on{background:#fffbf0;color:#2c3247}
.svc-tab__i{display:inline-flex;width:16px;height:16px}
.svc-tab__i svg{width:16px;height:16px}

/* ── cream card ── */
.svc-card{max-width:1200px;margin:20px auto 0;background:#fffbf0;color:#59637e;border-radius:18px;padding:clamp(24px,3.4vw,60px)}
.svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,68px);align-items:start}
@media (min-width:900px){.svc-grid{grid-template-columns:1fr 1fr}.svc-grid--single{grid-template-columns:1fr;max-width:820px;margin:0 auto}}
.svc-col{min-width:0;display:flex;flex-direction:column;gap:16px}
.svc-h3{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(25px,2.6vw,36px);line-height:1.15;letter-spacing:-.01em;color:#59637e;margin:0;text-wrap:balance}
.svc-intro{margin:0;max-width:74ch;font-size:14.5px;line-height:1.75;color:#5c6478}

/* ── accordion ── */
.svc-acc{display:flex;flex-direction:column;margin-top:2px}
.svc-acc__row{border-top:1px solid rgba(89,99,126,.18)}
.svc-acc__row:last-child{border-bottom:1px solid rgba(89,99,126,.18)}
.svc-acc__head{width:100%;display:flex;align-items:center;gap:14px;padding:15px 0;background:none;border:0;cursor:pointer;text-align:left}
.svc-acc__n{font-family:var(--font-poppins),system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;min-width:24px;color:rgba(89,99,126,.45);transition:color .2s}
.svc-acc__label{font-family:var(--font-poppins),system-ui,sans-serif;font-size:15px;font-weight:500;color:rgba(74,82,102,.82);transition:color .2s}
.svc-acc__head.is-open .svc-acc__n,.svc-acc__head.is-open .svc-acc__plus{color:#59637e}
.svc-acc__head.is-open .svc-acc__label{color:#2c3247}
.svc-acc__plus{margin-left:auto;font-size:20px;font-weight:300;line-height:1;color:rgba(89,99,126,.5);transition:transform .25s,color .25s}
.svc-acc__head.is-open .svc-acc__plus{transform:rotate(45deg)}
.svc-acc__body{padding:0 8px 18px 38px;font-size:14px;line-height:1.65;color:#5c6478}

/* ── vertical timeline ── */
.svc-tl{list-style:none;margin:8px 0 0;padding:0;position:relative}
.svc-tl::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:1px;background:rgba(89,99,126,.25)}
.svc-tl__step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:18px;padding:0 0 30px}
.svc-tl__step:last-child{padding-bottom:0}
.svc-tl__n{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:#59637e;color:#fffbf0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-poppins),system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.04em}
.svc-tl__body{padding-top:6px;min-width:0}
.svc-tl__h{font-family:var(--font-poppins),system-ui,sans-serif;font-size:15px;font-weight:500;letter-spacing:.01em;color:#2c3247;margin:0 0 6px}
.svc-tl__p{margin:0;font-size:14px;line-height:1.7;color:#5c6478}

/* ── suitability lists (Cher's own ✅ / ❌ shape) ── */
.svc-lists{display:grid;gap:22px}
.svc-list__h{font-family:var(--font-poppins),system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .7em;color:#59637e}
.svc-list ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.svc-list li{position:relative;padding-left:1.7em;font-size:14.5px;line-height:1.6;color:#4a5266}
.svc-list li::before{position:absolute;left:0;top:0;font-size:13px}
.svc-list--yes li::before{content:"✓";color:#59637e;font-weight:600}
.svc-list--no li::before{content:"✕";color:#a9727a}
.svc-list--no li{color:#6b7183}
.svc-note{margin:4px 0 0;font-size:13.5px;line-height:1.7;color:#6b7183;font-style:italic}
.svc-panel-cta{margin-top:6px;color:#59637e}

/* ── image + badge rail ── */
.svc-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:900px){.svc-rail{position:sticky;top:132px}}
.svc-rail__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.svc-rail__badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:fit-content;max-width:100%;border:1px solid rgba(89,99,126,.5);border-radius:12px;background:#fffbf0;padding:9px 16px}
.svc-rail__badge-k{font-family:var(--font-poppins),system-ui,sans-serif;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#59637e;opacity:.85}
.svc-rail__badge-v{font-family:var(--font-poppins),system-ui,sans-serif;font-size:13px;font-weight:600;color:#2c3247}

/* ══ Service-page extras: transformations · related reading · booking ═════ */
.xtra{padding:clamp(40px,5.5vw,80px) clamp(16px,4vw,48px)}
.xtra--cream{background:#fffbf0;color:#59637e}
.xtra--oat{background:#ede9df;color:#59637e}
.xtra--blue{background:#59637e;color:#fffbf0}
.xtra__in{max-width:1200px;margin:0 auto}
.xtra__in--center{max-width:720px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.xtra__head{max-width:720px;margin:0 0 clamp(22px,3vw,40px)}
.xtra__eyebrow{display:block;font-family:var(--font-poppins),system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#59637e;opacity:.85;margin-bottom:.7em}
.xtra__eyebrow--on-blue{color:#d9e2fc;opacity:1}
.xtra__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.12;letter-spacing:-.01em;color:#59637e;margin:0;text-wrap:balance}
.xtra__h2--on-blue{color:#fffbf0}
.xtra__lede{margin:0;max-width:56ch;font-size:15px;line-height:1.75;color:rgba(255,251,240,.86)}
.xtra__note{margin:22px 0 0;font-size:12.5px;line-height:1.7;color:#6b7183;max-width:70ch}
.xtra__link{margin-top:10px;color:#59637e}
.xtra__cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:8px}
.xtra__tel{font-size:14px;color:rgba(255,251,240,.85);text-decoration:underline;text-underline-offset:3px}
.xtra__tel:hover{color:#fffbf0}

/* transformations grid — squared frames, never ovals */
.xtra-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px)}
@media (min-width:760px){.xtra-grid{grid-template-columns:repeat(3,1fr)}}
.xtra-shot{position:relative;display:flex;flex-direction:column;gap:8px}
.xtra-shot img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block}
.xtra-shot__cap{font-family:var(--font-poppins),system-ui,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(89,99,126,.75)}

/* related reading cards */
.xtra-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.xtra-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.xtra-cards{grid-template-columns:repeat(3,1fr)}}
.xtra-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n t g" "n d g";gap:2px 14px;height:100%;background:#fffbf0;border:1px solid rgba(89,99,126,.16);border-radius:14px;padding:20px 20px;transition:border-color .22s,transform .22s}
.xtra-card:hover{border-color:rgba(89,99,126,.45);transform:translateY(-2px)}
.xtra-card__n{grid-area:n;font-family:var(--font-poppins),system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;color:rgba(89,99,126,.5);padding-top:3px}
.xtra-card__t{grid-area:t;font-family:var(--font-poppins),system-ui,sans-serif;font-size:14.5px;font-weight:500;line-height:1.4;color:#2c3247}
.xtra-card__d{grid-area:d;font-size:13px;line-height:1.6;color:#6b7183;margin-top:5px}
.xtra-card__go{grid-area:g;align-self:center;color:rgba(89,99,126,.55);display:inline-flex}
.xtra-card:hover .xtra-card__go{color:#59637e}
.svc-para{margin:0;max-width:70ch;font-size:14.5px;line-height:1.75;color:#5c6478}
/* key bullet points inside a panel */
.svc-keys{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:.65em}
.svc-keys li{display:flex;gap:.7em;align-items:flex-start;font-size:14.5px;line-height:1.6;color:#4a5266}
.svc-keys svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:#59637e}
/* a list living inside an accordion body */
.svc-acc__list{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.svc-acc__list li{position:relative;padding-left:1.6em;font-size:14px;line-height:1.6;color:#5c6478}
.svc-acc__list li::before{position:absolute;left:0;top:0;font-size:12.5px}
.svc-acc__list--yes li::before{content:"✓";color:#59637e;font-weight:600}
.svc-acc__list--no li::before{content:"✕";color:#a9727a}

/* ══ Client Transformations — her own Wix service-page layout ═════════════
   Oat ground, centred serif heading, an italic line, a horizontal slider of
   PORTRAIT cards, caption underneath. Founder 2026-09-09: "i like the client
   transformation style on the existing treatment page."

   Her version ovals every face. Cher asked us to stop doing that — "Palmira's
   face is cut off ... just with the ovalness" — so the layout is hers and the
   frames are square-cornered. */
.ct{background:#ede9df;color:#59637e;padding:clamp(40px,5.5vw,78px) 0}
.ct__head{max-width:820px;margin:0 auto clamp(22px,3vw,38px);padding:0 clamp(18px,4vw,48px);text-align:center}
.ct__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.01em;color:#59637e;margin:0}
.ct__sub{font-family:var(--font-fraunces),Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(16px,1.7vw,22px);line-height:1.4;color:#6b7183;margin:.5em 0 0}
/* Grid, not a slider — founder 2026-09-09. Four across on desktop so eight
   cards make two complete rows. */
.ct__grid{list-style:none;margin:0 auto;padding:0 clamp(18px,4vw,48px);max-width:1280px;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,22px)}
@media (min-width:640px){.ct__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.ct__grid{grid-template-columns:repeat(4,1fr)}}
.ct__card{display:flex;flex-direction:column;gap:9px;min-width:0}
/* About (Cher 2026-09-14, "make the gallery look symmetric"): a short last row sits centred. */
.ct__grid--centred{display:flex;flex-wrap:wrap;justify-content:center}
.ct__grid--centred .ct__card{width:calc((100% - clamp(12px,1.6vw,22px))/2)}
@media (min-width:640px){.ct__grid--centred .ct__card{width:calc((100% - 2*clamp(12px,1.6vw,22px))/3)}}
@media (min-width:1024px){.ct__grid--centred .ct__card{width:calc((100% - 3*clamp(12px,1.6vw,22px))/4)}}
.ct__card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block}
.ct__cap{font-family:var(--font-poppins),system-ui,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(89,99,126,.75)}
.ct__note{max-width:70ch;margin:clamp(20px,2.6vw,32px) auto 0;padding:0 clamp(18px,4vw,48px);text-align:center;font-size:14.5px;line-height:1.75;color:#5c6478}
.ct__fine{max-width:70ch;margin:12px auto 0;padding:0 clamp(18px,4vw,48px);text-align:center;font-size:12.5px;line-height:1.7;color:#7b8194}
.ct__cta{text-align:center;margin-top:16px}
.ct__cta .link-arrow{color:#59637e}

/* ══ "Your Brows by Cher Experience" — recreated from her Wix service page ══
   Measured off the live page: radial ground #7c859e → #374558, cream cards, her
   serif, and the fan at +7 / -3 / 0 / -5 degrees with a vertical stagger.
   Founder 2026-09-09: "recreate this exact section below the before and afters." */
.exp{background:radial-gradient(circle,#7c859e 52%,#374558 100%);color:#fffbf0;padding:clamp(44px,6vw,86px) clamp(16px,4vw,48px) clamp(56px,7vw,110px);overflow:hidden}
.exp__head{max-width:860px;margin:0 auto clamp(26px,3.4vw,44px);text-align:center}
.exp__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.01em;color:#fffbf0;margin:0}
.exp__sub{font-family:var(--font-fraunces),Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(16px,1.8vw,23px);line-height:1.4;color:rgba(255,251,240,.92);margin:.55em auto 0;max-width:44ch}
.exp__fan{list-style:none;margin:0 auto;padding:0;max-width:1300px;display:grid;grid-template-columns:1fr;gap:18px}
.exp__card{background:#fffbf0;color:#59637e;border-radius:16px;padding:30px 28px 34px;box-shadow:0 18px 44px rgba(20,26,40,.22);text-align:center;position:relative}
.exp__sparkle{display:block;color:#e6dcc4;line-height:1;margin-bottom:14px}
.exp__sparkle i{font-style:normal;display:inline-block}
.exp__sparkle--sm{font-size:17px;transform:translateY(-7px)}
.exp__sparkle--lg{font-size:30px;margin-left:2px}
.exp__step{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(20px,1.9vw,25px);line-height:1.2;color:#59637e;margin:0 0 12px}
.exp__body{margin:0;font-size:13.5px;line-height:1.7;color:#5c6478}

/* The fan itself — desktop only. Below this it is a plain stack, which is also
   what anyone with reduced-motion preferences gets. */
@media (min-width:1024px){
  .exp__fan{grid-template-columns:repeat(4,1fr);gap:0;align-items:start;padding:26px 0 46px}
  .exp__card{margin:0 -22px}
  .exp__card--1{transform:rotate(7deg)   translateY(0)}
  .exp__card--2{transform:rotate(-3deg)  translateY(60px)}
  .exp__card--3{transform:rotate(0deg)   translateY(22px)}
  .exp__card--4{transform:rotate(-5deg)  translateY(66px)}
  .exp__card--1{z-index:4}.exp__card--2{z-index:3}.exp__card--3{z-index:2}.exp__card--4{z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .exp__card{transform:none!important;margin:0!important}
}

/* ══ Meet your artist — ported from VRA's vraExperienceSection ════════════
   Image left, credentials accordion right. Founder 2026-09-09: "above the FAQ
   we have an about artist section, something just like The VRA Experience." */
.artist{background:#fffbf0;color:#59637e;padding:clamp(40px,5.5vw,78px) clamp(16px,4vw,48px)}
.artist__in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,60px);align-items:stretch}
@media (min-width:900px){.artist__in{grid-template-columns:1fr 1fr}}
.artist__media{position:relative;border-radius:12px;overflow:hidden;background:#ede9df;min-height:340px}
@media (min-width:900px){.artist__media{min-height:560px}}
.artist__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.artist__body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.artist__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.12;letter-spacing:-.01em;color:#59637e;margin:12px 0 0;text-wrap:balance}
.artist__intro{margin:16px 0 0;font-size:14.5px;line-height:1.75;color:#5c6478;max-width:56ch}
.artist__rule{display:flex;align-items:center;gap:18px;margin:26px 0}
.artist__rule span{height:1px;flex:1;background:rgba(89,99,126,.28)}
.artist__rule i{font-style:normal;font-size:19px;color:#c8b78e;line-height:1}
.artist__acc{margin-top:0}
.artist__row{border-top:1px solid rgba(89,99,126,.18)}
.artist__row:last-of-type{border-bottom:1px solid rgba(89,99,126,.18)}
.artist__row>summary{list-style:none;cursor:pointer}
.artist__row>summary::-webkit-details-marker{display:none}
.artist__row[open]>summary .svc-acc__plus{transform:rotate(45deg);color:#59637e}
.artist__row[open]>summary .svc-acc__n{color:#59637e}
.artist__row[open]>summary .svc-acc__label{color:#2c3247}
.artist__link{margin-top:22px;color:#59637e;align-self:flex-start}

/* ══ Related treatments — VRA's auto-scrolling flip-card marquee ══════════
   Founder 2026-09-09: "a carousel at the bottom like the VRA botox treatment
   carousel." Hover the strip to pause; reduced-motion stops it entirely and
   turns it into a plain scrollable row. */
.rel{background:#ede9df;color:#59637e;padding:clamp(40px,5.5vw,72px) 0 clamp(46px,6vw,84px);overflow:hidden}
.rel__head{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,48px);text-align:center}
.rel__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.12;color:#59637e;margin:8px 0 0}
.rel__marquee{margin-top:38px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rel__track{display:flex;width:max-content;animation:rel-scroll 46s linear infinite}
.rel__marquee:hover .rel__track,.rel__marquee:focus-within .rel__track{animation-play-state:paused}
@keyframes rel-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rel__card{flex:0 0 auto;width:300px;margin:0 12px;perspective:1200px}
@media (min-width:1024px){.rel__card{width:340px}}
.rel__inner{position:relative;height:400px;width:100%;transition:transform .6s cubic-bezier(.22,.61,.36,1);transform-style:preserve-3d}
.rel__card:hover .rel__inner,.rel__card:focus-within .rel__inner{transform:rotateY(180deg)}
.rel__front,.rel__back{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden}
.rel__front{box-shadow:2px 2px 15px rgba(0,0,0,.08)}
.rel__front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel__front-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:24px;background:linear-gradient(180deg,rgba(255,251,240,0) 32%,rgba(44,50,71,.84) 100%)}
.rel__price{font-family:var(--font-poppins),system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,251,240,.88)}
.rel__name{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:25px;line-height:1.1;color:#fffbf0;margin:0}
.rel__back{transform:rotateY(180deg);display:flex;flex-direction:column;background:#fffbf0;border:1px solid rgba(89,99,126,.2);padding:26px}
.rel__name--back{color:#59637e;font-size:23px}
.rel__tag{font-family:var(--font-fraunces),Georgia,serif;font-style:italic;font-size:14px;color:#7b8194;margin:8px 0 0}
.rel__desc{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:#5c6478}
.rel__cta{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-poppins),system-ui,sans-serif;font-size:14px;font-weight:500;color:#59637e}
.rel__cta:hover{opacity:.8}
@media (prefers-reduced-motion:reduce){
  .rel__track{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .rel__card{scroll-snap-align:start}
  .rel__inner{transition:none}
  .rel__card:hover .rel__inner{transform:none}
}
.rel__price:empty{display:none}

/* ══ Client testimonials — the social-proof band ══════════════════════════
   VRA runs "What Our Patients Are Saying" between the credentials block and the
   FAQ; this sits in the same slot. Her three real Google reviews. */
.tst{background:#ede9df;color:#59637e;padding:clamp(40px,5.5vw,74px) clamp(16px,4vw,48px)}
.tst__in{max-width:1200px;margin:0 auto}
.tst__head{text-align:center;margin:0 0 clamp(24px,3.2vw,42px)}
.tst__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.12;color:#59637e;margin:8px 0 0}
.tst__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,24px)}
@media (min-width:820px){.tst__grid{grid-template-columns:repeat(3,1fr)}}
.tst__card{background:#fffbf0;border:1px solid rgba(89,99,126,.16);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column}
.tst__mark{font-family:var(--font-fraunces),Georgia,serif;font-size:34px;line-height:1;color:#c8b78e;margin-bottom:12px}
.tst__title{font-family:var(--font-poppins),system-ui,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#59637e;margin:0 0 12px}
.tst__quote{margin:0;font-size:14px;line-height:1.75;color:#5c6478;font-style:normal;quotes:none}
.tst__who{margin-top:auto;padding-top:18px;font-family:var(--font-poppins),system-ui,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(89,99,126,.75);font-style:normal}
.tst__foot{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:clamp(22px,3vw,36px)}
.tst__foot .link-arrow{color:#59637e}

/* ── /mobile/ rebuilt on the VRA provider-page outline (founder 2026-09-11) ──
   "change the format and outline to match exactly like
   victoriaroseaesthetics.ca/about/victoria-rose-cyr/".

   Same eight beats in the same order: full-bleed hero with a 01–03 quick-link
   nav, experience beside a credentials card, a three-image collage beside an
   accordion, two card grids, a banded three-up, the booking band, the FAQ.

   VRA is Tailwind and bbc1 has no Tailwind pass, so every class below is
   hand-written against her palette — cream #FFFBF0 · oat #EDE9DF ·
   slate-400 #7C859E · slate-500 #59637E · slate-600 #3B4153 · slate-800 #2C313F
   · lavender #D9E2FC · gold #C8B78E. */

.mob-wrap { margin: 0 auto; max-width: 1440px; padding: 0 1.5rem; }
@media (min-width: 1024px) { .mob-wrap { padding: 0 4rem; } }

.mob-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #59637E; opacity: .7; }
.mob-eyebrow--on-blue { color: #FFFBF0; opacity: .75; }
.mob-h2 { margin-top: .75rem; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.06; color: #59637E; }
.mob-h2 em { font-style: italic; color: #7C859E; }
.mob-lede { margin-top: 1rem; font-size: 15px; line-height: 1.75; color: #3B4153; }

/* ── 1 · Hero ─────────────────────────────────────────────────────────────── */
/* Desktop: the wide consult frame full-bleed, copy in the right column clear of
   the subject. Mobile: her portrait setup shot on top, faded into the cream. */
.mob-hero { position: relative; background: #EDE9DF; }
.mob-hero__media { position: relative; width: 100%; overflow: hidden; }
.mob-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mob-hero__fade { position: absolute; inset-inline: 0; bottom: 0; height: 82%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,251,240,0) 0%, rgba(255,251,240,.04) 32%, rgba(255,251,240,.22) 56%, rgba(255,251,240,.55) 76%, rgba(255,251,240,.86) 90%, #FFFBF0 100%); }

/* mobile shape */
.mob-hero--sm .mob-hero__media { height: 66vh; min-height: 460px; }
.mob-hero--sm .mob-hero__img { object-position: center 12%; }
.mob-hero--sm .mob-hero__copy { position: relative; z-index: 1; margin-top: -6.5rem; padding-bottom: 2.5rem; }
.mob-hero--lg { display: none; }
@media (min-width: 1024px) {
  .mob-hero--sm { display: none; }
  .mob-hero--lg { display: block; min-height: 640px; padding: 5rem 0; }
  .mob-hero--lg .mob-hero__media { position: absolute; inset: 0; height: 100%; }
  /* Mirrored. Cher stands on the right of this frame, under the copy wash;
     flipping puts the artist in the clear half. Founder 2026-09-11. */
  .mob-hero--lg .mob-hero__img { object-position: center 22%; transform: scaleX(-1); }
  /* vertical wash on the left so the copy column stays legible over the frame */
  .mob-hero--lg .mob-hero__fade { inset: 0; height: 100%;
    background: linear-gradient(to right, rgba(255,251,240,0) 0%, rgba(255,251,240,.10) 34%, rgba(255,251,240,.72) 52%, rgba(255,251,240,.94) 66%, #FFFBF0 100%); }
  .mob-hero__in { position: relative; }
  .mob-hero__grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3.75rem; align-items: center; min-height: 480px; }
}
.mob-hero__copy .mob-h1 { margin-top: .75rem; font-size: clamp(38px, 4.4vw, 64px); line-height: .96; text-transform: uppercase; color: #59637E; }
.mob-hero__copy .mob-sub { margin-top: .5rem; font-size: clamp(19px, 1.8vw, 26px); font-style: italic; color: #7C859E; }
.mob-hero__copy .mob-lede { max-width: 30rem; }

/* 01 · 02 · 03 quick links */
.mob-nav { display: flex; flex-direction: column; margin-top: 1.75rem; max-width: 26rem; }
.mob-nav__a { display: flex; align-items: baseline; gap: .875rem; padding: .9rem 0; text-decoration: none; }
.mob-nav__a + .mob-nav__a { border-top: 1px solid rgba(89, 99, 126, .25); }
.mob-nav__n { font-size: 13px; letter-spacing: .1em; color: #7C859E; line-height: 1; padding-top: 3px; }
.mob-nav__t { display: flex; flex-direction: column; }
.mob-nav__label { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: #59637E; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.mob-nav__a:hover .mob-nav__label { border-bottom-color: #59637E; }
.mob-nav__cap { margin-top: 4px; font-size: 12px; line-height: 1.35; color: #3B4153; opacity: .8; }

/* ── 2 · Experience + credentials card ────────────────────────────────────── */
.mob-exp { background: #FFFBF0; padding: 4rem 0; scroll-margin-top: 110px; }
.mob-exp__in { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .mob-exp__in { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.mob-creds { display: flex; flex-direction: column; justify-content: center; gap: .875rem; height: 100%; border-radius: .75rem; background: #EDE9DF; padding: 2rem; }
.mob-cred { display: flex; align-items: flex-start; gap: .75rem; font-size: 15px; line-height: 1.6; color: #59637E; }
.mob-cred__i { flex: 0 0 auto; margin-top: 3px; font-size: 13px; color: #C8B78E; }

/* ── 3 · Collage + accordion ──────────────────────────────────────────────── */
.mob-approach { background: #FFFBF0; padding: 4rem 0; }
.mob-approach__in { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) { .mob-approach__in { flex-direction: row; align-items: stretch; } }
.mob-collage { display: flex; flex-direction: column-reverse; gap: 1.875rem; width: 100%; }
@media (min-width: 768px) { .mob-collage { flex-direction: row; } }
.mob-collage__stack { display: flex; flex-direction: column; gap: 1.875rem; width: 100%; }
.mob-collage__cell { position: relative; overflow: hidden; border-radius: .5rem; min-height: 251px; height: 100%; }
.mob-collage__tall { position: relative; overflow: hidden; border-radius: .5rem; width: 100%; min-height: 253px; }
.mob-collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The tall frame is a 4:3 image in a portrait box, so a default centre crop cuts the
   brow out to the right. Pull the focal point onto the mapping. */
.mob-collage__tall img { object-position: 62% 40%; }
.mob-approach__body { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.mob-rule { display: flex; align-items: center; gap: 1.25rem; margin: 2.2rem 0; }
.mob-rule span { height: 1px; flex: 1; background: rgba(89, 99, 126, .25); }
.mob-rule i { font-style: normal; font-size: 18px; color: #C8B78E; }
/* the closing CTA sits flush against the last accordion row without this */
.mob-approach__body > .link-arrow { margin-top: 2rem; align-self: flex-start; }

/* Accordion rows, matching the svc-acc shape already on the treatment pages */
.mob-acc__row { border-bottom: 1px solid rgba(89, 99, 126, .25); }
.mob-acc__head { display: grid; grid-template-columns: 2.5rem 1fr 1.5rem; align-items: center; gap: .75rem; width: 100%; padding: 1.1rem 0; cursor: pointer; list-style: none; text-align: left; background: none; border: 0; font: inherit; color: #59637E; }
.mob-acc__head::-webkit-details-marker { display: none; }
.mob-acc__n { font-size: 12px; letter-spacing: .12em; color: #7C859E; }
.mob-acc__label { font-size: 15px; letter-spacing: .06em; }
.mob-acc__plus { justify-self: end; font-size: 18px; line-height: 1; transition: transform .25s ease; }
.mob-acc__row[open] .mob-acc__plus { transform: rotate(45deg); }
.mob-acc__body { padding: 0 0 1.25rem; font-size: 13px; line-height: 1.75; color: #3B4153; }
.mob-acc__body p + p { margin-top: .875rem; }
.mob-acc__body ul { margin-top: .75rem; padding-left: 1.1rem; list-style: disc; }
.mob-acc__body li { margin-top: .35rem; }

/* ── 4 · Card grids ───────────────────────────────────────────────────────── */
.mob-cards { padding: 4rem 0; }
.mob-cards--oat { background: #EDE9DF; }
.mob-cards--cream { background: #FFFBF0; }
.mob-cards__head { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.mob-cards__head .mob-h2 { max-width: 51rem; }
.mob-cards__head .mob-lede { max-width: 42rem; }
.mob-cards__grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.875rem; }
@media (min-width: 640px) { .mob-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mob-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mob-cards__grid--3 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .mob-cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mob-card { display: flex; flex-direction: column; min-width: 0; height: 100%; text-decoration: none; }
/* the blurb takes the slack so every card's CTA sits on the same line */
.mob-card__p { flex: 1 1 auto; }
.mob-card__shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .625rem; background: #FFFBF0; }
.mob-card__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mob-card:hover .mob-card__shot img { transform: scale(1.04); }
.mob-card__h { margin-top: 1.25rem; font-size: 20px; line-height: 1.3; color: #59637E; }
.mob-card__price { margin-top: .35rem; font-size: 13px; letter-spacing: .1em; color: #C8B78E; }
.mob-card__p { margin-top: .625rem; font-size: 14px; line-height: 1.6; color: #3B4153; opacity: .9; }
.mob-card__link { margin-top: .875rem; width: fit-content; padding-bottom: 2px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: #7C859E; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.mob-card:hover .mob-card__link { border-bottom-color: #7C859E; }

/* Bordered tile, no photo — the certification row */
.mob-tile { display: flex; flex-direction: column; min-width: 0; height: 100%; border: 1px solid rgba(89, 99, 126, .25); border-radius: .625rem; padding: 1.75rem; background: #FFFBF0; }
.mob-tile__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #C8B78E; }
.mob-tile__h { margin-top: .625rem; font-size: 18px; line-height: 1.35; color: #59637E; }
.mob-tile__p { margin-top: .5rem; font-size: 13px; line-height: 1.7; color: #3B4153; opacity: .9; }

/* ── 5 · Banded three-up on slate, VRA's training band ────────────────────── */
.mob-band { position: relative; overflow: hidden; background: #59637E; color: #FFFBF0; padding: 4rem 0; }
.mob-band .mob-eyebrow { color: #FFFBF0; opacity: .75; }
.mob-band .mob-h2 { color: #FFFBF0; }
.mob-band .mob-h2 em { color: #D9E2FC; }
.mob-band .mob-lede { color: rgba(255, 251, 240, .9); }
.mob-band__head { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.mob-band__grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.875rem; }
@media (min-width: 1024px) { .mob-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mob-band__col { min-width: 0; border-top: 1px solid rgba(255, 251, 240, .3); padding-top: 1.5rem; }
.mob-band__h { font-size: 22px; line-height: 1.3; }
.mob-band__p { margin-top: .75rem; font-size: 14px; line-height: 1.75; color: rgba(255, 251, 240, .9); }
.mob-band__list { margin-top: .875rem; display: flex; flex-direction: column; gap: .5rem; }
.mob-band__list li { display: flex; gap: .625rem; font-size: 14px; line-height: 1.6; color: rgba(255, 251, 240, .9); }
.mob-band__list i { font-style: normal; color: #D9E2FC; }

/* ── 6 · Two-column compare ───────────────────────────────────────────────── */
.mob-split { background: #FFFBF0; padding: 4rem 0; }
.mob-split__grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1.875rem; }
@media (min-width: 768px) { .mob-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mob-split__col { min-width: 0; height: 100%; border-radius: .75rem; background: #EDE9DF; padding: 2rem; }
.mob-split__col--plain { background: transparent; border: 1px solid rgba(89, 99, 126, .25); }
.mob-split__h { font-size: 18px; letter-spacing: .06em; color: #59637E; }
.mob-split__list { margin-top: 1rem; display: flex; flex-direction: column; gap: .625rem; }
.mob-split__list li { display: flex; gap: .625rem; font-size: 14px; line-height: 1.6; color: #3B4153; }
.mob-split__list i { font-style: normal; color: #C8B78E; }
.mob-split__note { margin-top: 1.5rem; font-size: 13px; line-height: 1.75; color: #3B4153; }

/* ── Second pass, founder 2026-09-11 ──────────────────────────────────────────
   "where i travel around calgary should have all the locations ... let's make
   it a map of Calgary with a star for areas traveled ... let's actually move
   that section to luxury brows without the studio, combine those sections."
   And: "mobile never makeshift" and "the case for it" become one section. */

.mob-travel { margin-top: 3.5rem; border-top: 1px solid rgba(89, 99, 126, .25); padding-top: 2.5rem; }
.mob-travel__grid { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .mob-travel__grid { grid-template-columns: 1.35fr 1fr; gap: 3rem; } }
.mob-map { width: 100%; height: auto; display: block; border-radius: .75rem; background: #FFFBF0; border: 1px solid rgba(89, 99, 126, .2); }
.mob-map__ridge { fill: none; stroke: rgba(89, 99, 126, .35); stroke-width: 2; stroke-linejoin: round; }
.mob-map__river { fill: none; stroke: rgba(124, 133, 158, .5); stroke-width: 2.5; stroke-linecap: round; }
.mob-map__city { fill: rgba(89, 99, 126, .1); stroke: rgba(89, 99, 126, .4); stroke-width: 1.5; }
.mob-map__star { fill: #C8B78E; }
.mob-map__label { fill: #59637E; font-size: 19px; letter-spacing: .04em; }
.mob-map__sub { fill: #3B4153; opacity: .75; font-size: 15px; }
.mob-map__cap { fill: #7C859E; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.mob-areas { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
.mob-areas li { display: flex; gap: .625rem; font-size: 15px; line-height: 1.55; color: #3B4153; }
.mob-areas i { font-style: normal; color: #C8B78E; }
.mob-areas b { font-weight: 400; color: #59637E; }
.mob-fees { margin-top: 1.5rem; border-radius: .75rem; background: #EDE9DF; padding: 1.5rem; }
.mob-fees p { font-size: 13px; line-height: 1.7; color: #3B4153; }
.mob-fees p + p { margin-top: .5rem; }

/* Merged "why mobile" + "safety" band: one header, two rows of three */
.mob-band__sub { margin-top: 3.25rem; display: flex; align-items: center; gap: 1.25rem; }
.mob-band__sub span { height: 1px; flex: 1; background: rgba(255, 251, 240, .3); }
.mob-band__sub p { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 251, 240, .8); }
.mob-band__grid + .mob-band__sub { margin-top: 3.25rem; }

/* ── Simplified FAQ + pricing (founder 2026-09-11) ────────────────────────────
   "no hero sections, no big areas, just straight facts and simple pricing,
   centered, accordion style, clean editorial." A narrow centred measure, one
   hairline rule per row, and nothing else. */
.pg-wrap { margin: 0 auto; max-width: 780px; padding: 0 1.5rem; }
.pg-head { background: #FFFBF0; padding: 4.5rem 0 2.5rem; text-align: center; }
.pg-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #7C859E; }
.pg-h1 { margin-top: .875rem; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; color: #59637E; }
.pg-lede { margin: 1rem auto 0; max-width: 34rem; font-size: 15px; line-height: 1.75; color: #3B4153; }
.pg-acc { background: #FFFBF0; padding: 1rem 0 4rem; }
.pg-h2 { margin-bottom: 1.5rem; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; color: #59637E; text-align: center; }
.pg-acc__list { border-top: 1px solid rgba(89, 99, 126, .22); }
.pg-acc__list details { border-bottom: 1px solid rgba(89, 99, 126, .22); }
.pg-acc__list summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  cursor: pointer; list-style: none; padding: 1.15rem 0; font-size: 15px; line-height: 1.5; color: #59637E; }
.pg-acc__list summary::-webkit-details-marker { display: none; }
.pg-acc__list summary::after { content: "+"; flex: 0 0 auto; font-size: 18px; line-height: 1; color: #7C859E; transition: transform .25s ease; }
.pg-acc__list details[open] summary::after { transform: rotate(45deg); }
.pg-acc__list details > div { padding: 0 0 1.25rem; font-size: 14px; line-height: 1.8; color: #3B4153; }
.pg-acc__list details p + p { margin-top: .875rem; }
.pg-acc__list details ul { margin-top: .75rem; padding-left: 1.1rem; }
.pg-cta { background: #EDE9DF; padding: 3rem 0; text-align: center; }
.pg-cta__p { margin-bottom: 1rem; font-size: 14px; line-height: 1.75; color: #3B4153; }

/* The price list keeps its own cards but loses the wide gutters so it sits on the
   same centred measure as everything else on these two pages. */
.pg-head + section .price-grid { justify-content: center; }

/* A full-width component dropped into one of the simplified pages: pull it onto
   the same centred measure, and centre its group labels. */
.pg-embed > section > div { max-width: 780px; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0; }
.pg-embed .cher-faq__group { text-align: center; }

/* ── The price list and the stacked policies (founder 2026-09-11) ─────────────
   A menu, not a card grid: what it is on the left, what it costs on the right,
   one hairline between. Deposit and cancellation stack; they never sit side by
   side. */
.pg-body { background: #FFFBF0; padding: 1rem 0 3rem; }
.pg-h2--tight { margin-top: 3.5rem; }
.pg-note { margin: -0.75rem auto 1.25rem; max-width: 34rem; text-align: center; font-size: 13px; line-height: 1.7; color: #3B4153; opacity: .85; }
.pg-list { border-top: 1px solid rgba(89, 99, 126, .22); }
.pg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid rgba(89, 99, 126, .22); padding: 1.15rem 0; }
.pg-row__main { min-width: 0; }
.pg-row__name { display: block; font-size: 17px; line-height: 1.3; color: #59637E; text-decoration: none; }
a.pg-row__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-row__tag { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #C8B78E; }
.pg-row__blurb { margin-top: .5rem; font-size: 13px; line-height: 1.65; color: #3B4153; opacity: .9; }
.pg-row__meta { flex: 0 0 auto; text-align: right; }
.pg-row__price { display: block; font-size: 20px; line-height: 1.2; color: #59637E; }
.pg-row__dur { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7C859E; }
.pg-foot { margin-top: 1.25rem; font-size: 13px; line-height: 1.7; color: #3B4153; opacity: .85; }

.pg-policies { margin-top: 3.5rem; }
.pg-policy + .pg-policy { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(89, 99, 126, .22); }
.pg-policy__h { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #59637E; }
.pg-policy__body { margin-top: .75rem; font-size: 14px; line-height: 1.8; color: #3B4153; }
.pg-policy__rows { margin-top: 1rem; }
.pg-policy__row { margin-top: .625rem; font-size: 13.5px; line-height: 1.75; color: #3B4153; }
.pg-policy__row dt { display: inline; color: #59637E; }
.pg-policy__row dd { display: inline; margin: 0; }
.pg-policies__link { margin-top: 2rem; }
.pg-pricenote { margin-top: 2.5rem; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7C859E; }

/* FAQ groups, same rows as everywhere else */
.pg-group + .pg-group { margin-top: 3rem; }
.pg-group__h { margin-bottom: 1.25rem; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #7C859E; text-align: center; }
.pg-acc__list .pg-q { border-bottom: 1px solid rgba(89, 99, 126, .22); }

/* ── Blog post header, on the VRA outline (founder 2026-09-11) ───────────────
   Breadcrumbs, topic and read time, title, excerpt — all on the article's own
   760px measure. Replaces the half-page split hero whose photo was unrelated and
   repeated across posts. No date: these posts carry none and one will not be
   invented. */
.pg-post__head { background: #FFFBF0; padding: 2.25rem 0 .5rem; }
.pg-post__wrap { margin: 0 auto; max-width: 760px; padding: 0 1.5rem; }
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 12px; letter-spacing: .06em; color: #7C859E; }
.pg-crumbs a { color: #7C859E; text-decoration: none; }
.pg-crumbs a:hover { color: #59637E; text-decoration: underline; text-underline-offset: 3px; }
.pg-crumbs__here { color: #59637E; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-post__meta { margin-top: 1.4rem; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #C8B78E; }
.pg-post__h1 { margin-top: .6rem; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; color: #59637E; }
.pg-post__excerpt { margin-top: 1rem; font-size: 17px; line-height: 1.65; color: #3B4153; }
.pg-post__head + article > div { padding-top: 1.75rem; }

/* ── Contact: three ways to reach her, then everything else folded away ──────
   Founder 2026-09-11: crowded and hard to read. Call / text / email are the page
   now; the detail lives in the accordion below. */
.pg-ways { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: .5rem; }
@media (min-width: 720px) { .pg-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-way { display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(89, 99, 126, .25);
  border-radius: .625rem; background: #FFFBF0; padding: 1.5rem 1.25rem; text-decoration: none;
  transition: border-color .2s ease, background .2s ease; }
.pg-way:hover { border-color: #59637E; background: #EDE9DF; }
.pg-way__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #C8B78E; }
/* 15px so the email address fits a third of the measure without breaking mid-word. */
.pg-way__v { margin-top: .5rem; font-size: 15.5px; line-height: 1.35; color: #59637E; overflow-wrap: break-word; }
.pg-way__note { margin-top: .625rem; font-size: 13px; line-height: 1.65; color: #3B4153; opacity: .9; }
.pg-step + .pg-step { margin-top: 1.25rem; }
.pg-step__h { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #59637E; }
.pg-step__h + p { margin-top: .5rem; }

/* ── Blog index, VRA's text-first Journal (founder 2026-09-12) ───────────────
   Centred header with a category jump-nav, then one section per category. Cards
   carry meta, title and excerpt, no photography. */
.pg-wrap--wide { max-width: 1120px; }
.pg-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .5rem; margin-top: 1.75rem; }
.pg-jump__a { border: 1px solid rgba(89, 99, 126, .3); border-radius: 999px; padding: .45rem 1rem;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #59637E; text-decoration: none;
  transition: background .2s ease, border-color .2s ease; }
.pg-jump__a:hover { background: #EDE9DF; border-color: #59637E; }
.pg-cat { background: #FFFBF0; padding: 2.5rem 0 1rem; scroll-margin-top: 110px; }
.pg-cat:nth-of-type(even) { background: #FFFBF0; }
.pg-cat__h { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; color: #59637E; text-align: center; }
.pg-cards { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px) { .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-card { display: flex; flex-direction: column; height: 100%; min-width: 0; border-top: 1px solid rgba(89, 99, 126, .25);
  padding-top: 1.1rem; text-decoration: none; }
.pg-card__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #C8B78E; }
.pg-card__h { margin-top: .625rem; font-size: 21px; line-height: 1.25; color: #59637E; }
.pg-card:hover .pg-card__h { text-decoration: underline; text-underline-offset: 3px; }
.pg-card__x { flex: 1 1 auto; margin-top: .625rem; font-size: 14px; line-height: 1.7; color: #3B4153; opacity: .9; }
.pg-card__go { margin-top: 1rem; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7C859E; }

/* ── Signature Services: category pills + card grid (founder 2026-09-12) ─────
   VRA's cosmetic-treatments shape. The pills filter in place rather than linking
   to filtered URLs, because there are seven services, not dozens. */
.pg-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
.pg-pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(89, 99, 126, .3);
  border-radius: 999px; background: transparent; padding: .5rem 1.05rem; font: inherit; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: #59637E; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease; }
.pg-pill:hover { background: #EDE9DF; border-color: #59637E; }
.pg-pill.is-on { background: #59637E; border-color: #59637E; color: #FFFBF0; }
.pg-pill__n { font-size: 10px; letter-spacing: .06em; opacity: .65; }
.pg-cards--shot { margin-top: 2.5rem; }
.pg-cards--shot .pg-card { border-top: 0; padding-top: 0; }
.pg-card__shot { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: .625rem; background: #EDE9DF; }
.pg-card__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease; }
.pg-card:hover .pg-card__shot img { transform: scale(1.04); }
.pg-cards--shot .pg-card__meta { margin-top: 1rem; }
.pg-card__foot { display: flex; align-items: baseline; gap: .75rem; margin-top: .875rem; }
.pg-card__foot .pg-card__price { font-size: 17px; color: #59637E; }
.pg-card__foot .pg-card__dur { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7C859E; }

/* ── Home: Signature Brow Services, hover-driven (founder 2026-09-12) ────────
   Hovering or tabbing a service slides its description out and cross-fades the
   oval on the right to that treatment's own frame. Rows stay links, so a touch
   device that never fires hover just taps through. */
.hsvc__list { display: flex; flex-direction: column; justify-content: center; height: 100%;
  border-left: 1px solid rgba(89, 99, 126, .18); border-right: 1px solid rgba(89, 99, 126, .18); }
@media (max-width: 1023px) { .hsvc__list { border-left: 0; border-right: 0; } }
.hsvc__row { display: block; padding: .9rem 2rem; text-decoration: none; border-top: 1px solid rgba(89, 99, 126, .18);
  transition: background .25s ease; }
.hsvc__row:first-child { border-top: 0; }
.hsvc__row.is-on { background: rgba(237, 233, 223, .55); }
.hsvc__top { display: flex; align-items: baseline; gap: .875rem; }
.hsvc__n { font-size: 12px; letter-spacing: .1em; color: #7C859E; }
.hsvc__label { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.25; color: #59637E; }
.hsvc__row.is-on .hsvc__label { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #C8B78E; }
/* Collapsed rather than removed: the copy stays in the DOM for crawlers. */
.hsvc__desc { display: grid; grid-template-rows: 0fr; opacity: 0; margin-left: 2.1rem;
  transition: grid-template-rows .32s ease, opacity .25s ease, margin-top .32s ease; }
.hsvc__desc > span { overflow: hidden; display: block; font-size: 13px; line-height: 1.7; color: #3B4153; }
.hsvc__row.is-on .hsvc__desc { grid-template-rows: 1fr; opacity: 1; margin-top: .5rem; }
.hsvc__shot { overflow: hidden; }
.hsvc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease; }
.hsvc__img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hsvc__desc, .hsvc__img, .hsvc__row { transition: none; }
}

/* ══ 2026-09-14 — Cher's site review ═════════════════════════════════════════
   · Client Transformations cards are square (above): every before/after is prepared
     as a square by scripts/prep_media_2026_09_14.py, so nothing is cropped in the
     browser and they "all look the same".
   · Her real client photos replace the generated ones beside "What is …?". Portraits
     and side-by-sides need their own frame, or a 4:3 crop cuts through the face. */
.svc-rail__img--portrait{aspect-ratio:4/5}
.svc-rail__img--square{aspect-ratio:1/1}
@media (min-width:900px){.svc-rail__img--portrait{max-height:calc(100vh - 220px);object-position:50% 35%}}

/* "CERTIFIED by the BEST." — Cher: "fill each pill shaped brow cert logo to fill the pill
   fully … copy and paste from previous website". Her Wix pills are 195×273 with the logo
   cropped to fill, no padding. */
.cert-pill{position:relative;width:195px;height:273px;max-width:62vw;border-radius:50%;overflow:hidden;background:#fffbf0}
.cert-pill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Cher 2026-09-14: "center the BioTouch Cert image". Cover-cropping this 740x900 file and scaling it
   1.32 pushed the wordmark off the oval's right edge. Contained instead, scaled 1.2, and nudged left
   by the 2.3% the wordmark sits right of the file's own centre. */
.cert-pill--biotouch{background:#fff}
.cert-pill--biotouch img{object-fit:contain;transform:translateX(-2.8%) scale(1.2)}

/* Certificate slider thumbnails: show the whole certificate, not a crop of it. */
.cert-thumb{position:relative;height:150px;width:190px;flex-shrink:0;background:#fff;border-radius:2px;overflow:hidden}
.cert-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ══ Client Reviews wall (/reviews/, 2026-09-14) ═════════════════════════════
   All eleven reviews as cards. Reviews run from 136 to 953 characters, so the
   wall is CSS columns rather than a grid: no ragged gaps under the short ones. */
.rw{background:#fffbf0;color:#59637e;padding:clamp(44px,6vw,86px) clamp(16px,4vw,48px);border-top:1px solid #59637e8c}
.rw__in{max-width:1280px;margin:0 auto}
.rw__head{max-width:760px;margin:0 auto clamp(26px,3.4vw,44px);text-align:center}
.rw__h2{font-family:var(--font-fraunces),Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.01em;color:#59637e;margin:0}
.rw__sub{font-family:var(--font-fraunces),Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(16px,1.6vw,21px);line-height:1.45;color:#6b7183;margin:.55em auto 0}
.rw__grid{list-style:none;margin:0;padding:0;column-gap:clamp(14px,1.8vw,24px);column-count:1}
@media (min-width:700px){.rw__grid{column-count:2}}
@media (min-width:1100px){.rw__grid{column-count:3}}
.rw__card{break-inside:avoid;display:block;margin:0 0 clamp(14px,1.8vw,24px);background:#ede9df;border-radius:14px;padding:26px 26px 22px;position:relative}
.rw__mark{display:block;font-family:var(--font-fraunces),Georgia,serif;font-size:44px;line-height:.8;color:#c8b78e}
.rw__stars{display:block;margin-top:6px;letter-spacing:.18em;font-size:14px;color:#c8a24a}
.rw__title{margin:10px 0 0;font-family:var(--font-fraunces),Georgia,serif;font-size:21px;line-height:1.25;color:#59637e}
.rw__quote{margin:12px 0 0;padding:0;font-size:14px;line-height:1.75;color:#3b4153}
.rw__quote p{margin:0}
.rw__quote p+p{margin-top:.8em}
.rw__who{margin:16px 0 0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#59637e}
.rw__src{display:block;margin-top:3px;font-weight:400;letter-spacing:.08em;text-transform:none;font-size:12px;color:rgba(89,99,126,.75)}

/* ══ /book/ — the booking journey as numbered steps (founder 2026-09-15) ══════
   "maybe like a step process on booking... call text or email to setup your
   consultation, facetime consultation, the experience, get pricing, mobile or
   at the studio, then etc etc"
   Same palette and measure as /contact/, but the middle of the page is a
   numbered rail rather than an accordion, so the order is the design. */
.bk { background: #FFFBF0; padding: 1rem 0 3.5rem; }
.bk-wrap { margin: 0 auto; max-width: 920px; padding: 0 1.5rem; }
.bk-steps { margin-top: 2.25rem; }
.bk-step { position: relative; display: grid; grid-template-columns: 56px 1fr;
  gap: 0 1rem; padding-bottom: 2.5rem; }
@media (min-width: 760px) { .bk-step { grid-template-columns: 72px 1fr; gap: 0 2rem; padding-bottom: 3rem; } }
/* The rail that joins one step to the next, centred on the 56px badge. */
.bk-step::before { content: ""; position: absolute; left: 28px; top: 3.6rem; bottom: 0;
  width: 1px; background: rgba(89, 99, 126, .25); }
.bk-step:last-child::before { display: none; }
.bk-step__n { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border: 1px solid rgba(89, 99, 126, .3); border-radius: 999px;
  background: #FFFBF0; font-family: var(--font-fraunces), Georgia, serif; font-size: 18px;
  line-height: 1; color: #59637E; }
.bk-step__h { grid-column: 2; grid-row: 1; align-self: center; margin: 0;
  font-family: var(--font-fraunces), Georgia, serif; font-weight: 400;
  font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2; color: #59637E; }
.bk-step__k { display: block; margin-bottom: .3rem; font-family: inherit; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: #C8B78E; }
.bk-step__b { grid-column: 2; grid-row: 2; margin-top: .9rem; font-size: 14px; line-height: 1.8; color: #3B4153; }
.bk-step__b p { margin: 0; }
.bk-step__b p + p { margin-top: .875rem; }
.bk-step__b ul { margin: .875rem 0 0; padding-left: 1.1rem; }
.bk-step__b li + li { margin-top: .4rem; }
.bk-step__b .link-arrow { margin-top: 1rem; }
/* The three contact cards sit inside step 01; they only fit three-up once the
   step's own content column is wide enough, which is later than the viewport
   breakpoint /contact/ uses. */
.bk-step .pg-ways { grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 1000px) { .bk-step .pg-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The service list sits inside step 03, on the pricing page's rows. */
.bk-step .pg-list { margin-top: 1.1rem; }
.bk-step .pg-row { padding: 1rem 0; }
.bk-note { margin-top: .9rem; font-size: 13px; line-height: 1.7; color: #3B4153; opacity: .85; }
/* The contact cards are narrower inside the step column than they are on
   /contact/, so the email address wrapped mid-word. Shrink the value line. */
.bk-step .pg-way__v { font-size: 13.5px; word-break: normal; overflow-wrap: anywhere; }
/* A paragraph after a list needs the same gap as a paragraph after a paragraph. */
.bk-step__b ul + p { margin-top: .875rem; }

/* ---- Footer nav columns ------------------------------------------------- */
/* Hand-written because there is no Tailwind compiler here: gap-y-10,
   space-y-3.5 and opacity-75 are not in the frozen legacy snapshot. */
.ft-cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; } }
.ft-list { margin: 1.25rem 0 0; padding: 0; list-style: none;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ft-list li + li { margin-top: .875rem; }
.ft-note { margin-top: 1.25rem; max-width: 240px; font-size: 12px; line-height: 1.625;
  opacity: .75; text-transform: none; letter-spacing: normal; }
/* Phone footer. Founder 2026-09-17: "clean up the mobile footer, make it less
   long" - it ran 1,965px at 390px wide, every link stacked one per row. Below
   640px the link lists go two-up, the service areas become one dotted line, and
   the panel padding and brand-panel heading gaps tighten. Desktop is untouched.
   `footer .x` selectors outrank the single-class py-14 / mt-10 / mt-8 utilities. */
@media (max-width: 639px) {
  footer .ft-brand, footer .ft-nav { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  footer .ft-nav { padding-top: 0; }
  footer .ft-brand h3 { margin-top: 1.5rem; }
  footer .ft-brand p.mt-8 { margin-top: 1.5rem; }
  .ft-cols { gap: 2rem; }
  .ft-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem; row-gap: .75rem; margin-top: 1rem; font-size: 12px; }
  .ft-list li + li { margin-top: 0; }
  footer .ft-areas-h { margin-top: 2rem; }
  .ft-list.ft-areas { display: flex; flex-wrap: wrap; row-gap: .375rem; column-gap: 0; }
  .ft-list.ft-areas li:not(:last-child)::after { content: "\00B7"; margin: 0 .5em; }
}

/* ---- Home · Signature Brow Services -------------------------------------- */
/* The oval shot is a hard 335x389 and its wrapper adds 2rem of padding each
   side, so that column's min-content is 399px. A grid item's min-width is
   `auto`, and below 1024px .grid-3 is a single 1fr track — so the track took
   the 399px and the whole home page scrolled 24px sideways on a 390px phone.
   Measured on the deployed worker, 2026-09-17. Capping the oval keeps it
   whole (object-fit: cover already handles the crop) at every width. */
.hsvc > * { min-width: 0; }
.hsvc__shot { max-width: 100%; }