/* Hallmark · v2.0.0 · theme: custom · idea: "the site answers, before the first call, the questions people are shy to ask" · vibe: "quiet room at dusk, full and calm" · paper: mist blue oklch(.965 .010 255) · accent: lamp apricot oklch(.80 .105 62), the one action only · faces: Secular One display (Hebrew, modern rounded bold; the owner rejected the serif as "looks like David") over IBM Plex Sans Hebrew · hero: full-width room photograph, dusk shade from the reading side, headline + three facts · posture: light/roman-serif/warm · axes: light/roman-serif/warm · signature: the six questions answered honestly, beside a window photograph */
/* critique v2: the owner found v1 thin (two photos on the home page, long empty gaps, five different layouts). v2 is one card system repeated, 15 real photographs, every section built around a picture or a tool, and the owner's plug-and-play modules. */
/* waive 19: number ranges (0–10, 08:00–20:00, א׳–ה׳) keep the en dash, as Hebrew typography and the owner's rulebook require. */
/* waive 58/83: the owner asked for a fuller page than Hallmark's restraint (more pictures, more sections); the rulebook "no empty place" wins. */
:root {
  --paper: oklch(0.965 0.010 255);
  --paper-2: oklch(0.932 0.017 258);
  --white: oklch(0.995 0.003 255);
  --ink: oklch(0.26 0.045 275);
  --soft: oklch(0.45 0.03 270);
  --line: oklch(0.87 0.02 262);
  --lamp: oklch(0.80 0.105 62);
  --lamp-2: oklch(0.87 0.08 66);
  --lamp-soft: oklch(0.95 0.035 70);
  --night: oklch(0.27 0.05 268);
  --night-soft: oklch(0.82 0.03 262);
  --shade: oklch(0.2 0.04 270 / 0.72);
  --shade-0: oklch(0.2 0.04 270 / 0);
  --glass: oklch(0.99 0.004 255 / 0.92);
  --wa: oklch(0.6 0.15 150);
  --focus: oklch(0.50 0.17 262);
  --focus-day: oklch(0.50 0.17 262);
  --err: oklch(0.50 0.17 25);
  --display: "Secular One", "Segoe UI", Arial, sans-serif;
  --body: "IBM Plex Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --r: 14px; --r-card: 20px; --wrap: 1200px; --gap: 28px;
  --shadow: 0 18px 40px -28px oklch(0.26 0.045 275 / 0.45);
  --sl-paper: var(--paper); --sl-ink: var(--ink); --sl-soft: var(--soft); --sl-line: var(--line);
  --sl-accent: var(--lamp); --sl-on-accent: var(--ink); --sl-field: var(--white); --sl-focus: var(--focus);
  --sl-err: var(--err); --sl-radius: var(--r); --sl-body: var(--body);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.7 var(--body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* buttons: one primary (.sl-btn, lamp), one secondary line, one ghost on photos */
.sl-btn { box-shadow: 0 10px 24px -14px var(--ink); }
.sl-btn:hover { background: var(--lamp-2); }
.btn-line, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: var(--r); font: 600 17px/1.2 var(--body); text-decoration: none; cursor: pointer; background: transparent; transition: background-color .15s ease, color .15s ease; }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { border: 1.5px solid var(--white); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn-line:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; transition: none; }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: var(--glass); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.mark { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.mark-dot { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--lamp); }
.mark-dot.big { width: 56px; height: 56px; }
/* a wide logo (any shape): fixed height, width capped so the menu always fits */
.mark-logo { display: block; height: var(--logo-h, 52px); width: auto; max-width: var(--logo-max, 280px); object-fit: contain; object-position: center; }
.th { --logo-h: 68px; --logo-max: 290px; } /* Betael's logo carries its slogan, so it gets a little more height */
@media (max-width: 480px) { .mark-logo { height: 44px; max-width: 62vw; } }
.mark b { font: 400 25px/1 var(--display); }
.mark span { font-size: 15px; color: var(--soft); }
#nav { margin-inline-start: auto; }
#nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
#nav a { display: block; padding: 8px 12px; font-size: 16px; text-decoration: none; border-radius: 8px; transition: background-color .15s ease; }
#nav a:hover { background: var(--paper-2); }
#nav a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.top-cta { min-height: 44px; padding: 12px 20px; font-size: 16px; }
.menu-btn { display: none; min-height: 44px; padding: 8px 16px; background: none; border: 1.5px solid var(--ink); border-radius: var(--r); color: var(--ink); font: 600 16px/1 var(--body); cursor: pointer; }
.menu-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* the menu button: three lines, understood in every language (the word stays for screen readers) */
.menu-btn { width: 48px; height: 48px; padding: 0; align-items: center; justify-content: center; }
.menu-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* hero */
.hero { position: relative; min-height: min(80svh, 680px); display: flex; color: var(--white); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, var(--shade) 0%, var(--shade) 30%, var(--shade-0) 75%); }
[dir=ltr] .hero::before { background: linear-gradient(to right, var(--shade) 0%, var(--shade) 30%, var(--shade-0) 75%); }
.hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-block: 96px 32px; width: 100%; }
.hero-txt { max-width: 620px; }
.hero h1 { font-size: clamp(40px, 6vw, 70px); font-weight: 400; line-height: 1.05; color: var(--white); }
.hero p { font-size: 21px; margin: 16px 0 32px; color: var(--white); }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.facts li { display: flex; align-items: center; gap: 12px; background: var(--glass); color: var(--ink); border-radius: var(--r); padding: 16px 20px; font-size: 16px; font-weight: 600; }
.facts .ic { color: var(--ink); width: 26px; height: 26px; }

