/* ==========================================================================
   VFORCE — site stylesheet
   Tokens and components are lifted verbatim from the approved mockup
   (concept-a-dark-teaser.html). Anything added for the inner pages lives
   below the "inner pages" rule and reuses the same tokens.
   ========================================================================== */

:root{
  --red:#D54232;
  --red-hi:#E85543;
  --bg:#0B0A09;
  --bg-2:#141210;
  --bg-3:#1C1917;
  --fg:#F5F2EF;
  --fg-muted:#A19A94;
  --border:#2A2622;

  /* neutral greys — the client asked to break up the black; the club's walls
     and floor are grey, and these are colder than the warm --bg-* ramp.
     --gray is capped at #1F1E1D: one step lighter and --red-hi links on it
     drop under 4.5:1. Measured, not guessed. */
  --gray:#1F1E1D;
  --gray-line:#3A3835;

  --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:96px;
  --r:18px; --r-sm:14px; --r-in:12px; --r-lg:28px;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.45);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Rubik',system-ui,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Heebo',system-ui,sans-serif;font-weight:900;line-height:1.02;letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-3)}
.eyebrow{font-family:'Heebo';font-weight:800;font-size:13px;letter-spacing:.18em;color:var(--red-hi);text-transform:uppercase}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(11,10,9,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:68px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:30px;width:auto}
.nav-links{display:none;gap:var(--sp-4);font-size:15px;font-weight:500}
.nav-links a{display:flex;align-items:center;min-height:44px;color:var(--fg-muted);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--fg)}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:var(--sp-2)}
.nav-cta{display:none!important}
.lang{display:flex;align-items:center;justify-content:center;min-width:48px;height:48px;border-radius:var(--r-sm);border:1px solid var(--border);
  font-family:'Heebo';font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--fg-muted);transition:color .2s,border-color .2s}
.lang:hover,.lang:focus-visible{color:var(--fg);border-color:var(--fg)}
.burger{width:48px;height:48px;border-radius:var(--r-sm);background:transparent;border:1px solid var(--border);display:grid;place-items:center;cursor:pointer}
.burger svg{width:22px;height:22px;stroke:var(--fg);fill:none;stroke-width:2}
.burger .close{display:none}
.burger[aria-expanded="true"] .open{display:none}
.burger[aria-expanded="true"] .close{display:block}
#mobile-menu{border-top:1px solid var(--border);background:var(--bg-2)}
#mobile-menu[hidden]{display:none}
#mobile-menu a{display:flex;align-items:center;min-height:56px;padding:0 var(--sp-3);border-radius:var(--r-sm);
  border-bottom:1px solid var(--border);font-family:'Heebo';font-weight:700;font-size:18px}
#mobile-menu a:last-child{border-bottom:0}
@media(min-width:900px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex!important}
  .burger{display:none}
  #mobile-menu{display:none!important}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;border:2px solid transparent;border-radius:999px;
  font-family:'Heebo';font-weight:800;font-size:16px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(213,66,50,.30)}
/* Deviation from the mockup, on purpose: it brightened to --red-hi on hover,
   which puts white label text at 3.61:1. Deepening instead keeps the state
   change obvious (it also lifts and glows) and lands at 5.09:1. */
.btn-primary:hover,.btn-primary:focus-visible{background:#C93A2A;transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,85,67,.42)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--fg)}
:focus-visible{outline:3px solid var(--red-hi);outline-offset:3px}

/* ---------- hero ---------- */
/* Top padding was --sp-7 when the eyebrow sat above the H1; with the eyebrow
   below it (client, 01.08.2026) that much air read as a bug on mobile. */
.hero{position:relative;padding:var(--sp-5) 0 var(--sp-6);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(213,66,50,.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:var(--sp-5)}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}}
/* -.3em hangs just the ” glyph outside the column; the old -.69em (sized for a
   two-line lockup) dragged the letters themselves into the gutter. */
h1{font-size:clamp(36px,6.4vw,74px);margin:0 0 var(--sp-3);text-indent:-.3em}
h1 .mark{color:var(--red)}
.hero p.lead{font-size:clamp(17px,2.2vw,21px);color:var(--fg-muted);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.hero-photo{
  position:relative;aspect-ratio:4/5;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-2);
  display:grid;place-items:center;
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 14px);
}

