/* =====================================================================
   2026 restyle: Winter Park modern luxury.
   Crisp charcoal / warm off-white / brushed brass, lots of air, hairlines.
   Loaded after site.css (+ pages.css). Red is a small brand accent only
   (logo star, primary CTA). Fonts: Fraunces (light display serif, used
   sparingly) + Manrope (body/UI), self-hosted in assets/fonts/.
   ===================================================================== */
:root{
  --char:#121315; --char-2:#17181b; --char-3:#2a2b2f; --char-0:#0e0f11;
  --ink:#f3efe8; --mute:#aaa49a; --gold:#c8a96a; --gold-2:#dcc497; --brass:#c8a96a;
  --line:rgba(243,239,232,.1); --line-2:rgba(243,239,232,.18);
  --red:#b3121f; --red-2:#c8202d;
  --serif:"Fraunces","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope","Helvetica Neue",Arial,system-ui,sans-serif;
  --sp-sec:clamp(96px,11vw,150px);
}
body{background:var(--char);font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.75;letter-spacing:.005em}
.wrap{max-width:1240px;padding:0 clamp(22px,4vw,48px)}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.012em;line-height:1.08;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
h3{font-weight:400;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--gold-2)}
h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin:.9rem 0 1.3rem}
.hero h1{font-size:clamp(2.8rem,6.2vw,5.6rem);font-weight:300;margin:22px 0 26px}
.pg-hero h1{font-size:clamp(2.6rem,5.6vw,4.8rem)}
.eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.38em;color:var(--gold);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7;flex:none}
.pg-cta .eyebrow,.wp-cta .eyebrow{justify-content:center}
.lead{font-size:1.08rem;color:var(--mute);max-width:620px;font-weight:400}
.hero p,.pg-hero p{color:#d9d3c9;font-weight:400}
p{font-weight:400}

/* spacing */
section{padding:var(--sp-sec) 0}
.pg-sec{padding:var(--sp-sec) 0}
.pg-cta{padding:calc(var(--sp-sec) * .9) 0}

/* surfaces: flat, hairlines, no heavy glows */
.pg-alt,#services,#neighborhood,#visualize,#spin{background:var(--char-2)}
.pg-alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#work,#trucks{background:var(--char-0)}
.hero{background:linear-gradient(#0e0f11,#121315 80%)}
.pg-hero{background:linear-gradient(#0e0f11,#121315 80%)}
.pg-cta{background:var(--char-0);border-top:1px solid var(--line)}
#spin{background:radial-gradient(ellipse 50% 60% at 75% 50%,#1d1c19 0%,transparent 70%),var(--char-2)}
.ba,#trucks .door,.nav-sub,.lb-img{box-shadow:none}
.wp-badge{box-shadow:none;background:var(--char);border-color:var(--gold);outline-color:var(--line)}
.brand svg{filter:none}

/* buttons: thin, calm */
.btn{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.24em;padding:17px 32px;border:1px solid var(--line-2);color:var(--ink);border-radius:0;transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:transparent;border-color:var(--gold);color:var(--gold-2)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:#9e0f1b;border-color:#9e0f1b;color:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-2);outline-offset:1px}
.more-link{color:var(--gold-2);border-bottom-color:var(--line-2);font-weight:600}
.more-link:hover{color:var(--ink);border-color:var(--gold)}

/* nav */
nav{padding:22px 0;background:linear-gradient(#0e0f11f2,#0e0f1100)}
.brand b{font-family:var(--serif);font-weight:400;letter-spacing:.14em;font-size:1.2rem}
.brand small{font-family:var(--sans);font-weight:600;letter-spacing:.42em;font-size:.56rem;color:var(--gold)}
.nav-menu,nav ul{font-family:var(--sans);font-weight:500;letter-spacing:.2em;color:#d6d0c6}
.nav-menu a:hover,.nav-more-btn:hover{color:var(--gold-2)}
.nav-sub{background:#121315f7;border-color:var(--line);backdrop-filter:blur(8px)}
.nav-sub a:hover,.nav-sub a:focus-visible{background:#1d1e21}
.nav-toggle{border-color:var(--line-2)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{background:var(--ink)}
@media(max-width:1100px){nav.open,nav.open ul.nav-menu{background:#0e0f11fa}}

/* brand-red only as accent: numerals, bullets, markers go brass */
.svc .n,.step::before,.sc-n,.wp-n,.spin-result b{color:var(--gold)}
.step::before,.wp-n,.sc-n{font-family:var(--serif);font-weight:300}
.hero .loc span::before,.lake li::before,.wp-card li::before,.strip i{color:var(--gold)}
.about blockquote,.wp-card .wp-quote{border-left:1px solid var(--gold)}
.wp-edu,.fl-note{border-left:1px solid var(--gold)}
.hero .loc{font-weight:500}
.strip{background:var(--char-0)}
.strip .wrap{font-family:var(--serif);font-weight:300}

/* cards / grids: fewer boxes, hairline dividers */
.svc{background:var(--char-2);padding:44px 34px 48px}
.svc:hover{background:#1b1c1f}
.svc svg{stroke:var(--gold);stroke-width:1.1}
.svc h3{font-size:1.5rem}
.card,.sc-card,.fl-fig,.gl-item,.wp-card,.tq figure,form,.nb-grid figure{border-color:var(--line)}
.card:hover{transform:none;border-color:var(--gold)}
.step,.wp-steps li,.fl-point{border-top:1px solid var(--line-2)}
.ph{font-family:var(--sans);font-weight:600;border-style:solid;border-color:var(--line-2);color:var(--gold-2);letter-spacing:.2em}
.nb-grid figcaption b,.fl-fig figcaption b,.gl-item figcaption b,.lb figcaption b,.sc-services b,.ba-notes b,.cinfo dd{font-family:var(--serif);font-weight:300}
.fl-fig figcaption span,.gl-item figcaption span,.nb-grid figcaption span{font-family:var(--sans);font-weight:600;letter-spacing:.2em;color:var(--gold)}
.gl-item figcaption,.fl-fig figcaption{padding:18px 22px 22px}
.gl-grid{column-gap:26px}.gl-grid li{margin-bottom:26px}

/* forms */
form{background:var(--char-2);padding:clamp(26px,4vw,48px)}
label,.fs legend{font-family:var(--sans);font-weight:600;letter-spacing:.24em;color:#b9b3a9}
input,select,textarea{background:var(--char-0);border:1px solid var(--line-2);border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
.checks label{border-color:var(--line-2);color:#d6d0c6;font-weight:500}

/* fading silhouette: softer, longer gradients */
.fade-bottom{-webkit-mask-image:linear-gradient(#000 50%,#000c 72%,transparent 100%);mask-image:linear-gradient(#000 50%,#000c 72%,transparent 100%)}
.fade-left{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#0008 22%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#0008 22%,#000 55%)}
.gl-open img{filter:saturate(.92) brightness(.93);-webkit-mask-image:linear-gradient(#000 62%,#000d 80%,#0007 100%);mask-image:linear-gradient(#000 62%,#000d 80%,#0007 100%);transition:filter .5s,transform .8s}
.gl-open:hover img,.gl-open:focus-visible img{filter:none;transform:scale(1.015)}
.gl-open{background:var(--char-0)}
.sc-img img{-webkit-mask-image:linear-gradient(#000 55%,#000b 78%,transparent 100%);mask-image:linear-gradient(#000 55%,#000b 78%,transparent 100%)}
.gl-ph-work{background:#0e0f11d9;border-color:var(--line-2);color:var(--ink)}
.gl-ph-concept{background:#dcc497f0;border-color:var(--gold-2);color:#121315}
.gl-ph-home{background:#0e0f11d9;border:1px solid var(--gold);color:var(--gold-2)}

/* lightbox */
.lb{background:#0e0f11f5}
.lb-btn,.lb-close{background:#121315cc;border-color:var(--line-2);color:var(--ink);font-family:var(--sans);font-weight:300}
.lb-btn:hover,.lb-close:hover,.lb-btn:focus-visible,.lb-close:focus-visible{background:var(--ink);color:var(--char)}

/* spin: keep mechanics, calmer frame */
.spin-btn{border-color:var(--gold-2);box-shadow:0 0 0 6px var(--char-2),0 10px 30px #0008}
.spin-result{font-family:var(--serif);font-weight:300}
.spin-result.win{color:var(--gold-2)}

/* footer */
footer{background:var(--char-0);padding:64px 0 48px;color:#9a948a;font-size:.82rem}
.fnav a{color:#b3ada3}
.credits,.credits a{color:#9a948a}

/* small-text contrast (AA) */
.cinfo .note,.nb-note,#trucks .door-cap,.lake .src,.spin-disclaimer,.wp-fine,.lb figcaption small,.lb .lb-count{color:#9a948a!important}

@media(max-width:700px){
  body{font-size:16px}
  .eyebrow{letter-spacing:.3em}
  .eyebrow::before{width:22px}
  .btn{padding:16px 24px;letter-spacing:.2em}
  h2{font-size:clamp(2rem,8.4vw,2.6rem)}
}

/* Meet David (about.html) */
.ab-hero{padding:clamp(130px,14vw,180px) 0 clamp(60px,7vw,100px);background:radial-gradient(ellipse 55% 60% at 25% 40%,#1c1d20 0%,transparent 65%),linear-gradient(#0e0f11,var(--char) 80%)}
.ab-hero-grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.ab-portrait{margin:0;position:relative}
.ab-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--gold);padding:10px;background:var(--char-0);box-shadow:0 30px 60px -30px #000}
.ab-portrait figcaption{margin-top:14px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.ab-intro h1{font-size:clamp(2.6rem,5.2vw,4.6rem);margin:18px 0 22px}
.ab-intro .lead{max-width:560px;color:#d9d3c9}
.ab-intro .ctas{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.ab-stats{padding:0;background:var(--char)}
.ab-strip{list-style:none;margin:0;padding:34px 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.ab-strip li{text-align:center;padding:6px 12px;border-left:1px solid var(--line)}
.ab-strip li:first-child{border-left:0}
.ab-strip b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;color:var(--gold-2)}
.ab-strip span{display:block;margin-top:10px;font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.ab-cols{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(30px,6vw,90px)}
.ab-side h2{margin-top:.8rem}
.ab-text{max-width:680px;padding-top:6px}
.ab-text p{color:#d9d3c9;margin:0 0 1.2em;font-size:1.04rem}
@media(max-width:860px){
  .ab-hero-grid,.ab-cols{grid-template-columns:1fr}
  .ab-portrait{max-width:380px}
  .ab-strip{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .ab-strip li:nth-child(3){border-left:0}
}