:root {
  --ink: #222;
  --muted: #666;
  --line: #e3e3e3;
  --bg: #fff;
  --bg-alt: #f7f7f7;
  --max: 1000px;
  --accent: #1f6feb; /* overridden by /theme.css */
  --accent-dark: color-mix(in srgb, var(--accent) 70%, black); /* text-safe shade of the accent */
  --font-display: inherit; /* /theme.css may set a self-hosted heading face */
  --display-scale: 1;      /* and grow the headings to compensate a small x-height */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; font: 100%/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); color: var(--accent-dark); }
a:hover { text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1rem; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-size: calc(1.25rem * var(--display-scale)); font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .01em; margin-right: auto; }
.call { display: none; } /* phone pill, mobile only */
.nav { display: flex; gap: 1.25rem; }
.nav a { color: var(--ink); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--accent); }
.nav-burger { display: none; }
.nav-toggle { display: none; } /* no phantom tab stop on desktop; the mobile query overrides this */
.nav-burger { width: 2rem; height: 2rem; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.nav-burger span { display: block; height: 2px; background: var(--ink); }

/* hero and intro */
.hero { padding-top: 1rem; }
.hero img { display: block; width: 100%; border-radius: 10px; }
.intro { padding: 1.75rem 1rem 0; }
h1 { font-family: var(--font-display); font-size: calc(2rem * var(--display-scale)); line-height: 1.15; margin: 0 0 .5rem; }
.tagline { font-size: 1.15rem; color: var(--muted); max-width: 42rem; margin: 0 0 1.25rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 0 1rem; }
.button { display: inline-block; padding: .65rem 1.3rem; border-radius: 999px; font-weight: 600; text-decoration: none; color: #fff; background: var(--accent); background: var(--accent-dark); }
.button:hover { filter: brightness(1.12); }
.button.secondary { color: var(--accent-dark); background: transparent; border: 2px solid var(--accent-dark); }

/* sections */
.section { display: flow-root; padding: 2.5rem 1rem; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: 0; }
h2 { font-family: var(--font-display); font-size: calc(1.75rem * var(--display-scale)); line-height: 1.25; margin: 0 0 1rem; clear: both; }
h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--accent); margin-top: .5rem; }
h3 { font-family: var(--font-display); font-size: calc(1.25rem * var(--display-scale)); line-height: 1.3; margin: 1.5rem 0 .5rem; }
h4 { font-size: 1rem; margin: 1rem 0 .25rem; }
p, ul, blockquote, table { margin: 0 0 1rem; }
.lead { font-size: 1.1rem; max-width: 42rem; }
.note { color: var(--muted); font-size: .9rem; }
.section .cta { margin-top: 1.5rem; }
blockquote { border-left: 4px solid var(--accent); padding: .75rem 1rem; color: var(--ink); background: var(--bg-alt); }
blockquote p { margin: 0 0 .5rem; }
blockquote footer { color: var(--muted); font-size: .9rem; }
.quotes { display: grid; gap: 1rem; margin-bottom: 1rem; }
.quotes blockquote { margin: 0; }
@media (min-width: 720px) { .quotes { grid-template-columns: 1fr 1fr; } }
.more summary { cursor: pointer; font-weight: 600; color: var(--accent-dark); margin: .5rem 0 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; clear: both; }
.img-left, .img-right { display: block; margin: 0 auto 1rem; border-radius: 6px; }
@media (min-width: 600px) {
  .img-left { float: left; margin: .25rem 1.25rem 1rem 0; max-width: 45%; }
  .img-right { float: right; margin: .25rem 0 1rem 1.25rem; max-width: 45%; }
}
.cols { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.col-img img { border-radius: 6px; display: block; }
.col-text > :first-child { margin-top: 0; }
@media (min-width: 720px) { .cols { grid-template-columns: 1fr 2fr; align-items: start; } }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid var(--line); padding: .5rem .75rem; vertical-align: top; text-align: left; }
th { background: var(--bg-alt); font-weight: 600; }

/* prices */
.price-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.price-list li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--line); }
.price-list li:last-child { border-bottom: 1px solid var(--line); }
.price-list li > strong { font-size: 1.05rem; }
.price-list li > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .95rem; }
.price { font-weight: 700; white-space: nowrap; color: var(--accent-dark); }
p.price { margin: .25rem 0 1rem; }

/* contact */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.company { font-size: 1.4rem; font-weight: 700; margin: 0; }
.person { font-size: 1.15rem; margin: 0 0 .25rem; }
.booking { margin: 0 0 1rem; color: var(--muted); }
address { font-style: normal; margin: 0 0 1rem; }
.contact-list { list-style: none; padding: 0; }
.extras { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.qr-figure { margin: 0; text-align: center; font-size: .75rem; color: var(--muted); }
.qr { display: block; margin: 0 auto .25rem; border: 1px solid var(--line); border-radius: 6px; }
.social { font-weight: 600; }

/* form */
.contact-form label { display: block; margin-bottom: .9rem; font-weight: 600; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit; font-weight: 400; border: 1px solid #8a8a8a; border-radius: 6px; background: var(--bg); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.contact-form button { font: inherit; font-weight: 600; color: #fff; background: var(--accent); background: var(--accent-dark); border: 0; border-radius: 6px; padding: .7rem 1.4rem; cursor: pointer; }
.contact-form button[disabled] { opacity: .6; cursor: wait; }
.contact-form .note { margin: .75rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.banner { padding: .7rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-alt); }
.banner.ok { border-color: #8bc48b; background: #eef8ee; }
.banner.err { border-color: #e0a0a0; background: #fbeeee; }

/* 404 */
.notfound { text-align: center; padding: 4rem 1rem; border-bottom: 0; }
.notfound h1 { font-size: 1.5rem; }

/* footer */
.footer { padding: 1.5rem 1rem 2.5rem; color: var(--muted); font-size: .9rem; text-align: center; }

/* mobile navigation (checkbox toggle, no JS needed) */
@media (max-width: 759px) {
  .call { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: var(--accent); background: var(--accent-dark); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
  .nav-burger { display: flex; }
  /* the checkbox stays focusable for keyboard users; the label is the visible control */
  .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav { display: none; flex-direction: column; width: 100%; gap: 0; padding: .5rem 0 1rem; }
  .nav a { padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .nav-toggle:checked ~ .nav { display: flex; }
}