/* Theme 09: Dark Luxury (Linnet Studio theme library). Shown for a sample fine jewelry studio.
   "Cold Luxury": graphite-black page, one silver accent, Gilda Display over Manrope. No warm tones in the chrome,
   so the gold and stones in the photographs are the only color on the page. Hairline rules carry the structure.
   The one moment: a silver hairline frame draws itself around the hero print. */

/* Shared token layer (Linnet Studio library). Presets in AUDIT section 7 override these values. */
:root {
  color-scheme: dark;
  --c-bg: #121416;          /* page background (preset 7 Cold Luxury) */
  --c-surface: #1c1f22;     /* raised panels: demo bar, drawing sheet, form fields, action bar (ink on it 14.2:1) */
  --c-ink: #eceef0;         /* headings, prices, key lines (15.8:1 on the page) */
  --c-muted: #a4aab0;       /* captions, small labels (7.9:1 on the page, 7.1:1 on surface) */
  --c-line: #33383d;        /* decorative hairlines only (1.6:1) */
  --c-line-strong: #6f767d; /* form-field borders (4.0:1 on the page, 3.6:1 on surface) */
  --c-accent: #c8cdd2;      /* silver: buttons, hero frame, step numerals, prices, drawing lines (11.5:1 on the page) */
  --c-on-accent: #121416;   /* text on the accent (11.5:1) */
  --c-accent-2: #8ba3ba;    /* steel: dimension marks on the design drawing only, never a second brand color (7.1:1) */
  --f-display: "Gilda Display", "Bodoni 72", Didot, "Palatino Linotype", Georgia, serif;
  --f-body: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 0px;              /* buttons, fields: luxury reads sharp */
  --r-lg: 2px;              /* photos and plates */
  --r-pill: 0px;            /* no pills in this theme */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 96px;

  /* Theme names map to the shared layer */
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --heading: var(--c-ink);
  --muted: var(--c-muted);
  --accent: var(--c-accent);
  --on-accent: var(--c-on-accent);
  --steel: var(--c-accent-2);
  --font-display: var(--f-display);
  --font-text: var(--f-body);
  --radius: var(--r-sm);
  --s1: var(--s-1); --s2: var(--s-2); --s3: var(--s-3); --s4: var(--s-4); --s5: var(--s-5); --s6: var(--s-6);

  /* Derived (usually leave alone) */
  --text: color-mix(in srgb, var(--c-ink) 86%, var(--c-bg));        /* body text, 11.9:1 on the page */
  --accent-hi: color-mix(in srgb, var(--c-accent) 55%, #fff);        /* focus ring and hover */
  --rule: color-mix(in srgb, var(--c-accent) 36%, var(--c-bg));      /* list hairlines, 2.5:1 on the page */
  --rule-soft: var(--c-line);                                        /* quiet dividers */
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --bar-h: 0px;             /* height of the phone action bar */
  --gutter: 20px;           /* page side margin */
  --sec: 48px;              /* vertical padding of each section */
  --max: 1296px;            /* content width */
}
@media (max-width: 759.98px) {
  :root { --bar-h: calc(60px + env(safe-area-inset-bottom)); }
}
@media (min-width: 760px) { :root { --gutter: 40px; --sec: 96px; } }
@media (min-width: 1080px) { :root { --sec: 128px; } }
@media (min-width: 1280px) { :root { --gutter: 72px; --sec: 144px; } }

/* Jeweler option: warm brass on espresso (the original Aurelle palette). To use it, paste this block over the
   token values above, then check ink, muted and accent against --c-bg with the contrast tool.
:root {
  --c-bg: #1a1714;          // page
  --c-surface: #231f1b;     // panels
  --c-ink: #f0e9dd;         // bone: headings
  --c-muted: #a39a8c;       // captions (6.4:1 on the page)
  --c-line: #3a342d;
  --c-line-strong: #7a7266; // field borders
  --c-accent: #c9ab76;      // champagne brass (8.2:1 on the page)
  --c-on-accent: #1a1714;
  --c-accent-2: #9aa59a;    // sage, drawing dimensions only
}
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(var(--bar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
}
img { display: block; max-width: 100%; height: auto; border-radius: var(--r-lg); }
a { color: inherit; }
p { margin: 0 0 1em; }
address { font-style: normal; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--heading); text-wrap: balance; margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { display: none; }
.i { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Touch polish: no grey tap flash, no double-tap delay, a short press on everything pressable */
a, button, summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn, .action-bar a { transition: transform 120ms var(--ease-out); }
.btn:active, .action-bar a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn, .action-bar a { transition: none; } }

