/* ==================================================================
   Nana — "dark teak" theme. Loaded AFTER site.css and overrides it.
   Reference direction from Seb: Thai-spa interiors — dark teak, low
   golden light, lanterns — plus bestmassagethaiway.com's full-bleed
   photographic hero, strong alternating bands and a services PRICE
   LIST rather than image cards.
   Deliberately NOT the Samira / Style&Glow template family.
   ================================================================== */

:root {
  --ink: #12100D;
  --ink-2: #1B1713;
  --teak: #2C221A;
  --gold: #C9A34E;
  --gold-soft: #E0C583;
  --jade: #2F6B58;
  --cream: #F3ECE1;
  --muted: #B3A995;
  --line-d: rgba(201,163,78,.28);
  --display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --body: 'Karla', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
  background: var(--ink);
  color: var(--muted);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.8;
}

h1, h2, h3, h4 { font-family: var(--display); color: var(--cream); font-weight: 500; line-height: 1.15; }

/* kill the inherited light surfaces ---------------------------------- */
.section, .section-alt, .page, .container, .hp, .band, .cta-band { background: transparent; }
.section-alt { background: var(--ink-2); }
.card, .plan, .post-card, .testi-card, .review-item, .icard {
  background: var(--ink-2) !important; border: 1px solid var(--line-d) !important;
  box-shadow: none !important; border-radius: 0 !important; color: var(--muted);
}
.card h3, .plan h3, .icard h3 { color: var(--cream); }

/* eyebrow labels ----------------------------------------------------- */
.script, .section-head .script, .testi-head .script {
  font-family: var(--body) !important; font-style: normal !important;
  font-size: .7rem !important; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 1rem;
}
.section-head h2 { color: var(--cream); }

/* ---- hero ---------------------------------------------------------- */
.n-hero {
  position: relative; min-height: 88vh; display: grid; place-items: center;
  text-align: center; padding: 6rem 1.5rem; overflow: hidden;
}
.n-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-img); background-size: cover; background-position: center;
  transform: scale(1.04);
}
.n-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 55%, rgba(18,16,13,.55) 0%, rgba(18,16,13,.86) 62%, #12100D 100%);
}
.n-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.n-eyebrow { font-size: .72rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); }
.n-hero h1 {
  font-size: clamp(3rem, 9vw, 6.4rem); margin: 1.1rem 0 .4rem; letter-spacing: .01em; color: #fff;
}
.n-hero .n-sub { font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--gold-soft); font-style: italic; }
.n-hero p.n-lead { color: #D9D0C2; max-width: 52ch; margin: 1.6rem auto 2.4rem; }
.n-rule { width: 78px; height: 1px; background: var(--gold); margin: 1.6rem auto; opacity: .8; }

/* ---- buttons ------------------------------------------------------- */
.n-btn, .btn, .btn-solid, .btn-light {
  display: inline-block; font-family: var(--body); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; padding: 16px 32px;
  border-radius: 0 !important; text-decoration: none; transition: .25s; border: 1px solid var(--gold);
}
.n-btn-gold, .btn-solid, .rail-book { background: var(--gold); border-color: var(--gold); color: #17130D !important; }
.n-btn-gold:hover, .btn-solid:hover, .rail-book:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.n-btn-ghost, .btn { background: transparent; color: var(--gold) !important; }
.n-btn-ghost:hover, .btn:hover { background: var(--gold); color: #17130D !important; }
.n-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- generic section ----------------------------------------------- */
.n-sec { padding: clamp(4rem, 9vw, 7.5rem) 1.5rem; }
.n-wrap { max-width: 1120px; margin: 0 auto; }
.n-center { text-align: center; }
.n-sec-title { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 .6rem; }
.n-sec-intro { max-width: 60ch; margin: 0 auto; color: var(--muted); }

/* ---- services as a PRICE LIST, not cards --------------------------- */
.n-list { margin-top: 3.5rem; }
.n-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: baseline;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line-d);
}
.n-row:first-child { border-top: 1px solid var(--line-d); }
.n-row h3 { font-size: 1.6rem; margin: 0; }
.n-row .n-desc { grid-column: 1 / -1; margin: .45rem 0 0; font-size: .97rem; color: var(--muted); max-width: 70ch; }
.n-price { font-family: var(--display); font-size: 1.35rem; color: var(--gold); white-space: nowrap; }
.n-dur { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #8C8372; margin-top: .2rem; }

/* ---- the 30/60/90 price strip -------------------------------------- */
.n-band { background: var(--teak); border-block: 1px solid var(--line-d); }
.n-tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.5rem; text-align: center; }
.n-tariff .n-min { font-family: var(--display); font-size: 3.4rem; color: var(--cream); line-height: 1; }
.n-tariff .n-lbl { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }
.n-tariff .n-chf { font-family: var(--display); font-size: 1.5rem; color: var(--gold); margin-top: .7rem; }

/* ---- about split --------------------------------------------------- */
.n-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.n-portrait { position: relative; }
.n-portrait img { width: 100%; display: block; filter: saturate(.95) contrast(1.02); }
.n-portrait::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--gold); pointer-events: none; opacity: .55; }
@media (max-width: 820px) { .n-split { grid-template-columns: 1fr; } }

