/* =========================================================
   Brian Head Real Estate — Timberline Craftsman theme
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --cream:#F4EAD9;
  --cream-dim:#EBDEC6;
  --timber:#4A3626;
  --timber-dark:#33261A;
  --forest:#33472F;
  --forest-dark:#243322;
  --forest-tint:#E7ECE1;
  --ember:#C1592B;
  --brass:#A9782E;
  --ink-soft:#6b5847;
  --ink-mute:#8a7360;
  --font-display:'Zilla Slab', Georgia, serif;
  --font-body:'Karla', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--cream); color:var(--timber-dark); font-family:var(--font-body); line-height:1.65;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:1200px; margin:0 auto; padding:0 1.75rem;}
h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0 0 0.7rem; color:var(--timber-dark);}
p{margin:0 0 1rem;}

/* Wood-sign nameplate — signature device */
.sign{
  display:inline-block; border:2px solid var(--forest); border-radius:6px;
  padding:0.4rem 1rem; font-family:var(--font-mono); font-size:0.7rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--forest);
  position:relative; background:var(--forest-tint);
}
.sign::before,.sign::after{content:'';position:absolute; top:3px; bottom:3px; width:2px; background:var(--brass);}
.sign::before{left:3px;} .sign::after{right:3px;}
.sign.on-dark{background:rgba(244,234,217,0.14); border-color:rgba(244,234,217,0.5); color:var(--cream);}
.sign.on-dark::before,.sign.on-dark::after{background:var(--brass);}

/* Header */
header.top{padding:1.1rem 0; border-bottom:1px solid rgba(74,54,38,0.18); background:var(--cream); position:sticky; top:0; z-index:100;}
header.top .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
.brand{display:flex; align-items:center; gap:0.7rem;}
.brand img{height:36px;}
.brand span{font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--timber); border-left:1px solid rgba(74,54,38,0.3); padding-left:0.6rem; display:none;}
@media(min-width:640px){.brand span{display:block;}}

nav.main-nav{display:none; gap:1.6rem; align-items:center; flex-wrap:wrap;}
nav.main-nav a{font-weight:600; font-size:0.92rem; position:relative; padding:0.2rem 0;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--forest);}
@media(min-width:900px){nav.main-nav{display:flex;} .nav-toggle{display:none;}}

.header-cta{display:none;}
@media(min-width:900px){.header-cta{display:inline-flex;}}