/* ---------- Demo bar: one line ---------- */
.demo-bar { background: var(--surface); color: var(--text); padding: 7px 12px; overflow: hidden; }
.demo-bar p { margin: 0; font-size: .75rem; line-height: 1.4; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Header ---------- */
.top { border-bottom: 1px solid var(--rule-soft); }
.top-in {
  max-width: var(--max); margin: 0 auto; padding: 6px var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "nav nav";
  align-items: center; column-gap: 16px;
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 12px; min-height: 52px; text-decoration: none; }
.mark { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.mark-lg { width: 52px; height: 52px; stroke-width: 1.6; }
.brand-name { display: grid; gap: 5px; font: 400 1.5rem/1 var(--font-display); color: var(--heading); letter-spacing: .02em; }
.brand-sub { font: 400 .8125rem/1 var(--font-text); color: var(--muted); letter-spacing: .06em; }
.top-actions { grid-area: actions; display: flex; align-items: center; gap: 20px; }
.top-call {
  color: var(--accent); text-decoration: none; font-weight: 500; font-size: .9375rem;
  min-height: 44px; display: inline-flex; align-items: center; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.top-actions .btn { display: none; }
.nav { grid-area: nav; display: flex; justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--rule-soft); }
.nav a {
  min-height: 46px; min-width: 44px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: .9375rem; font-weight: 500; color: var(--text); letter-spacing: .02em;
  border-bottom: 1px solid transparent;
}
.nav a:first-child { margin-left: -8px; }  /* the text, not the touch area, lines up with the page margin */
.nav a:last-child { margin-right: -8px; }
@media (min-width: 760px) {
  .top-in { padding-top: 8px; }
  .top-actions .btn { display: inline-flex; }
  .nav { justify-content: flex-start; gap: 32px; }
  .nav a, .nav a:first-child, .nav a:last-child { padding-inline: 0; margin: 0; min-width: 0; }
}
@media (min-width: 1080px) {
  .top-in { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav actions"; padding-block: 12px; column-gap: 40px; }
  .nav { margin: 0; border: 0; justify-content: center; gap: 28px; }
  .top-actions { gap: 24px; }
}

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r-sm);
  font: 600 .9375rem/1.2 var(--font-text); letter-spacing: .03em; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
}
.btn-sm { min-height: 44px; padding: 0 20px; background: transparent; color: var(--accent); }
.quiet-link {
  min-height: 48px; display: inline-flex; align-items: center; color: var(--heading); font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 7px;
}

/* ---------- Hero: the framed print ---------- */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: 36px var(--gutter) var(--sec);
  display: grid; gap: 40px;
}
.hero h1 {
  font-size: clamp(2.75rem, 1.15rem + 5.6vw, 6.25rem); line-height: 1.04; letter-spacing: -.012em;
  margin: 0 0 24px; max-width: 9em;
}
.lede { font-size: 1.125rem; line-height: 1.6; max-width: 26em; margin: 0; }

.hero-plate { margin: 0; }
.plate-frame { position: relative; padding: 12px; }
.plate-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 52%; border-radius: 0; }
.hairframe { position: absolute; inset: 0; pointer-events: none; }
.hairframe i { position: absolute; background: var(--accent); }
.hairframe i:nth-child(1) { top: 0; left: 0; right: 0; height: 1px; transform-origin: left; }
.hairframe i:nth-child(2) { top: 0; right: 0; bottom: 0; width: 1px; transform-origin: top; }
.hairframe i:nth-child(3) { bottom: 0; left: 0; right: 0; height: 1px; transform-origin: right; }
.hairframe i:nth-child(4) { top: 0; left: 0; bottom: 0; width: 1px; transform-origin: bottom; }
figcaption { font-size: .875rem; line-height: 1.45; color: var(--muted); }
.hero-plate figcaption { margin: 14px 12px 0; }

/* The one moving moment: the frame draws itself, side by side, then the caption settles */
@media (prefers-reduced-motion: no-preference) {
  .hairframe i:nth-child(odd) { animation: draw-x .6s cubic-bezier(.65, 0, .25, 1) both; }
  .hairframe i:nth-child(even) { animation: draw-y .6s cubic-bezier(.65, 0, .25, 1) both; }
  .hairframe i:nth-child(1) { animation-delay: .3s; }
  .hairframe i:nth-child(2) { animation-delay: .85s; }
  .hairframe i:nth-child(3) { animation-delay: 1.4s; }
  .hairframe i:nth-child(4) { animation-delay: 1.95s; }
  .hero-plate figcaption { animation: settle .9s ease 2.4s both; }
}
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes settle { from { opacity: 0; } }

