/* ============================================================
   Alpenlight Property Company — site stylesheet
   Brand Kit v1.0 tokens. Structure after placelaval.ca.
   Rule: Dusk carries the brand. Alpenlight appears once.
   ============================================================ */

@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/BodoniModa-Variable.ttf") format("truetype-variations");
  font-weight:400 600; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/Archivo-Variable.ttf") format("truetype-variations");
  font-weight:400 600; font-display:swap;
}

:root{
  /* brand palette */
  --dusk:#1E2233;
  --shadow:#3E4A63;
  --alpenlight:#E2946B;
  --snowfield:#F4F6F8;
  --mineral:#DAD5C8;
  --onyx:#171817;

  /* derived */
  --dusk-deep:#161A28;
  --ink:var(--onyx);
  --ink-muted:#5A6274;
  --line:#DDE1E7;
  --line-dark:#333B50;

  --display:"Bodoni Moda",Didot,"Times New Roman",Georgia,serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;

  --container:1020px;
  --container-wide:1280px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --band:clamp(4rem,10vw,7.5rem);
  --header-h:116px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--snowfield);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container-wide{width:100%;max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter)}
.band{padding:var(--band) 0}
.band-tight{padding:clamp(2.5rem,6vw,4rem) 0}

.bg-dusk{background:var(--dusk);color:var(--snowfield)}
.bg-dusk-deep{background:var(--dusk-deep);color:var(--snowfield)}
.bg-snow{background:var(--snowfield);color:var(--ink)}
.bg-mineral{background:var(--mineral);color:var(--onyx)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 1.35rem;
}
.bg-dusk .eyebrow,.bg-dusk-deep .eyebrow{color:#8D96AB}

h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.02em;text-wrap:balance}

.display{font-size:clamp(2.6rem,7vw,4.5rem);line-height:1.02}
h1{font-size:clamp(2.2rem,5.6vw,3.6rem);line-height:1.06}
h2{font-size:clamp(1.9rem,4.2vw,2.85rem);line-height:1.1}
h3{font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.2}

.lede{font-size:clamp(1.06rem,1.8vw,1.35rem);line-height:1.5;max-width:36ch;color:inherit}
p{margin:0 0 1.2rem;max-width:64ch;line-height:1.62}
.bg-dusk p,.bg-dusk-deep p{color:#C3CAD8}
.small{font-size:.95rem;line-height:1.55}
.muted{color:var(--ink-muted)}
.bg-dusk .muted,.bg-dusk-deep .muted{color:#8D96AB}

.rule{width:56px;height:2px;background:var(--alpenlight);border:0;margin:0 0 1.6rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 2rem;
  border:1px solid transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  cursor:pointer;
}
/* the one warm accent — reserve for the single primary action per page */
.btn-accent{background:var(--alpenlight);color:var(--dusk);border-color:var(--alpenlight)}
.btn-accent:hover,.btn-accent:focus-visible{background:#EFA77F;border-color:#EFA77F}

.btn-line{background:transparent;color:currentColor;border-color:currentColor}
.btn-line:hover,.btn-line:focus-visible{background:currentColor}
.bg-dusk .btn-line:hover,.bg-dusk-deep .btn-line:hover{color:var(--dusk)}
.bg-snow .btn-line:hover,.bg-mineral .btn-line:hover{color:var(--snowfield)}

.textlink{
  display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;padding-bottom:.35rem;
  border-bottom:1px solid currentColor;transition:opacity .2s ease;
}
.textlink:hover{opacity:.65}

:focus-visible{outline:2px solid var(--alpenlight);outline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);display:flex;align-items:center;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-transparent{background:transparent}
.site-header.is-solid{background:rgba(30,34,51,.97);border-bottom-color:rgba(255,255,255,.12);backdrop-filter:blur(14px)}
.site-header .container-wide{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
/* Horizontal lockup is ~4.4:1, so height drives the width. */
.brand img{height:76px;width:auto}
@media (max-width:860px){.brand img{height:56px}}
@media (max-width:420px){.brand img{height:48px}}

.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  color:var(--snowfield);text-decoration:none;
  font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:.4rem 0;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--alpenlight)}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--snowfield);margin:5px 0;transition:transform .25s ease,opacity .25s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    background:var(--dusk);flex-direction:column;align-items:flex-start;
    gap:0;padding:1rem var(--gutter) 2rem;
    border-bottom:1px solid var(--line-dark);
    transform:translateY(-120%);transition:transform .3s ease;
  }
  .nav.is-open{transform:translateY(0)}
  .nav a{width:100%;padding:1rem 0;border-bottom:1px solid var(--line-dark);font-size:.9rem}
}

