/* ============================================================
   SUN CITY SWING — CONCEPT 2  "Desert Club"
   The same editorial direction: arch motif, magazine-style
   asymmetric grid, sticky section labels. Colour and type follow
   the Sun City Swing Brand Guideline — Electric Lime #B7FF00,
   Rich Black #0A0A0A, White, Pirulen display over Poppins.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
/* Palette and type are set by the Sun City Swing Brand Guideline:
   Electric Lime #B7FF00 (primary), Rich Black #0A0A0A (base/background),
   White #FFFFFF (text/clarity). Every neutral below is a tint of black or
   white only - no colours from outside the palette. */
:root{
  /* brand core */
  --lime:#B7FF00;
  --black:#0A0A0A;
  --white:#FFFFFF;

  /* light surfaces (White) */
  --white-2:#F4F4F4;
  --white-3:#EAEAEA;
  --white-4:#D4D4D4;

  /* dark surfaces (Rich Black) */
  --black-d:#050505;
  --black-2:#1C1C1C;

  /* lime tints: -l for hover fills, -ink for lime as text or thin
     strokes on white, where pure neon would not hold contrast */
  --lime-l:#CBFF54;
  --lime-ink:#5E7F00;

  /* text */
  --mut:#525252;
  --mut-2:#767676;
  --rule:rgba(10,10,10,.14);
  --rule-2:rgba(10,10,10,.08);

  /* type: Pirulen for display, Poppins for body.
     Pirulen is a licensed font - it renders for anyone who has it installed
     or self-hosted (see the @font-face block below). Michroma, a free square
     techno face with the same proportions, is the loaded stand-in. */
  --f-dsp:"Pirulen","Michroma",Impact,sans-serif;
  --f-body:"Poppins",system-ui,-apple-system,sans-serif;

  --wrap:1280px;
  --gut:clamp(20px,4.5vw,44px);
  --sec:clamp(76px,10vw,140px);

  --arch:52% 52% 6px 6px / 34% 34% 6px 6px;
  --ease:cubic-bezier(.2,.75,.25,1);
}

/* Drop a licensed Pirulen web font at assets/fonts/ and uncomment to activate.
@font-face{
  font-family:"Pirulen";
  src:url("../fonts/pirulen.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
*/

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body);
  background:var(--white);
  color:var(--black);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
ul{list-style:none;}
::selection{background:var(--lime);color:var(--black);}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Typography ---------- */
/* Pirulen (and the Michroma stand-in) is a single-weight, all-caps square face
   and runs far wider than the serif it replaces, so display sizes come down and
   leading goes up. Boxes, grids and spacing are unchanged. Pirulen has no
   italic, so the editorial <em> accents are carried by colour instead. */
h1,h2,h3,.dsp{
  font-family:var(--f-dsp);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.14;
  letter-spacing:0;
}
h1{font-size:clamp(26px,4.2vw,56px);line-height:1.08;}
h2{font-size:clamp(20px,2.9vw,37px);line-height:1.08;}
h3{font-size:clamp(14px,1.4vw,17px);line-height:1.26;}
h1 em,h2 em,h3 em{font-style:normal;color:var(--lime-ink);}
.dark h1 em,.dark h2 em,.dark h3 em{color:var(--lime);}
p{text-wrap:pretty;}

.lab{
  font-family:var(--f-body);
  font-size:11.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--mut-2);
}
.lab-lime{color:var(--lime-ink);}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--mut);max-width:60ch;line-height:1.66;}
.muted{color:var(--mut);}
.small{font-size:14px;color:var(--mut-2);line-height:1.6;}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.wrap-n{max-width:900px;margin-inline:auto;padding-inline:var(--gut);}
section{padding-block:var(--sec);}
section.tight{padding-top:0;}
.rule{height:1px;background:var(--rule);border:0;}

