/* ============================================================
   HAMMERSTONE ESTATES — shared stylesheet
   Palette: black + white + gold (matched to current brand).
   Type: Archivo (display) / Newsreader (body) / IBM Plex Mono (data).
   Gold sampled directly from HammerstoneEstates_Logo_BlackGold: #c7ad36.
   Change the two --gold values below to recolor the whole site.
   ============================================================ */

/* Google Fonts were loaded here via @import, which blocks rendering
   (the browser must finish this file before even discovering them).
   They now load asynchronously from app/Views/layout/header.php
   instead — same fonts, same weights, faster first paint. */

:root{
  --ink:#0d0e10;
  --slate:#151719;
  --slate-2:#1d2023;
  --line-dark:#2c3033;
  --paper:#f7f5f1;
  --stone:#efece4;
  --stone-2:#e2ddd2;
  --ink-light:#141618;
  --muted:#5f636a;
  --muted-dark:#9aa1a8;
  --gold:#c7ad36;          /* exact brand gold, sampled from logo */
  --gold-deep:#a08b26;     /* darker gold for hover */
  --white:#ffffff;

  --maxw:1160px;
  --gut:clamp(20px,5vw,64px);

  --f-display:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-body:'Newsreader',Georgia,serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--ink-light);background:var(--paper);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}

h1,h2,h3{font-family:var(--f-display);line-height:1.04;letter-spacing:-.01em;font-weight:800}
h1{font-size:clamp(38px,6.2vw,74px);letter-spacing:-.02em}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:700}
p{max-width:64ch}
.lead{font-size:clamp(19px,2.1vw,23px);color:var(--muted);line-height:1.55}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section{padding:clamp(64px,9vw,120px) 0}
.dark{background:var(--ink);color:var(--stone)}
.dark .lead{color:var(--muted-dark)}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.stone{background:var(--stone)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:820px){.grid-2{grid-template-columns:1fr;gap:36px}}

.site-head{position:sticky;top:0;z-index:50;background:rgba(13,14,16,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center}
.brand img{height:40px;width:auto}
@media(max-width:520px){.brand img{height:32px}}
.foot .brand img{height:76px;margin-bottom:14px}
.nav{display:flex;gap:8px;align-items:center}
.nav a,.nav-parent{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-dark);transition:color .18s;background:none;border:none;
  cursor:pointer;padding:8px 12px;display:inline-flex;align-items:center;gap:.4em}
.nav a:hover,.nav-parent:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]{color:var(--gold)}

.nav-group{position:relative}
.nav-parent::after{content:"▾";font-size:10px;color:var(--gold)}
.nav-menu{position:absolute;top:100%;left:0;min-width:190px;background:var(--slate);
  border:1px solid var(--line-dark);border-radius:3px;padding:6px;display:none;flex-direction:column;
  box-shadow:0 14px 30px rgba(0,0,0,.4)}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:flex}
.nav-menu a{padding:10px 12px;width:100%;border-radius:2px}
.nav-menu a:hover{background:var(--slate-2);color:var(--white)}

.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--stone);
  font-family:var(--f-mono);font-size:12px;padding:8px 12px;border-radius:2px;cursor:pointer}
.head-tel{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--gold);white-space:nowrap;margin-left:18px;padding:8px 14px;
  border:1px solid var(--gold);border-radius:2px;transition:all .18s}
.head-tel:hover{background:var(--gold);color:var(--ink)}
.head-right{display:flex;align-items:center}
@media(max-width:1080px){.head-tel{display:none}}
@media(max-width:980px){
  /* BUGFIX (carried over from the original static CSS): the Menu
     button was display:none at every width, so phones had no way
     to open the nav. Show it once the horizontal nav hides. */
  .nav-toggle{display:inline-block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ink);border-bottom:1px solid var(--line-dark);padding:8px 0;align-items:stretch}
  .nav.open{display:flex}
  .nav>a{padding:14px var(--gut);border-top:1px solid var(--slate-2)}
  .nav-group{border-top:1px solid var(--slate-2)}
  .nav-parent{padding:14px var(--gut);width:100%;justify-content:space-between}
  .nav-menu{position:static;display:flex;border:none;box-shadow:none;background:transparent;padding:0 0 8px}
  .nav-menu a{padding:10px var(--gut) 10px calc(var(--gut) + 16px);color:var(--muted-dark)}
}

.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-mono);font-size:13px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:14px 24px;border-radius:2px;
  border:1px solid transparent;cursor:pointer;transition:all .18s}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-deep);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--stone);border-color:var(--line-dark)}
