:root{
    --ink:#0E1B2E; --navy700:#00264D; --navy:#113875; --blue:#1752B3; --blue300:#7FB0E0;
    --ice:#E8F2FF; --sand:#F4F1E8; --yellow:#FEC037; --yellow-deep:#E0A310;
    --green:#2EAD65; --orange:#F28C28; --white:#FFFFFF;
    --text:#1C2A3D; --dim:#5E6E82; --line:#E4ECF6;
    --display:'Raleway', 'Trebuchet MS', sans-serif;
    --body:'Lato', 'Helvetica Neue', Arial, sans-serif;
    --maxw:1240px; --gut:clamp(20px,5vw,64px);
    /* Header height drives the hero offset, the mobile menu and anchor scroll-margin —
       keep it in one place so the logo can be sized without breaking those. */
    --hdr:92px;
    --r:20px;
    --shadow:0 24px 60px -28px rgba(0,38,77,.45);
    --shadow-sm:0 10px 30px -18px rgba(0,38,77,.4);
    --grad-navy:radial-gradient(120% 140% at 82% -10%, #1c63d4, #113875 46%, #00264D 100%);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* Anchor jumps must clear the sticky header, or the section heading lands under it. */
  section[id],div[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
  body{
    margin:0; font-family:var(--body); color:var(--text); background:var(--white);
    font-size:clamp(16px,1.05vw,18px); line-height:1.65; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display{font-family:var(--display); font-weight:800; line-height:1.03; letter-spacing:-.02em; color:var(--ink); margin:0}
  p{margin:0 0 1em}
  a{color:inherit}
  img{display:block; max-width:100%}
  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
  .eyebrow{font-family:var(--display); font-weight:700; font-size:clamp(11px,1vw,13px);
    letter-spacing:.26em; text-transform:uppercase; color:var(--blue); margin:0 0 18px;
    display:inline-flex; align-items:center; gap:12px}
  .eyebrow::before{content:""; width:26px; height:2px; background:var(--yellow); display:inline-block}
  .eyebrow.on-dark{color:var(--yellow)}
  .eyebrow.on-dark::before{background:var(--yellow)}
  .lead{font-size:clamp(18px,1.5vw,21px); color:var(--dim); max-width:60ch}
  .kicker{color:var(--yellow-deep); font-weight:700}

  /* skip link */
  .skip{position:absolute; left:-999px; top:8px; background:var(--navy700); color:#fff; padding:10px 16px; border-radius:10px; z-index:200}
  .skip:focus{left:12px}

  /* buttons */
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700;
    font-size:15px; letter-spacing:.01em; padding:15px 26px; border-radius:999px; text-decoration:none;
    border:2px solid transparent; cursor:pointer; transition:transform .18s ease, background .2s, box-shadow .2s, color .2s, border-color .2s; white-space:nowrap}
  .btn svg{width:17px; height:17px}
  .btn-primary{background:var(--yellow); color:var(--navy700); box-shadow:0 14px 30px -12px rgba(254,192,55,.7)}
  .btn-primary:hover{transform:translateY(-2px); background:#ffcb52; box-shadow:0 20px 40px -14px rgba(254,192,55,.85)}
  .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}
  .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px)}
  .btn-navy{background:var(--navy700); color:#fff}
  .btn-navy:hover{transform:translateY(-2px); background:var(--navy); box-shadow:var(--shadow-sm)}
  .btn-line{border-color:var(--line); color:var(--navy700); background:#fff}
  .btn-line:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px)}
  :focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:6px}

  /* contour motif */
  .contour{position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%231752B3' stroke-width='1.2' opacity='0.5'%3E%3Cpath d='M-40 300C120 210 200 360 320 300s180-150 320-70'/%3E%3Cpath d='M-40 350C120 260 210 410 330 350s170-150 310-70'/%3E%3Cpath d='M-40 250C130 160 190 310 310 250s190-150 330-70'/%3E%3Cpath d='M-40 400C120 320 210 460 330 400s180-140 310-60'/%3E%3Cpath d='M-40 200C130 120 180 260 300 200s200-150 340-70'/%3E%3Cpath d='M-40 450C120 380 200 510 320 450s190-130 320-50'/%3E%3Cpath d='M-40 150C130 80 170 210 290 150s210-140 350-60'/%3E%3C/g%3E%3C/svg%3E");
    background-size:560px 560px}

  /* ============ HEADER ============ */
  header.site{position:sticky; top:0; z-index:100; transition:background .3s, box-shadow .3s, backdrop-filter .3s}
  header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:18px; height:var(--hdr)}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
  /* Reversed logo (white wordmark + white emblem disc) — reads directly on the dark
     header/footer, so it needs no light chip behind it. */
  .brand img{height:52px; width:auto; display:block; transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .brand:hover img{transform:scale(1.04)}
  @media (max-width:600px){ :root{--hdr:72px} .brand img{height:42px} }
  .brand .bt{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.02em; line-height:1; color:#fff}
  .brand .bt small{display:block; font-weight:600; font-size:10px; letter-spacing:.24em; color:var(--yellow); margin-top:3px}
  nav.main{display:flex; align-items:center; gap:6px}
  nav.main a{font-family:var(--display); font-weight:600; font-size:14.5px; color:rgba(255,255,255,.86);
    text-decoration:none; padding:9px 13px; border-radius:10px; transition:color .18s, background .18s; position:relative}
  nav.main a:hover{color:#fff}
  nav.main a:not(.navcta)::after{content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px; background:var(--yellow);
    transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  nav.main a:not(.navcta):hover::after{transform:scaleX(1)}
  /* scroll-spy: the section you are actually in stays underlined */
  nav.main a:not(.navcta).active{color:#fff}
  nav.main a:not(.navcta).active::after{transform:scaleX(1)}
  /* scroll progress bar */
  .progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:150;
    background:linear-gradient(90deg, var(--yellow), var(--green)); box-shadow:0 0 12px rgba(254,192,55,.5); transition:width .08s linear}
  header.site.scrolled{background:rgba(6,20,40,.92); backdrop-filter:blur(12px); box-shadow:0 10px 30px -20px rgba(0,0,0,.7)}
  .navcta{margin-left:8px}
  .burger{display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center}
  .burger span{display:block; width:24px; height:2px; background:#fff; position:relative; transition:.25s}
  .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:24px; height:2px; background:#fff; transition:.25s}
  .burger span::before{top:-7px} .burger span::after{top:7px}
  body.menu-open .burger span{background:transparent}
  body.menu-open .burger span::before{top:0; transform:rotate(45deg)}
  body.menu-open .burger span::after{top:0; transform:rotate(-45deg)}

  /* ============ HERO ============ */
  .hero{position:relative; min-height:min(94vh,900px); display:flex; align-items:flex-end;
    color:#fff; overflow:hidden; margin-top:calc(var(--hdr) * -1); padding-top:var(--hdr)}
  .hero .bg{position:absolute; inset:0; z-index:-2}
  .hero .bg .hero-poster,.hero .bg .hero-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 52%}
  .hero .bg .hero-vid{opacity:0; transition:opacity 1s ease}
  .hero .bg .hero-vid.ready{opacity:1}
  @media (prefers-reduced-motion:reduce){ .hero .bg .hero-vid{transition:none} }
  .hero .veil{position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(6,20,40,.66) 0%, rgba(6,20,40,.28) 32%, rgba(6,20,40,.5) 62%, rgba(6,20,40,.94) 100%),
      radial-gradient(120% 90% at 12% 100%, rgba(0,38,77,.9), transparent 60%)}
  .hero .wrap{position:relative; width:100%; padding-block:clamp(48px,9vh,120px)}
  .hero .eyebrow{color:#fff}
  .hero .eyebrow::before{background:var(--yellow)}
  .hero h1{color:#fff; font-size:clamp(44px,8.2vw,108px); font-weight:900; letter-spacing:-.035em; max-width:16ch}
  .hero h1 em{font-style:normal; color:var(--yellow)}
  .hero .sub{margin:26px 0 34px; font-size:clamp(17px,1.7vw,22px); max-width:56ch; color:rgba(255,255,255,.9)}
  .hero .cta{display:flex; flex-wrap:wrap; gap:14px}
  /* Pin the cue to the content column's right edge, not the viewport edge, so it stays
     aligned with the rest of the site once the column is capped and centred. */
  .hero .scroll{position:absolute; right:max(var(--gut), calc((100% - var(--maxw))/2 + var(--gut))); bottom:26px; font-family:var(--display); font-weight:600;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.7); writing-mode:vertical-rl; display:flex; align-items:center; gap:12px}
  .hero .scroll::after{content:""; width:1px; height:52px; background:linear-gradient(var(--yellow),transparent); display:block; animation:sweep 2.4s ease-in-out infinite}
  @keyframes sweep{0%,100%{transform:scaleY(.4); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top}}

  /* stat strip */
  .stats{background:var(--navy700); color:#fff; position:relative; overflow:hidden}
  .stats .contour{opacity:.22}
  .stats .grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12)}
  .stats .cell{background:var(--navy700); padding:clamp(26px,4vw,44px) clamp(18px,3vw,34px)}
  /* Outer cells sit flush with the site content column, so the stat text lines up with
     every other section instead of running to the viewport edge. Only while 4-up. */
  @media (min-width:901px){
    .stats .cell:first-child{padding-inline-start:0}
    .stats .cell:last-child{padding-inline-end:0}
  }
  .stats .n{font-family:var(--display); font-weight:800; font-size:clamp(34px,4.6vw,56px); color:var(--yellow); line-height:1; letter-spacing:-.02em}
  .stats .l{margin-top:10px; font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.4}

  /* ============ generic section ============ */
  section{position:relative}
  .sec{padding-block:clamp(64px,9vw,128px)}
  .sec-head{max-width:72ch}
  .sec-head h2{font-size:clamp(30px,4.4vw,58px)}
  .sec-head .lead{margin-top:20px}
  .warm{background:var(--sand)}
  .light{background:var(--white)}
  .icey{background:linear-gradient(180deg,#fff, var(--ice))}

  /* intro / manifesto */
  .manifesto{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,6vw,86px); align-items:center}
  .manifesto .big{font-family:var(--display); font-weight:800; font-size:clamp(26px,3.3vw,42px); line-height:1.12; letter-spacing:-.02em; color:var(--ink)}
  .manifesto .big span{color:var(--blue)}
  .msgs{list-style:none; margin:0; padding:0; display:grid; gap:16px}
  .msgs li{display:flex; gap:16px; align-items:flex-start; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm)}
  .msgs .ic{flex-shrink:0; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--ice); color:var(--blue)}
  .msgs .ic.g{background:rgba(46,173,101,.14); color:#1f8b4d}
  .msgs .ic.y{background:rgba(254,192,55,.2); color:var(--yellow-deep)}
  .msgs h3{font-size:18px; margin-bottom:3px}
  .msgs p{margin:0; font-size:15px; color:var(--dim)}

  /* ============ facilities ============ */
  .fac{display:grid; gap:clamp(40px,7vw,96px)}
  .fac-item{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
  .fac-item.flip .media{order:2}
  .fac .media{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5}
  .fac .media img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .fac-item:hover .media img{transform:scale(1.04)}
  .fac .media .tag{position:absolute; left:18px; top:18px; background:rgba(6,20,40,.72); backdrop-filter:blur(6px); color:#fff;
    font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; border-radius:999px}
  .fac .num{font-family:var(--display); font-weight:800; font-size:15px; color:var(--yellow-deep); letter-spacing:.2em}
  .fac h3{font-size:clamp(26px,3.4vw,40px); margin:12px 0 14px}
  .fac .desc{color:var(--dim); max-width:52ch}
  .chips{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 26px; padding:0; list-style:none}
  .chips li{font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--navy);
    background:var(--ice); border:1px solid #d7e6fb; padding:8px 14px; border-radius:999px}
  /* Klikitav objekt: avab pop-upi pildi ja kirjeldusega. */
  .chips li:has(> .chip){padding:0; background:none; border:0}
  .chips .chip{font:inherit; font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--navy);
    background:var(--ice); border:1px solid #d7e6fb; padding:8px 14px 8px 30px; border-radius:999px; cursor:pointer;
    position:relative; transition:background .18s, border-color .18s, color .18s}
  .chips .chip::before{content:''; position:absolute; left:13px; top:50%; width:9px; height:9px; margin-top:-4.5px;
    border-radius:50%; background:var(--yellow); transition:transform .18s}
  .chips .chip:hover,.chips .chip:focus-visible{background:#fff; border-color:var(--blue); color:var(--blue)}
  .chips .chip:hover::before{transform:scale(1.35)}
  .objmeta{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--dim)}
  .objmeta b{color:var(--navy)}
  /* Spordialade ruudustik */
  .ala-grid{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:34px 0 0; list-style:none}
  .ala-grid .ala{font-family:var(--display); font-weight:700; font-size:15px; color:var(--navy);
    background:var(--ice); border:1px solid #d7e6fb; padding:12px 20px; border-radius:999px; cursor:pointer;
    transition:background .18s, border-color .18s, color .18s, transform .18s}
  .ala-grid .ala:hover,.ala-grid .ala:focus-visible{background:var(--navy); border-color:var(--navy); color:#fff; transform:translateY(-2px)}
  .malist{margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line)}
  .malist h4{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); margin:0 0 10px}
  .malist ul{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none}
  .malist li a,.malist li button,.malist li span{font-family:var(--display); font-weight:600; font-size:13.5px;
    color:var(--navy); background:var(--ice); border:1px solid #d7e6fb; padding:7px 13px; border-radius:999px;
    text-decoration:none; display:inline-block; cursor:pointer}
  .malist li button:hover,.malist li a:hover{background:#fff; border-color:var(--blue); color:var(--blue)}
  /* ---------- Rajatise ja spordiala alamleht ---------- */
  .obj-wrap{padding:clamp(40px,6vw,76px) var(--gut) clamp(56px,8vw,96px)}
  .obj-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:start}
  .obj-hero-img{margin:0; border-radius:var(--r); overflow:hidden; background:var(--ice); position:sticky; top:calc(var(--hdr) + 24px)}
  .obj-hero-img img{display:block; width:100%; height:auto}
  .obj-text .entry-content{font-size:17.5px; line-height:1.75; color:var(--text)}
  .obj-text .entry-content p{margin:0 0 18px}
  .objblock{margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
  .objblock h2{font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); margin:0 0 14px}
  .objblock p{margin:0 0 10px; color:var(--text); font-size:16px}
  .objblock-cta{background:var(--ice); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; border-top:1px solid var(--line)}
  .objback{margin-top:16px}
  .objback a{font-family:var(--display); font-weight:700; color:var(--blue); text-decoration:none}
  .pillrow{display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:0; list-style:none}
  .pillrow a,.pillrow span{font-family:var(--display); font-weight:600; font-size:14px; color:var(--navy);
    background:var(--ice); border:1px solid #d7e6fb; padding:9px 16px; border-radius:999px;
    text-decoration:none; display:inline-block; transition:background .18s, border-color .18s, color .18s}
  .pillrow a:hover{background:var(--navy); border-color:var(--navy); color:#fff}
  @media (max-width:860px){
    .obj-layout{grid-template-columns:1fr}
    .obj-hero-img{position:static}
  }
  /* Projektid lehel: sama loend mis varem pop-upis, nüüd oma sektsioonis. */
  .projlist.pr-sec{margin-top:34px}
  .projlist.pr-sec .pr-item{display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:start;
    padding:20px 0; border-top:1px solid var(--line)}
  .projlist.pr-sec .pr-item:last-child{border-bottom:1px solid var(--line)}
  .projlist.pr-sec .yr{font-family:var(--display); font-weight:800; font-size:14px; color:var(--blue); letter-spacing:.04em}
  .projlist.pr-sec strong{font-family:var(--display); font-size:17px; color:var(--ink); display:block; margin-bottom:5px}
  .projlist.pr-sec p{margin:0; color:var(--dim); font-size:15px; line-height:1.6}
  .projlist.pr-sec .pr-rah{margin-top:8px; font-size:13.5px; color:var(--navy); font-style:italic}
  @media (max-width:640px){ .projlist.pr-sec .pr-item{grid-template-columns:1fr; gap:6px} }
  .fac-links{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center}
  .fac-links a{font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:7px}
  .fac-links a:hover{color:var(--navy700)}
  .fac-links a svg{width:14px; height:14px; transition:transform .2s}
  .fac-links a:hover svg{transform:translateX(3px)}

  /* ============ trails (dark nature) ============ */
  .trails{background:linear-gradient(180deg,#0b2a1e,#0E1B2E 70%); color:#fff; position:relative; overflow:hidden}
  .trails .contour{opacity:.3; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%232EAD65' stroke-width='1.2' opacity='0.6'%3E%3Cpath d='M-40 300C120 210 200 360 320 300s180-150 320-70'/%3E%3Cpath d='M-40 350C120 260 210 410 330 350s170-150 310-70'/%3E%3Cpath d='M-40 250C130 160 190 310 310 250s190-150 330-70'/%3E%3Cpath d='M-40 400C120 320 210 460 330 400s180-140 310-60'/%3E%3Cpath d='M-40 200C130 120 180 260 300 200s200-150 340-70'/%3E%3Cpath d='M-40 450C120 380 200 510 320 450s190-130 320-50'/%3E%3C/g%3E%3C/svg%3E")}
  .trails .eyebrow{color:#8ff0bd}
  .trails .eyebrow::before{background:var(--green)}
  .trails h2{color:#fff}
  .trails .lead{color:rgba(255,255,255,.82)}
  .trail-grid{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px}
  .trail-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); overflow:hidden; transition:transform .3s, border-color .3s}
  .trail-card:hover{transform:translateY(-6px); border-color:rgba(46,173,101,.6)}
  .trail-card .ph{aspect-ratio:16/11; overflow:hidden}
  .trail-card .ph img{width:100%; height:100%; object-fit:cover}
  .trail-card .bd{padding:22px 24px 26px}
  .trail-card h3{color:#fff; font-size:22px}
  .trail-card p{color:rgba(255,255,255,.72); font-size:15px; margin:8px 0 0}
  .trail-card .pill{display:inline-block; margin-bottom:12px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#0b2a1e; background:var(--green); padding:5px 12px; border-radius:999px}
  .rattaring{position:relative; margin-top:26px; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,54px); align-items:center;
    background:linear-gradient(120% 140% at 90% 0%, rgba(46,173,101,.22), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); overflow:hidden}
  .rattaring .ph{aspect-ratio:1/1; overflow:hidden; height:100%}
  .rattaring .ph img{width:100%; height:100%; object-fit:cover}
  .rattaring .bd{padding:clamp(24px,4vw,44px) clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0}
  .rattaring h3{color:#fff; font-size:clamp(24px,3vw,34px)}
  .rattaring p{color:rgba(255,255,255,.8); margin:12px 0 22px; max-width:46ch}

  /* ============ events + clubs ============ */
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .panel{border-radius:var(--r); padding:clamp(28px,4vw,48px); position:relative; overflow:hidden}
  .panel.events{background:var(--grad-navy); color:#fff}
  .panel.clubs{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
  .panel .contour{opacity:.25}
  .panel h3{font-size:clamp(24px,3vw,34px); position:relative}
  .panel.events h3{color:#fff}
  .panel .p{position:relative; margin:14px 0 26px; max-width:44ch}
  .panel.events .p{color:rgba(255,255,255,.85)}
  .panel.clubs .p{color:var(--dim)}
  .flist{list-style:none; margin:0 0 26px; padding:0; position:relative}
  .flist li{display:flex; gap:14px; align-items:center; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); font-weight:700; font-family:var(--display)}
  .panel.clubs .flist li{border-top-color:var(--line); color:var(--navy700)}
  .flist li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .panel.clubs .flist li:last-child{border-bottom-color:var(--line)}
  .flist .dot{width:9px; height:9px; border-radius:50%; background:var(--yellow); flex-shrink:0}
  .panel.clubs .flist .dot{background:var(--green)}

  /* ============ booking CTA band ============ */
  .band{position:relative; overflow:hidden; background:var(--grad-navy); color:#fff}
  .band .contour{opacity:.28}
  .band .inner{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(56px,8vw,104px)}
  .band h2{color:#fff; font-size:clamp(30px,4.4vw,56px)}
  .band .p{color:rgba(255,255,255,.86); margin:18px 0 0; max-width:46ch}
  .band .acts{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
  .band .acts .btn{width:100%; justify-content:center}
  .band .phone{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,30px); color:var(--yellow); text-decoration:none; letter-spacing:-.01em}
  .band .phone small{display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); font-weight:600; margin-bottom:4px}

  /* ============ small: projects + docs ============ */
  .miniduo{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .mini{display:flex; gap:20px; align-items:center; padding:26px 28px; background:#fff; border:1px solid var(--line); border-radius:16px; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .2s, border-color .2s}
  .mini:hover{transform:translateY(-4px); border-color:var(--blue)}
  .mini .ic{width:52px; height:52px; border-radius:14px; background:var(--ice); color:var(--blue); display:grid; place-items:center; flex-shrink:0}
  .mini h3{font-size:20px} .mini p{margin:4px 0 0; font-size:14.5px; color:var(--dim)}

  /* ============ contact ============ */
  .contact{background:var(--ink); color:#fff; position:relative; overflow:hidden}
  .contact .contour{opacity:.16}
  .contact .grid{position:relative; display:grid; grid-template-columns:1.1fr 1.3fr; gap:clamp(30px,5vw,70px)}
  .contact h2{color:#fff}
  .cinfo{margin-top:26px; display:grid; gap:22px}
  .cinfo .row{display:flex; gap:16px; align-items:flex-start}
  .cinfo .ic{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--yellow); display:grid; place-items:center; flex-shrink:0}
  .cinfo .k{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:5px}
  .cinfo a{color:#fff; text-decoration:none; font-weight:700}
  .cinfo a:hover{color:var(--yellow)}
  .cinfo .v{color:rgba(255,255,255,.9); line-height:1.5}
  .hours{position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:clamp(24px,3.5vw,40px)}
  .hours h3{color:#fff; font-size:22px; margin-bottom:20px; display:flex; align-items:center; gap:12px}
  .hours h3 .d{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(46,173,101,.25)}
  .htab{display:grid; gap:18px}
  .htab .fh{border-top:1px solid rgba(255,255,255,.12); padding-top:16px}
  .htab .fn{font-family:var(--display); font-weight:700; color:var(--yellow); margin-bottom:8px}
  .htab .line{display:flex; justify-content:space-between; gap:16px; font-size:14.5px; color:rgba(255,255,255,.86); padding:3px 0}
  .htab .line span:last-child{color:#fff; font-weight:700; font-variant-numeric:tabular-nums; text-align:right}

  /* ============ footer ============ */
  footer.site{background:var(--navy700); color:rgba(255,255,255,.8); padding-block:52px 30px}
  footer.site .top{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12)}
  footer.site .brand .bt{color:#fff}
  footer.site nav{display:flex; flex-wrap:wrap; gap:8px 24px; max-width:560px}
  footer.site nav a{color:rgba(255,255,255,.78); text-decoration:none; font-family:var(--display); font-weight:600; font-size:14.5px}
  footer.site nav a:hover{color:var(--yellow)}
  footer.site .bottom{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; color:rgba(255,255,255,.55)}
  .social{display:flex; gap:10px}
  .social a{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:background .2s, transform .2s}
  .social a:hover{background:var(--blue); transform:translateY(-3px)}

  /* ============ reveal (no-JS safe: visible by default) ============ */
  .reveal{opacity:1; transform:none}
  html.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  html.js .reveal.in{opacity:1; transform:none}
  /* Page-load fade. Uses a self-completing animation rather than a JS-added class, so a
     script failure can never strand the page at opacity:0. */
  html.js body{animation:pageIn .55s ease both}
  @keyframes pageIn{from{opacity:0} to{opacity:1}}
  /* Section-to-section: photo blocks ease out of a soft zoom as they enter.
     Only .ph images — .fac .media img already owns transform for its hover zoom.
     .trail-card sits inside .trail-grid.stagger, so the PARENT is what gets .in. */
  html.js .trail-grid .ph img,html.js .rattaring .ph img{transform:scale(1.07); transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  html.js .trail-grid.in .ph img,html.js .rattaring.in .ph img{transform:scale(1)}
  html.js .stagger>*{opacity:0; transform:translateY(22px); transition:opacity .6s, transform .6s}
  html.js .stagger.in>*{opacity:1; transform:none}
  html.js .stagger.in>*:nth-child(2){transition-delay:.08s}
  html.js .stagger.in>*:nth-child(3){transition-delay:.16s}
  html.js .stagger.in>*:nth-child(4){transition-delay:.24s}
  /* Reduce-motion guards intentionally removed (16.07.2026): the client browses with
     macOS Reduce Motion on and explicitly wants the animations live for every visitor. */

  /* ============ HINNAKIRI ============ */
  .pricing .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); margin-top:40px}
  .price-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,32px);
    box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
  .price-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .price-card .where{font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:6px}
  .price-card h3{font-size:21px; margin-bottom:16px}
  .price-card .pl{list-style:none; margin:0 0 20px; padding:0; flex:1}
  .price-card .pl li{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:15px}
  .price-card .pl li span:last-child{font-family:var(--display); font-weight:800; color:var(--navy700); white-space:nowrap}
  .price-card .more{font-family:var(--display); font-weight:700; font-size:14px; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:8px}
  .price-card .more:hover{text-decoration:underline}
  .pricing .pnote{margin-top:26px; font-size:14.5px; color:var(--dim)}

  /* ============ PARTNERS MARQUEE ============ */
  .partners{background:var(--navy700); padding-block:44px 48px; overflow:hidden}
  .partners .p-eyebrow{text-align:center; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.26em;
    text-transform:uppercase; color:var(--yellow); margin:0 0 26px}
  .marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .marquee .track{display:flex; gap:64px; width:max-content; animation:mq 30s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  .marquee .set{display:flex; align-items:center; gap:64px}
  @keyframes mq{to{transform:translateX(calc(-50% - 32px))}}
  .marquee .pt{font-family:var(--display); font-weight:800; font-size:clamp(19px,2.2vw,27px); letter-spacing:.04em;
    color:rgba(255,255,255,.5); white-space:nowrap; transition:color .3s; display:flex; align-items:center; gap:14px}
  .marquee .pt::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--yellow); opacity:.7; flex-shrink:0}
  .marquee .pt:hover{color:#fff}

  /* ============ MODALS (Projektid / Dokumendid) ============ */
  .modal{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:20px}
  .modal.open{display:flex}
  .modal .back{position:absolute; inset:0; background:rgba(6,20,40,.74); backdrop-filter:blur(5px)}
  .modal .panel{position:relative; background:#fff; border-radius:var(--r); max-width:680px; width:100%; max-height:min(86vh,780px);
    overflow:auto; padding:clamp(26px,4vw,44px); box-shadow:var(--shadow); transform:translateY(16px) scale(.985); opacity:0;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s}
  .modal.open .panel{transform:none; opacity:1}
  .modal .x{position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; border-radius:50%; background:var(--ice);
    color:var(--navy700); font-size:20px; line-height:1; cursor:pointer; transition:background .2s, transform .2s}
  .modal .x:hover{background:var(--yellow); transform:rotate(90deg)}
  .modal h3{font-size:clamp(22px,2.6vw,30px); margin:8px 0 6px}
  .modal .msub{color:var(--dim); font-size:15px; margin-bottom:6px}
  .doclist{list-style:none; margin:18px 0 0; padding:0}
  .doclist .grp{font-family:var(--display); font-weight:800; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); padding:18px 0 6px}
  .doclist a{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 2px; text-decoration:none;
    color:var(--text); font-weight:600; font-size:15px; border-bottom:1px solid var(--line); transition:color .2s, padding-left .2s}
  .doclist a:hover{color:var(--blue); padding-left:8px}
  .doclist .ft{font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.12em; color:var(--navy700);
    background:var(--ice); padding:4px 9px; border-radius:999px; flex-shrink:0}
  .projlist{list-style:none; margin:18px 0 22px; padding:0}
  .projlist li{display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); align-items:flex-start}
  .projlist .yr{font-family:var(--display); font-weight:800; color:var(--navy700); font-size:14px; min-width:86px; padding-top:2px}
  .projlist strong{display:block; font-family:var(--display); font-size:15.5px; color:var(--ink)}
  .projlist p{margin:3px 0 0; font-size:14px; color:var(--dim)}
  .projlist .pill{margin-left:auto; flex-shrink:0; font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:#0b2a1e; background:var(--green); padding:4px 10px; border-radius:999px}

  /* ============ CONTACT FORM ============ */
  .cform{margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16)}
  .cform h3{color:#fff; font-size:19px; margin-bottom:14px}
  .cform .fgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .cform input,.cform textarea{width:100%; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.24);
    border-radius:12px; padding:12px 15px; color:#fff; font:inherit; font-size:15px; transition:border-color .2s, background .2s}
  .cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.55)}
  .cform input:focus,.cform textarea:focus{outline:none; border-color:var(--yellow); background:rgba(255,255,255,.13)}
  .cform textarea{grid-column:1/-1; min-height:110px; resize:vertical}
  .cform .btn{margin-top:14px}
  .cform .formnote{margin:12px 0 0; font-size:13.5px; color:rgba(255,255,255,.6)}

  /* ============ UUDISED ============ */
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); margin-top:40px}
  .news-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.6vw,30px);
    box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; transition:transform .3s, box-shadow .3s}
  .news-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .news-meta{display:flex; gap:12px; align-items:center; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase}
  .news-meta .date{color:var(--dim)}
  .news-meta .cat{color:var(--navy700); background:var(--ice); padding:3px 10px; border-radius:999px}
  .news-card h3{font-size:19px; margin:0}
  .news-card p{font-size:15px; color:var(--dim); margin:0; flex:1}

  /* ============ KLUBID ============ */
  .club-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:26px}
  .club-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px;
    box-shadow:var(--shadow-sm); transition:transform .25s, border-color .25s}
  .club-card:hover{transform:translateY(-4px); border-color:var(--blue)}
  .club-card .sport{font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:6px}
  .club-card h4{font-family:var(--display); font-weight:800; font-size:16.5px; color:var(--ink); margin:0 0 8px; line-height:1.25}
  .club-card p{font-size:14px; color:var(--dim); margin:0 0 10px}
  .club-card .cc{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px}
  .club-card .cc a{color:var(--dim); text-decoration:none; transition:color .2s}
  .club-card .cc a:hover{color:var(--blue); text-decoration:underline}
  .club-card.feat{grid-column:1/-1; background:var(--grad-navy); border:0; color:#fff; padding:clamp(24px,3vw,36px)}
  .club-card.feat .sport{color:var(--yellow)}
  .club-card.feat h4{color:#fff; font-size:21px}
  .club-card.feat p{color:rgba(255,255,255,.85); font-size:15px; max-width:640px}
  .club-card.feat .cc a{color:rgba(255,255,255,.85)}
  .club-card.feat .cc a:hover{color:#fff}
  .club-card.ask{border-style:dashed; background:transparent; box-shadow:none; display:flex; flex-direction:column; justify-content:center}

  /* ============ INIMESED ============ */
  .people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); margin-top:40px}
  .person{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,30px);
    box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
  .person:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .person .ava{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-weight:800; font-size:22px; color:#fff; background:var(--grad-navy); margin-bottom:14px}
  .person h3{font-size:19px; margin:0}
  .person .role{font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:4px 0 12px}
  .person .pc{font-size:14.5px; display:flex; flex-direction:column; gap:5px}
  .person .pc a{color:var(--text); text-decoration:none; transition:color .2s}
  .person .pc a:hover{color:var(--blue)}
  .person .hrs{font-size:13px; color:var(--dim); margin-top:10px}

  /* ============ responsive ============ */
  @media (max-width:1080px){
    .manifesto{grid-template-columns:1fr; gap:34px}
    .band .inner{grid-template-columns:1fr; gap:34px}
    .contact .grid{grid-template-columns:1fr}
  }
    /* Menüüs on 8 punkti + nupp - lauaarvuti menüü ei mahu enam alla 1100px,
     seega läheb burger-menüü sisse varem kui muu paigutus (vt 860px plokk). */
  @media (max-width:1100px){
    nav.main{position:fixed; inset:var(--hdr) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
      background:rgba(6,20,40,.98); backdrop-filter:blur(14px); padding:14px var(--gut) 26px;
      transform:translateY(-130%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
      box-shadow:0 30px 50px -20px rgba(0,0,0,.6); max-height:calc(100vh - var(--hdr)); overflow:auto}
    body.menu-open nav.main{transform:translateY(0)}
    nav.main a{font-size:17px; padding:14px 12px}
    nav.main a:not(.navcta)::after{display:none}
    .navcta{margin:8px 0 0}
    .burger{display:flex}
    header.site{background:rgba(6,20,40,.92); backdrop-filter:blur(12px)}
  }
  @media (max-width:860px){
    nav.main{position:fixed; inset:var(--hdr) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
      background:rgba(6,20,40,.98); backdrop-filter:blur(14px); padding:14px var(--gut) 26px;
      transform:translateY(-130%); transition:transform .35s cubic-bezier(.2,.8,.2,1); box-shadow:0 30px 50px -20px rgba(0,0,0,.6); max-height:calc(100vh - var(--hdr)); overflow:auto}
    body.menu-open nav.main{transform:translateY(0)}
    nav.main a{font-size:17px; padding:14px 12px}
    .navcta{margin:8px 0 0}
    .burger{display:flex}
    header.site{background:rgba(6,20,40,.92); backdrop-filter:blur(12px)}
    .stats .grid{grid-template-columns:1fr 1fr}
    .fac-item,.fac-item.flip .media{grid-template-columns:1fr; order:0}
    .fac-item{grid-template-columns:1fr}
    .fac .media{aspect-ratio:16/11}
    .trail-grid{grid-template-columns:1fr}
    .rattaring{grid-template-columns:1fr}
    .rattaring .ph{aspect-ratio:16/10}
    .rattaring .bd{padding:0 24px 30px}
    .duo,.miniduo{grid-template-columns:1fr}
    .pricing .cards{grid-template-columns:1fr}
    .cform .fgrid{grid-template-columns:1fr}
    .projlist .yr{min-width:64px}
    .news-grid,.people-grid{grid-template-columns:1fr}
    .club-grid{grid-template-columns:1fr 1fr}
    .hero .scroll{display:none}
  }
  @media (max-width:640px){
    .club-grid{grid-template-columns:1fr}
  }
  @media (max-width:520px){
    .stats .grid{grid-template-columns:1fr}
    .btn{width:100%; justify-content:center}
    .hero .cta{flex-direction:column; align-items:stretch}
    .cinfo .row{align-items:flex-start}
  }
  /* ultrawide: keep content capped but let dark bands breathe */
  @media (min-width:1600px){ :root{--maxw:1360px} }
  @media (min-width:2000px){ :root{--maxw:1480px} .hero h1{font-size:118px} }

  /* --- trennid ja huviringid --- */
  .tr-filter{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0}
  .tr-chip{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.04em;
    padding:11px 22px; border-radius:999px; border:1px solid var(--line); background:#fff;
    color:var(--ink); cursor:pointer; transition:background .25s, color .25s, border-color .25s}
  .tr-chip:hover{border-color:var(--blue); color:var(--blue)}
  .tr-chip.on{background:var(--navy); border-color:var(--navy); color:#fff}
  .tr-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); margin-top:30px}
  .tr-card{background:#fff; border:1px solid var(--line); border-radius:var(--r);
    padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:10px;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s}
  .tr-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm)}
  .tr-card[hidden]{display:none}
  .tr-card .sport{font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink); line-height:1.15}
  .tr-card h3{font-family:var(--body); font-weight:700; font-size:14px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--blue)}
  .tr-time{margin:0; font-size:15px; color:var(--text)}
  .tr-price{align-self:flex-start; font-family:var(--display); font-weight:700; font-size:12.5px;
    letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
    background:var(--ice); color:var(--navy)}
  .tr-card .cc{display:flex; flex-direction:column; gap:3px; margin-top:auto; padding-top:8px;
    font-size:14px; color:var(--dim); border-top:1px solid var(--line)}
  .tr-card .cc a{color:var(--blue); text-decoration:none; word-break:break-word}
  .tr-card .cc a:hover{text-decoration:underline; text-underline-offset:3px}
  .tr-note{margin-top:28px; font-size:15px; color:var(--dim)}
  .tr-note a{color:var(--blue)}
  @media (max-width:1080px){ .tr-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ .tr-grid{grid-template-columns:1fr} }