/* magazine two-column: sticky label left, content right */
.mag{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,70px);align-items:start;}
.mag > .mag-lab{position:sticky;top:110px;}
.mag-lab .n{
  font-family:var(--f-dsp);font-size:30px;font-weight:400;
  color:var(--white-4);line-height:1.06;margin-bottom:10px;display:block;
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14.5px;font-weight:700;letter-spacing:.04em;
  padding:15px 28px;border-radius:100px;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .24s var(--ease),color .24s,border-color .24s,transform .24s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none;}
.btn-lime{background:var(--lime);color:var(--black);}
.btn-lime:hover{background:var(--lime-l);transform:translateY(-2px);}
.btn-black{background:var(--black);color:var(--white);}
.btn-black:hover{background:var(--black-2);transform:translateY(-2px);}
.btn-line{border-color:var(--rule);color:var(--black);}
.btn-line:hover{border-color:var(--black);background:var(--black);color:var(--white);transform:translateY(-2px);}
.btn-white{background:var(--white);color:var(--black);}
.btn-white:hover{background:#fff;transform:translateY(-2px);}
.btn-white-line{border-color:rgba(255,255,255,.34);color:var(--white);}
.btn-white-line:hover{border-color:var(--white);background:var(--white);color:var(--black);}
.btn-sm{padding:11px 22px;font-size:13.5px;}
.btn-block{width:100%;}

.arrow-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;color:var(--black);
  padding-bottom:4px;border-bottom:1.5px solid var(--lime);
  transition:gap .24s var(--ease),color .2s;
}
.arrow-link:hover{gap:16px;color:var(--lime-ink);}

/* ---------- 6. Nav ---------- */
.nav{
  position:sticky;top:0;z-index:90;
  background:rgba(10,10,10,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:border-color .3s,background .3s;
}
.nav.stuck{border-color:rgba(255,255,255,.18);background:rgba(10,10,10,.97);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:112px;}
.nav .logo{height:88px;width:auto;}
.menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);}
.menu a{
  font-size:14.5px;font-weight:600;color:var(--white);
  position:relative;padding:6px 0;transition:color .2s;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--lime);transition:width .3s var(--ease);
}
.menu a:hover{color:var(--lime);}
.menu a:hover::after,.menu a.active::after{width:100%;}
.menu a.active{color:var(--lime);}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-cta .btn-black{background:var(--lime);color:var(--black);}
.nav-cta .btn-black:hover{background:var(--lime-l);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:9px;}
.burger span{width:24px;height:2px;background:var(--lime);transition:transform .3s var(--ease),opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 7. Arch motif ---------- */
.arch{border-radius:var(--arch);overflow:hidden;}
.arch img{width:100%;height:100%;object-fit:cover;display:block;}

/* rotating sun badge */
.sunbadge{
  width:120px;height:120px;position:absolute;
  display:grid;place-items:center;
}
.sunbadge .ring{animation:spin 26s linear infinite;}
.sunbadge .ring text{
  font-family:var(--f-body);font-size:10.4px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;fill:var(--black);
}
.sunbadge .dot{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;color:var(--black);
}
.sunbadge .dot svg{width:22px;height:22px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 8. Hero ---------- */
.hero{padding-block:clamp(48px,6vw,86px) 0;position:relative;}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.5vw,64px);align-items:end;}
.hero h1{margin:22px 0 26px;}
.hero h1 .ln{display:block;}
.hero-l p{max-width:44ch;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.hero-r{position:relative;}
.hero-r .arch{height:clamp(400px,54vw,620px);border:1px solid var(--rule-2);}
.hero-r .sunbadge{left:-56px;bottom:56px;background:var(--white);border-radius:50%;box-shadow:0 20px 50px -22px rgba(0,0,0,.35);}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);margin-top:clamp(48px,6vw,80px);
}
.facts .f{padding:30px 26px 4px 0;border-right:1px solid var(--rule);}
.facts .f:last-child{border-right:0;}
.facts .f .k{
  font-family:var(--f-dsp);font-weight:400;font-size:clamp(19px,2.2vw,28px);
  line-height:1.08;letter-spacing:0;text-transform:uppercase;
}
.facts .f .v{font-size:13.5px;color:var(--mut);margin-top:10px;max-width:24ch;}

