/* Archivo — self-hosted (SIL OFL 1.1, see assets/fonts/LICENSE-Archivo.txt) */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/archivo-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/archivo-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/archivo-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/archivo-latin-ext-800-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/archivo-latin-ext-900-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/archivo-latin-900-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================
   MITRORUN — v5 · black / white / one green
   ========================================================== */
:root{
  --green:#25B34C;--green-dk:#149139;
  --black:#0A0B0A;--black-2:#141714;--white:#FFF;--off:#F4F6F4;
  --line:#E1E5E1;--line-dk:rgba(255,255,255,.13);
  --muted:#6E756F;--muted-dk:rgba(255,255,255,.58);
  --f:'Archivo',-apple-system,Helvetica,sans-serif;
  --pad:clamp(1.25rem,5vw,5.5rem);--max:1440px;
  /* Full-bleed bars (header, sticky bar) have no inner .wrap, so past
     --max + 2*--pad they would sit closer to the edge than the page content.
     This keeps their contents on the same line as everything else. */
  --gutter:max(var(--pad),calc((100% - var(--max)) / 2));
  --e:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--white);color:var(--black);
  font-size:clamp(.96rem,.4vw + .86rem,1.05rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--green);color:var(--black)}
.wrap{max-width:var(--max);margin-inline:auto}

/* Visually hidden, still read aloud. Also defined in the theme's style.css as a
   WordPress core class; it lives here too so the static mockup, which loads only
   this file, hides the same labels. */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}

/* Grid and flex children default to min-width:auto, so a control that will not
   shrink (the newsletter input plus its button) can force its column wider than
   the container. That blew the document out to 372px at a 320px viewport, which
   in turn pushed the fixed header's burger off screen. Opt the layout grids out. */
.bar .wrap>*,.cards>*,.card dl>*,.course-grid>*,.course-facts>*,.about>*,.stats>*,
.disc-grid>*,.plates>*,.two>*,.plist li>*,.partners>*,.news>*,.fgrid>*{min-width:0}
section{padding:clamp(4.5rem,9vw,9rem) var(--pad)}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:.95}
.h-xl{font-size:clamp(2.6rem,7.4vw,6rem)}
.h-lg{font-size:clamp(2rem,5vw,3.6rem)}
.h-md{font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.025em}
.lbl{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lbl.on-dark{color:var(--muted-dk)}
.lbl .n{color:var(--green);margin-right:.6rem;font-weight:700}
.mut{color:var(--muted)}.grn{color:var(--green)}

/* photo treatment: mono by default, colour on hover */
.ph{position:relative;overflow:hidden;background:var(--black-2)}
.ph img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02);
  transition:filter .7s var(--e),transform 1s var(--e)}
@media (hover:hover){
  .ph img{filter:grayscale(.55) saturate(.9) contrast(1.04)}
  .ph:hover img{filter:none;transform:scale(1.035)}
}

.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;border-radius:100px;
  font-size:.82rem;font-weight:700;background:var(--green);color:var(--black);
  transition:background .3s var(--e),transform .3s var(--e),color .3s}
.btn:hover{background:var(--green-dk);transform:translateY(-2px)}
.ar{transition:transform .35s var(--e)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--black);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--black);color:#fff;border-color:var(--black)}
.btn.ghost-d{background:rgba(10,11,10,.5);backdrop-filter:blur(8px);color:#fff;border:1px solid var(--line-dk)}
.btn.ghost-d:hover{background:#fff;color:var(--black);border-color:#fff}
.btn.sm{padding:.62rem 1.15rem;font-size:.75rem}
.btn.xs{padding:.5rem .9rem;font-size:.7rem;gap:.45rem}

/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1rem var(--gutter);color:#fff;
  transition:background .45s var(--e),color .45s var(--e),box-shadow .45s}
header.stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);color:var(--black);box-shadow:0 1px 0 var(--line)}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:900;letter-spacing:-.045em;font-size:1.12rem}
.logo .d{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 8px}
/* An uploaded mark replaces the dot and wordmark, so cap it to the lockup's
   height and let the width follow. Without this it prints at natural size and
   pushes the nav off the header. */
