:root{
  /* dawn (default): white + grey */
  --paper-rgb:255,255,255;
  --ink-rgb:31,41,55;
  --paper:#FFFFFF;
  --paper-2:#F4F4F5;
  --ink:#1F2937;
  --ink-60:rgba(31,41,55,.62);
  --ink-40:rgba(31,41,55,.38);
  --rule:rgba(31,41,55,.14);
  --red:#E8342A;
  --navy:#0A2E5C;
  --navy-60:rgba(10,46,92,.62);
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --max:1120px;
  --pad:clamp(20px, 5vw, 64px);
  --navh:108px;
}
/* dusk: the original warm paper look */
:root[data-theme="dusk"]{
  --paper-rgb:250,247,242;
  --ink-rgb:20,17,14;
  --paper:#FAF7F2;
  --paper-2:#F2EDE4;
  --ink:#14110E;
  --ink-60:rgba(var(--ink-rgb),.62);
  --ink-40:rgba(var(--ink-rgb),.38);
  --rule:rgba(var(--ink-rgb),.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(var(--ink-rgb),.055) 1px, transparent 1px);
  background-size:3px 3px;
}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:1}
a{color:inherit}
img{display:block; max-width:100%}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:20; background:transparent; border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease, backdrop-filter .3s ease}
header.nav.stuck{border-bottom-color:var(--rule); background:rgba(var(--paper-rgb),.86); backdrop-filter:blur(10px)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:18px; padding-bottom:18px}
.nav-mark img{height:72px; width:72px; display:block}
.nav-links{display:flex; align-items:center; gap:30px; font-size:14px; letter-spacing:.01em}
.nav-links a{text-decoration:none; color:var(--navy-60); transition:color .2s}
.nav-links a:hover{color:var(--navy)}
.nav-cta{text-decoration:none; font-size:14px; color:var(--navy); border:1px solid var(--navy); border-radius:999px; padding:8px 18px; transition:background .2s, color .2s}
.nav-cta:hover{background:var(--navy); color:var(--paper)}
.nav-right{display:flex; align-items:center; gap:14px}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background:transparent; color:var(--navy);
  border:1px solid var(--rule); cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover{background:rgba(var(--ink-rgb),.05); border-color:var(--navy)}