.btn-ghost:hover{border-color:var(--gold);color:var(--white)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--slate-2)}
.btn-row,.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.hero{background:var(--ink);color:var(--stone);position:relative;overflow:hidden;
  padding:clamp(72px,12vw,150px) 0 clamp(60px,9vw,110px)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 78% 30%,rgba(199,173,54,.10),transparent 70%)}
.hero .wrap{position:relative;z-index:2;max-width:960px}
.hero h1{margin:22px 0 24px;max-width:16ch}
.hero .lead{max-width:52ch}

.metarow{display:flex;flex-wrap:wrap;gap:36px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line-dark)}
.meta .k{font-family:var(--f-display);font-size:30px;font-weight:800;color:var(--white)}
.meta .v{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-dark);margin-top:4px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:3px;overflow:hidden}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:var(--ink);padding:clamp(28px,3.5vw,40px);display:flex;flex-direction:column;gap:14px;min-height:220px}
.card .num{font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.1em}
.card h3{color:var(--white)}
.card p{color:var(--muted-dark);font-size:16.5px}
.card .go{margin-top:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}
.stone .cards{background:var(--stone-2)}
.stone .card{background:var(--paper)}
.stone .card h3{color:var(--ink)}
.stone .card p{color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:3px;overflow:hidden;margin-top:8px}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--ink);padding:32px 26px;display:flex;flex-direction:column;gap:10px}
.step .n{font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.14em}
.step h3{color:var(--white);font-size:20px}

.ticks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.ticks li{position:relative;padding-left:30px;font-size:17px;color:inherit}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:11px;
  border:1.5px solid var(--gold);transform:rotate(45deg)}