/* Sized in em so the mark tracks the wordmark beside it, in the header, the
   hero and the footer alike, rather than needing a rule per lockup. */
.logo .logo-mark{width:auto;height:1.75em;max-width:9em;object-fit:contain;flex:0 0 auto}
.logo .logo-name{white-space:nowrap}
nav.main{display:none;gap:2.1rem;font-size:.86rem;font-weight:500}
nav.main a{position:relative;padding:.15rem 0;opacity:.82;transition:opacity .3s}
nav.main a:hover,nav.main a.act{opacity:1}
nav.main a::after{content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--green);transition:width .35s var(--e)}
nav.main a:hover::after,nav.main a.act::after{width:100%}
.hd-right{display:flex;align-items:center;gap:.7rem}
.burger{display:flex;flex-direction:column;gap:5px;padding:.55rem;margin-right:-.55rem}
.burger i{width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .4s var(--e),opacity .25s}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:890;background:var(--black);color:#fff;display:flex;
  flex-direction:column;justify-content:center;padding:5.5rem var(--pad) 2.5rem;
  opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s}
#menu.open{opacity:1;visibility:visible}
#menu ul{list-style:none;display:grid;gap:.1rem}
#menu a{display:block;padding:.3rem 0;font-size:clamp(1.9rem,7vw,3rem);font-weight:800;
  letter-spacing:-.04em;transition:color .25s}
#menu a:hover{color:var(--green)}
#menu .mf{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem}

/* ==========================================================
   HERO — photograph + kinetic bands
   ========================================================== */
.hero{position:relative;min-height:100svh;background:var(--black);color:#fff;
  display:grid;place-items:center;padding:7rem var(--pad) 4.5rem;overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.15) brightness(.42)}
.hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(37,179,76,.32),transparent 55%);mix-blend-mode:overlay}
.hero-veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 76% 60% at 50% 52%,rgba(10,11,10,.82) 6%,rgba(10,11,10,.45) 52%,rgba(10,11,10,.8) 100%),
             linear-gradient(to bottom,rgba(10,11,10,.88) 0%,transparent 24%,transparent 74%,var(--black) 100%)}
.bands{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(.1rem,.8vw,.6rem);opacity:.11;pointer-events:none;user-select:none}
.band{display:flex;width:max-content;white-space:nowrap;
  font-size:clamp(3.2rem,12.5vw,10.5rem);font-weight:900;letter-spacing:-.05em;line-height:.92}
.band > div{display:flex;gap:clamp(1rem,3vw,3rem);padding-right:clamp(1rem,3vw,3rem)}
.b1{animation:mv1 40s linear infinite}
.b2{animation:mv2 34s linear infinite;color:var(--green);opacity:.9}
.b3{animation:mv1 48s linear infinite}
@keyframes mv1{to{transform:translateX(-50%)}}
@keyframes mv2{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.hero-in{position:relative;z-index:4;text-align:center;display:grid;justify-items:center;
  gap:clamp(1.1rem,2.4vw,1.7rem);max-width:900px;width:100%}
.hero-in .tagline{font-size:clamp(2.1rem,7.2vw,4.6rem);font-weight:900;letter-spacing:-.048em;line-height:.96;
  text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero-in .tagline span{color:var(--green)}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.hero-meta span{padding:.5rem 1rem;border:1px solid var(--line-dk);border-radius:100px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  background:rgba(10,11,10,.45);backdrop-filter:blur(8px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.hero-cd{display:flex;gap:clamp(1.1rem,4vw,2.4rem);font-variant-numeric:tabular-nums;
  padding-top:clamp(.6rem,2vw,1.2rem);border-top:1px solid var(--line-dk);width:min(100%,460px);
  justify-content:space-between}
.hero-cd div{text-align:center;flex:1}
.hero-cd b{display:block;font-size:clamp(1.5rem,4vw,2.4rem);font-weight:900;letter-spacing:-.045em;line-height:1}
.hero-cd span{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk)}

/* ---------- FACT BAR ---------- */
.bar{background:var(--green);color:var(--black);padding:0 var(--pad);position:relative;z-index:5}
.bar .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.bar div{padding:1.4rem 1.2rem;text-align:center;border-top:1px solid rgba(10,11,10,.18)}
.bar div:nth-child(-n+2){border-top:0}
.bar div + div{border-left:1px solid rgba(10,11,10,.18)}
.bar b{display:block;font-size:clamp(1.5rem,4vw,2.3rem);font-weight:900;letter-spacing:-.045em;line-height:1}
.bar span{display:block;margin-top:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

/* ---------- HEADS / REVEAL ---------- */
.head{display:grid;gap:1rem;margin-bottom:clamp(2.4rem,5vw,3.8rem)}
.head .top{display:flex;align-items:center;gap:1rem}
.head .top .rule{flex:1;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--e) .1s}
.head.in .top .rule{transform:scaleX(1)}
.head.on-dark .top .rule{background:var(--line-dk)}
.head p{max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem)}
.head.on-dark p{color:var(--muted-dk)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}

/* ---------- RACES ---------- */
.races{background:var(--off)}
.cards{display:grid;gap:1rem}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .5s var(--e),color .5s var(--e),box-shadow .5s var(--e)}
.card::before{content:'';position:absolute;inset:0;background:var(--black);
  clip-path:circle(0% at 12% 100%);transition:clip-path .7s var(--e)}
.card:hover{border-color:var(--black);color:#fff}
.card:hover::before{clip-path:circle(160% at 12% 100%)}
.card .thumb{position:relative;z-index:1;aspect-ratio:16/10}
.card .thumb .badge{position:absolute;left:.9rem;top:.9rem;z-index:2;
  padding:.35rem .75rem;border-radius:100px;background:var(--green);color:var(--black);
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.card .body{position:relative;z-index:1;padding:clamp(1.3rem,2.6vw,1.9rem);
  display:flex;flex-direction:column;gap:1rem;flex:1}
.card .top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  /* Reserve two lines so a tag that wraps in one card does not push its big
     number below the others in the row. */
  min-height:2.2rem}
.card .idx{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--green)}
.card .tag{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .5s}
.card:hover .tag{color:rgba(255,255,255,.6)}
.card .big{font-size:clamp(2.8rem,7.5vw,4.2rem);font-weight:900;letter-spacing:-.055em;line-height:.85;
  transition:transform .6s var(--e);transform-origin:left}
.card:hover .big{transform:translateX(4px)}
.card .nm{font-size:1.02rem;font-weight:600;margin-top:.3rem;transition:color .5s}
.card:hover .nm{color:var(--green)}
.card p{color:var(--muted);font-size:.92rem;transition:color .5s}
.card:hover p{color:rgba(255,255,255,.66)}
.card dl{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;padding-top:1rem;
  border-top:1px solid var(--line);transition:border-color .5s;
  /* Takes the slack, so the facts row and the CTA below it sit on the same line
     in every card no matter how long the description runs. */
  margin-top:auto}
.card:hover dl{border-color:rgba(255,255,255,.18)}
.card dt{font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem;transition:color .5s}
.card:hover dt{color:rgba(255,255,255,.5)}
.card dd{font-size:1rem;font-weight:700}
.card .go{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:700;color:var(--green)}
.card .go .ar{transition:transform .35s var(--e)}
.card:hover .go .ar{transform:translateX(5px)}

/* ---------- QUOTE BAND ---------- */
.qband{position:relative;min-height:70svh;display:grid;place-items:center;
  padding:clamp(4rem,10vw,8rem) var(--pad);color:#fff;overflow:hidden;background:var(--black)}
.qband .bg{position:absolute;inset:0;z-index:0}
.qband .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.4) contrast(1.1)}
.qband::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,rgba(37,179,76,.28),transparent 60%),
             linear-gradient(to bottom,rgba(10,11,10,.55),rgba(10,11,10,.75))}
