/* 46 Soft Focus: Calla Dental Studio (sample)
   Recreation of the look of althea-template.framer.website ("Althea"): our own code, Unsplash-licence photos and our own
   procedural contour rings. A periwinkle mist page with a fixed white glow and hairline contour rings behind everything,
   Instrument Serif headlines, Inter (Display optical size) for text, glowing white cards with 32-40px corners and dark-slate
   pill buttons. Re-skin: change the shared token layer below. Breakpoints 760 / 1080 (ncs-desktop). No JavaScript: a
   :target menu, <details> FAQ, scroll-snap rails and CSS-only motion. */
:root {
  /* Shared token layer (library-wide names) */
  --c-bg: #d6daeb;                 /* periwinkle mist (the original's page colour) */
  --c-surface: #ffffff;            /* glowing cards */
  --c-ink: #333333;                /* headlines and text */
  --c-muted: #50545f;              /* body copy: 5.3:1 on the mist, 7.9:1 on white */
  --c-line: rgb(255 255 255 / .75);/* glass-card edges (decorative) */
  --c-line-strong: #80849a;        /* field and chip borders: 3.7:1 on white */
  --c-accent: #3d3f54;             /* dark slate: buttons, the open menu, checked chips (10:1 with white) */
  --c-on-accent: #ffffff;
  --c-accent-2: #2d7552;           /* status only (the "request sent" check) */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: var(--f-body);         /* none: numbers use tabular figures */
  --r-sm: 20px;                    /* FAQ cards, photo frames */
  --r-lg: 36px;                    /* every white card (the original uses 32-40px) */
  --r-pill: 999px;                 /* buttons, chips, fields */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 128px;

  /* Theme names mapped to the shared layer */
  --mist: var(--c-bg);
  --mist-2: #e9ecf6;               /* the glow's halo */
  --card: var(--c-surface);
  --ink: var(--c-ink);
  --muted: var(--c-muted);
  --slate: var(--c-accent);
  --slate-2: #2c2e40;              /* button hover */
  --menu-bg: #5b5e72;              /* the original's grey-slate menu (6.4:1 with white) */
  --label: #5f6372;                /* chips and small labels on white (5.9:1) */
  --glow: 0 0 20px rgb(255 255 255 / .8), 0 18px 40px -24px rgb(64 70 104 / .22);
  --glass: rgb(255 255 255 / .42);
  --wrap: 1240px;
  --gut: 20px;
  --bar-h: 64px;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --t-hero: clamp(50px, 7.4vw, 108px);
  --t-h2: clamp(42px, 5.9vw, 86px);
  --t-h3: clamp(26px, 2.5vw, 36px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--mist); scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; color: var(--ink); font: 400 16px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
small { font-size: inherit; }
b, strong { font-weight: 500; }
button, input, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px !important; height: 1px; max-width: 1px !important; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d-only { display: none; }

a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.menu :focus-visible { outline-color: #fff; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 12px 18px; background: var(--slate); color: #fff; border-radius: var(--r-pill); }
.skip:focus { top: 12px; }
.demo { position: relative; z-index: 101; background: var(--slate); color: #e6e8f2; font-size: 13px; line-height: 1.4; text-align: center; padding: 9px 16px; }

/* ---------- The mist: a fixed glow and hairline contour rings behind every section (the original's WebGL canvas) ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url(img/rings.svg) 50% 42% / cover no-repeat,
    radial-gradient(closest-side at 50% 40%, #fff 0%, rgb(255 255 255 / .9) 22%, rgb(237 241 250 / .55) 52%, rgb(214 218 235 / 0) 100%) 50% 40% / 120vmax 120vmax no-repeat,
    radial-gradient(closest-side at 50% 50%, #cfdcec 40%, rgb(214 218 235 / 0) 100%) 50% 40% / 170vmax 170vmax no-repeat;
  opacity: .9; }

/* ---------- Type ---------- */
.h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em; }
.h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.01em; }
.h4 { font-size: 26px; line-height: 1.1; letter-spacing: -.005em; }
.lede { color: var(--muted); font-size: 16px; line-height: 1.55; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: var(--label); font-size: 14px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 0; border-radius: var(--r-pill);
  font: 400 17px/1 var(--f-body); cursor: pointer; white-space: nowrap; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color 240ms, box-shadow 240ms; }
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--slate); color: var(--c-on-accent); }
.btn-glow { background: #fff; color: var(--ink); box-shadow: 0 0 20px rgb(255 255 255 / .85); }
.btn-wide { width: 100%; }
.btn .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { background: var(--slate-2); }
  .btn-glow:hover { box-shadow: 0 0 30px #fff, 0 0 0 1px rgb(255 255 255 / .9); }
}

/* ---------- Header bar: frosted mist, logo / links / phone + pill (desktop), logo / Call / Menu (phones) ---------- */
.bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 6px; height: var(--bar-h); padding: 0 var(--gut);
  background: rgb(222 225 239 / .82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.logo { display: flex; align-items: baseline; gap: 8px; margin-right: auto; min-height: 44px; align-content: center; padding-top: 6px; }
.logo-w { font: italic 400 34px/1 var(--f-display); letter-spacing: -.01em; }
.logo-t { font-size: 12px; line-height: 1; color: var(--label); letter-spacing: .02em; }
.site-nav, .bar-book { display: none; }
.bar-call, .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 17px; }
.menu-btn { margin-right: -10px; }
.bar-call { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgb(51 51 51 / .4); }

/* ---------- Phone menu: full-screen slate :target overlay, centred serif links (the original's), Book pill with a glow ---------- */
.menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: 0 var(--gut) calc(24px + env(safe-area-inset-bottom));
  background: rgb(91 94 114 / .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transition: opacity 260ms var(--e-out), visibility 0s linear 260ms; }
.menu:target { visibility: visible; opacity: 1; transition: opacity 320ms var(--e-out); }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); flex: none; }
.menu .logo-w { padding-top: 6px; }
.menu-close { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin-right: -10px; font-size: 17px; }
.menu-list { display: grid; justify-items: center; gap: 2px; margin: auto 0; padding: 24px 0; }
.menu-list a { display: flex; align-items: center; min-height: 64px; font: 400 52px/1 var(--f-display); letter-spacing: -.01em; }
.menu-list li { transition: translate 520ms var(--e-out), filter 520ms var(--e-out); translate: 0 14px; filter: blur(6px); }
.menu:target .menu-list li { translate: 0 0; filter: none; }
.menu:target .menu-list li:nth-child(2) { transition-delay: 40ms; }
.menu:target .menu-list li:nth-child(3) { transition-delay: 80ms; }
.menu:target .menu-list li:nth-child(4) { transition-delay: 120ms; }
.menu:target .menu-list li:nth-child(5) { transition-delay: 160ms; }
.menu-foot { display: grid; gap: 8px; justify-items: center; }
.menu-foot .btn { box-shadow: 0 0 24px rgb(255 255 255 / .55); }
.menu-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; }

