/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · genre: editorial · macrostructure: Marquee Hero · H1 marquee knobs: size=xl, alignment=left-bias
 * theme: custom (design.md-locked) · vibe: "warm consultation room, refined, French, reassuring"
 * paper: oklch(96.5% 0.014 60) · accent: oklch(56% 0.15 52) · display: Fraunces · body: Hanken Grotesk
 * axes: light / roman-serif / chromatic-other (orange ~52°)
 * enrichment: E6 signature bloom mark (Tier-B hand-built SVG, draw/fade-on, reduced-motion safe)
 * polish: HP1 vertical-rail (hero, supporting voice) · drawn-underline emphasis (roman, no italic)
 * nav: N6 masthead · footer: Ft4 dense colophon · designed-as-app · studied: no · context: redesign v2 (homepage)
 */

:root {
    --color-paper:      oklch(96.5% 0.014 60);
    --color-paper-2:    oklch(93.5% 0.018 56);
    --color-paper-3:    oklch(90% 0.022 52);
    --color-ink:        oklch(26% 0.030 45);
    --color-ink-2:      oklch(45% 0.026 48);
    --color-muted:      oklch(56% 0.022 50);
    --color-rule:       oklch(86% 0.018 56);
    --color-rule-2:     oklch(90.5% 0.014 58);
    --color-accent:     oklch(56% 0.15 52);
    --color-accent-deep:oklch(49% 0.15 52);
    --color-accent-soft:oklch(92% 0.06 55);
    --color-accent-ink: oklch(98% 0.012 70);
    --color-focus:      oklch(56% 0.18 52);

    --font-display: "Fraunces", ui-serif, Georgia, serif;
    --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

    --text-xs:   0.78rem;
    --text-sm:   0.875rem;
    --text-base: 1.0625rem;
    --text-md:   1.25rem;
    --text-lg:   1.5rem;
    --text-xl:   1.95rem;
    --text-2xl:  2.4rem;
    --text-3xl:  3rem;
    --text-display:   clamp(2.9rem, 6vw + 1rem, 5.2rem);
    --text-display-s: clamp(2.1rem, 3.4vw + 1rem, 3.2rem);
    --text-quote:     clamp(1.8rem, 3.4vw + 1rem, 3rem);

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-short: 200ms;
    --dur-med:   360ms;
    --dur-draw:  900ms;

    --rule-hair: 1px;
    --radius-sm:   6px;
    --radius-card: 10px;

    --z-nav: 100;
    --z-overlay: 200;
    --z-banner: 300;

    --measure: 38rem;
    --wrap: 76rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
    overflow-x: clip;
    font-family: var(--font-body);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: var(--text-base);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    overflow-wrap: anywhere;
    min-width: 0;
}
p { overflow-wrap: break-word; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }

.kicker { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }
.standfirst { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); max-width: var(--measure); }

/* ===== Signature bloom mark ===== */
.bloom { color: var(--color-accent); display: block; }
.bloom svg { width: 100%; height: 100%; display: block; }
.divider { display: flex; align-items: center; justify-content: center; gap: var(--space-md); }
.divider::before, .divider::after { content: ""; height: var(--rule-hair); background: var(--color-rule); flex: 1; max-width: 16rem; }
.divider .bloom { width: 30px; height: 30px; color: var(--color-accent); opacity: 0.85; }