.faq{border-top:1px solid var(--stone-2)}
.faq details{border-bottom:1px solid var(--stone-2)}
.dark .faq{border-top-color:var(--line-dark)}
.dark .faq details{border-bottom-color:var(--line-dark)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:clamp(18px,2vw,22px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:22px;font-family:var(--f-display);
  font-weight:600;font-size:26px;color:var(--gold);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 40px 26px 0;color:var(--muted);max-width:74ch}
.dark .faq .ans{color:var(--muted-dark)}

.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--paper);border:1px solid var(--stone-2);border-radius:3px;padding:32px 34px}
.quote .mark{font-family:var(--f-display);color:var(--gold);font-size:44px;line-height:.6;font-weight:900}
.quote p{font-size:19px;margin:14px 0 20px}
.quote .who{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.sec-head{max-width:70ch;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{margin-top:16px}
.sec-head p{margin-top:18px}

.cta{background:var(--ink);color:var(--stone);border-top:1px solid var(--line-dark)}
.cta .wrap{padding-top:clamp(56px,8vw,90px);padding-bottom:clamp(56px,8vw,90px)}
.cta h2{color:var(--white);max-width:18ch}
.cta .lead{margin-top:16px;max-width:56ch}

.foot{background:#08090a;color:var(--muted-dark);padding:56px 0 40px;font-family:var(--f-mono);font-size:13px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:820px){.foot .wrap{grid-template-columns:1fr;gap:32px}}
.foot .brand{font-size:17px;margin-bottom:14px}
.foot a{color:var(--muted-dark);transition:color .16s}
.foot a:hover{color:var(--gold)}
.foot h4,.foot .foot-head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:600}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot .social{display:flex;gap:18px;margin-top:16px}
.foot .fine{grid-column:1/-1;border-top:1px solid var(--slate-2);margin-top:34px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:11.5px;line-height:1.6;color:var(--muted)}
.foot .fine p{max-width:70ch}

.draft{position:sticky;top:68px;z-index:40;background:#5a1414;color:#ffdede;font-family:var(--f-mono);
  font-size:12.5px;letter-spacing:.04em;text-align:center;padding:10px var(--gut);border-bottom:1px solid #7a1c1c}
.draft strong{color:#fff}

.center{text-align:center;margin-left:auto;margin-right:auto}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}

/* ---------- parallax bands ---------- */
.para{
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;   /* the scroll-reveal effect */
  background-repeat:no-repeat;
  color:var(--stone);
  padding:clamp(96px,16vw,220px) 0;
  isolation:isolate;
}
.para::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,14,16,.86),rgba(13,14,16,.72) 45%,rgba(13,14,16,.9));
}
.para .wrap{position:relative;z-index:1}
.para h2,.para h1{color:var(--white)}
.para .lead{color:#d6d2c9}
.para .ticks li{color:#e6e2d9}
/* lighter scrim variant for photos that should read more */
.para.scrim-light::before{
  background:linear-gradient(180deg,rgba(13,14,16,.72),rgba(13,14,16,.5) 50%,rgba(13,14,16,.8));
}
/* iOS/Safari and small screens ignore fixed attachment — fall back cleanly */
@media(max-width:900px),(hover:none){
  .para{background-attachment:scroll;padding:clamp(72px,14vw,130px) 0}
}

/* ---------- inline photo blocks ---------- */
.photo{border-radius:3px;overflow:hidden;border:1px solid var(--stone-2)}
.dark .photo,.para .photo{border-color:var(--line-dark)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-tall img{aspect-ratio:4/5}
.photo-wide img{aspect-ratio:16/9}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
  .para{background-attachment:scroll}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ============================================================
   ORIGINAL SITE FORMAT — image hero, statement bands,
   photo step cards, standard row, CTA banner
   ============================================================ */

/* --- full-bleed image hero --- */
.hero-img{
  position:relative;min-height:clamp(460px,72vh,680px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;color:var(--stone);overflow:hidden;
}
.hero-img::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,14,16,.62),rgba(13,14,16,.72));}
.hero-img .wrap{position:relative;z-index:2;max-width:820px}
.hero-img h1{color:var(--white);margin-bottom:20px}
.hero-img .lead{color:#ded9d0;margin-left:auto;margin-right:auto;max-width:44ch}
.hero-img .btn-row{justify-content:center}

/* --- big centered statement band --- */
.statement{padding:clamp(56px,8vw,96px) 0;text-align:center}
.statement .wrap{max-width:900px;padding-left:var(--gut);padding-right:var(--gut)}
.statement p{
  font-family:var(--f-display);font-weight:800;line-height:1.16;letter-spacing:-.01em;
  font-size:clamp(23px,3vw,38px);margin:0 auto;max-width:22ch;
}
.statement.dark p{color:var(--white)}
.statement.stone p{color:var(--ink)}
.statement .btn-row{justify-content:center;margin-top:30px}

/* --- What We Offer: three linked cards --- */
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:3px;overflow:hidden}
@media(max-width:820px){.offer{grid-template-columns:1fr}}
.offer a{background:var(--ink);padding:clamp(30px,4vw,44px);display:flex;flex-direction:column;
  gap:12px;min-height:190px;transition:background .18s}
.offer a:hover{background:var(--slate-2)}
.offer h3{color:var(--white)}
.offer p{color:var(--muted-dark);font-size:16.5px}
.offer .go{margin-top:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}

/* --- How We Operate: 4 photo step cards --- */
.psteps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
@media(max-width:900px){.psteps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.psteps{grid-template-columns:1fr}}
.pstep{display:flex;flex-direction:column}
.pstep .shot{aspect-ratio:3/2;overflow:hidden;border-radius:3px;border:1px solid var(--stone-2)}
.dark .pstep .shot{border-color:var(--line-dark)}
.pstep .shot img{width:100%;height:100%;object-fit:cover;display:block}
.pstep .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--gold);margin-top:18px}
.pstep h3{font-size:20px;margin-top:6px}
.dark .pstep h3{color:var(--white)}

/* --- The Hammerstone Standard: icon row --- */
.standard{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:3px;overflow:hidden;margin-top:8px}
@media(max-width:1000px){.standard{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.standard{grid-template-columns:1fr}}
.standard div{background:var(--ink);padding:30px 22px;display:flex;flex-direction:column;gap:14px}
.standard .mark{width:26px;height:26px;border:2px solid var(--gold);transform:rotate(45deg)}
.standard h3{color:var(--white);font-size:17px;line-height:1.25}

/* --- image-backed CTA banner --- */
.cta-banner{
  position:relative;text-align:center;padding:clamp(72px,10vw,120px) 0;
  background-size:cover;background-position:center;background-attachment:fixed;color:var(--stone);
}
.cta-banner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,14,16,.78),rgba(13,14,16,.86))}
.cta-banner .wrap{position:relative;z-index:2}
.cta-banner h2{color:var(--white)}
.cta-banner .cta-actions{justify-content:center}
@media(max-width:900px),(hover:none){.cta-banner{background-attachment:scroll}}

/* ============================================================
   CONTACT FORM  (added for the PHP version of the site)
   Uses the same design tokens defined at the top of this file.
   ============================================================ */