@media (min-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-top: 64px; }
  .plate-frame { padding: 14px; }
  .plate-frame img { aspect-ratio: 4 / 5; }
  .hero-plate figcaption { margin-inline: 14px; }
}
@media (min-width: 1080px) {
  .hero { gap: 72px; padding-top: 72px; }
  .plate-frame { padding: 16px; }
  .hero-plate figcaption { margin-inline: 16px; }
}

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--rule); }
.trust ul {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--max);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trust li { display: grid; align-content: start; gap: 6px; padding: 20px 0 20px 16px; border-left: 1px solid var(--rule-soft); }
.trust li:nth-child(odd) { border-left: 0; padding-left: 0; }
.trust li:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
.t-val { font: 400 1.75rem/1.05 var(--font-display); color: var(--heading); }
.t-label { font-size: .875rem; line-height: 1.45; color: var(--text); }
@media (min-width: 760px) {
  .trust ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust li { padding: 28px 24px 28px 32px; }
  .trust li:nth-child(odd) { border-left: 1px solid var(--rule-soft); padding-left: 32px; }
  .trust li:first-child { border-left: 0; padding-left: 0; }
  .trust li:nth-child(n+3) { border-top: 0; }
  .t-val { font-size: 1.875rem; }
  .t-label { font-size: .9375rem; }
}
@media (min-width: 1080px) { .t-val { font-size: 2.25rem; } }

/* ---------- Shared section frame ---------- */
.services, .work, .process, .reviews, .about, .visit {
  position: relative; max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--gutter);
}
.work::before, .process::before, .reviews::before, .about::before, .visit::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule-soft);
}
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head h2 { font-size: clamp(2.05rem, 1.3rem + 2.7vw, 3.75rem); line-height: 1.08; letter-spacing: -.01em; }
.sec-head p { margin: 0; max-width: 32em; }
@media (min-width: 1080px) {
  .sec-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 72px; }
}

/* ---------- Services index (with prices) ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc";
  column-gap: 16px; row-gap: 6px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.index h3 { grid-area: name; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.15; }
.index p { grid-area: desc; margin: 0; font-size: 1rem; line-height: 1.55; max-width: 34em; }
.price { grid-area: price; font-size: .9375rem; font-weight: 500; color: var(--accent); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1080px) {
  .index li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 2fr); grid-template-areas: "name desc price";
    column-gap: 48px; align-items: center; padding: 28px 0;
  }
  .price { justify-self: end; font-size: 1rem; }
}

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-content: start;
  padding: 18px 0; border-top: 1px solid var(--rule);
}
.steps li::before { content: counter(step); grid-row: 1 / 3; font: 400 2.5rem/1 var(--font-display); color: var(--accent); font-variant-numeric: lining-nums; }
.steps h3 { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.25; }
.steps p { margin: 0; font-size: 1rem; line-height: 1.55; }
/* Phones: the numeral sits on the heading's line and the text runs the full column */
@media (max-width: 759.98px) {
  .steps li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .steps li::before { grid-row: auto; font-size: 2.125rem; }
  .steps p { grid-column: 1 / -1; margin-top: 2px; }
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; }
  .steps li { grid-template-columns: 1fr; padding: 30px 0 20px; }
  .steps li::before { grid-row: auto; font-size: 4rem; margin-bottom: 22px; }
}

