/* Harris Timberworks — site design system */
:root{
  --navy:#232B36; --navy-deep:#1A212B; --ink:#14181F;
  --bronze:#B19A7B; --bronze-soft:#C9B394; --bronze-deep:#8a7350;
  --paper:#F4F1EB; --paper-dim:#E9E4DA;
  --disp:"Newsreader",serif; --body:"Archivo",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* header (solid, ink-on-paper) */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:18px 34px;background:rgba(244,241,235,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(20,24,31,.07)}
.site-head .mark{height:38px;filter:brightness(.15)}
.nav{display:flex;gap:28px;align-items:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.nav a{opacity:.8}
.nav a:hover,.nav a.on{opacity:1;color:var(--bronze-deep)}
.nav .cta{border:1px solid var(--ink);padding:10px 18px;border-radius:2px;opacity:1}
.nav .cta.primary{background:var(--bronze);border-color:var(--bronze);color:var(--ink);font-weight:500}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:1.5px;background:var(--ink);margin:6px 0;transition:transform .3s,opacity .3s}
@media(max-width:900px){.nav{display:none}.burger{display:block}}
.mnav{position:fixed;inset:0;z-index:60;background:var(--navy-deep);color:var(--paper);display:none;
  flex-direction:column;justify-content:center;padding:8vw;gap:6px}
.mnav.open{display:flex}
.mnav a{font-family:var(--disp);font-size:clamp(28px,8vw,44px);font-weight:300;padding:10px 0;border-bottom:1px solid rgba(244,241,235,.08)}
.mnav .mclose{position:absolute;top:22px;right:28px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;background:none;border:none;color:var(--paper);cursor:pointer;padding:10px}
.mnav .mphone{margin-top:30px;font-family:var(--body);font-size:14px;letter-spacing:.14em;color:var(--bronze-soft)}

/* page scaffold */
.page-hero{padding:7vh 8vw 4vh;max-width:1200px}
.page-hero.split{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:6vw;align-items:center;padding:7vh 8vw 2vh}
.page-hero.split + section.band{padding-top:2vh}
.page-hero.split .pic{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3;background:var(--navy)}
.page-hero.split .pic img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.page-hero.split{grid-template-columns:1fr;gap:34px;padding-top:7vh}.page-hero.split .pic{order:2}}
.k{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:16px}
h1.page{font-family:var(--disp);font-weight:300;font-size:clamp(34px,5vw,60px);line-height:1.06;max-width:820px}
.page-hero .lede{margin-top:24px;font-size:16px;line-height:1.8;opacity:.78;max-width:640px}
section.band{padding:7vh 8vw}
a[href^="tel:"]{white-space:nowrap}
h2.sec{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3.2vw,42px);line-height:1.12;max-width:720px}
.band.dark{background:var(--navy);color:var(--paper)}
.band.dark .k{color:var(--bronze-soft)}
.band.dim{background:var(--paper-dim)}

/* grids */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pcard{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3;background:var(--navy)}
.pcard.tall{aspect-ratio:3/4}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.pcard:hover img{transform:scale(1.04)}
.pcard .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,31,.72) 0%,transparent 46%)}
.pcard .tag{position:absolute;left:22px;bottom:20px;color:var(--paper)}
.pcard .tag .t1{font-family:var(--disp);font-size:21px;font-weight:400}
.pcard .tag .t2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-top:5px}

/* process steps */
.steps-v{margin-top:28px;max-width:860px}
.step-v{display:grid;grid-template-columns:90px 1fr;gap:26px;padding:30px 0;border-top:1px solid rgba(20,24,31,.1)}
.step-v .n{font-family:var(--disp);font-size:26px;color:var(--bronze-deep)}
.step-v .n small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--body);opacity:.6;margin-top:6px}
.step-v h3{font-family:var(--disp);font-weight:400;font-size:22px;margin-bottom:8px}
.step-v p{font-size:14.5px;line-height:1.7;opacity:.75;max-width:620px}

/* role cards */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:900px){.roles{grid-template-columns:1fr}}
.role{background:var(--paper);border:1px solid rgba(20,24,31,.1);border-radius:2px;padding:34px 28px}
.band.dark .role{background:rgba(244,241,235,.04);border-color:rgba(244,241,235,.12)}
.role h3{font-family:var(--disp);font-weight:400;font-size:23px;margin-bottom:12px}
.role p{font-size:14px;line-height:1.7;opacity:.75}
.role ul{list-style:none;margin-top:16px;font-size:13.5px;line-height:2}
.role ul li::before{content:"—";color:var(--bronze);margin-right:10px}

