/* 5416 S Fireplace Drive
   Light, airy, high-contrast. Accents drawn from the property itself:
   the sage cabinetry in the baths, and a warm ember hairline for the hearth. */

:root{
  --paper:      #FFFFFF;
  --paper-2:    #F7F5F2;
  --ink:        #191512;
  --ink-soft:   #5C544B;
  --line:       #E4DFD8;
  --line-soft:  #EFEBE5;
  --ember:      #A8461F;
  --ember-lit:  #D2622B;
  --sage:       #4F6349;

  --display: "Gloock", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

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

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- shared type ---------- */

.eyebrow{
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ember);
  margin:0;
}

.section-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height:1.06;
  letter-spacing:-0.015em;
  margin:0.5rem 0 0;
  text-wrap:balance;
}

.lede{
  color:var(--ink-soft);
  max-width:58ch;
  margin:1.15rem 0 0;
}

/* ---------- hero ---------- */

.hero{ position:relative; }

.hero__img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center 52%;
  background:var(--paper-2);
}

@media (min-width:700px){
  .hero__img{ aspect-ratio:16/9; object-position:center 58%; max-height:74svh; }
}

.hero__inner{ padding-block:clamp(2rem, 6vw, 3.5rem) clamp(2.25rem, 7vw, 4rem); }

@media (min-width:900px){
  .hero__inner{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:3.5rem;
    align-items:end;
  }
  .hero__aside .emberline{ margin-top:0; }
}

.hero__eyebrow{
  font-size:0.75rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ember);
  margin:0 0 0.9rem;
}

.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem, 1.4rem + 5.4vw, 5.25rem);
  line-height:0.99;
  letter-spacing:-0.022em;
  margin:0;
  max-width:15ch;
  text-wrap:balance;
}

.hero h1 .sub{
  display:block;
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(0.875rem, 0.8rem + 0.4vw, 1.05rem);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:1rem;
}

/* the ember hairline — the page's signature mark */
.emberline{
  height:2px;
  border:0;
  margin:1.6rem 0;
  max-width:min(340px, 62%);
  background:linear-gradient(to right, var(--ember-lit), rgba(210,98,43,0.15));
}

.hero__price{
  font-family:var(--display);
  font-size:clamp(2.1rem, 1.3rem + 3vw, 3.1rem);
  line-height:1;
  margin:0;
}

.hero__ppsf{
  color:var(--ink-soft);
  font-size:0.875rem;
  letter-spacing:0.06em;
  margin:0.6rem 0 0;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.9rem; }
.hero__cta .btn{ flex:1 1 15rem; justify-content:center; }
@media (min-width:700px){ .hero__cta .btn{ flex:0 0 auto; } }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.95rem 1.6rem;
  font-family:var(--body);
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-decoration:none;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--ember); }

.btn--ghost{ border-color:var(--line); color:var(--ink); background:var(--paper); }
.btn--ghost:hover{ border-color:var(--ink); }

.btn svg{ width:1.05em; height:1.05em; flex:none; }

/* ---------- mantel: the stat band ---------- */

.mantel{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.mantel__grid{ display:grid; grid-template-columns:repeat(2, 1fr); }

.stat{ padding:1.15rem 1rem 1.15rem 0; border-bottom:1px solid var(--line-soft); }
.stat:nth-child(even){ padding-left:1rem; padding-right:0; border-left:1px solid var(--line-soft); }
.stat:last-child{ border-bottom:0; }

.stat__v{
  font-family:var(--display);
  font-size:clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  line-height:1;
  display:block;
}
.stat__l{
  display:block;
  font-size:0.6875rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:0.5rem;
  font-weight:600;
}

@media (min-width:720px){
  .mantel__grid{ grid-template-columns:repeat(5, 1fr); }
  .stat{ padding:1.7rem 1.25rem; border-bottom:0; border-left:1px solid var(--line-soft); text-align:center; }
  .stat:first-child{ border-left:0; padding-left:0; text-align:left; }
  .stat:nth-child(even){ padding-right:1.25rem; }
}

/* ---------- generic section ---------- */

.band{ padding-block:clamp(3.5rem, 9vw, 7rem); }
.band--tint{ background:var(--paper-2); }
.band__head{ max-width:62ch; }

/* ---------- intro + schools ---------- */

.intro__grid{ display:grid; gap:2.75rem; }
@media (min-width:900px){
  .intro__grid{ grid-template-columns:1.35fr 1fr; gap:4.5rem; align-items:start; }
}

.schools{
  border:1px solid var(--line);
  border-top:3px solid var(--sage);
  background:var(--paper);
  padding:1.75rem 1.6rem;
}
.schools__k{
  font-size:0.6875rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sage); margin:0 0 0.5rem; font-weight:700;
}
.schools__v{ font-family:var(--display); font-size:1.75rem; line-height:1.1; margin:0; }
.schools__n{ color:var(--ink-soft); font-size:0.9375rem; margin:0.7rem 0 0; line-height:1.55; }