/* ---------- trust strip ---------- */
/* The hero's hatched texture runs to its own bottom edge, so without this the
   cards butt straight up against it. */
.trust{background:transparent;padding-block-start:var(--sp-4)}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
@media(min-width:820px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-cell{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4) var(--sp-3);text-align:center}
.trust-num{font-family:'Heebo';font-weight:900;font-size:clamp(28px,4vw,40px);color:var(--fg);display:flex;align-items:center;justify-content:center;gap:8px}
.trust-num svg{width:26px;height:26px;fill:var(--red);stroke:none}
.trust-label{font-size:13px;color:var(--fg-muted);margin-top:4px}

/* ---------- sections ---------- */
section{padding:var(--sp-7) 0}
.sec-head{margin-bottom:var(--sp-5);max-width:70ch}
.sec-head h2{font-size:clamp(32px,5.5vw,54px);margin:var(--sp-2) 0}
.sec-head p{color:var(--fg-muted);font-size:17px}

.cards{display:grid;gap:var(--sp-3)}
@media(min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);
  padding:var(--sp-5) var(--sp-4);position:relative;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#3A3430}
.card-num{font-family:'Heebo';font-weight:900;font-size:52px;color:#2F2A26;line-height:1;transition:color .25s}
.card:hover .card-num{color:var(--red)}
.card h3{font-size:26px;margin:var(--sp-2) 0}
.card p{color:var(--fg-muted);font-size:15.5px}
.card ul{list-style:none;margin:var(--sp-3) 0 0;display:grid;gap:10px}
.card li{display:flex;gap:10px;font-size:15px;color:var(--fg-muted)}
.card li svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--red);fill:none;stroke-width:2.5;margin-top:4px}
.card .price{margin-top:auto;padding-top:var(--sp-3);font-family:'Heebo';font-weight:800;font-size:18px;color:var(--fg)}
.card .price span{font-weight:400;font-size:14px;color:var(--fg-muted)}
.openbar{margin-top:var(--sp-3);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);background:var(--bg-2);padding:var(--sp-4);display:grid;gap:var(--sp-3)}
@media(min-width:860px){.openbar{grid-template-columns:1fr auto;align-items:center}}
.openbar h3{font-size:22px;margin-bottom:6px}
.openbar p{color:var(--fg-muted);font-size:15.5px;max-width:62ch}
.openbar-prices{display:flex;gap:var(--sp-4)}
.openbar-prices b{font-family:'Heebo';font-weight:900;font-size:26px;display:block;color:var(--fg)}
.openbar-prices span{font-size:13px;color:var(--fg-muted)}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-3);min-height:44px;font-family:'Heebo';font-weight:800;color:var(--red-hi)}
.card-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .2s}
.card-link:hover svg{transform:translateX(-4px)}

/* ---------- workshop band ---------- */
.band{background:transparent;color:var(--fg)}
.band .wrap{display:grid;gap:var(--sp-5);background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(24px,4vw,48px);max-width:var(--maxw)}
@media(min-width:960px){.band .wrap{grid-template-columns:.95fr 1.05fr;align-items:center}}
.band-photo{position:relative;overflow:hidden;aspect-ratio:4/3;min-width:0;border-radius:var(--r);border:1px solid var(--border)}
.band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band h2{font-size:clamp(32px,5.2vw,52px);color:var(--fg)}
.band p{font-size:17px;color:var(--fg-muted);max-width:48ch;margin-top:var(--sp-2)}
.band-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin-top:var(--sp-4)}
.band-fact{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--sp-3);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.band-fact dt{font-size:13.5px;color:var(--fg-muted)}
.band-fact dd{font-family:'Heebo';font-weight:900;font-size:20px;color:var(--fg);line-height:1.15}
@media(min-width:960px){
  .band-fact{padding:var(--sp-4)}
  .band-fact dt{font-size:14.5px}
  .band-fact dd{font-size:26px}
}

/* ---------- about ---------- */
.about-grid{display:grid;gap:var(--sp-5)}
@media(min-width:960px){.about-grid{grid-template-columns:.85fr 1.15fr;align-items:stretch}}
.about-photo{aspect-ratio:4/3;min-width:0;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-2);display:grid;place-items:center;position:relative}
.about-photo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 14px)}
.about-grid p{color:var(--fg-muted);font-size:17px;margin-top:var(--sp-3)}
/* side photos fill their text column's height (must come after .about-photo) */
@media(min-width:960px){.about-photo{aspect-ratio:auto;height:100%}}

