/* Hallmark · shape: Long Document · genre: editorial · theme: custom, cream paper and torn deep-green bands from the client's three references (deal: custom) · job: book · draw: 721e90
 * hero: Stage, cream head over a photograph with a green block behind it and one floating card · nav: edge-aligned wordmark, links, one action · footer: green torn mast · imagery: the client's own photographs in slots · signature: torn paper bands plus the day as bars, 15 hourly bars that become the futsal hour picker
 * axes: light/grotesk-sans/warm · posture: warm · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, no futsal photograph of the ground in play yet, so the futsal hero borrows the lawn and netting */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 76px; }
body { min-height: 100vh; font-weight: 400; }
h1, h2, h3 { font-weight: var(--display-weight); }
.serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; height: var(--nav-h); background: color-mix(in oklab, var(--color-light) 58%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border-bottom: 1px solid color-mix(in oklab, var(--color-light) 55%, transparent); transition: background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), backdrop-filter var(--dur-long) var(--ease-out), -webkit-backdrop-filter var(--dur-long) var(--ease-out); }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; }
.brand__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }
.brand__mark svg { width: 22px; height: 22px; }
.nav__links { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.nav__links a { position: relative; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-xs); transition: color var(--dur-short) var(--ease-out); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- buttons: coral is WhatsApp, green is everything else ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 56px; padding: 0 var(--space-xs) 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-green); color: var(--color-green-ink); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-green-2); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-micro); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn__chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-green-ink); transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__chip { transform: translateX(3px); } }
.btn--wa { background: var(--color-accent); color: var(--color-accent-ink); padding-inline: var(--space-lg); font-weight: 500; }
.btn--wa:hover { background: var(--color-accent-hi); }
.btn--clear { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); padding-inline: var(--space-lg); }
.btn--clear:hover { background: var(--color-ink); color: var(--color-paper); }
.band .btn--clear { color: var(--color-green-ink); box-shadow: inset 0 0 0 1.5px var(--color-green-ink); }
.band .btn--clear:hover { background: var(--color-green-ink); color: var(--color-green); }
.btn--sm { min-height: 44px; padding-inline: var(--space-lg); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: min(calc(100svh - var(--nav-h)), 800px); padding-block: var(--space-2xl); overflow: clip; }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 34%; background: var(--color-green); }
.hero__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.hero__head { grid-column: 1 / 7; }
.hero__stage { position: relative; grid-column: 7 / 13; }
.hero h1 { max-width: 11ch; font-size: clamp(2.9rem, 4.8vw + 0.6rem, 5.6rem); line-height: 1; }
.hero .lead { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-xl); line-height: 1.35; margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 30ch; }
.hero__photo { aspect-ratio: 4 / 5; max-height: 640px; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-cast); }
.hero--short { min-height: 0; padding-block: var(--space-2xl); }
.facts { display: flex; list-style: none; margin: var(--space-xl) 0 0; padding: 0; }
.facts li { display: flex; flex-direction: column; gap: var(--space-xs); padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts svg { width: 22px; height: 22px; color: var(--color-ink-2); }
.floatcard { position: absolute; left: calc(var(--space-xl) * -1); bottom: var(--space-xl); display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm); border-radius: var(--radius-card); background: var(--color-light); box-shadow: var(--shadow-cast); text-decoration: none; transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .floatcard:hover { transform: translateY(-4px); } }
.floatcard [data-slot] { width: 88px; height: 88px; border-radius: var(--radius-inner); flex: none; }
.floatcard b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-lg); }
.floatcard span { display: block; font-size: var(--text-sm); color: var(--color-muted); max-width: 18ch; }

/* ---------- sections and torn paper ---------- */
.section { padding-block: var(--section-gap-s); }
.section--paper2 { background: var(--color-paper-2); }
.band { position: relative; background: var(--color-green); color: var(--color-green-ink); padding-block: var(--section-gap-s); }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 56px; background: var(--color-paper); pointer-events: none; -webkit-mask: var(--wave-a) center / 100% 100% no-repeat; mask: var(--wave-a) center / 100% 100% no-repeat; }
.band::before { top: -1px; }
.band::after { bottom: -1px; transform: scaleY(-1); -webkit-mask-image: var(--wave-b); mask-image: var(--wave-b); }
.band--top::after { display: none; }
.band--paper2::before, .band--paper2::after { background: var(--color-paper-2); }
.band h2 { color: var(--color-green-ink); }
.band .muted, .band p { color: var(--color-green-muted); }
.section__head { margin-bottom: var(--space-2xl); }
.section__head p { color: var(--color-muted); }
.band .section__head p { color: var(--color-green-muted); }

/* offer cards */
.offer { display: flex; flex-direction: column; padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .offer:hover { transform: translateY(-6px); box-shadow: var(--shadow-cast); } }
.offer__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-inner); }
.offer__chip { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 2; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-light); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.offer__body { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; padding: var(--space-lg) var(--space-md) var(--space-md); }
.offer h3 { font-size: var(--text-xl); }
.band .offer p, .offer p { color: var(--color-muted); }
.offer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: auto; padding-top: var(--space-lg); }
.offer__price { font-family: var(--font-serif); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.offer__price small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }

/* about collage + stats */
.collage { position: relative; aspect-ratio: 1 / 0.95; max-width: 640px; margin-inline: auto; }
.collage .cz { position: absolute; border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 6px solid var(--color-paper); }
.collage .c1 { left: 0; top: 0; width: 66%; height: 62%; }
.collage .c2 { right: 0; top: 14%; width: 38%; height: 40%; z-index: 2; }
.collage .c3 { left: 18%; bottom: 0; width: 52%; height: 50%; z-index: 3; }
.about__copy h2 { max-width: 14ch; }
.about__copy > p { margin-top: var(--space-md); color: var(--color-muted); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.stat { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); text-align: center; }
.stat b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* the day as bars */
.statement .num { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(3.25rem, 6vw, 6rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.statement p { margin-top: var(--space-md); color: var(--color-muted); }
.day__bars { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: var(--space-xs); align-items: end; height: 220px; }
.day__bars i { display: block; height: var(--h); border-radius: var(--radius-pill) var(--radius-pill) var(--space-2xs) var(--space-2xs); background: var(--color-green-3); transform-origin: bottom; }
.day__bars i.late { background: var(--color-cobalt); }
.day__bars i.now { background: var(--color-ink); }
html.js .day__bars i { transform: scaleY(0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
html.js .day.in .day__bars i { transform: scaleY(1); }
.day__ticks { display: flex; justify-content: space-between; margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* steps */
.steps { counter-reset: s; padding: 0; margin: 0; }
.steps li { list-style: none; counter-increment: s; }
.step { height: 100%; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.step::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-lg); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-serif); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: var(--space-xs); }
.step p { color: var(--color-muted); }

/* close, then green footer */
.close { padding-block: var(--section-gap-s); }
.close__card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.close h2 { grid-column: 1 / 8; max-width: 14ch; font-size: var(--text-display-s); }
.close .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.close .actions { grid-column: 9 / 13; margin: 0; justify-content: flex-end; }
.close__text { grid-column: 1 / 8; }

/* ---------- panels, forms, tabs ---------- */
.clear { background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.clear p, .band .clear p { color: var(--color-muted); }
.poolblock { row-gap: var(--space-lg); margin-bottom: var(--space-2xl, var(--space-xl)); }
.poolblock figure { margin: 0; }
.poolblock [data-slot] { aspect-ratio: 4 / 3; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.poolblock figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.pkg { display: grid; gap: var(--space-md); }
.pkg__pool { margin: 0 0 var(--space-md); font-size: var(--text-title); }
.pkg__pool span { margin-left: var(--space-xs); font-size: var(--text-sm); font-weight: 500; opacity: .8; }
.pkg__card, .terms { padding: var(--space-xl); height: 100%; }
.pkg__card h3, .terms h3 { margin-bottom: var(--space-md); font-size: var(--text-title); }
.pkg__list, .terms__list { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-xs); }
.pkg__list small { color: var(--color-muted); }
.pkg__extra, .terms__note { margin: var(--space-md) 0 0; }
.terms__note { font-weight: 500; }
.panel { padding: var(--space-xl); }
.panel h2, .panel h3 { margin-bottom: var(--space-md); font-size: var(--text-title); }
.tabs { display: inline-flex; padding: var(--space-2xs); gap: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-green-2); margin-bottom: var(--space-xl); }
.tabs button { min-height: 48px; padding: 0 var(--space-xl); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-green-muted); font-weight: 500; cursor: pointer; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.tabs button[aria-selected="true"] { background: var(--color-paper); color: var(--color-ink); }
.tabs button:active { transform: scale(0.96); }
.tabpanel[hidden] { display: none; }
.tabpanel h2 { font-size: var(--text-display-s); max-width: 14ch; }
.tabpanel p { margin-top: var(--space-lg); max-width: 46ch; font-size: var(--text-lead); }
.field { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-light); color: var(--color-ink); transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { padding: var(--space-md); min-height: 120px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }

/* futsal slots */
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.slot { display: grid; gap: var(--space-3xs); text-align: left; padding: var(--space-md) var(--space-sm); min-height: 84px; border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-light); color: var(--color-ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.slot b { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.slot span { font-size: var(--text-sm); color: var(--color-muted); }
.slot.late { background: var(--color-cobalt-soft); border-color: transparent; }
.slot:hover { border-color: var(--color-green-3); }
@media (hover: hover) and (pointer: fine) { .slot:hover { transform: translateY(-2px); } }
.slot:active { transform: scale(0.96); transition-duration: var(--dur-micro); }
.slot[aria-pressed="true"] { background: var(--color-green); border-color: var(--color-green); color: var(--color-green-ink); transform: scale(1.03); box-shadow: var(--shadow-card); }
.slot[aria-pressed="true"] span { color: var(--color-green-muted); }
.legend { display: flex; gap: var(--space-lg); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: var(--space-2xs); margin-right: var(--space-xs); vertical-align: -2px; border: 1px solid var(--color-rule); background: var(--color-light); }
.legend .late::before { background: var(--color-cobalt-soft); border-color: transparent; }
.summary { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); }
.summary .total { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3.5rem, 5vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; margin-block: var(--space-sm) var(--space-lg); }
.summary ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; border-top: 1px solid var(--color-rule); min-height: 56px; }
.summary li { display: flex; justify-content: space-between; padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule-2); font-variant-numeric: tabular-nums; }
.summary .empty { color: var(--color-muted); padding-block: var(--space-md); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* two pools, rooms */
.pair figure { margin: 0; }
.pair [data-slot] { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.pair figure:first-child [data-slot] { aspect-ratio: 4 / 3; }
.pair figure:last-child [data-slot] { aspect-ratio: 3 / 4; }
.pair figcaption { margin-top: var(--space-md); font-family: var(--font-serif); font-size: var(--text-xl); }

dialog.lightbox { width: fit-content; max-width: 92vw; padding: 0; border: 0; background: transparent; overflow: visible; }
dialog.lightbox::backdrop { background: color-mix(in oklab, var(--color-ink) 78%, transparent); }
dialog.lightbox img { display: block; width: auto; max-width: 92vw; max-height: 84vh; border-radius: var(--radius-card); box-shadow: var(--shadow-cast); }
dialog.lightbox form { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 2; }
dialog.lightbox .btn { background: var(--color-light); color: var(--color-ink); box-shadow: none; }
dialog.lightbox[open] { animation: pop var(--dur-long) var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* contact */
.hours { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: 1px solid var(--color-rule); }
.hours li { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); font-variant-numeric: tabular-nums; }
.hours li span:last-child { color: var(--color-muted); }

/* ---------- footer: green, torn at the top ---------- */
.foot { position: relative; margin-top: var(--space-2xl); padding-block: var(--space-3xl) var(--space-xl); background: var(--color-deep); color: var(--color-green-ink); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 56px; background: var(--color-paper); -webkit-mask: var(--wave-a) center / 100% 100% no-repeat; mask: var(--wave-a) center / 100% 100% no-repeat; pointer-events: none; }
.foot__mast { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3rem, 10vw, 9rem); line-height: 0.95; letter-spacing: -0.02em; }
.foot__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-2xl); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot a { font-size: var(--text-sm); }
.foot nav a, .foot__grid > a:not(.btn) { color: var(--color-green-muted); transition: color var(--dur-short) var(--ease-out); }
.foot nav a:hover, .foot__grid > a:not(.btn):hover { color: var(--color-green-ink); }
.foot .btn { font-size: var(--text-md); }
.foot small { display: block; margin-top: var(--space-xl); font-size: var(--text-xs); color: var(--color-green-muted); }

/* ---------- reveal (the one) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 62rem) {
  .hero { min-height: 0; padding-block: var(--space-xl); }
  .hero::before { top: auto; width: 100%; height: 45%; }
  .hero__head, .hero__stage { grid-column: 1 / -1; }
  .hero__photo { aspect-ratio: 4 / 3; }
  .floatcard { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); }
  .facts li { padding-inline: var(--space-md); }
  .summary { position: static; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .close__card { padding: var(--space-xl) var(--space-lg); }
  .close h2, .close__text, .close .actions { grid-column: 1 / -1; justify-content: flex-start; }
  .close .actions { margin-top: var(--space-lg); }
}
@media (max-width: 48rem) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: var(--space-lg); }
  .facts { flex-wrap: wrap; row-gap: var(--space-md); }
  .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js .day__bars i { transform: none; }
}

.hero--plain::before { display: none; }
.hero--plain .lead { max-width: 40ch; }
.band .field label { color: var(--color-green-muted); }
.statement .num, .stat b, .offer__price, .summary .total, .foot__mast, .floatcard b, .hero .lead, .pair figcaption, .step::before { font-variant-numeric: lining-nums tabular-nums; }
.btn--sm { white-space: nowrap; }
.btn--sm .btn__chip { width: 32px; height: 32px; }
.btn--sm .btn__chip svg { width: 16px; height: 16px; }
.offer__foot { flex-wrap: wrap; }
@media (max-width: 62rem) { .hero::before { display: none; } }
.bleed { aspect-ratio: 21 / 9; width: 100%; }
@media (max-width: 62rem) { .bleed { aspect-ratio: 4 / 3; } }



/* ---------- home hero: full-screen slideshow ---------- */
.hero--slider { display: block; height: 100svh; min-height: 640px; max-height: none; padding: 0; color: var(--color-green-ink); background: var(--color-deep); }
.hero--slider::before { display: none; }
.hero--slider::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; z-index: 3; background: var(--color-green); pointer-events: none; transform: scaleY(-1); -webkit-mask: var(--wave-b) center / 100% 100% no-repeat; mask: var(--wave-b) center / 100% 100% no-repeat; }
.hero--slider + .band::before { display: none; }
.slides { position: absolute; inset: 0; }
.hero--slider .slide { position: absolute; inset: 0; background: var(--color-deep); color: var(--color-green-ink); }
html.js .hero--slider .slide { opacity: 0; transition: opacity 1200ms var(--ease-out); }
html.js .hero--slider .slide.is-active { opacity: 1; }
html:not(.js) .hero--slider .slide:not(.is-active) { display: none; }
.hero--slider .slide > img { transform: scale(1.08); transition: transform 8000ms linear; }
.hero--slider .slide.is-active > img { transform: scale(1); }
.hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--color-deep) 85%, transparent) 0%, color-mix(in oklab, var(--color-deep) 50%, transparent) 48%, transparent 85%), linear-gradient(180deg, color-mix(in oklab, var(--color-deep) 60%, transparent) 0%, transparent 24%), linear-gradient(0deg, color-mix(in oklab, var(--color-deep) 60%, transparent) 0%, transparent 38%); }
.hero--slider .hero__main { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; padding-top: var(--nav-h); padding-bottom: var(--space-3xl); }
.hero--slider h1 { color: var(--color-green-ink); max-width: 11ch; font-size: clamp(3rem, 5.4vw + 0.6rem, 6.4rem); }
.hero--slider .lead { color: var(--color-green-ink); max-width: 28ch; }
.hero--slider .btn--clear { color: var(--color-green-ink); box-shadow: inset 0 0 0 1.5px var(--color-green-ink); }
.hero--slider .btn--clear:hover { background: var(--color-green-ink); color: var(--color-deep); }
.hero--slider .btn--clear .btn__chip { background: var(--color-green-ink); color: var(--color-deep); }
.hero--slider .btn--clear:hover .btn__chip { background: var(--color-deep); color: var(--color-green-ink); }
.slider__ui { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(56px + var(--space-lg)); }
.slider__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.slider__cap { margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-green-ink); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.dots { display: flex; gap: var(--space-xs); }
.dot { display: flex; align-items: center; width: 56px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot i { display: block; width: 100%; height: 3px; border-radius: 3px; background: color-mix(in oklab, var(--color-green-ink) 35%, transparent); position: relative; overflow: hidden; transform-origin: center; transition: transform var(--dur-short) var(--ease-out); }
.dot i::after { content: ""; position: absolute; inset: 0; background: var(--color-green-ink); transform: scaleX(0); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .dot:hover i { transform: scaleY(1.8); } }
.dot.is-active i::after { animation: fill 6500ms linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.hero--slider.is-paused .dot i::after, .hero--slider.is-hold .dot i::after { animation-play-state: paused; }
.slider__ctrl { display: flex; gap: var(--space-sm); }
.round { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-deep) 40%, transparent); color: var(--color-green-ink); box-shadow: inset 0 0 0 1.5px var(--color-green-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.round:hover { background: var(--color-green-ink); color: var(--color-deep); }
.round:active { transform: scale(0.94); transition-duration: var(--dur-micro); }
.round svg { width: 22px; height: 22px; }
.slider__prev svg { transform: scaleX(-1); }
.slider__pause .i-play, .slider__pause[aria-pressed="true"] .i-pause { display: none; }
.slider__pause[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 48rem) {
  .hero--slider { min-height: 600px; }
  .hero--slider .hero__main { align-items: flex-end; padding-bottom: calc(var(--space-3xl) + var(--space-2xl)); }
  .hero__scrim { background: linear-gradient(0deg, color-mix(in oklab, var(--color-deep) 88%, transparent) 0%, color-mix(in oklab, var(--color-deep) 55%, transparent) 55%, color-mix(in oklab, var(--color-deep) 20%, transparent) 100%); }
  .dot { width: 32px; }
  .slider__pause { display: none; }
  .round { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--slider .slide > img { transform: none; transition: none; }
  .dot.is-active i::after { animation: none; transform: scaleX(1); }
}

/* glass nav over the slideshow */
/* sticky, not fixed: the nav keeps its own place in the page, and the hero slides up underneath it so the clear nav sits over the photo */
.nav--hero { margin-bottom: calc(var(--nav-h) * -1); }
.nav--hero.at-top .brand { color: var(--color-green-ink); }
.nav--hero.at-top .nav__links a { color: color-mix(in oklab, var(--color-green-ink) 86%, transparent); }
.nav--hero.at-top .nav__links a:hover, .nav--hero.at-top .nav__links a[aria-current="page"] { color: var(--color-green-ink); }
.btn--call { padding-inline: var(--space-lg); }

/* ---------- inner pages: half-screen photo hero ---------- */
.hero--photo { display: block; height: max(50svh, 480px); min-height: 0; padding: 0; color: var(--color-green-ink); background: var(--color-deep); }
.hero--photo::before { display: none; }
.hero--photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; z-index: 3; background: var(--color-paper); pointer-events: none; transform: scaleY(-1); -webkit-mask: var(--wave-b) center / 100% 100% no-repeat; mask: var(--wave-b) center / 100% 100% no-repeat; }
.hero--photo:has(+ .band)::after { background: var(--color-green); }
.hero--photo + .band::before { display: none; }
.hero--photo .hero__bg { position: absolute; inset: 0; border-radius: 0; }
.hero--photo .hero__bg > img { animation: drift 14s var(--ease-out) both; }
@keyframes drift { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero--photo .hero__main { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; padding-top: var(--nav-h); padding-bottom: var(--space-xl); }
.hero--photo h1 { color: var(--color-green-ink); max-width: 14ch; font-size: clamp(2.6rem, 3.8vw + 0.6rem, 5rem); }
.hero--photo .lead { color: var(--color-green-ink); max-width: 34ch; }
.hero--photo .actions { margin-top: var(--space-lg); }
.hero--photo .btn--clear { color: var(--color-green-ink); box-shadow: inset 0 0 0 1.5px var(--color-green-ink); }
.hero--photo .btn--clear:hover { background: var(--color-green-ink); color: var(--color-deep); }
.hero--photo .btn--clear .btn__chip { background: var(--color-green-ink); color: var(--color-deep); }
.hero--photo .btn--clear:hover .btn__chip { background: var(--color-deep); color: var(--color-green-ink); }
.hero--photo .btn--call { background: var(--color-green-ink); color: var(--color-deep); }
.hero--photo .btn--call:hover { background: var(--color-light); }
@media (max-width: 48rem) {
  .hero--photo { height: auto; min-height: 480px; }
  .hero--photo .hero__main { padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-3xl); }
}
@media (prefers-reduced-motion: reduce) { .hero--photo .hero__bg > img { animation: none; } }

/* ---------- pool-wave dividers: a soft back wave and a solid front wave, drifting slowly ---------- */
.band, .foot { overflow-x: clip; }
.band::before, .band::after, .foot::before, .hero--slider::after, .hero--photo::after {
  left: 0; right: auto; width: calc(100% + 1440px); height: 72px;
  -webkit-mask-size: 1440px 100%; mask-size: 1440px 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: 0 0; mask-position: 0 0;
  transform: scaleY(var(--sy, 1)); animation: sway 48s linear infinite;
}
.band::after, .hero--slider::after, .hero--photo::after { --sy: -1; animation-direction: reverse; }
@keyframes sway { from { transform: translateX(0) scaleY(var(--sy, 1)); } to { transform: translateX(-1440px) scaleY(var(--sy, 1)); } }
@media (prefers-reduced-motion: reduce) {
  .band::before, .band::after, .foot::before, .hero--slider::after, .hero--photo::after { animation: none; }
}

/* at the very top the nav is clear; any scroll frosts it */
.nav--hero.at-top { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: blur(0px) saturate(1); backdrop-filter: blur(0px) saturate(1); }

/* ---------- motion ----------
   Marketing site, seen occasionally: motion is allowed to be generous on load and scroll,
   and stays near-invisible on hover. transform and opacity only, one curve (--ease-out). */
html { scroll-behavior: smooth; }

/* load: the nav drops in, the hero text rises in sequence */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.nav__in { animation: drop 700ms var(--ease-out) both; }
.hero--slider .hero__head > *, .hero--photo .hero__head > * { animation: rise 1000ms var(--ease-out) both; }
.hero__head > :nth-child(1) { animation-delay: 120ms; }
.hero__head > :nth-child(2) { animation-delay: 260ms; }
.hero__head > :nth-child(3) { animation-delay: 400ms; }
.slider__ui { animation: rise 900ms var(--ease-out) 700ms both; }

/* scroll: photos settle from a slight zoom as their card or frame reveals */
html.js [data-reveal] [data-slot] > img, html.js .bleed > img { transform: scale(1.12); transition: transform 1600ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js [data-reveal].in [data-slot] > img, html.js .bleed.in > img { transform: none; }
html.js .bleed > img { transition-duration: 2200ms; }

/* collage: the three photos arrive one after another */
html.js .collage[data-reveal] { opacity: 1; transform: none; }
html.js .collage .cz { opacity: 0; transform: translateY(32px) scale(0.94); transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); }
html.js .collage.in .cz { opacity: 1; transform: none; }
html.js .collage .c2 { transition-delay: 140ms; }
html.js .collage .c3 { transition-delay: 280ms; }

/* futsal hour tiles ripple in. Animation with backwards fill, so hover and press still work after */
html.js .slots:not(.in) .slot { opacity: 0; }
html.js .slots.in .slot { animation: rise-sm 600ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 32ms); }

/* hover: a slow, small push on photos. Mouse only */
@media (hover: hover) and (pointer: fine) {
  html.js .offer.in:hover .offer__img > img { transform: scale(1.05); transition-duration: 900ms; transition-delay: 0ms; }
}

/* hero photos drift slower than the page */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--photo .hero__bg, .hero--slider .slides { top: -10%; animation: parallax linear both; animation-timeline: scroll(root block); animation-range: 0 100svh; }
  }
}
@keyframes parallax { to { transform: translateY(12%); } }