/* ---------- 9. Ribbon (sand band) ---------- */
.ribbon{background:var(--white-3);}
.ribbon .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);padding-block:clamp(40px,5vw,64px);}
.ribbon .r .ic{color:var(--lime-ink);margin-bottom:14px;}
.ribbon .r .ic svg{width:26px;height:26px;}
.ribbon .r b{display:block;font-family:var(--f-dsp);font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:uppercase;line-height:1.24;margin-bottom:7px;}
.ribbon .r span{font-size:14.5px;color:var(--mut);line-height:1.55;}

/* ---------- 10. Editorial list rows ---------- */
.rows{border-top:1px solid var(--rule);}
.row{
  display:grid;grid-template-columns:76px 1.05fr 1.4fr 46px;
  gap:clamp(14px,2.4vw,34px);align-items:center;
  padding:clamp(24px,2.8vw,34px) clamp(12px,1.6vw,22px);
  border-bottom:1px solid var(--rule);
  position:relative;transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.row:hover{background:var(--white-2);padding-left:clamp(20px,2.4vw,34px);}
.row.simple{grid-template-columns:76px 1fr;}
.row.simple:hover{padding-left:clamp(20px,2.4vw,34px);}
.row .idx{font-family:var(--f-dsp);font-size:14px;font-weight:400;color:var(--white-4);}
.row h3{margin:0;}
.row p{font-size:15.5px;color:var(--mut);margin:0;}
.row .go{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;justify-self:end;color:var(--black);
  transition:background .28s var(--ease),color .28s,border-color .28s,transform .28s var(--ease);
}
.row .go svg{width:15px;height:15px;}
.row:hover .go{background:var(--lime);border-color:var(--lime);color:var(--black);transform:rotate(-45deg);}

/* ---------- 11. Feature tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.tile{background:var(--white);padding:clamp(28px,3vw,40px);transition:background .3s;}
.tile:hover{background:var(--white-2);}
.tile .ic{color:var(--lime-ink);margin-bottom:20px;}
.tile .ic svg{width:26px;height:26px;}
.tile h3{margin-bottom:10px;}
.tile p{font-size:15.5px;color:var(--mut);}

/* ---------- 12. Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);align-items:end;}
.gal .g1{grid-column:1/6;}
.gal .g2{grid-column:6/10;padding-bottom:clamp(20px,4vw,60px);}
.gal .g3{grid-column:10/13;}
.gal figure{position:relative;overflow:hidden;}
.gal .arch{border:1px solid var(--rule-2);}
.gal .g1 .arch{height:clamp(300px,38vw,470px);}
.gal .g2 .arch{height:clamp(240px,30vw,370px);}
.gal .g3 .arch{height:clamp(220px,26vw,320px);}
.gal img{transition:transform .8s var(--ease);}
.gal figure:hover img{transform:scale(1.05);}
.gal figcaption{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);font-weight:600;}

/* ---------- 13. Quote slider ---------- */
.qwrap{position:relative;text-align:center;max-width:900px;margin-inline:auto;}
.qslide{display:none;}
.qslide.on{display:block;animation:fade .5s var(--ease);}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.qslide .stars{display:flex;gap:4px;justify-content:center;color:var(--lime-ink);margin-bottom:26px;}
.qslide .stars svg{width:17px;height:17px;}
.qslide blockquote{
  font-family:var(--f-dsp);font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,2vw,26px);line-height:1.34;letter-spacing:0;
  margin-bottom:26px;
}
.qslide p{color:var(--mut);font-size:16.5px;max-width:64ch;margin:0 auto 26px;}
.qslide .who{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);font-weight:700;}
.qdots{display:flex;gap:9px;justify-content:center;margin-top:38px;}
.qdots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--white-4);transition:background .25s,transform .25s var(--ease);
}
.qdots button.on{background:var(--lime-ink);transform:scale(1.35);}