/* ---------- reviews ---------- */
.reviews{display:grid;gap:var(--sp-3)}
@media(min-width:860px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--sp-4);background:var(--bg-2)}
.stars{display:flex;gap:3px;margin-bottom:var(--sp-2)}
.stars svg{width:17px;height:17px;fill:var(--red);stroke:none}
.review p{font-size:15.5px;color:var(--fg)}
.review cite{display:block;margin-top:var(--sp-2);font-style:normal;font-size:13px;color:var(--fg-muted)}

/* ---------- contact ---------- */
.contact{background:var(--bg-2);border-top:1px solid var(--border)}
.contact-grid{display:grid;gap:var(--sp-5)}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1fr}}
/* The form is first in the source so it leads on mobile (client, 09.08.2026);
   on two columns the details take back the inline-start side they always had. */
@media(min-width:960px){.contact-grid .contact-details{order:-1}}
label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
input,textarea,select{
  width:100%;min-height:48px;background:var(--bg);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--r-in);padding:12px 14px;font:inherit;font-size:16px;
  transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(213,66,50,.18);outline:none}
/* sp-4 rather than sp-3: the extra air reads better in a tall form, and it is
   what brings the form's height up to meet the details column beside it. */
.field{margin-bottom:var(--sp-4)}
.hint{font-size:13px;color:var(--fg-muted);margin-top:6px}
/* Two by two rather than a single stack: it halves the height of this column,
   which is what lifts the map up to finish level with the form beside it. */
.info-list{list-style:none;display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
@media(min-width:560px){.info-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}}
.info-list li{display:flex;gap:14px;align-items:flex-start}
.info-list svg{width:22px;height:22px;flex:0 0 22px;stroke:var(--red);fill:none;stroke-width:2;margin-top:2px}
.info-list b{display:block;font-family:'Heebo';font-weight:800;font-size:16px}
.info-list span{font-size:15px;color:var(--fg-muted)}
/* A second line under an entry — the parking note under the address. Block, so
   it does not run on from the line above. */
.info-list .sub{display:block;font-size:13.5px;margin-top:4px}
.info-list a{color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}
.info-list a:hover{color:var(--fg)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:var(--sp-5) 0;font-size:14px;color:var(--fg-muted)}
.foot{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:flex-start}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-3)}
.foot-legal a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.foot-legal a:hover{color:var(--fg)}
.socials{display:flex;gap:var(--sp-2)}
.socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);transition:border-color .2s,background .2s,transform .2s}
.socials a:hover{border-color:var(--red);background:var(--bg-2);transform:translateY(-2px)}
.socials svg{width:20px;height:20px;stroke:var(--fg);fill:none;stroke-width:1.8}

/* ---------- floating whatsapp ---------- */
/* deliberately physical `right`, not inset-inline-start: the UserWay widget
   occupies the bottom-left corner, so the fab must NOT flip with direction */
