@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm ivory does almost all the work. Ink carries the technology band, the
     closing call and the footer. Bronze is the only colour and it is nearly a
     neutral. The photography supplies every saturated tone on the site. */
  --ink-deep: #131110;
  --ink-lift: #2b2724;
  --ivory: #f7f5f0;
  --sand-soft: #d8d0c1;
  --soft: #5d574e;
  --ink: #1c1917;
  --bronze: #6f6151;
  --hairline-dark: #3a3531;
  --hairline-light: #ddd6c9;
  --white: #ffffff;
  --error: #8c3a2e;
  --sand: #eae4d9;
  --sand-mute: #c8c0b2;

  --font-display: "Newsreader", "Hoefler Text", Georgia, serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;

  /* Display runs large and the jumps are wide — the contrast between a 5rem
     headline and an 0.8rem label is doing most of the work here. */
  --step--1: clamp(0.78rem, 0.75rem + 0.13vw, 0.85rem);
  --step-0: clamp(1.02rem, 0.98rem + 0.2vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.34vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.34rem + 0.78vw, 2.05rem);
  --step-3: clamp(2rem, 1.62rem + 1.86vw, 3.3rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.8vw, 4.3rem);
  --step-hero: clamp(3rem, 1.7rem + 6vw, 7.4rem);

  --space-xs: 0.5rem;
  --space-sm: 0.8rem;
  --space-md: 1.1rem;
  --space-lg: 1.5rem;
  --space-xl: clamp(1.8rem, 3vw, 3.4rem);
  --space-section: clamp(1.75rem, 3vw, 3.5rem);
  --container: 108rem;
  --gutter: clamp(1.25rem, 3.2vw, 4rem);
  --hero-height: 100svh;
  --hero-wordmark: clamp(8rem, 17.8vw, 24rem);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 999px;
  --border: 1px solid var(--hairline-light);
  --shadow: none;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-ui: 380ms;
  --intro-image-duration: 1450ms;
  --intro-text-duration: 900ms;
  --intro-text-delay: 1050ms;
  --intro-mark-delay: 1500ms;
  --intro-stagger: 85ms;
  --intro-detail-delay: 2050ms;
}

/* The recurring device: a hairline, then a wide-tracked label in brass. */
.eyebrow, .index, .systems-band-label, .laser-name span,
.footer-contact > span, .footer-inner address > span, .footer-inner nav > span,
.contact-list dt, .hero-location {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.6rem; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 350;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--sand-mute); color: var(--ink); }
* { scrollbar-color: var(--bronze) var(--ivory); scrollbar-width: thin; }
a { color: inherit; text-underline-offset: 0.25em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
/* Roman and italic mixed inside one line is the recurring editorial device. */
h1 em, h2 em, h3 em, .lede em, .hero-location em { font-style: italic; font-weight: inherit; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--bronze); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-200%); background: var(--white); padding: 0.75rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }

/* Slim utility bar: how a local practice signposts its phone number without
   stealing room from the header. */
.utility-bar { padding: 0.6rem 1rem; background: var(--ink-deep); color: var(--sand-mute); font-size: var(--step--1); }
.utility-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem var(--space-lg); max-width: var(--container); margin-inline: auto; }
.utility-bar p { margin: 0; }
.utility-bar-inner > div { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.utility-bar a { color: var(--sand-mute); text-underline-offset: 0.3em; }
.utility-bar :focus-visible { outline-color: var(--sand-mute); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 5.25rem;
  padding: 0.72rem var(--gutter);
  background: var(--ivory);
  border-bottom: var(--border);
}
.brand { display: grid; gap: 0.25rem; text-decoration: none; }
.brand { color: var(--ink); }
.brand-mark { grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--sand-mute); stroke-width: 1.5; stroke-linecap: round; }
.brand-name { font: 400 1.75rem/1 var(--font-display); letter-spacing: -0.02em; }
.brand-place { font: 400 0.65rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.22em; color: inherit; }
.footer-brand .brand-place { color: var(--sand-mute); }
.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 2rem); color: var(--ink); font-size: var(--step--1); font-weight: 400; letter-spacing: 0.04em; }
.site-nav > a:not(.button) { position: relative; text-decoration: none; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; inset: auto 0 -0.4em; height: 1px; background: var(--sand-mute); scale: 0 1; transform-origin: left; transition: scale var(--duration-fast) var(--ease); }
.site-nav > a:not(.button):hover::after, .site-nav > a:not(.button):focus-visible::after { scale: 1 1; }
.nav-phone { font-family: var(--font-body); font-size: var(--step--1); }
.menu-toggle { display: none; min-width: 4.8rem; min-height: 2.9rem; border: 1px solid color-mix(in srgb, var(--ivory) 45%, transparent); border-radius: var(--radius-pill); color: var(--ivory); background: transparent; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; }
.menu-bars { width: 1.1rem; height: 0.65rem; border-top: 2px solid; border-bottom: 2px solid; }

