@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* Colors */
  --od-900:#20261C; --od-700:#333D2B; --od-500:#4B5842; --od-300:#76816A; --od-100:#DCE0D3;
  --ink:#1A1917; --charcoal:#23211D; --steel:#6E6E66; --stone:#9B978B;
  --paper:#F5F2E9; --bone:#EDE8DA; --canvas:#D8CFBB; --khaki:#B0A585;
  --clay:#8F5B3D; --clay-deep:#6E4229;
  --text-secondary:#4E4B44; --text-muted:var(--steel);
  --surface-card:#FBF9F3; --surface-sunken:var(--bone);
  --border-default:#D4CDBC; --border-strong:var(--khaki); --border-on-dark:rgba(245,242,233,.25);

  /* Type */
  --font-display:'Oswald',sans-serif;
  --font-body:'Barlow',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);font-family:var(--font-body);color:var(--ink);}
a{color:var(--od-700);}
a:hover{color:var(--od-500);}
img{max-width:100%;display:block;}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500;color:var(--od-500);margin-bottom:14px;}
.eyebrow.on-dark{color:var(--khaki);}
.h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;line-height:1.08;}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}

/* NAV */
header.site-nav{display:flex;align-items:center;gap:32px;padding:0 40px;height:76px;background:var(--ink);position:sticky;top:0;z-index:50;}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:none;padding:0;}
.brand img{height:54px;}
.brand-text{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:600;color:var(--paper);line-height:1.3;text-align:left;}
.brand-text small{display:block;font-size:9px;letter-spacing:.22em;color:var(--khaki);font-weight:500;}
.site-nav nav{display:flex;gap:28px;margin-left:auto;}
.site-nav nav a{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:500;text-decoration:none;color:var(--bone);border-bottom:2px solid transparent;padding-bottom:4px;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;}
.site-nav nav a:hover{color:var(--khaki);}
.site-nav nav a.active{color:var(--khaki);border-bottom-color:var(--khaki);}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;padding:0;background:none;border:none;cursor:pointer;margin-left:auto;}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--bone);}

/* Buttons */
.btn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-weight:500;border-radius:0;cursor:pointer;transition:background .15s ease-out,color .15s ease-out;display:inline-block;text-decoration:none;text-align:center;}
.btn-md{font-size:13px;padding:12px 24px;}
.btn-lg{font-size:15px;padding:16px 32px;}
.btn-primary{background:var(--od-500);color:var(--paper);border:1px solid var(--od-500);}
.btn-primary:hover{background:var(--od-700);color:var(--paper);}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-secondary:hover{background:var(--ink);color:var(--paper);}
.btn-secondary-paper{background:transparent;color:var(--paper);border:1px solid var(--paper);}
.btn-secondary-paper:hover{background:var(--paper);color:var(--ink);}
.btn-dark{background:var(--ink);color:var(--paper);border:1px solid var(--ink);}
.btn-dark:hover{background:var(--charcoal);color:var(--paper);}

/* Stat */
.stat{border-top:2px solid var(--ink);padding-top:14px;}
.stat .val{font-family:var(--font-display);font-weight:600;font-size:44px;line-height:1;}
.stat .label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:500;margin-top:8px;color:var(--od-500);}

/* Tag */
.tag{display:inline-block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:500;padding:5px 10px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-strong);}

/* Form fields */
.field{display:block;font-family:var(--font-body);}
.field span{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;}
.field input, .field select, .field textarea{display:block;width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:15px;padding:11px 12px;background:#fff;color:var(--ink);border:1px solid var(--border-strong);border-radius:0;outline:none;}
.field textarea{resize:vertical;}

/* Sections */
section{padding:88px 40px;}
main[data-screen] section:first-child{padding-top:88px;}

/* Hero */
.hero{position:relative;height:660px;background:var(--ink);padding:0;overflow:hidden;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-scrim1{position:absolute;inset:0;background:rgba(32,38,28,.55);pointer-events:none;}
.hero-scrim2{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,25,23,.85),rgba(26,25,23,.1) 55%);pointer-events:none;}
.hero-content{position:absolute;left:40px;right:40px;bottom:64px;max-width:1120px;margin:0 auto;}
.hero-content h1{color:var(--paper);font-size:68px;max-width:760px;margin:0;}
.hero-content p{color:var(--bone);font-size:19px;line-height:1.55;margin:20px 0 28px;max-width:560px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* grid helpers */
.grid-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:72px;align-items:start;}
.grid-2-rev{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:72px;align-items:start;}
.grid-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.grid-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}

/* Featured / cards */
.feature-card{display:block;text-decoration:none;color:inherit;position:relative;height:520px;background:var(--ink);overflow:hidden;}
.feature-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feature-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,25,23,.85),rgba(26,25,23,0) 55%);pointer-events:none;}
.feature-caption{position:absolute;left:36px;bottom:36px;}
.feature-caption .fe{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500;color:var(--khaki);margin-bottom:10px;}
.feature-caption .ft{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:38px;color:var(--paper);}
.feature-caption .fm{font-size:14px;color:var(--bone);margin-top:8px;letter-spacing:.04em;}