/* between pages: a soft crossfade, the nav and the WhatsApp button hold still */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .nav__in, .hero--slider .hero__head > *, .hero--photo .hero__head > *, .slider__ui, html.js .slots.in .slot { animation: none; }
  html.js [data-reveal] [data-slot] > img, html.js .bleed > img { transform: none; transition: none; }
  html.js .collage .cz { opacity: 1; transform: none; transition: none; }
  html.js .slots:not(.in) .slot { opacity: 1; }
}

/* ---------- footer: logo, a short note with icons, the map ---------- */
.foot__logo { display: inline-flex; align-items: center; gap: var(--space-md); text-decoration: none; }
.foot__logo .brand__mark { width: 56px; height: 56px; }
.foot__logo .brand__mark svg { width: 30px; height: 30px; }
.foot__word { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; }
.foot__about p { max-width: 30ch; color: var(--color-green-muted); font-size: var(--text-lg); line-height: 1.45; }
.foot__icons { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.round--foot { width: 48px; height: 48px; text-decoration: none; background: transparent; }
.foot__map { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-green-2); box-shadow: var(--shadow-cast); }
.foot__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-green-ink) 18%, transparent); }
.foot__bar nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__bar nav a { color: var(--color-green-muted); transition: color var(--dur-short) var(--ease-out); }
.foot__bar nav a:hover { color: var(--color-green-ink); }
.foot__bar small { margin: 0; }
@media (max-width: 62rem) {
  .foot__map { aspect-ratio: 16 / 10; }
}