.button { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); padding: 0.8rem 1.6rem; background: var(--bronze); color: var(--ivory); text-decoration: none; font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--duration-fast) var(--ease); }
.button:hover { background: var(--ink); }
.button:active { background: var(--ink); }
.button-small { min-height: 2.9rem; padding: 0.6rem 1.35rem; border: 1px solid color-mix(in srgb, var(--ivory) 55%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--ivory); }
.site-header .button-small:hover { background: var(--ivory); color: var(--ink); }
.button-light { background: var(--sand-mute); color: var(--ink); }
.button-light:hover { background: var(--ivory); }
.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; color: var(--bronze); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }

/* Home hero: the headline runs the full container width, and one photograph
   sits edge to edge beneath it — a clinician at work, which is the thing the
   page is actually selling. */
/* Opening curtain, home page only.
   Pure CSS on a fixed panel: the mark settles, a hairline fills beneath it, then
   the panel lifts away. No JavaScript, so it clears even if the script never
   runs, and it is aria-hidden so screen readers go straight to the content.
   Total 1.5s, and it never replays when moving between pages. */
.loader { position: fixed; z-index: 200; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-lg); background: var(--ink); animation: loader-lift 400ms var(--ease) 1.1s forwards; }
.loader-mark { color: var(--ivory); font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; opacity: 0; animation: loader-mark 700ms var(--ease) 100ms forwards; }
.loader-mark em { font-style: italic; }
.loader-rule { width: clamp(9rem, 22vw, 16rem); height: 1px; background: color-mix(in srgb, var(--ivory) 22%, transparent); overflow: hidden; }
.loader-rule span { display: block; width: 100%; height: 100%; background: var(--ivory); transform-origin: left; scale: 0 1; animation: loader-fill 900ms var(--ease) 250ms forwards; }

@keyframes loader-mark { from { opacity: 0; translate: 0 0.5rem; } to { opacity: 1; translate: 0 0; } }
@keyframes loader-fill { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes loader-lift { to { translate: 0 -100%; visibility: hidden; } }

/* Home hero, built to match the reference frame.
   Everything sits over one full-bleed photograph: a serif kicker and a pill top
   left, a short paragraph bottom left, faint caps on the right edge, and the
   wordmark running enormous across the lower half. The lowercase italic letter
   inside the caps is the reference's signature move, and it happens to be how
   NuBody is actually spelled. */
.hero { position: relative; display: grid; min-height: var(--hero-height); min-height: 100dvh; background: var(--ink); color: var(--ivory); overflow: hidden; }
.hero-figure { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; background: var(--ink-lift); }
.hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
/* only enough veil to hold white type — the reference keeps the picture bright */
.hero-figure::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to bottom, color-mix(in srgb, var(--ink) 62%, transparent) 0 19%, transparent 48%),
  linear-gradient(to top, color-mix(in srgb, var(--ink) 46%, transparent) 0 22%, transparent 56%); }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; width: 100%; margin-inline: auto; padding: 8rem var(--gutter) 2rem; }

