/* ============================================================
   CLARK COUNTY — Inner page components
   Loaded after site.css. Reuses all tokens.
   ============================================================ */

/* ---------- page hero ---------- */
.pagehero{position:relative;overflow:hidden;padding-top:clamp(130px,18vw,210px);padding-bottom:clamp(50px,7vw,96px)}
.pagehero .glow{position:absolute;right:-12%;top:-10%;width:60vw;max-width:680px;height:60vw;max-height:680px;
  background:radial-gradient(circle,var(--green-glow),transparent 62%);filter:blur(50px);opacity:.4;pointer-events:none}
.pagehero .court{position:absolute;right:-4%;bottom:-30%;width:min(46vw,560px);opacity:.16;pointer-events:none}
.crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-bottom:30px}
.crumb a{color:var(--ash);transition:.3s}
.crumb a:hover{color:var(--green)}
.crumb .sep{color:var(--ash-dim)}
.crumb .cur{color:var(--green)}
.pagehero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.03em;
  font-size:clamp(52px,11vw,168px)}
.pagehero h1 .g{color:var(--green)}
.pagehero .intro{max-width:54ch;color:#C7C7C1;font-size:clamp(16px,1.6vw,20px);margin-top:30px}
.pagehero .hmeta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* nav active link */
.nav .links a.active,.mobile-menu a.active{color:var(--green)}

/* ---------- big alternating feature rows (pillars) ---------- */
.pillar{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr;align-items:center;
  padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
@media(min-width:900px){
  .pillar{grid-template-columns:1fr 1fr}
  .pillar.flip .pcopy{order:2}
  .pillar.flip .pmedia{order:1}
}
.pillar .pmedia{aspect-ratio:5/4;min-height:300px}
.pillar .pnum{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--green)}
.pillar h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.4vw,56px);
  line-height:.96;letter-spacing:-.02em;margin:18px 0 22px}
.pillar p{color:#C2C2BC;font-size:15.5px;max-width:46ch;margin-bottom:16px}
.pillar ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.pillar li{display:flex;gap:12px;font-size:14.5px;color:#D4D4CE;line-height:1.4}
.pillar li svg{flex:0 0 auto;margin-top:3px}

/* ---------- comparison table ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--ink-2)}
.compare{width:100%;min-width:760px;border-collapse:collapse}
.compare th,.compare td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--line);vertical-align:middle}
.compare thead th{position:sticky;top:0;background:var(--ink-3);z-index:1}
.compare thead .tname{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:-.01em}
.compare thead .tprice{font-family:var(--mono);font-size:12px;color:var(--green);margin-top:6px;display:block}
.compare thead th.feat,.compare td.feat{background:rgba(120,190,32,.06)}
.compare tbody th{font-family:var(--text);font-weight:600;font-size:14px;color:#D4D4CE;width:34%}
.compare td{text-align:center}
.compare td:first-of-type{text-align:left}
.compare .yes svg{display:inline-block}
.compare .no{color:var(--ash-dim);font-family:var(--mono);font-size:13px}
.compare .feat-row th{color:var(--green)}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.compare .cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line);max-width:880px}
.faq .item{border-bottom:1px solid var(--line)}
.faq .q{width:100%;background:none;border:0;color:var(--paper);cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(16px,2.1vw,24px);letter-spacing:-.01em}
.faq .q .ico{flex:0 0 auto;width:22px;height:22px;position:relative}
.faq .q .ico::before,.faq .q .ico::after{content:"";position:absolute;background:var(--green);transition:.4s var(--ease)}
.faq .q .ico::before{top:10px;left:0;width:22px;height:2px}
.faq .q .ico::after{top:0;left:10px;width:2px;height:22px}
.faq .item.open .q .ico::after{transform:scaleY(0)}
.faq .a{display:grid;grid-template-rows:0fr;transition:none}
.faq .item.open .a{grid-template-rows:1fr}
.faq .a>p{overflow:hidden;min-height:0;color:#C2C2BC;font-size:15px;max-width:64ch;line-height:1.6;margin:0;padding-bottom:0;opacity:0;transform:translateY(-8px);transition:opacity .45s var(--ease),transform .45s var(--ease),padding-bottom .35s var(--ease)}
.faq .item.open .a>p{opacity:1;transform:none;padding-bottom:26px}

/* ---------- timeline (accolades / roadmap) ---------- */
.timeline{position:relative;margin-top:20px;padding-left:30px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{position:relative;padding:0 0 38px 26px}
.tl-item::before{content:"";position:absolute;left:-30px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:2px solid var(--green)}
.tl-item.lit::before{background:var(--green);box-shadow:0 0 16px var(--green-glow)}
.tl-item .yr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--green)}
.tl-item h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(18px,2.4vw,26px);
  letter-spacing:-.01em;margin:8px 0 6px;line-height:1.05}