/* sections and cards: one system */
.sec { padding: 88px 0; }
.tint { background: var(--paper-2); }
.sec-head { margin-bottom: 40px; max-width: 720px; }
.sec-head p { margin-top: 12px; font-size: 19px; color: var(--soft); }
.more { margin-top: 32px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: transform .2s ease; }
.card:hover { transform: translateY(-3px); }
.card > a { display: block; height: 100%; text-decoration: none; }
.card > a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-card); }
.card-pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }
.card-txt { display: grid; gap: 4px; padding: 20px 24px 24px; }
.card-txt b, .card.pad b { font: 400 23px/1.25 var(--display); }
.card-txt span, .card.pad p { color: var(--soft); font-size: 16px; }
.card-txt small { color: var(--soft); font-size: 14px; }
.card.pad { padding: 28px; display: grid; gap: 8px; align-content: start; }
.card.pad > .ic { color: var(--lamp); width: 28px; height: 28px; }
.plain .card:hover { transform: none; }

/* steps */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.step-list li { position: relative; background: var(--white); border-radius: var(--r-card); padding: 28px; border: 1px solid var(--line); }
.step-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lamp-soft); color: var(--ink); margin-bottom: 8px; }
.step-ic .ic { width: 26px; height: 26px; }
.step-n { position: absolute; top: 20px; inset-inline-end: 24px; font: 400 40px/1 var(--display); color: var(--line); }
.step-list b { display: block; font: 400 23px/1.25 var(--display); margin: 8px 0 4px; }
.step-list p { color: var(--soft); font-size: 16px; }

/* me */
.me-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.me-pic { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.me-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
.me-txt p { font-size: 19px; margin: 16px 0 20px; max-width: 58ch; }
.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.ticks .ic { color: var(--ink); background: var(--lamp-soft); border-radius: 50%; padding: 4px; width: 28px; height: 28px; }

/* questions */
.ask-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.ask-side p { color: var(--soft); margin: 12px 0 24px; font-size: 18px; }
.ask-pic { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.ask-pic img { width: 100%; height: 100%; object-fit: cover; }
.qs { display: grid; gap: 12px; }
.qs details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 0 24px; }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 400 clamp(18px, 1.7vw, 21px)/1.35 var(--display); }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background:
  linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat, var(--lamp-soft); transition: transform .25s ease; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs details p { padding: 0 0 20px; font-size: 17px; color: var(--soft); max-width: 62ch; }