.hero-top { display: grid; justify-items: start; gap: var(--space-md); }
.hero-kicker { margin: 0; color: var(--ivory); font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 3.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.hero-kicker em { font-style: italic; }

/* the thin elliptical outline button from the reference */
.pill { display: inline-flex; min-height: 2.9rem; align-items: center; padding: 0.55rem 1.5rem; border: 1px solid color-mix(in srgb, var(--ivory) 62%, transparent); border-radius: var(--radius-pill); color: var(--ivory); font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.pill:hover { background: var(--ivory); color: var(--ink); }

.hero-aside { position: relative; z-index: 3; grid-row: 3; align-self: end; max-width: 25%; margin: 0; color: var(--white); font-size: var(--step--1); line-height: 1.55; }
.hero-edge { position: absolute; z-index: 2; top: 49%; right: var(--gutter); max-width: 13rem; min-height: 44px; margin: 0; color: var(--white); font-family: var(--font-body); font-size: var(--step--1); line-height: 1.5; text-align: right; text-transform: uppercase; text-decoration: none; }
.hero-edge span { display: block; margin-top: var(--space-xs); }

/* The wordmark. Cap height runs to roughly a third of the hero, the way the
   reference sets it, so it reads as a mark rather than a heading. */
.wordmark { position: absolute; z-index: 2; right: var(--gutter); bottom: 0; margin: 0 0 -0.13em; color: var(--ivory); font-family: var(--font-display); font-size: var(--hero-wordmark); font-weight: 400; line-height: 1; letter-spacing: -0.04em; text-align: right; text-wrap: nowrap; }
.wordmark em { font-style: italic; }

/* The systems band. The rule sweeps once across the three lasers and stops:
   motion showing a system being selected, not decoration. */
.systems-band { position: relative; z-index: 2; padding: var(--space-lg) 1rem; background: var(--ink); color: var(--ivory); }
.systems-band-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-xl); max-width: var(--container); margin-inline: auto; }
.systems-band-label { margin: 0; margin-right: auto; color: var(--sand-mute); }
.systems-band ul { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.systems-band li { display: flex; align-items: baseline; gap: 0.5rem; }
.systems-band li::before { content: ""; align-self: center; width: 2px; height: 1.1rem; background: var(--sand-mute); opacity: 0; animation: system-mark var(--duration-ui) var(--ease) forwards; }
.systems-band li:nth-child(1)::before { animation-delay: 0.45s; }
.systems-band li:nth-child(2)::before { animation-delay: 0.72s; }
.systems-band li:nth-child(3)::before { animation-delay: 0.99s; }
.systems-band b { font: 600 var(--step-1)/1.2 var(--font-display); letter-spacing: 0.01em; }
.systems-band li > span { color: var(--sand-mute); font-size: var(--step--1); }
.systems-band-inner > a { color: var(--sand-mute); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; text-underline-offset: 0.4em; }
.beam { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sand-mute); transform-origin: left; animation: beam-sweep 1.15s var(--ease) forwards; pointer-events: none; }
@keyframes beam-sweep { from { scale: 0 1; } to { scale: 1 1; } }

@keyframes system-mark { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

.section { max-width: var(--container); margin-inline: auto; padding: var(--space-section) var(--gutter); }
.section-heading { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-lg); row-gap: var(--space-lg); align-items: start; margin-bottom: var(--space-section); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--hairline-light); }
.section-heading > div { grid-column: 1 / 9; }
.section-heading > p { grid-column: 9 / 13; align-self: end; }
.section-heading h2 { margin-bottom: 0; font-size: var(--step-4); font-weight: 400; line-height: 1.08; letter-spacing: -0.012em; }
.section-heading p { max-width: 52ch; margin-bottom: 0.2rem; color: var(--soft); }
.detail-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; list-style: none; }
.detail-list li { padding: 0.48rem 0.7rem; border: var(--border); border-radius: var(--radius-pill); font-size: var(--step--1); }

.section-dark { max-width: none; color: var(--white); background: var(--ink); }
.section-dark { padding: 2.75rem 1rem; padding-block: var(--space-section); }
.section-dark > * { max-width: var(--container); margin-inline: auto; }
.technology > * { max-width: var(--container); margin-inline: auto; }
.technology-heading { display: grid; grid-template-columns: 1fr 0.48fr; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl); }
.technology-heading > div > p { max-width: 55ch; color: var(--sand-mute); }
.tech-disclaimer { margin-bottom: 0.3rem; color: var(--sand-mute); font-size: var(--step--1); }
.laser-table { margin: 0 0 var(--space-xl); padding: 0; list-style: none; border-top: 1px solid var(--soft); }
.laser-table li { display: grid; grid-template-columns: 0.8fr 1.3fr 0.45fr; gap: var(--space-lg); align-items: center; min-height: 9.5rem; border-bottom: 1px solid var(--soft); }
.laser-name span { color: var(--sand-mute); }
.laser-name h3 { margin: 0.3rem 0 0; font-size: var(--step-2); font-weight: 500; }
.laser-table p { max-width: 62ch; margin: 0; color: var(--sand-mute); }
.laser-meta { justify-self: end; color: var(--sand-mute); font-size: var(--step--1); font-style: italic; letter-spacing: 0; text-transform: none; }

.questions { border-top: var(--border); }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-xl); padding-top: var(--space-sm); border-top: 1px solid var(--ink); }
details { border-bottom: var(--border); }
summary { display: flex; min-height: 5.1rem; align-items: center; justify-content: space-between; gap: var(--space-md); cursor: pointer; font: 600 var(--step-1)/1.3 var(--font-display); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--bronze); font: 500 var(--step-2)/1 var(--font-body); transition: transform var(--duration-fast) var(--ease); }
details[open] summary span { transform: rotate(45deg); }
details p { max-width: 60ch; padding: 0 var(--space-xl) var(--space-lg) 0; color: var(--soft); }