/* ---------- floating call and WhatsApp: icons only ---------- */
.fab { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 40; display: flex; flex-direction: column; gap: var(--space-sm); view-transition-name: site-float; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.fab.is-away { opacity: 0; pointer-events: none; transform: translateY(16px); }
.fab__btn { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius-pill); text-decoration: none; box-shadow: var(--shadow-cast); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.fab__btn svg { width: 26px; height: 26px; }
.fab__btn:active { transform: scale(0.94); transition-duration: var(--dur-micro); }
.fab__btn--wa { background: var(--color-accent); color: var(--color-accent-ink); }
.fab__btn--call { background: var(--color-deep); color: var(--color-green-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--color-green-ink) 30%, transparent), var(--shadow-cast); }
@media (hover: hover) and (pointer: fine) {
  .fab__btn:hover { transform: translateY(-3px); }
  .fab__btn--wa:hover { background: var(--color-accent-hi); }
  .fab__btn--call:hover { background: var(--color-green); }
}
@media (max-width: 48rem) { .fab { right: var(--space-md); bottom: var(--space-md); } .fab__btn { width: 54px; height: 54px; } }

/* ---------- touch and pressed feel ---------- */
a, button, [role="tab"], .slot, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hero--slider { touch-action: pan-y; }
.dot:active i { transform: scaleY(2.4); transition-duration: var(--dur-micro); }
.nav__links a:active { color: var(--color-ink-2); }

