/* ==========================================================================
   Pierce Your Soul - main.css
   One stylesheet for both sites. No build step, no framework.
   Tokens and rules follow docs/DESIGN_SYSTEM.md. Site differences are a theme
   block selected by <html data-site="piercings|laser">.

   01. Fonts
   02. Primitive tokens
   03. Semantic tokens, site themes (always light, D82)
   04. Type, space, radius, elevation, motion tokens
   05. Reset and base
   06. Typography
   07. Layout primitives
   08. Buttons, links, chips
   09. Header, nav, menu
   10. Footer and mobile action bar
   11. Section furniture: eyebrow, motif, section heads, crumbs
   12. Content components: facts, steps, reviews, FAQ, price cards, finding us
   13. Media and hero
   14. Consult form (GHL embed)
   15. Motion and reduced motion
   16. Page sections
   17. Section transitions (waves)
   ========================================================================== */

/* 01. Fonts =============================================================== */
/* Self-hosted, SIL OFL (licenses beside the files), Latin subset. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/laser/assets/fonts/instrument-serif-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/laser/assets/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/laser/assets/fonts/figtree-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so the swap does not shift the layout. Widths
   measured in Chromium against Georgia and Arial (2026-10-22). */
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 76%;
  ascent-override: 132%;
  descent-override: 39%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 99.5%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* 02. Primitive tokens ==================================================== */
:root {
  --linen: #F7F1E9;
  --sand: #EFE4D6;
  --blush: #E9D9CC;
  --clay: #E3D2BF;
  --sage-100: #E6E8DF;
  --sage-500: #8E9A85;      /* decorative only: fails text contrast */
  --ink: #2E2723;
  --ink-muted: #6B5E55;
  --espresso: #211A16;
  --rust-300: #E3A57E;      /* accent on dark surfaces */
  --rust-500: #C2652F;      /* logo, large decorative accents, large text only */
  --rust-600: #A9501F;      /* primary button, links on linen/white */
  --rust-700: #8F4019;      /* hover; links on sand/blush/clay */
  --white: #FFFFFF;
  --field-border: #D9C8B6;

  /* Dark-mode primitives (DESIGN_SYSTEM.md §1, dark table) */
  --night: #211A16;
  --night-alt: #2D241F;
  --night-card: #2A211C;
  --night-line: #44372F;
  --night-band: #181210;
  --night-text: #F2EAE1;
  --night-muted: #C9BBAE;
  --night-link: #E89466;
  --night-action: #D9783F;
  --night-action-text: #1E1612;
}

/* 03. Semantic tokens: the only layer components use ====================== */
:root {
  color-scheme: light;
  --color-bg: var(--linen);
  --color-surface-alt: var(--sand);
  --color-card: #FFFCF8;
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-border: var(--clay);
  --color-border-strong: var(--ink);
  --color-action: var(--rust-600);
  --color-action-hover: var(--rust-700);
  --color-action-text: var(--white);
  --color-link: var(--rust-600);
  --color-link-hover: var(--rust-700);
  --color-focus: var(--rust-600);
  --color-accent: var(--rust-500);
  --color-band-bg: var(--espresso);
  --color-band-text: var(--linen);
  --color-band-muted: #CDBFB2;
  --color-band-accent: var(--rust-300);
  --color-header-bg: rgb(247 241 233 / 0.92);
  --plaster-overlay: transparent;
}

/* Site themes swap only the secondary surface (and the hero backdrop image). */
[data-site='piercings'] { --site-surface: var(--blush); }
[data-site='laser'] { --site-surface: var(--sage-100); }

/* Always light (D82): no dark mode, whatever the visitor's device setting. */

/* 04. Type, space, radius, elevation, motion ============================== */
:root {
  --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --font-body: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid 320px -> 1440px */
  --step--1: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
  --step-0: clamp(1.0625rem, 1.0268rem + 0.1786vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.375rem + 0.625vw, 1.9375rem);
  --step-3: clamp(1.8125rem, 1.6161rem + 0.9821vw, 2.5rem);
  --step-4: clamp(2.1875rem, 1.8482rem + 1.6964vw, 3.375rem);
  --step-5: clamp(2.625rem, 2.0893rem + 2.6786vw, 4.5rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-12: 128px; --space-13: 160px;
  --section-pad: clamp(64px, 5.5vw + 46px, 128px);

  --max: 1200px;
  --prose: 65ch;
  --gutter: clamp(16px, 4vw, 40px);

  --radius-sm: 6px;
  --radius: 14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgb(46 39 35 / 0.06), 0 2px 8px rgb(46 39 35 / 0.06);
  --shadow-2: 0 2px 4px rgb(46 39 35 / 0.06), 0 12px 32px rgb(46 39 35 / 0.12);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 150ms;
  --t-reveal: 250ms;

  --header-h: 72px;
}
@media (min-width: 900px) {
  :root { --header-h: 88px; }
}

/* 05. Reset and base ====================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main:focus { outline: none; }

::selection { background: var(--rust-300); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-action);
  color: var(--color-action-text);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: var(--space-3); }

/* 06. Typography ========================================================== */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.005em; }
h4 { font-size: var(--step-0); line-height: 1.4; font-weight: 600; }
.display { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.02em; }
h1 em, h2 em, .display em { font-style: italic; }

p, li, dd { text-wrap: pretty; }
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--color-text); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--step--1); line-height: 1.5; letter-spacing: 0.02em; }
.label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums; }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

/* 07. Layout primitives =================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }
.section--alt { background: var(--color-surface-alt); --color-link: var(--rust-700); }
.section--site { background: var(--site-surface); --color-link: var(--rust-700); }

.stack > * + * { margin-top: var(--stack, var(--space-5)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.grid { display: grid; gap: var(--space-6); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.center { text-align: center; margin-inline: auto; }

/* 08. Buttons, links, chips =============================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.btn:hover { color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; border-radius: var(--radius-pill); }
.btn__icon { width: 18px; height: 18px; flex: none; }

.btn--primary { --btn-bg: var(--color-action); --btn-fg: var(--color-action-text); --btn-bd: var(--color-action); }
.btn--primary:hover, .btn--primary:active { --btn-bg: var(--color-action-hover); --btn-bd: var(--color-action-hover); }

.btn--secondary { --btn-fg: var(--color-text); --btn-bd: var(--color-border-strong); }
.btn--secondary:hover { --btn-bg: var(--color-text); --btn-fg: var(--color-bg); --btn-bd: var(--color-text); }
.btn--secondary:active { --btn-bg: var(--color-text-muted); --btn-bd: var(--color-text-muted); --btn-fg: var(--color-bg); }

/* On espresso bands */
.btn--light { --btn-fg: var(--color-band-text); --btn-bd: var(--color-band-text); }
.btn--light:hover { --btn-bg: var(--color-band-text); --btn-fg: var(--color-band-bg); }