.consultation-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); align-self: start; padding: var(--space-xl); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow); }
.field-row { display: grid; gap: 0.38rem; }
.field-wide { grid-column: 1 / -1; }
label { font-weight: 600; }
label span { color: var(--soft); font-weight: 400; }
input, select, textarea { width: 100%; min-height: 3rem; border: 1px solid var(--hairline-light); border-radius: var(--radius-sm); padding: 0.68rem 0.78rem; color: var(--ink); background: var(--ivory); transition: border-color var(--duration-fast) var(--ease); }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--bronze); }
[aria-invalid="true"] { border-color: var(--error); }
.form-status { grid-column: 1 / -1; min-height: 1.5rem; margin: 0; color: var(--error); }

.site-footer { padding: var(--space-xl) 1rem; color: var(--white); background: var(--ink); }
.footer-inner { display: grid; grid-template-columns: 1.2fr repeat(3, 0.7fr); gap: var(--space-lg) var(--space-xl); max-width: var(--container); margin-inline: auto; }
.footer-brand .brand-name { display: block; font-size: var(--step-2); }
.footer-brand p { margin: 0.5rem 0 0; color: var(--sand-mute); }
.footer-inner address, .footer-contact, .footer-inner nav { display: flex; flex-direction: column; gap: 0.45rem; font-style: normal; }
.footer-inner address > span, .footer-contact > span, .footer-inner nav > span { margin-bottom: 0.35rem; color: var(--sand-mute); }
.footer-inner nav { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); column-gap: var(--space-lg); row-gap: 0.45rem; align-content: start; justify-content: start; }
.footer-inner nav > span { grid-column: 1 / -1; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--soft); color: var(--sand-mute); font-size: var(--step--1); }

/* A centred statement, set large and given a whole screen of air. The reference
   uses this as its pause between dense sections; it is the cheapest way to make
   a page feel unhurried. */
.statement { display: grid; justify-items: center; max-width: var(--container); margin-inline: auto; padding: clamp(1.75rem, 3vw, 3.5rem) var(--gutter); text-align: center; }
.statement p.eyebrow { color: var(--bronze); }
.statement h2 { max-width: 30ch; margin: 0 0 var(--space-lg); font-size: var(--step-4); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; }
.statement > p { font-size: var(--step--1); color: var(--soft); }
.statement .text-link { margin-top: var(--space-xl); color: var(--bronze); }

/* ---------------------------------------------------------- inner pages */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eyebrow { margin-bottom: var(--space-sm); color: var(--bronze); font: 500 var(--step--1)/1.35 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.muted { color: var(--soft); }
.site-nav a[aria-current="page"] { color: var(--sand-mute); }
.site-nav a[aria-current="page"]::after { scale: 1 1; }

.page-hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-lg); max-width: var(--container); margin-inline: auto; padding: clamp(2rem, 4vw, 3.5rem) 1rem var(--space-lg); }
.page-hero .eyebrow { grid-column: 1 / 13; margin-bottom: var(--space-lg); }
.page-hero h1 { grid-column: 1 / 9; }
.page-hero .lede { grid-column: 9 / 13; align-self: start; }
.page-hero h1 { max-width: 18ch; margin-bottom: var(--space-lg); font-size: var(--step-4); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; }
.lede { max-width: 56ch; margin: 0; color: var(--soft); font-size: var(--step-1); line-height: 1.65; }

/* Concern grid: one lead article and two supporting, each carrying its own image.
   Not a card grid - no borders, no shadows; the photograph is the surface. */
.concern-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-lg); row-gap: 0; }
.concern picture { background: var(--sand); }
.concern { display: grid; grid-template-columns: subgrid; grid-template-rows: 1fr auto; gap: var(--space-md); align-content: stretch; }
.concern:nth-child(1) { grid-column: 1 / 5; }
.concern:nth-child(2) { grid-column: 5 / 9; }
.concern:nth-child(3) { grid-column: 9 / 13; }
.concern > picture, .concern > .concern-copy { grid-column: 1 / -1; }
.concern picture { position: relative; display: block; overflow: hidden; background: var(--hairline-light); min-height: clamp(16rem, 24vw, 22rem); }
.concern img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.concern-copy { display: grid; gap: 0.4rem; }
.concern h3 { margin: 0; font-size: var(--step-2); line-height: 1.16; letter-spacing: 0; }
.concern h3 a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--duration-fast) var(--ease); }
.concern h3 a:hover { background-size: 100% 1px; }
.concern p { margin: 0; max-width: 46ch; color: var(--soft); }
.concern .text-link { color: var(--bronze); }
.section-more { margin: var(--space-xl) 0 0; }
.section-more .text-link { color: var(--bronze); }