/* ---------- gentler surfaces when the visitor asks ---------- */
@media (prefers-reduced-transparency: reduce) {
  /* denser glass, still frosted: Windows reports this setting for many desktops that have transparency effects switched off */
  .nav { background: color-mix(in oklab, var(--color-light) 82%, transparent); }
  .nav--hero.at-top { background: transparent; }
  .round { background: color-mix(in oklab, var(--color-deep) 72%, transparent); }
}
@media (prefers-contrast: more) {
  .btn--clear, .round, .hero--slider .btn--clear, .hero--photo .btn--clear { box-shadow: inset 0 0 0 2.5px currentColor; }
  .slot, .field input, .field textarea { border-color: var(--color-ink-2); }
}

/* keep the slideshow controls clear of the floating call and WhatsApp buttons */
@media (min-width: 48.01rem) { .slider__ctrl { margin-right: calc(var(--space-2xl) + var(--space-md)); } }
@media (max-width: 48rem) { .slider__ctrl { display: none; } }

/* no hairline under the nav, in any state */
.nav, .nav--hero { border-bottom: 0; }

/* ---------- written content: intro, corners of the property, questions ---------- */
.intro__copy p { max-width: 54ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.55; }
.intro__copy p + p { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-md); }
.about__copy > p a, .intro__copy a, .faq a, .gallery__intro a { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.about__copy > p { max-width: 46ch; }
.about__copy > p + p { margin-top: var(--space-md); }
.spot { margin: 0; }
.spot__img { aspect-ratio: 4 / 3; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.spot h3 { margin-top: var(--space-md); font-size: var(--text-xl); }
.spot p { margin-top: var(--space-xs); color: var(--color-muted); }
.spots__note { margin-top: var(--space-xl); font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-ink-2); }
.gallery__intro { max-width: 60ch; margin-bottom: var(--space-2xl); font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.45; color: var(--color-ink-2); }
.faq { border-top: 1px solid var(--color-rule); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) 0; font-size: var(--text-lg); font-weight: 500; cursor: pointer; list-style: none; transition: color var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: var(--space-xs); border-right: 2px solid var(--color-ink-2); border-bottom: 2px solid var(--color-ink-2); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-long) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { max-width: 62ch; padding-bottom: var(--space-lg); color: var(--color-muted); animation: rise-sm 420ms var(--ease-out) both; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--color-green); } }
@media (prefers-reduced-motion: reduce) { .faq details p { animation: none; } }

