/* ============================================================
   DENVER COLORADO THINGS TO DO — design system
   Palette: Mile High Sunrise
   ============================================================ */
:root{
  --blue:#1657c8;
  --blue-deep:#0d3a8c;
  --red:#e4322b;
  --gold:#ffc42e;
  --orange:#ff6b2c;
  --green:#17a66b;
  --violet:#7b2cbf;
  --ink:#12172b;
  --ink-soft:#3d4468;
  --paper:#ffffff;
  --sky:#eaf3ff;
  --cream:#fff8e8;
  --mint:#e6fbf2;
  --blush:#ffeceb;
  --line:#12172b;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --radius:18px;
  --maxw:1180px;
  --hdr-h:112px;
  --font-display:'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', ui-monospace, 'Courier New', monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-deep); text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:4px solid var(--violet); outline-offset:3px; border-radius:6px}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; line-height:1.06; letter-spacing:-0.02em; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6.2vw,4.3rem)}
h2{font-size:clamp(1.7rem,4.4vw,3rem)}
h3{font-size:clamp(1.25rem,2.6vw,1.85rem)}
h4{font-size:clamp(1.05rem,2vw,1.3rem)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em; padding-left:1.25em}
li{margin-bottom:.5em}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue-deep);
  margin:0 0 .8rem; display:block;
}
.lede{font-size:clamp(1.06rem,2.1vw,1.3rem); font-weight:600; color:var(--ink-soft)}