/* ---------- 14. Dark CTA block ---------- */
.dark{background:var(--black);color:var(--white);position:relative;overflow:hidden;}
.dark::after{
  content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:min(760px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(183,255,0,.16),transparent 62%);
  pointer-events:none;
}
.dark .wrap{position:relative;z-index:1;text-align:center;}
.dark .lab{color:var(--lime);}
.dark h2{margin:18px auto 20px;max-width:15ch;}
.dark p{color:rgba(255,255,255,.68);max-width:54ch;margin:0 auto 30px;}
.dark .ph{
  display:inline-block;font-family:var(--f-dsp);font-weight:400;
  font-size:clamp(20px,2.8vw,35px);letter-spacing:0;color:var(--white);
  margin-bottom:32px;border-bottom:1.5px solid rgba(255,255,255,.3);padding-bottom:6px;
  transition:border-color .25s,color .25s;
}
.dark .ph:hover{color:var(--lime);border-color:var(--lime);}
.dark-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- 15. Page head ---------- */
.phead{padding-block:clamp(52px,6.5vw,96px) clamp(40px,5vw,64px);border-bottom:1px solid var(--rule);}
.phead .crumb{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2);font-weight:600;margin-bottom:26px;}
.phead .crumb a:hover{color:var(--lime-ink);}
.phead .crumb b{color:var(--black);font-weight:600;}
.phead-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:end;}
.phead h1{font-size:clamp(24px,3.8vw,50px);}
.phead .lead{margin-bottom:6px;}

/* ---------- 16. Steps ---------- */
.steps{counter-reset:s;}
.stepr{
  display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,3vw,50px);
  padding:clamp(30px,3.4vw,44px) 0;border-bottom:1px solid var(--rule);
  align-items:start;
}
.stepr:first-child{border-top:1px solid var(--rule);}
.stepr .sn{
  font-family:var(--f-dsp);font-weight:400;
  font-size:clamp(28px,3.3vw,45px);line-height:.86;color:var(--lime-ink);letter-spacing:0;
}
.stepr h3{margin-bottom:10px;}
.stepr p{color:var(--mut);max-width:58ch;font-size:16px;}

/* ---------- 17. FAQ ---------- */
.faq{border-bottom:1px solid var(--rule);}
.faq:first-of-type{border-top:1px solid var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:26px 56px 26px 0;
  font-family:var(--f-dsp);font-weight:400;text-transform:uppercase;
  font-size:clamp(13px,1.35vw,16px);line-height:1.4;letter-spacing:0;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--lime-ink);}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:12px;top:50%;background:var(--lime-ink);
  transition:transform .3s var(--ease),opacity .3s;
}
.faq summary::before{width:15px;height:1.5px;transform:translateY(-50%);}
.faq summary::after{width:1.5px;height:15px;transform:translate(7px,-50%);}
.faq[open] summary{color:var(--lime-ink);}
.faq[open] summary::after{opacity:0;transform:translate(7px,-50%) rotate(90deg);}
.faq .a{padding:0 56px 28px 0;color:var(--mut);font-size:16.5px;max-width:76ch;}

/* ---------- 18. Contact ---------- */
.cgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4.5vw,70px);align-items:start;}
.cblock{padding-block:22px;border-bottom:1px solid var(--rule);}
.cblock:first-child{border-top:1px solid var(--rule);}
.cblock .lab{display:block;margin-bottom:10px;}
.cphone{
  font-family:var(--f-dsp);font-weight:400;
  font-size:clamp(18px,2.3vw,29px);letter-spacing:0;
  display:inline-block;transition:color .22s;
}
.cphone:hover{color:var(--lime-ink);}
.socials{display:flex;gap:10px;margin-top:6px;}
.socials a{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;color:var(--black);transition:.24s var(--ease);
}
.socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--black);transform:translateY(-3px);}