.fab{
  position:fixed;right:20px;inset-block-end:20px;z-index:60;
  width:64px;height:64px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .2s,background .2s;
}
.fab:hover{transform:scale(1.06);background:var(--red-hi)}
.fab svg{width:32px;height:32px;fill:#fff}
/* on phones the footer social icons wrap to the fab's corner — clear its 64px + 20px offset */
@media(max-width:820px){footer{padding-block-end:calc(var(--sp-5) + 84px)}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px;top:12px;z-index:100;background:var(--red);color:#fff;padding:12px 18px;border-radius:999px}

/* ---- real photos ---- */
.hero-photo,.about-photo{overflow:hidden;position:relative}
.hero-photo img,.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}


/* The workshop card stays the one red block on the site, but muted: the client
   asked for it (01.08.2026) — --red as a fill read too bright and loud. #A83226
   is measured, not eyeballed: white on it 6.67:1, #F3E9E6 body text 5.59:1,
   #FFD9CE eyebrow 5.10:1, and the black button keeps a 3.15:1 edge against it.
   Black text (the old scheme) would be 3.15:1 here — that is why it is light now. */
.band .wrap{background:#A83226;border-color:rgba(11,10,9,.38)}
.band .eyebrow{color:#FFD9CE}
.band h2{color:#fff}
.band p{color:#F3E9E6}
.band-photo{border-color:rgba(11,10,9,.45)}
.band-fact{background:#0B0A09;border-color:rgba(11,10,9,.5)}
.band-fact dt{color:var(--fg-muted)}
.band-fact dd{color:var(--fg)}
.band .btn-primary{background:#0B0A09;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.band .btn-primary:hover,.band .btn-primary:focus-visible{background:#241F1C;box-shadow:0 10px 26px rgba(0,0,0,.45)}

/* ================= graphic layer ================= */

/* 1. film grain — static, sits over everything, never intercepts clicks */
body::after{
  content:"";position:fixed;inset:0;z-index:70;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:.05;mix-blend-mode:overlay;
}

/* 2. aurora — soft radial blobs, no blur filter (the gradients are already soft),
      so the browser only has to move layers, not re-render them */
.aurora{position:absolute;inset:-25% -15%;z-index:0;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;display:block;border-radius:50%;will-change:transform}
.aurora .a1{width:52vw;height:52vw;inset-block-start:-14%;inset-inline-end:2%;
  background:radial-gradient(circle,rgba(213,66,50,.42),rgba(213,66,50,0) 68%);
  animation:drift1 5s ease-in-out infinite}
.aurora .a2{width:44vw;height:44vw;inset-block-end:-18%;inset-inline-end:28%;
  background:radial-gradient(circle,rgba(255,122,71,.24),rgba(255,122,71,0) 70%);
  animation:drift2 6.5s ease-in-out infinite}
.aurora .a3{width:38vw;height:38vw;inset-block-start:22%;inset-inline-start:-8%;
  background:radial-gradient(circle,rgba(120,40,32,.5),rgba(120,40,32,0) 72%);
  animation:drift3 8s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-9%,11%,0) scale(1.18)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(12%,-9%,0) scale(1.14)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(10%,8%,0) scale(1.2)}}

/* 3. sheen — a glint that crosses the accent word, then stays quiet for 8s */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1 .mark{
    background:linear-gradient(100deg,
      var(--red) 0%, var(--red) 42%, #FFB59B 50%, var(--red) 58%, var(--red) 100%);
    background-size:300% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:sheen 9s cubic-bezier(.25,.6,.3,1) 1.4s infinite;
  }
}
@keyframes sheen{0%{background-position:100% 0}
  18%{background-position:0 0}
  100%{background-position:0 0}}

/* 4. scroll beam */
.beam{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:90;
  background:linear-gradient(90deg,var(--red),#FF8A6B);
  transform:scaleX(0);transform-origin:right center;will-change:transform}
html[dir="ltr"] .beam{transform-origin:left center}

@media (prefers-reduced-motion:reduce){
  .aurora span{animation:none}
  h1 .mark{animation:none;background-position:0 0}
  .beam{transition:none}
}

/* ---- English (LTR) overrides ---- */
html[lang="en"] .card-link svg{transform:scaleX(-1)}
html[lang="en"] .card-link:hover svg{transform:scaleX(-1) translateX(-4px)}
html[lang="en"] h1{text-indent:-.3em}
html[lang="en"] h1{font-size:clamp(38px,7.2vw,72px)}


/* ==========================================================================
   inner pages
   Everything below is new: the mockup only covered the home page.
   Same tokens, same components — no second design system.
   ========================================================================== */

/* ---------- page head (compact hero for inner pages) ---------- */
.pagehead{position:relative;overflow:hidden;padding:var(--sp-6) 0 var(--sp-5);border-bottom:1px solid var(--border)}
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(213,66,50,.16), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 26px);
}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{font-size:clamp(34px,5.8vw,58px);text-indent:0;margin:var(--sp-2) 0 0;max-width:20ch}
html[lang="en"] .pagehead h1{text-indent:0;font-size:clamp(34px,5.8vw,58px)}
.pagehead .lead{color:var(--fg-muted);font-size:clamp(16px,2vw,19px);max-width:60ch;margin-top:var(--sp-3)}
.pagehead .hero-actions{margin-top:var(--sp-4)}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13.5px;color:var(--fg-muted);padding-block-start:var(--sp-3)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--fg)}
.crumbs li+li::before{content:"·";margin-inline-end:8px;color:var(--gray-line)}
.crumbs [aria-current="page"]{color:var(--fg)}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(26px,3.6vw,38px);margin:var(--sp-6) 0 var(--sp-3)}
.prose h2:first-child{margin-block-start:0}
.prose h3{font-size:clamp(20px,2.4vw,24px);margin:var(--sp-5) 0 var(--sp-2)}
.prose p{color:var(--fg-muted);font-size:17px;margin-block-end:var(--sp-3)}
.prose p strong,.prose li strong{color:var(--fg);font-weight:600}
.prose blockquote{border-inline-start:3px solid var(--red);padding-inline-start:var(--sp-3);margin:var(--sp-4) 0;
  font-size:18px;color:var(--fg)}
.prose blockquote cite{display:block;margin-top:var(--sp-2);font-style:normal;font-size:14px;color:var(--fg-muted)}
/* A closing line that carries weight without being staged as a pull quote: same
   size and rhythm as the paragraph above it, white instead of muted. The client
   asked for exactly this after seeing it as a centred motto — the card below
   already has his slogan, and two of them read as a repeat (10.08.2026). */
.prose p.closing{color:var(--fg)}
.prose a:not(.btn):not(.card-link){color:var(--red-hi);text-decoration:underline;text-underline-offset:3px}
.prose > ul,.prose > ol{margin:0 0 var(--sp-3);padding-inline-start:var(--sp-3);color:var(--fg-muted);font-size:17px}
.prose > ul li,.prose > ol li{margin-block-end:10px}

/* checklist — the tick-marked lists used all over the service pages */
.checklist{list-style:none;display:grid;gap:12px;margin:var(--sp-3) 0;padding:0}
.checklist li{display:flex;gap:12px;font-size:16.5px;color:var(--fg-muted);line-height:1.55}
.checklist li svg{width:19px;height:19px;flex:0 0 19px;stroke:var(--red);fill:none;stroke-width:2.5;margin-top:5px}
.checklist li strong{color:var(--fg);font-weight:600}

/* ---------- two-column split with media ---------- */
.split{display:grid;gap:var(--sp-5)}
@media(min-width:960px){
  .split{grid-template-columns:1fr 1fr;align-items:center}
  .split.media-first > .split-media{order:-1}
}
.split-media{position:relative;overflow:hidden;aspect-ratio:4/3;min-width:0;
  border-radius:var(--r);border:1px solid var(--border);background:var(--bg-2)}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- swipe gallery (workshop + competition + open gym split-media) ---------- */
/* CSS scroll-snap does the sliding: swipe is native on touch, and with JS off
   the strip still scrolls and snaps — site.js only unhides the arrows and adds
   the dots. The .split-media parent supplies the frame, border and radius. */
.gallery{position:absolute;inset:0}
.gallery-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{flex:0 0 100%;min-width:0;height:100%;margin:0;position:relative;overflow:hidden;
  scroll-snap-align:start;scroll-snap-stop:always}
.gallery-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:rgba(11,10,9,.72);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.gallery-btn:hover{background:rgba(11,10,9,.92);border-color:var(--red)}
.gallery-btn[disabled]{opacity:.35;cursor:default}
.gallery-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.5}
html[dir="rtl"] .gallery-btn svg{transform:scaleX(-1)}
.gallery-btn.prev{inset-inline-start:10px}
.gallery-btn.next{inset-inline-end:10px}
.gallery-dots{position:absolute;inset-inline:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gallery-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}
.gallery-dots i.on{background:var(--red-hi)}