/* gallery */
.gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 16px; }
.gal-big { grid-column: span 2; grid-row: span 2; }
.gal figure { position: relative; margin: 0; height: 100%; border-radius: var(--r-card); overflow: hidden; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal figcaption { position: absolute; bottom: 12px; inset-inline-start: 12px; background: var(--glass); padding: 4px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.gal li:nth-child(4) { grid-column: span 2; }

/* online */
.online-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.online-pic { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.online-pic img { width: 100%; height: 100%; object-fit: cover; }
.online p { font-size: 19px; margin: 12px 0 24px; }

/* booking */
.book { background: var(--night); color: var(--paper); padding: 88px 0; --focus: var(--lamp); }
.book h2 { color: var(--paper); }
.book-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.book-txt p { font-size: 18px; margin: 12px 0 24px; max-width: 46ch; color: var(--night-soft); }
.book .ticks .ic { background: var(--lamp); }
.book .book-alt { margin: 0; } .book-alt a { color: var(--paper); }
.book-box { background: var(--paper); color: var(--ink); border-radius: var(--r-card); padding: 32px; --focus: var(--focus-day); }
.box-h { font-size: 26px; margin-bottom: 16px; }

/* where + business card */
.where { padding: 88px 0; }
.where-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
.where-txt { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px; }
.where-txt h2 { margin-bottom: 16px; }
.where-txt p { display: flex; gap: 12px; align-items: center; font-size: 17px; margin-bottom: 8px; }
.where-txt .ic { color: var(--soft); }
.where-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.vcard { background: var(--night); color: var(--paper); border-radius: var(--r-card); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; --focus: var(--lamp); }
.vcard-in { display: flex; gap: 16px; align-items: center; }
.vcard b { display: block; font: 400 26px/1.2 var(--display); } .vcard span { color: var(--night-soft); font-size: 15px; }
.vcard-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.vcard-rows li { display: flex; gap: 12px; align-items: center; } .vcard-rows .ic { color: var(--lamp); }
.vcard-act { display: flex; flex-wrap: wrap; gap: 12px; }
.vcard .btn-line { border-color: var(--paper); color: var(--paper); }
.vcard .btn-line:hover { background: var(--paper); color: var(--ink); }

/* newsletter band (module) */
.foot-news { background: var(--lamp-soft); padding: 56px 0; }
.foot-news-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.foot-news h2 { font-size: 34px; } .foot-news p { color: var(--soft); margin-top: 8px; font-size: 18px; }
.foot-news form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: end; }
.foot-news .sl-field { margin: 0 0 12px; } .foot-news .sl-btn { margin-bottom: 12px; }
.foot-news .sl-check, .foot-news .sl-err { grid-column: 1 / -1; }

/* inner pages */
.ph { position: relative; min-height: 360px; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--shade), var(--shade-0) 90%); }
.ph-in { position: relative; z-index: 2; padding-block: 64px 48px; }
.ph h1 { font-size: clamp(42px, 5.6vw, 68px); font-weight: 400; color: var(--white); }
.ph p { font-size: 20px; margin-top: 12px; max-width: 60ch; color: var(--white); }
.area-rows { display: grid; gap: 48px; }
.area-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; scroll-margin-top: 100px; }
.area-row figure { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.area-row img { width: 100%; height: 100%; object-fit: cover; }
.area-row.flip figure { order: 2; }
.area-lead { font-size: 20px; font-weight: 600; margin: 12px 0 8px; }
.area-row p:not(.area-lead) { font-size: 18px; color: var(--soft); margin-bottom: 20px; max-width: 56ch; }
.not-here { display: flex; gap: 20px; align-items: flex-start; padding: 32px; background: var(--paper-2); border-radius: var(--r-card); }
.not-here .ic { width: 32px; height: 32px; color: var(--soft); }
.not-here h2 { font-size: 30px; margin-bottom: 8px; }
.tl { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.tl li { flex: var(--m) 1 0; min-width: 0; }
.tl-min { display: block; font-size: 15px; color: var(--soft); margin-bottom: 8px; }
.tl-bar { display: block; height: 14px; border-radius: 99px; background: var(--ink); margin-bottom: 16px; }
.tl li:nth-child(2) .tl-bar { background: var(--soft); } .tl li:nth-child(3) .tl-bar { background: var(--lamp); } .tl li:nth-child(4) .tl-bar { background: var(--night-soft); }
.tl b { display: block; font: 400 23px/1.2 var(--display); margin-bottom: 4px; }
.tl p { font-size: 16px; color: var(--soft); padding-inline-end: 12px; }
.prices .card { text-align: center; justify-items: center; }
.prices .card.hi { border: 2px solid var(--lamp); }
.price-n { font: 400 46px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.prices .card span:not(.price-n) { color: var(--soft); }
.price-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 32px; font-size: 17px; max-width: 760px; }
.cancel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.cancel-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border-radius: var(--r); padding: 16px 20px; font-size: 17px; }
.cancel-list .ic { color: var(--ink); background: var(--lamp-soft); border-radius: 50%; padding: 4px; width: 28px; height: 28px; }
.read { padding: 48px 0 72px; }
.read-in { max-width: 780px; }
.read h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 400; margin: 24px 0 12px; }
.read-lead { font-size: 21px; color: var(--soft); }
.read-pic { margin: 32px 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 8; }
.read-pic img { width: 100%; height: 100%; object-fit: cover; }
.read h2 { font-size: 30px; margin: 36px 0 8px; }
.read p { font-size: 19px; line-height: 1.8; }
.read-by { margin-top: 40px !important; padding-top: 16px; border-top: 1px solid var(--line); color: var(--soft); font-size: 16px !important; }
.forms-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.form-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px; }
.form-lead { margin: -8px 0 16px; color: var(--soft); }
.legal-in { max-width: 780px; }
.legal-in h2 { font-size: 28px; margin: 28px 0 8px; } .legal-in p { font-size: 18px; }

