/* ============================================================
   angel in hood — sky / red Impact / VHS
   Photo sky backgrounds that rotate, red Impact display type with a
   thin black outline and video-degradation artefacts, three categories.
   ============================================================ */

:root{
  --red:      #ff1622;
  --red-hi:   #ff5b5b;
  --red-lo:   #9d0008;
  --ink:      #000;
  --paper:    rgba(255,255,255,.88);
  --paper-dim:rgba(255,255,255,.72);
  --glass:    rgba(6,16,38,.55);
  --line:     #000;

  --impact: Impact, 'Anton', Haettenschweiler, 'Franklin Gothic Bold', 'Arial Narrow', sans-serif;
  --mono:   'Courier Prime', ui-monospace, 'Courier New', monospace;

  --maxw: 1080px;
  --bord: 3px;
  --hard: 7px 7px 0 rgba(0,0,0,.55);   /* hard offset drop shadow */
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  color:#0b0b0b;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  /* fallback sky, visible before sky.js paints the photo layers */
  background:linear-gradient(#0b3f9e 0%, #3f8ae4 42%, #9ccdf7 78%, #e2f2ff 100%) fixed;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--red); color:#fff; }

/* ============================================================
   1. SKY — two crossfading layers, slow drift, injected by sky.js
   ============================================================ */
.sky{
  position:fixed; inset:0; z-index:-2;
  overflow:hidden;
  background:#0b3f9e;
}
.sky-l{
  position:absolute; inset:-4%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.6s ease;
  will-change:opacity, transform;
  animation:skyDrift 46s ease-in-out infinite alternate;
}
.sky-l.on{ opacity:1; }

@keyframes skyDrift{
  from{ transform:scale(1.04) translate3d(-1.2%, .6%, 0); }
  to  { transform:scale(1.11) translate3d(1.2%, -.8%, 0); }
}

/* ============================================================
   2. VHS / video-degradation overlay (whole page)
   ============================================================ */
.vhs{ position:fixed; inset:0; z-index:60; pointer-events:none; }

/* Fine scanlines. Deliberately plain alpha compositing — a full-viewport
   fixed layer with mix-blend-mode has to re-rasterise against the whole page
   on every scroll, which tears into black bands on the compositor. */
.vhs-lines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.10) 0px,
      rgba(0,0,0,.10) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 3px);
}
/* head-switching band that crawls down the screen */
.vhs-band{
  position:absolute; left:0; right:0; height:14%;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 42%,
    rgba(198,232,255,.16) 52%,
    rgba(255,255,255,0) 100%);
  animation:vhsRoll 9s linear infinite;
}
@keyframes vhsRoll{
  from{ transform:translateY(-120%); }
  to  { transform:translateY(820%); }
}
/* corner darkening, keeps red type readable on bright skies */
.vhs-vig{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,.42) 100%);
}

/* ============================================================
   3. TYPE — the red Impact glitch component
      <h1 class="fx" data-text="4SALE">4SALE</h1>
   ============================================================ */
.fx{
  position:relative;
  z-index:0;                 /* own stacking context so the ghosts stay behind */
  display:inline-block;
  font-family:var(--impact);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
  color:var(--red);
  -webkit-text-stroke:var(--stroke, 2px) var(--ink);
  paint-order:stroke fill;
  text-shadow:0 .05em 0 rgba(0,0,0,.5);
  animation:fxJitter 7s steps(1) infinite;
  /* --fx-delay desynchronises headings so the page doesn't tear in unison.
     It inherits into ::before/::after, which read it below. */
  animation-delay:var(--fx-delay, 0s);
}
/* chroma-bleed ghosts — sit behind the fill, only the fringes show */
.fx::before,
.fx::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  width:100%;
  z-index:-1;
  -webkit-text-stroke:0;
  text-shadow:none;
  pointer-events:none;
}
.fx::before{
  color:#12f0ff; transform:translate(-.028em,0); opacity:.8;
  animation:fxL 7s steps(1) infinite; animation-delay:var(--fx-delay, 0s);
}
.fx::after{
  color:#ff00b8; transform:translate(.028em,0); opacity:.75;
  animation:fxR 7s steps(1) infinite; animation-delay:var(--fx-delay, 0s);
}