/* ===== Buttons / links ===== */
.btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); padding: 0.85rem 1.4rem; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-deep); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--color-ink); border: var(--rule-hair) solid var(--color-ink-2); }
.btn-secondary:hover { border-color: var(--color-ink); background: var(--color-paper-2); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.link-arrow span.line { display: inline-block; border-bottom: 1.5px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.link-arrow:hover span.line { border-color: var(--color-accent); }
.link-arrow .arr { transition: transform var(--dur-short) var(--ease-out); }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ===== N6 · Newspaper masthead ===== */
.masthead { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in oklch, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 3px double var(--color-rule); transition: box-shadow var(--dur-short) var(--ease-out); }
.masthead.scrolled { box-shadow: 0 1px 0 var(--color-rule), 0 8px 24px -18px var(--color-ink); }
.masthead-top { border-bottom: var(--rule-hair) solid var(--color-rule); }
.masthead-top .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-block: 0.45rem; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-muted); }
.masthead-top .places { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.masthead-top .places span { white-space: nowrap; }
.lang-switch a { color: var(--color-ink); text-decoration: none; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1.5px solid var(--color-accent); padding-bottom: 1px; }
.masthead-main .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 1.05rem; transition: padding-block var(--dur-short) var(--ease-out); }
.masthead.scrolled .masthead-main .wrap { padding-block: 0.7rem; }
.wordmark { text-decoration: none; display: flex; align-items: center; gap: 0.7rem; line-height: 1; }
.wordmark .wm-mark { width: 26px; height: 26px; color: var(--color-accent); flex: none; }
.wordmark .wm-text { display: flex; flex-direction: column; }
.wordmark .wm-name { font-family: var(--font-display); font-size: 1.42rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); }
.wordmark .wm-role { margin-top: 0.3rem; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--color-muted); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; }
.nav-links > li > a { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.01em; padding-block: 0.4rem; white-space: nowrap; border-bottom: 1.5px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--color-accent); border-color: var(--color-accent); }
.nav-links .btn-book { background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: 0.6rem 1.15rem; border-radius: var(--radius-sm); white-space: nowrap; border-bottom: none !important; transition: background-color var(--dur-short) var(--ease-out); }
.nav-links .btn-book:hover { background: var(--color-accent-deep); }
.nav-links .nav-lang { display: none; } /* lang switch lives in the topline on desktop; shown in the drawer ≤960 */
.nav-dropdown { position: relative; }
.dropdown-caret { font-size: 0.55em; opacity: 0.6; margin-left: 0.2rem; }
.dropdown-menu { position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 19rem; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); box-shadow: 0 18px 40px -26px var(--color-ink); padding: 0.5rem; list-style: none; opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu a { display: block; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-ink); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.dropdown-menu a:hover { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-toggle span { width: 24px; height: 2px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop { position: fixed; inset: 0; background: color-mix(in oklch, var(--color-ink) 40%, transparent); opacity: 0; visibility: hidden; z-index: calc(var(--z-nav) - 1); transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.nav-backdrop.active { opacity: 1; visibility: visible; }

/* ===== Hero — Marquee + HP1 vertical rail + bloom backdrop ===== */
.hero { position: relative; isolation: isolate; overflow: clip; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.hero .wrap { display: grid; grid-template-columns: auto 1.12fr 0.82fr; gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }
.hero-rail { writing-mode: vertical-rl; text-orientation: mixed; font-size: var(--text-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; align-self: stretch; padding-block: var(--space-2xs); border-left: var(--rule-hair) solid var(--color-rule); padding-left: 0.4rem; }
.hero-rail .dot-glyph { color: var(--color-accent); }
.bloom-hero { position: absolute; z-index: -1; top: 50%; right: -7%; width: clamp(22rem, 40vw, 38rem); aspect-ratio: 1; transform: translateY(-50%); color: var(--color-accent); opacity: 0.10; pointer-events: none; }
.status-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-2); }
.status-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }
.hero h1 { margin-top: var(--space-md); font-size: var(--text-display); font-weight: 340; letter-spacing: -0.03em; line-height: 1.0; }
.mark-word { position: relative; white-space: nowrap; color: var(--color-accent); }
.mark-word .ul { position: absolute; left: 0; right: 0; bottom: -0.12em; width: 100%; height: 0.32em; overflow: visible; color: var(--color-accent); }
.mark-word .ul path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero .hero-lede { margin-top: var(--space-md); font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); max-width: 34rem; }
.hero-actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-creds { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: var(--text-sm); color: var(--color-muted); }
.hero-creds a { color: var(--color-muted); text-decoration: none; border-bottom: 1px solid var(--color-rule); transition: color var(--dur-short) var(--ease-out); }
.hero-creds a:hover { color: var(--color-accent); }
.hero-creds .sep { color: var(--color-rule); }
.hero-visual { position: relative; }
.hero-visual .frame { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); box-shadow: 0 32px 60px -42px var(--color-ink); }
.hero-visual .frame::after { content: ""; position: absolute; inset: 0; border: var(--rule-hair) solid color-mix(in oklch, var(--color-ink) 14%, transparent); border-radius: inherit; pointer-events: none; }
.hero-visual img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-visual .caption { position: absolute; left: 0; bottom: 0; right: 0; padding: 1.1rem 1.2rem 1rem; background: linear-gradient(to top, color-mix(in oklch, var(--color-ink) 78%, transparent), transparent); color: var(--color-accent-ink); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

/* Orchestrated hero entrance */
.reveal-load > * { opacity: 0; transform: translateY(14px); animation: rise var(--dur-med) var(--ease-out) forwards; }
.reveal-load > *:nth-child(1) { animation-delay: 60ms; }
.reveal-load > *:nth-child(2) { animation-delay: 130ms; }
.reveal-load > *:nth-child(3) { animation-delay: 200ms; }
.reveal-load > *:nth-child(4) { animation-delay: 270ms; }
.reveal-load > *:nth-child(5) { animation-delay: 340ms; }
.hero-visual.reveal-late { opacity: 0; transform: translateY(14px); animation: rise var(--dur-med) var(--ease-out) 0.22s forwards; }
.bloom-hero { animation: bloom-fade 1.1s var(--ease-out) 0.3s both; }
.mark-word .ul path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw var(--dur-draw) var(--ease-out) 0.55s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes bloom-fade { from { opacity: 0; transform: translateY(-50%) scale(0.92) rotate(-6deg); } to { opacity: 0.10; transform: translateY(-50%) scale(1) rotate(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ===== Credentials strip ===== */
.creds-strip { border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.creds-strip .wrap { padding-block: var(--space-md); }
.creds-strip .eyebrow { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.9rem; }
.creds-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.3rem; list-style: none; font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); }
.creds-list li { display: inline-flex; align-items: baseline; gap: 1.3rem; }
.creds-list li::after { content: "·"; color: var(--color-accent); }
.creds-list li:last-child::after { content: ""; }
.creds-list a { text-decoration: none; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.creds-list a:hover { color: var(--color-accent); }

/* ===== Section scaffold ===== */
section { scroll-margin-top: 6.5rem; }
.section-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-2xl); font-weight: 400; }
.section-head .kicker { display: block; margin-bottom: var(--space-2xs); }
.section-head p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-md); }