/* footer */
.foot { background: var(--night); color: var(--night-soft); padding: 64px 0 28px; --focus: var(--lamp); font-size: 16px; }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.foot-mark { font: 400 28px/1 var(--display); color: var(--paper); margin-bottom: 16px !important; }
.foot-h { color: var(--paper); font-weight: 600; margin-bottom: 12px !important; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a { color: var(--paper); text-decoration-color: var(--soft); }
.foot a:hover { text-decoration-color: var(--lamp); }
.foot-legal { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--soft); font-size: 15px; }
.foot-legal span { margin-inline-start: auto; }
.wa-float { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .15s ease; }
.wa-float svg { width: 30px; height: 30px; fill: var(--white); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; transition: none; }

/* tablet and phone */
@media (max-width: 1180px) {
  .menu-btn { display: inline-flex; margin-inline-start: auto; }
  #nav { position: absolute; top: 100%; inset-inline: 0; background: var(--paper); border-bottom: 1px solid var(--line); display: none; }
  #nav.open { display: block; }
  #nav ul { flex-direction: column; padding: 8px 24px 16px; }
  #nav a { padding: 12px 8px; font-size: 18px; }
  .top-in { position: relative; }
  .c4, .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .top-cta { display: none; }
  .hero { min-height: 0; }
  .hero::before, [dir=ltr] .hero::before { background: linear-gradient(to top, var(--shade) 0%, var(--shade) 55%, var(--shade-0) 100%); }
  .hero-in { padding-block: 160px 20px; gap: 28px; }
  .facts, .c3, .c2, .me-in, .ask-in, .online-in, .book-in, .where-in, .foot-news-in, .forms-in, .area-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .area-row.flip figure { order: 0; }
  .sec, .book, .where { padding: 64px 0; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .tl { flex-direction: column; gap: 20px; }
  .tl li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 16px; }
  .tl-bar { grid-row: 1 / span 3; width: 12px; height: auto; min-height: calc(var(--m) * 6px); margin: 0; }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .book-box, .form-box, .where-txt, .vcard { padding: 24px; }
  .me-pic { max-width: 420px; }
  .ph { min-height: 280px; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 16px; }
  .mark span { display: none; }
  .c4, .step-list { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-news form { grid-template-columns: minmax(0, 1fr); }
  .hero p { font-size: 18px; }
  /* phone: the opening is centred, and its actions are one width, stacked */
  .hero-txt { text-align: center; margin-inline: auto; }
  .hero-act { flex-direction: column; align-items: stretch; }
  .hero-act > a, .book .sl-btn, .where-links > a { width: 100%; text-align: center; }
  .facts li { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .qs summary::after, #nav a, .btn-line, .btn-ghost, .wa-float { transition: none; }
  .card:hover { transform: none; }
}

/* the home-page videos: one or two, side by side on a computer, stacked on a phone */
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.vids.one { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin-inline: auto; }
.vid { margin: 0; }
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); background: var(--ink); box-shadow: var(--shadow); }
.vid video:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.vid figcaption { margin-top: 12px; font-size: 16px; color: var(--soft); }
@media (max-width: 860px) { .vids { grid-template-columns: minmax(0, 1fr); } }
/* the language switch beside the menu: the same page in the other language */
.lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.lang-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* menu items, the language link and the call button never break into two lines; the menu folds into the button before they would */
#nav a, .top-cta, .lang-link { white-space: nowrap; }
.top-cta { flex: none; }

/* opening hours, one line a day */
.foot .foot-days { gap: 2px; max-width: 240px; margin-top: 8px; }
.foot-days li { display: flex; justify-content: space-between; gap: 16px; }