/* ---------- Work: drawing + ring diptych, then the gallery ---------- */
.diptych { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.diptych figure { margin: 0; }
.d-sketch { grid-column: 1 / -1; grid-row: 1; }
.sheet { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-lg); }
.drawing { display: block; width: 100%; height: auto; }
.drawing .grid { fill: none; stroke: color-mix(in srgb, var(--steel) 13%, transparent); stroke-width: 1; }
.drawing .ln { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.drawing .thin, .drawing .thin-rect { stroke-width: 1.6; }
.drawing .fill, .drawing .paper { fill: var(--surface); }
.drawing .dash { stroke-dasharray: 6 8; }
.drawing .claw { stroke-width: 9; }
.drawing .claw-in { stroke: var(--surface); stroke-width: 4.5; }
.drawing .dim { fill: none; stroke: var(--steel); stroke-width: 1.8; }
.drawing .dim .ext { stroke-width: 1.2; stroke-dasharray: 2 6; }
.drawing .arrow { fill: none; stroke: var(--steel); stroke-width: 1.4; }
.drawing .leader { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.drawing text { fill: var(--muted); font-family: var(--font-text); }
.drawing .t-dim { fill: var(--steel); font-size: 44px; font-weight: 500; }
.drawing .t-note { font: 400 38px var(--font-display); }
.drawing .t-view { fill: var(--heading); font: 400 46px var(--font-display); }
.drawing .t-title { fill: var(--heading); font: 400 38px var(--font-display); }
.drawing .t-row { font-size: 29px; }
.d-sketch figcaption, .d-ring figcaption { margin-top: 12px; }
.diptych .d-ring {
  grid-column: 7 / -1; grid-row: 2; position: relative; z-index: 1;
  margin-top: -80px; padding: 10px 0 0 10px; background: var(--bg);
}
.d-ring img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; outline: 1px solid var(--rule); outline-offset: 6px; }
@media (min-width: 760px) {
  .d-sketch { grid-column: 1 / 10; }
  .diptych .d-ring { grid-column: 8 / -1; margin-top: -150px; padding: 16px 0 0 16px; }
  .d-ring img { outline-offset: 8px; }
}
@media (min-width: 1080px) { .diptych .d-ring { margin-top: -184px; } }

.gallery-title { margin: clamp(64px, 9vw, 150px) 0 24px; font-size: 1.75rem; line-height: 1.2; }
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; column-gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline-offset: -3px; }
.gallery figure { margin: 0; scroll-snap-align: start; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery figure:nth-child(1) img { object-position: 42% 50%; }
.gallery figure:nth-child(3) img { object-position: 62% 50%; }
.gallery figcaption { margin-top: 14px; font: 400 1.25rem/1.3 var(--font-display); color: var(--heading); }
.gallery figcaption span { display: block; margin-top: 4px; font: 400 .875rem/1.5 var(--font-text); color: var(--muted); }
@media (min-width: 760px) {
  .gallery { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .gallery figure:nth-child(2) { margin-top: 72px; }
}

/* ---------- Reviews ---------- */
.quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%; column-gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.quotes::-webkit-scrollbar { display: none; }
.quotes:focus-visible { outline-offset: -3px; }
.quotes figure { margin: 0; scroll-snap-align: start; border-top: 1px solid var(--rule); padding-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.quotes blockquote { margin: 0; }
.quotes blockquote p { margin: 0; font: 400 1.25rem/1.45 var(--font-display); color: var(--heading); text-indent: -.4em; }
.quotes figcaption { margin-top: auto; font-size: .9375rem; line-height: 1.45; color: var(--text); }
.quotes figcaption b { display: block; font-weight: 500; color: var(--heading); }
.quotes small { display: block; margin-top: 6px; font-size: .8125rem; color: var(--muted); letter-spacing: .02em; }
@media (min-width: 760px) {
  .quotes { grid-auto-columns: 46%; column-gap: 32px; }
}
@media (min-width: 1080px) {
  .quotes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; column-gap: 48px; }
}

/* ---------- About + credentials ---------- */
.about { display: grid; gap: 40px; }
.big { font: 400 clamp(1.5rem, 1rem + 2.1vw, 2.6rem)/1.3 var(--font-display); color: var(--heading); margin: 0 0 24px; letter-spacing: -.003em; text-wrap: pretty; }
.about-copy p:not(.big) { max-width: 32em; margin: 0; }
.about-photo { margin: 0; max-width: 480px; }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 50%; }
.about-photo figcaption { margin-top: 12px; }
.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.creds li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; }
.plate {
  display: grid; place-items: center; width: 64px; height: 64px; color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--rule);
}
.plate .i { width: 26px; height: 26px; }
.cred-text { font-size: .9375rem; line-height: 1.5; color: var(--text); }
.cred-text b { display: block; margin-bottom: 2px; font: 400 1.25rem/1.25 var(--font-display); color: var(--heading); }
@media (min-width: 760px) {
  .about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 56px 64px; }
  .about-photo { justify-self: end; }
  .about-photo img { aspect-ratio: 1; }
  .creds { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; padding-top: 40px; border-top: 1px solid var(--rule-soft); }
  .creds li { grid-template-columns: 1fr; gap: 18px; align-items: start; align-content: start; }
  .plate { width: 88px; height: 88px; box-shadow: inset 0 0 0 1px var(--rule), inset 0 0 0 7px var(--bg), inset 0 0 0 8px var(--rule); }
  .plate .i { width: 32px; height: 32px; }
}
@media (min-width: 1080px) {
  .about { gap: 64px 96px; }
  .about-copy { padding-bottom: 8px; }
}

