/* HIBRID — clean black framing, anthracite surfaces and white branding. Shared appearance. Everyday text and prices live in the HTML files. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.ttf') format('truetype')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.ttf') format('truetype')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.ttf') format('truetype')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/barlow-condensed-800.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/barlow-condensed-900.ttf') format('truetype')}

:root{--paper:#23272b;--anthracite:#23272b;--frame:#000;--ink:#f4f6f7;--muted:#c1c9cd;--line:#58646a;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'Barlow',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.5 var(--body)}
button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #3987c4;outline-offset:6px}button{border:0}svg.icon{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;display:block}.skip-link{position:fixed;top:-70px;left:20px;background:#fff;color:#202429;padding:12px;z-index:100}.skip-link:focus{top:12px}.wrap{width:min(1440px,90%);margin-inline:auto}
.header{height:108px;background:var(--frame)}/* Full-width header: equal outer gutters, with menu slightly right of centre. */
.header-inner{height:100%;width:100%;max-width:none;margin:0;padding-inline:max(5vw,calc((100vw - 1440px)/2));display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,.85fr);align-items:center;gap:30px}
.header-inner .brand{justify-self:start}
.header-inner .navigation{justify-self:center}
.header-inner .socials{justify-self:end}.brand{display:block;width:238.0px;max-width:32vw;flex-shrink:0}.logo-window{display:block;position:relative;overflow:hidden;aspect-ratio:1630/522}.logo-window img{position:absolute;width:120.18405%;height:auto;max-width:none;left:-10.12270%;top:-29.88506%;filter:brightness(0) invert(1)}.navigation{display:flex;gap:30px;align-items:center}.navigation a,.navigation button{font-size:21px;font-weight:600;padding:8px 3px;background:transparent;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent}.navigation a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}.navigation a:hover,.navigation button:not(:disabled):hover{color:#fff}.socials{display:flex;align-items:center;gap:24px}.socials a,.socials button{background:transparent;padding:4px;line-height:0}.socials .icon{width:31px;height:31px}.socials .facebook{fill:currentColor;stroke:none}
.hero{height:clamp(500px,42vw,650px);position:relative;background:#1c242a;color:white;overflow:hidden;isolation:isolate}/* Explicit layers prevent the image container from intercepting hero buttons. */
.slides,.slide,.hero-shade{position:absolute;inset:0}
.slides{z-index:0;pointer-events:none}
.hero-shade{pointer-events:none}
.hero-content{position:relative;z-index:2}
.slideshow-controls{z-index:3}.slide{margin:0;opacity:0;transition:opacity 1.2s ease;z-index:0}.slide.is-active{opacity:1;z-index:1}.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--position,center)}/* Black at the left, fading beyond the headline into the colour photograph. */
.hero-shade{z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 27%,rgba(0,0,0,.48) 47%,rgba(0,0,0,0) 72%),linear-gradient(0deg,rgba(0,0,0,.24),transparent 32%)}.hero-content{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-block:45px 65px}.eyebrow{margin:0 0 14px;font-size:15px;font-weight:500;letter-spacing:.32em;text-transform:uppercase}.hero h1{font:800 clamp(60px,6.2vw,100px)/.91 var(--display);letter-spacing:-.018em;margin:0 0 18px;text-transform:uppercase;text-shadow:0 3px 14px #0009}.hero-subtitle{font-size:clamp(20px,2vw,28px);margin:0 0 28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:60px;padding:14px 28px;font:700 25px/1.15 var(--display);letter-spacing:.015em;text-transform:uppercase;border:1px solid transparent;border-radius:4px;background:#f4f6f7;color:#202429;transition:background .2s,transform .2s}.button:hover{background:white;transform:translateY(-2px)}.button .icon{width:25px}.button-dark{background:var(--anthracite);color:var(--ink)}.button-dark:hover{background:#15191d}.button-outline{border:1px solid currentColor;background:transparent;color:var(--ink)}.button-outline:hover{background:#fff1}.slideshow-controls{position:absolute;bottom:25px;right:5%;display:flex;align-items:center;gap:17px}.slideshow-controls button{background:transparent;color:#fff;min-width:38px;min-height:40px;padding:6px;display:grid;place-items:center}.slideshow-controls button:hover{background:#ffffff20;border-radius:4px}.slide-dots{display:flex;gap:7px}.slide-dots button{min-width:29px;padding:8px}.slide-dots button::before{content:'';display:block;width:7px;height:7px;border:2px solid #fff9;border-radius:50%}.slide-dots button[aria-pressed=true]::before{background:#fff;border-color:#fff;width:10px;height:10px}.slide-count{font-size:17px;font-variant-numeric:tabular-nums;min-width:62px}.play-pause .icon{width:19px;height:19px}
.shortcuts{display:grid;grid-template-columns:1fr 1fr 1fr;padding-block:28px}.shortcut{display:flex;text-align:left;align-items:center;gap:25px;padding:4px 30px;background:transparent;border-right:1px solid var(--line)}.shortcut:first-child{padding-left:0}.shortcut:last-child{border-right:0;padding-right:0}.shortcut>.icon{width:49px;height:49px}.shortcut-text{border-left:1px solid var(--line);padding-left:26px}.shortcut strong{display:block;font:800 33px/1.1 var(--display);text-transform:uppercase}.shortcut small{display:block;font-size:17px;margin-top:4px}.shortcut small span{display:inline-block;margin-left:10px;transition:transform .2s}.shortcut:hover small span{transform:translateX(6px)}
.info-footer{background:var(--anthracite);color:var(--ink);padding:25px 0}.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center;gap:32px}.footer-block{display:flex;gap:24px;align-items:center;min-height:90px;border-right:1px solid #ffffff35;padding-right:26px}.footer-block>.icon{width:48px;height:48px;stroke-width:1.3}.footer-block h2{font:700 18px/1.3 var(--display);letter-spacing:.16em;margin:0 0 5px}.hours{font-size:15px;line-height:1.6}.hours p{margin:0}.hours .day{display:inline-block;min-width:78px}.address{font-size:18px;font-style:normal}.footer-map{font-size:22px;padding-inline:20px;min-height:66px;color:var(--ink)}.small-footer{display:flex;justify-content:space-between;gap:20px;padding-block:14px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.rental-section{display:grid;grid-template-columns:1.7fr 1fr;gap:50px;padding-block:30px}.section-title{font:800 clamp(32px,3vw,45px)/1.1 var(--display);text-transform:uppercase;margin:0 0 20px}.rental-prices{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:20px}.rental-price{border-right:1px solid var(--line)}.rental-price:last-child{border-right:0}.rental-price h3{font-size:16px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0 0 5px}.rental-price p{font:800 62px/1 var(--display);margin:0}.booking-actions{display:grid;grid-template-columns:1fr 1.1fr;gap:16px}.booking-actions .button{font-size:23px;padding:13px 16px;gap:14px}.booking-note{font-size:15px;color:var(--muted);margin:12px 0 0}.pitch-detail{width:100%;height:100%;max-height:290px;object-fit:cover;border-radius:5px}.futsal-footer .footer-grid{grid-template-columns:1fr auto}.futsal-footer .footer-block{min-height:50px;border:0}.futsal-footer .footer-block .icon{width:31px;height:31px}
dialog{color:var(--ink);background:var(--paper);border:0;border-radius:7px;padding:0;width:min(720px,calc(100% - 32px));max-height:90dvh;box-shadow:0 25px 100px #0005;overflow:auto}dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(3px)}.dialog-content{padding:44px}.dialog-close{position:absolute;right:14px;top:14px;display:grid;place-items:center;background:transparent;width:38px;height:38px;border-radius:50%}.dialog-close:hover{background:#fff1}.dialog-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}.dialog-title{font:800 48px/1.05 var(--display);text-transform:uppercase;margin:0 0 24px}.price-list{margin:0 0 22px}.price-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}.price-row dt{font-weight:600}.price-row dd{margin:0;font:700 36px/1 var(--display);white-space:nowrap}.price-row small{display:block;font-size:14px;font-weight:400;color:var(--muted)}.dialog-note{font-size:16px;line-height:1.65}.passes{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.passes span{border:1px solid var(--line);padding:7px 16px;font-weight:700;font-size:16px}.contact-list{display:grid;gap:16px;margin:0 0 24px}.contact-item{display:flex;gap:17px;align-items:center}.contact-item small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.contact-item a{overflow-wrap:anywhere}.contact-item a:hover{text-decoration:underline}.contact-hours{background:var(--anthracite);padding:18px 22px;margin:22px 0}.contact-hours h3{margin:0 0 6px;font-size:16px}.contact-hours p{margin:3px 0;font-size:15px}.map-frame{border:0;width:100%;height:260px;display:block;margin:20px 0 0;border-radius:4px}.map-fallback{font-size:13px;color:var(--muted)}.booking-steps{padding-left:22px;font-size:17px}.booking-steps li{margin-bottom:10px}.dialog-content .button{font-size:22px}.dialog-content p:first-child{margin-top:0}
@media(min-width:1700px){.hero-content{padding-left:0}.hero h1{font-size:108px}}
@media(max-width:1100px){.header{height:95px}.brand{width:238.0px}.navigation{gap:32px}.navigation a,.navigation button{font-size:21px}.socials{gap:16px}.shortcuts{padding-block:24px}.shortcut{padding-inline:20px;gap:15px}.shortcut-text{padding-left:16px}.shortcut strong{font-size:27px}.shortcut small{font-size:15px}.shortcut>.icon{width:36px}.footer-grid{grid-template-columns:1.2fr 1fr;gap:24px}.footer-map{grid-column:1/-1;justify-self:start;min-height:48px}.footer-block:nth-child(2){border:0}.rental-section{gap:25px}.booking-actions{grid-template-columns:1fr}.pitch-detail{max-height:none}.futsal-footer .footer-map{grid-column:auto}}
@media(max-width:700px){body{font-size:16px}.wrap{width:90%}.header{height:auto;min-height:122px}.header-inner{flex-wrap:wrap;gap:10px;padding-block:14px}.brand{width:195.5px;max-width:65vw}.socials{gap:12px}.socials .icon{width:25px;height:25px}.navigation{order:3;width:100%;justify-content:center;gap:44px}.navigation a,.navigation button{font-size:18px;padding:4px 8px}.hero{height:610px;max-height:none}.hero-content{padding-block:60px 105px;justify-content:flex-end}.hero h1{font-size:clamp(52px,10.5vw,74px);max-width:100%}.eyebrow{font-size:12px;letter-spacing:.24em;margin-bottom:14px}.hero-subtitle{font-size:19px;max-width:260px;margin-bottom:23px}.hero-shade{background:linear-gradient(90deg,#000c,rgba(0,0,0,.48) 62%,transparent 100%),linear-gradient(0deg,#000b,transparent 78%)}.slide img{object-position:var(--mobile-position,var(--position,center))}.button{font-size:22px;min-height:55px;padding:13px 24px}.slideshow-controls{left:5%;right:auto;bottom:24px;gap:12px}.shortcuts{display:block;padding-block:6px}.shortcut,.shortcut:first-child,.shortcut:last-child{width:100%;padding:20px 0;border:0;border-bottom:1px solid var(--line);gap:23px}.shortcut:last-child{border:0}.shortcut>.icon{width:37px;height:37px}.shortcut-text{border-left:0;padding-left:0;flex:1}.shortcut strong{font-size:28px}.shortcut small{font-size:16px}.shortcut small span{float:right}.footer-grid{display:flex;flex-direction:column;align-items:stretch;gap:20px}.footer-block{border:0;padding:0;min-height:0;gap:20px}.footer-block>.icon{width:36px;height:36px}.hours{font-size:14px}.hours .day{min-width:72px}.footer-map{align-self:stretch;min-height:57px;font-size:22px}.small-footer{font-size:10px;align-items:center}.rental-section{display:flex;flex-direction:column;gap:25px;padding-block:28px}.rental-prices{margin-bottom:20px}.rental-price h3{font-size:12px;letter-spacing:.1em}.rental-price p{font-size:53px}.section-title{font-size:34px}.booking-actions{gap:12px}.pitch-detail{height:220px}.futsal-footer .footer-grid{display:flex}.dialog-content{padding:38px 25px 28px}.dialog-title{font-size:40px}.price-row{gap:12px}.price-row dt{font-size:16px}.price-row dd{font-size:32px}.contact-item{font-size:15px;gap:12px}.map-frame{height:220px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Header pop-up and future gallery controls match the navigation links. */
.navigation button:disabled{color:#b0bbc1;cursor:default}
.nav-soon{display:block;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#b0bbc1}
.navigation .gallery-placeholder{position:relative}
.navigation .gallery-placeholder .nav-soon{position:absolute;top:calc(100% - 5px);left:50%;transform:translateX(-50%)}
.hero-subtitle,.hero .eyebrow{text-shadow:0 2px 8px #000b}
@media(max-width:1100px){.navigation{gap:22px}.navigation a,.navigation button{font-size:19px}.brand{width:221.0px}}
@media(max-width:1100px){
  .header{height:auto;min-height:122px}
  .header-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:14px 20px}
  .navigation{order:3;width:100%;justify-content:center;gap:30px;flex-wrap:wrap}
  .brand{max-width:65vw}
}
@media(max-width:700px){
  .navigation{gap:12px 20px}
  .navigation a,.navigation button{font-size:17px;padding:4px 0}
  .brand{width:195.5px}
  .small-footer{flex-wrap:wrap;gap:6px 20px}
}

/* Pop-up animation: timings match DIALOG_CLOSE_DURATION in slideshow.js. */
dialog[open]{animation:dialog-in 240ms cubic-bezier(.2,.75,.25,1) both}
dialog[open]::backdrop{animation:backdrop-in 260ms ease both}
dialog[open].is-closing{animation:dialog-out 180ms ease both;pointer-events:none}
dialog[open].is-closing::backdrop{animation:backdrop-out 180ms ease both}
@keyframes dialog-in{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dialog-out{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(8px) scale(.985)}
}
@keyframes backdrop-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes backdrop-out{
  from{opacity:1}
  to{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  dialog[open],dialog[open]::backdrop{animation:none!important}
}

/* Original graffiti frame: rough paint and gestural corner marks. */
.slideshow-base,.bottom-strip{background:var(--frame)}
/* Graffiti is confined to the top and bottom; sides stay completely clear. */
.hero::before,.hero::after{
  content:'';position:absolute;left:0;right:0;height:64px;z-index:4;
  pointer-events:none;
  background:url('../images/slideshow-graffiti-horizontal.svg') center / 100% 100% no-repeat;
}
.hero::before{top:-1px}
.hero::after{bottom:-1px;transform:rotate(180deg)}
.slideshow-controls{bottom:43px}
.booking-actions a[href*="theplayoff.app"]{
  background:var(--anthracite);
  border-color:var(--anthracite);
  color:var(--ink);
}
.booking-actions a[href*="theplayoff.app"]:hover{
  background:#343a40;
  border-color:#343a40;
}
@media(max-width:700px){
  .slideshow-controls{bottom:36px}
}

/* Static homepage photograph, gently moving as a single layer with its glow. */
.hero[data-floating-photo]{background:#000}
.hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.photo-plane{position:absolute;opacity:0;animation:photo-float 12s ease-in-out infinite}
.photo-plane.is-ready{opacity:1}
.photo-plane img{display:block;width:100%;height:100%;max-width:none}
.sticker-glow{
  position:absolute;left:90%;top:38.2%;width:23%;height:30%;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse,rgba(235,247,255,.28),rgba(220,240,255,.13) 44%,transparent 72%);
  filter:blur(9px);animation:sticker-breathe 5s ease-in-out infinite;
}
@keyframes photo-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
@keyframes sticker-breathe{0%,100%{opacity:.25}50%{opacity:.8}}
.hero.motion-paused .photo-plane,.hero.motion-paused .sticker-glow{animation-play-state:paused}
.photo-motion-toggle{
  position:absolute;right:5%;bottom:43px;z-index:5;display:grid;place-items:center;
  width:40px;height:40px;border-radius:4px;background:#0006;color:white;
}
.photo-motion-toggle:hover{background:#000a}
.photo-motion-toggle .icon{width:18px;height:18px}
/* Solid black through the beginning of the text, then a gradual photo reveal. */
.hero .hero-shade{
  background:linear-gradient(90deg,#000 0px,#000 var(--shade-solid,28%),rgba(0,0,0,.82) var(--shade-middle,43%),transparent var(--shade-end,65%));
}
@media(max-width:700px){
  .hero::before,.hero::after{height:42px}
  .photo-motion-toggle{bottom:36px}
  .hero .hero-shade{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 15%,rgba(0,0,0,.6) 52%,transparent 98%)}
}
@media(prefers-reduced-motion:reduce){
  .photo-plane,.sticker-glow{animation:none!important}
  .photo-motion-toggle{display:none}
  .sticker-glow{opacity:.3}
}

/* The existing bottom text section fills spare viewport height as one surface. */
html{background:var(--frame)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>.header,body>main,body>.info-footer{flex-shrink:0}
.info-footer{background:var(--anthracite)}
.bottom-strip{flex:1 0 auto;width:100%;background:var(--frame)}

/* Footer branding: one balanced row, centred within the same black section. */
.bottom-strip{display:flex;flex-direction:column}
.partner-logos{flex:1;display:flex;justify-content:center;align-items:center;gap:clamp(32px,5vw,90px);padding-block:30px 42px}
.partner-link{display:flex;align-items:center;justify-content:center;min-height:76px;transition:opacity .2s}
.partner-link:hover{opacity:.72}
.footer-wolf{display:block;position:relative;width:74px;aspect-ratio:386/388;overflow:hidden}
.footer-wolf img{position:absolute;width:530.56995%;height:auto;max-width:none;left:-81.60622%;top:-98.71134%;filter:brightness(0) invert(1)}
.footer-playoff{display:block;position:relative;width:164px;aspect-ratio:188/38;overflow:hidden;border-radius:2px}
.footer-playoff img{position:absolute;width:127.65957%;height:auto;max-width:none;left:-13.82979%;top:-265.78947%}
.footer-multisport{width:160px;height:auto;display:block}
.footer-passsport{width:167px;height:auto;display:block}
@media(max-width:700px){
  .partner-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 25px;padding-block:24px 36px;max-width:440px}
  .footer-wolf{width:64px}
  .footer-playoff,.footer-multisport,.footer-passsport{max-width:100%;width:145px}
}

/* Scanline effect only appears during the brief canvas animation. */
.sticker-glitch-canvas{
  position:absolute;left:77%;top:23%;width:25%;height:30%;
  opacity:0;pointer-events:none;mix-blend-mode:screen;
}
@media(prefers-reduced-motion:reduce){.sticker-glitch-canvas{display:none}}

/* Compact identity row: name | partner marks | founding date. */
.bottom-strip{display:block}
.footer-identity{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:30px;align-items:center;padding-block:22px}
.footer-name,.footer-since{font-size:11px;line-height:1.5;color:var(--muted)}
.footer-since{text-align:right}
.footer-identity .partner-logos{width:auto;margin:0;padding:0 34px;gap:32px;border-left:1px solid #ffffff5c;border-right:1px solid #ffffff5c;flex:none}
.footer-identity .partner-link{min-height:62px}
.footer-identity .footer-wolf{width:58px}
.footer-identity .footer-playoff{width:144px}
.footer-identity .footer-multisport{width:140px}
.footer-identity .footer-passsport{width:157px}
.footer-playoff img{filter:url('#logo-remove-dark')}
@media(max-width:1250px){
  .footer-identity{grid-template-columns:1fr 1fr;gap:18px}
  .footer-name{grid-column:1;grid-row:1}
  .footer-since{grid-column:2;grid-row:1}
  .footer-identity .partner-logos{grid-column:1/-1;grid-row:2;border:0;border-top:1px solid #ffffff5c;padding:20px 0 0;gap:clamp(20px,5vw,60px)}
}
@media(max-width:700px){
  .footer-identity{gap:14px}
  .footer-name,.footer-since{font-size:10px}
  .footer-identity .partner-logos{width:100%;max-width:none;gap:12px 24px}
}

/* Both hero sections share height, typography, content anchor and motion. */
@media(max-width:700px){
  .hero-subtitle{min-height:3em}
}

/* Uniform SVG icon system: physical stroke weight stays at 2px at all sizes. */
.shortcut>.icon{width:44px;height:44px;stroke-width:2}
.footer-block>.icon{width:42px;height:42px;stroke-width:2}
.contact-item>.icon,.button>.icon{stroke-width:2}
@media(max-width:700px){
  .shortcut>.icon,.footer-block>.icon{width:36px;height:36px}
}

/* Paint swipe is restricted to the three homepage shortcut titles. */
.shortcut strong.brush-label{
  display:inline-block;position:relative;isolation:isolate;
  color:#fff;
}
.shortcut strong.brush-label::before{
  content:'';position:absolute;inset:-9px -16px -10px -14px;z-index:0;
  pointer-events:none;background:url('../images/hover-brush.svg') center / 100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transform:rotate(-1.5deg);
  transition:clip-path 280ms cubic-bezier(.22,.8,.28,1);
}
.shortcut:hover strong.brush-label::before,.shortcut:focus-visible strong.brush-label::before{clip-path:inset(0 -3% 0 -3%)}
@media(prefers-reduced-motion:reduce){
  .shortcut strong.brush-label,.shortcut strong.brush-label::before{transition:none}
}

/* White text minus the white paint behind it yields stable black text.
   The lettering changes exactly as the brush reaches it, with no colour reset. */
:root{color-scheme:only dark}
.shortcut strong.brush-label .brush-word{
  position:relative;z-index:1;display:inline-block;
  color:#fff;mix-blend-mode:difference;forced-color-adjust:none;
}

/* Modal performance: keep the blurred background still and cacheable.
   Fade a fixed 3px blur instead of recalculating its radius every frame. */
html{scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden;scroll-behavior:auto}
body:has(dialog[open]) .photo-plane,
body:has(dialog[open]) .sticker-glow{animation-play-state:paused}
dialog{overscroll-behavior:contain;scroll-behavior:auto}

/* Shared column geometry for homepage shortcuts and the information row.
   Both .wrap containers have the same width. Lines belong to the containers,
   so content widths, padding and rounding cannot move their x coordinates. */
@media(min-width:1001px){
  .shortcuts,.info-footer:not(.futsal-footer) .footer-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:0;position:relative;
  }
  .shortcuts::before,.shortcuts::after,
  .info-footer:not(.futsal-footer) .footer-grid::before,
  .info-footer:not(.futsal-footer) .footer-grid::after{
    content:'';position:absolute;top:6px;bottom:6px;width:1px;
    background:var(--line);pointer-events:none;
  }
  .shortcuts::before,.info-footer:not(.futsal-footer) .footer-grid::before{left:calc(100% / 3)}
  .shortcuts::after,.info-footer:not(.futsal-footer) .footer-grid::after{left:calc(100% * 2 / 3)}
  .shortcuts>.shortcut{min-width:0;border-right:0}
  .info-footer:not(.futsal-footer) .footer-block{
    min-width:0;border-right:0;padding-inline:30px;
  }
  .info-footer:not(.futsal-footer) .footer-block:first-child{padding-left:0}
  .info-footer:not(.futsal-footer) .footer-map{
    grid-column:auto;justify-self:stretch;margin-left:30px;min-width:0;
  }
}
/* Both rows switch to one column together before the content becomes cramped. */
@media(min-width:701px) and (max-width:1000px){
  .shortcuts{display:grid;grid-template-columns:minmax(0,1fr);padding-block:6px}
  .shortcuts>.shortcut{width:100%;padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .shortcuts>.shortcut:last-child{border-bottom:0}
  .info-footer:not(.futsal-footer) .footer-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .info-footer:not(.futsal-footer) .footer-block{border-right:0;padding:0;min-height:0}
  .info-footer:not(.futsal-footer) .footer-map{grid-column:auto;justify-self:stretch;margin-left:0}
}

/* One visual specification for the vertical dividers in both information rows. */
:root{--section-divider-height:64px;--section-divider-width:1px;--section-divider-colour:var(--line)}
@media(min-width:701px){
  .shortcut-text{position:relative;border-left:0}
  .shortcut-text::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    height:var(--section-divider-height);width:var(--section-divider-width);
    background:var(--section-divider-colour);pointer-events:none;
  }
}
@media(min-width:1001px){
  .shortcuts::before,.shortcuts::after,
  .info-footer:not(.futsal-footer) .footer-grid::before,
  .info-footer:not(.futsal-footer) .footer-grid::after{
    top:50%;bottom:auto;transform:translateY(-50%);
    height:var(--section-divider-height);width:var(--section-divider-width);
    background:var(--section-divider-colour);
  }
}

/* Snap every rule to device pixels; do not let fractional grid coordinates
   spread a one-pixel line over two columns with different antialiasing. */
@media(min-width:701px){
  .shortcut-text::before{
    left:var(--rule-left-1,0px);top:var(--rule-top,calc(50% - 32px));
    transform:none;width:var(--rule-width,1px);
  }
}
@media(min-width:1001px){
  .shortcuts::before,.shortcuts::after,
  .info-footer:not(.futsal-footer) .footer-grid::before,
  .info-footer:not(.futsal-footer) .footer-grid::after{
    top:var(--rule-top,calc(50% - 32px));transform:none;width:var(--rule-width,1px);
  }
  .shortcuts::before,.info-footer:not(.futsal-footer) .footer-grid::before{left:var(--rule-left-1,calc(100% / 3))}
  .shortcuts::after,.info-footer:not(.futsal-footer) .footer-grid::after{left:var(--rule-left-2,calc(100% * 2 / 3))}
}

/* Phone/tablet release pass; desktop layout is preserved. */
body{overflow-wrap:break-word}
main,.hero-content,.shortcut-text,.footer-block>div,.contact-item>div{min-width:0}
.button{max-width:100%;text-align:center}
.booking-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.booking-actions>.button{min-width:0}
dialog{max-height:90vh;max-height:90dvh;max-width:calc(100% - 24px)}
.dialog-tools{position:sticky;top:0;z-index:5;height:0;overflow:visible}
.dialog-close{width:44px;height:44px;top:10px;right:10px;background:var(--anthracite)}
.photo-motion-toggle{width:44px;height:44px}
.contact-item a{display:inline-block;padding-block:4px}
@media(max-width:1100px){
 .navigation a,.navigation button{min-height:44px;display:flex;align-items:center;justify-content:center}
 .booking-actions{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .header-inner{column-gap:10px}
 .brand{width:min(195.5px,calc(100% - 106px));max-width:none}
 .socials{gap:8px}
 .socials a{width:44px;height:44px;display:grid;place-items:center;padding:0}
 .navigation{row-gap:12px;column-gap:16px}
 .navigation .gallery-placeholder .nav-soon{top:auto;bottom:-4px}
 .hero .hero-content{padding-bottom:105px}
 .shortcut small{line-height:1.5}
 .shortcut small span{float:none;white-space:nowrap}
 .footer-block{gap:16px}
 .hours .day{min-width:70px}
 .hours p{display:flex;gap:8px}
 .dialog-content{padding:56px 22px 26px}
 .dialog-title{font-size:clamp(32px,9vw,40px)}
 .dialog-content .button{width:100%;gap:12px;padding-inline:16px}
 .contact-item{align-items:flex-start}
 .contact-item>.icon{margin-top:4px}
 .footer-identity{column-gap:12px}
}
@media(max-width:480px){
 .navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:6px 14px}
 .navigation a,.navigation button{width:100%;min-height:44px;font-size:17px}
 .navigation .gallery-placeholder .nav-soon{bottom:0}
 .hero h1{font-size:clamp(48px,13.2vw,60px)}
 .rental-price p{font-size:46px}
 .booking-actions .button{font-size:21px;line-height:1.3}
}
@media(hover:none){
 .button:hover{transform:none}
 .shortcut:hover strong.brush-label::before{clip-path:inset(0 100% 0 0)}
 .shortcut:focus-visible strong.brush-label::before{clip-path:inset(0 -3% 0 -3%)}
}
@media(max-width:1100px) and (orientation:landscape) and (max-height:500px){
 .hero{height:500px}
}

/* Compact phone hero, with a desktop-scale rough edge rather than tiny teeth. */
@media(max-width:700px){
 .hero{height:480px;height:clamp(440px,68svh,480px)}
 .hero::before,.hero::after{height:64px;background-size:1600px 64px}
}
@media(max-width:1100px) and (orientation:landscape) and (max-height:500px){
 .hero{height:440px}
}

/* Centred phone header only; desktop and tablet header rules stay unchanged. */
@media(max-width:700px){
 .header>.header-inner.wrap{
  width:100%;max-width:none;margin-inline:auto;padding-inline:5%;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
  justify-items:center;row-gap:4px;column-gap:0;padding-block:18px 20px;
 }
 .header-inner>.brand{
  grid-column:1;grid-row:1;justify-self:center;width:195.5px;max-width:75%;margin:0;
 }
 .header-inner>.socials{
  grid-column:1;grid-row:2;justify-self:center;justify-content:center;gap:14px;
 }
 .header-inner>.navigation{
  grid-column:1;grid-row:3;order:initial;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(360px,100%);gap:4px 24px;justify-self:center;align-items:center;margin-top:4px;
 }
 .header-inner .navigation a,.header-inner .navigation button{
  position:relative;justify-self:center;width:max-content;max-width:100%;
  min-height:44px;padding:8px 6px 14px;border-bottom:0;
  font-size:17px;line-height:1.3;text-align:center;
 }
 .header-inner .navigation a[aria-current=page]::after{
  content:'';position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:calc(100% - 12px);height:2px;background:currentColor;
 }
 .header-inner .navigation .gallery-placeholder .nav-soon{
  top:auto;bottom:0;left:50%;transform:translateX(-50%);font-size:9px;line-height:1;
 }
}