/* =========================================================
   OUI DESIGN — SHARED STYLESHEET
   Universal nav, footer, typography, color tokens, components
   ========================================================= */

:root{
  --olive:#585945;
  --olive-soft:#7a7b63;
  --hot-olive:#b5bc7a;
  --olive-tint:#e9e8df;
  --cream:#f5f2ea;
  --ink:#24251b;
  --paper:#ffffff;
  --rule:rgba(88,89,69,0.18);
  --max:1320px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Kanit','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ----------- CUSTOM SCROLLBAR (hot olive) ----------- */
html{scrollbar-color:var(--hot-olive) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--hot-olive);border-radius:999px;
  border:3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{background:var(--olive)}

/* ----------- UNIVERSAL NAV ----------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 75px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  transition:padding .25s ease, background .25s ease;
}
.nav.solid{background:rgba(255,255,255,0.85)}
.brand{
  display:flex;align-items:center;gap:10px;
  line-height:0;
}
.brand-logo{
  height:44px;width:auto;display:block;
  transition:opacity .2s ease;
}
.brand:hover .brand-logo{opacity:.8}
/* legacy circle mark (kept for any one-off use) */
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  background:var(--olive);color:var(--cream);
  display:grid;place-items:center;font-weight:700;
  font-family:'Kanit',sans-serif;letter-spacing:0;
  font-size:14px;
}
.nav-links{display:flex;gap:36px}
.nav-links a{
  font-family:'Kanit',sans-serif;
  font-weight:400;letter-spacing:0.18em;
  text-transform:uppercase;font-size:12px;
  color:var(--olive-soft);
  position:relative;padding:6px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;
  height:1px;width:0;background:var(--olive);
  transition:width .3s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--olive)}
.nav-links a.active::after, .nav-links a:hover::after{width:100%}
/* active page link — bold, hot olive */
.nav-links a.active{color:var(--hot-olive);font-weight:700}
.nav-links a.active::after{background:var(--hot-olive)}
.nav-cta{
  font-family:'Kanit',sans-serif;font-size:12px;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--olive);
  color:var(--olive);border-radius:999px;
  transition:all .25s ease;
}
.nav-cta:hover{background:var(--olive);color:var(--cream)}

/* hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;border:none;background:transparent;cursor:pointer;padding:0;
}
.nav-toggle span{
  display:block;width:24px;height:2px;margin:0 auto;background:var(--olive);
  transition:transform .3s ease, opacity .2s ease;
}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-links-cta{display:none}  /* desktop uses the standalone .nav-cta */

/* ----------- PAGE HEADER (for non-home pages) ----------- */
.page-hero{
  min-height:62vh;background:var(--cream);
  padding:180px 75px 100px;
  display:flex;align-items:flex-end;position:relative;overflow:hidden;
}
.page-hero-inner{
  max-width:var(--max);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;
  position:relative;z-index:2;
}
.page-hero .crumb{
  font-family:'Kanit',sans-serif;
  text-transform:uppercase;letter-spacing:0.35em;
  font-size:12px;color:var(--hot-olive);margin-bottom:24px;
  display:flex;align-items:center;gap:14px;
}
.page-hero .crumb::before{
  content:"";display:inline-block;width:42px;height:1px;background:var(--hot-olive);
}
/* eyebrow type — bold across all pages */
.crumb, .tag, .hero-eyebrow, .t-eyebrow{font-weight:700}
.page-hero h1{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(36px,4vw,58px);line-height:1.05;
  letter-spacing:-0.01em;color:var(--olive);
}
.page-hero h1 em{font-style:normal;color:var(--olive)}
.page-hero .lede{
  font-family:'Kanit',sans-serif;
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.65;color:var(--olive-soft);
  max-width:440px;margin-left:auto;
  border-left:1px solid var(--olive);padding-left:24px;
}

/* ----------- TYPE UTILITY CLASSES (the Typography-page system) -----------
   Apply these on any page: .t-display (H1), .t-statement, .t-h2,
   .t-eyebrow, .t-lede, .t-body (05), .t-body-sm (05B), .t-body-lg (05C). */
