/* Shared styles for vrchota.sk.
   Loaded by the home page, by /program/ and by every generated subpage (the interview and
   the candidates), so the browser downloads them once and has them from cache on the next
   click. /projekty/, /objednavatel/ and /osobne-udaje/ keep their own inline CSS instead.
   A subpage appends its own rules after this file, in its own style block. */
:root{
  --navy:#173E66;
  --navy-deep:#0D2540;   /* brand manual colours */
  --green:#A9CF38;
  --paper:#FFF;
  --mist:#EEF4DC;        
  --ink:#171A1E;         
  --muted:#55677A;
  --rule:rgba(23,62,102,.15);
  --gut:clamp(20px,4.6vw,72px);
  --shell:min(1360px, 100% - 2 * var(--gut));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(17px,1.22vw,21px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
.shell{width:var(--shell); margin-inline:auto}
.bebas{font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase; line-height:.86; letter-spacing:.012em}

/* ── eyebrow ── */
.eyebrow{
  display:flex; align-items:center; gap:.75rem; margin:0 0 1.1rem;
  font-size:clamp(.82rem,1vw,.98rem); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--green);
}
.eyebrow::before{content:""; flex:none; width:34px; height:3px; background:var(--green)}

/* ── header ── */
.top{position:fixed; inset:0 0 auto; z-index:60; border-bottom:1px solid transparent;
     transition:background .3s, border-color .3s}
.top.stuck{background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom-color:var(--rule)}
.top .shell{display:flex; align-items:center; gap:1.6rem; height:86px}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--navy); white-space:nowrap}
.brand img{width:26px; flex:none}
.brand .txt{font-family:"Bebas Neue",sans-serif; font-size:clamp(1.15rem,1.5vw,1.55rem); letter-spacing:.06em; line-height:1}
.brand .dot{color:var(--green); padding:0 .18em}
.nav{margin-left:auto; display:flex; gap:2.1rem}
.nav a{font-size:clamp(.86rem,1.02vw,1rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
       text-decoration:none; color:var(--navy); padding:.4rem 0; position:relative}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:3px; background:var(--green); transition:right .28s ease}
.nav a:hover::after,.nav a:focus-visible::after,.nav a.current::after{right:0}
/* the section a subpage belongs to stays underlined in the menu, the way /projekty/
   already marks itself */
.nav a.current{color:var(--navy)}
.burger{display:none; margin-left:auto; width:48px; height:48px; border:2px solid var(--navy); background:#fff; cursor:pointer}
.burger span{display:block; width:20px; height:2.5px; background:var(--navy); margin:4px auto}

/* ── hero ── */
.hero{padding:calc(86px + clamp(20px,3vw,48px)) 0 0}
.hero .shell{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,64px); align-items:end}
.hero .col{padding-bottom:clamp(36px,4.6vw,72px); align-self:center}
.hero .figure{width:100%; max-width:640px; justify-self:center; align-self:end}
.hero h1{margin:0; font-size:clamp(3.2rem,8.6vw,8.4rem); color:var(--navy)}
.hero h1 em{font-style:normal; color:var(--green); display:block}
.hero .claim{margin:clamp(18px,2.2vw,32px) 0 0; font-size:clamp(1.2rem,2vw,1.9rem); font-weight:500; color:var(--navy)}
.cta-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(22px,2.6vw,38px)}
.btn{
  display:inline-flex; align-items:center; gap:.7rem; padding:1.05rem 1.9rem;
  font-size:clamp(.86rem,1.02vw,1rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border:3px solid var(--navy); transition:.22s ease;
}
.lbl-short{display:none}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar,.btn:focus-visible .ar{transform:translateX(6px)}
.btn-solid{background:var(--navy); color:#fff}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--navy-deep); border-color:var(--navy-deep)}
.btn-line{background:transparent; color:var(--navy)}
.btn-line:hover,.btn-line:focus-visible,.btn-line:active{background:var(--navy); color:#fff}

/* ── endorsements ── */
.parties{background:#133D66; padding:clamp(30px,3.6vw,52px) 0}
.parties .shell{display:flex; flex-direction:column; align-items:center;
                gap:clamp(17px,2.1vw,30px)}
.numbers{display:flex; justify-content:center; gap:clamp(14px,2vw,30px); align-items:start}
/* Each number is one of Marcel's three candidacies, so it carries the race under it —
   three bare circles above three labelled rows gave the reader nothing to pair them by. */
.numbers span{display:grid; justify-items:center; gap:.45rem}
.numbers i{font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.14em;
         text-transform:uppercase; color:rgba(255,255,255,.72)}
.numbers b{display:grid; place-items:center; width:clamp(46px,5vw,66px); height:clamp(46px,5vw,66px);
         border-radius:50%; border:3px solid var(--green); color:var(--green);
         font-family:"Bebas Neue",sans-serif; font-size:clamp(1.5rem,2.4vw,2.1rem);
         line-height:1; padding-top:.09em}
.row{display:flex; flex-direction:column; align-items:center; gap:.6rem; width:100%}
.row p{margin:0; font-family:"Bebas Neue",sans-serif; font-size:clamp(.78rem,1vw,.96rem);
       letter-spacing:.24em; color:rgba(255,255,255,.72); text-align:center}
.logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
       gap:clamp(11px,1.5vw,24px); width:min(820px,100%)}
.logos img{max-height:clamp(21px,2vw,27px); width:auto; max-width:100%}
.logos img.lower{max-height:clamp(13px,1.2vw,17px)}
.logos img.taller{max-height:clamp(30px,2.8vw,38px)}   /* SaS: square mark, needs more height to match */
.caka{margin:0; font-size:.78rem; letter-spacing:0; font-family:inherit;
      color:rgba(255,255,255,.42); border:1px dashed rgba(255,255,255,.28);
      padding:.55rem 1.1rem; border-radius:4px}

/* ── sections ── */
.sec{padding:clamp(66px,8.6vw,150px) 0}
.sec-mist{background:var(--mist)}
.h2{margin:0; font-size:clamp(2.6rem,7vw,6.6rem); color:var(--navy)}
.h2 em{font-style:normal; color:var(--green)}
.lede.nowrap{max-width:none}
.lede{margin:clamp(16px,1.8vw,28px) 0 0; max-width:42ch; color:var(--muted); font-size:clamp(1.1rem,1.4vw,1.45rem)}

/* ── results ── */
.works{margin-top:clamp(32px,3.8vw,58px); display:flex; flex-wrap:wrap; justify-content:center;
       gap:clamp(14px,1.6vw,26px)}
.work{flex:1 1 268px; max-width:calc(25% - clamp(14px,1.6vw,26px) * 3 / 4);
      background:var(--paper); border:1px solid var(--rule); border-top:6px solid var(--green);
      display:flex; flex-direction:column; transition:.25s ease}
@media (max-width:1200px){.work{max-width:calc(33.333% - clamp(14px,1.6vw,26px) * 2 / 3)}}
@media (max-width:900px){.work{max-width:calc(50% - clamp(14px,1.6vw,26px) / 2)}}
@media (max-width:600px){.work{max-width:100%}}
.work:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(23,62,102,.14); border-color:var(--green)}
.work .shot{aspect-ratio:16/10; overflow:hidden; background:#E7ECE2}
.work .shot img{width:100%; height:100%; object-fit:cover}
.work .body{padding:clamp(16px,1.8vw,24px); flex:1}
.work .num{font-family:"Bebas Neue",sans-serif; font-size:clamp(2.3rem,4vw,3.7rem); line-height:.9;
           color:var(--green); letter-spacing:.005em; white-space:nowrap}
.work .num i{font-style:normal; font-size:.46em; margin-left:.14em}
.work h3{margin:.45rem 0 .4rem; font-size:clamp(.98rem,1.1vw,1.12rem); font-weight:700;
         letter-spacing:.06em; text-transform:uppercase; color:var(--navy)}
.work p{margin:0; font-size:clamp(.88rem,.95vw,.96rem); color:var(--muted); line-height:1.5}

/* ── Katkin park mosaic ── */
.katkin{background:var(--navy); color:#fff; padding:clamp(66px,8.6vw,150px) 0}
.katkin .eyebrow{color:var(--green)}
.katkin .eyebrow::before{background:var(--green)}
.katkin h2{margin:0; font-size:clamp(3rem,8vw,7.6rem); color:#fff}
.katkin .when{margin:clamp(14px,1.6vw,24px) 0 0; font-size:clamp(1.2rem,1.9vw,1.8rem); color:var(--green); font-weight:500}
.mosaic{margin-top:clamp(34px,4.4vw,64px); display:grid; grid-template-columns:repeat(4,1fr);
        gap:clamp(8px,1vw,16px)}
.mosaic figure{margin:0; overflow:hidden; background:rgba(255,255,255,.06)}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic .big{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
.mosaic figure:not(.big){aspect-ratio:4/3}
.katkin-intro{margin:clamp(34px,4.2vw,64px) 0 0;
              font-size:clamp(1.05rem,1.4vw,1.42rem); line-height:1.55; color:rgba(255,255,255,.86)}
.facts{margin-top:clamp(34px,4.2vw,60px); display:grid; grid-template-columns:repeat(4,1fr);
        gap:1px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18)}
.fact{background:var(--navy); padding:clamp(22px,2.6vw,38px)}
.fact .v{font-family:"Bebas Neue",sans-serif; font-size:clamp(2.2rem,4vw,3.6rem); line-height:.9;
         color:var(--green); letter-spacing:.01em; white-space:nowrap}
.fact .v small{font-size:.42em; letter-spacing:.02em; margin-left:.15em}
.fact p{margin:.7rem 0 0; font-size:clamp(.92rem,1.02vw,1.05rem); line-height:1.45; color:rgba(255,255,255,.78)}
@media (max-width:1000px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .big{grid-column:span 2; grid-row:span 1; aspect-ratio:4/3}
  .facts{grid-template-columns:1fr}
}

/* ── brand graphic elements (manual ch. 05) ── */

.rule-dot{display:flex; align-items:center; gap:0; margin:clamp(18px,2.2vw,30px) 0 0}
.rule-dot i{display:block; width:13px; height:13px; border:3px solid var(--green);
             border-radius:50%; flex:none; background:transparent}
.rule-dot span{display:block; height:3px; background:var(--green); width:clamp(56px,9vw,130px)}

.stalks{position:absolute; pointer-events:none; opacity:.9}
.stalks svg{display:block}

.ways li::before{content:""; flex:none; width:18px; height:21px; background:var(--green);
   -webkit-mask:url("/assets/strom.svg") no-repeat center/contain;
           mask:url("/assets/strom.svg") no-repeat center/contain}

/* ── transition ── */
.turn{background:var(--navy); color:#fff; padding:clamp(80px,11vw,180px) 0; text-align:center}
.turn h2{margin:0; font-size:clamp(2.8rem,8.4vw,8rem); color:#fff}
.turn h2 em{font-style:normal; color:var(--green); display:block}

/* ── plans ── */
.plans{margin-top:clamp(34px,4vw,60px); border-top:2px solid var(--navy)}
.plan{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(300px,42%); align-items:center;
      gap:clamp(16px,2.4vw,44px); padding:clamp(20px,2.6vw,38px) clamp(10px,1.4vw,22px);
      border-bottom:1px solid var(--rule); transition:background .28s ease, padding .28s ease; position:relative}
.plan::before{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--green); transition:width .3s ease}
.plan:hover{background:var(--mist)}
.plan:hover::before{width:6px}
.plan .sq{width:14px; height:14px; background:var(--green); flex:none; transition:transform .3s ease}
.plan:hover .sq{transform:rotate(45deg)}
.plan h3{margin:0; font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase;
         letter-spacing:.02em; line-height:.98; font-size:clamp(1.6rem,3.2vw,3.1rem); color:var(--navy)}
.plan p{margin:0; font-size:clamp(.98rem,1.05vw,1.1rem); color:var(--muted); line-height:1.5}
@media (max-width:820px){
  .plan{grid-template-columns:auto 1fr; gap:.9rem 1rem}
  .plan p{grid-column:2}
}

/* ── Marcel ── */
.about .shell{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:center}
.quote{margin:0; padding-left:clamp(20px,2.4vw,36px); border-left:5px solid var(--green);
       font-size:clamp(1.25rem,2vw,1.85rem); font-weight:300; line-height:1.45; color:var(--navy)}
.quote cite{display:block; margin-top:1.4rem; font-family:"Bebas Neue",sans-serif; font-style:normal;
            font-size:clamp(1rem,1.2vw,1.2rem); letter-spacing:.18em; color:var(--green)}

/* ── team ── */
.team{margin-top:clamp(38px,4.6vw,70px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px)}
.mate{text-align:center; text-decoration:none; display:block; color:inherit;
       scroll-margin-top:110px; transition:transform .25s ease}   /* coming back from a candidate's page lands exactly on his tile */
@media (max-width:900px){.mate{scroll-margin-top:90px}}
.mate:focus{outline:none}
.mate:focus-visible{outline:3px solid var(--green); outline-offset:4px}

/* ── karta rozhovoru v sekcii Marcel ── */
/* heading and quote on the left, card on the right, aligned to the top */
#marcel .shell{align-items:start}
#marcel .quote{margin-top:clamp(20px,2.4vw,34px)}

.rozh{display:block; background:var(--navy); color:#fff; text-decoration:none;
      padding:clamp(24px,2.8vw,40px); transition:transform .25s ease, box-shadow .25s ease}
.rozh:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(13,37,64,.3)}
.rozh .mini{display:flex; align-items:center; gap:1rem; padding-bottom:1rem; margin-bottom:1rem;
            border-bottom:1px solid rgba(255,255,255,.2)}
.rozh .mini img{width:70px; height:70px; border-radius:50%; object-fit:cover; border:3px solid var(--green)}
.rozh .kick{margin:0; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--green)}
.rozh .nm{margin:.15rem 0 0; font-family:"Bebas Neue",sans-serif; font-size:1.3rem; color:#fff}
.rozh h3{margin:.5rem 0 1rem; font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase;
         letter-spacing:.015em; line-height:1.02; font-size:clamp(1.5rem,2.4vw,2.2rem); color:#fff}
.rozh ul{margin:0; padding:0; list-style:none; display:grid; gap:.4rem}
.rozh li{font-size:.95rem; line-height:1.45; color:rgba(255,255,255,.82); padding-left:1.1rem; position:relative}
.rozh li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; background:var(--green)}
.rozh .more{display:inline-flex; align-items:center; gap:.7rem; margin-top:1.4rem;
            padding:1.05rem 1.9rem; background:var(--green); color:var(--navy);
            font-size:clamp(.86rem,1.02vw,1rem); font-weight:700; letter-spacing:.12em;
            text-transform:uppercase; transition:filter .15s}
.rozh:hover .more{filter:brightness(1.07)}
/* a click used to draw the browser's blue ring — the green one shows only for the keyboard */
.rozh:focus{outline:none}
.rozh:focus-visible{outline:3px solid var(--green); outline-offset:4px}
@media (prefers-reduced-motion:reduce){.rozh{transition:none}.rozh:hover{transform:none}}

/* ── team photo and the mayor's foreword above the candidates ──
   A full-width photo is too tall, so they sit side by side: photo left, pull-quote right. */
.uvod{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
      gap:clamp(20px,2.6vw,44px); align-items:center; margin:clamp(22px,2.6vw,36px) 0 0}
.tlacovka{margin:0}
.tlacovka img{width:100%; height:auto; display:block}
.tlacovka figcaption{margin-top:.5rem; font-size:.82rem; color:var(--muted)}
@media (max-width:860px){.uvod{grid-template-columns:1fr}}

/* ── the mayor's opening words above the candidates ── */
.list{margin:0; padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,38px);
      background:var(--mist); border-left:6px solid var(--green)}
.list p{margin:0 0 1em; font-size:clamp(1rem,1.08vw,1.1rem); line-height:1.65}
.list .thanks{font-weight:700; color:var(--navy); margin-bottom:0}
/* only two sentences of the foreword up here; the whole of it sits below the tiles */
.list .pull{margin:0; font-size:clamp(1.08rem,1.35vw,1.3rem); font-weight:300; line-height:1.55;
            color:var(--navy); max-width:70ch}
.list .pull cite{display:block; margin-top:.9rem; font-family:"Bebas Neue",sans-serif; font-style:normal;
                 font-size:clamp(.9rem,1vw,1rem); letter-spacing:.16em; color:var(--green)}
/* the full foreword below the tiles — above it there is only the pull-quote */
.prihovor{margin:clamp(34px,4vw,60px) 0 0; padding-top:clamp(24px,2.8vw,40px); border-top:2px solid var(--navy)}
.prihovor h3{margin:0 0 1rem; font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase;
             letter-spacing:.04em; font-size:clamp(1.3rem,1.8vw,1.7rem); color:var(--navy)}
.prihovor .cols{columns:2; column-gap:clamp(30px,3.6vw,60px)}
.prihovor p{margin:0 0 1em; font-size:clamp(.96rem,1.02vw,1.04rem); line-height:1.65; break-inside:avoid}
.prihovor .who{display:flex; align-items:center; gap:.9rem; margin-top:1.2rem; padding-top:1rem;
               border-top:2px solid var(--green); max-width:420px}
.prihovor .who img{width:54px; height:54px; border-radius:50%; object-fit:cover}
.prihovor .who b{display:block; color:var(--navy); line-height:1.2}
.prihovor .who span{font-size:.85rem; color:var(--muted)}
@media (max-width:860px){.prihovor .cols{columns:1}}
/* signature — a small portrait only below the text, so the section stays about the team */
.list .who{display:flex; align-items:center; gap:.9rem; margin-top:1.3rem; padding-top:1.1rem;
           border-top:2px solid var(--green)}
.list .who img{width:58px; height:58px; border-radius:50%; object-fit:cover; flex:none}
.list .who b{display:block; color:var(--navy); line-height:1.2}
.list .who span{font-size:.85rem; color:var(--muted)}
.mate .ph{aspect-ratio:1; width:80%; margin:0 auto 1rem; background:var(--mist);
          border:1px solid var(--rule); overflow:hidden; display:grid; place-items:center;
          position:relative; transition:box-shadow .25s ease}
/* ballot number and ward — a band across the bottom of the photo */
.mate .band{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:baseline;
            justify-content:center; gap:.5rem; padding:.3rem .5rem; background:rgba(13,37,64,.88)}
.mate .band b{font-family:"Bebas Neue",sans-serif; font-weight:400; line-height:1;
              font-size:clamp(1.3rem,1.9vw,1.7rem); color:var(--green)}
.mate .band span{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
                 color:rgba(255,255,255,.8)}
/* the tile is a link to a subpage — on hover it lifts (like the cards in the results)
   and the band with the number turns green */
.mate .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.mate .band,.mate .band b,.mate .band span{transition:background .25s,color .25s}
.mate:hover{transform:translateY(-8px)}
.mate:hover .ph{box-shadow:0 18px 38px rgba(23,62,102,.22)}
.mate:hover .ph img{transform:scale(1.05)}
.mate:hover .band{background:var(--green)}
.mate:hover .band b{color:var(--navy)}
.mate:hover .band span{color:rgba(23,62,102,.78)}
.mate .n{display:inline-block; padding-bottom:3px;
         background:linear-gradient(var(--green),var(--green)) no-repeat left bottom/0 3px;
         transition:background-size .3s;
         font-size:clamp(1.05rem,1.3vw,1.35rem); font-weight:700; color:var(--navy); line-height:1.25}
.mate:hover .n{background-size:100% 3px}
@media (prefers-reduced-motion:reduce){.mate,.mate .ph img{transition:none}.mate:hover{transform:none}}
.mate .mono{font-family:"Bebas Neue",sans-serif; font-size:clamp(1.7rem,2.4vw,2.4rem); color:var(--green); letter-spacing:.04em}
.mate .t{font-size:clamp(.85rem,.95vw,.95rem); color:var(--muted)}
@media (max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}

/* ── contact ── */
.join .shell{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:start}
.ways{list-style:none; margin:clamp(20px,2.4vw,36px) 0 0; padding:0}
.ways li{padding:1.05rem 0; border-bottom:1px solid var(--rule); font-size:clamp(1.05rem,1.25vw,1.28rem);
         display:flex; gap:.9rem; align-items:baseline}
form{display:grid; gap:1rem}
label{font-family:"Bebas Neue",sans-serif; font-size:clamp(1rem,1.15vw,1.15rem); letter-spacing:.16em; color:var(--green)}
input,textarea{width:100%; font:inherit; font-size:1.02rem; padding:1rem 1.15rem; color:var(--ink);
               background:var(--paper); border:2px solid var(--rule)}
input:focus,textarea:focus{outline:3px solid var(--green); outline-offset:2px; border-color:transparent}
textarea{min-height:150px; resize:vertical}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#form-status:empty{display:none}
#form-status.ok{color:var(--green); font-weight:600}
#form-status.error{color:#FFB4B4; font-weight:600}
.hint{font-size:.92rem; color:var(--muted); margin:.3rem 0 0}
.todo{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
      color:#8A5A00; background:#FFF3D6; border:1px solid #F0D69A; padding:.2em .6em; vertical-align:.2em}

/* ── footer ── */
.foot{background:var(--navy-deep); color:rgba(255,255,255,.75); padding:clamp(64px,8vw,130px) 0 2.6rem}
.foot .big{font-size:clamp(2.6rem,7.4vw,7rem); color:#fff}
.foot .big em{font-style:normal; color:var(--green)}
.foot .cols{margin-top:clamp(38px,4.6vw,70px); display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
            gap:2.4rem; padding-top:2.6rem; border-top:1px solid rgba(255,255,255,.18)}
.foot h4{margin:0 0 .8rem; font-family:"Bebas Neue",sans-serif; font-size:clamp(1rem,1.2vw,1.2rem);
         font-weight:400; letter-spacing:.2em; color:var(--green)}
.foot a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.foot a:hover{color:var(--green); border-bottom-color:var(--green)}
.foot .legal{margin-top:3rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.18); font-size:.88rem; color:rgba(255,255,255,.55)}

/* ── reveal animation ── */
.rv{opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ── responsive ── */
@media (max-width:900px){
  .top .shell{height:70px; gap:.8rem}
  .brand img{width:23px}
  .brand .txt{font-size:1.1rem}
  .nav{position:fixed; inset:70px 0 auto; flex-direction:column; gap:0; background:#fff;
       border-bottom:1px solid var(--rule); padding:.5rem var(--gut) 1.6rem; display:none}
  .nav.open{display:flex}
  .nav a{padding:1rem 0; border-bottom:1px solid var(--rule); font-size:1.05rem}
  .burger{display:block; width:44px; height:44px; flex:none}
  .hero{padding-top:calc(70px + clamp(16px,2.6vw,40px))}
  .about .shell,.join .shell{grid-template-columns:1fr}
}

@media (min-width:621px) and (max-width:900px){
  .hero{padding-bottom:0}
  .hero .shell{grid-template-columns:.95fr 1.05fr; gap:clamp(14px,2.2vw,30px); align-items:end}
  .hero .col{padding-bottom:clamp(26px,3.4vw,50px); align-self:center}
  .hero .figure{max-width:none; width:min(48vw,420px); justify-self:start; align-self:end}
  .hero h1{font-size:clamp(2.6rem,7vw,4.4rem)}
  .hero .claim{font-size:clamp(1.02rem,2vw,1.3rem)}
  .eyebrow{font-size:.7rem; letter-spacing:.11em}
  .hero .cta-row{gap:.5rem; margin-top:1.3rem}
  .hero .cta-row .btn{padding:.85rem 1.2rem; font-size:.76rem; letter-spacing:.1em}
}

@media (max-width:800px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
}

@media (max-width:620px){
  .brand .tail{display:none}
  .hero{position:relative; display:flex; flex-direction:column; min-height:100svh;
        overflow:hidden; padding:calc(70px + 16px) 0 0}
  .hero .shell{display:block; position:static}
  .hero .col{position:static; padding-bottom:0}
  .hero .eyebrow,.hero h1{position:relative; z-index:2}
  .hero .figure{position:absolute; right:-8%; bottom:0; z-index:1; margin:0;
                width:auto; max-width:none; height:min(60svh,540px)}
  .hero .figure picture{display:block; height:100%}
  .hero .figure img{height:100%; width:auto; max-width:none}
  .hero h1{font-size:clamp(2.1rem,11.5vw,4.2rem)}
  .hero .claim{display:none}
  .eyebrow{font-size:.7rem; letter-spacing:.15em; align-items:flex-start; margin-bottom:.7rem}
  .eyebrow::before{width:20px; margin-top:.55em; flex:none}
  .hero .cta-row{position:absolute; left:var(--gut); bottom:clamp(18px,3.4vh,34px); z-index:3;
           flex-direction:row; align-items:center; gap:.5rem; margin:0; width:auto}
  .hero .cta-row .btn{padding:.72rem 1.1rem; font-size:.72rem; letter-spacing:.1em; border-width:2px;
                box-shadow:0 10px 26px rgba(23,62,102,.22)}
  .hero .cta-row .btn-line{background:rgba(255,255,255,.94)}
  /* the white plate above beats .btn-line:hover — on touch the label would go white on white */
  .hero .cta-row .btn-line:hover,.hero .cta-row .btn-line:focus-visible,
  .hero .cta-row .btn-line:active{background:var(--navy); color:#fff}
  .navy8 .cta-row .btn{width:100%; justify-content:center}
}
/* ── home C: eight on navy ── */
.navy8{background:var(--navy-deep);color:#fff;border-top:6px solid var(--green)}
.navy8 .h2{color:#fff}
.n8-head{display:grid;grid-template-columns:1fr minmax(0,40ch);gap:clamp(24px,4vw,64px);align-items:end}
.n8-lede{margin:0 0 .4rem;color:rgba(255,255,255,.75);font-size:clamp(1.05rem,1.3vw,1.35rem);line-height:1.55}
.pts8{margin-top:clamp(36px,4.6vw,70px);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.18)}
.pt{display:flex;flex-direction:column;gap:.45rem;padding:clamp(22px,2.6vw,40px) clamp(16px,1.8vw,28px) clamp(22px,2.6vw,40px) 0;
    text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.18);position:relative;transition:.25s}
.pt:nth-child(4n+1){padding-left:0}
.pt:not(:nth-child(4n)){border-right:1px solid rgba(255,255,255,.18);margin-right:clamp(16px,1.8vw,28px)}
.pt::after{content:"";position:absolute;left:0;right:clamp(16px,1.8vw,28px);bottom:-1px;height:3px;background:var(--green);
    transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.pt:hover::after{transform:scaleX(1)}
.pt-n{display:grid;place-items:center;width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);border-radius:50%;border:3px solid var(--green);
    color:var(--green);font-family:"Bebas Neue",sans-serif;font-size:clamp(1.5rem,2vw,2rem);line-height:1;padding-top:.1em;margin-bottom:.6rem;transition:.25s}
.pt:hover .pt-n{background:var(--green);color:var(--navy-deep)}
.pt h3{margin:0;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em;
    line-height:.92;font-size:clamp(1.8rem,2.5vw,2.7rem);color:#fff;min-height:1.84em}
.pt-sub{margin:0;font-size:clamp(.95rem,1.05vw,1.08rem);font-weight:500;color:var(--green);line-height:1.35}
.pt-txt{margin:0;font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.45}
.pt-cat{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.btn-green{background:var(--green);border-color:var(--green);color:var(--navy)}
.btn-green:hover,.btn-green:focus-visible{background:#fff;border-color:#fff;color:var(--navy)}
.navy8 .cta-row{margin-top:clamp(30px,3.6vw,54px)}
@media (max-width:1100px){.pts8{grid-template-columns:repeat(2,1fr)}.pt:not(:nth-child(4n)){border-right:0;margin-right:0}
  .pt:nth-child(odd){border-right:1px solid rgba(255,255,255,.18);margin-right:clamp(16px,1.8vw,28px)}.pt{padding-left:0}}
@media (max-width:1000px){.n8-head{grid-template-columns:1fr}}
@media (max-width:560px){.pts8{grid-template-columns:1fr}.pt:nth-child(odd){border-right:0;margin-right:0}.pt h3{min-height:0}}