/* ---------- grey section — breaks up the black ---------- */
.sec-gray{background:var(--gray);border-block:1px solid var(--gray-line)}
.sec-gray .tier,.sec-gray .card,.sec-gray .pricebox,.sec-gray .faq-item{background:var(--bg-2);border-color:var(--border)}

/* ---------- price box ---------- */
.pricelist{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0}
@media(min-width:700px){.pricelist{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.pricebox{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:6px}
.pricebox dt{font-size:15px;color:var(--fg-muted)}
.pricebox dd{font-family:'Heebo';font-weight:900;font-size:clamp(26px,3.4vw,32px);color:var(--fg);line-height:1.1}
.pricebox dd small{font-family:'Rubik';font-weight:400;font-size:14px;color:var(--fg-muted);letter-spacing:0}
.price-note{font-size:14.5px;color:var(--fg-muted);margin-top:var(--sp-2)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.faq-item{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:56px;padding:var(--sp-2) var(--sp-3);cursor:pointer;
  font-family:'Heebo';font-weight:700;font-size:17px;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
/* A plus that loses its upright stroke when the item opens, leaving a minus.
   Two background layers rather than two pseudo-elements, because `summary` is
   the flex row itself and only has one ::after to spend. background-size is
   animatable, so the stroke retracts instead of blinking out. */
.faq-item summary::after{
  content:"";flex:0 0 14px;width:14px;height:14px;
  background-image:linear-gradient(var(--red-hi),var(--red-hi)),
                   linear-gradient(var(--red-hi),var(--red-hi));
  background-position:center center;background-repeat:no-repeat;
  background-size:14px 2px, 2px 14px;
  transition:background-size .2s;
}
.faq-item[open] summary::after{background-size:14px 2px, 2px 0}
.faq-item[open] summary{border-block-end:1px solid var(--border)}
.faq-item .faq-body{padding:var(--sp-3);color:var(--fg-muted);font-size:16px}
.faq-item .faq-body p+p{margin-block-start:var(--sp-2)}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}

/* The legal pages set their reading column with .prose (70ch); the page head
   above it defaults to the full --maxw wrap, so the h1 and the body text
   started on different lines. Same box, same edge. */
.pagehead-prose .wrap{max-width:70ch}

/* ---------- closing CTA band ---------- */
.cta{border-block-start:1px solid var(--border);background:var(--bg-2)}
.cta .wrap{display:grid;gap:var(--sp-3);justify-items:start}
.cta h2{font-size:clamp(28px,4.4vw,44px)}
/* 56ch broke the competition CTA's one sentence onto two lines with a two-word
   orphan; 80ch lets the longest CTA paragraph sit on one desktop line. */
.cta p{color:var(--fg-muted);font-size:17px;max-width:80ch}

/* ---------- coach cards (about page) ---------- */
.coaches{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
@media(min-width:760px){.coaches{grid-template-columns:1fr 1fr}}
.coach{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4)}
.coach h3{font-size:22px;margin-block-end:4px}
.coach .role{font-size:14px;color:var(--red-hi);font-weight:600;margin-block-end:var(--sp-2)}
.coach ul{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--fg-muted)}
.coach li{display:flex;gap:10px}
.coach li::before{content:"—";color:var(--gray-line);flex:0 0 auto}
.coach h4{font-family:'Heebo';font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--fg-muted);text-transform:uppercase;margin-block:var(--sp-3) 6px}
.coach p{font-size:15px;color:var(--fg-muted);line-height:1.55}
/* The coach motto is English inside RTL cards: dir="ltr" in the markup keeps the
   quotes from jumping to the wrong side, centering sidesteps the LTR-vs-RTL
   alignment mismatch entirely. */
.coach .motto{margin-block-start:var(--sp-3);padding-block-start:var(--sp-3);border-block-start:1px solid var(--border);font-family:'Heebo';font-weight:800;font-size:15px;color:var(--fg);text-align:center}
/* A coach with a portrait gets a split card: the photo fills a full-height
   column at the card's inline-end (left in Hebrew, right in English) and the
   text sits alongside. Below 900px the photo moves on top in a 4/3 crop.
   All four coaches carry a portrait since 11.08.2026; the plain .coach card is
   what a new coach starts on until their photo arrives. */
.coach-split{padding:0;overflow:hidden;display:grid}
.coach-split .coach-body{padding:var(--sp-4)}
.coach-split .coach-photo{order:-1;aspect-ratio:4/3;background:var(--bg-3)}
.coach-photo img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .coaches{grid-auto-rows:1fr}   /* all four cards the same height, tallest wins */
  .coach-split{grid-template-columns:1fr minmax(180px,42%)}
  .coach-split .coach-photo{order:0;aspect-ratio:auto}
}