/* ---------- HEADER (white) ---------- */
.hdr{
  position:sticky; top:0; z-index:900;
  background:#fff; border-bottom:4px solid var(--ink);
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:18px; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink)}
.brand img{width:88px; height:88px; object-fit:contain}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.01em}
.brand-txt span{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px}
.nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav a{
  font-weight:800; font-size:.94rem; text-decoration:none; color:var(--ink);
  padding:8px 12px; border-radius:10px;
}
.nav a:hover{background:var(--gold); color:var(--ink)}
.hdr-right{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:800; font-size:.95rem;
  text-decoration:none; padding:12px 20px; border:3px solid var(--ink); border-radius:10px;
  background:var(--gold); color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease; cursor:pointer;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); color:var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{color:#fff}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{color:#fff}
.burger{
  display:none; width:52px; height:48px; border:3px solid var(--ink); border-radius:12px;
  background:var(--sky); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  box-shadow:var(--shadow-sm);
}
.burger span{display:block; width:24px; height:3px; background:var(--ink); border-radius:2px}
.mobile-nav{display:none; background:#fff; border-bottom:4px solid var(--ink); padding:10px 22px 20px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block; padding:12px 6px; font-weight:800; text-decoration:none; color:var(--ink); border-bottom:2px dashed #d8def0}
.mobile-nav a:last-child{border-bottom:0}

/* ---------- SCROLL FLIP PANELS (signature) ---------- */
.deck{perspective:1600px; perspective-origin:50% 0%}
.panel{
  transform-origin:50% 0%;
  will-change:transform, opacity;
}
@media (prefers-reduced-motion: no-preference){
  .js .panel{opacity:0; transform:rotateX(-32deg) translateY(46px) scale(.965)}
  .js .panel.flipped{
    opacity:1; transform:rotateX(0) translateY(0) scale(1);
    transition:transform .85s cubic-bezier(.19,1,.22,1), opacity .6s ease-out;
  }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .panel{
      opacity:1; transform:none;
      animation:flipup linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 78%;
    }
    .js .panel.flipped{transition:none}
  }
}
@keyframes flipup{
  from{opacity:.15; transform:rotateX(-34deg) translateY(52px) scale(.955)}
  to{opacity:1; transform:rotateX(0deg) translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .panel{opacity:1; transform:none}
  .ticker-track{animation:none}
  .ticker{animation:none}
}

/* ---------- SECTION SHELLS ---------- */
.sec{padding:72px 0; position:relative}
.sec-sky{background:var(--sky)}
.sec-cream{background:var(--cream)}
.sec-mint{background:var(--mint)}
.sec-blush{background:var(--blush)}
.sec-ink{background:var(--ink); color:#fff}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .eyebrow{color:var(--gold)}
.sec-ink a{color:var(--gold)}
.sec-blue{background:var(--blue); color:#fff}
.sec-blue h2,.sec-blue h3{color:#fff}
.sec-blue .eyebrow{color:var(--gold)}
.sec-blue a{color:var(--gold)}

/* mountain divider */
.ridge{display:block; width:100%; height:38px}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(1200px 520px at 12% -10%, rgba(255,196,46,.55), transparent 62%),
    radial-gradient(900px 460px at 92% 0%, rgba(22,87,200,.35), transparent 60%),
    linear-gradient(178deg,#fff 0%, var(--sky) 100%);
  padding:56px 0 0; overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:44px; align-items:center}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 58%, var(--gold) 58%, var(--gold) 92%, transparent 92%);
  padding:0 .08em;
}
.hero-img{
  border:5px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  overflow:hidden; background:#fff; transform:rotate(-1.4deg);
}
.hero-img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px; padding:0; list-style:none}
.chip{
  font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:8px 14px; border:3px solid var(--ink); border-radius:10px;
  background:#fff; box-shadow:3px 3px 0 var(--ink); text-decoration:none; color:var(--ink);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.chip:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--gold); color:var(--ink)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- ANSWER BOX (AIO) ---------- */
.answer{
  background:#fff; border:5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:30px 30px 24px; margin:-34px auto 0; position:relative; z-index:5;
}
.answer .tag{
  position:absolute; top:-19px; left:26px; background:var(--red); color:#fff;
  font-family:var(--font-mono); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 14px; border:3px solid var(--ink); border-radius:10px;
}
.answer p:last-child{margin-bottom:0}
.answer p strong{background:var(--gold); padding:0 4px; border-radius:3px}

/* ---------- POP-OUT FACT CARDS ---------- */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.pop{
  background:#fff; border:4px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.pop:hover{transform:translate(-4px,-6px) rotate(-.8deg); box-shadow:12px 14px 0 var(--ink)}
.pop h3,.pop h4{margin-bottom:.4em}
.pop p:last-child{margin-bottom:0}
.pop-gold{background:var(--gold)}
.pop-blue{background:var(--blue); color:#fff}
.pop-blue h3,.pop-blue h4{color:#fff}
.pop-red{background:var(--red); color:#fff}
.pop-red h3,.pop-red h4{color:#fff}
.pop-green{background:var(--green); color:#fff}
.pop-green h3,.pop-green h4{color:#fff}
.pop-violet{background:var(--violet); color:#fff}
.pop-violet h3,.pop-violet h4{color:#fff}
.pop-orange{background:var(--orange); color:#fff}
.pop-orange h3,.pop-orange h4{color:#fff}
.pop .num{
  font-family:var(--font-mono); font-size:2.2rem; font-weight:700; line-height:1; display:block; margin-bottom:6px;
}
.pop .lbl{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85}

/* ---------- BIG INFOGRAPHIC ---------- */
.infographic{
  border:6px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  background:#fff; padding:12px; margin:0 auto; max-width:1000px;
}
.infographic img{width:100%; border-radius:10px}
.figcap{
  font-family:var(--font-mono); font-size:.82rem; text-align:center; margin-top:14px; color:var(--ink-soft);
}

/* ---------- RANKED ATTRACTION CARDS ---------- */
.rank{
  background:#fff; border:5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:28px; overflow:hidden;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.rank:hover{transform:translate(-3px,-5px); box-shadow:11px 13px 0 var(--ink)}
.rank-head{display:flex; align-items:stretch; gap:0; border-bottom:4px solid var(--ink)}
.rank-no{
  flex:0 0 96px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2.5rem; color:#fff; border-right:4px solid var(--ink);
}
.rank-title{padding:18px 22px; flex:1}
.rank-title h3{margin:0 0 4px}
.rank-title .meta{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.rank-body{padding:24px}
.rank-body p:last-child{margin-bottom:0}
.c1{background:var(--red)} .c2{background:var(--blue)} .c3{background:var(--violet)}
.c4{background:var(--green)} .c5{background:var(--orange)} .c6{background:var(--blue-deep)}
.c7{background:var(--red)} .c8{background:var(--violet)} .c9{background:var(--orange)}
.c10{background:var(--green)} .c11{background:var(--blue)} .c12{background:var(--violet)}
.c13{background:var(--blue-deep)} .c14{background:var(--red)} .c15{background:var(--orange)}

.factbar{
  display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; padding:16px 0 0; border-top:3px dashed #cfd6e8;
}
.fact{
  font-family:var(--font-mono); font-size:.76rem; font-weight:700; padding:6px 12px;
  border:2px solid var(--ink); border-radius:10px; background:var(--sky);
}
.fact.free{background:var(--green); color:#fff}
.fact.cost{background:var(--gold)}
.fact.time{background:var(--blush)}

/* ---------- CALLOUT / POP-OUT FACT ---------- */
.callout{
  border:5px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px 28px; margin:30px 0; background:var(--cream); position:relative;
}
.callout::before{
  content:attr(data-label); position:absolute; top:-17px; left:24px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:5px 13px; border-radius:10px;
}
.callout p:last-child{margin-bottom:0}
.callout-mint{background:var(--mint)}
.callout-blush{background:var(--blush)}
.callout-sky{background:var(--sky)}

/* ---------- TABLE ---------- */
.tablewrap{overflow-x:auto; border:4px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); background:#fff}
table{width:100%; border-collapse:collapse; min-width:560px}
caption{text-align:left; padding:16px 18px 0; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
th,td{padding:13px 16px; text-align:left; border-bottom:2px solid #e3e8f5; font-size:.97rem}
th{background:var(--ink); color:#fff; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
tbody tr:nth-child(even){background:var(--sky)}
tbody tr:hover{background:var(--gold)}
tbody tr:last-child td{border-bottom:0}

/* ---------- AD SLOTS ---------- */
.adzone{margin:0 auto; max-width:var(--maxw); padding:0 22px}
.adslot{
  border:4px dashed var(--ink); border-radius:var(--radius); background:
    repeating-linear-gradient(45deg,#fff,#fff 12px,var(--sky) 12px,var(--sky) 24px);
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px; gap:8px;
}
.adslot .k{font-family:var(--font-display); font-size:1.15rem}
.adslot .s{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.adslot--wide{min-height:130px}
.adlabel{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; margin:0 0 8px;
}
.eta-banner{
  border:5px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow);
  background:linear-gradient(115deg,var(--blue) 0%, var(--violet) 52%, var(--red) 100%);
  color:#fff; padding:26px 28px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.eta-banner:hover{transform:translate(-4px,-5px); box-shadow:12px 13px 0 var(--ink); color:#fff}
.eta-banner .l{max-width:640px}
.eta-banner h3{margin:0 0 6px; color:#fff}
.eta-banner p{margin:0; font-weight:600; opacity:.95}
.eta-banner .pill{
  background:var(--gold); color:var(--ink); font-weight:800; padding:12px 22px;
  border:3px solid var(--ink); border-radius:10px; white-space:nowrap;
}

/* ---------- LINK CARDS (network) ---------- */
.linkcard{
  display:block; text-decoration:none; color:var(--ink); background:#fff;
  border:4px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, background .16s ease;
}
.linkcard:hover{transform:translate(-3px,-5px); box-shadow:9px 11px 0 var(--ink); background:var(--gold); color:var(--ink)}
.linkcard b{display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:5px; letter-spacing:-.01em}
.linkcard span{font-size:.9rem; color:var(--ink-soft)}
.linkcard:hover span{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{
  border:4px solid var(--ink); border-radius:var(--radius); background:#fff;
  box-shadow:var(--shadow-sm); margin-bottom:16px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 56px 19px 22px; position:relative;
  font-family:var(--font-display); font-size:1.05rem; line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:1.7rem; font-weight:700; line-height:1;
  transition:transform .2s ease;
}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq[open] summary{background:var(--gold)}
.faq .a{padding:20px 22px; border-top:3px solid var(--ink)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- FORM ---------- */
.formcard{
  background:#fff; border:5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:32px;
}
.field{margin-bottom:18px}
.field label{display:block; font-weight:800; margin-bottom:7px; font-size:.95rem}
.field .hint{font-size:.82rem; color:var(--ink-soft); font-weight:400}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; padding:13px 15px;
  border:3px solid var(--ink); border-radius:12px; background:var(--sky); color:var(--ink);
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select,.field textarea:focus{background:#fff}
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important}
.formnote{font-size:.85rem; color:var(--ink-soft); margin-top:14px}
.formmsg{margin-top:18px; padding:16px 18px; border:3px solid var(--ink); border-radius:12px; font-weight:700; display:none}
.formmsg.show{display:block}
.formmsg.ok{background:var(--mint)}
.formmsg.warn{background:var(--gold)}
.formmsg.bad{background:var(--blush)}

/* ---------- FOOTER (white) ---------- */
.ftr{background:#fff; border-top:5px solid var(--ink); padding:52px 0 30px}
.ftr-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:34px}
.ftr h4{font-size:.95rem; font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.ftr ul{list-style:none; padding:0; margin:0}
.ftr li{margin-bottom:9px}
.ftr a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.94rem}
.ftr a:hover{color:var(--red); text-decoration:underline}
.ftr-brand img{width:120px; height:auto; margin-bottom:12px}
.ftr-bottom{
  margin-top:36px; padding-top:22px; border-top:3px solid var(--ink);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:.88rem; color:var(--ink-soft);
}
.ftr-bottom a{font-weight:800}
.powered{
  display:inline-flex; align-items:center; gap:8px; background:var(--gold);
  border:3px solid var(--ink); border-radius:10px; padding:8px 16px; font-weight:800; color:var(--ink)!important;
  text-decoration:none!important; box-shadow:3px 3px 0 var(--ink);
}
.powered:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink)}

.toc{
  background:#fff; border:4px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px 26px;
}
.toc ol{columns:2; column-gap:34px; margin:0; padding-left:1.2em}
.toc li{margin-bottom:7px; font-weight:600}

.skip{position:absolute; left:-9999px}
.skip:focus{left:22px; top:12px; z-index:2000; background:var(--gold); padding:12px 20px; border:3px solid var(--ink); border-radius:10px; font-weight:800}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:17px}
  .nav{display:none}
  .hdr-right{display:none}
  .burger{display:flex}
  .brand img{width:66px; height:66px}
  .sec{padding:52px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .toc ol{columns:1}
  .rank-no{flex:0 0 66px; font-size:1.8rem}
  .rank-title{padding:14px 16px}
  .rank-body{padding:18px}
  .answer{padding:24px 20px 20px}
  .formcard{padding:22px}
  .eta-banner{flex-direction:column; align-items:flex-start}
  .deck{perspective:1000px}
  @media (prefers-reduced-motion: no-preference){
    .js .panel{transform:rotateX(-18deg) translateY(28px) scale(.98)}
  }
}
@media (max-width:520px){
  .ftr-grid{grid-template-columns:1fr}
  .hero-img{transform:none}
}