/* Alternating media / copy rows */
.section-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60ch); gap: var(--space-xl) var(--space-section); align-items: stretch; }
.section-split .split-copy { padding-top: 0; }
.split-media { position: relative; overflow: hidden; background: var(--sand); min-height: 16rem; }
.split-media picture { position: absolute; inset: 0; display: block; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

.split-copy h2 { margin-bottom: var(--space-lg); font-size: var(--step-3); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.split-copy > p { max-width: none; color: var(--soft); }

.treatment-block { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-lg); align-items: stretch; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.treatment-media { grid-column: 1 / 8; grid-row: 1; }
.treatment-copy { grid-column: 8 / 13; grid-row: 1; padding-top: 0; }
.treatment-block-flip .treatment-media { grid-column: 6 / 13; }
.treatment-block-flip .treatment-copy { grid-column: 1 / 6; }
/* Two treatment sections in a row would otherwise stack two full section paddings. */
.section:has(> .treatment-block) + .section:has(> .treatment-block) { padding-top: 0; }

.treatment-media { position: relative; overflow: hidden; background: var(--sand); min-height: 18rem; }
.treatment-media picture { position: absolute; inset: 0; display: block; }
.treatment-media img { width: 100%; height: 100%; object-fit: cover; }
.treatment-copy h2 { margin: 0.7rem 0 var(--space-lg); font-size: var(--step-3); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.treatment-copy > p { max-width: none; color: var(--soft); }
.treatment-copy .button { margin-top: var(--space-sm); }

/* Prose */
.prose-section { display: grid; justify-items: start; }
.prose { display: grid; grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr); column-gap: var(--space-section); max-width: none; align-items: start; }
.prose-body > p:first-child, .prose-body > h3:first-child { margin-top: 0; }
.prose h2 { margin-bottom: var(--space-md); font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.01em; }
.prose h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--step-1); }
.prose p { max-width: none; color: var(--soft); font-size: var(--step-1); line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 600; }
.note-line { max-width: 62ch; margin-top: var(--space-lg); padding-left: var(--space-md); border-left: 2px solid var(--bronze); color: var(--soft); font-size: var(--step--1); line-height: 1.6; }

.tick-list, .step-list { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.tick-list li, .step-list li { position: relative; max-width: 60ch; padding: 0 0 var(--space-md) var(--space-xl); color: var(--soft); }
.tick-list li b, .step-list li b { color: var(--ink); }
.tick-list li::before { content: ""; position: absolute; top: 0.62em; left: 0; width: 0.9rem; height: 2px; background: var(--bronze); }
.step-list { counter-reset: step; }
.step-list li { counter-increment: step; }
.step-list li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0.1em; left: 0; color: var(--bronze); font: 500 var(--step--1)/1.6 var(--font-body); }

.term-list { margin: var(--space-lg) 0 0; border-top: 1px solid var(--hairline-light); }
.term-list > div { display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--hairline-light); }
.term-list dt { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; overflow-wrap: break-word; }
.term-list dd { margin: 0; color: var(--soft); }

/* Commitments */
.commit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--ink); }
.commit { display: grid; gap: 0.5rem; align-content: start; }
.commit h3 { margin: 0; font-size: var(--step-2); line-height: 1.16; letter-spacing: 0; }
.commit p { margin: 0; color: var(--soft); }

/* Contact */
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: var(--space-section); align-items: stretch; }
.contact-details h2 { margin-bottom: var(--space-lg); font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.01em; }
.contact-list { margin: 0; border-top: 1px solid var(--ink); }
.contact-list > div { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--hairline-light); }
.contact-list dt { color: var(--bronze); font: 500 var(--step--1)/1.6 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.contact-list dd { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.form-title { margin-bottom: 0.3rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: 0; }
.form-title, .form-intro { grid-column: 1 / -1; }
.form-intro { margin: 0 0 var(--space-sm); color: var(--soft); font-size: var(--step--1); }
.field-hint { color: var(--soft); font-size: var(--step--1); }

/* Closing call to action */
.cta-band { position: relative; max-width: none; padding: 2.75rem 1rem; padding-block: var(--space-section); color: var(--ivory); background: var(--ink-lift); border-top: 1px solid var(--sand-mute); }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; max-width: var(--container); margin-inline: auto; }
.cta-band h2 { margin-bottom: var(--space-md); font-size: var(--step-3); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.cta-band p { max-width: 52ch; margin: 0; color: var(--sand-mute); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.cta-band .button { background: var(--sand-mute); color: var(--ink); }
.site-footer { border-top: 1px solid var(--hairline-dark); }
.cta-band .button:hover { background: var(--ivory); color: var(--ink); }
.cta-band .text-link { color: var(--sand-mute); }
.cta-band :focus-visible { outline-color: var(--sand-mute); }

.wide-figure { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.wide-figure picture { display: block; overflow: hidden; background: var(--hairline-light); }
.wide-figure img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 42%; }
.wide-figure figcaption { padding-top: 0.7rem; color: var(--soft); font: 500 var(--step--1)/1.5 var(--font-body); }

/* Reference-led editorial system. The video is the authority for the warm
   paper, photographic opening, mixed italic wordmark and elliptical actions. */
.home-page .utility-bar { display: none; }
.home-page .site-header { position: absolute; inset: 0 0 auto; background: transparent; border-bottom: 0; }
.home-page .brand, .home-page .site-nav, .home-page .menu-toggle { color: var(--ivory); }
.home-page .site-header .button-small { color: var(--ivory); border-color: currentColor; }
.site-header .button-small { color: var(--ink); border-color: currentColor; }
.site-header .button-small:hover { color: var(--ivory); background: var(--ink); }
.home-page .site-header .button-small:hover { color: var(--ink); background: var(--ivory); }
.site-nav a[aria-current="page"] { color: var(--bronze); }
.menu-toggle { color: var(--ink); border-color: currentColor; }
.button { border-radius: var(--radius-pill); }
.button-outline { background: transparent; border: 1px solid var(--bronze); color: var(--ink); }
.button-outline:hover { color: var(--ivory); }
.home-page .hero :focus-visible { outline-color: var(--ivory); }
.home-page .site-header :focus-visible { outline-color: var(--ivory); }
.wordmark-letters { display: inline-flex; }
.wordmark-letters > * { display: inline-block; }
.wordmark-letters > :nth-child(1) { --letter-order: 0; }
.wordmark-letters > :nth-child(2) { --letter-order: 1; }
.wordmark-letters > :nth-child(3) { --letter-order: 2; }
.wordmark-letters > :nth-child(4) { --letter-order: 3; }
.wordmark-letters > :nth-child(5) { --letter-order: 4; }
.wordmark-letters > :nth-child(6) { --letter-order: 5; }
.intro-skip { display: none; position: absolute; z-index: 60; top: var(--space-lg); right: var(--gutter); min-height: 44px; padding: var(--space-xs) var(--space-lg); border: 1px solid currentColor; border-radius: var(--radius-pill); background: var(--ink); color: var(--ivory); cursor: pointer; font-size: var(--step--1); }
.intro-skip:focus-visible { outline-color: var(--ivory); }
.intro-pending .intro-skip, .intro-running .intro-skip { display: inline-flex; align-items: center; }
.intro-pending .hero-figure { clip-path: inset(23% 27%); }
.intro-pending .hero-figure img { transform: scale(1.16); }
.intro-pending .home-page .site-header,
.intro-pending .hero-top, .intro-pending .hero-aside,
.intro-pending .hero-edge, .intro-pending .wordmark { visibility: hidden; }
.intro-running .hero-figure { animation: portrait-open var(--intro-image-duration) var(--ease) both; }
.intro-running .hero-figure img { animation: portrait-settle var(--intro-image-duration) var(--ease) both; }
.intro-running .hero-top { animation: copy-open var(--intro-text-duration) var(--ease) var(--intro-text-delay) both; }
.intro-running .wordmark { overflow: hidden; padding-top: 0.06em; }
.intro-running .wordmark-letters > * { animation: letter-open var(--intro-text-duration) var(--ease) calc(var(--intro-mark-delay) + var(--letter-order) * var(--intro-stagger)) both; }
.intro-running .hero-aside, .intro-running .hero-edge,
.intro-running .home-page .site-header { animation: detail-open 600ms var(--ease) var(--intro-detail-delay) both; }
.intro-running .home-page .site-header { pointer-events: none; }
@keyframes portrait-open { from { clip-path: inset(23% 27%); } to { clip-path: inset(0); } }
@keyframes portrait-settle { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes copy-open { from { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(0.6em); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes letter-open { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes detail-open { from { opacity: 0; } to { opacity: 1; } }
.systems-band .beam, .systems-band li::before { animation: none; opacity: 1; }
.section-heading { margin-bottom: var(--space-lg); border-bottom: 0; padding-bottom: 0; }
.page-hero { padding-inline: var(--gutter); border-bottom: var(--border); }
.page-hero h1 { font-size: var(--step-hero); }
.page-hero + .section { padding-top: var(--space-lg); }
.eyebrow { display: none; }
.concern:nth-child(1) { grid-column: 1 / 6; }
.concern:nth-child(2) { grid-column: 6 / 10; margin-top: 0; }
.concern:nth-child(3) { grid-column: 10 / 13; margin-top: 0; }
.concern .index { display: none; }
.concern-copy { padding-top: var(--space-xs); }
.concern p { font-size: var(--step--1); }
.treatment-menu { padding: var(--space-section) 0; }
.treatment-menu h2 { padding-inline: var(--gutter); text-align: left; font-size: var(--step-3); margin-bottom: var(--space-lg); }
.treatment-menu-links { display: grid; }
.treatment-menu-link { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-xl); min-height: 8rem; padding: var(--space-lg) var(--gutter); color: var(--ink); text-align: left; text-decoration: none; overflow: hidden; }
.treatment-menu-link picture { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity var(--duration-ui) var(--ease); }
.treatment-menu-link img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.treatment-menu-link::before { content: ""; position: absolute; inset: 0; background: var(--ink-deep); z-index: -1; opacity: 0; transition: opacity var(--duration-ui) var(--ease); }
.treatment-menu-name { font: 400 clamp(2rem, 3.8vw, 4.2rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.035em; }
.treatment-menu-name { grid-column: 1; grid-row: 1; }
.treatment-menu-description { grid-column: 2; grid-row: 1; max-width: none; font-size: var(--step--1); opacity: 0.78; }
.treatment-menu-arrow { grid-column: 3; grid-row: 1; justify-self: end; font-size: var(--step-2); }
.treatment-menu-link:is(:hover, :focus-visible) { color: var(--ivory); }
.treatment-menu-link:is(:hover, :focus-visible) picture { opacity: 1; }
.treatment-menu-link:is(:hover, :focus-visible)::before { opacity: 0.64; }
.treatment-menu-link:is(:hover, :focus-visible) .treatment-menu-name { font-style: italic; }
.treatment-menu-link:is(:hover, :focus-visible) .treatment-menu-description { opacity: 1; }
.care-note { position: relative; isolation: isolate; margin: 0 var(--gutter); overflow: hidden; background: var(--ink-lift); color: var(--ivory); }
.care-note > picture { position: absolute; inset: 0; z-index: -2; }
.care-note img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.care-note::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-deep); opacity: 0.65; }
.care-note-content { padding: var(--space-section) var(--gutter); text-align: center; }
.care-note h2 { font-size: var(--step-4); line-height: 1.1; }
.care-promises { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-xl) auto; max-width: 70rem; }
.care-promises p { padding: var(--space-lg); margin: 0; font: 400 var(--step-2)/1.2 var(--font-display); }
.care-promises p + p { border-left: 1px solid var(--sand-mute); }
.cta-band { background: var(--ivory); color: var(--ink); border-top: 0; padding-inline: var(--gutter); }
.cta-band p, .cta-band .text-link { color: var(--soft); }
.cta-band h2 { font-size: var(--step-4); }
.cta-band .button { background: transparent; border: 1px solid var(--ink); }
.cta-band .button:hover { background: var(--ink); color: var(--ivory); }
.cta-band :focus-visible { outline-color: var(--ink); }
.site-footer { padding: var(--space-xl) var(--gutter); }
.footer-inner a, .utility-bar a { display: inline-flex; align-items: center; min-height: 44px; }
.utility-bar { padding-block: 0; }
.site-nav > a { min-height: 44px; display: inline-flex; align-items: center; }
.note-line { border-left-width: 1px; }
input, textarea { caret-color: var(--bronze); }

@media (max-width: 68rem) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; }
  .site-nav { position: absolute; inset: 100% 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 6.6rem); overflow-y: auto; padding: var(--space-lg); background: var(--ivory); border-bottom: var(--border); }
.home-page .site-nav, .home-page .site-nav .button-small { color: var(--ink); }
  .home-page .site-nav :focus-visible { outline-color: var(--ink); }
  .site-nav.is-open { display: flex; }
  .site-nav > a { display: flex; min-height: 3rem; align-items: center; }
  .section-split, .treatment-block, .contact-layout { gap: var(--space-xl); }
  .commit-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .commit { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); align-items: baseline; }
  .commit .index { grid-row: span 2; }
}

