/* ================================================================
   EDIT: BUSINESS THEME. Text, logo, contacts, products and photos are
   configured in client-config.js. Desktop measurements below follow
   the supplied reference proportions; phone rules restore readable
   text and touch targets without scaling the entire page.
   ================================================================ */
:root {
  --navy: #0f3a5f;
  --navy-hover: #194e78;
  --blue: #426f98;
  --light-blue: #a9c6dc;
  --ink: #050505;
  --muted: #f3f5f7;
  --panel: #e3e8ed;
  --border: #d1d1d1;
  --dark: #161616;
  --white: #fff;
  --radius: 5px;
  --font: Arial, Helvetica, sans-serif;
  --s: min(.1059322vw, 1.525424px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; background: white; color: var(--ink); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; object-fit: cover; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #78a7cd; outline-offset: 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; line-height: 1.22; letter-spacing: -.025em; }
h2 { font-size: calc(34 * var(--s)); }
h3 { font-size: calc(21 * var(--s)); }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 90%; max-width: 1296px; margin-inline: auto; }
.section { font-size: calc(12 * var(--s)); padding-block: calc(76 * var(--s)); }
.muted { background: var(--muted); }
.eyebrow { color: var(--blue); font-size: calc(11 * var(--s)); line-height: 1.2; margin-bottom: calc(7 * var(--s)); font-weight: 500; }
.section-heading { text-align: center; margin: 0 auto calc(66 * var(--s)); }
.section-heading h2 { margin-inline: auto; }
.section-heading > p:not(.eyebrow) { max-width: calc(425 * var(--s)); margin: calc(18 * var(--s)) auto 0; }
.section-heading.left { text-align: left; }
.section-heading.left h2, .section-heading.left > p:not(.eyebrow) { margin-left: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: calc(54 * var(--s)); }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(22 * var(--s)); }
.icon { display: inline-block; width: calc(15 * var(--s)); height: calc(15 * var(--s)); color: var(--blue); flex-shrink: 0; vertical-align: middle; }
.icon-box { width: calc(38 * var(--s)); height: calc(38 * var(--s)); display: grid; place-items: center; border-radius: 2px; background: #f0f3f5; }
.icon-box .icon { width: calc(22 * var(--s)); height: calc(22 * var(--s)); }
.icon-list { display: grid; gap: calc(5 * var(--s)); }
.icon-list li { display: flex; align-items: flex-start; gap: calc(9 * var(--s)); }
.icon-list .icon { margin-top: calc(1 * var(--s)); }
/* Accessible navigation aid is hidden until explicitly keyboard-focused. */
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 30; transform: translateY(-200%); background: white; padding: 14px 20px; color: var(--navy); }
.skip-link:focus { transform: none; }