.form{background:var(--white-2);border:1px solid var(--rule);border-radius:22px;padding:clamp(28px,3.6vw,46px);}
.form h3{margin-bottom:8px;}
.form .fnote{color:var(--mut);font-size:15px;margin-bottom:28px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);font-weight:700;margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;background:var(--white);border:1.5px solid var(--rule);
  border-radius:10px;padding:13px 15px;font-size:15.5px;
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--mut-2);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--lime-ink);box-shadow:0 0 0 3px rgba(94,127,0,.18);
}
.field textarea{resize:vertical;min-height:106px;}
.form-note{font-size:12.5px;color:var(--mut-2);text-align:center;margin-top:14px;}
.form-ok{
  display:none;background:rgba(183,255,0,.16);border:1px solid rgba(94,127,0,.34);
  color:var(--lime-ink);border-radius:10px;padding:13px 16px;font-size:14.5px;margin-bottom:18px;
}
.form-ok.show{display:block;}

/* ---------- 19. Footer ---------- */
.ft{background:var(--black);color:var(--white);padding-top:clamp(56px,6.5vw,88px);overflow:hidden;}
.ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(26px,3.6vw,54px);padding-bottom:clamp(40px,5vw,64px);}
.ft .logo{height:132px;margin-bottom:26px;}
.ft .blurb{color:rgba(255,255,255,.66);font-size:15px;max-width:32ch;}
.ft h4{
  font-family:var(--f-body);font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--lime);margin-bottom:18px;
}
.ft-cols a:not(.btn):not(.socials a){display:block;color:rgba(255,255,255,.72);font-size:15px;padding:5px 0;transition:color .2s,padding-left .22s var(--ease);}
.ft-cols nav a:hover{color:var(--white);padding-left:6px;}
.ft .li{color:rgba(255,255,255,.66);font-size:15px;padding:5px 0;}
.ft .socials a{border-color:rgba(255,255,255,.24);color:var(--white);}
.ft .socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--black);}
.ft-mark{
  font-family:var(--f-dsp);font-weight:400;
  font-size:clamp(28px,7.4vw,104px);line-height:.94;letter-spacing:0;
  color:rgba(255,255,255,.08);white-space:nowrap;
  padding-bottom:clamp(16px,2vw,26px);user-select:none;
}
.ft-bot{
  border-top:1px solid rgba(255,255,255,.16);padding-block:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.5);
}
.ft-bot a{color:rgba(255,255,255,.62);transition:color .2s;}
.ft-bot a:hover{color:var(--lime);}
.ft-legal{display:flex;gap:20px;flex-wrap:wrap;}
.ft-legal a{color:rgba(255,255,255,.62);transition:color .2s;}
.ft-legal a:hover{color:var(--lime);}

/* ---------- 20. Legal pages ---------- */
.mag-lab-toc{max-height:calc(100vh - 132px);overflow-y:auto;}
/* the section mark is not in the square display face - set it in Poppins */
.mag-lab-toc .n{font-family:var(--f-body);font-size:34px;line-height:1;}
.legal-toc{margin-top:20px;border-top:1px solid var(--rule);}
.legal-toc a{
  display:block;padding:9px 0;font-size:14px;color:var(--mut);
  border-bottom:1px solid var(--rule-2);
  transition:color .2s,padding-left .22s var(--ease);
}
.legal-toc a:hover{color:var(--lime-ink);padding-left:6px;}