/* ---------- gallery ---------- */

.chips{
  display:flex;
  gap:0.5rem;
  margin-top:2rem;
  overflow-x:auto;
  padding-bottom:0.5rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{ display:none; }

.chip{
  flex:0 0 auto;
  font-family:var(--body);
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.04em;
  padding:0.55rem 1rem;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:100px;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip span{ color:var(--ink-soft); font-weight:500; margin-left:0.3rem; }
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip.is-on span{ color:rgba(255,255,255,0.6); }

.gal{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.5rem;
  margin-top:1.25rem;
}
@media (min-width:640px){ .gal{ grid-template-columns:repeat(3, 1fr); gap:0.7rem; } }
@media (min-width:1000px){ .gal{ grid-template-columns:repeat(4, 1fr); } }

.gal__item{
  margin:0; padding:0; border:0;
  background:var(--line-soft);
  aspect-ratio:3/2;
  overflow:hidden;
  cursor:zoom-in;
  position:relative;
}
.gal__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.gal__item:hover img{ transform:scale(1.05); }
.gal__item[hidden]{ display:none; }

.gal__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.8rem 0.8rem 0.65rem;
  font-size:0.6875rem; letter-spacing:0.09em; text-transform:uppercase;
  font-weight:600;
  color:#fff;
  background:linear-gradient(to top, rgba(20,15,12,0.85), transparent);
  text-align:left;
  opacity:0; transition:opacity .25s ease;
}
.gal__item:hover .gal__cap, .gal__item:focus-visible .gal__cap{ opacity:1; }

.gal__empty{ color:var(--ink-soft); margin-top:2rem; }

/* ---------- renovation inventory ---------- */

.reno{ margin-top:2.5rem; display:grid; }
@media (min-width:860px){ .reno{ grid-template-columns:1fr 1fr; column-gap:4rem; } }

.reno__row{
  border-top:1px solid var(--line);
  padding:1.7rem 0;
  display:grid;
  gap:0.85rem;
}
@media (min-width:520px){
  .reno__row{ grid-template-columns:minmax(9rem, 11rem) 1fr; gap:1.75rem; align-items:baseline; }
}

.reno__h{ font-family:var(--display); font-size:1.375rem; line-height:1.1; margin:0; }

.reno__list{ margin:0; padding:0; list-style:none; }
.reno__list li{
  color:var(--ink-soft);
  padding-left:1.15rem;
  position:relative;
  font-size:1rem;
  line-height:1.5;
}
.reno__list li + li{ margin-top:0.5rem; }
.reno__list li::before{
  content:"";
  position:absolute; left:0; top:0.6em;
  width:5px; height:5px; border-radius:50%;
  background:var(--ember-lit);
}

/* ---------- video ---------- */

.tour__grid{ display:grid; gap:2.5rem; }
@media (min-width:900px){
  .tour__grid{ grid-template-columns:1fr auto; gap:4.5rem; align-items:center; }
  .tour{ margin-top:0; }
}

.tour{ margin-top:2.5rem; display:flex; justify-content:center; }

.tour__frame{
  position:relative;
  width:min(340px, 88vw);
  aspect-ratio:9/16;
  border:1px solid var(--line);
  background:var(--ink);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  display:block;
}
.tour__frame > img{ width:100%; height:100%; object-fit:cover; opacity:0.78; transition:opacity .3s ease; }
.tour__frame:hover > img{ opacity:0.92; }
.tour__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.tour__play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.tour__play span{
  width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper);
  box-shadow:0 6px 26px rgba(25,21,18,0.35);
}
.tour__play svg{ width:26px; height:26px; margin-left:4px; fill:var(--ink); }

.tour__label{
  position:absolute; left:0; right:0; bottom:0;
  padding:2rem 1rem 0.9rem;
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  color:#fff;
  background:linear-gradient(to top, rgba(20,15,12,0.85), transparent);
  pointer-events:none;
}

/* ---------- floor plans ---------- */