.work-card{background:var(--surface-card);border:1px solid var(--border-default);cursor:pointer;overflow:hidden;text-decoration:none;color:inherit;display:block;}
.work-card .thumb{height:170px;overflow:hidden;background:var(--ink);}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;}
.work-card .body{padding:20px 20px 24px;border-top:2px solid var(--ink);}
.work-card .row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.work-card .name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:18px;}
.work-card .meta{font-size:13px;color:var(--text-muted);margin-top:8px;letter-spacing:.04em;}

/* Process rows */
.phase-row{display:grid;grid-template-columns:120px 1fr 2fr;gap:32px;padding:32px 0;border-top:2px solid var(--ink);align-items:start;}
.phase-row .n{font-family:var(--font-display);font-weight:600;font-size:34px;color:var(--od-500);letter-spacing:.08em;}
.phase-row .t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:22px;padding-top:6px;}
.phase-row .d{font-size:15px;line-height:1.65;color:var(--text-secondary);margin:0;padding-top:8px;}

.commit, .value-block, .diff-block{border-top:2px solid var(--ink);padding-top:18px;}
.value-block{border-top-color:var(--khaki);}
.commit .t, .diff-block .t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:20px;margin-bottom:10px;}
.value-block .t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:20px;color:var(--paper);margin-bottom:8px;}
.commit .d, .diff-block .d{font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0;}
.value-block .d{color:var(--od-100);font-size:14px;line-height:1.6;margin:0;}

/* Gallery modal / lightbox */
.modal-overlay{position:fixed;inset:0;background:rgba(26,25,23,.9);z-index:100;display:none;align-items:center;justify-content:center;padding:40px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--paper);max-width:900px;width:100%;max-height:85vh;overflow-y:auto;padding:32px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-head h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:20px;margin:0;}
.modal-close{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:12px;background:none;border:1px solid var(--border-strong);padding:8px 14px;cursor:pointer;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery-grid img{height:140px;width:100%;object-fit:cover;cursor:pointer;}
.lightbox{position:fixed;inset:0;background:rgba(26,25,23,.95);z-index:110;display:none;align-items:center;justify-content:center;padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;}

/* CTA band */
.cta-band{background:var(--od-700);padding:72px 40px;}
.cta-band .inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cta-band h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:34px;color:var(--paper);line-height:1.15;margin:0;}
.cta-band p{color:var(--od-100);font-size:16px;margin:10px 0 0;max-width:480px;line-height:1.6;}

/* Footer */
footer.site-footer{background:var(--ink);color:var(--bone);padding:56px 40px 32px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;align-items:start;}
.footer-grid img{height:84px;margin-bottom:18px;}
.footer-about{font-size:13px;line-height:1.7;max-width:340px;color:var(--bone);}
.footer-col-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--steel);margin-bottom:8px;}
.footer-contact{font-size:13px;line-height:1.8;}
.footer-contact a{color:var(--bone);text-decoration:none;display:block;}
.footer-contact .area{color:var(--steel);}
.footer-social{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--bone);text-decoration:none;}
.footer-nav{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.footer-nav a{color:inherit;text-decoration:none;cursor:pointer;background:none;border:none;padding:0;text-align:left;font:inherit;letter-spacing:inherit;text-transform:inherit;}
.footer-nonprofit{border:1px solid var(--border-on-dark);padding:24px;}
.footer-nonprofit .label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--khaki);margin-bottom:10px;}
.footer-nonprofit .title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:17px;color:var(--paper);margin-bottom:10px;}
.footer-nonprofit p{font-size:13px;line-height:1.6;color:var(--bone);margin:0 0 16px;}
.footer-nonprofit .give-btn{display:inline-block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-weight:500;font-size:13px;padding:12px 22px;background:var(--khaki);color:var(--ink);text-decoration:none;}
.footer-bottom{margin-top:40px;padding-top:16px;border-top:1px solid var(--border-on-dark);display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-display);color:var(--steel);flex-wrap:wrap;}

main[data-screen]{display:none;}
main[data-screen].active{display:block;}

@media (max-width: 900px){
  .site-nav{height:auto;padding:16px;}
  .nav-toggle{display:flex;}
  .site-nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;margin-left:0;gap:0;background:var(--ink);padding:8px 0;border-top:1px solid var(--border-on-dark);}
  .site-nav nav.open{display:flex;}
  .site-nav nav a{padding:14px 24px;border-bottom:none;width:100%;box-sizing:border-box;}
  .site-nav nav a.active{background:rgba(255,255,255,.06);}
  .hero{height:auto;padding-top:400px;}
  .hero-content{position:relative;left:0;right:0;bottom:0;padding:0 24px 40px;}
  .hero-content h1{font-size:40px;}
  section{padding:56px 24px;}
  .grid-2, .grid-2-rev{grid-template-columns:1fr;gap:32px;}
  .grid-stats, .grid-3, .grid-4, .grid-work{grid-template-columns:1fr;}
  .phase-row{grid-template-columns:1fr;gap:8px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .cta-band .inner{flex-direction:column;align-items:flex-start;}
}