/* ===== Services — editorial index ===== */
#services { padding-block: var(--space-3xl); }
.service-lead { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: end; background: var(--color-accent-soft); border-radius: var(--radius-card); padding: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: var(--space-xl); }
.service-lead .badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: var(--space-2xs); }
.service-lead h3 { font-size: var(--text-xl); font-weight: 400; }
.service-lead p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 44rem; }
.service-index { list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.service-index li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.service-index a { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding: var(--space-md) 0.4rem; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), padding-left var(--dur-short) var(--ease-out); }
.service-index a:hover { background: var(--color-paper-2); padding-left: 1rem; }
.service-index .s-name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.service-index .s-desc { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.service-index .s-go { color: var(--color-accent); font-size: var(--text-lg); transition: transform var(--dur-short) var(--ease-out); }
.service-index a:hover .s-go { transform: translateX(4px); }

/* ===== About — drop initial ===== */
#about { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-photo { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 30px 56px -42px var(--color-ink); }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-text h2 { font-size: var(--text-2xl); font-weight: 400; margin-top: var(--space-2xs); }
.about-text > p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: var(--measure); }
.about-text > p.lead-para::first-letter { font-family: var(--font-display); font-weight: 400; font-size: 3.6em; line-height: 0.72; float: left; padding: 0.06em 0.12em 0 0; color: var(--color-accent); }
.qual-list { margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); list-style: none; }
.qual-list li { display: flex; justify-content: space-between; gap: var(--space-md); padding: 0.85rem 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.qual-list .q-name { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); }
.qual-list .q-sub { font-size: var(--text-sm); color: var(--color-muted); text-align: right; }