/* ---------- map facade (contact page) ---------- */
/* ---------- self-hosted video ---------- */
/* No JS and no third party: preload="none" means the browser fetches the poster
   and nothing else until the visitor presses play, which is the whole point.
   The native controls come with keyboard support and captions plumbing for free,
   and the block still works with JavaScript switched off. */
/* The clip sits in the same section as the price list rather than its own, so
   two lots of section padding do not stack up between them. The gap above the
   cards is the section's own padding plus the list's margin; this matches it, so
   the cards sit evenly between the page head and the video. Adjacent margins
   collapse, so this value is the gap, not an addition to the list's 32px. */
.videobox{margin-block-start:calc(var(--sp-7) + var(--sp-4))}
/* On a phone the cards stack into a tall column and that same gap becomes a
   screenful of nothing before the clip, so it tightens. Nobody sees both gaps
   at once at this width, so matching them buys nothing here. */
@media(max-width:699px){.videobox{margin-block-start:var(--sp-5)}}
.videobox video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;
  border-radius:var(--r);border:1px solid var(--border);
}
.videobox figcaption{margin-top:var(--sp-2);font-size:14px;color:var(--fg-muted);text-align:center}

.mapbox{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-2);margin-top:var(--sp-5)}
.mapbox img{width:100%;height:auto;display:block}
/* The embedded map is the one bright rectangle on a black site, so it is kept
   short and framed rather than filtered — a hue-rotate trick would recolour
   Google's own labels and take their contrast with it. */