/* buttons */
.btn{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:2px;margin-top:34px}
.btn.b1{background:var(--bronze);color:var(--ink);font-weight:500}
.btn.b2{border:1px solid currentColor;margin-left:12px}
@media(max-width:640px){.btn.b2{margin-left:0 !important;margin-top:14px !important}}

/* forms */
.formwrap{max-width:720px;margin-top:44px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:22px 0 8px;color:var(--bronze-deep)}
input,select,textarea{width:100%;padding:14px 16px;font-family:var(--body);font-size:15px;font-weight:300;
  background:#fff;border:1px solid rgba(20,24,31,.14);border-radius:2px;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.rolepick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
@media(max-width:760px){.rolepick{grid-template-columns:repeat(2,1fr)}}
.rolepick button{padding:16px 10px;font-family:var(--body);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  background:#fff;border:1px solid rgba(20,24,31,.14);border-radius:2px;cursor:pointer;color:var(--ink)}
.rolepick button.on{background:var(--navy);color:var(--paper);border-color:var(--navy)}

/* footer */
footer{background:var(--navy-deep);color:var(--paper);padding:9vh 8vw 6vh;font-size:13.5px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
footer .mark{height:44px;margin-bottom:22px}
footer .nap{line-height:1.9;opacity:.72}
footer h5{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
footer ul{list-style:none;line-height:2.1;opacity:.78}
footer .legal{margin-top:60px;padding-top:24px;border-top:1px solid rgba(244,241,235,.08);display:flex;justify-content:space-between;font-size:11.5px;opacity:.45;flex-wrap:wrap;gap:10px}

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

/* stories */
.video-embed{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:2px;overflow:hidden;margin-top:48px}
.video-embed iframe,.video-embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video-embed .coming{position:absolute;left:24px;bottom:20px;color:var(--paper);font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:rgba(20,24,31,.55);padding:8px 14px;border-radius:2px}
.story-prose{max-width:720px;margin-top:40px}
.story-prose p{font-size:16px;line-height:1.85;opacity:.82;margin-bottom:22px}
.story-prose blockquote{font-family:var(--disp);font-size:22px;font-weight:300;line-height:1.5;border-left:2px solid var(--bronze);padding-left:26px;margin:34px 0}
.story-prose blockquote cite{display:block;font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-style:normal;opacity:.6;margin-top:12px}
.credits{margin-top:44px;padding-top:26px;border-top:1px solid rgba(20,24,31,.12);display:flex;gap:44px;flex-wrap:wrap}
.credits .c .l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:6px}
.credits .c .v{font-family:var(--disp);font-size:19px}
.band.dark .credits{border-top-color:rgba(244,241,235,.14)}
.band.dark .credits .c .l{color:var(--bronze-soft)}

/* faq */
.faq{max-width:820px;margin-top:40px}
.faq details{border-top:1px solid rgba(20,24,31,.12);padding:6px 0}
.faq details:last-child{border-bottom:1px solid rgba(20,24,31,.12)}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:400;font-size:21px;padding:20px 36px 20px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--bronze-deep);font-weight:300}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 24px;font-size:15px;line-height:1.8;opacity:.78;max-width:680px}

/* google reviews */
.gstars{font-size:17px;letter-spacing:.3em;color:var(--bronze);margin-top:28px}
.gq{max-width:720px;font-family:var(--disp);font-size:22px;font-weight:300;line-height:1.5;border-left:2px solid var(--bronze);padding-left:26px;margin:26px 0 0}
.gq cite{display:block;font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-style:normal;opacity:.6;margin-top:12px}

/* two-column text + photo bands */
.duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:5vw;align-items:center}
.duo .pic{overflow:hidden;border-radius:2px}
.duo .pic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.duo.flip .pic{order:-1}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:30px}.duo.flip .pic{order:2}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(16,19,25,.94);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:88vw;max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 60px rgba(0,0,0,.5);border-radius:2px}
.lb .lb-cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--paper);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;white-space:nowrap}
.lb button{position:absolute;background:none;border:none;color:var(--paper);cursor:pointer;font-size:40px;font-weight:300;opacity:.6;padding:16px;line-height:1}
.lb button:hover{opacity:1}
.lb .lb-close{top:14px;right:18px;font-size:30px}
.lb .lb-prev{left:8px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:8px;top:50%;transform:translateY(-50%)}

.socials{display:flex;gap:18px;margin:36px 0 0}
.socials a{color:var(--paper);opacity:.45;transition:opacity .3s}
.socials a:hover{opacity:1}
.socials svg{width:19px;height:19px;display:block}