.legal{max-width:80ch;}
.legal .lsec{padding-bottom:clamp(28px,3.2vw,44px);scroll-margin-top:118px;}
.legal .lsec + .lsec{border-top:1px solid var(--rule);padding-top:clamp(28px,3.2vw,44px);}
.legal h2{font-size:clamp(15px,1.7vw,21px);margin-bottom:16px;}
.legal h2 .n{color:var(--white-4);margin-right:12px;}
.legal h3{margin:24px 0 8px;}
.legal p{color:var(--mut);font-size:16.5px;margin-bottom:14px;}
.legal p:last-child{margin-bottom:0;}
.legal a:not(.btn){color:var(--lime-ink);border-bottom:1px solid rgba(94,127,0,.32);}
.legal a:not(.btn):hover{border-bottom-color:var(--lime-ink);}
.legal ul{margin:0 0 16px;}
.legal li{
  position:relative;padding-left:22px;margin-bottom:9px;
  color:var(--mut);font-size:16.5px;line-height:1.6;
}
.legal li::before{
  content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  background:var(--lime);border:1px solid var(--lime-ink);
}
.legal .lmeta{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut-2);font-weight:600;margin-bottom:24px;
}
.legal .lnote{
  background:var(--white-2);border-left:2px solid var(--lime);
  padding:20px 24px;margin-bottom:34px;font-size:15px;color:var(--mut);
}
.legal .lnote b{color:var(--black);}

/* ---------- 21. Reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .sunbadge .ring{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 22. Responsive ---------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:38px;}
  .hero-r .arch{height:clamp(320px,58vw,460px);}
  .hero-r .sunbadge{left:auto;right:16px;bottom:-30px;}
  .facts{grid-template-columns:repeat(2,1fr);}
  .facts .f:nth-child(2){border-right:0;}
  .ribbon .wrap{grid-template-columns:repeat(2,1fr);}
  .tiles{grid-template-columns:repeat(2,1fr);}
  .mag{grid-template-columns:1fr;}
  .mag > .mag-lab{position:static;}
  .mag-lab-toc{max-height:none;overflow:visible;}
  .legal-toc{display:grid;grid-template-columns:repeat(2,1fr);column-gap:26px;}
  .phead-grid{grid-template-columns:1fr;}
  .ft-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .menu{
    position:fixed;left:0;right:0;top:var(--navbottom,124px);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--black);border-bottom:1px solid rgba(255,255,255,.16);
    padding:6px var(--gut) 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.3s var(--ease);max-height:calc(100vh - 140px);overflow:auto;
  }
  .menu.open{transform:none;opacity:1;pointer-events:auto;}
  .menu a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px;font-family:var(--f-dsp);font-weight:400;}
  .menu a::after{display:none;}
  .burger{display:flex;}
  .nav-cta .btn{display:none;}
  .two-col{grid-template-columns:1fr !important;}
  .row{grid-template-columns:52px 1fr 40px;row-gap:8px;}
  .row.simple{grid-template-columns:52px 1fr;}
  .row p{grid-column:2/4;}
  .gal{grid-template-columns:1fr;}
  .gal .g1,.gal .g2,.gal .g3{grid-column:1/-1;padding-bottom:0;}
  .cgrid{grid-template-columns:1fr;}
  .stepr{grid-template-columns:1fr;gap:6px;}
}
@media (max-width:640px){
  body{font-size:16.5px;}
  .nav .wrap{height:88px;}
  .nav .logo{height:68px;}
  .ft .logo{height:104px;}
  .facts{grid-template-columns:1fr;}
  .facts .f{border-right:0;border-bottom:1px solid var(--rule);padding-right:0;padding-bottom:24px;}
  .facts .f:last-child{border-bottom:0;}
  .ribbon .wrap{grid-template-columns:1fr;}
  .tiles{grid-template-columns:1fr;}
  .f-row{grid-template-columns:1fr;}
  .ft-cols{grid-template-columns:1fr;}
  .legal-toc{grid-template-columns:1fr;}
  .hero-cta .btn,.dark-cta .btn{width:100%;}
  .hero-r .sunbadge{width:96px;height:96px;}
}