.theme-toggle svg{display:block}
/* dawn (default) -> show moon (click to go dusk) */
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
/* dusk -> show sun (click to go back to dawn) */
:root[data-theme="dusk"] .theme-toggle .i-sun{display:block}
:root[data-theme="dusk"] .theme-toggle .i-moon{display:none}
/* ---------- hamburger + drawer ---------- */
.nav-burger{
  display:none; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--rule); border-radius:10px;
  cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:border-color .2s ease, background .2s ease;
}
.nav-burger:hover{border-color:var(--navy)}
.nav-burger[aria-expanded="true"]{border-color:var(--navy); background:rgba(var(--ink-rgb),.04)}
.nav-burger span{
  display:block; width:20px; height:2px; background:var(--navy); border-radius:2px;
  transition:transform .28s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(var(--paper-rgb),.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .32s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
  pointer-events:none;
}
.nav-drawer.open{max-height:520px; opacity:1; pointer-events:auto}
.drawer-links{display:flex; flex-direction:column; padding:14px var(--pad) 4px}
.drawer-links a{
  padding:14px 2px; text-decoration:none; color:var(--navy);
  font-family:var(--serif); font-size:22px; letter-spacing:-.01em;
  border-bottom:1px solid var(--rule);
}
.drawer-links a:last-child{border-bottom:0}
.drawer-actions{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px var(--pad) 22px;
}
.drawer-actions .btn{flex:1 1 auto; text-align:center}

/* mobile + tablet: header is logo + burger only */
@media(max-width:900px){
  .nav-links, .nav-right{display:none}
  .nav-burger{display:inline-flex}
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:calc(-1 * var(--navh));
  padding-top:calc(var(--navh) + clamp(48px,9vw,104px));
  padding-bottom:clamp(72px,11vw,132px);
  min-height:clamp(580px,88vh,900px);
  display:flex; align-items:center;
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; z-index:-2; filter:grayscale(1) contrast(.9) brightness(1.02); opacity:.7; mix-blend-mode:normal}
:root[data-theme="dusk"] .hero-bg{filter:grayscale(1) sepia(.35) contrast(.92) brightness(1.02); opacity:.62; mix-blend-mode:multiply}
.hero-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(var(--paper-rgb),.6) 0%, rgba(var(--paper-rgb),.25) 22%, rgba(var(--paper-rgb),.25) 72%, rgba(var(--paper-rgb),.85) 96%, var(--paper) 100%),
    linear-gradient(94deg, rgba(var(--paper-rgb),.75) 0%, rgba(var(--paper-rgb),.45) 40%, rgba(var(--paper-rgb),.15) 68%, rgba(var(--paper-rgb),0) 100%);
}
:root[data-theme="dusk"] .hero-scrim{
  background:
    linear-gradient(to bottom, rgba(var(--paper-rgb),.55) 0%, rgba(var(--paper-rgb),0) 16%, rgba(var(--paper-rgb),0) 78%, rgba(var(--paper-rgb),.85) 96%, var(--paper) 100%),
    linear-gradient(94deg, rgba(var(--paper-rgb),.55) 0%, rgba(var(--paper-rgb),.32) 34%, rgba(var(--paper-rgb),0) 52%);
}
.hero > .wrap{width:100%; flex:1 1 auto}
.hero-in{max-width:620px; margin-left:0}
.hero-in h1{max-width:none; font-size:clamp(42px,6.2vw,72px)}
.hero-in .lede{max-width:45ch; font-size:clamp(17px,1.9vw,19.5px)}
.eyebrow{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40); margin-bottom:clamp(22px,4vw,34px)}
@media(max-width:900px){
  .hero{min-height:78vh; padding-bottom:clamp(120px,26vw,190px); align-items:flex-start}
  .hero-bg{object-position:88% center}
  .hero-in{max-width:none}
  .hero-scrim{
    background:linear-gradient(to bottom, rgba(var(--paper-rgb),.94) 0%, rgba(var(--paper-rgb),.92) 42%, rgba(var(--paper-rgb),.6) 66%, rgba(var(--paper-rgb),.34) 82%, rgba(var(--paper-rgb),.8) 95%, var(--paper) 100%);
  }
}
h1{
  font-family:var(--serif); font-weight:400; margin:0 0 26px;
  font-size:clamp(44px,8.2vw,86px); line-height:1.02; letter-spacing:-.02em; max-width:16ch;
}
h1 em{font-style:italic; color:var(--red); white-space:nowrap}
h1 .nobr{white-space:nowrap}
.lede{font-size:clamp(18px,2.1vw,21px); line-height:1.6; color:var(--ink-60); max-width:56ch; margin:0 0 38px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.btn{display:inline-block; text-decoration:none; font-size:15px; padding:13px 26px; border-radius:999px; border:1px solid var(--navy); background:var(--navy); color:var(--paper); transition:transform .18s ease, opacity .2s, background .2s, color .2s}
.btn:hover{transform:translateY(-2px); opacity:.9}
.btn.ghost{background:transparent; color:var(--navy)}
.btn.ghost:hover{background:var(--navy); color:var(--paper)}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; background:var(--paper-2); position:relative; z-index:1}
.ticker-track{display:flex; gap:0; width:max-content; animation:slide 38s linear infinite; padding:14px 0}
.ticker-track span{font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); padding:0 34px; white-space:nowrap}
.ticker-track span::after{content:"◆"; font-family:var(--sans); font-size:8px; margin-left:34px; vertical-align:middle; color:var(--red); opacity:.85}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .ticker-track{animation:none} }

/* ---------- sections ---------- */
section{padding-top:clamp(72px,10vw,124px); padding-bottom:clamp(72px,10vw,124px); position:relative; z-index:1}
.sec-label{display:flex; align-items:baseline; gap:14px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40); margin-bottom:clamp(30px,5vw,48px)}
.sec-label::after{content:""; flex:1; height:1px; background:var(--rule)}
h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.6vw,50px); line-height:1.12; letter-spacing:-.015em; margin:0 0 22px; max-width:22ch}
h3{font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:-.01em; margin:0 0 10px}
p{margin:0 0 18px}

