/* =========================================================
   Faded With Feri — 4 design directions × day/night palettes
   Design is set by html[data-design="1..4"], palette by html[data-mode="light|dark"].
   ========================================================= */

/* ---------- Palette tokens ---------- */
/* 1 · Midnight Atelier (final mockup, folder -2) */
[data-design="1"][data-mode="dark"] {
  --bg:#1a120b; --bg-alt:#221a13; --surface:#271e16; --surface-hi:#322820;
  --text:#f1dfd3; --muted:#d0c5b4; --line:rgba(228,194,125,.16);
  --accent:#e4c27d; --accent-2:#aa8d4d; --on-accent:#3f2e00; --star:#e9c349;
  --feature:#00113a; --feature-text:#f1dfd3; --feature-muted:#b6c5f5; --feature-accent:#e4c27d;
  --day:#00113a; --day-text:#f1dfd3; --day-off:#1a120b;
  --pattern: radial-gradient(circle at 2px 2px, rgba(228,194,125,.05) 1px, transparent 0) 0 0/40px 40px;
}
[data-design="1"][data-mode="light"] {
  --bg:#f8f2e9; --bg-alt:#efe5d5; --surface:#fffaf2; --surface-hi:#ffffff;
  --text:#2a1d12; --muted:#6b5a48; --line:rgba(122,90,40,.18);
  --accent:#8a6a2b; --accent-2:#b48f45; --on-accent:#fffaf0; --star:#b8901f;
  --feature:#00113a; --feature-text:#f4ead9; --feature-muted:#b6c5f5; --feature-accent:#e4c27d;
  --day:#00113a; --day-text:#f4ead9; --day-off:#efe5d5;
  --pattern: radial-gradient(circle at 2px 2px, rgba(138,106,43,.08) 1px, transparent 0) 0 0/40px 40px;
}
/* 2 · Obsidian Gilt */
[data-design="2"][data-mode="dark"] {
  --bg:#14120e; --bg-alt:#1b1813; --surface:#23201a; --surface-hi:#2c2820;
  --text:#ede4d3; --muted:#a99d87; --line:rgba(201,164,92,.18);
  --accent:#c9a45c; --accent-2:#a17f3c; --on-accent:#17120a; --star:#c9a45c;
  --feature:#191611; --feature-text:#ede4d3; --feature-muted:#a99d87; --feature-accent:#c9a45c;
  --day:#2a261e; --day-text:#ede4d3; --day-off:#1b1813;
  --pattern: none;
}
[data-design="2"][data-mode="light"] {
  --bg:#faf7f0; --bg-alt:#f1ebdf; --surface:#ffffff; --surface-hi:#f7f2e8;
  --text:#1d1a14; --muted:#6f6656; --line:rgba(155,122,53,.22);
  --accent:#9b7a35; --accent-2:#c09a50; --on-accent:#fffdf7; --star:#b08a3c;
  --feature:#1d1a14; --feature-text:#ede4d3; --feature-muted:#a99d87; --feature-accent:#c9a45c;
  --day:#efe7d7; --day-text:#1d1a14; --day-off:#f7f3ea;
  --pattern: none;
}
/* 3 · Editorial Navy */
[data-design="3"][data-mode="light"] {
  --bg:#fbfbe2; --bg-alt:#f2f2d3; --surface:#efefcf; --surface-hi:#fdfdf0;
  --text:#0f1a33; --muted:#5b6070; --line:rgba(0,17,58,.12);
  --accent:#00113a; --accent-2:#002366; --on-accent:#fbfbe2; --star:#d4a72c;
  --feature:#00113a; --feature-text:#fbfbe2; --feature-muted:#b6c0dc; --feature-accent:#fbfbe2;
  --day:#ecebcd; --day-text:#0f1a33; --day-off:#f6f6dc;
  --pattern: linear-gradient(rgba(0,17,58,.035) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(0,17,58,.035) 1px, transparent 1px) 0 0/24px 24px;
}
[data-design="3"][data-mode="dark"] {
  --bg:#0a1124; --bg-alt:#0e172f; --surface:#14203d; --surface-hi:#1a2848;
  --text:#ecebd5; --muted:#a3a9bd; --line:rgba(236,235,213,.12);
  --accent:#ecebd5; --accent-2:#ffffff; --on-accent:#00113a; --star:#e2b93b;
  --feature:#00113a; --feature-text:#ecebd5; --feature-muted:#a3a9bd; --feature-accent:#ecebd5;
  --day:#1a2747; --day-text:#ecebd5; --day-off:#0e172f;
  --pattern: linear-gradient(rgba(236,235,213,.03) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(236,235,213,.03) 1px, transparent 1px) 0 0/24px 24px;
}
/* 4 · Heritage Green */
[data-design="4"][data-mode="light"] {
  --bg:#faf6ee; --bg-alt:#f2ebdd; --surface:#f1e8d9; --surface-hi:#fffdf8;
  --text:#241c14; --muted:#6f6355; --line:rgba(36,28,20,.12);
  --accent:#6b4a2f; --accent-2:#87603f; --on-accent:#fdf8f0; --star:#b8862f;
  --feature:#476d50; --feature-text:#f4efe4; --feature-muted:#cfdccf; --feature-accent:#f4efe4;
  --day:#eee4d3; --day-text:#241c14; --day-off:#f7f2e8;
  --pattern: linear-gradient(rgba(107,74,47,.04) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(107,74,47,.04) 1px, transparent 1px) 0 0/24px 24px;
}
[data-design="4"][data-mode="dark"] {
  --bg:#111711; --bg-alt:#161e16; --surface:#1d271e; --surface-hi:#243026;
  --text:#ece6d8; --muted:#a8a493; --line:rgba(236,230,216,.12);
  --accent:#cfa878; --accent-2:#e0bf93; --on-accent:#1b140c; --star:#d4a85a;
  --feature:#2a4632; --feature-text:#ece6d8; --feature-muted:#b5c6b5; --feature-accent:#e0bf93;
  --day:#233025; --day-text:#ece6d8; --day-off:#161e16;
  --pattern: linear-gradient(rgba(236,230,216,.025) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(236,230,216,.025) 1px, transparent 1px) 0 0/24px 24px;
}