/* ===== Approach — roman numerals ===== */
#approach { padding-block: var(--space-3xl); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-sm); }
.step { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }
.step .num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 340; color: var(--color-accent); line-height: 1; letter-spacing: 0.02em; }
.step h3 { font-size: var(--text-lg); font-weight: 500; margin-top: var(--space-sm); }
.step p { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }

/* ===== Community — ink feature spread ===== */
#community { padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-accent-ink); }
#community .kicker { color: color-mix(in oklch, var(--color-accent) 70%, white); }
.community-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.community-grid h2 { color: var(--color-accent-ink); font-size: var(--text-2xl); font-weight: 400; margin-top: var(--space-2xs); }
.community-grid p { margin-top: var(--space-md); color: color-mix(in oklch, var(--color-accent-ink) 82%, transparent); max-width: 34rem; }
.community-grid p strong { color: var(--color-accent-ink); font-weight: 600; }
#community .link-arrow { color: color-mix(in oklch, var(--color-accent) 72%, white); margin-top: var(--space-lg); }
#community .link-arrow:hover span.line { border-color: currentColor; }
.facts { list-style: none; display: grid; gap: var(--space-md); }
.facts li { border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-accent-ink) 26%, transparent); padding-top: var(--space-sm); }
.facts h4 { color: var(--color-accent-ink); font-size: var(--text-md); font-weight: 500; }
.facts p { margin-top: 0.3rem; font-size: var(--text-sm); color: color-mix(in oklch, var(--color-accent-ink) 72%, transparent); max-width: none; }

/* ===== Reviews — pull-quote feature ===== */
#reviews { padding-block: var(--space-3xl); }
.quote-feature { text-align: center; max-width: 52rem; margin: 0 auto var(--space-2xl); }
.quote-feature .bloom { width: 38px; height: 38px; margin: 0 auto var(--space-md); opacity: 0.9; }
.quote-feature blockquote { font-family: var(--font-display); font-size: var(--text-quote); font-weight: 340; line-height: 1.22; letter-spacing: -0.01em; color: var(--color-ink); }
.quote-feature figcaption { margin-top: var(--space-md); font-size: var(--text-sm); }
.quote-feature .name { font-weight: 600; }
.quote-feature .src { color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--text-xs); }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); max-width: 60rem; margin-inline: auto; }
.review { display: flex; flex-direction: column; }
.review .stars { color: var(--color-accent); letter-spacing: 0.15em; font-size: var(--text-sm); }
.review blockquote { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); margin-top: var(--space-sm); }
.review .by { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.review .by .name { font-weight: 600; font-size: var(--text-sm); }
.review .by .src { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.reviews-foot { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; justify-content: center; }

/* ===== Blog ===== */
#blog-preview { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.blog-list { list-style: none; border-top: 2px solid var(--color-ink); }
.blog-list li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.blog-list a { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding: var(--space-md) 0.4rem; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.blog-list a:hover { background: var(--color-paper-3); }
.blog-list .b-tag { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.blog-list .b-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); line-height: 1.2; }
.blog-list .b-excerpt { display: block; margin-top: 0.4rem; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.blog-list .b-date { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.blog-foot { margin-top: var(--space-xl); }

/* ===== Locations ===== */
#locations { padding-block: var(--space-3xl); }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.loc { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: clamp(1.4rem, 3vw, 2rem); }
.loc h3 { font-size: var(--text-lg); font-weight: 500; }
.loc .addr { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
.loc .tel { display: inline-block; margin-top: var(--space-2xs); color: var(--color-accent); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.loc .link-arrow { margin-top: var(--space-md); }
.insurance { margin-top: var(--space-xl); display: flex; gap: var(--space-sm); align-items: baseline; padding: var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-card); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }
.insurance strong { color: var(--color-ink); }

/* ===== Booking CTA ===== */
.cta { padding-block: var(--space-3xl); background: var(--color-accent-soft); }
.cta .wrap { max-width: 48rem; text-align: center; }
.cta h2 { font-size: var(--text-3xl); font-weight: 400; }
.cta p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-md); }
.cta-actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cta .tel-line { margin-top: var(--space-md); font-size: var(--text-sm); }
.cta .tel-line a { color: var(--color-accent-deep); text-decoration: none; font-weight: 600; }
.cta .fr-line { margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink-2); }

/* ===== Ft4 · Dense colophon ===== */
.colophon { background: var(--color-ink); color: color-mix(in oklch, var(--color-accent-ink) 80%, transparent); padding-block: var(--space-2xl); }
.colophon a { color: color-mix(in oklch, var(--color-accent-ink) 80%, transparent); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.colophon a:hover { color: var(--color-accent-ink); }
.colophon-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); }
.colophon .c-brand .c-mark { width: 30px; height: 30px; color: color-mix(in oklch, var(--color-accent) 70%, white); margin-bottom: var(--space-sm); }
.colophon .c-brand .wm-name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent-ink); }
.colophon .c-brand p { margin-top: var(--space-sm); font-size: var(--text-sm); max-width: 26rem; line-height: 1.6; }
.colophon h5 { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, var(--color-accent-ink) 56%, transparent); margin-bottom: var(--space-sm); font-family: var(--font-body); font-weight: 600; }
.colophon ul { list-style: none; display: grid; gap: 0.55rem; font-size: var(--text-sm); }
.colophon-bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-accent-ink) 22%, transparent); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); justify-content: space-between; align-items: center; font-size: var(--text-xs); color: color-mix(in oklch, var(--color-accent-ink) 60%, transparent); }
.colophon-bottom .social { display: flex; gap: 0.6rem; }
.colophon-bottom .social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: var(--rule-hair) solid color-mix(in oklch, var(--color-accent-ink) 30%, transparent); border-radius: 50%; font-weight: 600; font-size: var(--text-sm); transition: border-color var(--dur-short) var(--ease-out); }
.colophon-bottom .social a:hover { border-color: var(--color-accent-ink); }