/* ---------- Visit: booking, location, hours ---------- */
.visit { display: grid; gap: 48px; }
.visit h2 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1.05; letter-spacing: -.012em; margin: 0 0 20px; }
.visit-copy > p { max-width: 30em; font-size: 1.0625rem; }
.find h3 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.2; }
.find address { font-size: 1.0625rem; }
.find address a { display: inline-block; padding-block: 6px; color: var(--heading); text-decoration-color: var(--rule); text-underline-offset: 6px; }
.note { margin: 4px 0 0; font-size: .9375rem; }
.find .hours-title { margin-top: 32px; }
.hours { margin: 0; border-top: 1px solid var(--rule); }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.hours dt { color: var(--text); }
.hours dd { margin: 0; color: var(--heading); text-align: right; }
.reach { margin: 20px 0 0; }
.reach a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--accent); text-decoration-color: var(--rule); text-underline-offset: 6px; }

/* Booking form (concept-safe: submits to #sent and shows the confirmation in place) */
.book { display: grid; gap: 16px; margin-top: 32px; max-width: 30rem; }
.field { display: grid; gap: 8px; }
.field label { font-size: .9375rem; font-weight: 500; color: var(--heading); letter-spacing: .01em; }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 0 16px;
  font: inherit; font-size: 1rem; color: var(--heading); background-color: var(--surface);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(-45deg, transparent 50%, var(--accent) 50%);
  background-size: 7px 7px; background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%; background-repeat: no-repeat; padding-right: 44px;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-color: var(--accent); }
.book .btn { margin-top: 8px; width: 100%; }
.sent { display: none; margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--accent); color: var(--heading); }
.sent:target { display: block; }
@media (min-width: 760px) {
  .book .btn { width: auto; justify-self: start; }
}
@media (min-width: 1080px) {
  .visit { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 96px; align-items: start; }
  .find { padding-top: 14px; }
}

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule); }
.foot-in {
  max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 32px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; font-size: .9375rem; line-height: 1.6;
}
.foot-brand, .legal { grid-column: 1 / -1; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand p { margin: 0; max-width: 24em; }
.foot-h { margin: 0 0 8px; font: 500 .9375rem/1.4 var(--font-text); color: var(--heading); letter-spacing: .02em; }
.foot address { margin: 0; }
.foot a { display: inline-block; padding-block: 10px; overflow-wrap: anywhere; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.foot-in > div p { margin: 0; }
.hours-sum { margin-top: 4px; }
.legal { margin: 0; padding-top: 24px; border-top: 1px solid var(--rule-soft); color: var(--muted); font-size: .875rem; }
@media (min-width: 760px) {
  .foot-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 64px; }
  .foot-brand { grid-column: auto; display: block; }
  .foot-brand p { margin-top: 16px; }
}

/* ---------- Phone action bar (C1): Call, Directions and the main action stay in reach below 760px ---------- */
.action-bar { display: none; }
@media (max-width: 759.98px) {
  .action-bar {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: grid; grid-template-columns: auto auto minmax(0, 1fr);
    background: var(--surface); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 60px; padding: 0 14px;
    color: var(--heading); font: 500 .875rem/1.15 var(--font-text); letter-spacing: .015em; text-decoration: none; white-space: nowrap;
  }
  .action-bar a + a { box-shadow: inset 1px 0 0 var(--rule-soft); }
  .action-bar .ab-main { background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: none; white-space: normal; text-align: center; padding-inline: 8px; }
  .action-bar :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -6px; }
  .action-bar .ab-main:focus-visible { outline-color: var(--on-accent); }
}
@media (max-width: 379.98px) { .action-bar a:not(.ab-main) { padding-inline: 12px; } .action-bar .i { display: none; } }

/* Hover only where a real pointer can hover */
@media (hover: hover) and (pointer: fine) {
  .top-call:hover, .quiet-link:hover, .reach a:hover, .foot a:hover, .find address a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }
  .nav a { transition: color 150ms ease-out, border-color 150ms ease-out; }
  .nav a:hover { color: var(--heading); border-bottom-color: var(--accent); }
  .btn { transition: transform 120ms var(--ease-out), background-color 150ms ease-out, color 150ms ease-out; }
  .btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
  .btn-sm:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
}