.plans{ display:grid; gap:1rem; margin-top:2.5rem; }
@media (min-width:820px){ .plans{ grid-template-columns:repeat(3,1fr); } }

.plan{
  margin:0; border:1px solid var(--line); background:var(--paper);
  padding:0.9rem; cursor:zoom-in;
}
.plan img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
}
.plan figcaption{
  font-size:0.6875rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft); margin-top:0.8rem; text-align:center;
}

/* ---------- location ---------- */

.loc__grid{ display:grid; gap:2.5rem; }
@media (min-width:920px){
  .loc__grid{ grid-template-columns:1.15fr 1fr; gap:3.5rem; align-items:stretch; }
  .loc__img{ height:100%; min-height:420px; object-fit:cover; }
}

.loc__img{ border:1px solid var(--line); }

.near{ margin:2rem 0 0; padding:0; list-style:none; }
.near li{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:0.9rem 0; border-top:1px solid var(--line);
  font-size:0.9375rem;
}
.near li span:first-child{ font-weight:600; }
.near li span:last-child{ color:var(--ink-soft); text-align:right; }

/* ---------- contact ---------- */

.contact{ background:var(--ink); color:var(--paper); }
.contact .eyebrow{ color:var(--ember-lit); }
.contact__inner{ text-align:center; padding-block:clamp(3.5rem, 9vw, 6.5rem); }
.contact h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.3rem);
  line-height:1.05; margin:0.5rem 0 0;
}
.contact .emberline{ margin-inline:auto; }
.contact__who{ color:#C9C0B5; margin:1rem 0 0; }
.contact__who strong{ color:var(--paper); font-weight:600; }
.contact__cta{ display:flex; flex-wrap:wrap; gap:0.7rem; justify-content:center; margin-top:2rem; }
.contact__cta .btn{ flex:1 1 100%; justify-content:center; }
@media (min-width:560px){ .contact__cta .btn{ flex:0 0 auto; } }
.contact .btn--primary{ background:var(--paper); color:var(--ink); }
.contact .btn--primary:hover{ background:var(--ember-lit); color:var(--paper); }
.contact .btn--ghost{ background:transparent; border-color:rgba(255,255,255,0.32); color:var(--paper); }
.contact .btn--ghost:hover{ border-color:var(--paper); }

/* ---------- footer ---------- */

.foot{
  border-top:1px solid var(--line);
  padding-block:2.5rem 5.5rem;
  font-size:0.875rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.foot p{ margin:0 0 0.75rem; max-width:72ch; }
.foot__meta{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.75rem; margin-bottom:1.25rem;
  letter-spacing:0.12em; text-transform:uppercase; font-size:0.6875rem; font-weight:600;
  color:var(--ink);
}
.foot a{ color:var(--ember); }

@media (min-width:860px){ .foot{ padding-bottom:3rem; } }

/* ---------- sticky mobile action bar ---------- */

.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px;
  background:rgba(255,255,255,0.18);
  box-shadow:0 -8px 24px rgba(25,21,18,0.13);
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar.is-on{ transform:translateY(0); }
.actionbar a{
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:1.1rem 0.5rem;
  font-size:0.9375rem; font-weight:600; letter-spacing:0.03em;
  text-decoration:none;
}
.actionbar .ab-call{ background:var(--ink); color:var(--paper); }
.actionbar .ab-text{ background:var(--ember); color:var(--paper); }
.actionbar svg{ width:1.05em; height:1.05em; }

@media (min-width:860px){ .actionbar{ display:none; } }

/* ---------- lightbox ---------- */

.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(16,12,10,0.97);
  display:none;
  align-items:center; justify-content:center;
}
.lb.is-open{ display:flex; }

.lb__img{ max-width:94vw; max-height:82svh; object-fit:contain; }

.lb__cap{
  position:absolute; bottom:1.4rem; left:0; right:0;
  text-align:center; font-size:0.75rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#B8AFA4; padding-inline:1rem;
}

.lb__btn{
  position:absolute;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.24);
  color:#fff;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  transition:background-color .2s ease;
}
.lb__btn:hover{ background:rgba(255,255,255,0.22); }
.lb__btn svg{ width:20px; height:20px; }
.lb__close{ top:1rem; right:1rem; }
.lb__prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb__next{ right:1rem; top:50%; transform:translateY(-50%); }
@media (min-width:700px){ .lb__prev{ left:2rem; } .lb__next{ right:2rem; } }

/* ---------- scroll reveal ---------- */

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .gal__item img{ transition:none; }
  .actionbar{ transition:none; }
}