/* about */
.about-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,6vw,80px); align-items:start}
.about-wordmark{width:min(100%,420px); margin-bottom:26px}
.about-note{font-size:15px; color:var(--ink-40); line-height:1.6; border-left:2px solid var(--red); padding-left:16px; max-width:34ch}
.about-body p{color:var(--ink-60); font-size:17.5px}
.about-body p:first-child{color:var(--navy); font-family:var(--serif); font-size:clamp(22px,2.8vw,28px); line-height:1.42}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* services */
.svc{border-top:1px solid var(--rule)}
.svc-row{display:grid; grid-template-columns:64px 1fr 1.4fr; gap:clamp(16px,4vw,44px); padding:clamp(26px,4vw,38px) 0; border-bottom:1px solid var(--rule); align-items:start; transition:background .25s ease, padding-left .25s ease}
.svc-row:hover{background:rgba(var(--ink-rgb),.025)}
.svc-num{font-family:var(--serif); font-size:20px; color:var(--red)}
.svc-row p{margin:0; color:var(--ink-60); font-size:16.5px}
.svc-row h3{margin:0; color:var(--navy)}
@media(max-width:760px){
  .svc-row{grid-template-columns:1fr; gap:8px}
  .svc-num{font-size:15px}
}

/* principles */
.principles{background:var(--ink); color:var(--paper)}
.principles .sec-label{color:rgba(var(--paper-rgb),.45)}
.principles .sec-label::after{background:rgba(var(--paper-rgb),.2)}
.principles h2{color:var(--paper)}
.pr-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px); margin-top:clamp(28px,4vw,44px)}
.pr-grid h3{color:var(--paper)}
.pr-grid p{color:rgba(var(--paper-rgb),.6); font-size:16px; margin:0}
.pr-item{border-top:1px solid rgba(var(--paper-rgb),.22); padding-top:20px}
@media(max-width:820px){ .pr-grid{grid-template-columns:1fr} }

/* careers */
.careers-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start}
.role{border-top:1px solid var(--rule); padding:20px 0; display:flex; justify-content:space-between; gap:20px; align-items:baseline}
.role:last-of-type{border-bottom:1px solid var(--rule)}
.role .r-name{font-family:var(--serif); font-size:21px; color:var(--navy)}
.role .r-meta{font-size:13.5px; color:var(--ink-40); white-space:nowrap}
@media(max-width:860px){ .careers-grid{grid-template-columns:1fr} }

/* contact */
.contact{text-align:center; padding-bottom:clamp(84px,11vw,140px)}
.contact h2{margin-left:auto; margin-right:auto; text-align:center; max-width:18ch}
.contact .lede{margin-left:auto; margin-right:auto; text-align:center}
.mail{
  display:inline-block; font-family:var(--serif); font-size:clamp(22px,3.6vw,38px);
  text-decoration:none; letter-spacing:-.02em; line-height:1.1; color:var(--navy);
  background-image:linear-gradient(var(--navy),var(--navy)); background-repeat:no-repeat;
  background-size:0% 2px; background-position:0 100%; transition:background-size .45s ease, color .3s ease;
}
.mail:hover{background-size:100% 2px; color:var(--navy)}

/* footer */
footer{border-top:1px solid var(--rule); padding:clamp(38px,5vw,54px) 0; position:relative; z-index:1}
.foot-in{display:flex; flex-wrap:wrap; gap:26px 40px; align-items:center; justify-content:space-between}
.crafted{height:44px; width:auto; margin-right:auto}
.foot-meta{font-size:13.5px; color:var(--ink-40); display:flex; flex-wrap:wrap; gap:10px; align-items:center; text-align:right; margin-left:auto}
.foot-meta a{text-decoration:none}
.foot-meta a:hover{color:var(--ink)}
.foot-meta .sep{color:var(--ink-40); opacity:.5}
@media(max-width:640px){
  .foot-in{flex-direction:column; align-items:flex-start; gap:16px}
  .crafted{margin-right:0; align-self:flex-start}
  .foot-meta{
    margin-left:0; text-align:left; justify-content:flex-start;
    flex-direction:column; align-items:flex-start; gap:6px;
  }
  .foot-meta .sep{display:none}
}

/* reveal */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }