/*
 * SERA'S CUT / Friseur Sera — dark-editorial design system (mockup-fidelity rebuild).
 * Loaded after main.css. New `fsr-*` component classes (no conflict with base).
 * Language: near-black bands + ivory editorial sections, Cormorant serif + Pinyon
 * script, gold (#C6A15B) accents, photography-forward, no card clutter.
 */

:root {
  --fsr-black: #100d0b;
  --fsr-black-2: #171310;
  --fsr-ivory: #f4efe7;
  --fsr-ivory-2: #ece3d3;
  --fsr-gold: var(--dac-rose, #c6a15b);
  --fsr-gold-deep: #b08d46;
  --fsr-gold-ink: var(--dac-gold-ink, #6e5411);
  --fsr-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --fsr-serif-2: 'Cormorant Garamond', Georgia, serif;
  --fsr-script: 'Pinyon Script', 'Cormorant Garamond', cursive;
  --fsr-sans: 'InterVar', -apple-system, 'Segoe UI', sans-serif;
  /* ============================================================
     AUTHORITATIVE LAYOUT GRID — single source of truth for the whole site.
     Every constrained container (.fsr-wrap AND the legacy .wrap used by the
     CPT-single / archive / blog / search templates) and every full-bleed
     split-section text column resolves its content edges from these three
     tokens, so header, sections, CTA bands and footer share ONE rail.
       --fsr-layout-max : the one content max-width
       --fsr-layout-pad : the one gutter
       --fsr-layout-edge: the rail x (where constrained content begins);
                          full-bleed split columns pin their page-edge side here
       --fsr-layout-wide: intentional full-bleed backgrounds/media only
     ============================================================ */
  --fsr-layout-max: 1240px;
  --fsr-layout-pad: 32px;
  --fsr-layout-edge: max(var(--fsr-layout-pad), calc((100vw - var(--fsr-layout-max)) / 2 + var(--fsr-layout-pad)));
  --fsr-layout-wide: 100vw;
  /* Back-compat aliases — existing rules keep working; all derive from the tokens above. */
  --fsr-wrap: var(--fsr-layout-max);
  --fsr-pad: var(--fsr-layout-pad);
  --fsr-headh: 88px;
  --fsr-edge: var(--fsr-layout-edge);
}

body { background: var(--fsr-ivory); }
.fsr-wrap { max-width: var(--fsr-wrap); margin: 0 auto; padding: 0 var(--fsr-pad); }
@media (max-width: 640px){ :root { --fsr-layout-pad: 20px; } }
/* Full-bleed split sections: pin the first text column's left + last text column's
   right to the shared rail so their content lines up with every .fsr-wrap section. */
.fsr-edge-l { padding-left: var(--fsr-edge); }
.fsr-edge-r { padding-right: var(--fsr-edge); }

/* ---------- Kicker / headings ---------- */
.fsr-kicker { display:inline-flex; align-items:center; gap:14px; font-family:var(--fsr-sans);
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--fsr-gold-ink); margin:0 0 18px; }
.fsr-kicker::after { content:""; width:46px; height:1px; background:var(--fsr-gold); display:inline-block; }
.fsr-kicker--center { justify-content:center; }
.fsr-serif { font-family:var(--fsr-serif); font-weight:500; line-height:1.06; letter-spacing:.002em; }
.fsr-script { font-family:var(--fsr-script); font-weight:400; color:var(--fsr-gold); line-height:1; }
.fsr-h1 { font-family:var(--fsr-serif); font-weight:500; font-size:clamp(44px,6vw,86px); line-height:1.04; letter-spacing:.002em; margin:0; }
.fsr-h2 { font-family:var(--fsr-serif); font-weight:500; font-size:clamp(30px,3.6vw,46px); line-height:1.06; margin:0; }
.fsr-lead { font-family:var(--fsr-sans); font-size:clamp(15px,1.15vw,17px); line-height:1.7; }

/* dark scopes: gold accents flip bright, text light */
.fsr-band, .fsr-header, .fsr-footer, .fsr-hero, .fsr-onDark { color:#f3ede3; }
/* main.css forces h1,h2,h3 {color:--dac-ink}; on dark bands headings must be light. */
.fsr-band :is(h1,h2,h3,.fsr-h1,.fsr-h2,.fsr-serif),
.fsr-hero :is(h1,.fsr-h1),
.fsr-onDark :is(h1,h2,h3,.fsr-h1,.fsr-h2) { color:#f6f0e6; }
.fsr-band .fsr-kicker, .fsr-hero .fsr-kicker, .fsr-footer .fsr-kicker, .fsr-onDark .fsr-kicker { color:var(--fsr-gold); }
.fsr-band .fsr-kicker::after, .fsr-hero .fsr-kicker::after, .fsr-onDark .fsr-kicker::after { background:var(--fsr-gold); }

/* ---------- Buttons ---------- */
.fsr-btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--fsr-sans); font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:15px 26px; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:.22s ease; }
/* Short single-label CTAs must never wrap the trailing arrow to a second line
   (the header CTA and the narrow footer "Ihr Termin" box). Long descriptive
   buttons keep their default wrapping so they don't overflow on 320px. */
.fsr-header__cta, .fsr-footer__box .fsr-btn { white-space:nowrap; }
.fsr-btn--gold { background:var(--fsr-gold); color:#171310; }
.fsr-btn--gold:hover { background:var(--fsr-gold-deep); color:#100d0b; }
.fsr-btn--ghost { background:transparent; border-color:rgba(198,161,91,.55); color:var(--fsr-gold); }
.fsr-btn--ghost:hover { background:rgba(198,161,91,.12); color:var(--fsr-gold); }
.fsr-btn--dark { background:transparent; border-color:rgba(20,17,14,.28); color:var(--fsr-gold-ink); }
.fsr-btn--dark:hover { border-color:var(--fsr-gold); color:var(--fsr-gold-ink); }
.fsr-link { font-family:var(--fsr-sans); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fsr-gold-ink); border-bottom:1px solid var(--fsr-gold); padding-bottom:3px; }
.fsr-onDark .fsr-link, .fsr-band .fsr-link { color:var(--fsr-gold); }

/* ---------- Header ---------- */
.fsr-header { position:sticky; top:0; z-index:60; background:var(--fsr-black); border-bottom:1px solid rgba(198,161,91,.18); }
.fsr-header__in { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:var(--fsr-headh); }
.fsr-brand { display:flex; flex-direction:column; align-items:flex-start; line-height:1; text-decoration:none; flex-shrink:0; }
.fsr-brand__word { font-family:var(--fsr-serif); font-weight:600; font-size:26px; letter-spacing:.14em; color:#fff; text-transform:uppercase; }
.fsr-brand__script { display:flex; align-items:center; gap:10px; margin-top:3px; white-space:nowrap; }
.fsr-brand__script::before, .fsr-brand__script::after { content:""; height:1px; width:20px; background:var(--fsr-gold); }
.fsr-brand__script span { font-family:var(--fsr-script); font-size:20px; color:var(--fsr-gold); }
.fsr-brand__logo { max-height:52px; width:auto; }
.fsr-nav { display:flex; align-items:center; gap:24px; }
.fsr-nav a { font-family:var(--fsr-sans); font-size:13px; font-weight:500; letter-spacing:.06em; color:rgba(243,237,227,.86); text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.fsr-nav a:hover, .fsr-nav .current-menu-item > a { color:#fff; border-bottom-color:var(--fsr-gold); }
/* Current page — restrained gold hairline. The header keeps one visual state
   on scroll (JS only adds a box-shadow), so no scrolled-variant override is
   needed for the marker to stay legible. */
.fsr-nav a.is-active { color:#fff; border-bottom-color:var(--fsr-gold); }
.fsr-header__cta { display:inline-flex; }
.fsr-burger { display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.fsr-burger span { width:24px; height:2px; background:var(--fsr-gold); display:block; }

/* ---------- Premium mobile drawer (WEPRO Reparatur-Berlin pattern) ---------- */
.fsr-drawer { position:fixed; inset:0 0 0 auto; z-index:100000000; width:min(90vw,380px); transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.fsr-drawer.is-open { transform:none; }
.fsr-drawer__panel { position:absolute; inset:0; background:var(--fsr-black); display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.fsr-drawer__head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid rgba(198,161,91,.18); position:sticky; top:0; background:var(--fsr-black); z-index:2; }
.fsr-drawer__brand { display:flex; flex-direction:column; gap:2px; line-height:1; }
.fsr-drawer__word { font-family:var(--fsr-serif); font-weight:600; font-size:19px; letter-spacing:.13em; color:#fff; text-transform:uppercase; }
.fsr-drawer__script { font-family:var(--fsr-script); font-size:16px; color:var(--fsr-gold); }
.fsr-drawer__close { flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(198,161,91,.1); border:1px solid rgba(198,161,91,.3); border-radius:8px; color:var(--fsr-gold); cursor:pointer; }
.fsr-drawer__close:hover { background:rgba(198,161,91,.2); }
.fsr-drawer__nav { padding:10px 16px 4px; }
.fsr-drawer__link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 8px; color:#f3ede3; font-family:var(--fsr-sans); font-size:16px; letter-spacing:.04em; border-bottom:1px solid rgba(255,255,255,.07); text-decoration:none; min-height:48px; }
.fsr-drawer__link:hover { color:var(--fsr-gold); }
.fsr-drawer__link.is-active { color:var(--fsr-gold); box-shadow:inset 2px 0 0 var(--fsr-gold); padding-left:14px; }
.fsr-drawer__chev { color:var(--fsr-gold); opacity:.55; display:inline-flex; }
.fsr-drawer__foot { padding:18px 16px 26px; margin-top:auto; }
.fsr-lang--drawer { margin:6px 0 18px; }
.fsr-drawer__contact { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.fsr-drawer__row { display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid rgba(198,161,91,.26); border-radius:10px; background:rgba(255,255,255,.02); color:#f3ede3; text-decoration:none; min-height:56px; }
.fsr-drawer__row:hover { border-color:rgba(198,161,91,.5); background:rgba(198,161,91,.05); }
.fsr-drawer__row--static { cursor:default; }
.fsr-drawer__ic { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(198,161,91,.4); display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); }
.fsr-drawer__rt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fsr-drawer__rt small { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,237,227,.5); }
.fsr-drawer__rt strong { font-family:var(--fsr-sans); font-size:14.5px; font-weight:600; color:#f3ede3; line-height:1.35; word-break:break-word; }
.fsr-drawer__cta { width:100%; justify-content:center; }
.fsr-drawer__note { margin:16px 2px 0; font-size:13px; line-height:1.6; color:rgba(243,237,227,.55); }
.fsr-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99999997; opacity:0; visibility:hidden; transition:.3s; }
.fsr-backdrop.is-open { opacity:1; visibility:visible; }
body.fsr-drawer-open { overflow:hidden; }

/* ---------- Language switcher (premium; GTranslate dropdown, dark/gold) ---------- */
.fsr-lang { display:inline-flex; align-items:center; }
.fsr-lang .gtranslate_wrapper, .fsr-lang > div { display:inline-flex; }
.fsr-lang select, .fsr-lang .gt_selector, .fsr-lang .goog-te-combo {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; color:#f3ede3; border:1px solid rgba(198,161,91,.45); border-radius:2px;
  font-family:var(--fsr-sans); font-size:12.5px; letter-spacing:.05em; padding:8px 30px 8px 12px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
.fsr-lang select:hover, .fsr-lang .goog-te-combo:hover { border-color:var(--fsr-gold); }
.fsr-lang select option { color:#171310; background:#fff; }
.fsr-header .fsr-lang { margin-right:4px; }
.fsr-lang--drawer select, .fsr-lang--drawer .goog-te-combo { width:100%; font-size:14px; padding:12px 34px 12px 14px; min-height:46px; }
/* The German nav (8 items) + brand + Deutsch selector + CTA only fit on one row
   above ~1200px; below that the whole set collapses to the premium burger/drawer
   (which carries the nav, language switcher and contact). One clean breakpoint —
   avoids the brand wordmark being squeezed into two lines. */
@media (max-width:1200px){
  .fsr-header .fsr-lang { display:none; }
  .fsr-nav, .fsr-header__cta { display:none; }
  .fsr-burger { display:flex; }
}
/* Kill any GTranslate floating widget that might slip through */
.gtranslate_wrapper[style*="position: fixed"], #gt_float_wrapper, .gt_float_switcher { display:none !important; }

/* ---------- Sections ---------- */
.fsr-section { padding:96px 0; background:var(--fsr-ivory); }
.fsr-section--cream { background:var(--fsr-ivory-2); }
.fsr-band { padding:96px 0; background:var(--fsr-black); }
.fsr-band--2 { background:var(--fsr-black-2); }
.fsr-sechead { max-width:640px; }
.fsr-sechead--center { margin:0 auto; text-align:center; }
@media (max-width:760px){ .fsr-section,.fsr-band{ padding:64px 0; } }

/* ---------- Hero (full-bleed split) ---------- */
.fsr-hero { position:relative; background:var(--fsr-black); display:grid; grid-template-columns:1fr 1fr; min-height:clamp(620px,86vh,880px); }
.fsr-hero__media { position:relative; overflow:hidden; }
.fsr-hero__media img { width:100%; height:100%; object-fit:cover; display:block; }
.fsr-hero__text { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding-left:var(--fsr-edge); padding-right:32px; max-width:56%; z-index:2; }
.fsr-hero__media--left::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,13,11,.92) 0%, rgba(16,13,11,.55) 55%, rgba(16,13,11,0) 100%); }
.fsr-hero .fsr-h1 { color:#fff; margin:0 0 18px; }
.fsr-hero__lead { color:rgba(243,237,227,.85); max-width:30em; margin:0 0 30px; font-size:17px; line-height:1.7; }
.fsr-hero__actions { display:flex; gap:14px; flex-wrap:wrap; }

/* Inner-page dark hero (kicker + title + lead + side image) */
.fsr-phero { position:relative; background:var(--fsr-black); display:grid; grid-template-columns:1.05fr .95fr; min-height:clamp(360px,44vh,480px); overflow:hidden; }
.fsr-phero__text { display:flex; flex-direction:column; justify-content:center; padding:56px 40px 56px var(--fsr-edge); z-index:2; }
.fsr-phero__text .fsr-h1 { color:#fff; }
.fsr-phero__lead { color:rgba(243,237,227,.82); margin-top:18px; max-width:34em; }
.fsr-phero__rule { width:64px; height:2px; background:var(--fsr-gold); margin:22px 0 0; }
.fsr-phero__media { position:relative; }
.fsr-phero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fsr-phero__media::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, var(--fsr-black) 0%, rgba(16,13,11,.15) 45%, transparent 100%); }
.fsr-crumbs { font-family:var(--fsr-sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(243,237,227,.55); margin-bottom:16px; }
.fsr-crumbs a { color:rgba(243,237,227,.7); } .fsr-crumbs a:hover{ color:var(--fsr-gold); }

/* ---------- Homepage: signature services ---------- */
.fsr-svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:44px; }
.fsr-svc { display:flex; flex-direction:column; }
.fsr-svc__media { aspect-ratio:3/4; overflow:hidden; margin-bottom:20px; }
.fsr-svc__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.fsr-svc:hover .fsr-svc__media img { transform:scale(1.04); }
.fsr-svc__title { font-family:var(--fsr-serif); font-size:22px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; color:var(--fsr-black); }
.fsr-svc__desc { font-size:14.5px; color:#5a5148; line-height:1.6; margin:0 0 12px; }
.fsr-svc__price { font-family:var(--fsr-sans); font-weight:700; color:var(--fsr-black); font-size:15px; }
.fsr-svc__price b { color:var(--fsr-gold-ink); }
.fsr-center { text-align:center; margin-top:48px; }

/* ---------- LOOKS before/after band ---------- */
.fsr-looks__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.fsr-looks__head h2 { font-family:var(--fsr-serif); font-size:clamp(30px,3.4vw,42px); color:#fff; margin:0; display:flex; align-items:baseline; gap:22px; }
.fsr-looks__head span { font-family:var(--fsr-sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--fsr-gold); }
.fsr-looks__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:38px; }
.fsr-look { position:relative; border:1px solid rgba(198,161,91,.35); aspect-ratio:1/1; overflow:hidden; display:block; }
.fsr-look img { width:100%; height:100%; object-fit:cover; }
.fsr-look__arrow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:var(--fsr-gold); color:#171310; display:flex; align-items:center; justify-content:center; font-size:16px; z-index:2; }

/* ---------- Sera 3-panel (full-bleed; photo left, ivory text, gold mark right) ---------- */
.fsr-sera { display:grid; grid-template-columns:0.9fr 1.15fr 0.75fr; align-items:stretch; }
.fsr-sera__photo { position:relative; min-height:520px; }
.fsr-sera__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fsr-sera__text { background:var(--fsr-ivory); padding:clamp(40px,4.5vw,72px) clamp(36px,4vw,64px); display:flex; flex-direction:column; justify-content:center; }
.fsr-sera__text h2 { font-family:var(--fsr-serif); font-size:clamp(30px,3vw,40px); color:var(--fsr-black); margin:0 0 18px; }
.fsr-sera__text p { color:#5a5148; line-height:1.75; margin:0 0 26px; }
.fsr-sera__mark { background:var(--fsr-black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:40px; text-align:center; }
.fsr-sera__mark svg { width:66px; height:66px; }
.fsr-sera__mark span { font-family:var(--fsr-sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--fsr-gold); line-height:1.9; }

/* ---------- Testimonials ---------- */
.fsr-quotes { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:54px; }
.fsr-quote { padding:6px 36px; border-left:1px solid rgba(198,161,91,.26); display:flex; flex-direction:column; }
.fsr-quote:first-child { border-left:0; }
.fsr-quote__mark { font-family:var(--fsr-serif); font-size:46px; line-height:.5; color:var(--fsr-gold); opacity:.92; margin-bottom:4px; }
.fsr-quote p { font-family:var(--fsr-serif-2); font-style:italic; font-size:18px; line-height:1.62; color:#eadfce; margin:12px 0 22px; flex:1; }
.fsr-quote cite { font-family:var(--fsr-sans); font-style:normal; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--fsr-gold); display:inline-flex; align-items:center; gap:11px; }
.fsr-quote cite::before { content:""; width:24px; height:1px; background:var(--fsr-gold); display:inline-block; flex:0 0 auto; }

/* ---------- Visit (3-col; outer text columns aligned to the shared rail) ---------- */
/* Text columns lead; the image is the quieter middle note (was 1fr 1.1fr 1fr,
   which let the photo out-measure both text columns). */
.fsr-visit { display:grid; grid-template-columns:1.12fr 0.86fr 1.12fr; gap:0; align-items:stretch; }
.fsr-visit__col { padding:clamp(40px,4vw,64px) clamp(34px,3.2vw,52px); }
.fsr-visit__col:first-child { padding-left:var(--fsr-edge); }
.fsr-visit__col:last-child { padding-right:var(--fsr-edge); }
.fsr-visit__col--mid { padding:0; position:relative; min-height:380px; }
.fsr-visit__col--mid img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fsr-visit h3 { font-family:var(--fsr-serif); font-size:26px; color:var(--fsr-black); margin:0 0 20px; }
.fsr-contactline { display:flex; align-items:center; gap:14px; margin:14px 0; color:var(--fsr-black); font-size:15px; line-height:1.45; }
.fsr-contactline .ic { width:40px; height:40px; border-radius:50%; border:1px solid var(--fsr-gold); display:flex; align-items:center; justify-content:center; color:var(--fsr-gold-ink); flex:0 0 auto; }
/* Inline SVG replaces the old unicode glyphs — block removes the baseline gap
   that made the mark sit low inside the circle. */
.fsr-contactline .ic svg { display:block; width:18px; height:18px; }
.fsr-contactline small { display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#8a7f70; margin-bottom:2px; }
.fsr-hours { width:100%; border-collapse:collapse; }
.fsr-hours td { padding:12px 0; border-bottom:1px solid rgba(20,17,14,.1); font-size:14px; line-height:1.5; vertical-align:baseline; }
/* Day never collides with time: the value column keeps its own track. */
.fsr-hours td:first-child { padding-right:16px; white-space:nowrap; }
.fsr-hours td:last-child { text-align:right; font-weight:600; white-space:nowrap; width:1%; font-variant-numeric:tabular-nums; }
.fsr-hours tr:last-child td { border-bottom:0; }

/* ---------- Footer ---------- */
.fsr-footer { background:var(--fsr-black); padding:72px 0 30px; }
.fsr-footer__grid { display:grid; grid-template-columns:1.5fr .9fr .9fr .9fr 1.25fr; gap:38px; }
.fsr-footer__brandword { font-family:var(--fsr-serif); font-weight:600; font-size:24px; letter-spacing:.14em; color:#fff; text-transform:uppercase; }
.fsr-footer__script { font-family:var(--fsr-script); font-size:19px; color:var(--fsr-gold); }
.fsr-footer p, .fsr-footer address { color:rgba(243,237,227,.6); font-size:14px; font-style:normal; line-height:1.8; margin:14px 0 0; }
.fsr-footer h4 { font-family:var(--fsr-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--fsr-gold); margin:0 0 16px; }
/* Accordion column heading — a real button (a11y). Desktop: looks like a heading,
   panel always open. Mobile (<=760px): tap to expand/collapse. */
.fsr-footer__acc { display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:0; padding:0; margin:0 0 16px; cursor:default;
  font-family:var(--fsr-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--fsr-gold); text-align:left; }
.fsr-footer__acc-ic { display:none; }
.fsr-footer__nav a { display:block; color:rgba(243,237,227,.72); font-size:14px; padding:6px 0; }
.fsr-footer__nav a:hover { color:var(--fsr-gold); }
.fsr-footer__social { display:flex; gap:12px; margin-top:18px; }
.fsr-footer__social a { width:38px; height:38px; border:1px solid rgba(198,161,91,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); }
.fsr-footer__box { border:1px solid rgba(198,161,91,.4); padding:24px; }
.fsr-footer__box .fsr-script { font-size:22px; display:block; margin-bottom:8px; }
.fsr-footer__legal { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); color:rgba(243,237,227,.5); font-size:13px; }
.fsr-footer__legal a { color:rgba(243,237,227,.6); margin-left:18px; } .fsr-footer__legal a:hover{ color:var(--fsr-gold); }

/* ---------- Mobile bottom bar (elevated center action — Medilase pattern) ---------- */
.fsr-botbar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:55; background:var(--fsr-black); border-top:1px solid rgba(198,161,91,.25); padding-bottom:env(safe-area-inset-bottom,0); align-items:flex-end; }
.fsr-botbar a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; padding:9px 4px 10px; color:rgba(243,237,227,.78); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; min-height:56px; }
.fsr-botbar a .ic { display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); line-height:1; }
.fsr-botbar a .ic svg { display:block; }
.fsr-botbar a[aria-current="page"] { color:#fff; }
.fsr-botbar a[aria-current="page"] .ic { color:var(--fsr-gold); }
/* Center CTA: elevated gold pill that lifts above the bar. */
.fsr-botbar a.fsr-botbar__cta { position:relative; flex:0 0 auto; margin:0 6px; transform:translateY(-16px);
  background:var(--fsr-gold); color:#171310; border-radius:16px; padding:12px 20px 10px; min-width:78px;
  box-shadow:0 10px 22px -8px rgba(176,141,70,.7); border:3px solid var(--fsr-black); font-weight:700; letter-spacing:.08em; }
.fsr-botbar a.fsr-botbar__cta .ic { color:#171310; }
.fsr-botbar a.fsr-botbar__cta:hover { background:var(--fsr-gold-deep); }

/* Keep the floating accessibility launcher from covering the open mobile menu
   (WCAG/§5.6: the a11y widget must not sit over navigation). It shares the
   drawer's stacking level, so while the drawer is open we take it out of the
   way; it returns the moment the drawer closes. No plugin edit (GOD-ISO). */
body.fsr-drawer-open #wepro-accessibility-widget { opacity:0; visibility:hidden; pointer-events:none; }

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .fsr-svc-grid,.fsr-looks__grid,.fsr-quotes { grid-template-columns:repeat(2,1fr); }
  .fsr-quote{ border-left:0; padding:0; }
  .fsr-quotes{ gap:34px; }
  .fsr-sera{ grid-template-columns:1fr 1fr; } .fsr-sera__mark{ display:none; }
  .fsr-visit{ grid-template-columns:1fr; } .fsr-visit__col--mid{ min-height:280px; order:-1; }
  .fsr-footer__grid{ grid-template-columns:1fr 1fr; }
  .fsr-footer__grid > :first-child{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .fsr-hero{ grid-template-columns:1fr; min-height:0; }
  .fsr-hero__media--right{ display:none; }
  .fsr-hero__text{ position:static; max-width:100%; padding:56px 24px 64px; }
  .fsr-hero__media--left::after{ background:linear-gradient(180deg, rgba(16,13,11,.35), rgba(16,13,11,.9)); }
  .fsr-phero{ grid-template-columns:1fr; }
  .fsr-phero__media{ display:none; }
  .fsr-sera{ grid-template-columns:1fr; } .fsr-sera__photo{ min-height:360px; }
  .fsr-botbar{ display:flex; }
  body.fsr-hasbotbar{ padding-bottom:60px; }
}
/* ---------- Mobile footer accordion (§5.2) ---------- */
@media (max-width:760px){
  .fsr-footer__grid{ grid-template-columns:1fr; gap:0; }
  .fsr-footer__grid > :first-child{ grid-column:auto; padding-bottom:26px; }
  .fsr-footer__col--acc{ border-top:1px solid rgba(255,255,255,.1); }
  .fsr-footer__acc{ cursor:pointer; padding:18px 0; margin:0; }
  .fsr-footer__acc-ic{ display:block; position:relative; width:14px; height:14px; flex:0 0 auto; }
  .fsr-footer__acc-ic::before,.fsr-footer__acc-ic::after{ content:""; position:absolute; background:var(--fsr-gold); transition:transform .22s ease; }
  .fsr-footer__acc-ic::before{ top:6px; left:0; width:14px; height:2px; }
  .fsr-footer__acc-ic::after{ left:6px; top:0; width:2px; height:14px; }
  .fsr-footer__col--acc.is-open .fsr-footer__acc-ic::after{ transform:scaleY(0); }
  .fsr-footer__col--acc .fsr-footer__nav{ overflow:hidden; max-height:0; transition:max-height .28s ease; }
  .fsr-footer__col--acc.is-open .fsr-footer__nav{ max-height:340px; }
  .fsr-footer__col--acc .fsr-footer__nav a{ padding:10px 0; }
  .fsr-footer__col--acc .fsr-footer__nav a:last-child{ padding-bottom:18px; }
  /* the always-visible IHR-TERMIN + contact column keeps a top divider too */
  .fsr-footer__grid > :last-child{ border-top:1px solid rgba(255,255,255,.1); padding-top:26px; margin-top:6px; }
}
@media (max-width:640px){
  .fsr-svc-grid,.fsr-looks__grid,.fsr-quotes{ grid-template-columns:1fr; }
  .fsr-svc__media{ aspect-ratio:4/5; }
}

/* ---------- Fable fidelity pass (round 3) ---------- */
.fsr-look img { width:100%; height:100%; object-fit:cover; }
.fsr-sera__mark svg { width:112px; height:112px; }
.fsr-sera__mark::after { content:""; width:44px; height:1px; background:var(--fsr-gold); display:block; }
.fsr-quotes__title { display:block; text-align:center; font-family:var(--fsr-sans); font-size:15px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:#f3ede3; margin:0 0 8px; }
.fsr-quotes__title + .fsr-kicker { display:none; }
/* Address stays serif and elegant, one step quieter with more air. */
.fsr-visit__col h3.fsr-serif { font-size:clamp(24px,1.9vw,29px); line-height:1.32; letter-spacing:.005em; margin-bottom:26px; }
.fsr-footer__social a svg { width:16px; height:16px; display:block; }
.fsr-svc__title { letter-spacing:.14em; font-weight:500; }
.fsr-hero__lead { font-size:16.5px; }
@media (min-width:861px){ .fsr-hero__text{ max-width:52%; } }
.fsr-hero .fsr-h1 { font-size:clamp(42px,4.6vw,64px); }
.fsr-quote { padding:0 26px; }
.fsr-quote p { font-size:14px; line-height:1.8; }
.fsr-looks__head h2 { text-transform:uppercase; letter-spacing:.05em; font-size:clamp(32px,3.6vw,46px); }
.fsr-svc__price { color:#5a5148; font-weight:400; }
.fsr-svc__price b { color:var(--fsr-black); font-weight:700; }
/* Accessibility skip-link (wepro-accessibility): brand it — gold on near-black, AA-safe */
.wepro-acc-skip-link { background:var(--fsr-gold); color:#171310; font-family:var(--fsr-sans); }

/* ---------- 404 (dark editorial) ---------- */
.nf { min-height:60vh; }
.nf__head { max-width:660px; }
.nf__code { display:block; font-size:clamp(80px,10vw,140px); color:var(--fsr-gold); line-height:1; }
.nf__title { font-size:clamp(30px,4vw,48px); color:#f6f0e6; margin:14px 0 16px; }
.nf__lead { color:rgba(243,237,227,.78); line-height:1.75; margin:0 0 26px; }
.nf__actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.nf__search { display:flex; flex-wrap:wrap; gap:10px; max-width:480px; }
.nf__search input { flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(198,161,91,.4); border-radius:2px; color:#f3ede3; padding:13px 15px; font-family:var(--fsr-sans); font-size:15px; }
.nf__search input:focus { border-color:var(--fsr-gold); outline:none; box-shadow:0 0 0 1px var(--fsr-gold); }
.nf__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
.nf__card { position:relative; border:1px solid rgba(198,161,91,.35); padding:22px 44px 22px 22px; display:flex; flex-direction:column; gap:7px; color:#f3ede3; transition:.2s ease; }
.nf__card:hover { border-color:var(--fsr-gold); background:rgba(198,161,91,.06); }
.nf__card strong { font-size:19px; color:#fff; }
.nf__card small { color:rgba(243,237,227,.65); font-size:13.5px; line-height:1.55; }
.nf__arrow { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--fsr-gold); }
@media (max-width:860px){ .nf__grid{ grid-template-columns:1fr; } }

/* ============================================================
   CONTAINER-RHYTHM ALIGNMENT (round 4)
   Every full-bleed split section pins its page-edge-flush text column to the
   shared --fsr-edge rail, so content on the left aligns with every .fsr-wrap
   section (and right-flush panels align to the right rail). One symmetry system.
   ============================================================ */
/* left-flush text panels → left rail */
.ab-hero__text,
.ab-listen__text,
.ab-loc__text,
.faq-loc__text,
.bk-side__in { padding-left: var(--fsr-edge); }
/* right-flush text panels → right rail */
.st-hero__panel { padding-right: var(--fsr-edge); }
/* keep the non-rail side at a sane inner gutter */
.ab-hero__text, .ab-listen__text, .ab-loc__text, .faq-loc__text { padding-right: clamp(28px,4vw,64px); }
.st-hero__panel { padding-left: clamp(28px,4vw,64px); }
.bk-side__in { padding-right: clamp(28px,4vw,60px); }
@media (max-width:860px){
  /* below the split breakpoint, panels stack full width — normal gutter */
  .ab-hero__text,.ab-listen__text,.ab-loc__text,.faq-loc__text,.bk-side__in,.st-hero__panel { padding-left:var(--fsr-pad); padding-right:var(--fsr-pad); }
}

/* ---------- Homepage editorial booking entry (round 4) ---------- */
.fsr-book { background:var(--fsr-black-2); }
.fsr-book__in { display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.fsr-book__text { max-width:40em; }
.fsr-book__text .fsr-h2 { color:#f6f0e6; margin:0 0 12px; }
.fsr-book__lead { color:rgba(243,237,227,.78); margin:0; line-height:1.7; font-size:16px; }
.fsr-book__side { display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex:0 0 auto; }
.fsr-book__avail { display:inline-flex; align-items:center; gap:10px; font-family:var(--fsr-sans); font-size:13px; letter-spacing:.04em; color:rgba(243,237,227,.86); }
.fsr-book__dot { width:8px; height:8px; border-radius:50%; background:var(--fsr-gold); box-shadow:0 0 0 4px rgba(198,161,91,.18); flex:0 0 auto; }
@media (max-width:760px){ .fsr-book__side{ width:100%; } .fsr-book__side .fsr-btn{ width:100%; justify-content:center; } }

/* ============================================================
   ROUND 4b — mobile hero padding, Sera photo framing, premium testimonials
   ============================================================ */

/* Real Sera square photo in the homepage 3-panel (~0.88 box) — frame head+hair. */
.fsr-sera__photo img { object-position:center 24%; }

/* Testimonials — premium editorial on mobile: hairline-separated, refined type. */
@media (max-width:1024px){
  .fsr-quotes { grid-template-columns:1fr 1fr; gap:0; }
  .fsr-quote { padding:30px 30px; border-left:0; border-top:1px solid rgba(198,161,91,.16); }
  .fsr-quote:nth-child(2n) { border-left:1px solid rgba(198,161,91,.16); }
  .fsr-quote:nth-child(1), .fsr-quote:nth-child(2) { border-top:0; }
  .fsr-quote p { font-size:17px; }
}
@media (max-width:640px){
  .fsr-quotes { grid-template-columns:1fr; margin-top:38px; }
  .fsr-quote { padding:26px 2px; border-left:0; }
  .fsr-quote:nth-child(2n) { border-left:0; }
  .fsr-quote:first-child { border-top:0; }
  .fsr-quote p { font-size:17px; line-height:1.6; }
  .fsr-quote__mark { font-size:40px; }
}

/* Mobile hero height — kill the empty black space below inner-page hero text.
   The media is hidden on mobile, so the tall min-height just left a void. */
@media (max-width:860px){
  .fsr-phero { min-height:0; }
  .fsr-phero__text { padding-top:46px; padding-bottom:44px; }
  .fsr-hero__text { padding-top:52px; padding-bottom:56px; }
  .fsr-hero { min-height:0; }
}
@media (max-width:640px){
  .fsr-phero__text { padding-top:40px; padding-bottom:38px; }
  .fsr-hero__text { padding-top:44px; padding-bottom:48px; }
}

/* ---------- Mobile hero action buttons stay on one row (round 4b) ---------- */
@media (max-width:560px){
  .fsr-hero__actions, .svc-hero__actions, .bk-side .fsr-hero__actions { flex-wrap:nowrap; gap:8px; max-width:100%; }
  .fsr-hero__actions .fsr-btn, .svc-hero__actions .fsr-btn {
    flex:1 1 0; min-width:0; justify-content:center; text-align:center; overflow:hidden;
    padding:13px 8px; font-size:11px; letter-spacing:.04em; white-space:nowrap; gap:5px;
  }
}
@media (max-width:360px){
  .fsr-hero__actions .fsr-btn, .svc-hero__actions .fsr-btn { padding:12px 6px; font-size:10.5px; letter-spacing:.02em; }
}


/* ──────────────────────────────────────────────────────────────────────────
   WEPRO CONSENT — fixed-edge occupancy declaration
   Contract: wepro-consent >= 3.5.0 (verified against 3.6.1 canonical SSOT).
   Docs: docs-site → Platform → consent fixed-edge occupancy.

   WHY: this theme owns a persistent fixed bar at the BOTTOM viewport edge
   (.fsr-botbar), visible only under (max-width: 860px). From 3.5.0 the consent banner
   anchors to `bottom: 0` and adds its own 24px gap, so with no declared band
   it renders ON TOP of that bar. (Measured: 50px overlap without
   this declaration; 0px with it.)

   HOW: the contract is additive — each owner declares ONLY its own slot and
   the plugin sums them. The theme's slot is `--wepro-fixed-bottom-theme`.
   This block therefore never writes the banner's `bottom`/`top`, never uses a
   plugin selector, and cannot collide with the a11y / CTA / site slots.

   VALUE: 74px = .fsr-botbar's measured rendered height at this breakpoint
   (CDP-measured 2026-08-04 at 390px viewport, safe-area inset 0).
   The bar adds env(safe-area-inset-bottom) to its own padding and the banner
   adds the same inset to its own padding, so the two insets cancel — the
   inset-free height is the correct literal here.

   MAINTENANCE: if .fsr-botbar's height or its breakpoint changes, update this
   value. To disable the band, set the explicit safe value 0px.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --wepro-fixed-bottom-theme: 74px; }
}