/* keep the credit line clear of the floating call and WhatsApp buttons */
.foot__bar small { margin-right: calc(var(--space-2xl) + var(--space-md)); }
@media (max-width: 48rem) { .foot__bar small { margin-right: 0; } .foot { padding-bottom: calc(var(--space-3xl) + var(--space-xl)); } }

/* ---------- photo collages: overlapping frames, tap to enlarge ---------- */
.cz { padding: 0; background: none; cursor: zoom-in; overflow: hidden; }
.cz [data-slot] { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.cz:active { transition-duration: var(--dur-micro); }
@media (hover: hover) and (pointer: fine) { html.js .collage.in .cz:hover { transform: translateY(-4px); box-shadow: var(--shadow-cast); transition-delay: 0ms; } }
.collage--flip .c1 { left: auto; right: 0; }
.collage--flip .c2 { right: auto; left: 0; }
.collage--flip .c3 { left: auto; right: 18%; }
.gal + .gal { margin-top: var(--section-gap-s); }
.gal__copy h2 { max-width: 12ch; font-size: var(--text-display-s); }
.gal__copy p { margin-top: var(--space-md); max-width: 46ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; }

/* ---------- Bootstrap grid: gutters follow the site's own spacing ---------- */
.row { --bs-gutter-x: var(--gap-columns); --bs-gutter-y: var(--gap-columns); }
.offer { height: 100%; }
.stat b { font-size: clamp(1.6rem, 2.6vw, var(--text-3xl)); }

/* ---------- hamburger and the slide-in menu (Bootstrap's Offcanvas drives it) ---------- */
.nav__toggle { display: inline-grid; place-content: center; gap: var(--space-2xs); width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.nav__toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.nav__toggle span:nth-child(2) { width: 15px; justify-self: end; }
.nav--hero.at-top .nav__toggle { color: var(--color-green-ink); }
.nav__toggle:active { transform: scale(0.92); transition-duration: var(--dur-micro); }
@media (hover: hover) and (pointer: fine) { .nav__toggle:hover { background: color-mix(in oklab, var(--color-ink) 8%, transparent); } }

.offcanvas { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045; display: flex; flex-direction: column; width: min(420px, 100%); max-width: 100%; padding: var(--space-lg); overflow-y: auto; color: var(--color-green-ink); background: color-mix(in oklab, var(--color-deep) 90%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); }
html.js .offcanvas { visibility: hidden; transform: translateX(100%); transition: transform var(--dur-long) var(--ease-out); }
html.js .offcanvas.showing, html.js .offcanvas.show:not(.hiding) { transform: none; }
html.js .offcanvas.showing, html.js .offcanvas.hiding, html.js .offcanvas.show { visibility: visible; }
/* without scripting there is no menu button, so the plain links stay on show */
html:not(.js) .offcanvas, html:not(.js) .nav__toggle { display: none; }
html:not(.js) .nav > .container > nav.d-none { display: block !important; }
html:not(.js) .nav__links { gap: var(--space-md); flex-wrap: wrap; }
.offcanvas-backdrop { position: fixed; inset: 0; z-index: 1040; background: var(--color-ink); }
.offcanvas-backdrop.fade { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.offcanvas-backdrop.show { opacity: 0.55; }
.offcanvas__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
.offcanvas .brand { color: var(--color-green-ink); }
.round--menu { width: 48px; height: 48px; }
.offcanvas__links { list-style: none; margin: 0; padding: 0; }
.offcanvas__links li { border-bottom: 1px solid color-mix(in oklab, var(--color-green-ink) 16%, transparent); }
.offcanvas.show .offcanvas__links li { animation: rise-sm 600ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--i, 0) * 60ms); }
.offcanvas__links a { display: block; padding: var(--space-md) 0; font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 500; letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-green-ink); transition: color var(--dur-short) var(--ease-out), padding var(--dur-short) var(--ease-out); }
.offcanvas__links a[aria-current="page"] { color: var(--color-accent); }
.offcanvas__links a:active { color: var(--color-accent); }
.offcanvas__cta { display: grid; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-xl); }
.offcanvas__cta .btn { width: 100%; }
.offcanvas .btn--call { background: var(--color-green-ink); color: var(--color-deep); }
@media (prefers-reduced-transparency: reduce) { .offcanvas { background: color-mix(in oklab, var(--color-deep) 97%, transparent); } }
@media (prefers-reduced-motion: reduce) { html.js .offcanvas, .offcanvas-backdrop.fade { transition: none; } .offcanvas.show .offcanvas__links li { animation: none; } }