@media (max-width: 62rem) {
  .section-heading > div, .section-heading > p { grid-column: 1 / 13; }
  .page-hero h1, .page-hero .lede { grid-column: 1 / 13; }
  .page-hero .lede { align-self: start; }
  .concern:nth-child(1) { grid-column: 1 / 7; }
  .concern:nth-child(2) { grid-column: 7 / 13; margin-top: 3rem; }
  .concern:nth-child(3) { grid-column: 4 / 10; margin-top: 2rem; }
  .treatment-media, .treatment-block-flip .treatment-media { grid-column: 1 / 6; }
  .treatment-copy, .treatment-block-flip .treatment-copy { grid-column: 6 / 13; }
}

@media (max-width: 50rem) {
  .hero { min-height: 100svh; min-height: 100dvh; }
  .hero-inner { padding-top: 7.5rem; }
  .hero-kicker { font-size: clamp(2rem, 5vw, 3rem); max-width: 15ch; }
  .hero-edge { display: none; }
  /* the mark drops to the foot and the paragraph clears it rather than
     sitting underneath, which is what the desktop overlap became on a phone */
  .wordmark { font-size: 23vw; right: var(--gutter); bottom: 0.1rem; }
  .hero-aside { max-width: 30ch; margin-bottom: 20vw; }
  .concern-grid { display: grid; grid-template-columns: 1fr; row-gap: var(--space-section); }
  .concern, .concern:nth-child(1), .concern:nth-child(2), .concern:nth-child(3) { grid-column: auto; grid-template-columns: 1fr; margin-top: 0; }
  .section-split .split-copy { padding-top: 0; }
  .section-split:nth-of-type(odd) .split-media { margin-left: 0; }
  .treatment-block { grid-template-columns: 1fr; row-gap: var(--space-lg); }
  .treatment-media, .treatment-copy,
  .treatment-block-flip .treatment-media, .treatment-block-flip .treatment-copy { grid-column: auto; grid-row: auto; padding-top: 0; }
  .treatment-media { min-height: 0; }
  .treatment-media picture { position: static; }
  .treatment-media img { aspect-ratio: 3 / 2; height: auto; }
  .hero-figure img { object-position: 52% 46%; }
  .treatment-menu-link { min-height: 7rem; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding-inline: var(--gutter); text-align: left; }
  .treatment-menu-name { font-size: clamp(2rem, 6vw, 3.5rem); }
  .treatment-menu-description { max-height: none; opacity: 1; margin-top: var(--space-xs); grid-column: 1; grid-row: 2; }
  .treatment-menu-name { grid-column: 1; grid-row: 1; }
  .treatment-menu-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; }
  .treatment-menu h2 { text-align: left; }
  .care-promises { grid-template-columns: 1fr; }
  .care-promises p + p { border-left: 0; border-top: 1px solid var(--sand-mute); }
  .section-heading, .technology-heading, .approach, .consultation { grid-template-columns: 1fr; }
  .laser-table li { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-lg) 0; }
  .laser-meta { justify-self: start; }
  .faq-grid { grid-template-columns: 1fr; }
  .consultation-form { max-width: none; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding-top: var(--space-lg); }
  .concern-grid { grid-template-columns: 1fr; gap: var(--space-section); }
  .concern-lead { grid-column: auto; grid-template-columns: 1fr; align-items: start; gap: var(--space-md); }
  .section-split, .contact-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
  .treatment-block { grid-template-columns: 1fr; gap: var(--space-lg); }
  .treatment-block-flip .treatment-media { order: 0; }
  .prose { grid-template-columns: 1fr; row-gap: var(--space-md); }
  .split-media { min-height: 0; }
  .split-media picture { position: static; }
  .split-media img { position: static; aspect-ratio: 3 / 2; height: auto; }
  .cta-inner { grid-template-columns: 1fr; align-items: start; gap: var(--space-lg); }
  .wide-figure img { aspect-ratio: 4 / 3; }
  .term-list > div, .contact-list > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (max-width: 34rem) {
  .site-header { min-height: 4.7rem; }
  .brand-mark { width: 2rem; height: 2rem; }
  .brand-name { font-size: 1.16rem; letter-spacing: 0.1em; }
  .brand-place { font-size: 0.7rem; letter-spacing: 0.16em; }
  .site-nav { top: 100%; }
  .hero-kicker { font-size: 2rem; }
  .systems-band { gap: var(--space-sm) var(--space-lg); }
  .systems-band-label { margin-right: 0; width: 100%; }
  .consultation-form { grid-template-columns: 1fr; padding: var(--space-lg); }
  .field-row { grid-column: 1; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .commit { grid-template-columns: 1fr; }
  .commit .index { grid-row: auto; }
  .tick-list li, .step-list li { padding-left: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-skip { display: none !important; }
  .intro-pending .hero-figure { clip-path: none; }
  .intro-pending .hero-figure img { transform: none; }
  .intro-pending .home-page .site-header, .intro-pending .hero-top,
  .intro-pending .hero-aside, .intro-pending .hero-edge,
  .intro-pending .wordmark { visibility: visible; }
  .loader { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .beam { display: none; }
  .button { border: 1px solid ButtonText; }
}