.mapbox-map{display:block;width:100%;border:0;aspect-ratio:4/3;background:var(--gray)}
@media(min-width:560px){.mapbox-map{aspect-ratio:16/10}}
/* Once the details and the form sit side by side, the map stops being a fixed
   ratio and simply takes whatever height is left, so the card finishes level
   with the submit button instead of hanging below it. The min-height is the
   floor: better a short map than a squashed one if the form ever shrinks. */
@media(min-width:960px){
  .contact-details{display:flex;flex-direction:column}
  .contact-details .mapbox{flex:1;display:flex;flex-direction:column}
  .contact-details .mapbox-map{flex:1 1 0;aspect-ratio:auto;min-height:200px}
}
/* Just above the breakpoint the two columns are at their narrowest, the English
   labels wrap hardest, and the map hits its floor before it can absorb the
   difference. Let the floor down for that band only. */
@media(min-width:960px) and (max-width:1039px){
  .contact-details .mapbox-map{min-height:165px}
}
.mapbox-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3)}

/* ---------- form: consent + validation ---------- */
.check{display:flex;gap:12px;align-items:flex-start;margin-block-end:var(--sp-3)}
.check input[type="checkbox"]{
  width:22px;height:22px;min-height:22px;flex:0 0 22px;margin-top:2px;padding:0;
  accent-color:var(--red);border-radius:6px;cursor:pointer;
}
.check label{margin:0;font-size:15px;font-weight:400;color:var(--fg-muted);line-height:1.5;cursor:pointer}
.check a{color:var(--red-hi);text-decoration:underline;text-underline-offset:3px}
.req{color:var(--red-hi)}
.err{display:none;font-size:14px;color:#FF9B8A;margin-top:6px}
.field.invalid .err,.check.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#FF6A55}
.check.invalid{padding:10px;margin-inline:-10px;border-radius:var(--r-in);border:1px solid #FF6A55}
.form-status{margin-top:var(--sp-3);font-size:15.5px;border-radius:var(--r-in);padding:14px 16px;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(60,140,80,.14);border:1px solid rgba(90,190,120,.45);color:#B8EFC8}
.form-status.bad{background:rgba(213,66,50,.12);border:1px solid rgba(232,85,67,.5);color:#FFB6A8}
button[disabled]{opacity:.6;cursor:progress}

/* ---------- misc ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The form honeypot, and the one thing that must NOT be .visually-hidden: a
   clipped 1px input is still a laid-out, fillable field, and desktop autofill
   fills it — Chrome maps a field named "company" onto the Organization line of
   a saved address profile, and password managers ignore autocomplete="off"
   outright. Apps Script drops any submission with that field set, so an
   autofilled honeypot silently swallows a real lead while the visitor is shown
   the success message (no-cors, see form.js). display:none is skipped by
   autofill, and a class beats a later `p{display:block}` the way the `hidden`
   attribute would not. */
.honeypot{display:none}
.pending{background:var(--gray);border:1px dashed var(--gray-line);border-radius:var(--r);padding:var(--sp-4);color:var(--fg-muted);font-size:16px}
.pending strong{color:var(--fg)}