.tl-item p{color:#B7B7B1;font-size:14px;max-width:52ch}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery .g-item{position:relative;border:1px solid var(--line)}
.gallery .g-item.tall{grid-row:span 2;aspect-ratio:auto}
.gallery .g-item{aspect-ratio:1/1}
.gallery .wide{grid-column:span 2;aspect-ratio:2/1}

/* ============================================================
   METHOD ANIMATIONS — concept explainers (pure CSS/SVG)
   ============================================================ */
.manim{position:relative;aspect-ratio:5/4;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:radial-gradient(130% 130% at 50% -10%,#16181d,#0a0b0e)}
.manim .mlabel{position:absolute;left:14px;top:13px;z-index:6;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.manim .mcap{position:absolute;left:14px;right:14px;bottom:13px;z-index:6;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}
.manim .mcourt{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
@media (prefers-reduced-motion:reduce){.manim *{animation:none!important}}

/* 01 — film / telestration */
.mfilm-o{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green-glow);animation:mfo 4.2s var(--ease) infinite alternate}
.mfilm-d{position:absolute;width:19px;height:19px;border-radius:50%;border:2px solid var(--paper);animation:mfd 4.2s var(--ease) infinite alternate}
.mfilm-ring{position:absolute;width:36px;height:36px;border-radius:50%;border:1.5px dashed var(--green);animation:mfo 4.2s var(--ease) infinite alternate,mring 2s ease-in-out infinite}
@keyframes mfo{from{left:28%;top:54%}to{left:62%;top:34%}}
@keyframes mfd{from{left:23%;top:62%}to{left:57%;top:42%}}
@keyframes mring{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.05);opacity:1}}
.mscrub{position:absolute;left:14px;right:14px;bottom:30px;height:3px;border-radius:3px;background:rgba(244,244,239,.14);z-index:5}
.mscrub i{position:absolute;top:-3px;left:0;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green-glow);animation:mhead 4.2s linear infinite}
@keyframes mhead{from{left:0}to{left:100%}}

/* 02 — library grid */
.mlib{position:absolute;inset:30px 16px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mlib .mcard{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#1b1d23,#121317);position:relative;opacity:.22;animation:mcard 3.6s ease-in-out infinite}
.mlib .mcard::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);border-left:8px solid var(--green);border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:.85}
.mlib .mcard:nth-child(2){animation-delay:.3s}.mlib .mcard:nth-child(3){animation-delay:.6s}.mlib .mcard:nth-child(4){animation-delay:.9s}.mlib .mcard:nth-child(5){animation-delay:1.2s}.mlib .mcard:nth-child(6){animation-delay:1.5s}
@keyframes mcard{0%,72%,100%{opacity:.22;border-color:var(--line)}22%,52%{opacity:1;border-color:var(--green)}}

/* 03 — group / connections */
.mgroup .mln{stroke:var(--green);stroke-width:1.5;stroke-dasharray:5 6;opacity:.55;animation:mdash 1.1s linear infinite}
@keyframes mdash{to{stroke-dashoffset:-22}}
.mgroup .mnode{position:absolute;width:13px;height:13px;border-radius:50%;background:#23262d;border:1.5px solid var(--paper);opacity:.85;transform:translate(-50%,-50%)}
.mgroup .mnode.c{width:17px;height:17px;background:var(--green);border-color:var(--green);box-shadow:0 0 16px var(--green-glow);animation:mpulse 1.8s ease-in-out infinite}
@keyframes mpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.28)}}

/* 04 — access / ladder to the next level */
.macc .mstep{position:absolute;left:50%;width:48px;height:8px;border-radius:5px;background:#1c1f25;border:1px solid var(--line);transform:translateX(-50%)}
.macc .mclimb{position:absolute;left:50%;width:15px;height:15px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green-glow);transform:translateX(-50%);animation:mclimb 3.6s cubic-bezier(.7,0,.3,1) infinite}
@keyframes mclimb{0%{bottom:13%}24%{bottom:33%}50%{bottom:53%}74%{bottom:73%}100%{bottom:13%}}
.macc .mstar{position:absolute;left:50%;top:8%;transform:translateX(-50%);color:var(--green);animation:mglow 2s ease-in-out infinite}
@keyframes mglow{0%,100%{opacity:.5;filter:drop-shadow(0 0 2px var(--green))}50%{opacity:1;filter:drop-shadow(0 0 12px var(--green))}}

/* ---------- money / value breakdown ---------- */
.money{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.money{grid-template-columns:1fr 1fr}}
.money .col{border:1px solid var(--line);padding:clamp(26px,3.5vw,40px);background:var(--ink-2)}
.money .col.good{border-color:rgba(120,190,32,.4);background:radial-gradient(120% 100% at 100% 0%,#14160d,var(--ink-2) 60%)}
.money .col .h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.money .col.good .h{color:var(--green)}
.money .col h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,34px);letter-spacing:-.01em;margin-bottom:24px;line-height:.98}
.money .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-top:1px solid var(--line-2);font-size:14.5px;color:#CDCDC7}
.money .row .amt{font-family:var(--mono);font-size:13px;color:var(--ash);white-space:nowrap}
.money .col.good .row .amt{color:var(--green)}
.money .note{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ash-dim);margin-top:20px;line-height:1.6}

/* ---------- big quote block ---------- */
.quoteblock{padding-block:clamp(70px,11vw,150px);text-align:center}
.quoteblock .q{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.0;letter-spacing:-.02em;
  font-size:clamp(28px,5vw,68px);max-width:20ch;margin:0 auto}
.quoteblock .q .g{color:var(--green)}
.quoteblock .by{margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ash);text-transform:uppercase}

/* ---------- mini cta strip ---------- */
.ctastrip{border-top:1px solid var(--line);padding-block:clamp(60px,9vw,120px);text-align:center;position:relative;overflow:hidden}
.ctastrip .glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80vw;max-width:760px;height:600px;
  background:radial-gradient(circle,var(--green-glow),transparent 62%);filter:blur(60px);opacity:.4;pointer-events:none}
.ctastrip .inner{position:relative;z-index:2}
.ctastrip h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,7vw,96px);line-height:.86;letter-spacing:-.03em}
.ctastrip h2 .g{color:var(--green);text-shadow:0 0 44px var(--green-glow)}
.ctastrip .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}