/* ---------- photo header (blueprint: container-photo-header) ---------- */
.photo-header{
  position:relative;min-height:min(88vh,760px);
  display:flex;align-items:flex-end;
  background:var(--dusk-deep);overflow:hidden;
}
.photo-header--tall{min-height:min(100vh,900px)}
.photo-header__media{position:absolute;inset:0}
.photo-header__media img,.photo-header__media video{width:100%;height:100%;object-fit:cover}
.photo-header__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,26,40,.92) 0%,rgba(22,26,40,.72) 38%,rgba(22,26,40,.28) 68%,rgba(22,26,40,.15) 100%);
}
.photo-header__overlay::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,26,40,.55) 0%,rgba(22,26,40,0) 32%,rgba(22,26,40,.4) 100%);
}

/* Bright / warm source photography (e.g. a summer canyon frame) needs to be
   pulled into the Dusk palette, or the brand stops holding at the top of the
   page. Slight desaturation + a cool grade, then a heavier scrim so Snowfield
   type at 4.5rem stays legible over the lit half of the frame. */
.photo-header--bright .photo-header__media img{
  filter:saturate(.72) contrast(1.04) brightness(.82);
}
.photo-header--bright .photo-header__overlay{
  background:
    linear-gradient(90deg,rgba(22,26,40,.94) 0%,rgba(22,26,40,.82) 40%,rgba(22,26,40,.5) 72%,rgba(22,26,40,.34) 100%),
    linear-gradient(0deg,rgba(30,34,51,.42),rgba(30,34,51,.42));
}
.photo-header--bright .photo-header__overlay::after{
  background:linear-gradient(180deg,rgba(22,26,40,.62) 0%,rgba(22,26,40,.1) 40%,rgba(22,26,40,.55) 100%);
}
.photo-header__inner{position:relative;z-index:2;padding:calc(var(--header-h) + 4rem) 0 clamp(3rem,7vw,5.5rem);width:100%}
.photo-header__inner .container-wide{max-width:var(--container-wide)}
.photo-header h1,.photo-header .display{color:var(--snowfield);max-width:15ch}
.photo-header .lede{color:#C9D0DE;margin:1.75rem 0 0}
.photo-header__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;align-items:center}

/* scroll cue */
.scrollcue{
  position:absolute;bottom:2rem;right:var(--gutter);z-index:2;
  writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:#8D96AB;
  pointer-events:none;
}
/* Below ~900px the hero copy reaches the right edge and the vertical cue
   overlaps the lede and secondary link. Nothing is lost by dropping it. */
@media (max-width:900px){.scrollcue{display:none}}

/* ---------- editorial two-column band (blueprint) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:840px){.split,.split--even{grid-template-columns:1fr;gap:2rem}}
.split__body p:last-child{margin-bottom:0}

/* ---------- stat / proof band ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.proof > div{padding:0 clamp(1rem,3vw,2.5rem);border-left:1px solid var(--line-dark)}
.proof > div:first-child{padding-left:0;border-left:0}
.bg-snow .proof > div{border-left-color:var(--line)}
.proof h3{margin-bottom:.7rem}
.proof p{font-size:.98rem;margin:0;color:#B4BCCC}
.bg-snow .proof p{color:var(--ink-muted)}
.proof__accent{width:40px;height:2px;background:var(--alpenlight);margin-top:1.25rem}
@media (max-width:760px){
  .proof{grid-template-columns:1fr;gap:2.25rem}
  .proof > div{padding:0 0 0 1.25rem;border-left:1px solid var(--line-dark)}
  .proof > div:first-child{padding-left:1.25rem;border-left:1px solid var(--line-dark)}
}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(1.25rem,3vw,2rem)}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--dusk-deep)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.card:hover .card__media img{transform:scale(1.04)}
.card__media--wide{aspect-ratio:16/10}
.card__body{padding:1.35rem 0 0}
.card__body h3{margin-bottom:.5rem}
.card__desc{font-size:1rem;margin:0 0 .8rem;max-width:34ch}
.card__facts{
  font-size:.82rem;letter-spacing:.04em;color:var(--ink-muted);
  margin:0;font-variant-numeric:tabular-nums;
}
.bg-dusk .card__facts,.bg-dusk-deep .card__facts{color:#8D96AB}
.chip{
  position:absolute;top:1rem;left:1rem;z-index:2;
  background:rgba(30,34,51,.9);color:var(--snowfield);
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .7rem;
}

/* placeholder tile for unshot homes */
.tile-placeholder{
  aspect-ratio:4/5;background:var(--dusk-deep);
  display:grid;place-items:center;text-align:center;padding:2rem;
  border:1px solid var(--line-dark);
}
.tile-placeholder img{width:34px;opacity:.5;margin:0 auto 1rem}
.tile-placeholder p{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#7D869B;margin:0;max-width:22ch}

/* ---------- numbered steps ---------- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.75rem,4vw,2.75rem) 0;border-top:1px solid var(--line-dark)}
.bg-snow .step{border-top-color:var(--line)}
.step:last-child{border-bottom:1px solid var(--line-dark)}
.bg-snow .step:last-child{border-bottom-color:var(--line)}
.step__num{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--alpenlight);opacity:.85}
.step__body h3{margin-bottom:.6rem}
.step__body p:last-child{margin-bottom:0}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:.75rem}}

/* ---------- evidence list ---------- */
.evidence{display:grid;gap:0}
.evidence__item{padding:clamp(1.5rem,3.5vw,2.25rem) 0;border-top:1px solid var(--line-dark)}
.bg-snow .evidence__item{border-top-color:var(--line)}
.evidence__item:last-child{border-bottom:1px solid var(--line-dark)}
.bg-snow .evidence__item:last-child{border-bottom-color:var(--line)}
.evidence__item h3{margin-bottom:.7rem}
.evidence__item p:last-child{margin-bottom:0}

/* ---------- scope columns ---------- */
.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:900px){.scope{grid-template-columns:1fr;gap:2.5rem}}
.scope h3{margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line-dark)}
.bg-snow .scope h3{border-bottom-color:var(--line)}
.scope ul{list-style:none;margin:0;padding:0}
.scope li{position:relative;padding-left:1.15rem;margin-bottom:.85rem;font-size:.97rem;line-height:1.55}
.scope li::before{content:"—";position:absolute;left:0;color:var(--alpenlight);opacity:.7}