/* the tear only fires in the last ~8% of the cycle */
@keyframes fxL{
  0%,84%,100%{ transform:translate(-.028em,0); clip-path:none; }
  85%{ transform:translate(-.085em,-.015em); clip-path:inset(8% 0 66% 0); }
  87%{ transform:translate( .055em, .012em); clip-path:inset(46% 0 28% 0); }
  89%{ transform:translate(-.05em,  .02em); clip-path:inset(74% 0 6% 0); }
  91%{ transform:translate(-.028em,0); clip-path:none; }
}
@keyframes fxR{
  0%,84%,100%{ transform:translate(.028em,0); clip-path:none; }
  85%{ transform:translate( .09em, .015em); clip-path:inset(20% 0 54% 0); }
  87%{ transform:translate(-.06em,-.012em); clip-path:inset(58% 0 18% 0); }
  89%{ transform:translate( .045em,-.02em); clip-path:inset(4% 0 82% 0); }
  91%{ transform:translate(.028em,0); clip-path:none; }
}
@keyframes fxJitter{
  0%,85%,100%{ transform:none; filter:none; }
  86%{ transform:translate(-2px,1px) skewX(-1.2deg); }
  88%{ transform:translate(3px,-1px) skewX(1.6deg); filter:contrast(1.25) saturate(1.4); }
  90%{ transform:translate(-1px,0) skewX(-.6deg); }
}

/* .fx is inline-block so the ghosts hug the text box — but a heading must
   still claim its own line, or an inline-block badge above it shares one. */
h1.fx, h2.fx, h3.fx{ display:block; }

/* display sizes — each carries its own glitch offset */
.fx-xl{ font-size:clamp(3.4rem, 13vw, 9.5rem); --stroke:3px;   --fx-delay:0s; }
.fx-lg{ font-size:clamp(2.2rem, 7vw, 4.2rem);  --stroke:2.5px; --fx-delay:-2.4s; }
.fx-md{ font-size:clamp(1.5rem, 4vw, 2.3rem);  --stroke:2px;   --fx-delay:-4.1s; }
.fx-sm{ font-size:1.15rem; --stroke:1.5px; --fx-delay:-5.5s; }