/* ===== Mobile CTA bar ===== */
.mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav); background: color-mix(in oklch, var(--color-paper) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: var(--rule-hair) solid var(--color-rule); padding: 0.6rem clamp(1rem, 4vw, 1.5rem) calc(0.6rem + env(safe-area-inset-bottom)); gap: 0.6rem; }
.mobile-cta-bar a { flex: 1; text-align: center; text-decoration: none; font-weight: 600; font-size: var(--text-sm); border-radius: var(--radius-sm); padding: 0.85rem 0.5rem; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.mobile-cta-bar .cta-book { background: var(--color-accent); color: var(--color-accent-ink); flex: 2; }
.mobile-cta-bar .cta-call { border: var(--rule-hair) solid var(--color-ink-2); color: var(--color-ink); }

/* ===== Cookie banner ===== */
.cookie-banner { display: none; position: fixed; bottom: var(--space-md); left: 50%; transform: translateX(-50%); width: min(92%, 42rem); z-index: var(--z-banner); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); box-shadow: 0 22px 50px -28px var(--color-ink); padding: var(--space-md); }
.cookie-banner.show { display: block; }
.cookie-banner p { font-size: var(--text-sm); color: var(--color-ink-2); }
.cookie-banner p a { color: var(--color-accent); }
.cookie-banner-buttons { margin-top: var(--space-sm); display: flex; gap: 0.6rem; }
.cookie-btn-accept, .cookie-btn-decline { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-sm); padding: 0.6rem 1rem; cursor: pointer; border: var(--rule-hair) solid transparent; }
.cookie-btn-accept { background: var(--color-accent); color: var(--color-accent-ink); }
.cookie-btn-decline { background: transparent; border-color: var(--color-rule); color: var(--color-ink-2); }

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .nav-links { position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 22rem); flex-direction: column; align-items: flex-start; gap: 0.4rem; background: var(--color-paper); padding: 5rem var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom)); transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out); overflow-y: auto; box-shadow: -20px 0 50px -30px var(--color-ink); z-index: calc(var(--z-nav) + 1); }
    .nav-links.open { transform: translateX(0); }
    .nav-links > li { width: 100%; }
    .nav-links > li > a { display: block; width: 100%; font-size: var(--text-md); padding-block: 0.7rem; }
    .nav-links .btn-book { display: inline-block; margin-top: var(--space-sm); }
    .nav-links .nav-lang { display: block; }
    /* toggle stays clickable above the open drawer — it morphs into the ✕ */
    .mobile-toggle { display: flex; position: relative; z-index: calc(var(--z-nav) + 2); }
    /* drawer open: lock page scroll, clear the bottom CTA bar */
    body:has(.nav-links.open) { overflow: hidden; }
    body:has(.nav-links.open) .mobile-cta-bar { display: none; }
    .dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; min-width: 0; padding: 0 0 0 var(--space-sm); max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-out); }
    .nav-dropdown.accordion-open .dropdown-menu { max-height: 40rem; }
    .hero .wrap { grid-template-columns: 1fr; }
    .hero-rail { writing-mode: horizontal-tb; border-left: none; border-bottom: var(--rule-hair) solid var(--color-rule); padding-left: 0; padding-bottom: var(--space-sm); letter-spacing: 0.2em; }
    .bloom-hero { right: -22%; opacity: 0.07; }
    .about-grid, .community-grid, .loc-grid { grid-template-columns: 1fr; }
    .hero-visual { max-width: 26rem; }
    .colophon-top { grid-template-columns: 1fr 1fr; }
    .mobile-cta-bar { display: flex; }
    body { padding-bottom: 4.5rem; }
}
@media (max-width: 640px) {
    /* Hero: the headline and booking CTA must sit in the first viewport */
    .hero { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
    .hero-rail { display: none; }
    .hero h1 { font-size: var(--text-display-s); margin-top: var(--space-sm); }
    .hero .hero-lede { font-size: 1.125rem; line-height: 1.5; }
    .hero-creds { margin-top: var(--space-md); }
    .service-lead { grid-template-columns: 1fr; }
    /* Keep the service descriptions — mobile readers get the same persuasion,
       clamped to two lines so the index stays scannable */
    .service-index a { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-sm); row-gap: 0.3rem; }
    .service-index .s-name { grid-area: 1 / 1; }
    .service-index .s-go { grid-area: 1 / 2; }
    .service-index .s-desc { grid-area: 2 / 1 / 3 / 3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .steps { grid-template-columns: 1fr; gap: var(--space-md); }
    .qual-list li { flex-direction: column; gap: 0.2rem; }
    .qual-list .q-sub { text-align: left; }
    .reviews-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .blog-list a { grid-template-columns: 1fr auto; }
    .blog-list .b-tag { display: none; }
    .colophon-top { grid-template-columns: 1fr; gap: var(--space-md); }

    /* Compact one-line masthead: the topline moves into the drawer (lang)
       and the role line yields to the wordmark. Chrome ≤ ~64px. */
    .masthead-top { display: none; }
    .masthead-main .wrap { padding-block: 0.7rem; gap: 0.4rem; }
    .masthead.scrolled .masthead-main .wrap { padding-block: 0.55rem; }
    .wordmark { gap: 0.45rem; }
    .wordmark .wm-mark { width: 21px; height: 21px; }
    .wordmark .wm-name { font-size: clamp(0.8rem, 4vw, 1.05rem); white-space: nowrap; }
    .wordmark .wm-role { display: none; }
}
@media (max-width: 960px) {
    /* anchor jumps across a very long page are disorienting when animated */
    html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
    .hero-creds .sep { display: none; } /* separators orphan when the list wraps */
}
@media (pointer: coarse) {
    /* 44px hit areas without changing visual rhythm */
    .colophon ul a, .colophon-bottom a, .hero-creds a, .link-arrow, .loc .tel,
    .creds-list a, .cta .tel-line a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
    .link-arrow { display: inline-flex; }
    .wordmark { padding-block: 0.5rem; margin-block: -0.5rem; }
    .mobile-toggle { padding: 12px 8px; margin-block: -4px; }
    /* tactile press feedback */
    .btn:active, .mobile-cta-bar a:active, .nav-links .btn-book:active { transform: scale(0.985); }
    .nav-links > li > a:active, .dropdown-menu a:active { color: var(--color-accent); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .reveal-load > *, .hero-visual.reveal-late { opacity: 1; transform: none; }
    .bloom-hero { opacity: 0.10; transform: translateY(-50%); }
    .mark-word .ul path { stroke-dashoffset: 0; }
}