/* ---------- Base ---------- */
:root { --pv-h: 52px; --nav-h: 64px; --serif: "Noto Serif", Georgia, serif; --sans: "Manrope", system-ui, sans-serif; --radius: 4px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pv-h) + var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--pattern), var(--bg); background-color: var(--bg);
  transition: background-color .4s ease, color .4s ease;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.muted { color: var(--muted); }
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site { transition: opacity .25s ease; }
.is-switching .site, .is-switching .nav { opacity: 0; }

[data-mode="dark"] .when-light, [data-mode="light"] .when-dark { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: filter .2s, transform .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 10px 18px; font-size: 11px; }
.btn-block { width: 100%; padding: 17px; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; cursor: pointer; font-size: 20px; color: var(--accent); }
.icon-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.icon-btn:disabled { opacity: .3; cursor: default; background: none; }

/* ---------- Preview bar ---------- */
.pv {
  position: sticky; top: 0; z-index: 60; height: var(--pv-h);
  background: #0d0d0f; color: #e8e6e1; border-bottom: 1px solid #26262b;
  font-family: var(--sans); font-size: 13px;
}
.pv-inner { height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.pv-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8b8a86; white-space: nowrap; }
.pv-switch { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; touch-action: pan-y; }
.pv-arrow, .pv-mode { display: inline-flex; align-items: center; gap: 6px; height: 34px; border: 1px solid #2e2e34; background: #18181c; color: #e8e6e1; border-radius: 999px; cursor: pointer; }
.pv-arrow { width: 34px; justify-content: center; font-size: 16px; }
.pv-arrow:hover, .pv-mode:hover { background: #222228; }
.pv-tabs { display: flex; gap: 4px; padding: 3px; background: #18181c; border: 1px solid #2e2e34; border-radius: 999px; }
.pv-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #a9a7a1; cursor: pointer; white-space: nowrap; font-size: 12.5px; }
.pv-tabs button b { font-size: 11px; opacity: .6; }
.pv-tabs button:hover { color: #fff; }
.pv-tabs button[aria-selected="true"] { background: #f1ede4; color: #111; }
.pv-tabs button[aria-selected="true"] b { opacity: 1; }
.pv-current { display: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-current b { color: #8b8a86; font-weight: 600; margin-right: 4px; }
.pv-mode { padding: 0 14px 0 12px; font-size: 12.5px; white-space: nowrap; }
.pv-mode svg { font-size: 16px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: var(--pv-h); z-index: 50; height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: opacity .25s ease, background-color .4s ease;
}
.nav-inner { height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: var(--serif); font-size: 22px; font-weight: 300; letter-spacing: -.03em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-family: var(--serif); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--accent) 65%, var(--text)); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.nav-links a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
[data-design="3"] .brand, [data-design="4"] .brand { font-weight: 700; color: var(--text); letter-spacing: -.02em; }
[data-design="3"] .nav-links a, [data-design="4"] .nav-links a { font-family: var(--sans); text-transform: none; letter-spacing: .02em; font-size: 14px; color: var(--muted); }
[data-design="3"] .nav-links a:hover, [data-design="4"] .nav-links a:hover { color: var(--text); border-color: var(--text); }
[data-design="2"] .brand { font-weight: 400; }

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-media { position: relative; overflow: hidden; background: #111; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; }
.hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; }
.hero h1 { font-weight: 300; font-size: clamp(44px, 7.5vw, 84px); letter-spacing: -.035em; color: var(--accent); }
.hero-kicker { display: none; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero-sub { max-width: 620px; margin-top: 16px; font-size: 18px; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* 1: full-bleed, centered, fades into page */
[data-design="1"] .hero-media { height: min(82vh, 780px); min-height: 520px; }
[data-design="1"] .hero-shade { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 70%, transparent) 70%, var(--bg) 100%); }
[data-design="1"][data-mode="light"] .hero h1 { color: #f6e7c4; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
[data-design="1"][data-mode="light"] .hero-sub { color: #f1e6d8; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
[data-design="1"][data-mode="light"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 60%, var(--bg) 100%); }
[data-design="1"] .hero .btn-ghost { color: #f1dfd3; box-shadow: inset 0 0 0 1px rgba(241,223,211,.35); }

/* 2: inset panel, title bottom-left, italic gilt */
[data-design="2"] .hero { padding: 16px 24px 0; }
[data-design="2"] .hero-media { height: min(72vh, 640px); min-height: 460px; border-radius: 6px; }
[data-design="2"] .hero-media img { filter: grayscale(1) sepia(.25) brightness(.85); }
[data-design="2"] .hero-shade { background: linear-gradient(180deg, transparent 30%, rgba(10,8,5,.88) 100%); }
[data-design="2"] .hero-copy { inset: 16px 24px 0; align-items: flex-start; justify-content: flex-end; text-align: left; padding: 56px; }
[data-design="2"] .hero h1 { font-style: italic; color: #d4b06a; }
[data-design="2"] .hero-kicker { display: block; order: 2; margin-top: 10px; color: #b8ab92; }
[data-design="2"] .hero-sub { order: 3; color: #cfc4ae; max-width: 460px; font-size: 16px; }
[data-design="2"] .hero-cta { order: 4; justify-content: flex-start; }
[data-design="2"] .hero .btn-ghost { color: #ede4d3; box-shadow: inset 0 0 0 1px rgba(237,228,211,.3); }

/* 3 & 4: framed B&W panel, white italic title centered */
[data-design="3"] .hero, [data-design="4"] .hero { padding: 8px 32px 0; max-width: 1264px; margin: 0 auto; }
[data-design="3"] .hero-media, [data-design="4"] .hero-media { height: min(56vh, 500px); min-height: 400px; }
[data-design="3"] .hero-media img, [data-design="4"] .hero-media img { filter: grayscale(1) contrast(1.05); }
[data-design="3"] .hero-shade, [data-design="4"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 60%, var(--bg) 100%); }
[data-design="3"] .hero-copy, [data-design="4"] .hero-copy { inset: 8px 32px 0; }
[data-design="3"] .hero h1, [data-design="4"] .hero h1 { font-style: italic; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
[data-design="3"] .hero-sub, [data-design="4"] .hero-sub { color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.5); font-size: 16px; }
[data-design="3"] .hero .btn-ghost, [data-design="4"] .hero .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
[data-design="3"][data-mode="light"] .hero .btn:not(.btn-ghost) { background: #00113a; color: #fbfbe2; }
[data-design="4"][data-mode="light"] .hero .btn:not(.btn-ghost) { background: #6b4a2f; color: #fdf8f0; }

/* ---------- Section heads ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 64px; }
.sec-head h2 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 6px; }
.sec-head p { font-weight: 300; }
.sec-rule { flex: 1; height: 1px; background: var(--line); margin-bottom: 10px; }
.sec-tag { font-family: var(--serif); font-style: italic; color: var(--accent); white-space: nowrap; }
[data-design="2"] .sec-head h2 { color: var(--accent); }
[data-design="2"] .sec-tag, [data-design="3"] .sec-tag, [data-design="4"] .sec-tag { font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
[data-design="2"] .sec-head p, [data-design="3"] .sec-head p, [data-design="4"] .sec-head p { display: none; }
[data-design="2"] .sec-rule, [data-design="3"] .sec-rule, [data-design="4"] .sec-rule { visibility: hidden; }

/* ---------- Services ---------- */
.services { padding-top: 96px; padding-bottom: 96px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.svc { text-align: center; }
.svc-img { position: relative; width: 192px; height: 192px; margin: 0 auto 32px; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s, transform .5s; }
.svc-img::before { content: ""; position: absolute; inset: -12px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); transition: transform .7s; }
.svc:hover .svc-img::before { transform: scale(1.06); }
.svc-name { font-size: 24px; color: var(--accent); margin-bottom: 4px; }
.svc-price { font-family: var(--serif); font-size: 18px; margin-bottom: 12px; }
.svc-desc { font-size: 14px; color: var(--muted); max-width: 320px; margin: 0 auto; }
.svc-book { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); text-decoration: none; opacity: .75; }
.svc-book:hover { opacity: 1; }
[data-design="1"] .svc-img img { border-radius: 10px; filter: grayscale(1); }
[data-design="1"] .svc-img::before { border-radius: 14px; inset: -8px; }
[data-design="1"] .svc:hover .svc-img img { filter: none; }
[data-design="2"] .svc-img, [data-design="3"] .svc-img, [data-design="4"] .svc-img { width: 140px; height: 140px; }
[data-design="2"] .svc-img img, [data-design="3"] .svc-img img, [data-design="4"] .svc-img img { border-radius: 50%; }
[data-design="2"] .svc-img::before, [data-design="3"] .svc-img::before, [data-design="4"] .svc-img::before { border-radius: 50%; inset: -6px; }
[data-design="2"] .svc-name, [data-design="3"] .svc-name, [data-design="4"] .svc-name { font-size: 20px; }
[data-design="3"] .svc-name, [data-design="4"] .svc-name { color: var(--text); }
[data-design="2"] .svc-price, [data-design="3"] .svc-price, [data-design="4"] .svc-price { font-family: var(--sans); font-size: 13px; color: var(--muted); }
[data-design="2"] .svc-desc { font-family: var(--serif); font-style: italic; }

/* ---------- Add-ons ---------- */
.addons { background: var(--bg-alt); padding: 80px 0; transition: background-color .4s; }
.addons-title { text-align: center; font-size: 28px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 48px; }
.addon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.addon { display: flex; flex-direction: column; gap: 2px; padding: 24px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.addon:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.addon-num { font-family: var(--serif); font-style: italic; color: var(--accent); margin-bottom: 6px; }
.addon-name { font-weight: 600; font-size: 14px; }
.addon-meta { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
[data-design="1"][data-mode="light"] .addons-title { color: var(--accent); }
/* inline strip variant */
[data-design="2"] .addons, [data-design="3"] .addons, [data-design="4"] .addons { padding: 40px 0; }
[data-design="3"] .addons, [data-design="4"] .addons { background: transparent; }
[data-design="2"] .addons-title, [data-design="3"] .addons-title, [data-design="4"] .addons-title { font-family: var(--sans); font-size: 10px; letter-spacing: .3em; color: var(--muted); margin-bottom: 18px; font-weight: 600; }
[data-design="2"] .addon-list, [data-design="3"] .addon-list, [data-design="4"] .addon-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; }
[data-design="2"] .addon, [data-design="3"] .addon, [data-design="4"] .addon { flex-direction: row; align-items: baseline; gap: 8px; padding: 0; background: none; border: 0; }
[data-design="2"] .addon-num, [data-design="3"] .addon-num, [data-design="4"] .addon-num { display: none; }
[data-design="2"] .addon-name, [data-design="3"] .addon-name, [data-design="4"] .addon-name { font-family: var(--serif); font-weight: 400; font-size: 14px; }

/* ---------- Reviews ---------- */
.reviews { padding-top: 96px; padding-bottom: 96px; }
.rev-head { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.rev-rule { flex: 1; height: 1px; background: var(--line); }
.rev-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.rev-label svg { font-size: 18px; color: var(--star); }
.rev-icon-g { display: none; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rev { margin: 0; padding: 32px; background: var(--surface-hi); border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.rev figcaption { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 14px; }
.rev figcaption > span:last-child { display: flex; flex-direction: column; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-family: var(--serif); font-size: 14px; }
.stars { display: flex; gap: 1px; color: var(--star); font-size: 13px; }
.rev blockquote { margin: 0; font-style: italic; font-size: 14px; color: var(--muted); }
[data-design="1"] .rev:nth-child(4) { display: none; }
[data-design="2"] .rev-head, [data-design="3"] .rev-head, [data-design="4"] .rev-head { margin-bottom: 24px; }
[data-design="2"] .rev-rule, [data-design="3"] .rev-rule, [data-design="4"] .rev-rule { display: none; }
[data-design="2"] .rev-label, [data-design="3"] .rev-label, [data-design="4"] .rev-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .25em; color: var(--muted); }
[data-design="2"] .rev-icon-star, [data-design="3"] .rev-icon-star, [data-design="4"] .rev-icon-star { display: none; }
[data-design="2"] .rev-icon-g, [data-design="3"] .rev-icon-g, [data-design="4"] .rev-icon-g { display: block; color: var(--text); }
[data-design="2"] .rev-grid, [data-design="3"] .rev-grid, [data-design="4"] .rev-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
[data-design="2"] .rev, [data-design="3"] .rev, [data-design="4"] .rev { padding: 22px; border-radius: 2px; box-shadow: none; background: var(--surface); }
[data-design="3"] .rev, [data-design="4"] .rev { border: 1px solid var(--line); }
[data-design="2"] .rev blockquote { font-family: var(--serif); }
[data-design="3"] .avatar, [data-design="4"] .avatar { border-radius: 2px; font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-hi); }

/* ---------- Visit ---------- */
.visit { background: var(--feature); color: var(--feature-text); padding: 96px 0; transition: background-color .4s; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.visit-info { display: flex; flex-direction: column; gap: 36px; }
.visit .eyebrow { color: var(--feature-muted); }
.visit h2 { font-size: clamp(34px, 4.5vw, 48px); color: var(--feature-accent); margin-top: -26px; }
.visit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.visit-strong { font-weight: 600; }
.visit-strong a { text-decoration: none; }
.visit-muted { font-size: 14px; color: var(--feature-muted); }
.visit-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--feature-accent); text-decoration: none; }
.visit-link svg { font-size: 16px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 32px; margin: 0; font-size: 14px; max-width: 360px; }
.hours dt { color: var(--feature-muted); }
.hours dd { margin: 0; }
.accent-it { font-style: italic; color: var(--feature-accent); }
.socials { display: flex; gap: 20px; font-size: 22px; }
.socials a { color: var(--feature-muted); transition: color .2s; }
.socials a:hover { color: var(--feature-accent); }
.map { height: 420px; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.3); background: #222; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(.95); transition: filter .7s; }
[data-mode="dark"] .map iframe { filter: grayscale(1) invert(.92) contrast(.9) brightness(.95); }
.map:hover iframe { filter: none; }
[data-design="2"] .visit h2, [data-design="3"] .visit h2, [data-design="4"] .visit h2 { font-size: clamp(36px, 5vw, 56px); }
[data-design="2"] .visit h2 { font-style: italic; }
[data-design="2"] .map { border-radius: 0; box-shadow: none; outline: 1px solid var(--line); outline-offset: 0; }
[data-design="3"] .map, [data-design="4"] .map { border-radius: 0; box-shadow: none; border: 8px solid color-mix(in srgb, var(--feature-text) 18%, transparent); }


/* ---------- Booking ---------- */
.book { padding-top: 96px; padding-bottom: 120px; }
.book-eyebrow { display: none; }
.book-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 56px; padding: 48px; background: var(--bg-alt); border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.cal-head h2 { font-size: clamp(26px, 3vw, 32px); }
.cal-nav { display: flex; align-items: center; gap: 4px; font-family: var(--serif); letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }
.cal-nav span { min-width: 150px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-dow { text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.cal-day { height: 60px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--day-off); color: color-mix(in srgb, var(--muted) 45%, transparent); font-size: 15px; }
button.cal-day { background: var(--day); color: var(--day-text); cursor: pointer; transition: filter .15s, box-shadow .15s; }
button.cal-day:hover { filter: brightness(1.15); }
button.cal-day[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.cal-day.today { font-weight: 800; }
.slots-wrap { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.slot { padding: 10px 4px; border: 1px solid var(--line); background: var(--surface-hi); border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.slot:hover { border-color: var(--accent); }
.slot[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.slot:disabled { opacity: .35; text-decoration: line-through; cursor: default; border-color: var(--line); }

.guest { display: flex; flex-direction: column; gap: 18px; }
.guest h3 { font-size: 20px; color: var(--accent); }
.field { display: block; border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); padding-bottom: 6px; }
.field span { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { width: 100%; padding: 4px 0; border: 0; background: transparent; outline: none; color: var(--text); }
.field select option { background: var(--bg); color: var(--text); }
.field input::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.field:focus-within { border-color: var(--accent); }
.field.invalid { border-color: #d9534f; }
.summary { padding: 14px 16px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 13px; line-height: 1.5; }
.summary b { color: var(--accent); }
.fine { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: color-mix(in srgb, var(--muted) 75%, transparent); }

[data-design="2"] .book-eyebrow, [data-design="3"] .book-eyebrow, [data-design="4"] .book-eyebrow { display: block; }
[data-design="2"] .book-card, [data-design="3"] .book-card, [data-design="4"] .book-card { border-radius: 4px; }
[data-design="2"] .cal-head h2 { font-style: italic; color: var(--accent); }
[data-design="2"] .cal-day, [data-design="3"] .cal-day, [data-design="4"] .cal-day { border-radius: 2px; }
[data-design="3"] .book-card, [data-design="4"] .book-card { background: var(--surface-hi); box-shadow: 0 24px 60px rgba(0,0,0,.1); }
[data-design="3"] .guest h3, [data-design="4"] .guest h3 { color: var(--text); }
[data-design="3"] .field, [data-design="4"] .field, [data-design="2"] .field { border: 1px solid var(--line); padding: 8px 12px; border-radius: 2px; background: var(--bg); }
[data-design="3"] button.cal-day[aria-pressed="true"], [data-design="4"] button.cal-day[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }

/* ---------- Footer ---------- */
.foot { padding: 48px 0 56px; background: var(--bg); transition: background-color .4s; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-brand { font-family: var(--serif); font-style: italic; color: var(--accent); }
.foot-links { display: flex; gap: 28px; }
.foot-links a, .foot-copy { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
[data-design="2"] .foot-inner, [data-design="3"] .foot-inner, [data-design="4"] .foot-inner { flex-direction: column; text-align: center; }

/* ---------- Mobile book bar + toast ---------- */
.mobile-book { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 140%);
  max-width: min(440px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 10px;
  background: #0d0d0f; color: #f1ede4; font-size: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pv-label { display: none; }
  .pv-tabs button span { display: none; }
  .pv-tabs button { padding: 0 12px; }
  .pv-current { display: block; }
  .addon-list { grid-template-columns: repeat(3, 1fr); }
  [data-design="2"] .rev-grid, [data-design="3"] .rev-grid, [data-design="4"] .rev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  :root { --nav-h: 58px; }
  .wrap, .nav-inner { padding: 0 16px; }
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .svc-grid { grid-template-columns: 1fr; gap: 64px; }
  .rev-grid, [data-design="2"] .rev-grid, [data-design="3"] .rev-grid, [data-design="4"] .rev-grid { grid-template-columns: 1fr; }
  [data-design="1"] .rev:nth-child(4) { display: block; }
  .visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .map { height: 280px; }
  .book-card { grid-template-columns: 1fr; padding: 24px 16px; gap: 36px; border-radius: 16px; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 48px; gap: 8px; }
  .sec-rule { display: none; }
  .services, .reviews { padding-top: 72px; padding-bottom: 72px; }
  .visit { padding: 72px 0; }
  .book { padding-top: 72px; padding-bottom: 110px; }
  [data-design="2"] .hero, [data-design="3"] .hero, [data-design="4"] .hero { padding: 8px 16px 0; }
  [data-design="2"] .hero-copy, [data-design="3"] .hero-copy, [data-design="4"] .hero-copy { inset: 8px 16px 0; padding: 28px 20px; }
  [data-design="1"] .hero-media { min-height: 560px; height: 78vh; }
  .hero-sub { font-size: 16px; }
  .mobile-book {
    display: flex; position: fixed; z-index: 70; left: 16px; right: 16px; bottom: 16px;
    padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); border-radius: 999px;
    transition: transform .3s, opacity .3s;
  }
  .mobile-book.hide { transform: translateY(140%); opacity: 0; }
  .toast { bottom: 88px; }
}
@media (max-width: 560px) {
  .pv-tabs { display: none; }
  .pv-mode span { display: none; }
  .pv-mode { width: 34px; padding: 0; justify-content: center; }
  .addon-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .addons-title { font-size: 20px; letter-spacing: .14em; }
  .visit-cols { grid-template-columns: 1fr; }
  .cal-day { height: 44px; font-size: 14px; border-radius: 6px; }
  .cal-grid { gap: 5px; }
  .cal-nav span { min-width: 120px; font-size: 13px; }
  .brand { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}