/* …and so does each repeated item in a row or grid */
.cat:nth-child(2) .fx{ --fx-delay:-3.3s; }
.cat:nth-child(3) .fx{ --fx-delay:-5.6s; }
.card:nth-child(2) h2{ --fx-delay:-1.2s; }
.card:nth-child(3) h2{ --fx-delay:-3.8s; }
.card:nth-child(4) h2{ --fx-delay:-6.1s; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* frosted slab that content sits on */
.slab{
  background:var(--paper);
  border:var(--bord) solid var(--line);
  box-shadow:var(--hard);
  padding:26px 22px;
}
.slab-dark{
  background:var(--glass);
  color:#eaf3ff;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* ============================================================
   5. TICKER
   ============================================================ */
.ticker{
  position:relative; z-index:2;
  background:#000;
  border-bottom:var(--bord) solid #000;
  overflow:hidden;
  padding:7px 0;
}
.ticker-track{
  display:flex; width:max-content;
  animation:tick 28s linear infinite;
}
.ticker-track span{
  font-family:var(--impact);
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  white-space:nowrap;
  padding-right:2.2em;
  text-shadow:1px 0 #00e5ff, -1px 0 #ff00b8;
}
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   6. TOP BAR (inner pages)
   ============================================================ */
.topbar{ position:relative; z-index:2; padding:16px 0 0; }
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.brand{
  font-family:var(--impact);
  font-size:clamp(1.35rem, 3.4vw, 2rem);
  text-transform:uppercase;
  color:var(--red);
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  text-decoration:none;
  line-height:1;
}
.brand:hover{ color:var(--red-hi); }
.nav{ display:flex; gap:8px; flex-wrap:wrap; }
.nav a{
  font-family:var(--impact);
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--red);
  -webkit-text-stroke:1.4px #000;
  paint-order:stroke fill;
  background:var(--paper);
  border:2px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
  padding:5px 11px 4px;
}
.nav a:hover{ background:#000; color:#fff; }
.nav a.here{ background:#000; color:var(--red); }

/* ============================================================
   7. HERO (home)
   ============================================================ */
.hero{
  position:relative; z-index:2;
  text-align:center;
  padding:clamp(26px, 6vw, 64px) 0 12px;
}
.hero .kicker{
  display:inline-block;
  background:#000; color:#fff;
  padding:4px 12px;
  margin:0 0 14px;
}
.hero h1{ margin:0; }
.hero .tagline{
  margin:16px auto 0;
  max-width:52ch;
  display:inline-block;
  background:rgba(0,0,0,.72);
  color:#eaf3ff;
  padding:7px 14px;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* sky switcher — mirrors the "change the background" idea */
.skybtn{
  display:block;
  margin:18px auto 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:var(--paper);
  color:#000;
  border:2px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  padding:7px 14px;
  cursor:pointer;
}
.skybtn:hover{ background:#000; color:var(--red); }
.skybtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.5); }

/* ============================================================
   8. THE THREE CATEGORIES
   ============================================================ */
.cats{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:clamp(24px, 5vw, 44px) 0 0;
}
.cat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:112px;
  padding:18px 10px;
  text-align:center;
  text-decoration:none;
  background:var(--paper);
  border:var(--bord) solid #000;
  box-shadow:var(--hard);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* sized so all three labels — including the longest — stay on one line */
.cat .fx{
  font-size:clamp(1.45rem, 4.1vw, 2.7rem);
  white-space:nowrap;
  --stroke:2.2px;
}
.cat .sub{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#3a3a3a;
}
.cat:hover{
  background:#000;
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
}
.cat:hover .sub{ color:#9fb6cf; }
.cat:hover .fx{ --stroke:2.5px; color:var(--red-hi); }

/* ============================================================
   9. SECTION HEADS
   ============================================================ */
.sec{ position:relative; z-index:2; margin-top:clamp(36px, 7vw, 66px); }
.sec-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-bottom:var(--bord) solid #000;
  padding-bottom:8px;
  margin-bottom:20px;
}
.sec-head .more{
  margin-left:auto;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  background:#000; color:#fff; text-decoration:none;
  padding:5px 10px;
}
.sec-head .more:hover{ background:var(--red); }

.page-head{
  position:relative; z-index:2;
  padding:clamp(22px, 5vw, 46px) 0 6px;
  text-align:center;
}
.page-head .label{
  display:inline-block; background:#000; color:#fff; padding:4px 11px; margin:0 0 12px;
}
.page-head h1{ margin:0; }
.page-head .lead{
  max-width:56ch;
  margin:16px auto 0;
  background:rgba(255,255,255,.86);
  border:2px solid #000;
  padding:10px 14px;
  font-size:13.5px;
}

/* ============================================================
   10. FLASH STRIP (home) — auto-scrolling work marquee
   ============================================================ */
.strip{ position:relative; z-index:2; overflow:hidden; border-block:var(--bord) solid #000; background:rgba(0,0,0,.45); }
.strip-track{ display:flex; width:max-content; animation:tick 46s linear infinite; }
.strip-track:hover{ animation-play-state:paused; }
.strip figure{ margin:0; width:200px; flex:0 0 auto; padding:10px; }
.strip img{ width:100%; height:250px; object-fit:cover; border:2px solid #000; background:#fff; }

/* ============================================================
   11. GRIDS — 4SALE items + portfolio plates
   ============================================================ */
.shop-grid,
.gallery{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:16px;
}

.item,
.plate{
  margin:0;
  padding:0;
  text-align:left;
  font:inherit;
  color:inherit;
  background:var(--paper);
  border:var(--bord) solid #000;
  box-shadow:var(--hard);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.item{ cursor:pointer; display:block; width:100%; }
.item:hover,
.plate:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 rgba(0,0,0,.5); }

.item .frame,
.plate .frame{ position:relative; border-bottom:var(--bord) solid #000; background:#e9eef4; }
.item .frame img,
.plate .frame img{ width:100%; height:270px; object-fit:cover; }

.item .meta{ padding:10px 12px 12px; }
.item .t{
  font-family:var(--impact);
  font-size:1.35rem;
  text-transform:uppercase;
  color:var(--red);
  -webkit-text-stroke:1.6px #000;
  paint-order:stroke fill;
  line-height:1.05;
}
.item .d{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#3b3b3b; margin-top:3px; }

/* SOLD / TAKEN stamp */
.item[data-taken="true"] .frame::after{
  content:"TAKEN";
  position:absolute; top:14px; left:-30px;
  transform:rotate(-16deg);
  font-family:var(--impact);
  font-size:1.5rem;
  letter-spacing:.08em;
  color:var(--red);
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  background:rgba(255,255,255,.85);
  border-block:2px solid #000;
  padding:2px 40px;
}
.item[data-taken="true"] .frame img{ filter:grayscale(1) contrast(.9); opacity:.75; }

.plate figcaption{
  display:flex; gap:10px; align-items:baseline;
  padding:9px 12px 12px;
}
.plate .idx{
  font-family:var(--impact);
  font-size:1.5rem;
  color:var(--red);
  -webkit-text-stroke:1.6px #000;
  paint-order:stroke fill;
  line-height:1;
}
.plate .cap-body{ display:flex; flex-direction:column; }
.plate .t{ font-family:var(--impact); font-size:1.05rem; text-transform:uppercase; letter-spacing:.03em; }
.plate .m{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#454545; }

/* 4SALE category filter */
.shop-filter{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:0 0 18px;
}
.chip{
  font-family:var(--impact);
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red);
  -webkit-text-stroke:1.4px #000;
  paint-order:stroke fill;
  background:var(--paper);
  border:2px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
  padding:6px 14px 5px;
  cursor:pointer;
}
.chip:hover{ background:#000; color:#fff; }
.chip[aria-pressed="true"]{ background:#000; color:var(--red); }
.chip:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.5); }
.chip:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.shop-empty{
  position:relative; z-index:2;
  max-width:46ch; margin:6px auto 0; padding:12px 16px;
  text-align:center; font-size:13.5px;
  background:rgba(255,255,255,.88); border:2px solid #000;
}

.shop-note{
  position:relative; z-index:2;
  margin:22px 0 0;
  text-align:center;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#eaf3ff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}

/* ============================================================
   12. MODAL (4SALE inquiry)
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:80; display:none; }
.modal[data-open="true"]{ display:block; }
.modal .veil{ position:absolute; inset:0; background:rgba(0,0,0,.72); }
.modal .panel{
  position:relative;
  max-width:520px;
  margin:6vh auto 0;
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border:var(--bord) solid #000;
  box-shadow:10px 10px 0 rgba(0,0,0,.6);
}
.modal .close{
  position:absolute; top:8px; right:8px;
  font-family:var(--impact); font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  background:#000; color:var(--red);
  border:2px solid #000; padding:4px 10px; cursor:pointer;
}
.modal .close:hover{ background:var(--red); color:#000; }
.modal .panel img{ width:100%; height:300px; object-fit:cover; border-bottom:var(--bord) solid #000; }
.modal .pbody{ padding:16px 18px 20px; }
.modal .pbody h3{
  margin:0;
  font-family:var(--impact);
  font-size:2rem; text-transform:uppercase; line-height:1;
  color:var(--red);
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
}
.modal .inquiry{
  margin-top:16px; padding-top:12px;
  border-top:2px solid #000;
  font-size:12.5px;
}

/* ============================================================
   13. FORM (booking)
   ============================================================ */
.formwrap{
  position:relative; z-index:2;
  max-width:620px;
  margin:26px auto 0;
  background:var(--paper);
  border:var(--bord) solid #000;
  box-shadow:var(--hard);
  padding:22px 20px 26px;
}
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-family:var(--impact);
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--red);
  -webkit-text-stroke:1.3px #000;
  paint-order:stroke fill;
  margin-bottom:5px;
}
.field .opt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:#444; -webkit-text-stroke:0; }
.field input,
.field textarea{
  width:100%;
  font-family:var(--mono);
  font-size:14px;
  color:#0b0b0b;
  background:#fff;
  border:2px solid #000;
  padding:9px 10px;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,
.field textarea:focus{ outline:3px solid var(--red); outline-offset:0; }
.field input::placeholder,
.field textarea::placeholder{ color:#8a8a8a; }

.file{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.file input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; }
.file .pick{
  display:inline-block; margin:0; cursor:pointer;
  font-family:var(--impact); font-size:1rem; text-transform:uppercase;
  color:var(--red); -webkit-text-stroke:1.3px #000; paint-order:stroke fill;
  background:#fff; border:2px solid #000; box-shadow:3px 3px 0 rgba(0,0,0,.5);
  padding:6px 12px;
}
.file .pick:hover{ background:#000; }
.file .fname{ font-size:11.5px; letter-spacing:.1em; color:#3b3b3b; }

.submit{
  width:100%;
  cursor:pointer;
  font-family:var(--impact);
  font-size:1.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--red);
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  background:#fff;
  border:var(--bord) solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.55);
  padding:12px 16px;
}
.submit:hover{ background:#000; }
.submit:active{ transform:translate(3px,3px); box-shadow:3px 3px 0 rgba(0,0,0,.55); }
.submit[disabled]{ opacity:.6; cursor:default; }

.done-note{ display:none; }
.done-note[data-show="true"]{ display:block; }
.done-note h3{
  margin:0 0 8px;
  font-family:var(--impact); font-size:2.2rem; text-transform:uppercase; line-height:1;
  color:var(--red); -webkit-text-stroke:2px #000; paint-order:stroke fill;
}

/* ============================================================
   14. CONTACT
   ============================================================ */
.contact-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:16px;
  margin-top:26px;
}
.card{
  background:var(--paper);
  border:var(--bord) solid #000;
  box-shadow:var(--hard);
  padding:18px 18px 20px;
}
.card h2{ margin:0 0 10px; }
.card p{ margin:0 0 8px; font-size:13px; }
.card a{ color:#0b0b0b; text-decoration:none; border-bottom:2px solid var(--red); }
.card a:hover{ background:var(--red); color:#fff; border-bottom-color:#000; }
.card ul{ margin:0; padding-left:1.1em; font-size:13px; }
.card li{ margin-bottom:5px; }

/* ============================================================
   15. FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:2;
  margin-top:clamp(40px, 8vw, 80px);
  background:#000;
  border-top:var(--bord) solid #000;
}
.foot .wrap{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  padding-top:16px; padding-bottom:22px;
  color:#c9d6e6;
}
.foot a{ color:var(--red); text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot .flinks{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 720px){
  .cats{ grid-template-columns:1fr; gap:11px; }
  .cat{ min-height:88px; padding:14px 10px; }
  .item .frame img,
  .plate .frame img{ height:220px; }
  .strip figure{ width:150px; }
  .strip img{ height:190px; }
  :root{ --hard:5px 5px 0 rgba(0,0,0,.55); }
}

@media (max-width: 420px){
  .nav a{ font-size:12px; padding:4px 8px 3px; }
}

/* ============================================================
   17. REDUCED MOTION — kill glitch, drift, marquees
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .fx,
  .fx::before,
  .fx::after,
  .sky-l,
  .vhs-band,
  .ticker-track,
  .strip-track{ animation:none !important; }
  .sky-l{ transform:scale(1.04); }
  .ticker-track{ width:auto; }
  /* the marquees stop, so the seamless-loop duplicates are dead weight —
     drop them and let the row scroll by hand instead */
  .strip{ overflow-x:auto; }
  .strip-track figure[aria-hidden="true"],
  .ticker-track span + span{ display:none; }
  .item,
  .plate,
  .cat{ transition:none; }
}

/* ============================================================
   18. A11Y
   ============================================================ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--red);
}

/* booking form — honeypot (off-screen, not display:none so bots still fill it) + send error */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{
  margin:14px 0 0; padding:10px 12px;
  background:#fff; border:2px solid #000; border-left:6px solid var(--red);
  font-size:13.5px;
}
.form-error a{ color:#000; }