.btn--sm { min-height: 44px; padding: 10px 20px; font-size: var(--step--1); }
.btn--lg { min-height: 56px; padding: 16px 32px; }
.btn--block { width: 100%; }

.btn[aria-disabled='true'], .btn:disabled {
  --btn-bg: var(--color-border); --btn-bd: var(--color-border); --btn-fg: var(--color-text-muted);
  cursor: not-allowed; pointer-events: none;
}
.btn[aria-busy='true'] { cursor: progress; pointer-events: none; }
.btn[aria-busy='true']::after {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.text-link { font-weight: 600; }
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  font-weight: 600; text-decoration: none;
}
.arrow-link .icon { width: 18px; height: 18px; transition: transform var(--t-hover) var(--ease); }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover .icon { transform: translateX(3px); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.chip:hover { background: var(--color-surface-alt); }
.chip[aria-pressed='true'] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.chip:focus-visible { border-radius: var(--radius-pill); }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }

.icon { width: 24px; height: 24px; flex: none; }

/* 09. Header, nav, menu =================================================== */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-hover) var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--color-border); }
.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}
.logo { display: block; flex: none; margin-right: auto; border-radius: var(--radius-sm); }
.logo__svg { height: 40px; width: auto; }
@media (min-width: 900px) { .logo__svg { height: 52px; } }
.logo__svg path { fill: var(--l); }

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__list { display: flex; gap: var(--space-1); list-style: none; padding: 0; }
.nav__link {
  display: block;
  padding: 10px 12px;
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav__link:hover { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; }
.nav__link[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.nav__cross {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--step--1);
  text-decoration: none;
  padding: 10px 0;
}
.nav__cross:hover { color: var(--color-link-hover); text-decoration: underline; }
.cross-symbol { width: 20px; height: 20px; }

.site-head__actions { display: flex; align-items: center; gap: var(--space-3); }
/* The header action is outlined while another primary button is on screen and
   fills once none is (site.js), so a viewport never holds two filled buttons. */
.site-head__cta:not(.is-filled) { --btn-bg: transparent; --btn-fg: var(--color-link); --btn-bd: var(--color-link); }
.site-head__cta:not(.is-filled):hover { --btn-bg: var(--color-action); --btn-fg: var(--color-action-text); --btn-bd: var(--color-action); }

.menu-btn {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
}
.menu-btn:hover { border-color: var(--color-text); }
.menu-btn:focus-visible { border-radius: 50%; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__open { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__close { display: block; }

@media (max-width: 899px) {
  .js .menu-btn { display: inline-flex; }
  .site-head__inner { flex-wrap: wrap; row-gap: 0; }
  .nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--space-4);
  }
  .js .nav { display: none; }
  .js .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; }
  .nav__link { padding: 14px 4px; font-size: var(--step-0); border-bottom: 1px solid var(--color-border); border-radius: 0; }
  .nav__cross { padding: 14px 4px; font-size: var(--step-0); }
}
@media (max-width: 599px) {
  .site-head__cta { display: none; }
}

/* 10. Footer and mobile action bar ======================================== */
.site-foot {
  background: var(--color-band-bg);
  color: var(--color-band-text);
  padding-block: var(--space-10) var(--space-8);
  --color-link: var(--color-band-text);
  --color-link-hover: var(--color-band-accent);
  --color-focus: var(--rust-300);
}
.site-foot__grid { display: grid; gap: var(--space-8); }
@media (min-width: 720px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-foot__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.logo-stacked { width: 200px; height: auto; }
.site-foot__h {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-band-accent);
  margin-bottom: var(--space-4);
}
.site-foot__col > * + * { margin-top: var(--space-3); }
.site-foot__addr { font-style: normal; line-height: 1.6; }
.site-foot__note { color: var(--color-band-muted); font-size: var(--step--1); }
.site-foot__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 32px;
  text-decoration: none;
}
.site-foot__link .icon { width: 20px; height: 20px; color: var(--color-band-accent); }
.site-foot__link:hover { text-decoration: underline; }
.site-foot .hours div { justify-content: space-between; max-width: 260px; }
.site-foot .hours dd { color: var(--color-band-muted); }
.social { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.site-foot__base {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  justify-content: space-between; align-items: center;
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(247 241 233 / 0.14);
  color: var(--color-band-muted);
  font-size: var(--step--1);
}
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; }
.site-foot__links a { display: inline-block; padding: 6px 0; }

.mobile-bar { display: none; }
@media (max-width: 599px) {
  .mobile-bar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--t-reveal) var(--ease), visibility 0s linear var(--t-reveal);
  }
  .mobile-bar.is-shown { transform: none; visibility: visible; transition: transform var(--t-reveal) var(--ease); }
  .mobile-bar__btn { width: 100%; }
  .no-js .mobile-bar { display: none; }
}

/* 11. Section furniture =================================================== */
.motif {
  position: relative;
  display: flex;
  justify-content: center;
  height: 18px;
  margin-block: var(--space-6);
}
.motif::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px solid var(--color-accent);
  opacity: 0.6;
}
.motif img {
  position: relative;
  width: 18px; height: 18px;
  padding-inline: 12px;
  box-sizing: content-box;
  background: var(--motif-bg, var(--color-bg));
}
.section--alt .motif img { --motif-bg: var(--color-surface-alt); }
.section--site .motif img { --motif-bg: var(--site-surface); }
.motif--short { max-width: 240px; margin-inline: auto; }