/* EDIT: Shared buttons. Labels come from copy in client-config.js. */
.button { display: inline-flex; justify-content: center; align-items: center; gap: calc(8 * var(--s)); min-height: calc(38 * var(--s)); padding: calc(10 * var(--s)) calc(24 * var(--s)); border: 1px solid transparent; border-radius: 2px; font-size: calc(11 * var(--s)); font-weight: 500; line-height: 1.25; text-align: center; transition: background-color .18s, border-color .18s; }
.button-primary { background: var(--navy); color: white; }
.button-primary:hover { background: var(--navy-hover); color: white; }
.button-white { background: white; border-color: #e5e5e5; color: #00172c; }
.button-white:hover { background: #edf2f7; color: var(--navy); }
.button-outline { background: transparent; border-color: #d6dfe7; color: #002e52; }
.button-outline:hover { background: #edf2f6; border-color: var(--blue); }
.button-ghost { background: transparent; border-color: #ffffff26; color: white; }
.button-ghost:hover { background: #ffffff12; border-color: #ffffff80; color: white; }
.button-row { display: flex; flex-wrap: wrap; gap: calc(7 * var(--s)); }

/* EDIT: Company logo in business.logo. Desktop navigation remains visible at 797px. */
.site-header { --s: min(.1254705vw, 1.806775px); background: var(--dark); color: white; border: 1px solid #303234; }
.header-inner { width: 94%; max-width: 1354px; min-height: calc(39 * var(--s)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: calc(28 * var(--s)); }
.brand { color: #686868; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: calc(25 * var(--s)); font-style: italic; font-weight: 400; line-height: 1; }
.brand:hover { color: #aaa; }
.brand img { max-width: calc(120 * var(--s)); max-height: calc(34 * var(--s)); object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: calc(19 * var(--s)); font-size: calc(9 * var(--s)); font-weight: 600; }
.main-nav > a:not(.button):hover { color: var(--light-blue); }
.nav-book { min-height: calc(21 * var(--s)); padding: calc(5 * var(--s)) calc(10 * var(--s)); font-size: calc(9 * var(--s)); }
.menu-toggle { display: none; }

/* EDIT: Hero image in images.hero. Size and overlay reproduce the reference crop. */
.hero { --s: min(.1254705vw, 1.806775px); position: relative; isolation: isolate; display: flex; align-items: center; min-height: calc(475 * var(--s)); color: white; background: #080e12; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; z-index: -2; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0008 0%, #0006 45%, #0003 100%); }
.hero-inner { width: 89%; padding-block: calc(78 * var(--s)) calc(72 * var(--s)); }
.hero-copy { max-width: calc(410 * var(--s)); }
.hero .eyebrow { color: #79aaca; font-weight: 600; font-size: calc(9 * var(--s)); margin-bottom: calc(7 * var(--s)); }
.hero h1 { font-size: calc(34 * var(--s)); line-height: 1.24; }
.hero-description { max-width: calc(320 * var(--s)); margin-top: calc(15 * var(--s)); font-size: calc(9 * var(--s)); font-weight: 600; line-height: 1.45; }
.hero-points { margin-top: calc(12 * var(--s)); font-size: calc(9 * var(--s)); gap: calc(3 * var(--s)); }
.hero-points .icon { width: calc(11 * var(--s)); height: calc(11 * var(--s)); color: #80b6da; }
.hero-points li { gap: calc(6 * var(--s)); }
.hero .button-row { margin-top: calc(20 * var(--s)); }
.hero .button { font-size: calc(9 * var(--s)); min-height: calc(30 * var(--s)); padding: calc(8 * var(--s)) calc(17 * var(--s)); }

/* EDIT: About content in copy.about* and aboutPoints; image in images.about. */
.about { --s: min(.096432vw, 1.388622px); padding-block: calc(90 * var(--s)) calc(74 * var(--s)); font-size: calc(13 * var(--s)); }
.about .container { width: 90.25%; }
.about .split { gap: calc(60 * var(--s)); }
.about h2 { font-size: calc(38 * var(--s)); line-height: 1.2; }
.about .eyebrow { font-size: calc(12 * var(--s)); }
.about-description { margin-top: calc(22 * var(--s)); line-height: 1.35; }
.about .icon-list { margin-top: calc(17 * var(--s)); gap: calc(5 * var(--s)); line-height: calc(17 * var(--s)); }
.about .icon { width: calc(14 * var(--s)); height: calc(14 * var(--s)); }
.about .button { margin-top: calc(24 * var(--s)); min-height: calc(39 * var(--s)); font-size: calc(12 * var(--s)); }
.about-image { width: 100%; aspect-ratio: 1; height: auto; border-radius: var(--radius); object-fit: cover; }

/* EDIT: Services in services. Compact stacked cards follow the desktop reference. */
.services { --s: min(.2074689vw, 2.987552px); padding-block: calc(26 * var(--s)); }
.services .section-heading { margin-bottom: calc(32 * var(--s)); }
.services .eyebrow { font-size: calc(5.5 * var(--s)); margin-bottom: calc(4 * var(--s)); }
.services h2 { font-size: calc(18 * var(--s)); max-width: calc(285 * var(--s)); }
.services .section-heading > p:not(.eyebrow) { font-size: calc(5.5 * var(--s)); max-width: calc(190 * var(--s)); margin-top: calc(12 * var(--s)); }
.service-list { display: grid; gap: calc(11 * var(--s)); }
.service-card { display: flex; align-items: flex-start; gap: calc(22 * var(--s)); padding: calc(21 * var(--s)); min-height: calc(86 * var(--s)); border: 1px solid var(--border); border-radius: 3px; background: white; }
.service-card .icon-box { flex-shrink: 0; width: calc(20 * var(--s)); height: calc(20 * var(--s)); }
.service-card .icon { width: calc(12 * var(--s)); height: calc(12 * var(--s)); }
.service-card h3 { font-size: calc(14 * var(--s)); margin-bottom: calc(9 * var(--s)); }
.service-card p { max-width: calc(195 * var(--s)); font-size: calc(5.5 * var(--s)); line-height: 1.45; }

/* EDIT: Gallery images/captions in gallery. Exact 3:2 frames preserve supplied photo crops. */
.gallery { padding-block: calc(74 * var(--s)) calc(33 * var(--s)); }
.gallery .eyebrow { margin-bottom: calc(5 * var(--s)); }
.gallery .container { width: 91.2%; }
.gallery .section-heading { margin-bottom: calc(64 * var(--s)); }
.gallery .section-heading > p:not(.eyebrow) { max-width: calc(375 * var(--s)); margin-top: calc(16 * var(--s)); }
.gallery .section-heading .button { margin-top: calc(23 * var(--s)); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(23 * var(--s)) calc(22 * var(--s)); }
.gallery-item { margin: 0; text-align: center; }
.gallery-item button { display: block; width: 100%; padding: 0; border: 0; background: none; overflow: hidden; border-radius: var(--radius); }
.gallery-item img { width: 100%; height: auto; aspect-ratio: 1.4945; object-fit: cover; transition: filter .2s; }
.gallery-item button:hover img { filter: brightness(1.08); }
.gallery-item figcaption { margin-top: calc(7 * var(--s)); font-size: calc(10 * var(--s)); }

/* EDIT: Benefit cards in benefits; heading width intentionally creates two lines. */
.benefits { --s: min(.1046025vw, 1.506276px); padding-block: calc(85 * var(--s)) calc(55 * var(--s)); }
.benefits .eyebrow { margin-bottom: calc(5 * var(--s)); }
.benefits .section-heading { margin-bottom: calc(63 * var(--s)); }
.benefits .section-heading h2 { max-width: calc(460 * var(--s)); }
.benefits .section-heading > p:not(.eyebrow) { max-width: calc(360 * var(--s)); margin-top: calc(16 * var(--s)); }
.benefit-card { padding: calc(27 * var(--s)); background: white; border: 1px solid var(--border); border-radius: var(--radius); }
.benefit-card h3 { margin-top: calc(16 * var(--s)); margin-bottom: calc(10 * var(--s)); line-height: 1.2; }
.benefit-card p { font-size: calc(12 * var(--s)); line-height: 1.35; }

/* EDIT: Products and badges in products. Badge width leaves room for reference title wrapping. */
.packages { --s: min(.1076426vw, 1.550054px); padding-block: calc(60 * var(--s)) calc(50 * var(--s)); }
.packages .container { width: 92.8%; max-width: 1336px; }
.packages .eyebrow { margin-bottom: calc(3 * var(--s)); }
.packages .section-heading { margin-bottom: calc(64 * var(--s)); }
.packages .section-heading > p:not(.eyebrow) { max-width: calc(430 * var(--s)); font-size: calc(11.5 * var(--s)); margin-top: calc(16 * var(--s)); }
.package-card { display: flex; flex-direction: column; min-height: calc(459 * var(--s)); padding: calc(27 * var(--s)); border: 1px solid #cbced2; border-radius: var(--radius); background: var(--muted); }
.package-card.featured { background: var(--navy); color: white; border-color: #7c9ab2; }
.package-card .icon-box { margin-bottom: calc(16 * var(--s)); background: #e8ebef; }
.package-card.featured .icon-box { background: #ffffff0a; }
.package-card.featured .icon { color: var(--light-blue); }
.package-title { position: relative; min-height: calc(19 * var(--s)); }
.package-title:has(.package-badge) { padding-right: calc(72 * var(--s)); }
.package-title h3 { font-size: calc(15 * var(--s)); line-height: 1.25; letter-spacing: -.035em; }
.package-card.featured .package-title h3 { font-weight: 600; }
.package-badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); max-width: calc(70 * var(--s)); padding: calc(3 * var(--s)) calc(5 * var(--s)); font-size: calc(10 * var(--s)); font-weight: 500; line-height: 1.05; color: #668bac; background: #e8ebef; border-radius: 2px; }
.featured .package-badge { color: #aecde6; background: #ffffff0c; }
.package-description { font-size: calc(11.5 * var(--s)); margin-top: calc(2 * var(--s)); line-height: 1.4; }
.package-price { margin-top: calc(12 * var(--s)); font-size: calc(34 * var(--s)); letter-spacing: -.045em; line-height: 1; }
.package-note { margin-top: calc(5 * var(--s)); font-size: calc(10 * var(--s)); }
.package-includes { margin-top: calc(17 * var(--s)); padding-top: calc(17 * var(--s)); border-top: 1px solid #0002; font-size: calc(11 * var(--s)); }
.featured .package-includes { border-color: #ffffff25; }
.package-card .icon-list { margin: calc(17 * var(--s)) 0 calc(23 * var(--s)); font-size: calc(11 * var(--s)); line-height: 1.4; gap: calc(5 * var(--s)); }
.package-card .icon-list .icon { width: calc(13 * var(--s)); height: calc(13 * var(--s)); }
.package-card .button { margin-top: auto; width: 100%; min-height: calc(37 * var(--s)); font-weight: 600; padding-inline: calc(12 * var(--s)); }

/* EDIT: Testimonials in testimonials. A multicolor SVG replaces the approximate letter G. */
.reviews { --s: min(.1044932vw, 1.504702px); padding-block: calc(81 * var(--s)) calc(57 * var(--s)); }
.reviews .eyebrow { margin-bottom: calc(5 * var(--s)); }
.reviews .section-heading { margin-bottom: calc(63 * var(--s)); }
.reviews .section-heading > p:not(.eyebrow) { max-width: calc(350 * var(--s)); margin-top: calc(16 * var(--s)); }
.review-card { margin: 0; display: flex; flex-direction: column; min-height: calc(208 * var(--s)); padding: calc(26 * var(--s)); border: 1px solid var(--border); border-radius: var(--radius); background: white; }
.review-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(17 * var(--s)); }
.stars { color: var(--blue); font-size: calc(18 * var(--s)); letter-spacing: 0; line-height: 1; }
.google-mark { width: calc(12 * var(--s)); height: calc(12 * var(--s)); }
.review-card blockquote { padding: 0; margin: 0 0 calc(13 * var(--s)); font-size: calc(13 * var(--s)); line-height: 1.4; }
.review-card figcaption { margin-top: auto; font-size: calc(11 * var(--s)); }
.review-card figcaption strong { display: block; font-weight: 500; }
.review-card figcaption span { display: block; margin-top: calc(3 * var(--s)); font-size: calc(10 * var(--s)); }

/* EDIT: FAQ in faqs. The reference uses a narrow centered column, even on tablets. */
.faq { --s: min(.1440922vw, 2.074928px); padding-block: calc(12 * var(--s)) calc(15 * var(--s)); }
.faq .eyebrow { font-size: calc(8 * var(--s)); margin-bottom: calc(5 * var(--s)); }
.faq h2 { font-size: calc(26 * var(--s)); }
.faq .section-heading { margin-bottom: calc(46 * var(--s)); }
.faq .section-heading > p:not(.eyebrow) { font-size: calc(8 * var(--s)); margin-top: calc(13 * var(--s)); }
.faq-list { width: 61.3%; max-width: 794px; margin-inline: auto; display: grid; gap: calc(6 * var(--s)); }
.faq-list details { border: 1px solid #c8cdd2; border-radius: calc(4 * var(--s)); background: var(--panel); }
.faq-list summary { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(18 * var(--s)); padding: calc(12 * var(--s)) calc(16 * var(--s)) calc(10 * var(--s)); font-size: calc(9 * var(--s)); font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { width: calc(10 * var(--s)); height: calc(10 * var(--s)); transform: rotate(180deg); }
.faq-list details[open] summary .icon { transform: none; }
.faq-list details p { padding: 0 calc(16 * var(--s)) calc(11 * var(--s)); max-width: 94%; font-size: calc(8 * var(--s)); line-height: 1.5; }
.faq-cta { text-align: center; margin-top: calc(54 * var(--s)); }
.faq-cta h3 { font-size: calc(17 * var(--s)); }
.faq-cta p { max-width: calc(290 * var(--s)); margin: calc(8 * var(--s)) auto calc(17 * var(--s)); font-size: calc(8 * var(--s)); }
.faq-cta .button { min-height: calc(28 * var(--s)); font-size: calc(8 * var(--s)); padding: calc(8 * var(--s)) calc(18 * var(--s)); }

/* EDIT: Contact fields in index.html; company details and hours in business. */
.contact { --s: min(.1432665vw, 2.063037px); padding-block: calc(59 * var(--s)) calc(26 * var(--s)); }
.contact .container { width: 91.25%; }
.contact h2 { font-size: calc(26 * var(--s)); }
.contact .eyebrow { font-size: calc(8 * var(--s)); margin-bottom: calc(3 * var(--s)); }
.contact .intro { max-width: calc(290 * var(--s)); margin-top: calc(12 * var(--s)); font-size: calc(8 * var(--s)); }
.contact .split { gap: calc(40 * var(--s)); }
.contact-details { display: grid; gap: calc(9 * var(--s)); margin: calc(20 * var(--s)) 0 calc(26 * var(--s)); font-size: calc(11 * var(--s)); }
.contact-line { display: flex; align-items: flex-start; gap: calc(9 * var(--s)); }
.contact-line strong, .contact-line a, .contact-line div > span { display: block; }
.contact-line strong { font-weight: 600; }
.contact-line a:hover { text-decoration: underline; }
.contact-line .icon { width: calc(14 * var(--s)); height: calc(14 * var(--s)); }
.contact .contact-details { font-size: calc(8 * var(--s)); gap: calc(7 * var(--s)); margin: calc(13 * var(--s)) 0 calc(16 * var(--s)); }
.contact .contact-line .icon { width: calc(10 * var(--s)); height: calc(10 * var(--s)); }
.contact .contact-line { gap: calc(8 * var(--s)); }
.workshop-image, .booking-image { width: 100%; height: auto; aspect-ratio: 1.493; object-fit: cover; border-radius: var(--radius); }
.workshop-image { align-self: start; margin-top: calc(136 * var(--s)); }
.form { display: flex; flex-direction: column; align-items: stretch; }
.form label { margin-bottom: calc(4 * var(--s)); font-size: calc(11 * var(--s)); font-weight: 500; line-height: 1.2; }
.form input, .form select, .form textarea { width: 100%; min-width: 0; min-height: calc(36 * var(--s)); margin: 0 0 calc(17 * var(--s)); padding: calc(9 * var(--s)); color: var(--ink); background: transparent; border: 1px solid #d2d5d9; border-radius: 2px; font-size: calc(11 * var(--s)); line-height: 1.3; }
.form textarea { resize: vertical; min-height: calc(68 * var(--s)); }
.form input::placeholder, .form textarea::placeholder { color: #60758a; opacity: 1; }
.form .button { align-self: flex-start; }
.form-status { margin-top: 12px; font-size: 14px; }
.form-status:empty { display: none; }
.form-status a { text-decoration: underline; font-weight: 600; }
.form-hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact .form label, .contact .form input, .contact .form select, .contact .form textarea { font-size: calc(8 * var(--s)); }
.contact .form input, .contact .form select { min-height: calc(28 * var(--s)); }
.contact .form label { margin-bottom: calc(3 * var(--s)); }
.contact .form input, .contact .form select, .contact .form textarea { padding: calc(7 * var(--s)); margin-bottom: calc(14 * var(--s)); }
.contact .form .button { min-height: calc(28 * var(--s)); padding: calc(7 * var(--s)) calc(16 * var(--s)); font-size: calc(8 * var(--s)); }

/* EDIT: Requested Google Maps addition. URLs are in business.mapsLink / mapsEmbedUrl. */
.map-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.map-heading p:not(.eyebrow) { margin-top: 14px; font-size: 14px; }
#google-map { display: block; width: 100%; height: 360px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }

/* EDIT: Booking image and contacts in configuration. WhatsApp flow remains unchanged. */
.booking { padding-block: calc(17 * var(--s)) calc(44 * var(--s)); color: white; background: var(--navy); }
.booking .container { width: 90%; }
.booking .split { gap: calc(54 * var(--s)); }
.booking .eyebrow { color: #afc6e2; }
.booking h2 { white-space: nowrap; }
.booking .intro { max-width: calc(360 * var(--s)); margin-top: calc(12 * var(--s)); font-size: calc(11 * var(--s)); font-weight: 600; line-height: 1.4; }
.booking .contact-details { margin-top: calc(18 * var(--s)); margin-bottom: calc(22 * var(--s)); }
.booking .contact-line .icon { color: var(--light-blue); }
.booking .contact-line a:hover { color: white; }
.booking-whatsapp { margin-bottom: calc(19 * var(--s)); font-weight: 600; }
.booking-image { align-self: start; margin-top: calc(220 * var(--s)); }
.booking .form label { font-weight: 600; }
.booking .form input, .booking .form select { color: white; border-color: #ffffff30; color-scheme: dark; }
.booking .form select option, .booking .form select optgroup { background: var(--navy); color: white; }
.booking .form input::placeholder { color: #bcd0e3; }
.booking .form input:focus, .booking .form select:focus { outline-color: var(--light-blue); }
.booking .form .button { margin-top: calc(6 * var(--s)); }

/* EDIT: Footer company information in business, and short service names in services.footerLabel. */
.site-footer { --s: min(.1057082vw, 1.522199px); padding: calc(60 * var(--s)) 0 calc(41 * var(--s)); background: var(--dark); color: white; font-size: calc(11 * var(--s)); }
.footer-grid { display: grid; grid-template-columns: 2.9fr .8fr .8fr .8fr 2.2fr; gap: calc(28 * var(--s)); }
.site-footer h3 { margin-bottom: calc(17 * var(--s)); font-size: calc(11 * var(--s)); font-weight: 600; letter-spacing: 0; }
.site-footer a:not(.button):hover { color: var(--light-blue); }
.footer-business .brand { display: inline-block; margin-bottom: calc(21 * var(--s)); }
.social-links { display: flex; gap: calc(12 * var(--s)); margin-bottom: calc(26 * var(--s)); }
.social-links a { display: inline-flex; }
.social-links .icon { width: calc(13 * var(--s)); height: calc(13 * var(--s)); color: white; }
.footer-business p { margin-bottom: calc(8 * var(--s)); }
.footer-business p strong, .footer-business p a { display: block; }
.footer-business p strong { font-weight: 600; }
.footer-email { display: flex; align-items: center; gap: calc(8 * var(--s)); overflow-wrap: anywhere; }
.footer-email .icon { width: calc(14 * var(--s)); height: calc(14 * var(--s)); color: var(--light-blue); }
.footer-links { display: grid; gap: calc(9 * var(--s)); font-size: calc(10 * var(--s)); }
.footer-cta h3 { margin-bottom: calc(6 * var(--s)); }
.footer-cta p { font-size: calc(10 * var(--s)); margin-bottom: calc(17 * var(--s)); }
.footer-cta .button { min-height: calc(36 * var(--s)); }
.copyright { border-top: 1px solid #383838; padding-top: calc(24 * var(--s)); margin-top: calc(90 * var(--s)); font-size: calc(10 * var(--s)); }

/* Gallery viewer: native modal focus handling, Escape, arrows and touch buttons. */
.gallery-dialog { width: min(1000px, 92vw); max-height: 94dvh; padding: 18px; border: 0; border-radius: 8px; color: white; background: var(--dark); }
.gallery-dialog::backdrop { background: #03090de8; }
.gallery-dialog > img { width: 100%; max-height: 72dvh; object-fit: contain; border-radius: 3px; }
.dialog-close { position: absolute; top: 25px; right: 25px; width: 42px; height: 42px; border: 1px solid #ffffff80; border-radius: 50%; background: #000b; color: white; font-size: 30px; line-height: 1; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 18px; text-align: center; }
.gallery-controls h2 { font-size: 22px; letter-spacing: -.02em; }
.gallery-controls p { font-size: 12px; color: #b3c5d3; margin-top: 4px; }
.gallery-controls button { width: 48px; height: 44px; flex-shrink: 0; border: 1px solid #ffffff40; border-radius: 3px; background: transparent; color: white; font-size: 22px; }
.noscript { padding: 20px; background: white; color: black; text-align: center; }

/* EDIT: Small tablet navigation only. Content retains two columns through 641px. */
@media (max-width: 720px) {
  .site-header { --s: 1px; position: relative; z-index: 10; }
  .header-inner { width: 90%; min-height: 60px; }
  .brand { font-size: 28px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid #ffffff40; border-radius: 3px; background: transparent; }
  .menu-toggle span { width: 22px; height: 2px; background: white; transition: transform .15s; }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 20px 5% 28px; background: var(--dark); border-top: 1px solid #333; box-shadow: 0 12px 16px #0002; font-size: 15px; }
  .main-nav.is-open { display: grid; gap: 0; }
  .main-nav > a { padding: 12px 0; }
  .main-nav .nav-book { margin-top: 14px; padding: 13px; font-size: 14px; }
}

/* EDIT: Phone layout. Reflow, rather than miniature desktop text, is intentional.
   The narrow services reference is a reduced desktop capture, not a phone UI. */
@media (max-width: 640px) {
  :root, .section, .hero, .site-footer { --s: 1px; }
  .container, .about .container, .gallery .container, .packages .container, .contact .container, .booking .container, .hero-inner { width: calc(100% - 40px); }
  .section { padding-block: 56px; font-size: 16px; }
  h2, .about h2, .contact h2, .faq h2 { font-size: 30px; }
  h3 { font-size: 21px; }
  .eyebrow, .hero .eyebrow, .about .eyebrow, .services .eyebrow, .faq .eyebrow, .contact .eyebrow { font-size: 11px; margin-bottom: 9px; }
  .button, .hero .button, .faq-cta .button, .contact .form .button { font-size: 14px; min-height: 46px; padding: 12px 20px; }
  .hero { min-height: 590px; }
  .hero-inner { padding-block: 58px; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(32px, 8vw, 42px); }
  .hero-description { font-size: 14px; max-width: none; margin-top: 22px; font-weight: 500; }
  .hero-points { font-size: 13px; gap: 7px; margin-top: 22px; }
  .hero-points .icon { width: 15px; height: 15px; }
  .hero .button-row { display: grid; gap: 10px; margin-top: 24px; }
  .hero .button { width: 100%; }
  .hero-image { object-position: 62% center; }
  .hero::before { background: linear-gradient(90deg, #000c, #0007); }
  .split, .about .split, .contact .split, .booking .split { grid-template-columns: 1fr; gap: 30px; }
  .about-description { font-size: 15px; line-height: 1.5; }
  .about .icon-list { font-size: 14px; gap: 8px; }
  .about .button { font-size: 14px; }
  .section-heading, .gallery .section-heading, .benefits .section-heading, .packages .section-heading, .reviews .section-heading, .faq .section-heading { margin-bottom: 34px; }
  .section-heading > p:not(.eyebrow), .services .section-heading > p:not(.eyebrow), .packages .section-heading > p:not(.eyebrow), .faq .section-heading > p:not(.eyebrow) { font-size: 14px; max-width: none; margin-top: 18px; }
  .services h2 { font-size: 28px; max-width: none; }
  .service-list { gap: 12px; }
  .service-card { padding: 22px 18px; gap: 17px; min-height: 112px; }
  .service-card .icon-box { width: 28px; height: 28px; }
  .service-card .icon { width: 18px; height: 18px; }
  .service-card h3 { font-size: 19px; margin-bottom: 8px; }
  .service-card p { font-size: 13px; max-width: none; }
  .three-grid, .gallery-grid { grid-template-columns: 1fr; gap: 20px; }
  .gallery-item figcaption { font-size: 13px; }
  .benefit-card, .package-card, .review-card { padding: 25px; }
  .benefit-card p { font-size: 15px; }
  .benefits .section-heading h2 { max-width: none; }
  .package-card { min-height: 0; }
  .package-card .icon-box { margin-bottom: 22px; }
  .package-title h3 { font-size: 19px; }
  .package-description { font-size: 14px; margin-top: 8px; }
  .package-price { font-size: 36px; margin-top: 18px; }
  .package-note, .package-includes { font-size: 12px; }
  .package-card .icon-list { font-size: 14px; gap: 8px; margin-bottom: 25px; }
  .package-card .button { min-height: 46px; }
  .review-card { min-height: 0; }
  .stars { font-size: 20px; }
  .google-mark { width: 15px; height: 15px; }
  .review-card blockquote { font-size: 15px; }
  .review-card figcaption { font-size: 13px; }
  .review-card figcaption span { font-size: 12px; }
  .faq-list { width: 100%; gap: 8px; }
  .faq-list summary { padding: 17px; font-size: 14px; font-weight: 600; }
  .faq-list summary .icon { width: 14px; height: 14px; }
  .faq-list details p { padding: 0 17px 17px; max-width: none; font-size: 13px; }
  .faq-cta { margin-top: 40px; }
  .faq-cta h3 { font-size: 24px; }
  .faq-cta p { font-size: 14px; max-width: none; margin: 14px 0 22px; }
  .contact .intro, .booking .intro { font-size: 14px; max-width: none; line-height: 1.5; }
  .contact-details, .contact .contact-details { font-size: 14px; gap: 13px; margin: 24px 0; }
  .contact-line .icon, .contact .contact-line .icon { width: 17px; height: 17px; }
  .form label, .contact .form label { font-size: 14px; margin-bottom: 6px; }
  .form input, .form select, .form textarea, .contact .form input, .contact .form select, .contact .form textarea { font-size: 16px; min-height: 46px; padding: 11px; margin-bottom: 20px; }
  .form textarea { min-height: 110px; }
  .form .button { width: 100%; }
  .workshop-image, .booking-image { margin-top: 0; }
  .booking h2 { white-space: normal; }
  .booking-whatsapp { width: 100%; }
  .form-hint { font-size: 12px; }
  .map-heading { align-items: flex-start; flex-direction: column; }
  .map-heading .button { width: 100%; }
  #google-map { height: 310px; }
  .site-footer { padding: 50px 0 30px; font-size: 14px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .footer-business { grid-column: 1 / -1; }
  .site-footer h3, .footer-links, .footer-cta p { font-size: 13px; }
  .footer-links a { display: inline-block; padding-block: 5px; }
  .social-links a { padding: 9px; margin-left: -9px; }
  .social-links .icon { width: 17px; height: 17px; }
  .footer-cta .button { padding-inline: 10px; font-size: 12px; }
  .copyright { margin-top: 40px; font-size: 11px; }
  .gallery-dialog { padding: 10px; }
  .gallery-controls h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}