/* ---------- pull statement ---------- */
.statement{max-width:22ch}
.statement--wide{max-width:30ch}

/* ---------- disclaimer ---------- */
.disclaimer{
  border-left:2px solid var(--line-dark);
  padding-left:1.35rem;font-size:.87rem;line-height:1.6;
  color:#98A1B4;max-width:70ch;margin-top:2.25rem;
}
.bg-snow .disclaimer{border-left-color:var(--line);color:var(--ink-muted)}

/* ---------- form ---------- */
.form{display:grid;gap:1.4rem;max-width:640px}
.field{display:grid;gap:.5rem}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.bg-dusk .field label,.bg-dusk-deep .field label{color:#8D96AB}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:inherit;
  background:transparent;border:0;border-bottom:1px solid var(--line-dark);
  padding:.75rem 0;transition:border-color .2s ease;
}
.bg-snow .field input,.bg-snow .field select,.bg-snow .field textarea{border-bottom-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--alpenlight)}
.field textarea{resize:vertical;min-height:110px}
.field select option{background:var(--dusk);color:var(--snowfield)}
.field-help{font-size:.82rem;color:var(--ink-muted);margin:0}
.bg-dusk .field-help,.bg-dusk-deep .field-help{color:#8D96AB}
.checkbox{display:flex;gap:.75rem;align-items:flex-start}
.checkbox input{width:18px;height:18px;flex:none;margin-top:.2rem;accent-color:var(--alpenlight)}
.checkbox label{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:400;color:inherit}

/* ---------- footer ---------- */
.site-footer{background:var(--dusk-deep);color:#A7B0C2;position:relative;overflow:hidden}
.site-footer__bg{position:absolute;inset:0;opacity:.28}
.site-footer__bg img{width:100%;height:100%;object-fit:cover}
.site-footer__inner{position:relative;z-index:2;padding:clamp(3.5rem,8vw,6rem) 0 2rem}
.site-footer__tagline{
  font-family:var(--display);font-size:clamp(2rem,5vw,3.25rem);
  color:var(--snowfield);margin:0 0 clamp(2.5rem,6vw,4rem);letter-spacing:-.02em;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem;border-bottom:1px solid var(--line-dark)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr;gap:2.5rem}}
.footer-grid h4{
  font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#7D869B;margin:0 0 1.1rem;
}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:.7rem}
.footer-grid a{text-decoration:none;font-size:.98rem;transition:color .2s ease}
.footer-grid a:hover{color:var(--snowfield)}
.footer-grid address{font-style:normal;font-size:.98rem;line-height:1.7}
.footer-mark{width:38px;margin-bottom:1.5rem;opacity:.9}
.footer-legal{
  padding-top:1.75rem;font-size:.78rem;line-height:1.65;color:#6E778C;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
}
.footer-legal p{margin:0;max-width:70ch;color:inherit}

/* ---------- notice bar (pre-launch) ---------- */
.notice{background:var(--mineral);color:var(--onyx);font-size:.8rem;
  padding:.7rem 0;text-align:center;letter-spacing:.02em}
.notice p{margin:0;max-width:none}
.notice strong{font-weight:600}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- utilities ---------- */
.stack-sm > * + *{margin-top:.75rem}
.stack > * + *{margin-top:1.5rem}
.stack-lg > * + *{margin-top:2.5rem}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.maxw-sm{max-width:46ch}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}