.qband .in{position:relative;z-index:2;text-align:center;max-width:900px}
.qband h2{font-size:clamp(1.9rem,5.6vw,4rem);letter-spacing:-.045em;line-height:1.02}
.qband h2 span{color:var(--green)}
.qband p{margin-top:1.2rem;color:rgba(255,255,255,.75);max-width:46ch;margin-inline:auto}

/* ---------- GALLERY ---------- */
.gallery{background:var(--off)}
.gal{columns:1;column-gap:.9rem;margin-top:.4rem}
.gal figure{break-inside:avoid;margin-bottom:.9rem;border-radius:14px;cursor:zoom-in;
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--e),transform .9s var(--e)}
.gal figure.in{opacity:1;transform:none}
.gal figure::after{content:'';position:absolute;inset:0;background:rgba(10,11,10,.28);
  opacity:0;transition:opacity .45s var(--e);pointer-events:none}
.gal figure:hover::after{opacity:1}
.gal img{width:100%;height:auto;display:block}
.gal .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.4rem .9rem .8rem;
  color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.02em;
  background:linear-gradient(to top,rgba(10,11,10,.85),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--e),transform .45s var(--e)}
.gal figure:hover .cap{opacity:1;transform:none}

#lb{position:fixed;inset:0;z-index:950;background:rgba(6,8,6,.94);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,5vw,4rem);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s}
#lb.open{opacity:1;visibility:visible}
#lb img{max-width:100%;max-height:82svh;border-radius:10px;object-fit:contain}
#lb .cap{position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;color:rgba(255,255,255,.7);
  font-size:.76rem;font-weight:600;letter-spacing:.04em;padding-inline:1rem}
#lb button{position:absolute;width:46px;height:46px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:1.1rem;transition:background .3s}
#lb button:hover{background:var(--green);border-color:var(--green);color:var(--black)}
#lb .x{top:1.2rem;right:1.2rem}
#lb .pv{left:1.2rem;top:50%;transform:translateY(-50%)}
#lb .nx{right:1.2rem;top:50%;transform:translateY(-50%)}

/* ---------- COURSE ---------- */
.course{background:var(--white)}
.course-grid{display:grid;gap:2.2rem}
/* Map switched off: one column, held to a comfortable measure so the facts and
   pace tool do not stretch the full width of the page. */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.tab{padding:.6rem 1.1rem;border-radius:100px;border:1px solid var(--line);
  font-size:.8rem;font-weight:700;transition:background .35s var(--e),color .35s,border-color .35s}