.t-display{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(43px,6.3vw,97px);line-height:0.98;
  letter-spacing:-0.01em;color:var(--olive);
}
.t-statement{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(40px,5.5vw,80px);line-height:1.05;
  letter-spacing:-0.01em;color:var(--ink);
}
.t-h2{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(36px,4vw,58px);line-height:1.05;
  letter-spacing:-0.005em;color:var(--ink);
}
.t-display em,.t-statement em,.t-h2 em{font-style:normal;font-weight:400;color:var(--hot-olive)}
.t-eyebrow{
  font-family:'Kanit',sans-serif;text-transform:uppercase;letter-spacing:0.3em;
  font-size:12px;color:var(--olive);display:flex;align-items:center;gap:14px;
}
.t-eyebrow::before{content:"";display:inline-block;width:42px;height:1px;background:var(--olive)}
.t-lede{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(16px,1.3vw,20px);line-height:1.6;color:var(--olive-soft);
  max-width:520px;border-left:1px solid var(--olive);padding-left:24px;
}
.t-body{
  font-family:'Kanit',sans-serif;font-weight:300;font-size:19px;line-height:1.7;
  color:var(--olive-soft);max-width:560px;
}
.t-body + .t-body{margin-top:9px}
.t-body-sm{
  font-family:'Kanit',sans-serif;font-weight:300;font-size:15px;line-height:1.7;
  color:var(--olive-soft);max-width:560px;
}
.t-body-lg{
  font-family:'Kanit',sans-serif;font-weight:300;font-size:24px;line-height:1.7;
  color:var(--olive-soft);max-width:560px;
}
.t-nav{
  font-family:'Kanit',sans-serif;text-transform:uppercase;letter-spacing:0.18em;
  font-size:12px;color:var(--ink);
}
.t-marquee{
  font-family:'Kanit',sans-serif;text-transform:uppercase;letter-spacing:0.35em;
  font-size:14px;color:var(--olive);
}
.t-marquee .dot{opacity:.5;margin:0 6px}

/* ----------- MARQUEE STRIP ----------- */
.strip{
  background:var(--olive);color:#fff;
  padding:28px 75px;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);
}
.marquee{
  display:flex;gap:80px;
  font-family:'Kanit',sans-serif;
  font-size:14px;letter-spacing:0.35em;text-transform:uppercase;
  white-space:nowrap;
  animation:marquee 30s linear infinite;
}
.marquee span{opacity:.9}
.marquee .dot{color:var(--hot-olive);opacity:1}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ----------- EDITORIAL SECTIONS ----------- */
section.editorial{padding:140px 75px;background:var(--paper)}
section.editorial.alt{background:var(--cream)}
.ed-wrap{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ed-wrap.reverse .ed-image{order:2}
.ed-image{position:relative;overflow:hidden;border-radius:14px}
.ed-image img{
  width:100%;height:72vh;max-height:720px;object-fit:cover;
  border-radius:14px;filter:saturate(.95);
}
.ed-image .frame-num{
  position:absolute;top:-30px;left:-10px;
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:88px;color:var(--olive);opacity:.15;line-height:1;
}
.ed-text .tag{
  font-family:'Kanit',sans-serif;text-transform:uppercase;
  letter-spacing:0.3em;font-size:11px;color:var(--olive);
  margin-bottom:24px;display:flex;align-items:center;gap:12px;
}
.ed-text .tag::before{content:"";width:30px;height:1px;background:var(--olive)}
.ed-text h2{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(36px,4vw,58px);line-height:1.05;
  letter-spacing:-0.005em;color:var(--ink);margin-bottom:28px;
}
.ed-text h2 em{font-style:normal;font-weight:400;color:var(--hot-olive)}
.ed-text p{font-weight:300;font-size:19px;line-height:1.7;color:var(--olive-soft);max-width:480px}
.ed-text p + p{margin-top:9px}

/* ----------- STATEMENT BLOCK ----------- */
.statement{
  text-align:center;padding:160px 75px;background:var(--cream);position:relative;
}
.statement h2{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(36px,4vw,58px);line-height:1.05;
  letter-spacing:-0.005em;max-width:1100px;margin:0 auto;color:var(--olive);
}
.statement h2 em{
  color:var(--hot-olive);font-style:normal;font-weight:700;
}

/* ----------- FULL BLEED IMAGE ----------- */
.full-bleed{width:100%;height:80vh;max-height:760px;overflow:hidden}
.full-bleed img{width:100%;height:100%;object-fit:cover}

/* ----------- BUTTONS ----------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--olive);color:var(--cream);
  padding:18px 36px;border-radius:999px;
  font-family:'Kanit',sans-serif;text-transform:uppercase;
  letter-spacing:0.25em;font-size:13px;
  transition:all .3s ease;border:none;cursor:pointer;
}
.btn:hover{background:var(--ink)}
.btn .arrow{transition:transform .3s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:14px;
  background:transparent;color:var(--olive);
  padding:18px 36px;border-radius:999px;
  border:1px solid var(--olive);
  font-family:'Kanit',sans-serif;text-transform:uppercase;
  letter-spacing:0.25em;font-size:13px;
  transition:all .3s ease;cursor:pointer;
}
.btn-ghost:hover{background:var(--olive);color:var(--cream)}

/* ----------- CTA BLOCK ----------- */
.cta{background:var(--cream);padding:160px 75px;text-align:center}
.cta h2{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(36px,4vw,58px);line-height:1.05;
  max-width:1100px;margin:0 auto 40px;color:var(--ink);
  letter-spacing:-0.005em;
}
.cta h2 .yes{color:var(--hot-olive);font-style:normal;font-weight:700}

/* ----------- UNIVERSAL FOOTER ----------- */
footer{
  background:#ffffff;color:var(--ink);
  padding:80px 75px 75px;
}
.foot-wrap{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
}
.foot-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;line-height:0;
}
/* same logo treatment as the main menu */
.foot-logo{
  height:44px;width:auto;display:block;
  transition:opacity .2s ease;
}
.foot-brand:hover .foot-logo{opacity:.8}
.foot-cta{
  font-family:'Kanit',sans-serif;font-weight:300;
  font-size:clamp(20px,1.8vw,26px);line-height:1.2;
  color:var(--ink);max-width:360px;margin-bottom:18px;
}
.foot-cta .yes{color:var(--hot-olive)}
.foot-tag{
  font-family:'Kanit',sans-serif;font-weight:300;color:var(--ink);
  font-size:clamp(20px,1.8vw,26px);line-height:1.2;max-width:360px;
}
/* section headings — sentence case */
.foot-col h4{
  font-family:'Kanit',sans-serif;font-weight:500;
  font-size:16px;letter-spacing:0.01em;color:var(--ink);margin-bottom:18px;
}
/* links — all caps, like the main nav */
.foot-col a{
  display:block;font-family:'Kanit',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:0.18em;font-size:12px;
  color:var(--olive-soft);padding:8px 0;
  transition:color .2s ease;
}
.foot-col a:hover{color:var(--olive);text-decoration:underline;text-underline-offset:4px}