/* ---------- Layout ---------- */
main { display: grid; }
main > * { min-width: 0; }
.sec { padding: 56px var(--gut); }
.sec > * { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.sec-head { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: 32px; }
.sec-head .lede { max-width: 560px; }
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--glow); padding: 28px 24px; }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gut) * -1); padding: 16px var(--gut) 24px; scroll-padding-inline: var(--gut); scrollbar-width: none; max-width: none; width: auto; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; }
.rail:focus-visible { outline-offset: -3px; }

/* ---------- Hero: the portrait melts into the mist (phones), the headline sits low and centred ---------- */
.hero { position: relative; display: grid; align-content: end; justify-items: center; min-height: calc(100svh - var(--bar-h) - 38px); padding: 0 var(--gut) 28px; text-align: center; isolation: isolate; }
.hero-img { position: absolute; z-index: -1; inset: 6px 0 auto; margin-inline: auto; width: min(92%, 500px); height: 58%; object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 42%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 42%, transparent 100%); opacity: .94; }
.hero-copy { display: grid; justify-items: center; gap: 14px; }
.hero h1 { font-size: var(--t-hero); line-height: 1; letter-spacing: -.02em; }
.hero h1 .ln { display: inline-block; }
.hero-lede { max-width: 36em; color: var(--ink); font-size: 17px; line-height: 1.5; }
.hero-act { display: grid; justify-items: center; gap: 4px; width: 100%; margin-top: 6px; }
.hero-act .btn { width: 100%; max-width: 360px; min-height: 56px; font-size: 18px; }
.link-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; color: var(--ink); }
.hero-chip { display: none; }

/* ---------- Welcome note ---------- */
.welcome { padding-top: 40px; }
.note { display: grid; justify-items: center; gap: 18px; text-align: center; max-width: 980px; }
.note p { font: 400 27px/1.28 var(--f-display); letter-spacing: -.005em; text-wrap: balance; }
.note figcaption { color: var(--muted); font-size: 15px; }

/* ---------- Services: fanned cards ---------- */
.fcard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 24px 26px; text-align: center; background: var(--card); border-radius: 32px; box-shadow: var(--glow); }
.fcard .ic { width: 52px; height: 52px; fill: none; stroke: #7b8095; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.fcard .h3 { font-size: 32px; line-height: 1.05; max-width: 9ch; }
.fcard p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.fcard .price { margin-top: auto; padding-top: 6px; color: var(--ink); font-size: 15px; }

/* ---------- New patients: the care journey ---------- */
.jr-img { display: none; }
.steps { display: grid; gap: 28px; counter-reset: s; }
.step { position: relative; display: grid; gap: 8px; padding-left: 92px; isolation: isolate; }
.step::before { content: attr(data-n); position: absolute; left: -4px; top: -20px; z-index: -1; font: 400 88px/1 var(--f-display); color: #fff; letter-spacing: -.03em; }
.step p { color: var(--muted); }

/* ---------- Pricing & insurance ---------- */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcard { display: grid; align-content: start; gap: 2px; padding: 18px 16px; border-radius: 28px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--c-line), 0 0 18px rgb(255 255 255 / .45); }
.pcard .h4 { font-size: 21px; margin-bottom: 6px; }
.pfrom { color: var(--muted); font-size: 14px; }
.pnum { font: 400 38px/1.05 var(--f-display); margin-bottom: 6px; }
.pcard p:last-child { color: var(--muted); font-size: 14px; line-height: 1.45; }
.cover { display: grid; gap: 12px; margin-top: 12px; }
.cover .h4 { margin-bottom: 12px; }
.ticks { display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ticks .i { margin-top: 2px; color: var(--ink); stroke-width: 1.75; }

/* ---------- Approach bento ---------- */
.bx { display: grid; align-content: start; gap: 10px; padding: 26px 24px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--glow); overflow: hidden; }
.bx p { color: var(--muted); font-size: 15px; }
.bx img { width: 100%; height: 180px; object-fit: cover; border-radius: 22px; margin-top: 6px; }
.bx-c img { object-position: 30% 40%; }
.bx-t { display: grid; gap: 10px; }
.bx-e { display: none; }
.mark { font: italic 400 76px/1 var(--f-display); }
.mark-t { color: var(--label); font-size: 14px; }

/* ---------- Reviews: giant white words behind glowing cards ---------- */
.reviews { position: relative; isolation: isolate; overflow: clip; }
.rv-word { position: absolute; inset: 24px 0 auto; z-index: -1; max-width: none; text-align: center; pointer-events: none; }
.rv-word::before { content: attr(data-word); display: block; font: 400 clamp(96px, 21vw, 300px)/.82 var(--f-display); letter-spacing: -.03em; color: #fff; opacity: .92; text-shadow: 0 0 40px rgb(255 255 255 / .6); }
.reviews .rv-list { padding-top: 64px; }
.rv { display: grid; align-content: start; gap: 16px; padding: 28px 26px 24px; border-radius: 30px; background: var(--card); box-shadow: var(--glow); }
.stars { display: flex; gap: 2px; color: #c28a2b; }
.stars .i { width: 16px; height: 16px; }
.rv blockquote { font: 400 26px/1.22 var(--f-display); }
.rv-by { font-size: 15px; }
.rv-by span { color: var(--muted); }
.sample { margin-top: auto; color: var(--label); font-size: 13px; }
.rv-score { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); font-size: 15px; }
.rv-score .i { color: #c28a2b; width: 16px; height: 16px; }

/* ---------- About ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-bottom: 18px; }
.stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.stats dd { font: 400 46px/1 var(--f-display); letter-spacing: -.02em; }
.stats dt { color: var(--muted); font-size: 13px; line-height: 1.35; }
.doc { display: grid; align-content: start; justify-items: start; gap: 6px; padding: 26px 24px; border-radius: 30px; background: var(--card); box-shadow: var(--glow); }
.doc p:last-child { color: var(--muted); font-size: 15px; }
.mono { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; font: italic 400 26px/1 var(--f-display);
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, #dfe3f2 70%, #cbd1e7 100%); box-shadow: 0 0 16px rgb(255 255 255 / .9); }
.mono-2 { background: radial-gradient(circle at 60% 30%, #fff 0 28%, #e3dff0 70%, #d1cbe5 100%); }
.mono-3 { background: radial-gradient(circle at 40% 70%, #fff 0 28%, #dbe7f0 70%, #c6d7e6 100%); }
.role { color: var(--label); font-size: 14px; margin-bottom: 4px; }

.story { display: none; }
@media (min-width: 1080px) {
  .story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; margin-bottom: 96px; }
  .story img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-lg); box-shadow: 0 0 0 6px #fff, 0 0 30px 8px rgb(255 255 255 / .7); }
  .story-t { display: grid; gap: 18px; max-width: 520px; }
  .story-t p { color: var(--muted); font-size: 17px; line-height: 1.6; }
  .story-t .h3 { font-size: 44px; margin-bottom: 4px; }
  .story-q { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .9); }
  .story-q p { color: var(--ink); font: 400 30px/1.25 var(--f-display); }
  .story-q figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; }
}

/* ---------- Studio (Work page) ---------- */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shot { display: grid; gap: 8px; align-content: start; }
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 5px #fff, 0 0 22px 6px rgb(255 255 255 / .7); }
.shot-a { grid-column: 1 / -1; }
.shot-a img { aspect-ratio: 3 / 2; }
.shot figcaption { color: var(--muted); font-size: 13px; line-height: 1.4; padding: 4px 2px 0; }
.comfort { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.comfort li { display: grid; gap: 4px; padding: 16px; border-radius: 22px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--muted); font-size: 14px; line-height: 1.4; }
.comfort b { font: 400 20px/1.1 var(--f-display); color: var(--ink); }

/* ---------- FAQ ---------- */
.qa { display: grid; gap: 10px; align-items: start; }
.q { border-radius: var(--r-sm); background: var(--card); box-shadow: 0 0 16px rgb(255 255 255 / .7); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 20px; cursor: pointer; list-style: none; font-size: 16px; }
.q summary::-webkit-details-marker { display: none; }
.q summary .i { transition: rotate 300ms var(--e-out); }
.q[open] summary .i { rotate: 45deg; }
.q .a { padding: 0 20px 18px; color: var(--muted); font-size: 15px; }
.q summary:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }

/* ---------- Book + contact ---------- */
.ct { display: grid; gap: 14px; }
.ct > * { min-width: 0; }
.book { display: grid; gap: 16px; }
.book .h3 { margin-bottom: 2px; }
.f { display: grid; gap: 6px; min-width: 0; }
.f label, .f legend { color: var(--label); font-size: 14px; }
.f input, .f textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px 20px; border: 1px solid var(--c-line-strong); border-radius: 24px; background: #f6f7fb; font-size: 16px; line-height: 1.3; }
.f input { border-radius: var(--r-pill); }
.f textarea { resize: vertical; }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; background: #fff; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.picks legend { margin-bottom: 8px; padding: 0; }
.pick { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); font-size: 15px; cursor: pointer; transition: background-color 200ms, color 200ms; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick:has(input:checked) { background: var(--slate); border-color: var(--slate); color: #fff; }
.pick:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: 2px; }
.sent { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #f2f7f4; font-size: 15px; line-height: 1.4; box-shadow: inset 0 0 0 1px #b9d4c4; }
.sent .i { color: var(--c-accent-2); stroke-width: 2.25; margin-top: 2px; }
.sent:target { display: flex; }
.visit { display: grid; gap: 18px; align-content: start; }
.visit-mark { font: italic 400 52px/1 var(--f-display); text-align: center; }
.vlist { display: grid; gap: 12px; }
.vlist div, .hours div { display: grid; gap: 2px; }
.vlist dt, .hours dt { color: var(--label); font-size: 14px; }
.vlist a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgb(51 51 51 / .3); text-underline-offset: 4px; }
.hours { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid #e3e5ee; }
.hours div { grid-template-columns: 1fr auto; }
.hours dt { font-size: 15px; }

/* ---------- Footer ---------- */
.foot { padding: 56px var(--gut) 28px; }
.foot > * { max-width: var(--wrap); margin-inline: auto; }
.f-cta { display: grid; gap: 22px; margin-bottom: 28px; }
.f-cta > div:first-child { display: grid; gap: 14px; justify-items: start; }
.f-cta .h2 { font-size: clamp(40px, 4vw, 54px); }
.f-trust { display: grid; gap: 10px; align-content: end; }
.f-score { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; }
.f-dots { display: flex; }
.f-dots i { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--mist); background: radial-gradient(circle at 35% 30%, #fff, #c8cee6); font: 400 11px/26px var(--f-body); font-style: normal; text-align: center; color: #fff; }
.f-dots i:first-child { margin-left: 0; }
.f-dots i:nth-child(2) { background: radial-gradient(circle at 35% 30%, #fff, #d6cde3); }
.f-dots i:nth-child(3) { background: radial-gradient(circle at 35% 30%, #fff, #c9d9e6); }
.f-dots i:nth-child(4) { background: radial-gradient(circle at 35% 30%, #fff, #dcd6d0); }
.f-dots i:nth-child(5) { background: var(--slate); font-size: 14px; }
.f-lic { color: var(--muted); font-size: 14px; }
.f-cards { display: grid; gap: 12px; }
.f-h { font: 400 14px/1 var(--f-body); color: var(--label); margin-bottom: 14px; }
.f-pages ul { display: grid; grid-template-columns: 1fr 1fr; }
.f-pages a { display: flex; align-items: center; min-height: 44px; }
.f-visit { display: grid; gap: 8px; align-content: start; }
.f-visit p { color: var(--muted); }
.f-visit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.f-mail { margin-top: 28px; text-align: center; color: var(--muted); font-size: 14px; }
.f-mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 16px; }
.f-legal { display: grid; gap: 4px; margin-top: 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Phones only: keep the one-page phone layout short (10 screens) ---------- */
@media (max-width: 759px) {
  .welcome { padding-top: 24px; padding-bottom: 40px; }
  .note p { font-size: 24px; }
  .sec { padding-block: 44px; }
  .sec-head { margin-bottom: 22px; gap: 10px; }
  .pcard p:last-child { display: none; }
  .cover { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cover .card { padding: 20px 16px; border-radius: 28px; }
  .cover .h4 { font-size: 21px; margin-bottom: 8px; }
  .cover .ticks { gap: 6px; }
  .cover .ticks li { font-size: 13px; gap: 6px; }
  .cover .ticks .i { width: 14px; height: 14px; }
  .shots { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shot-a img { aspect-ratio: 16 / 10; }
  .shot-b figcaption, .shot-c figcaption { display: none; }
  .comfort { margin-top: 14px; gap: 8px; }
  .comfort li { padding: 12px 14px; font-size: 13px; }
  .comfort b { font-size: 18px; }
  .book { gap: 12px; }
  .book textarea { min-height: 48px; }
  .visit { gap: 14px; }
  .visit-mark { display: none; }
  .vlist { grid-template-columns: 1fr; gap: 8px; }
  .f-visit, .f-lic { display: none; }
  .f-cta { gap: 16px; margin-bottom: 18px; }
  .foot { padding-top: 40px; }
  .f-mail { margin-top: 16px; }
  .step { padding-left: 0; }
  .step .h3 { padding-left: 74px; min-height: 52px; display: flex; align-items: center; }
  .step::before { font-size: 72px; top: -8px; }
  .steps { gap: 22px; }
  .stats dd { font-size: 40px; }
  .bx img { height: 150px; }
  .bento { align-items: start; }
  .approach .lede, .about .lede-more, .foot .lede { display: none; }
  .book { grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .book > * { grid-column: 1 / -1; }
  .book > .f-half { grid-column: auto; }
  .comfort { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); max-width: none; width: auto; }
  .comfort li { scroll-snap-align: start; }
  .hours { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hours div { grid-template-columns: 1fr; }
  .f-pages ul { grid-template-columns: repeat(3, 1fr); }
  .f-pages { padding: 18px 18px 10px; }
  .f-h { margin-bottom: 4px; }
}

/* ---------- Motion (CSS only) ---------- */
@keyframes soft-in { from { filter: blur(14px); translate: 0 12px; } to { filter: none; translate: 0 0; } }
@keyframes breathe { from { opacity: .95; } to { opacity: .7; } }
@keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .ln { animation: soft-in 1100ms var(--e-out) both; }
  .hero h1 .ln + .ln { animation-delay: 220ms; }
  .hero-lede, .hero-act { animation: soft-in 900ms var(--e-out) 420ms both; }
  .hero-img { animation: soft-in 1400ms var(--e-out) both; }
  body::before { animation: breathe 14s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    @media (min-width: 760px) {
      .fcard, .pcard, .bx, .rv, .doc, .shot, .q { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-list li, .btn, .q summary .i { transition: none !important; }
}

/* ---------- Tablet (760+) ---------- */
@media (min-width: 760px) {
  :root { --gut: 32px; --bar-h: 76px; }
  .sec { padding-block: 96px; }
  .sec-head { margin-bottom: 48px; gap: 18px; }
  .sec-head .lede, .lede { font-size: 17px; }
  .bar-book { display: inline-flex; min-height: 48px; padding: 0 24px; font-size: 16px; margin-left: 8px; }
  .hero { min-height: calc(100svh - var(--bar-h) - 38px); padding-bottom: 72px; }
  .hero-img { width: 560px; height: 62%; }
  .note p { font-size: 40px; line-height: 1.3; }
  .rail { grid-auto-columns: 44%; }
  .prices { grid-template-columns: repeat(4, 1fr); }
  .cover { grid-template-columns: 1fr 1fr; }
  .comfort { grid-template-columns: repeat(4, 1fr); }
  .shots { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; }
  .shot-a { grid-column: 1; grid-row: 1 / 3; }
  .shot-a img { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .shot-a { grid-template-rows: 1fr auto; }
  .shot-b img, .shot-c img { aspect-ratio: 16 / 10; }
  .qa { grid-template-columns: 1fr 1fr; }
  .ct { grid-template-columns: 1.25fr .75fr; align-items: start; }
  .card { padding: 36px 34px; }
  .f-cta { grid-template-columns: 1.2fr .8fr; }
  .f-cards { grid-template-columns: 1.4fr 1fr; }
  .f-pages ul { grid-template-columns: repeat(3, 1fr); }
  .stats { gap: 24px; margin-bottom: 36px; }
  .stats dd { font-size: 80px; }
  .stats dt { font-size: 15px; }
}

/* ---------- Desktop (1080+): link row, fanned cards, journey portrait, bento grid ---------- */
@media (min-width: 1080px) {
  :root { --gut: 40px; --bar-h: 96px; }
  .bar { background: linear-gradient(rgb(214 218 235 / .92), rgb(214 218 235 / .78)); }
  .logo-w { font-size: 40px; }
  .site-nav { display: block; position: absolute; left: 50%; translate: -50% 0; }
  .site-nav ul { display: flex; gap: 56px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size 300ms var(--e-out); }
  .bar-call { display: none; text-decoration: none; font-size: 16px; }
  .m-only, .menu-btn, .menu { display: none; }
  .d-only { display: inline; }
  .bar-book { min-height: 54px; padding: 0 28px; }

  .hero { min-height: calc(100vh - var(--bar-h) - 38px); align-content: center; padding-top: 22vh; padding-bottom: 96px; }
  .hero-img { display: none; }
  .hero-copy { gap: 18px; }
  .hero h1 .ln { display: inline; }
  .hero-lede { max-width: none; font-size: 18px; }
  .hero-act { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 18px; }
  .hero-act .btn { width: auto; min-height: 58px; padding: 0 34px; }
  .hero-chip { position: absolute; left: var(--gut); bottom: 32px; display: flex; align-items: center; gap: 14px; text-align: left; color: var(--muted); font-size: 14px; line-height: 1.35; }
  .chip-dot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px rgb(255 255 255 / .8); color: #c28a2b; }
  .chip-dot .i { width: 16px; height: 16px; }

  .sec { padding-block: 140px; }
  .welcome { padding-top: 120px; }
  .note p { font-size: 48px; line-height: 1.3; }

  /* the fan: five tilted cards that straighten on hover */
  .fan { display: flex; justify-content: center; overflow: visible; margin: 0 auto; padding: 20px 0 40px; width: 100%; }
  .fcard { flex: 0 1 258px; min-width: 0; min-height: 400px; margin-inline: -8px; rotate: var(--tilt, 0deg); translate: 0 var(--lift, 0); transition: rotate 500ms var(--e-out), translate 500ms var(--e-out), scale 500ms var(--e-out); }
  .fcard:nth-child(1) { --tilt: -6deg; --lift: 28px; }
  .fcard:nth-child(2) { --tilt: 4deg; --lift: -6px; z-index: 1; }
  .fcard:nth-child(3) { --tilt: -2deg; --lift: 18px; }
  .fcard:nth-child(4) { --tilt: 5deg; --lift: -10px; z-index: 1; }
  .fcard:nth-child(5) { --tilt: -4deg; --lift: 24px; }
  .fcard .h3 { font-size: 36px; }

  /* journey: faded portrait left, steps stepping down to the right over big white numerals */
  .jr { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; }
  .jr-img { display: block; width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
    -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 52%, transparent 100%); }
  .steps { gap: 64px; }
  .step { padding-left: 0; max-width: 400px; }
  .step:nth-child(2) { margin-left: 90px; }
  .step:nth-child(3) { margin-left: 180px; }
  .step::before { left: -120px; top: -40px; font-size: 150px; }
  .step .h3 { font-size: 38px; }

  .pcard { padding: 26px 24px 28px; min-height: 300px; }
  .pcard .h4 { font-size: 28px; margin-bottom: 40px; }
  .pnum { font-size: 52px; margin-bottom: 18px; }
  .pcard p:last-child { font-size: 15px; }

  /* bento */
  .bento { display: grid; grid-template-columns: 1fr 1.3fr .95fr; grid-template-rows: 290px 290px; gap: 16px; overflow: visible; margin: 0 auto; padding: 0; width: 100%; }
  .bento > * { min-width: 0; }
  .bx-a { grid-column: 1; grid-row: 1; align-content: end; }
  .bx-b { grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 18px; }
  .bx-b .bx-t { align-content: end; }
  .bx-b img { height: 100%; margin: 0; }
  .bx-c { grid-column: 3; grid-row: 1 / 3; grid-template-rows: auto 1fr; }
  .bx-c img { height: 100%; }
  .bx-d { grid-column: 1; grid-row: 2; align-content: end; }
  .bx-e { grid-column: 2; grid-row: 2; display: grid; place-content: center; justify-items: center; gap: 10px; }
  .bx .h3 { font-size: 34px; }

  .reviews { padding-top: 160px; }
  .rv-word { top: 60px; }
  .reviews .rv-list { display: flex; justify-content: center; gap: 0; overflow: visible; margin: 0 auto 32px; padding: 40px 0 20px; width: 100%; }
  .rv { flex: 0 1 340px; min-width: 0; min-height: 380px; margin-inline: -6px; }
  .rv:nth-child(1) { rotate: -4deg; translate: 0 34px; }
  .rv:nth-child(2) { z-index: 1; }
  .rv:nth-child(3) { rotate: 4deg; translate: 0 34px; }
  .rv blockquote { font-size: 30px; }

  .team { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow: visible; margin: 0 auto; padding: 0; width: 100%; max-width: var(--wrap); }
  .doc { padding: 32px; }
  .shot-a img { min-height: 520px; }
  .card { padding: 44px 44px; }
  .visit { padding: 40px 36px; }
  .foot { padding-top: 24px; }
  .f-cta { margin-bottom: 48px; }
}

@media (min-width: 1280px) { .bar-call { display: inline-flex; } }

@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  .site-nav a:hover { background-size: 100% 1px; }
  .fcard:hover { rotate: 0deg; translate: 0 -14px; scale: 1.03; z-index: 2; }
  .f-pages a:hover, .f-visit a:hover, .vlist a:hover { color: #000; text-decoration-color: currentColor; }
  .q summary:hover { color: #000; }
}