.tab.on{background:var(--green);border-color:var(--green);color:var(--black)}
.tab:hover:not(.on){border-color:var(--black)}
.course-facts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.course-facts div{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.course-facts div:nth-child(even){border-left:1px solid var(--line);padding-left:1.1rem}
.course-facts dt{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.course-facts dd{font-size:1.25rem;font-weight:800;letter-spacing:-.03em}
.pace{border:1px solid var(--line);border-radius:16px;padding:1.5rem;margin-top:1.6rem;background:var(--off)}
.pace .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.pace output{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pace output small{font-size:.9rem;font-weight:600;color:var(--muted);letter-spacing:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:#CDD3CE;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--green);cursor:grab;border:3px solid var(--off);box-shadow:0 0 0 1px var(--green)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--green);
  cursor:grab;border:3px solid var(--off);box-shadow:0 0 0 1px var(--green)}
.panel{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0E110E;
  box-shadow:0 40px 90px -55px rgba(10,11,10,.7)}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.95rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(20,23,20,.95);
  position:relative;z-index:600;color:#fff}
.panel-top .who{display:flex;align-items:center;gap:.7rem;min-width:0}
.panel-top .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:100px;
  background:var(--green);font-size:.7rem;font-weight:800}
.panel-top .where{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-map{position:relative;aspect-ratio:4/5}
#courseMap{position:absolute;inset:0;filter:saturate(.22)}
/* No map yet: the panel keeps its shape and says so, rather than leaving the
   column empty or collapsing the section to a narrow measure. */
.panel.soon .panel-map{display:grid;place-items:center;
  /* A real map earns a tall 4:5 frame. An empty one does not, and the left
     column is shorter without the elevation profile, so keep the two close. */
  aspect-ratio:auto;min-height:clamp(300px,26vw,420px);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/34px 100%,
    #0E110E}
.soon-in{text-align:center;padding:clamp(1.5rem,4vw,2.5rem);max-width:36ch}
.soon-tag{display:inline-block;padding:.4rem .9rem;border-radius:100px;
  border:1px solid var(--green);color:var(--green);
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.soon-in p{margin-top:1rem;color:var(--muted-dk);font-size:.9rem;line-height:1.6}

.panel-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;color:var(--muted-dk);
  padding:.8rem 1.1rem;border-top:1px solid rgba(255,255,255,.12);background:rgba(20,23,20,.95);
  font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:600}
.panel-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.45rem;vertical-align:-1px}
.panel-legend .s{background:#fff}
.panel-legend .k{background:var(--black);border:2px solid var(--green)}
.panel-legend .r{width:16px;height:3px;border-radius:2px;background:var(--green)}
.panel-note{margin-left:auto;color:rgba(255,255,255,.35);text-transform:none;letter-spacing:.02em;font-size:.62rem}
.leaflet-container{background:#0E110E;font-family:var(--f)}
.leaflet-control-attribution{background:rgba(10,11,10,.72)!important;color:rgba(255,255,255,.4)!important;font-size:9px!important}
.leaflet-control-attribution a{color:rgba(255,255,255,.6)!important}
.leaflet-bar{border:0!important;box-shadow:none!important}
.leaflet-bar a{background:rgba(20,23,20,.92)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important}
.leaflet-bar a:hover{background:var(--green)!important;border-color:var(--green)!important}
.km-badge{background:var(--black);border:2px solid var(--green);color:#fff;border-radius:100px;
  font-size:10px;font-weight:800;padding:2px 7px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.6)}
.se-badge{background:#fff;color:var(--black);border-radius:100px;font-size:10px;font-weight:800;
  letter-spacing:.1em;padding:3px 9px;white-space:nowrap;text-transform:uppercase;box-shadow:0 3px 10px rgba(0,0,0,.5)}

/* ---------- ABOUT ---------- */
.about{display:grid;gap:clamp(2rem,4vw,4rem)}
.lede{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.15}
/* The colour belonged on every paragraph, not only the ones after the first:
   p + p skips the opening one, so it stayed body-black while the rest went
   grey, which read as two different typefaces. */
.about-body p{color:var(--muted)}
.about-body p + p{margin-top:1rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);margin-top:clamp(2.4rem,5vw,3.5rem)}
.stats div{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.stats div:nth-child(even){border-left:1px solid var(--line);padding-left:1.2rem}
.stats b{display:block;font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:-.05em;line-height:.9}
.stats span{display:block;margin-top:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ---------- MITROVICA ---------- */
.disc{background:var(--off)}
.disc-grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
.disc-grid p + p{margin-top:1rem}
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.plate{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.plate:first-child{grid-column:1/-1;aspect-ratio:16/9}
.plate .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1rem .9rem;
  background:linear-gradient(to top,rgba(10,11,10,.9),transparent);color:#fff}
.plate .cap b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em}
.plate .cap span{font-size:.78rem;color:rgba(255,255,255,.72)}

/* ---------- STRIP ---------- */
.strip{background:var(--black);color:#fff;overflow:hidden;padding:1.1rem 0}
.strip .tr{display:flex;width:max-content;animation:mv1 38s linear infinite}
.strip:hover .tr{animation-play-state:paused}
.strip .tr > div{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;white-space:nowrap}
.strip b{font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.03em}
.strip i{font-style:normal;color:var(--green);font-size:.9rem}

/* ---------- LISTS ---------- */
.two{display:grid;gap:clamp(2.4rem,5vw,4.5rem)}
.list{list-style:none}
.list li{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.list li::before{content:'';flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--green);transform:translateY(-2px)}
.plist{list-style:none;counter-reset:p}
.plist li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.1rem 0;
  border-bottom:1px solid var(--line);transition:padding-left .4s var(--e)}
.plist li:hover{padding-left:.5rem}
.plist li::before{content:counter(p,decimal-leading-zero);font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--green);padding-top:.35rem}
.plist b{display:block;font-size:1.05rem;font-weight:700}
.plist span{color:var(--muted);font-size:.93rem}
.packshot{border-radius:14px;aspect-ratio:16/10;margin-bottom:1.6rem}

/* ---------- ORGS / PARTNERS / FAQ ---------- */
/* Organisers and partners share this row, so the column count follows however
   many marks there are instead of stranding three in a six-up grid. */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:1.4rem}
/* No aspect-ratio here: it gave every tile a definite height, so a short logo
   kept that height while the row grew to the tallest one, leaving the grid's
   own background showing underneath. A min-height plus the default stretch
   makes the tiles fill the row and match each other. */
.partner{background:#fff;min-height:clamp(112px,10vw,164px);display:grid;place-items:center;
  padding:clamp(1rem,2vw,1.6rem);font-size:.64rem;
  font-weight:600;letter-spacing:.16em;color:#B4BAB5;transition:color .35s,background .35s}
/* Capped in absolute units. A percentage resolved against the tile's own height
   and left tall marks free to stretch the row. */
.partner img{max-width:100%;max-height:clamp(44px,4.6vw,68px);width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .4s var(--e),opacity .4s var(--e)}
.partner:hover img{filter:none;opacity:1}
.partner:hover{background:var(--off);color:var(--green)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 0;display:flex;align-items:center;gap:1.2rem;
  font-size:clamp(1.02rem,1.9vw,1.28rem);font-weight:700;letter-spacing:-.02em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green)}
.faq summary .pm{margin-left:auto;position:relative;width:16px;height:16px;flex:0 0 16px}
.faq summary .pm::before,.faq summary .pm::after{content:'';position:absolute;top:50%;left:50%;background:var(--green);transition:transform .4s var(--e)}
.faq summary .pm::before{width:16px;height:2px;transform:translate(-50%,-50%)}
.faq summary .pm::after{width:2px;height:16px;transform:translate(-50%,-50%)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq .ans{padding:0 0 1.4rem;color:var(--muted);max-width:64ch}

/* ---------- CTA / NEWS / FOOTER ---------- */
.cta{position:relative;color:#fff;text-align:center;overflow:hidden;background:var(--black)}
.cta .bg{position:absolute;inset:0;z-index:0}
.cta .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.34) contrast(1.1)}
.cta::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,rgba(37,179,76,.62),rgba(10,11,10,.72))}
.cta .wrap{position:relative;z-index:2}
.cta h2{margin-bottom:1.1rem}
.cta p{max-width:46ch;margin:0 auto 2rem;color:rgba(255,255,255,.88)}
.cta .btn{background:#fff;color:var(--black)}
.cta .btn:hover{background:var(--black);color:#fff}
.news{display:grid;gap:1.8rem;align-items:start}
.field{display:flex;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:100px;
  padding:.4rem .4rem .4rem 1.3rem;transition:border-color .3s}
.field:focus-within{border-color:var(--green)}
.field input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:.95rem;padding:.6rem 0}
.field input::placeholder{color:#A9AFAA}
/* The deep bottom padding exists only to clear the fixed CTA bar, which is
   shown below 960px. Above that the bar is hidden, so the same padding was
   leaving a tall band of empty black under the footer. */
footer{background:var(--black);color:#fff;
  padding:clamp(3.5rem,6vw,5rem) var(--pad) calc(4.5rem + env(safe-area-inset-bottom))}
.fgrid{display:grid;gap:2.4rem}
.fgrid h4{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk);margin-bottom:1rem}
.fgrid ul{list-style:none;display:grid;gap:.55rem;font-size:.94rem}
.fgrid a{color:rgba(255,255,255,.82);transition:color .25s}
.fgrid a:hover{color:var(--green)}
.fbot{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line-dk);display:flex;
  flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.74rem;color:var(--muted-dk)}
/* Back to top. Sits clear of the fixed CTA bar on small screens, where that bar
   is shown, and drops to the corner once it is hidden above 960px. */
/* Built from the same parts as the rest of the buttons: the 46px circle and the
   green hover of the lightbox controls, the border of the ghost button, and the
   lift and arrow motion of .btn. The hairline keeps it legible when it floats
   over a dark section rather than relying on a drop shadow to carve it out. */
#totop{position:fixed;z-index:870;right:clamp(1rem,2.2vw,2rem);
  bottom:calc(5.4rem + env(safe-area-inset-bottom));
  /* Square with the 14px corner the cards, gallery figures and partner tiles
     use. Not a circle, and not a pill: a lone arrow does not need the width. */
  width:2.9rem;height:2.9rem;border-radius:14px;display:grid;place-items:center;
  background:var(--black);color:#fff;border:1px solid rgba(255,255,255,.22);
  font-size:.82rem;font-weight:700;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:background .3s var(--e),border-color .3s var(--e),color .3s,
    opacity .35s var(--e),transform .35s var(--e),visibility .35s}