/* ---------- availability: the Pool page calendar, and booked futsal hours ---------- */
.slot.is-booked, .slot:disabled { background: var(--color-paper-3); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; text-decoration: line-through; transform: none; }
.slot.is-booked span, .slot:disabled span { text-decoration: none; display: inline-block; font-weight: 500; }
.avail { padding: var(--space-xl); }
.avail__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.avail__bar .tabs { margin-bottom: 0; }
.avail__rooms { margin: 0 0 var(--space-lg); font-size: var(--text-sm); }
.avail__bar .tabs, .avail__bar .seg { flex: 1 1 280px; max-width: 24rem; }
.avail__bar .tabs button, .avail__bar .seg button { flex: 1 1 0; min-height: 44px; padding: 0 var(--space-md); font: 500 var(--text-sm)/1 var(--font-body); }
.seg { display: inline-flex; padding: var(--space-2xs); gap: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.seg button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button.is-on { background: var(--color-green); color: var(--color-green-ink); }
.avail__month { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; }
.avail__month strong { min-width: 9ch; text-align: center; font-weight: 500; }
.avail__month button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-light); color: var(--color-ink); font-size: var(--text-xl); line-height: 1; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.avail__month button:hover:not(:disabled) { background: var(--color-accent-soft); }
.avail__month button:disabled { opacity: .35; cursor: not-allowed; }
.avail__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.avail__dow { text-align: center; padding-block: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.avail__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3xs); min-height: 64px; padding: var(--space-xs) var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-light); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); font-variant-numeric: tabular-nums; }
.avail__day small { font-size: .68rem; font-weight: 500; color: var(--color-green); }
.avail__day .lbl-short { display: none; }
.avail__day:active:not(:disabled) { transform: scale(.95); }
.avail__day.is-booked { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.avail__day.is-booked span { text-decoration: line-through; } .avail__day.is-booked small { color: var(--color-muted); }
.avail__day.is-closed { background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 6px, var(--color-paper-2) 6px 12px); color: var(--color-muted); cursor: not-allowed; }
.avail__day.is-closed small { color: var(--color-muted); }
.avail__day.is-past { opacity: .4; cursor: default; } .avail__day.is-past small { visibility: hidden; }
.avail__day.is-today { border-color: var(--color-ink); }
.avail__day.is-in, .avail__day.is-start { background: var(--color-green); border-color: var(--color-green); color: var(--color-green-ink); }
.avail__day.is-in small, .avail__day.is-start small, .avail__day.is-out small { color: var(--color-green-muted); }
.avail__day.is-out { background: var(--color-accent-soft); border-color: var(--color-accent); }
.avail__day.is-out small { color: var(--color-ink-2); }
.avail__day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.avail__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.lg { display: inline-block; width: 14px; height: 14px; margin-right: calc(var(--space-xs) * -1); border-radius: var(--space-2xs); border: 1px solid var(--color-rule); }
.lg--free { background: var(--color-light); } .lg--booked { background: var(--color-paper-3); } .lg--closed { background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 3px, var(--color-paper-2) 3px 6px); }
.avail__pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
#availPick { font-weight: 500; }
#availGo[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 40rem) {
  .avail { padding: var(--space-md); }
  .avail__month { margin-left: 0; width: 100%; justify-content: space-between; }
  .avail__day { min-height: 54px; } .avail__day .lbl-long { display: none; } .avail__day .lbl-short { display: inline; }
  .seg button { padding: 0 var(--space-md); }
}

/* the booking panel and the calendar are one section now */
.band .avail { margin-top: var(--space-xl); color: var(--color-ink); }
#availPick { margin-bottom: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-accent-soft); color: var(--color-ink); font-weight: 500; line-height: 1.4; }
.avail__day.is-free:not(.is-start):not(.is-in):not(.is-out):hover { border-color: var(--color-green); background: var(--color-accent-soft); }
.band .clear .field label { color: var(--color-ink-2); }

/* a primary button in the accent colour that is not WhatsApp: it goes to another page */
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { background: var(--color-accent-hi); }
.btn--accent .btn__chip { background: var(--color-ink); color: var(--color-green-ink); }
.pkg__price { margin: 0 0 var(--space-md); }
.pkg__price b { color: var(--color-ink); font-weight: 600; }
.pkg__times { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-paper-3); }
.pkg__times dt { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }
.pkg__times dd { margin: 0; font-weight: 500; }
.common { margin-bottom: var(--space-xl); row-gap: var(--space-lg); }
.common .pkg__times { border-bottom: 0; padding-bottom: 0; }
.pkg__same { margin: 0; font-size: var(--text-sm); }