.eyebrow { color: var(--color-text-muted); margin-bottom: var(--space-3); }

.sec-head { max-width: 46rem; margin-bottom: var(--space-8); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__lede { margin-top: var(--space-4); color: var(--color-text-muted); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: var(--space-4) 0 0; font-size: var(--step--1); }
.crumbs li + li::before { content: '/'; margin-right: var(--space-2); color: var(--color-text-muted); }
.crumbs [aria-current] { color: var(--color-text-muted); }

/* 12. Content components ================================================== */
.facts { display: grid; gap: var(--space-5); list-style: none; padding: 0; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.fact { display: flex; gap: var(--space-4); align-items: flex-start; }
.fact__icon { width: 28px; height: 28px; color: var(--color-accent); margin-top: 2px; }
.fact__title { display: block; font-weight: 600; }
.fact__text { display: block; color: var(--color-text-muted); font-size: var(--step--1); line-height: 1.5; margin-top: 2px; }

.steps { list-style: none; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .steps--row { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.step__n {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 0.9;
  color: var(--color-accent);
  min-width: 1ch;
}
.step__title { font-size: var(--step-2); margin-bottom: var(--space-2); }
.step__text { color: var(--color-text-muted); }

.reviews { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.review__quote { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; }
.review__quote p::before { content: '\201C'; }
.review__quote p::after { content: '\201D'; }
.review__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; font-size: var(--step--1); }
.review__by span { color: var(--color-text-muted); }

.faq { border-top: 1px solid var(--color-border); max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  display: flex; justify-content: space-between; gap: var(--space-5); align-items: center;
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-link-hover); }
.faq__chev {
  flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-hover) var(--ease);
}
.faq__item[open] .faq__chev { transform: translateY(3px) rotate(225deg); }
.faq__a { padding-bottom: var(--space-6); max-width: var(--prose); color: var(--color-text-muted); }
.faq__a > * + * { margin-top: 0.8em; }

.prices { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.prices > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .prices { gap: var(--space-4); } }
@media (min-width: 1000px) { .prices { grid-template-columns: repeat(5, 1fr); } .prices > :last-child:nth-child(odd) { grid-column: auto; } }
.price {
  display: flex; flex-direction: column;
  padding: var(--space-5);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.price__name { font-size: var(--step-2); }
.price__dims { color: var(--color-text-muted); font-size: var(--step--1); margin-top: var(--space-1); }
.price__analogy { margin-top: var(--space-3); font-size: var(--step--1); line-height: 1.5; }
.price__amount { margin-top: auto; padding-top: var(--space-5); font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.price__unit { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--step--1); color: var(--color-text-muted); }
.price__more { margin-top: var(--space-4); font-size: var(--step--1); }
.price__more summary { cursor: pointer; font-weight: 600; color: var(--color-link); min-height: 44px; display: flex; align-items: center; }
.price__table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
.price__table th, .price__table td { padding: 6px 0; text-align: left; border-bottom: 1px solid var(--color-border); font-weight: 400; vertical-align: top; }
.price__table td { text-align: right; padding-left: var(--space-3); }
.price__table thead th { font-weight: 600; }
.price__table thead th + th { text-align: right; }

.finding {
  padding: var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.finding > * + * { margin-top: var(--space-4); }
.finding__title { font-size: var(--step-2); }
.finding__addr { font-style: normal; font-size: var(--step-1); line-height: 1.45; }
.finding__steps { padding-left: 1.2em; }
.hours div { display: flex; gap: var(--space-4); }
.hours dt { min-width: 6.5em; font-weight: 600; }
.finding .hours dd { color: var(--color-text-muted); }

.card {
  padding: var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.card > * + * { margin-top: var(--space-4); }
.card--raised { box-shadow: var(--shadow-1); }
.card--raised:hover { box-shadow: var(--shadow-2); }

/* 13. Media and hero ====================================================== */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.frame picture { display: block; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x2 { aspect-ratio: 3 / 2; }
.frame--1x1 { aspect-ratio: 1 / 1; }
.caption { margin-top: var(--space-3); font-size: var(--step--1); color: var(--color-text-muted); }

/* Hero: headline and actions on the plaster backdrop, a real photo in a 4:5 frame. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-8) var(--space-10);
  background-color: var(--color-surface-alt);
  background-image: linear-gradient(var(--plaster-overlay), var(--plaster-overlay)), var(--hero-backdrop, none);
  background-size: cover;
  background-position: center right;
}
/* Scrim keeps the headline at 4.5:1 or better over the lightest plaster. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 80%, transparent) 45%, transparent 85%);
}
@media (max-width: 899px) {
  .hero::before { background: color-mix(in srgb, var(--color-bg) 78%, transparent); }
}
.hero__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .hero { padding-block: var(--space-11) var(--space-12); }
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); }
}
.hero__title { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.02em; }
.hero__lede { margin-top: var(--space-5); max-width: 34rem; }
.hero__actions { margin-top: var(--space-6); }
.hero__note { margin-top: var(--space-4); font-size: var(--step--1); color: var(--color-text-muted); }
.hero__note, .with-icon { display: flex; align-items: center; gap: var(--space-2); }
.hero__note .icon, .with-icon .icon { width: 18px; height: 18px; color: var(--color-accent); }
.hero__media { max-width: 460px; width: 100%; justify-self: center; }
@media (min-width: 900px) { .hero__media { justify-self: end; } }

/* 14. Consult form (GHL embed) ============================================ */
.consult {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
/* White with a skeleton only while loading. Once loaded, the box takes the
   iframe's own height (set by GHL's form_embed.js) and shows no background,
   so no strip appears under the form. */
.ghl { position: relative; min-height: var(--form-h, 1110px); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
.ghl.is-loaded { min-height: 0; background: transparent; }
/* Tab moves into the form's iframe: site.js marks the box so focus stays visible. */
.ghl.has-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; overflow: visible; }
.ghl iframe { display: block; width: 100%; height: var(--form-h, 1110px); border: 0; }
.ghl__skeleton { position: absolute; inset: 0; padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; pointer-events: none; }
.ghl__skeleton span { display: block; height: 48px; border-radius: var(--radius-sm); background: #EFE7DD; }
.ghl__skeleton span:nth-child(odd) { height: 14px; width: 35%; }
.ghl__skeleton span:last-child { height: 52px; width: 100%; border-radius: var(--radius-pill); margin-top: var(--space-3); }
.ghl.is-loaded .ghl__skeleton { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ghl__skeleton span { animation: pulse 1.6s ease-in-out infinite; }
  .ghl.is-slow .ghl__skeleton span { animation: none; }
}
@keyframes pulse { 50% { opacity: 0.55; } }
.js .ghl-fallback { display: none; }
.js .ghl-fallback.is-shown { display: block; }
.ghl-fallback { margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.ghl-fallback > * + * { margin-top: var(--space-3); }
.no-js .ghl { display: none; }

/* 15. Motion and reduced motion =========================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 16. Page sections ======================================================= */
.mt { margin-top: var(--space-6); }
.narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.center-copy { text-align: center; }
.center-copy .prose { margin-inline: auto; }

/* Hero, mirrored (photo left, copy right) for the laser site's sunlit backdrop. */
.hero--mirror { background-position: center left; }
.hero--mirror::before {
  background: linear-gradient(270deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 80%, transparent) 45%, transparent 85%);
}
@media (min-width: 900px) {
  .hero--mirror .hero__inner { grid-template-columns: 0.9fr 1.1fr; }
  .hero--mirror .hero__media { order: -1; justify-self: start; }
}
@media (max-width: 899px) {
  .hero--mirror::before { background: color-mix(in srgb, var(--color-bg) 78%, transparent); }
}


/* Split: photo + copy */
.split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1fr; gap: var(--space-11); }
  .split--text { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--flip .split__media { order: 2; }
}
.split__media { max-width: 440px; width: 100%; justify-self: center; }
.split__copy .sec-head { margin-bottom: var(--space-5); }

/* Section head with a link on the right */
.sec-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-8); }
.sec-row .sec-head { margin-bottom: 0; }

.mini-gallery { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .mini-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.note { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); font-weight: 600; }
.note .icon { color: var(--color-accent); }

.brands { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.brands li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
}

/* Cross-site promo card: the whole card is one link */
.promo {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
@media (min-width: 900px) { .promo { grid-template-columns: auto 1fr auto; gap: var(--space-7); padding: var(--space-8) var(--space-9); } }
.promo:hover { color: var(--color-text); border-color: var(--color-accent); box-shadow: var(--shadow-1); text-decoration: none; }
.promo:focus-visible { border-radius: var(--radius); }
.promo__symbol .cross-symbol { width: 40px; height: 40px; }
.promo__copy { display: grid; gap: var(--space-2); }
.promo__title { font-size: var(--step-3); }
.promo__text { color: var(--color-text-muted); }
.promo__go { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-link); white-space: nowrap; }
.promo:hover .promo__go { text-decoration: underline; }

/* Ink-color wavelength list (laser technology) */
.waves { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.wave { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); align-items: baseline; padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.wave__nm { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; }
.wave__nm small { font-family: var(--font-body); font-size: var(--step--1); color: var(--color-text-muted); margin-left: 4px; }
.wave__inks { color: var(--color-text-muted); }
.swatches { display: inline-flex; gap: 4px; margin-right: var(--space-2); vertical-align: middle; }
.swatches i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.15); }

.consult-wrap { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .consult-wrap { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.consult-wrap .consult { margin-inline: 0; width: 100%; }
.give-back { margin-top: var(--space-8); }
.give-back h3 { font-size: var(--step-2); }
.next { padding: var(--space-5); border-left: 2px solid var(--color-accent); background: var(--color-card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* 17. Section transitions: soft waves ===================================== */
/* Wherever the surface color changes, the lower section rises into the one
   above with a low, uneven wave in its own color (D46). Applied by selector,
   so pages need no extra markup. Two wave shapes, alternated and mirrored so
   neighbors never repeat. The masks are plain SVG files in static/shared/img. */
:root { --wave-h: clamp(26px, 3.6vw, 56px); }
.section--alt { --wave-color: var(--color-surface-alt); }
.section--site { --wave-color: var(--site-surface); }
.site-foot { --wave-color: var(--color-band-bg); }

.hero + section,
main > .section--alt,
main > .section--site,
main > :is(.section--alt, .section--site) + section:not(.section--alt):not(.section--site),
.site-foot {
  position: relative;
}
.hero + section::before,
main > .section--alt::before,
main > .section--site::before,
main > :is(.section--alt, .section--site) + section:not(.section--alt):not(.section--site)::before,
.site-foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1px - var(--wave-h));
  height: var(--wave-h);
  background-color: var(--wave-color, var(--color-bg));
  -webkit-mask: url('/laser/assets/img/wave-a.svg') center bottom / 100% 100% no-repeat;
  mask: url('/laser/assets/img/wave-a.svg') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
main > section:nth-child(even)::before {
  -webkit-mask-image: url('/laser/assets/img/wave-b.svg');
  mask-image: url('/laser/assets/img/wave-b.svg');
}
main > section:nth-child(4n + 3)::before,
main > section:nth-child(4n)::before { transform: scaleX(-1); }
.site-foot::before { -webkit-mask-image: url('/laser/assets/img/wave-b.svg'); mask-image: url('/laser/assets/img/wave-b.svg'); }

/* ==========================================================================
   Design system v2 (DESIGN_SYSTEM.md §7): richer look, same simple use.
   18. Tokens v2, grain, arch frame, overlap, pull quote, trust row
   19. Dark band
   20. Utility bar
   21. Before/after slider and side-by-side pair
   22. Editorial grid, tiles, lightbox
   23. Hotspot map
   24. Brand tiles
   25. Size picker
   26. Answers table
   27. Instagram section
   28. Hero v2 and page compositions
   ========================================================================== */

/* 18. Tokens v2 ========================================================== */
:root {
  --step-6: clamp(2.75rem, 2.0714rem + 3.3929vw, 5.5rem);
  /* Paper grain: lighten-only specks, so it can only raise the contrast of
     dark text, never lower it (D59). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--alt, .section--site, .grain { background-image: var(--grain); }

.icon.flip { transform: scaleX(-1); }

.frame--arch {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius) var(--radius);
}
.shadow-2 { box-shadow: var(--shadow-2); }

/* A small photo or card overlapping a large one by 48-64px */
.overlap { position: relative; }
.overlap__small {
  position: absolute;
  width: 42%;
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-2);
}
.overlap__small--bl { left: -56px; bottom: -48px; }
.overlap__small--br { right: -56px; bottom: -48px; }
.overlap__small--tl { left: -56px; top: 18%; }
@media (max-width: 699px) {
  .overlap__small--bl { left: -8px; bottom: -32px; }
  .overlap__small--br { right: -8px; bottom: -32px; }
  .overlap__small--tl { left: -8px; }
}

.pull { max-width: 40rem; }
.pull blockquote {
  position: relative;
  padding-top: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pull blockquote::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  border-top: 1px solid var(--color-accent);
}
.pull--center { margin-inline: auto; text-align: center; }
.pull--center blockquote::before { left: calc(50% - 28px); }
.pull figcaption { margin-top: var(--space-4); font-size: var(--step--1); color: var(--color-text-muted); letter-spacing: 0.02em; }

.trust {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  list-style: none; padding: 0;
  font-size: var(--step--1); font-weight: 600;
}
.trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust .icon { width: 20px; height: 20px; color: var(--color-accent); }

/* Fact strip bullets: the site symbol (one of its three allowed uses) */
.facts--symbol .fact__icon { display: none; }
.facts--symbol .fact::before {
  content: '';
  flex: none;
  width: 18px; height: 18px; margin-top: 4px;
  background: var(--symbol) center / contain no-repeat;
}
[data-site='piercings'] { --symbol: url('/laser/assets/brand/symbol-small-rust.svg'); }
[data-site='laser'] { --symbol: url('/laser/assets/brand/symbol-small-rust.svg'); }

/* Reveal stagger within a group (40ms steps). Visible without JS; none under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transition-delay: calc(var(--i, 0) * 40ms); }
}

/* 19. Dark band =========================================================== */
.band {
  background-color: var(--color-band-bg);
  color: var(--color-band-text);
  --wave-color: var(--color-band-bg);
  --color-text: var(--color-band-text);
  --color-text-muted: var(--color-band-muted);
  --color-link: var(--color-band-accent);
  --color-link-hover: var(--color-band-text);
  --color-focus: var(--rust-300);
  --color-border: rgb(247 241 233 / 0.16);
  --color-border-strong: var(--color-band-text);
  --color-accent: var(--color-band-accent);
  --color-card: rgb(247 241 233 / 0.04);
  --motif-bg: var(--color-band-bg);
}
.band h2, .band h3 { color: var(--color-band-text); }
.band .btn--secondary { --btn-fg: var(--color-band-text); --btn-bd: var(--color-band-text); }
.band .btn--secondary:hover { --btn-bg: var(--color-band-text); --btn-fg: var(--color-band-bg); }
main > .band { position: relative; }
main > .band::before {
  content: '';
  position: absolute; left: 0; right: 0;
  top: calc(1px - var(--wave-h)); height: var(--wave-h);
  background-color: var(--color-band-bg);
  -webkit-mask: url('/laser/assets/img/wave-a.svg') center bottom / 100% 100% no-repeat;
  mask: url('/laser/assets/img/wave-a.svg') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
main > .band + section { position: relative; }
main > .band + section::before {
  content: '';
  position: absolute; left: 0; right: 0;
  top: calc(1px - var(--wave-h)); height: var(--wave-h);
  background-color: var(--wave-color, var(--color-bg));
  -webkit-mask: url('/laser/assets/img/wave-b.svg') center bottom / 100% 100% no-repeat;
  mask: url('/laser/assets/img/wave-b.svg') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.band__statement { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.02em; max-width: 18ch; }

/* 20. Utility bar ========================================================= */
.utility {
  background: var(--color-band-bg);
  color: var(--color-band-text);
  font-size: 0.875rem;
  --color-focus: var(--rust-300);
}
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 36px; }
.utility__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 0;
  color: var(--color-band-text);
  text-decoration: none;
}
.utility__link:hover { color: var(--color-band-text); text-decoration: underline; }
.utility__link .icon { width: 16px; height: 16px; color: var(--color-band-accent); }
@media (max-width: 599px) { .utility { display: none; } }

.nav__visit { display: none; }
@media (max-width: 599px) {
  .nav__visit {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: 14px 4px;
    color: var(--color-text-muted);
    font-size: var(--step--1);
    text-decoration: none;
  }
  .nav__visit .icon { width: 18px; height: 18px; color: var(--color-accent); flex: none; margin-top: 2px; }
}

/* 21. Before/after slider ================================================= */
.ba { margin: 0; }
.ba__frame {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba__img, .ba__img picture, .ba__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__img img { object-fit: cover; }
.ba__img--after { clip-path: inset(0 0 0 var(--pos)); }
.ba__label {
  position: absolute;
  top: var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgb(33 26 22 / 0.72);
  color: #F7F1E9;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__label--before { left: var(--space-3); }
.ba__label--after { right: var(--space-3); }
.ba__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #F7F1E9;
  box-shadow: 0 0 0 1px rgb(33 26 22 / 0.18);
  pointer-events: none;
}
.ba__handle {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #F7F1E9;
  box-shadow: var(--shadow-2);
}
.ba__handle img { width: 22px; height: 22px; }
.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; }
.ba__frame:has(.ba__range:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ba__frame:has(.ba__range:focus-visible) .ba__handle { box-shadow: 0 0 0 3px var(--color-focus), var(--shadow-2); }
.ba__cap { margin-top: var(--space-3); font-size: var(--step--1); color: var(--color-text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .ba__frame.is-hinting .ba__img--after { transition: clip-path 600ms var(--ease); }
  .ba__frame.is-hinting .ba__line { transition: left 600ms var(--ease); }
}
/* Without JS: the two photos side by side */
.no-js .ba__frame { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; aspect-ratio: auto !important; }
.no-js .ba__img, .no-js .ba__img picture, .no-js .ba__img img { position: static; height: auto; }
.no-js .ba__img--after { clip-path: none; }
.no-js .ba__line, .no-js .ba__range { display: none; }

.pair { margin: 0; }
.pair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pair__item { position: relative; }

/* 22. Editorial grid, tiles, lightbox ===================================== */
.egrid {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  gap: var(--space-3);
}
@media (min-width: 900px) { .egrid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.egrid__item { position: relative; }
.egrid__item .tile { aspect-ratio: 4 / 5; }
.egrid__item--tall { grid-row: span 2; }
.egrid__item--tall .tile { aspect-ratio: auto; height: 100%; }
.egrid__item--wide { grid-column: span 2; }
.egrid__item--wide .tile { aspect-ratio: 8 / 5; }

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  color: #F7F1E9;
  text-decoration: none;
}
.tile picture, .tile img { display: block; width: 100%; height: 100%; }
.tile img { object-fit: cover; transition: transform 400ms var(--ease); }
.tile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  background: linear-gradient(transparent, rgb(20 15 12 / 0.82));
  color: #F7F1E9;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.tile:hover { color: #F7F1E9; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.03); }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; transform: none; }
.tile:focus-visible { outline-offset: 3px; border-radius: var(--radius); }
@media (hover: none) { .tile__cap { opacity: 1; transform: none; } }

.lightbox {
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: rgb(20 15 12 / 0.96);
  color: #F7F1E9;
  --color-focus: var(--rust-300);
}
.lightbox::backdrop { background: rgb(20 15 12 / 0.7); }
.lightbox__inner { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: var(--space-4); gap: var(--space-3); }
.lightbox__fig { display: grid; grid-template-rows: 1fr auto; min-height: 0; gap: var(--space-3); margin: 0; }
.lightbox__fig picture { min-height: 0; display: grid; place-items: center; }
.lightbox__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__cap { display: flex; justify-content: space-between; gap: var(--space-4); max-width: 900px; width: 100%; margin-inline: auto; font-size: var(--step--1); }
.lightbox__count { color: #CDBFB2; white-space: nowrap; }
.lightbox__bar { display: flex; justify-content: center; align-items: center; gap: var(--space-3); }
.lightbox__btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgb(247 241 233 / 0.4);
  border-radius: 50%;
  background: transparent;
  color: #F7F1E9;
}
.lightbox__btn:hover { background: rgb(247 241 233 / 0.12); }
.lightbox__btn:focus-visible { border-radius: 50%; }
.lightbox__close { margin-left: var(--space-4); }
.lightbox .btn--primary { --btn-bg: var(--night-action); --btn-bd: var(--night-action); --btn-fg: var(--night-action-text); }
.lightbox .btn--primary:hover { --btn-bg: var(--night-link); --btn-bd: var(--night-link); }

/* 23. Hotspot map ========================================================= */
.hotspots { position: relative; }
.hotspots__stage { position: relative; }
.hotspot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
}
.hotspot__dot {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #F7F1E9;
  box-shadow: 0 0 0 3px rgb(194 101 47 / 0.95), 0 2px 8px rgb(0 0 0 / 0.35);
}
.hotspot__dot::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid #F7F1E9;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hotspot__dot::after { animation: ring 2.4s var(--ease) infinite; }
}
@keyframes ring { 0% { transform: scale(0.7); opacity: 0.9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.hotspot[aria-expanded='true'] .hotspot__dot { background: var(--rust-500); box-shadow: 0 0 0 3px #F7F1E9, 0 2px 8px rgb(0 0 0 / 0.35); }
.hotspot:hover .hotspot__dot { transform: scale(1.15); }
.hotspot:focus-visible { outline-color: #F7F1E9; outline-offset: 0; border-radius: 50%; box-shadow: 0 0 0 4px var(--rust-600); }

.hs-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.hs-card__thumb { width: 72px; border-radius: var(--radius-sm); }
.hs-card__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.hs-card__text { margin-top: var(--space-1); font-size: var(--step--1); color: var(--color-text-muted); line-height: 1.5; }
.hs-card .arrow-link { min-height: 36px; font-size: var(--step--1); }
@media (min-width: 700px) {
  .hotspots__cards { position: absolute; inset: 0; pointer-events: none; }
  .hs-card {
    position: absolute;
    width: 300px;
    left: calc(var(--x) + 30px);
    top: var(--y);
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 2;
  }
  .hs-card--left { left: auto; right: calc(100% - var(--x) + 30px); }
}
@media (max-width: 699px) { .hotspots__cards { margin-top: var(--space-4); } }
.hotspots__list { display: none; }
.no-js .hotspot, .no-js .hotspots__cards { display: none; }
.no-js .hotspots__list { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-left: 1.2em; }

/* 24. Brand tiles ========================================================= */
.brands-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; }
@media (min-width: 900px) { .brands-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.brand { display: flex; flex-direction: column; gap: var(--space-2); }
.brand .frame { margin-bottom: var(--space-2); }
.brand__name { font-size: var(--step-2); line-height: 1.15; }
.brand__text { font-size: var(--step--1); color: var(--color-text-muted); line-height: 1.5; }
.brand--type {
  min-height: 100%;
  padding: var(--space-5);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.brand--type::before {
  content: '';
  width: 18px; height: 18px;
  margin-bottom: var(--space-3);
  background: var(--symbol) center / contain no-repeat;
  opacity: 0.9;
}
.brand--type:hover { border-color: var(--color-accent); box-shadow: var(--shadow-1); }

/* 25. Size picker ========================================================= */
.picker { display: grid; gap: var(--space-6); }
.picker__choices {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 0; padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
  min-width: 0;
}
.picker__opt { position: relative; display: block; }
.picker__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.picker__face {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 72px;
  padding: var(--space-3) var(--space-1);
  border-radius: calc(var(--radius) - 4px);
  text-align: center;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.picker__opt:hover .picker__face { background: var(--color-surface-alt); }
.picker__opt input:checked + .picker__face { background: var(--color-text); color: var(--color-bg); }
.picker__opt input:checked + .picker__face .picker__dims { color: inherit; opacity: 0.8; }
.picker__opt input:focus-visible + .picker__face { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.picker__sq { display: grid; place-items: center; width: 24px; height: 24px; }
.picker__sq span { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.picker__name { font-weight: 600; font-size: var(--step--1); line-height: 1.2; }
.picker__dims { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.2; }
@media (max-width: 520px) {
  .picker__dims { display: none; }
  .picker__name { font-size: 0.8125rem; }
}
.picker__panel { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 800px) { .picker__panel { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-9); } }
.picker__visual { max-width: 340px; width: 100%; justify-self: center; }
@media (max-width: 799px) { .picker__visual { max-width: 220px; } }
.scale { width: 100%; height: auto; display: block; }
.scale__grid line { stroke: var(--color-border); stroke-width: 0.02; }
.scale__tattoo { fill: rgb(194 101 47 / 0.18); stroke: var(--color-accent); stroke-width: 0.06; }
.scale__obj { fill: none; stroke: var(--color-text); stroke-width: 0.05; stroke-dasharray: 0.18 0.12; }
.scale__obj--stamp { stroke-dasharray: 0.08 0.08; }
.picker__size { font-size: var(--step--1); }
.picker__sizename { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; margin-right: var(--space-2); }
.picker__analogy { margin-top: var(--space-2); font-size: var(--step-1); }
.picker__price { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--step-5); line-height: 1; }
.picker__price .price__unit { display: inline; font-size: var(--step--1); margin-left: var(--space-2); }
.picker__table, .picker__fallback { width: 100%; border-collapse: collapse; margin-top: var(--space-5); font-size: var(--step--1); }
.picker__table th, .picker__table td, .picker__fallback th, .picker__fallback td { padding: 10px 8px 10px 0; text-align: left; border-bottom: 1px solid var(--color-border); font-weight: 400; vertical-align: top; }
.picker__table td, .picker__fallback td.num { text-align: right; }
.picker__table thead th, .picker__fallback thead th { font-weight: 600; }
.picker__table thead th + th { text-align: right; }
.picker__fallback { display: none; }
.no-js .picker__choices, .no-js .picker__panels { display: none; }
.no-js .picker__fallback { display: table; }

/* 26. Answers table ======================================================= */
.answers { width: 100%; border-collapse: collapse; }
.answers thead th { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; padding: 0 var(--space-5) var(--space-3) 0; }
.answers tbody th, .answers tbody td { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-top: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.answers tbody th { width: 42%; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.2; }
@media (max-width: 699px) {
  .answers thead { display: none; }
  .answers tr { display: block; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
  .answers tbody th, .answers tbody td { display: block; width: auto; padding: 0; border: 0; }
  .answers tbody td { margin-top: var(--space-2); color: var(--color-text-muted); }
}

/* 27. Instagram section =================================================== */
.ig-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.ig-head .sec-head { margin-bottom: 0; }
.ig { container-type: inline-size; }
/* Reserved for the Elfsight grid (4 columns x 3 rows + header) so nothing shifts. */
.ig__widget { min-height: calc(75cqi + 120px); }
.ig__widget.is-done { min-height: 0; }
.js .ig__fallback:not(.is-shown) { display: none; }
.no-js .ig__widget { display: none; }
.ig-strip { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
@media (min-width: 900px) { .ig-strip { grid-template-columns: repeat(6, 1fr); gap: var(--space-3); } }
.ig-strip a { display: block; }
.ig-strip img { transition: transform 400ms var(--ease); }
.ig-strip a:hover img { transform: scale(1.04); }
.ig-strip a:focus-visible { outline-offset: 3px; border-radius: var(--radius); }

/* 28. Hero v2 and page compositions ======================================= */
/* Hero v2: the photo (or slider) takes about 58% of the width on desktop. */
.hero--v2 { padding-block: var(--space-8) var(--space-11); }
.hero--v2 .hero__title { font-size: var(--step-6); line-height: 1; letter-spacing: -0.022em; }
.hero--v2 .hero__media { max-width: 560px; }
@media (min-width: 900px) {
  .hero--v2 { padding-block: var(--space-10) var(--space-12); }
  .hero--v2 .hero__inner { grid-template-columns: 0.72fr 1fr; gap: var(--space-10); }
  .hero--v2 .hero__media { max-width: none; width: 100%; }
  .hero--v2.hero--mirror .hero__inner { grid-template-columns: 1fr 0.72fr; }
  .hero--v2.hero--mirror .hero__media { justify-self: stretch; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero--v2 .hero__title { font-size: var(--step-5); }
}
.hero__trust { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.hero--v2 .overlap { padding-bottom: var(--space-6); }
@media (min-width: 900px) { .hero--v2 .overlap { padding-bottom: 0; } }

/* Fact strip with four items */
@media (min-width: 720px) { .facts--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .facts--4 { grid-template-columns: repeat(4, 1fr); } }

/* Explore placements: hotspot photo + copy */
.explore { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .explore { grid-template-columns: 1fr 0.9fr; gap: var(--space-11); } }
.explore__map { max-width: 520px; width: 100%; justify-self: center; }
.chips--links { list-style: none; padding: 0; }
.chips--links .chip { display: inline-flex; align-items: center; text-decoration: none; }

/* Infants: three-photo collage + steps */
.infants { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .infants { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-10); } }
.collage { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-3); }
.collage__item--1 { grid-row: span 2; }
.collage__item--1 .frame { height: 100%; aspect-ratio: 3 / 4; }
/* Width-driven squares, so a tall first photo can never push them past the column. */
.collage__item--2 .frame, .collage__item--3 .frame { width: 100%; aspect-ratio: 1 / 1; }

/* Jewelry highlights: large photo bleeding off the left edge + brand tiles */
.jewel { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) {
  .jewel { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-10); }
  .jewel__media { margin-left: calc(-1 * var(--gutter)); position: sticky; top: calc(var(--header-h) + 24px); }
  .jewel__media .frame { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}
@media (min-width: 1280px) { .jewel__media { margin-left: calc(-1 * (100vw - var(--max)) / 2 + var(--gutter) * -1 + var(--gutter)); } }
.jewel .brands-grid { margin-top: var(--space-2); }

/* Meet Mickey on the dark band */
.mickey { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .mickey { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-11); } }
.mickey__media { max-width: 420px; width: 100%; justify-self: center; }
.mickey__copy .prose { color: var(--color-band-muted); max-width: 34rem; }

/* Laser cross-promo with a compact slider */
.promo2 {
  display: grid; gap: var(--space-7); align-items: center;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
}
@media (min-width: 900px) { .promo2 { grid-template-columns: 380px 1fr; gap: var(--space-10); padding: var(--space-7); } }
.promo2__copy > * + * { margin-top: var(--space-3); }
.ba--compact .ba__cap { display: none; }

/* Laser results strip and Results page */
.results-strip { padding-block: var(--space-10); }
.results-strip .sec-row { margin-bottom: var(--space-6); }
.results-strip__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .results-strip__inner { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-10); } }
.results-grid { display: grid; gap: var(--space-5); }
.results-page { display: grid; gap: var(--space-9); }
@media (min-width: 1000px) {
  .results-page { grid-template-columns: 1fr 1fr; align-items: start; }
  /* The slider is about as tall as the two pairs stacked beside it. */
  .results-page__item:first-child { grid-row: span 2; }
}
.page-head { padding-block: var(--space-9) var(--space-8); }

/* Treatment timeline (no spacing numbers until Mickey confirms them) */
.timeline {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: var(--space-9);
  font-size: var(--step--1);
  text-align: center;
}
.timeline__step { position: relative; display: grid; justify-items: center; gap: var(--space-2); padding-inline: var(--space-1); }
.timeline__step::before {
  content: '';
  position: absolute; top: 7px; left: 0; right: 0;
  border-top: 1px dashed var(--color-accent);
  opacity: 0.6;
}
.timeline__step:first-child::before { left: 50%; }
.timeline__step:last-child::before { right: 50%; }
.timeline__dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface-alt); border: 2px solid var(--color-accent); }
.timeline__step:last-child .timeline__dot { background: var(--color-accent); }
@media (max-width: 699px) {
  .timeline { grid-template-columns: 1fr; text-align: left; gap: var(--space-4); }
  .timeline__step { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: var(--space-3); }
  .timeline__step::before { top: 0; bottom: 0; left: 6px; right: auto; border-top: 0; border-left: 1px dashed var(--color-accent); }
  .timeline__step:first-child::before { top: 50%; left: 6px; }
  .timeline__step:last-child::before { bottom: 50%; right: auto; }
}

/* Answers table section */
.answers-wrap { display: grid; gap: var(--space-6); }
@media (min-width: 1000px) {
  .answers-wrap { grid-template-columns: 0.75fr 1.25fr; gap: var(--space-10); align-items: start; }
  .answers-wrap .sec-head { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Technology */
.tech { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .tech { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-11); } }
.tech__media { max-width: 460px; width: 100%; justify-self: center; }
.tech .card h3 { font-size: var(--step-2); }

/* Give Back band */
.giveback { max-width: calc(52rem + 2 * var(--gutter)); }
.giveback__text { margin-top: var(--space-5); color: var(--color-band-muted); max-width: 40rem; }
.giveback .arrow-link { display: inline-flex; }

/* 29. Inner pages ========================================================= */
.page-head { padding-block: var(--space-8) var(--space-10); }
.page-head__inner { display: grid; gap: var(--space-8); align-items: center; }
.page-head__copy { max-width: 44rem; }
.page-head__lede { margin-top: var(--space-5); color: var(--color-text-muted); }
@media (min-width: 900px) {
  .page-head--media .page-head__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); }
}
.page-head__media { max-width: 420px; width: 100%; justify-self: center; }
.h3 { font-size: var(--step-2); line-height: 1.25; }

/* Jewelry styles: two photos beside a short description */
.styles { list-style: none; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .styles { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-10); } }
.style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: center; }
.style__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.style__copy > * + * { margin-top: var(--space-2); }
.style__copy h3 { font-size: var(--step-2); }

/* Placement guide */
.guide { list-style: none; padding: 0; display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .guide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); } }
.guide__item { scroll-margin-top: calc(var(--header-h) + 24px); }
.guide__name { margin-top: var(--space-3); font-size: var(--step-2); }
.guide__text { margin-top: var(--space-1); font-size: var(--step--1); line-height: 1.5; color: var(--color-text-muted); }
.guide__item .arrow-link { font-size: var(--step--1); min-height: 40px; }

/* Pricing page */
.packages { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.package {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.package__off { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--color-accent); }
.package__off .num { font-size: inherit; }
.package__name { font-size: var(--step-2); margin-top: var(--space-2); }
.package__from { margin-top: auto; padding-top: var(--space-3); font-weight: 600; }
.package--ask { background: transparent; border-style: dashed; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
.table-scroll:focus-visible { outline-offset: 2px; }
.totals { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--step--1); }
.totals caption { text-align: left; font-family: var(--font-display); font-size: var(--step-2); padding-bottom: var(--space-4); }
.totals th, .totals td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; font-weight: 400; }
.totals thead th { font-weight: 600; }
.totals td { text-align: right; }
.totals thead th:not(:first-child) { text-align: right; }
.totals__per { display: block; color: var(--color-text-muted); font-size: 0.8125rem; }
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist .icon { width: 22px; height: 22px; color: var(--color-accent); margin-top: 3px; }
@media (min-width: 900px) { .egrid--3 { grid-template-columns: repeat(3, 1fr); } }
.checklist--band { max-width: 44rem; font-size: var(--step-1); }
.checklist--band .icon { color: var(--color-band-accent); }

/* 30. Narrow-screen safety (320px and 400% zoom) ========================== */
/* Grid and flex children may shrink below their content's widest word. */
.split > *, .explore > *, .jewel > *, .mickey > *, .tech > *, .infants > *, .consult-wrap > *,
.results-strip__inner > *, .answers-wrap > *, .page-head__inner > *, .sec-row > * { min-width: 0; }
/* Long labels (e.g. an Instagram handle) wrap instead of widening the page. */
@media (max-width: 480px) {
  .btn { white-space: normal; max-width: 100%; }
}
.site-foot__link, .utility__link, .nav__visit { overflow-wrap: anywhere; }