#totop.show{opacity:1;visibility:visible;transform:none}
#totop.show:hover{background:var(--green);border-color:var(--green);color:var(--black);
  transform:translateY(-2px)}
/* The same arrow character the rest of the site uses, turned to point up, so it
   renders from the same font. The up arrow sits in a different unicode range
   and was falling to a different face. */
#totop .ar{display:block;transform:rotate(-90deg)}
#totop:hover .ar{transform:rotate(-90deg) translateX(4px)}

#stick{position:fixed;left:0;right:0;bottom:0;z-index:880;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(130%);transition:transform .5s var(--e)}
#stick.show{transform:none}
#stick .t{font-size:.72rem;line-height:1.5;color:var(--muted)}
#stick .t b{display:block;color:var(--black);font-size:.82rem;font-weight:700}

@media (min-width:680px){
  .bar div{border-top:0}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stats div:nth-child(even){border-left:0;padding-left:0}
  .stats div + div{border-left:1px solid var(--line);padding-left:1.2rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .gal{columns:2}
  .news{grid-template-columns:1fr 1fr;gap:3.5rem}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .course-facts{grid-template-columns:repeat(4,1fr)}
  /* One row of four, so every cell but the first takes a divider. Both
     selectors score the same, and the later one wins; `div + div` would lose
     to the :nth-child reset above it and leave a single stray rule. */
  .course-facts div:nth-child(even){border-left:0;padding-left:0}
  .course-facts div:not(:first-child){border-left:1px solid var(--line);padding-left:1.1rem}
}
@media (min-width:960px){
  nav.main{display:flex}
  .burger{display:none}
  #stick{display:none}
  #totop{bottom:clamp(1rem,2.2vw,2rem)}
  footer{padding-bottom:clamp(3.5rem,6vw,5rem)}
  .about{grid-template-columns:1.05fr 1fr}
  .two{grid-template-columns:1fr 1fr}
  .disc-grid{grid-template-columns:1fr 1.02fr}
    .gal{columns:3;column-gap:1rem}
  .fgrid{grid-template-columns:1.4fr repeat(3,1fr);gap:2.4rem}
  .course-grid{grid-template-columns:.92fr 1.08fr;gap:3.2rem;align-items:start}
  .panel{position:sticky;top:6rem}
  .panel-map{aspect-ratio:3/4}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Newsletter form states ---------- */
.mr-news{display:block}
.mr-consent-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;
  font-size:.8rem;line-height:1.5;color:var(--muted);cursor:pointer}
.mr-consent-check input{margin-top:.2rem;width:16px;height:16px;flex:0 0 16px;accent-color:var(--green)}
.mr-consent-check a{color:var(--green-dk);text-decoration:underline;text-underline-offset:2px}
.mr-news-msg{margin-top:.8rem;font-size:.84rem;font-weight:600;min-height:1.2em}
.mr-news-msg.ok{color:var(--green-dk)}
.mr-news-msg.err{color:#C0392B}
.field button[disabled]{opacity:.6;cursor:wait}