.contact-form label{
  display:block;
  margin:1.1rem 0 .35rem;
  font-family:var(--mono, "IBM Plex Mono", monospace);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.7rem .8rem;
  border:1px solid rgba(0,0,0,.25);
  border-radius:4px;
  font:inherit;
  background:#fff;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--gold, #c7ad36);
  outline-offset:1px;
}
.field-error{
  color:#a4271f;
  font-size:.85rem;
  margin:.3rem 0 0;
}
/* Honeypot: parked far off-screen. Bots still "see" it in the
   HTML; humans never do. Don't use display:none — some bots
   skip fields hidden that way. */
.hp-wrap{
  position:absolute;
  left:-9999px;
  top:-9999px;
}

/* ============================================================
   RESPONSIVE HERO / BANNER BACKGROUNDS (PHP version)
   ------------------------------------------------------------
   These replace the old inline style="background-image:..."
   attributes. Benefits:
     - image-set() serves the small WebP to browsers that
       support it, the .jpg to those that don't;
     - the @media block gives phones an 800px download instead
       of the full 1600px desktop file;
     - paths are relative to THIS css file, so they work no
       matter what page URL or subfolder the site runs under.
   ============================================================ */
.bg-forest-fog{background-image:url("assets/forest-fog.jpg");
  background-image:image-set(url("assets/forest-fog-1600.webp") type("image/webp"),url("assets/forest-fog.jpg") type("image/jpeg"))}
.bg-forest-dusk{background-image:url("assets/forest-dusk.jpg");
  background-image:image-set(url("assets/forest-dusk-1600.webp") type("image/webp"),url("assets/forest-dusk.jpg") type("image/jpeg"))}
.bg-neighborhood{background-image:url("assets/neighborhood.jpg");
  background-image:image-set(url("assets/neighborhood-1600.webp") type("image/webp"),url("assets/neighborhood.jpg") type("image/jpeg"))}
.bg-mhp-dusk{background-image:url("assets/mhp-dusk.jpg");
  background-image:image-set(url("assets/mhp-dusk-1600.webp") type("image/webp"),url("assets/mhp-dusk.jpg") type("image/jpeg"))}
@media (max-width:700px){
  .bg-forest-fog{background-image:url("assets/forest-fog.jpg");
    background-image:image-set(url("assets/forest-fog-800.webp") type("image/webp"),url("assets/forest-fog.jpg") type("image/jpeg"))}
  .bg-forest-dusk{background-image:url("assets/forest-dusk.jpg");
    background-image:image-set(url("assets/forest-dusk-800.webp") type("image/webp"),url("assets/forest-dusk.jpg") type("image/jpeg"))}
  .bg-neighborhood{background-image:url("assets/neighborhood.jpg");
    background-image:image-set(url("assets/neighborhood-800.webp") type("image/webp"),url("assets/neighborhood.jpg") type("image/jpeg"))}
  .bg-mhp-dusk{background-image:url("assets/mhp-dusk.jpg");
    background-image:image-set(url("assets/mhp-dusk-800.webp") type("image/webp"),url("assets/mhp-dusk.jpg") type("image/jpeg"))}
}

/* ============================================================
   FAQ PAGE  (added with the PHP version)
   ============================================================ */
.faq-item{border-bottom:1px solid rgba(0,0,0,.15);padding:.35rem 0}
.faq-item summary{
  cursor:pointer;padding:.85rem 0;font-weight:600;font-size:1.05rem;
  list-style-position:outside;
}
.faq-item summary:hover{color:var(--gold,#c7ad36)}
.faq-item[open] summary{color:var(--gold,#c7ad36)}
.faq-item p{padding:0 0 1rem;line-height:1.6;max-width:65ch}

/* ============================================================
   HEADER LOGO SIZING (added after launch)
   ------------------------------------------------------------
   Mobile: the bar is a fixed 68px at all widths, so the logo
   grows to 58px with no overflow and no layout shift; the
   dropdown menu (anchored at top:68px) is unaffected.
   Desktop: the bar grows to 96px so the logo can match the
   footer's 76px with 10px of air. position:sticky keeps the
   header in page flow, so content below shifts automatically.
   ============================================================ */
@media (max-width: 980px) {
  .site-head .brand img { height: 58px; }
}
@media (min-width: 981px) {
  .site-head .wrap { height: 96px; }
  .site-head .brand img { height: 76px; }   /* same as .foot .brand img */
}