/* Altitude Sickness Denver — plain CSS, no build step, no web fonts.
   Component classes follow wiki/components/component-library.md.
   Broomfield palette: emerald. Chosen against altitude (cyan #00b8d1) and Lakewood (violet #8f86f2) per build-standard §7. */

:root{
  --brand:#2fb583; --brand-dark:#0e6b4a; --brand-pale:#e8f7f0;
  --navy:#153229; --navy-dark:#0c211b;
  --alert:#C0392B; --alert-pale:#fdf0ee;
  --ink:#1a2a24; --ink-soft:#476056;
  --line:#e1ebe5; --bg:#fff; --bg-alt:#f4f9f6;
  --max:1160px; --radius:6px;
  --font-head:Georgia,'Times New Roman',serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:#0e6b4a}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:10px 14px;border-radius:var(--radius)}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.25;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(1.8rem,1.2rem + 2.6vw,2.7rem)}
h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.95rem);margin-top:1.8em}
h3{font-size:clamp(1.12rem,1rem + .6vw,1.35rem);margin-top:1.4em}
p,ul,ol,table{margin:0 0 1.1em}
ul,ol{padding-left:1.3em}
li{margin-bottom:.4em}
strong{color:var(--navy)}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.header-top{background:#fff;color:var(--navy)}
.header-top__inner{max-width:var(--max);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav__logo{color:var(--navy);text-decoration:none;font-family:var(--font-head);font-size:1.15rem;font-weight:700;letter-spacing:.01em}
.nav__logo span{color:var(--brand-dark)}
.header-contact{display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem}
.header-contact__item{color:var(--ink-soft);text-decoration:none}
.header-contact__item:hover{color:var(--navy)}

.site-nav{background:#fff;border-top:1px solid var(--line)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between}
.nav__toggle{display:none;background:none;border:0;color:var(--navy);font-size:1.4rem;padding:12px 4px;cursor:pointer;line-height:1}
.nav__links{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav__links li{margin:0}
.nav__links a{display:block;color:var(--navy);text-decoration:none;padding:13px 14px;font-size:.93rem;font-weight:700}
.nav__links a:hover{background:var(--bg-alt)}
.nav__call{background:var(--brand);color:var(--navy-dark)!important;border-radius:var(--radius);margin-left:8px}
.nav__call:hover{background:#4cc494!important}

/* ---------- hero ---------- */
.hero{background:#fff;padding:52px 0 44px;border-bottom:1px solid var(--line)}
.hero__split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero__inner{max-width:70ch}
.hero__eyebrow{display:inline-block;background:var(--navy);color:#fff;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:3px;margin:0 0 14px}
.hero__sub{font-family:var(--font-head);font-size:1.05rem;color:var(--ink-soft);margin:0 0 6px}
.hero h1{margin-bottom:.45em}
.hero__checklist{list-style:none;padding:0;margin:0 0 22px}
.hero__checklist li{position:relative;padding-left:28px;margin-bottom:9px}
.hero__checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand-dark);font-weight:700}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap}
.hero__photo img{border-radius:var(--radius)}

/* ---------- sections ---------- */
/* Every section centres its header, and the prose column sits centred under
   it (text stays left-aligned for readability) — the section-header rhythm of
   polished competitor pages. Card sections centre their lead text too. */
.section h2{text-align:center}
.section--cards .section__lead{margin:0 auto 26px;text-align:center;max-width:62ch}
.section{padding:34px 0}
.section--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__lead{max-width:68ch;margin:0 auto}
.section__lead>*:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.94rem;padding:11px 20px;border-radius:var(--radius);border:2px solid transparent;transition:background .15s}
.btn--brand{background:var(--brand);color:var(--navy-dark)}
.btn--brand:hover{background:#4cc494}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-dark)}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--bg-alt)}
.btn--lg{font-size:1.02rem;padding:14px 26px}

/* ---------- cards / grids / lists ---------- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius);padding:20px 22px;box-shadow:0 2px 14px rgba(18,50,41,.06)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.linklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.linklist li{margin:0}
.linklist a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;text-decoration:none;color:var(--navy);font-weight:600;background:#fff}
.linklist a:hover{border-color:var(--brand);background:var(--brand-pale)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin:0 0 1.1em}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-family:var(--font-body);font-size:.86rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:var(--bg-alt)}

/* ---------- alert box (NEW — add back to component library) ---------- */
.alert-box{background:var(--alert-pale);border-left:4px solid var(--alert);border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:26px 0}
.alert-box h2,.alert-box h3{color:var(--alert);margin-top:0}
.alert-box ul{margin-bottom:.6em}
.alert-box>*:last-child{margin-bottom:0}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;padding:14px 46px 14px 17px;font-weight:700;color:var(--navy);font-family:var(--font-head);font-size:1.04rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:1.4rem;color:var(--brand-dark);font-family:var(--font-body)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .faq__a{padding:14px 17px}
.faq .faq__a>*:last-child{margin-bottom:0}

/* ---------- phone strip ---------- */
.phone-strip{background:var(--navy);color:#fff;padding:44px 0;margin:34px 0 0;text-align:center}
.phone-strip h2{color:#fff;margin-top:0}
.phone-strip .sub{color:#cfe9ef;max-width:60ch;margin:0 auto}
.phone-strip .btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px;justify-content:center}

/* ---------- form ---------- */
.form-card{background:var(--brand-pale);border:1px solid #bfe9f1;border-radius:var(--radius);padding:22px 24px}
.form-card h3{margin-top:0}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:var(--navy)}
.field input,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:.95rem;background:#fff}
.field textarea{min-height:100px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- byline / meta ---------- */
.byline{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-size:.9rem;color:var(--ink-soft)}
.byline p{margin-bottom:.5em}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);padding:12px 0 0}
.breadcrumb a{color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#c9dde3;margin-top:46px;padding:38px 0 0;font-size:.92rem}
.site-footer a{color:#c9dde3;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .footer-grid h2{color:#fff;font-size:.98rem;margin:0 0 12px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding-bottom:26px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:7px}
.footer-brand{font-family:var(--font-head);font-size:1.1rem;color:#fff;margin-bottom:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:16px 0;font-size:.84rem;color:#9dbcc5}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__toggle{display:block}
  /* The nav bar is navigation only on mobile. An earlier fix promoted the call
     button out of the collapsed menu, because at the time it was the only
     prominent CTA and it was hidden behind the hamburger. The sticky call bar
     replaced that job and does it better — it is always on screen rather than
     scrolling away — so keeping both put the number on screen three times and
     left a dark button floating in the nav band that read as a glitch.
     One tap target in the header, one pinned to the bottom. */
  .site-nav .wrap{flex-wrap:wrap}
  .nav__links{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:8px}
  .nav__links.open{display:flex}
  .nav__call{margin:6px 0 0}
  .hero__split{grid-template-columns:1fr}
  .hero__photo{order:-1}
  /* The hero photo sits above the headline on mobile, so at its natural 4:3 it
     eats most of the first screen and pushes the H1 to the fold. Crop it to a
     band: enough to establish credibility, not so much that the reader has to
     scroll to find out what the page is. */
  .hero__photo img{width:100%;max-height:260px;object-fit:cover}
  /* A diagram hero is content, not scenery: the crop above would decapitate
     it, and uncropped it would push the H1 off the first screen. The page
     copy carries the same information, so on mobile it simply goes. */
  .hero__photo--diagram{display:none}
  .grid--3,.linklist{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .grid--2,.grid--3,.linklist,.form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__cta,.phone-strip .btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  /* The number is the action; the strapline restates the H1 two rows below it,
     so on a phone it costs a line of a very short screen for no new
     information. Keep the number, drop the label, stay on one row. */
  .header-contact{gap:12px;font-size:.8rem;flex-wrap:nowrap}
  .header-contact__item:not(.wc-phone){display:none}
  .header-contact .wc-phone{font-size:1rem;font-weight:700;color:var(--navy)}
  .hero__photo img{max-height:200px}
}
/* ---------- sticky call bar ----------
   Mobile only, and only on pages the engine is allowed to put a CTA on —
   see page_allows_cta() in build.py. Acute-intent local service is phone-driven
   and mobile-first, so a persistent tap target earns its space; the AUTHORITY
   pages that decline to sell never receive the markup at all. */
.call-bar{display:none}
@media (max-width:900px){
  .call-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(18,58,69,.10);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  .call-bar .btn{display:flex;width:100%;align-items:center;text-align:center}
  .call-bar .btn__what,.call-bar .btn__number{width:100%;text-align:center}
  /* Keep the bar from covering the end of the page. Scoped with :has() so pages
     without a bar get no dead space. */
  body:has(.call-bar){padding-bottom:86px}
}

@media print{
  .site-nav,.phone-strip,.site-footer,.nav__toggle,.call-bar{display:none}
  .faq details{border:0}
  .faq .faq__a{display:block!important}
}

/* ---------- imagery ---------- */
.image-band{padding:8px 0 22px}
.image-band img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius)}
.image-band--diagram img{max-height:none;height:auto;object-fit:contain}
.hero__photo img{border-radius:var(--radius);box-shadow:0 2px 18px rgba(18,58,69,.13)}
.portrait{margin:0 0 24px;max-width:290px;float:right;padding:0 0 14px 22px}
.portrait img{border-radius:var(--radius);background:var(--brand-pale)}
.portrait figcaption{font-size:.84rem;color:var(--ink-soft);padding-top:8px;line-height:1.5}
@media (max-width:700px){.portrait{float:none;max-width:100%;padding:0 0 14px}}

/* footer column headings are h2 for heading-order validity, styled small */
.site-footer .footer-grid h2{color:#fff;font-size:.98rem;margin:0 0 12px;font-family:var(--font-head);line-height:1.25}

/* ---------- transparent phone CTA (what you're calling for, then the number) ---------- */
.btn--phone{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 20px;line-height:1.2;text-align:left}
.btn--phone .btn__what{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;opacity:.82}
.btn--phone .btn__number{font-size:1.04rem;font-weight:800}
@media (max-width:600px){
  .btn--phone .btn__what{font-size:.64rem}
}

/* phone-strip CTA row: align the button and the secondary link on one baseline */
.phone-strip .btns{align-items:center}
.phone-strip .btns a:not(.btn){color:var(--brand-dark);font-weight:600;text-decoration:underline}