/* ---- gallery strip, edge to edge ----------------------------------- */
.n-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; }
.n-strip .n-tile { aspect-ratio: 3/4; background-size: cover; background-position: center; filter: brightness(.72) saturate(.9); transition: .5s; }
.n-strip .n-tile:hover { filter: brightness(1) saturate(1); }

/* ---- visit / contact ----------------------------------------------- */
.n-visit { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
@media (max-width: 820px) { .n-visit { grid-template-columns: 1fr; } }
.n-facts { list-style: none; padding: 0; margin: 2rem 0 0; }
.n-facts li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-d); }
.n-facts .k { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-top: .32rem; }
.n-facts a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line-d); }
.n-photo-frame img { width: 100%; display: block; filter: brightness(.85); }

/* ---- chrome: rail, off-canvas, footer ------------------------------ */
.rail { background: var(--ink) !important; border-right: 1px solid var(--line-d); }
.offcanvas-panel { background: var(--ink-2) !important; }
.offcanvas-panel nav a { font-family: var(--display); font-size: 1.85rem; color: var(--cream) !important; }
.offcanvas-panel nav a:hover { color: var(--gold) !important; }
.oc-foot, .oc-foot a { color: var(--muted) !important; }
.site-footer { background: #0C0A08 !important; color: var(--muted) !important; border-top: 1px solid var(--line-d); }
.site-footer h4, .site-footer strong { color: var(--cream) !important; font-family: var(--display); font-weight: 500; }
.site-footer a { color: var(--muted) !important; }
.site-footer a:hover { color: var(--gold) !important; }
.footer-bottom { border-top: 1px solid rgba(201,163,78,.15); color: #7A7263 !important; }

.lang-switch a { border-color: var(--line-d) !important; color: var(--gold) !important; border-radius: 0 !important; }
.lang-switch a.is-active { background: var(--gold) !important; border-color: var(--gold) !important; color: #17130D !important; }

/* inner pages inherit the dark treatment ----------------------------- */
.price-row { border-bottom: 1px solid var(--line-d); }
.price-cat, .service-group-title { font-family: var(--display); color: var(--cream); }
.prose, .article { color: var(--muted); }
.prose h2, .prose h3, .article h2 { color: var(--cream); }
.info-row, .info-item { border-color: var(--line-d); }
.map-embed { filter: grayscale(.3) brightness(.85); }

/* Thai script needs more leading and its own family ------------------ */
html[lang="th"] body { line-height: 1.95; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] .n-sec-title, html[lang="th"] .n-row h3 {
  font-family: 'Noto Sans Thai', var(--body); font-weight: 600; letter-spacing: 0; line-height: 1.5;
}
html[lang="th"] .n-hero h1 { font-size: clamp(2.2rem, 6.5vw, 4.4rem); }

/* ==================================================================
   Revision 2 (Seb: type too small, contrast unreadable, kill the
   left rail, drop Blog). Bigger base type, much lighter body text,
   fixed top header instead of the fixed rail.
   ================================================================== */

:root {
  --rail: 0px;                 /* site.css offsets .page by this; we no longer have a rail */
  --muted: #D7CFC2;            /* was #B3A995 — too low against #12100D */
  --muted-2: #B9B0A1;
}

.page { margin-left: 0 !important; }

body { font-size: 19px; line-height: 1.85; color: var(--muted); }
p { color: var(--muted); }
.n-sec-intro, .n-row .n-desc, .n-facts span, .prose, .article { color: var(--muted); }
.n-dur { color: var(--muted-2); }
.n-hero p.n-lead { color: #F0EAE0; font-size: 1.15rem; }
.site-footer, .site-footer a, .oc-foot { color: var(--muted) !important; }
.footer-bottom { color: var(--muted-2) !important; }

/* headings up a step */
.n-sec-title { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.n-row h3 { font-size: 1.85rem; }
.n-price { font-size: 1.6rem; }
.n-tariff .n-min { font-size: 4.2rem; }
.n-tariff .n-chf { font-size: 1.8rem; }
.n-eyebrow, .script { font-size: .8rem !important; letter-spacing: .3em; }

/* ---- fixed top header --------------------------------------------- */
.n-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  background: transparent; border-bottom: 1px solid transparent; padding: 18px 0;
}
.n-nav.is-solid { background: rgba(12,10,8,.94); backdrop-filter: blur(8px); border-bottom-color: var(--line-d); padding: 10px 0; }
.n-nav-in { max-width: 1240px; margin: 0 auto; padding: 0 26px; display: flex; align-items: center; gap: 26px; }

.n-brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.n-brand-name { font-family: var(--display); font-size: 1.8rem; letter-spacing: .3em; color: #fff; }
.n-brand-sub { font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }

.n-links { display: flex; gap: 30px; }
.n-links a {
  font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #EDE6DA; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: .2s;
}
.n-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.n-nav-right { display: flex; align-items: center; gap: 16px; }
.n-lang { display: flex; gap: 4px; }
.n-lang a {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--muted);
  text-decoration: none; padding: 5px 8px; border: 1px solid transparent; transition: .2s;
}
.n-lang a:hover { color: var(--gold); }
.n-lang a.is-active { color: #17130D; background: var(--gold); }
.n-nav-cta {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold); color: #17130D !important; padding: 13px 22px; text-decoration: none; transition: .2s;
}
.n-nav-cta:hover { background: var(--gold-soft); }

.n-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.n-burger span { display: block; width: 26px; height: 2px; background: #EDE6DA; margin: 5px 0; transition: .2s; }

/* hero clears the fixed header */
.n-hero { padding-top: 9rem; }

/* ---- mobile drawer -------------------------------------------------- */
.n-drawer {
  position: fixed; inset: 0; z-index: 70; background: rgba(8,7,5,.97);
  display: none; place-items: center; text-align: center;
}
body.nav-open .n-drawer { display: grid; }
body.nav-open { overflow: hidden; }
.n-drawer-in { display: flex; flex-direction: column; gap: 22px; align-items: center; padding: 2rem; }
.n-drawer-in > a {
  font-family: var(--display); font-size: 2.1rem; color: #F3ECE1; text-decoration: none;
}
.n-drawer-in > a:hover { color: var(--gold); }
.n-lang-lg { margin-top: 1rem; }
.n-lang-lg a { font-size: .9rem; padding: 8px 14px; border: 1px solid var(--line-d); }

@media (max-width: 960px) {
  .n-links, .n-nav-cta { display: none; }
  .n-burger { display: block; }
  body { font-size: 18px; }
}

/* footer CTA was rendering as a large gold slab in a narrow column */
.site-footer .btn, .site-footer .btn-solid, .site-footer .n-btn {
  font-size: .68rem; padding: 12px 18px; white-space: nowrap; max-width: 100%;
}
.site-footer .social a { color: var(--gold) !important; }

/* ==================================================================
   Revision 3 — Seb could not find the language selector. It was
   present but rendered at .68rem in muted grey, i.e. invisible in
   practice. A control nobody can see is a control that isn't there.
   ================================================================== */
.n-lang { gap: 0; border: 1px solid var(--line-d); }
.n-lang a {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  padding: 9px 13px; color: var(--cream); border: 0; border-right: 1px solid var(--line-d);
}
.n-lang a:last-child { border-right: 0; }
.n-lang a:hover { background: rgba(201,163,78,.18); color: var(--gold); }
.n-lang a.is-active { background: var(--gold); color: #17130D; }
@media (max-width: 960px) { .n-lang { display: none; } }   /* drawer carries it on mobile */
.n-lang-lg { display: flex !important; gap: 0; }
.n-lang-lg a { font-size: 1rem; padding: 12px 18px; }

/* treatment cards on /leistungen carry their own artwork */
.n-card { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.n-card-img { width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; filter: brightness(.9); }
.n-card > h3, .n-card > p { padding-inline: 22px; }
.n-card > h3 { margin-top: 20px; }
.n-card > p:last-child { padding-bottom: 20px; }

/* price list: the treatment-name column inherited a dark colour from site.css
   and was effectively invisible on the dark background (Seb's screenshot). */
.price-row, .price-row > *, .price-table, .price-table td, .price-table th { color: var(--muted) !important; }
.price-row strong, .price-row b, .price-row .pr-name, .price-row > :first-child {
  color: var(--cream) !important; font-family: var(--display); font-size: 1.15rem; font-weight: 500;
}
.price-row .pr-price, .price-row td:last-child { color: var(--gold) !important; }
.price-cat > p, .price-cat-note, .service-group + p { color: var(--muted) !important; }
.page h1, .page h2, .page h3, .prose h1, .prose h2 { color: var(--cream) !important; }
.n-nav-wa { font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold)!important; padding:12px 18px; text-decoration:none; transition:.2s; }
.n-nav-wa:hover { background:var(--gold); color:#17130D!important; }
@media (max-width:960px){ .n-nav-wa{display:none;} }

/* ==================================================================
   ROOT CAUSE of the unreadable text. site.css colours most elements
   through --text / --heading / --accent, and this theme redefined
   only its OWN tokens. So every inherited rule kept the LIGHT palette
   on a near-black page: --heading #1A1A1A on #12100D = 1.09:1.
   Patching individual selectors was treating symptoms; redefine the
   inherited tokens and every rule in site.css follows.
   ================================================================== */
:root {
  --bg: #12100D;
  --text: #D7CFC2;
  --heading: #F3ECE1;
  --accent: #C9A34E;
  --accent-dark: #E0C583;
  --maroon: #2C221A;
  --brush: #2C221A;
  --brush-strong: #3A2C20;
  --line: rgba(201,163,78,.28);
}
/* dark text on the gold fill, not light-on-light (measured 1.54:1) */
.btn-solid, .n-btn-gold, .rail-book, .n-nav-cta, .lang-switch a.is-active, .n-lang a.is-active {
  color: #17130D !important;
}
.pr-price, .price-row .pr-price { color: var(--gold) !important; }
.lbl, .info-row .lbl, .info-item .lbl { color: var(--gold) !important; }

/* `.site-footer a` (0,1,1) outranks `.btn-solid` (0,1,0), so the footer's gold
   button was being repainted light-on-gold — 1.54:1. Needs equal-or-higher
   specificity, not another !important. */
.site-footer .btn-solid, .site-footer .n-btn-gold, .site-footer a.btn-solid {
  color: #17130D !important;
}

/* ==================================================================
   TEXT SIZE — raised twice by Seb (17:04, 17:26). My first pass went
   17px -> 19px, which was timid. The real problem was never the body
   copy, it was everything set in fractional rem: eyebrows .8, nav .82,
   buttons .74, descriptions .97, durations .72 — all 12-15px.
   Floor is now 15px, and nothing decorative drops below it.
   ================================================================== */
body { font-size: 21px; line-height: 1.8; }
p, li, td, .n-sec-intro, .prose, .article { font-size: 1.02em; }

.n-row .n-desc { font-size: 1.05rem; }
.n-hero p.n-lead { font-size: 1.3rem; }
.n-sec-intro { font-size: 1.15rem; }

/* decorative small-caps: were 11-15px, now >= 15px */
.n-eyebrow, .script, .section-head .script { font-size: 1rem !important; letter-spacing: .26em; }
.n-dur { font-size: .95rem; letter-spacing: .12em; }
.n-tariff .n-lbl { font-size: .95rem; }
.n-facts .k { font-size: .9rem; }
.n-brand-sub { font-size: .78rem; }

/* navigation and buttons */
.n-links a { font-size: 1rem; letter-spacing: .12em; }
.n-lang a { font-size: 1rem; padding: 10px 15px; }
.n-nav-cta, .n-nav-wa { font-size: .92rem; padding: 14px 22px; }
.n-btn, .btn, .btn-solid, .btn-light { font-size: .95rem; padding: 18px 34px; letter-spacing: .14em; }
.site-footer .btn, .site-footer .btn-solid, .site-footer .n-btn { font-size: .88rem; padding: 14px 20px; }

/* inner pages inherited small type from site.css */
.card p, .plan p, .price-row, .price-row > *, .info-row, .info-item { font-size: 1rem; }
.n-card > h3 { font-size: 1.45rem !important; }
.site-footer { font-size: 1rem; }
.footer-bottom { font-size: .92rem; }

@media (max-width: 960px) { body { font-size: 19px; } }

/* hard floor: nothing renders below 15px */
.n-brand-sub { font-size: .74rem; }              /* ~15.5px */
.n-nav-cta, .n-nav-wa { font-size: 1rem; }
.pr-desc, .price-row .pr-desc { font-size: 1rem !important; }
.btn-solid, .btn, .n-btn, .btn-light { font-size: 1rem !important; }
.site-footer .btn, .site-footer .btn-solid { font-size: .95rem !important; }

/* ==================================================================
   THE ACTUAL CAUSE of "text too small". Every rem in this stylesheet
   resolves against the ROOT element, not against body. html was still
   at the 16px default, so raising `body { font-size }` moved only the
   inherited text and left every rem-based rule — nav, buttons,
   eyebrows, descriptions — at its original small size. Scaling the
   root scales all of them at once.
   ================================================================== */
html { font-size: 20px; }
body { font-size: 1.05rem; }                 /* 21px */
.n-brand-sub { font-size: .8rem; }           /* 16px */
@media (max-width: 960px) { html { font-size: 18px; } }

/* ==================================================================
   Revision 4 — scaling the root to 20px widened the header row too:
   5 nav links + 4 language buttons + 2 CTAs no longer fit, so the
   WhatsApp button ran off the right edge. I had verified font sizes
   and contrast numerically and never checked the LAYOUT they changed.
   ================================================================== */

/* never allow a horizontal scrollbar */
html, body { max-width: 100%; overflow-x: hidden; }

/* header: tighter, and it collapses to the drawer much earlier */
.n-nav-in { gap: 16px; padding: 0 20px; flex-wrap: nowrap; }
.n-links { gap: 20px; }
.n-links a { font-size: .85rem; letter-spacing: .08em; white-space: nowrap; }
.n-brand-name { font-size: 1.5rem; letter-spacing: .22em; }
.n-brand-sub { font-size: .62rem; letter-spacing: .18em; }
.n-lang a { font-size: .85rem; padding: 8px 11px; }
.n-nav-cta, .n-nav-wa { font-size: .8rem; padding: 12px 16px; white-space: nowrap; }

/* below 1280px the full row cannot fit at this type size — use the drawer */
@media (max-width: 1280px) {
  .n-links { display: none; }
  .n-burger { display: block; }
}
@media (max-width: 760px) {
  .n-nav-wa { display: none; }
  .n-lang { display: none; }
}

/* the hero headline was taking the whole viewport */
.n-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.n-hero { min-height: 78vh; padding-top: 7rem; }
.n-hero .n-sub { font-size: clamp(1rem, 2vw, 1.35rem); }

/* ==================================================================
   Revision 5 — Seb: "the homepage looked fine before".
   Correct. Scaling `html` to 20px scaled EVERY rem, including the
   paddings, gaps and widths that lay out the header — so making text
   bigger also made the layout wider and pushed the nav off-screen.
   Root goes back to 16px so the layout is exactly as it was, and the
   TEXT is raised in explicit px instead. Bigger type, untouched layout.
   ================================================================== */
html { font-size: 16px; }
body { font-size: 19px; line-height: 1.8; }

/* layout-neutral text sizes, all >= 15px */
.n-links a            { font-size: 15px; letter-spacing: .1em; }
.n-lang a             { font-size: 15px; padding: 8px 12px; }
.n-nav-cta, .n-nav-wa { font-size: 14px; padding: 12px 18px; }
.n-brand-name         { font-size: 27px; letter-spacing: .26em; }
.n-brand-sub          { font-size: 11px; letter-spacing: .2em; }

.n-eyebrow, .script, .section-head .script { font-size: 15px !important; letter-spacing: .24em; }
.n-sec-intro          { font-size: 20px; }
.n-row h3             { font-size: 30px; }
.n-row .n-desc        { font-size: 18px; }
.n-price              { font-size: 26px; }
.n-dur                { font-size: 15px; }
.n-tariff .n-min      { font-size: 66px; }
.n-tariff .n-lbl      { font-size: 15px; }
.n-tariff .n-chf      { font-size: 28px; }
.n-facts .k           { font-size: 15px; }
.n-facts li span      { font-size: 18px; }
.n-hero p.n-lead      { font-size: 21px; }

.n-btn, .btn, .btn-solid, .btn-light { font-size: 15px !important; padding: 16px 30px; }
.site-footer, .site-footer a         { font-size: 17px; }
.footer-bottom                       { font-size: 15px; }
.card p, .plan p, .price-row, .price-row > * { font-size: 18px; }
.pr-desc, .price-row .pr-desc        { font-size: 17px !important; }
.n-card > h3                         { font-size: 24px !important; }

/* header fits again at 16px root, so restore the desktop nav breakpoint */
@media (min-width: 1100px) { .n-links { display: flex; } .n-burger { display: none; } }
.n-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); }

.n-brand-sub { font-size: 13px; }

/* Seb's window is narrower than 1280 and the secondary WhatsApp button was
   still clipped. Drop it earlier, and collapse the link row earlier too. */
@media (max-width: 1450px) { .n-nav-wa { display: none; } }
@media (max-width: 1250px) { .n-links { display: none; } .n-burger { display: block; } }
@media (min-width: 1251px) { .n-links { display: flex; } .n-burger { display: none; } }

/* the name column was too narrow, wrapping "Traditionelle Thai-/Massage" */
.price-row { grid-template-columns: minmax(260px, 1fr) auto 1fr !important; align-items: start; gap: 10px 26px; }
.price-row .pr-title { white-space: normal; padding-right: 12px; }
.price-row .pr-dots { display: none; }