/* ============================================================================
   COLORADO RENOVATIONS PLUS - "HIGH COUNTRY BUILD SHEET" bespoke art-direction
   ----------------------------------------------------------------------------
   One-of-one design for a Gunnison CO REMODELER, built on the proven craft:
   ANTON condensed display + JETBRAINS MONO kickers + Barlow body, a full-bleed
   STAT BAND, "ticket" service cards, giant outline words behind hero / CTA,
   squared tactile buttons, and a serif statement band.

   Colorado's own material identity (not a Desert Vista clone): a cool granite
   paper canvas instead of desert sand; spruce-cool charcoal darks; the brand
   gold kept warm against the cool field; level "grade line" hero motif.

   Loaded AFTER styles.css so it overrides the generic template look.
   ========================================================================== */

:root{
  /* High-country canvas */
  --granite:      #F0EFEA;   /* cool granite paper - primary page canvas */
  --granite-2:    #E8E6DE;   /* limestone off-white */
  --stone:        #DCD9CE;   /* river-stone tan */
  --dust:         #CEC9BB;

  /* Cool spruce charcoal (dark sections) - never pure black */
  --spruce:       #14161A;
  --spruce-2:     #1D2025;
  --spruce-3:     #282C33;

  /* Re-map the template's core tokens onto the new palette */
  --paper:        #F0EFEA;
  --bone:         #E8E6DE;
  --bone-2:       #DCD9CE;
  --ink:          #14161A;
  --ink-2:        #1D2025;
  --steel:        #282C33;

  --text:         #1F1F1C;
  --text-80:      rgba(31,31,28,0.82);
  --text-65:      rgba(31,31,28,0.62);
  --text-45:      rgba(31,31,28,0.42);
  --text-25:      rgba(31,31,28,0.22);

  --paper-80:     rgba(240,239,234,0.86);
  --paper-65:     rgba(240,239,234,0.66);
  --paper-45:     rgba(240,239,234,0.48);
  --paper-25:     rgba(240,239,234,0.24);

  /* Brand gold - warm accent against the cool field */
  --gold-300:     #D7BB7E;
  --gold-400:     #CFAE6F;
  --gold-500:     #C8A968;
  --gold-600:     #A88B4B;
  --gold-700:     #826A35;
  --on-gold:      #191510;

  --divider-light: #D9D6CB;
  --divider-dark:  rgba(240,239,234,0.10);
  --rule:          #D9D6CB;
  --seam:          #C8A968;

  --font-display: "Anton","Archivo","Inter",system-ui,sans-serif;
  --font-body:    "Barlow","Inter",system-ui,sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,monospace;
}

/* -- Typography: Anton condensed display, Barlow body, mono details -------- */
body{ font-family: var(--font-body); }
.display, h1, h2, h3, h4,
.stat-cell .k, .process-num, .cred-card .num,
.price-band-amount .amt{ font-family: var(--font-display) !important; }

.display, h1, h2{
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.04 !important;
  text-transform: uppercase;
}
h3, h4{ font-weight: 400 !important; letter-spacing: 0.01em !important; text-transform: uppercase; }
.tight{ letter-spacing: 0.005em !important; }

/* Cool the canvas + a barely-there paper grain so flat areas aren't dead */
body{
  background-color: var(--granite);
  color: var(--text);
  background-image:
    radial-gradient(circle at 84% 3%, rgba(200,169,104,0.05), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}
::selection{ background: var(--gold-500); color: var(--on-gold); }

/* -- Section themes --------------------------------------------------------- */
.section-light  { background: var(--granite); color: var(--text); }
.section-bone   { background: var(--granite-2); color: var(--text); }
.section-dark   { background: var(--spruce); color: var(--paper); }
.section-darker { background: #0F1114; color: var(--paper); }

/* Alpenglow graze: dark sections get a soft high warm light from the east */
.section-dark, .section-darker{ position: relative; }
.section-dark::before, .section-darker::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(200,169,104,0.08), transparent 55%),
    linear-gradient(105deg, rgba(255,255,255,0.04) 0%, transparent 34%);
}
.section-dark > *, .section-darker > *{ position: relative; z-index: 1; }