.nav-toggle{background:none; border:1.5px solid var(--timber); border-radius:6px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle svg{width:18px; height:18px;}

.mobile-nav{display:none; flex-direction:column; background:#fff; border-bottom:1px solid rgba(74,54,38,0.15);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:0.9rem 1.75rem; border-top:1px solid rgba(74,54,38,0.08); font-weight:600;}
@media(min-width:900px){.mobile-nav{display:none !important;}}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:0.5rem; font-weight:700; font-size:0.92rem; padding:0.85rem 1.6rem; border-radius:8px; border:2px solid transparent; cursor:pointer; font-family:var(--font-body);}
.btn-solid{background:var(--ember); color:#fff;}
.btn-solid:hover{background:#a5471f;}
.btn-forest{background:var(--forest); color:#fff;}
.btn-forest:hover{background:var(--forest-dark);}
.btn-outline{border-color:var(--timber); color:var(--timber);}
.btn-outline:hover{background:var(--timber); color:var(--cream);}
.btn-outline.on-dark{border-color:rgba(244,234,217,0.6); color:var(--cream);}
.btn-outline.on-dark:hover{background:rgba(244,234,217,0.15);}

/* Split hero (homepage) */
.hero{position:relative; overflow:hidden;}
.hero-split{display:grid; grid-template-columns:1fr; min-height:82vh;}
@media(min-width:900px){.hero-split{grid-template-columns:1.35fr 1fr;}}
.hero-photo-col{position:relative; display:flex; align-items:center; min-height:50vh;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center 55%;}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg, rgba(36,51,34,0.85) 0%, rgba(51,38,26,0.55) 55%, rgba(51,38,26,0.25) 100%);}
.hero-inner{position:relative; z-index:2; color:var(--cream); max-width:520px; padding:3rem 1.75rem;}
.hero-inner .sign{margin-bottom:1.2rem;}
.hero-inner h1{color:var(--cream); font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.1;}
.hero-inner p{font-size:1.03rem; color:rgba(244,234,217,0.9); max-width:44ch; margin-bottom:1.6rem;}
.hero-actions{display:flex; gap:0.9rem; flex-wrap:wrap;}

.hero-listing-col{background:var(--cream); padding:2.2rem; display:flex; flex-direction:column; justify-content:center; border-left:6px solid var(--ember);}
.hero-listing-col .sign{margin-bottom:1rem;}
.hero-listing-card{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(74,54,38,0.14);}
.hero-listing-card .ph{aspect-ratio:16/10; overflow:hidden;}
.hero-listing-card .ph img{width:100%; height:100%; object-fit:cover;}
.hero-listing-card .body{padding:1.3rem 1.4rem 1.5rem;}
.hero-listing-card .price{font-family:var(--font-mono); font-size:1.5rem; color:var(--ember); font-weight:500;}
.hero-listing-card .addr{color:var(--ink-soft); font-size:0.88rem; margin-bottom:0.7rem;}
.hero-listing-card .stats{display:flex; gap:1rem; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-mute); border-top:1px solid rgba(74,54,38,0.12); padding-top:0.6rem; margin-bottom:0.9rem;}
.hero-listing-card .btn{width:100%; justify-content:center; padding:0.7rem 1rem; font-size:0.85rem;}

/* Page header (sub-pages) */
.page-header{background:var(--forest-dark); color:var(--cream); padding:4rem 0 3rem;}
.page-header h1{color:var(--cream); font-size:clamp(1.9rem,4vw,2.8rem);}
.page-header p{color:rgba(244,234,217,0.82); max-width:56ch;}
.page-header .sign{margin-bottom:1rem;}

/* Sections */
section{padding:4.5rem 0;}
.section-tight{padding:3rem 0;}
.section-alt{background:var(--cream-dim);}
.section-forest{background:var(--forest-tint);}
.section-head{max-width:60ch; margin:0 auto 2.5rem; text-align:center;}
.section-head.left{margin:0 0 2.5rem; text-align:left;}
.section-head .sign{margin-bottom:1rem;}
.section-head p{color:var(--ink-soft);}

/* Welcome / quote card */
.welcome-card{background:#fff; border:2px solid rgba(74,54,38,0.15); border-radius:14px; padding:2.5rem; max-width:760px; margin:0 auto; text-align:center; box-shadow:0 10px 30px rgba(74,54,38,0.08);}
.welcome-card p{font-family:var(--font-display); font-size:1.35rem; font-style:italic; color:var(--timber); line-height:1.5;}
.welcome-card .attribution{font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--forest); margin-top:1rem;}

/* Featured listing card (full detail, used on listings.html) */
.feature-card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 12px 34px rgba(74,54,38,0.12); display:grid; grid-template-columns:1fr;}
@media(min-width:860px){.feature-card{grid-template-columns:1.1fr 1fr;}}
.feature-card .gallery{position:relative; aspect-ratio:4/3;}
@media(min-width:860px){.feature-card .gallery{aspect-ratio:auto; min-height:480px;}}
.feature-card .gallery img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity 0.5s ease;}
.feature-card .gallery img.active{opacity:1;}
.gallery-dots{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:0.4rem; z-index:3;}
.gallery-dots button{width:7px; height:7px; border-radius:50%; border:none; background:rgba(255,255,255,0.55); cursor:pointer; padding:0;}
.gallery-dots button.active{background:#fff;}
.feature-card .info{padding:2.5rem;}
.feature-price{font-family:var(--font-mono); font-size:1.9rem; color:var(--ember); font-weight:500;}
.feature-addr{color:var(--ink-soft); margin-bottom:1rem;}
.feature-stats{display:flex; gap:1.5rem; font-family:var(--font-mono); font-size:0.82rem; padding:0.8rem 0; border-top:1px solid rgba(74,54,38,0.15); border-bottom:1px solid rgba(74,54,38,0.15); margin-bottom:1.2rem;}
.feature-stats span{display:block; font-size:0.68rem; text-transform:uppercase; color:var(--ink-mute);}
.badge{position:absolute; top:0.8rem; left:0.8rem; background:var(--ember); color:#fff; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.35rem 0.6rem; border-radius:4px; z-index:3;}

/* Grid of 3 feature/photo cards */
.grid-3{display:grid; grid-template-columns:1fr; gap:1.5rem;}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.feat-item{background:#fff; border-radius:12px; overflow:hidden; border:1px solid rgba(74,54,38,0.1);}
.feat-item .ph{aspect-ratio:4/3; overflow:hidden;}
.feat-item .ph img{width:100%; height:100%; object-fit:cover;}
.feat-item .body{padding:1.4rem 1.5rem 1.6rem;}
.feat-item .n{font-family:var(--font-mono); color:var(--forest); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.5rem; display:block;}

/* Bio */
.bio{display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start;}
@media(min-width:800px){.bio{grid-template-columns:300px 1fr;}}
.bio img{border-radius:14px; aspect-ratio:3/4; object-fit:cover; box-shadow:0 10px 30px rgba(74,54,38,0.15);}
.credentials-list{list-style:none; padding:0; margin:1rem 0; display:grid; gap:0.6rem;}
.credentials-list li{display:flex; gap:0.6rem; align-items:flex-start; font-size:0.95rem;}
.credentials-list li::before{content:''; min-width:6px; height:6px; border-radius:50%; background:var(--ember); margin-top:0.5em;}

/* IDX placeholder */
.idx-slot{border:2px dashed var(--brass); border-radius:14px; background:#fff; padding:3rem; text-align:center;}
.idx-slot .icon{color:var(--forest); margin-bottom:1rem;}
.idx-slot h3{margin-bottom:0.4rem;}
.idx-slot p{color:var(--ink-soft); max-width:52ch; margin:0 auto 1rem;}
.idx-slot code{font-family:var(--font-mono); background:var(--cream-dim); padding:0.15rem 0.4rem; border-radius:4px; font-size:0.85em;}

/* CTA strip */
.cta-strip{background:var(--forest-dark); color:var(--cream); border-radius:16px; padding:2.8rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;}
.cta-strip h2{color:var(--cream);}
.cta-strip p{color:rgba(244,234,217,0.8); margin:0;}

/* Forms */
.form-card{background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(74,54,38,0.1); padding:2.5rem;}
.form-row{display:grid; grid-template-columns:1fr; gap:1rem;}
@media(min-width:640px){.form-row.two{grid-template-columns:1fr 1fr;}}
.field{margin-bottom:1rem;}
.field label{display:block; font-size:0.82rem; font-weight:700; margin-bottom:0.35rem; color:var(--timber-dark);}
.field input, .field textarea, .field select{width:100%; font-family:var(--font-body); font-size:0.95rem; padding:0.75rem 0.9rem; border:1.5px solid rgba(74,54,38,0.2); border-radius:8px; background:var(--cream); color:var(--timber-dark);}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--forest); outline-offset:1px; background:#fff;}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:0.82rem; color:var(--ink-soft); margin-top:0.8rem;}

/* Footer */
footer.site-footer{background:var(--timber-dark); color:rgba(244,234,217,0.75); padding:3.5rem 0 1.5rem;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2rem;}
@media(min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-grid img{height:32px; margin-bottom:0.8rem;}
.footer-grid h4{color:var(--cream); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.8rem;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:0.5rem;}
.footer-grid a:hover{color:var(--cream);}
.footer-bottom{border-top:1px solid rgba(244,234,217,0.14); padding-top:1.2rem; font-size:0.78rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.5rem; color:rgba(244,234,217,0.5);}

/* Utility */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}
:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}