/* ----------- MOTION: TYPOGRAPHY REVEAL + IMAGE PARALLAX ----------- */
/* Gentle fade-up for typography. Hidden by default, revealed by partials.js
   as elements enter the viewport (above-the-fold = on-load fade-in). */
.page-hero .crumb, .page-hero h1, .page-hero .lede,
.intro-band h2, .intro-band p,
.ed-text .tag, .ed-text h2, .ed-text p,
.statement h2,
.about-band .tag, .about-band h2, .about-band p,
.featured-head h2, .featured-head .meta,
.phil-left .tag, .phil-left h3, .phil-right p,
.founder-text .tag, .founder-text h2, .founder-text p,
.about-statement h2, .about-statement p,
.services-intro h2, .services-intro p,
.connect-left .tag, .connect-left h2, .connect-left p,
.process-cta-wrap .tag, .process-cta-wrap h2, .process-cta-wrap p,
.work-feature-text .tag, .work-feature-text h3, .work-feature-text p,
.case-body .tag, .case-body h2, .case-body p, .case-meta .row,
.cta h2{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),
             transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.fx-in{opacity:1 !important;transform:none !important}

.parallax-img{will-change:transform}

/* slow zoom (Ken Burns) on hero background images */
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.14)}}

/* Accessibility: honor reduced-motion — show everything, no movement */
@media (prefers-reduced-motion:reduce){
  .page-hero .crumb, .page-hero h1, .page-hero .lede,
  .intro-band h2, .intro-band p,
  .ed-text .tag, .ed-text h2, .ed-text p,
  .statement h2,
  .about-band .tag, .about-band h2, .about-band p,
  .featured-head h2, .featured-head .meta,
  .phil-left .tag, .phil-left h3, .phil-right p,
  .founder-text .tag, .founder-text h2, .founder-text p,
  .about-statement h2, .about-statement p,
  .services-intro h2, .services-intro p,
  .connect-left .tag, .connect-left h2, .connect-left p,
  .process-cta-wrap .tag, .process-cta-wrap h2, .process-cta-wrap p,
  .work-feature-text .tag, .work-feature-text h3, .work-feature-text p,
  .case-body .tag, .case-body h2, .case-body p, .case-meta .row,
  .cta h2{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .parallax-img{transform:none !important}
  .page-hero::before{animation:none !important}
  .ed-img, .wc-img{animation:none !important}
}

/* ----------- RESPONSIVE ----------- */
@media (max-width:960px){
  .nav{padding:16px 40px}
  .nav-toggle{display:flex}
  .nav-cta{display:none}                 /* standalone CTA hidden; lives in dropdown */
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:8px 40px 22px;
    box-shadow:0 14px 24px rgba(36,37,27,0.06);
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{
    font-size:14px;letter-spacing:0.18em;padding:16px 0;
    border-bottom:1px solid var(--rule);
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-links-cta{display:block;color:var(--olive);font-weight:700;margin-top:6px}
  .page-hero{padding:140px 40px 70px;min-height:55vh}
  .page-hero-inner{grid-template-columns:1fr;gap:30px}
  .page-hero .lede{margin-left:0;padding-left:18px;max-width:none}
  .strip{padding:22px 40px}
  section.editorial{padding:90px 40px}
  .ed-wrap,.ed-wrap.reverse .ed-image{grid-template-columns:1fr;gap:36px;order:initial}
  .ed-image img{height:60vh}
  .statement{padding:100px 40px}
  .cta{padding:100px 40px}
  .cta h2 br{display:none}
  footer{padding-left:40px;padding-right:40px}
  .foot-wrap{grid-template-columns:1fr 1fr;gap:40px 22px}
  .foot-bottom{flex-direction:column;gap:12px}
}