/* -- The mono kicker: a builder's level tick, wide-tracked gold ------------- */
.eyebrow, .smallcaps{
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before{
  content: "+"; display: inline; width: auto; height: auto; margin: 0;
  background: none; font-weight: 700; letter-spacing: 0; color: inherit;
  vertical-align: baseline;
}
.smallcaps::before{ content: "+ "; font-weight: 700; letter-spacing: 0; }
.section-dark .eyebrow, .section-darker .eyebrow,
.section-dark .smallcaps, .section-darker .smallcaps{ color: var(--gold-400); }

.standfirst{ font-family: var(--font-body) !important; font-weight: 400; }

/* -- Gold rule: a level line with end ticks --------------------------------- */
.gold-rule{
  height: 2px; width: 64px;
  background: linear-gradient(90deg, var(--seam), var(--seam));
  position: relative; border: 0;
}
.gold-rule::before, .gold-rule::after{
  content:''; position:absolute; top:-4px; width:2px; height:10px; background: var(--seam);
}
.gold-rule::before{ left:0; } .gold-rule::after{ right:0; }

/* -- Grade band: repeating hatch used as a thin section signature ----------- */
.seam-band{
  height: 8px; border: 0;
  background: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, rgba(200,169,104,0.18) 14px 28px);
  opacity: 0.9;
}
.seam-band.on-dark{ background: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, rgba(20,22,26,0) 14px 28px); }

/* -- Buttons: squared, tactile, gold face ------------------------------------ */
.btn{
  font-family: var(--font-body) !important;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 2px;
  background: var(--gold-500);
  color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn:hover{ background: var(--gold-400); color: var(--on-gold); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(168,139,75,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-outline-light{ border-color: rgba(240,239,234,0.42); color: var(--paper); border-radius:2px; }
.btn-outline-light:hover{ background: var(--paper); color: var(--spruce); }
.btn-outline-dark{ border-color: rgba(31,31,28,0.4); color: var(--text); border-radius:2px; }
.btn-outline-dark:hover{ background: var(--spruce); color: var(--paper); }
.btn-outline{ border-color: rgba(31,31,28,0.4); color: var(--text); border-radius:2px; }
.btn .arr, .btn svg{ transition: transform .18s ease; }
.btn:hover .arr{ transform: translateX(4px); }

/* -- STAT BAND (full-bleed gold, honest structural stats only) --------------- */
.statband{ background: var(--gold-500); color: var(--on-gold); position: relative; overflow: clip; }
.statband::before{
  content:''; position:absolute; top:0; left:0; right:0; height:8px;
  background: repeating-linear-gradient(135deg, var(--spruce) 0 14px, transparent 14px 28px);
  opacity: 0.16;
}
.statband-inner{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem;
  padding: clamp(1.8rem,4vw,2.8rem) 0;
}
.statband .stat{ border-left: 3px solid var(--on-gold); padding-left: 1.1rem; }
.statband .stat .sv{ font-family: var(--font-display); font-size: clamp(2rem,4.4vw,3.4rem); line-height: 1; }
.statband .stat .sl{ font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.4rem; color: rgba(25,21,16,0.82); }
@media(max-width:900px){ .statband-inner{ grid-template-columns: 1fr 1fr; gap: 1.4rem 0.9rem; } }

/* -- "TICKET" service cards --------------------------------------------------- */
.service-card, .cred-card, .testimonial{
  border-radius: 3px;
  border-color: var(--divider-light);
  background: #F8F6F0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  position: relative;
}
.service-card{ transition: border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; overflow: hidden; }
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1); z-index: 3;
}
.service-card:hover::before{ transform: scaleX(1); }
.service-card:hover{ border-color: var(--gold-500); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(31,31,28,0.4); }
.service-card::after{
  content:''; position:absolute; left:28px; right:28px; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.service-card:hover::after{ transform: scaleX(1); }
.service-card.dark{ background: var(--spruce-2); border-color: rgba(240,239,234,0.08); }
.cred-card{ background: var(--spruce-2); border-color: rgba(240,239,234,0.08); border-radius:3px; }
.cred-card:hover{ border-color: rgba(200,169,104,0.4); }
.cred-card .num{ color: var(--gold-500); }

.svc-ticket{
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-600);
  display: inline-block; margin-bottom: 0.35rem;
}
.section-dark .svc-ticket, .service-card.dark .svc-ticket{ color: var(--gold-400); }

.service-card .img-slot,
.gallery-tile{
  background-image: linear-gradient(120deg, var(--stone), var(--granite-2) 55%, var(--dust));
  background-size: cover;
}

/* -- Gallery tiles: raking-light hover ---------------------------------------- */
.gallery-tile{ border-radius: 3px; }
.gallery-tile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(245deg, rgba(255,255,255,0.16) 0%, transparent 30%);
  opacity: 0; transition: opacity .4s ease;
}
.gallery-tile:hover::after{ opacity: 1; }

/* -- Trust strip: spruce band with mono tracking ------------------------------ */
.trust-strip{ background: var(--spruce); border-top: 0; border-bottom: 0; color: var(--paper); }
.trust-strip-inner{ color: var(--paper-80); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.trust-strip .dot{ color: var(--gold-500); }

/* -- Process numbers: stamped gold chips -------------------------------------- */
.process-num{ background: var(--gold-500); color: var(--on-gold); border-radius:2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }

/* -- Nav ----------------------------------------------------------------------- */
#site-nav.nav-solid{ background: rgba(20,22,26,0.92); backdrop-filter: blur(10px) saturate(1.1); border-bottom-color: rgba(200,169,104,0.18); }
.nav-link{ color: var(--paper-80); position: relative; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.nav-link:hover, .nav-link.active{ color: var(--gold-400); }
.nav-link::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--gold-500); transition: right .25s ease; }
.nav-link:hover::after, .nav-link.active::after{ right:0; }

/* -- Modal: granite panel, gold top edge --------------------------------------- */
.modal-box{ background: #F8F6F0; border-top: 4px solid var(--gold-500); border-radius: 4px; }

/* -- Hero signature: high cool light + horizontal GRADE LINES ------------------- */
.alpine-hero{ position: relative; }
.alpine-hero .rake-light{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.09) 0%, transparent 26%),
    radial-gradient(90% 70% at 8% 12%, rgba(200,169,104,0.14), transparent 60%);
  mix-blend-mode: screen;
}
.grade-lines{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.55;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 72px;
  mask-image: linear-gradient(180deg, transparent 30%, black 60%, black 86%, transparent);
}

.hero-ghost{
  position:absolute; left:-0.02em; bottom:-0.12em; z-index:0;
  font-family: var(--font-display); font-size: clamp(5rem,15vw,13rem); line-height:1;
  color: transparent; -webkit-text-stroke: 1px rgba(240,239,234,0.05);
  pointer-events:none; user-select:none; white-space:nowrap;
}
@media(max-width:1023px){ .hero-ghost{ display:none; } }

/* -- Stat / number strip (secondary, inner pages) -------------------------------- */
.stat-strip{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--divider-light); border:1px solid var(--divider-light); border-radius:3px; overflow:hidden; }
@media(min-width:768px){ .stat-strip{ grid-template-columns: repeat(4,1fr); } }
.stat-cell{ background: #F8F6F0; padding:26px 22px; }
.stat-cell .k{ font-family: var(--font-display); font-weight:400; font-size:2.4rem; letter-spacing:0; color: var(--text); line-height:1; }
.stat-cell .l{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color: var(--text-65); margin-top:8px; font-weight:500; }
.section-dark .stat-strip, .section-darker .stat-strip{ background: rgba(240,239,234,0.08); border-color: rgba(240,239,234,0.08); }
.section-dark .stat-cell, .section-darker .stat-cell{ background: var(--spruce-2); }
.section-dark .stat-cell .k, .section-darker .stat-cell .k{ color: var(--gold-400); }
.section-dark .stat-cell .l, .section-darker .stat-cell .l{ color: var(--paper-65); }

/* -- Giant outline words behind CTA / statement bands ----------------------------- */
.giant-ghost{
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.8rem,7.5vw,6rem); line-height:.92;
  color: transparent; -webkit-text-stroke: 1.4px rgba(200,169,104,0.30);
  user-select:none; pointer-events:none; max-width:100%; overflow:hidden;
}
.cta-ghost{
  position:absolute; left:0; right:0; bottom:-1vw; z-index:0; text-align:center;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(4rem,15vw,12rem); line-height:.8;
  color: transparent; -webkit-text-stroke: 1.4px rgba(200,169,104,0.16);
  user-select:none; pointer-events:none; white-space:nowrap; overflow:hidden;
}

/* -- Statement / pull-quote band (its own shape: serif italic on dark) ------------- */
.statement-band blockquote{
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.25;
  color: var(--paper); letter-spacing: -0.01em;
}
.statement-band .attr{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-400); margin-top: 1.6rem;
}

/* -- STICKY MOBILE CALL / QUOTE BAR (every page, thumb-reach) ---------------------- */
#mobile-cta-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(20,22,26,0.96); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(200,169,104,0.28);
  box-shadow: 0 -6px 20px -8px rgba(0,0,0,0.5);
  padding: max(10px, env(safe-area-inset-bottom, 0px)) 12px 12px;
  gap: 10px;
}
@media(min-width: 1024px){ #mobile-cta-bar{ display: none; } }
#mobile-cta-bar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-size: 13px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
  padding: 13px 10px; border-radius: 3px;
}
#mobile-cta-bar .mc-call{ background: transparent; color: var(--paper); border:1px solid rgba(240,239,234,0.35); }
#mobile-cta-bar .mc-quote{ background: var(--gold-500); color: var(--on-gold); }
@media(max-width:1023px){
  body{ padding-bottom: 74px; }
  footer{ padding-bottom: 90px !important; }
}

/* -- Reveal easing ------------------------------------------------------------------ */
.reveal{ transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/* logo placeholder recolor */
.logo-placeholder{ background: var(--gold-500); color: var(--on-gold); font-family: var(--font-display); }

/* -- Unified photo grade: one cool mountain grade over every real photo ------------- */
.service-card .img-slot,
.gallery-tile img,
img.photo-grade,
#hero-img{
  filter: saturate(0.94) contrast(1.04) brightness(0.99);
}

/* -- INNER-PAGE HERO: full-bleed photo + left-weighted scrim -------------------------
   Usage: <section class="section-dark page-hero ..." style="--hero-img:url('/assets/img/x.jpg')">
   The photo fills the whole band; a left-weighted cool-charcoal gradient keeps
   the Anton headline crisp while the jobsite stays visible on the right. */
.page-hero{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(52vh, 560px);
}
.page-hero > *{ width: 100%; position: relative; }
.page-hero::before{
  content:''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img);
  background-size: cover; background-position: var(--hero-pos, center);
}
.page-hero::after{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg, rgba(20,22,26,0.95) 0%, rgba(20,22,26,0.88) 34%, rgba(20,22,26,0.66) 66%, rgba(20,22,26,0.52) 100%),
    linear-gradient(180deg, rgba(20,22,26,0.46) 0%, rgba(20,22,26,0.12) 42%, rgba(20,22,26,0.55) 100%);
}
.page-hero h1{ text-shadow: 0 2px 28px rgba(0,0,0,0.4); }
.page-hero .standfirst{ text-shadow: 0 1px 14px rgba(0,0,0,0.55); }
@media (max-width: 767px){
  .page-hero{ min-height: 46vh; }
  .page-hero::after{
    background:
      linear-gradient(180deg, rgba(20,22,26,0.88) 0%, rgba(20,22,26,0.72) 45%, rgba(20,22,26,0.88) 100%);
  }
}

/* -- SIGNATURE INTERACTIVE: "Room by room" scope explorer ------------------ */
.rx{ display:grid; gap:16px; }
.rx-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.rx-tab{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-65);
  background:transparent; border:1px solid rgba(240,239,234,0.16);
  border-radius:2px; padding:12px 16px;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.rx-tab .n{ font-family:var(--font-display); font-size:1rem; line-height:1; color:var(--paper-45); transition: color .25s ease; }
.rx-tab:hover{ border-color:rgba(200,169,104,0.45); color:var(--paper); transform:translateY(-2px); }
.rx-tab[aria-selected="true"]{ border-color:var(--gold-500); background:rgba(200,169,104,0.10); color:var(--paper); }
.rx-tab[aria-selected="true"] .n{ color:var(--gold-400); }
.rx-tab:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
.rx-stage{
  display:grid; border:1px solid rgba(240,239,234,0.12); border-radius:3px;
  overflow:hidden; background:var(--spruce-2);
}
@media(min-width:900px){ .rx-stage{ grid-template-columns:7fr 5fr; } }
.rx-media{ position:relative; overflow:hidden; aspect-ratio:16/10; }
@media(min-width:900px){ .rx-media{ aspect-ratio:auto; min-height:380px; height:100%; } }
.rx-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:1; transform:scale(1.001);
  transition: opacity .3s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.rx-media.is-loading img{ opacity:0; transform:scale(1.035); }
.rx-media .rx-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--font-mono); font-size:0.66rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-300);
  background:rgba(20,22,26,0.72); border:1px solid rgba(200,169,104,0.35);
  border-radius:2px; padding:6px 10px;
}
.rx-body{ padding:28px 26px 30px; display:flex; flex-direction:column; align-items:flex-start; }
@media(min-width:900px){ .rx-body{ padding:34px 34px 36px; } }
.rx-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.rx-chip{
  font-family:var(--font-mono); font-size:0.66rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--paper-80);
  border:1px solid rgba(240,239,234,0.16); border-radius:2px; padding:7px 10px;
}
.rx-chip span{ color:var(--gold-500); }
.rx-link{ margin-top:auto; }
@media (prefers-reduced-motion: reduce){
  .rx-tab, .rx-media img{ transition:none !important; }
  .rx-media.is-loading img{ opacity:1; transform:none; }
}