/* Superstructure — site styles
   Palette and rules per the brand system: olive grounds, red reserved for action.
   Contrast-checked pairs only. Red is never type on olive. */

:root{
  --ground:#69614D;
  --ground-deep:#3F3A2E;
  --paper:#F0EEE8;
  --surface:#FFFFFF;
  --ink:#23201A;
  --muted:#6E6A60;
  --rule:#DDD9CF;
  --rule-soft:#E7E4DC;
  --identity-red:#EF4034;
  --action:#D93124;
  --action-hover:#B8241A;
  --mark-grey:#A8A9AD;

  --f-display:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gut:clamp(20px,4vw,56px);
  --maxw:1280px;
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--action); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.narrow{max-width:920px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.012em}
h1{font-size:clamp(38px,6.4vw,74px); font-weight:700; line-height:1.03; letter-spacing:-.024em}
h2{font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:-.02em}
h3{font-size:clamp(19px,2.1vw,24px); line-height:1.24; font-weight:600}
p{margin:0 0 1.1em; max-width:var(--measure)}
:is(h1,h2,h3)+p,:is(h1,h2,h3)+.lede{margin-top:20px}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(18px,2.1vw,22px); line-height:1.5; color:var(--ink); max-width:56ch}
.eyebrow{
  font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin:0 0 20px; max-width:none;
}
.on-dark .eyebrow{color:#CFC8B4}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--action); color:#fff; text-decoration:none;
  font-family:var(--f-body); font-size:15px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 42px; border:0; transition:background .16s ease;
}
.btn:hover{background:var(--action-hover)}
.btn-ghost{
  display:inline-block; text-decoration:none; padding:15px 38px;
  border:1.5px solid currentColor; font-size:15px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-family:var(--f-body);
}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.header-in{display:flex; align-items:center; gap:28px; padding:14px var(--gut); max-width:var(--maxw); margin:0 auto}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-decoration:none; margin-right:auto; min-width:0}
.nav-toggle{flex:0 0 auto}
.brand-logo{display:block; width:clamp(178px,17vw,232px); height:auto}
.brand-desc{font-family:var(--f-body); font-size:9.5px; font-weight:600; letter-spacing:.2em; color:var(--muted); line-height:1; padding-left:2px}
.foot-logo{display:block; width:212px; height:auto; margin-bottom:40px}
.nav{display:flex; gap:28px; align-items:center}
.nav a{font-size:15px; text-decoration:none; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--action)}
.nav a.nav-cta{
  background:var(--action); color:#fff!important; text-decoration:none; padding:13px 34px;
  font-size:13.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-bottom:0!important;
}
.nav a.nav-cta:hover{background:var(--action-hover)}
.nav-toggle{display:none; background:none; border:1px solid var(--rule); padding:10px 14px; font:inherit; font-size:14px; cursor:pointer}
@media(max-width:900px){
  .header-in{gap:14px}
  .brand{min-width:0}
  .brand-logo{width:150px}
  .brand-desc{font-size:8px; letter-spacing:.16em}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--rule); padding:8px var(--gut) 20px}
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--rule-soft)}
  .nav a.nav-cta{text-align:center; margin-top:14px; padding:16px}
  .nav-toggle{display:block}
}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,110px) 0}
.on-dark{background:var(--ground); color:#F4F1E9}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark p{color:#E4DFD2}
.on-deep{background:var(--ground-deep); color:#F4F1E9}
.on-deep h2,.on-deep h3{color:#fff}
.on-deep p{color:#DED9CC}
.sec-label{
  font-size:12px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--muted); padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:38px;
}
.on-dark .sec-label,.on-deep .sec-label{color:#CFC8B4; border-bottom-color:rgba(255,255,255,.22)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--ground-deep); color:#fff; padding:0; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.62}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(35,32,26,.93) 0%, rgba(35,32,26,.72) 42%, rgba(35,32,26,.20) 100%);
}
.hero-in{position:relative; z-index:2; padding:clamp(90px,15vw,180px) var(--gut) clamp(64px,9vw,110px)}
.hero h1{color:#fff; max-width:15ch}
.hero .lede{color:#E8E3D6; margin-top:26px; max-width:52ch}
.hero .eyebrow{color:#C9BFA6}

/* ---------- pillar grid ---------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.pillar{background:var(--paper); padding:32px 28px 34px}
.pillar .n{font-family:var(--f-display); font-size:13px; letter-spacing:.16em; color:var(--action); margin-bottom:18px; font-weight:500}
.pillar h3{margin-bottom:12px}
.pillar p{font-size:15.5px; color:var(--muted); max-width:none}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.top{align-items:start}
@media(max-width:860px){.split,.split.wide-left{grid-template-columns:1fr}}
.split figure{margin:0}
.split img{width:100%; aspect-ratio:4/3; object-fit:cover}
.split figure.natural img{aspect-ratio:auto; height:auto}

/* ---------- sectors ---------- */
.sectors{display:grid; grid-template-columns:repeat(6,1fr); gap:26px; margin-top:8px}
.sector{grid-column:span 2}
.sector:nth-child(4),.sector:nth-child(5){grid-column:span 3}
.sector:nth-child(4) img,.sector:nth-child(5) img{aspect-ratio:21/9}
@media(max-width:1000px){.sectors{grid-template-columns:repeat(2,1fr)}
  .sector,.sector:nth-child(4),.sector:nth-child(5){grid-column:span 1}}
@media(max-width:640px){.sectors{grid-template-columns:1fr}}
.sector{
  background:var(--surface); border:1px solid var(--rule); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; transition:border-color .16s ease, transform .16s ease;
}
.sector:hover{border-color:var(--action); transform:translateY(-3px)}
.sector img{width:100%; aspect-ratio:3/2; object-fit:cover}
.sector .body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.sector h3{font-size:20px; margin-bottom:10px}
.sector p{font-size:15px; color:var(--muted); max-width:none; flex:1}
.sector .go{margin-top:18px; font-size:13px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--action)}

/* ---------- capability list ---------- */
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:0 44px; margin-top:10px; list-style:none; padding:0}
.caps li{padding:19px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:16.5px}
.caps li b{display:block; font-family:var(--f-display); font-size:18.5px; font-weight:600; margin-bottom:5px; color:#fff}
.caps li span{color:#DED9CC; font-size:15.5px}

/* ---------- work gallery ---------- */
.work{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.work{align-items:start}
.work figure{margin:0; display:flex; flex-direction:column}
.work img{width:100%; height:auto; object-fit:cover}
.work figcaption{
  font-size:13px; letter-spacing:.04em; color:var(--muted); padding-top:10px;
}
.w-12{grid-column:span 12} .w-6{grid-column:span 6} .w-4{grid-column:span 4}
.w-12 img{aspect-ratio:21/9} .w-6 img{aspect-ratio:16/10} .w-4 img{aspect-ratio:4/3}
@media(max-width:900px){.w-4{grid-column:span 6} .w-12 img{aspect-ratio:16/9}}
@media(max-width:640px){.w-6,.w-4{grid-column:span 12}}

/* ---------- truecore strip ----------
   Clear space = 14.2% of placed logo width on all four sides (one circle diameter).
   Minimum placed width 180px. No box, no panel, plain ground. */
.tc{background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.tc-in{display:grid; grid-template-columns:1.4fr auto; gap:clamp(32px,6vw,90px); align-items:center}
@media(max-width:820px){.tc-in{grid-template-columns:1fr}}
.tc h2{font-size:clamp(24px,3vw,34px); margin-bottom:14px}
.tc p{font-size:16px; color:var(--muted)}
/* TRUECORE clear space = 14.2% of the PLACED LOGO WIDTH on all four sides.
   content-box + a calc from --tc-w is what keeps that exact: percentage padding
   resolves against the container, not the image, and with border-box it ate the logo. */
.tc-logo{
  --tc-w:clamp(250px,26vw,390px);
  box-sizing:content-box;
  display:block; margin:0;
  width:var(--tc-w);
  padding:calc(var(--tc-w) * .142);
}
.tc-logo img{width:100%; height:auto}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:20px}
.field label{display:block; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px; color:#EFEBDE}
.field input,.field textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:0;
}
.field textarea{min-height:140px; resize:vertical}
.detail{margin-bottom:26px}
.detail dt{font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:#CFC8B4; margin-bottom:6px}
.detail dd{margin:0; font-size:19px; font-family:var(--f-display); font-weight:600; color:#fff}
.detail dd a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}

/* ---------- footer ---------- */
.site-footer{background:var(--ground-deep); color:#D9D3C4; padding:clamp(48px,6vw,72px) 0 40px; font-size:15px}
.foot-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.16)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-top h4{font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:#A79E88; margin-bottom:16px; font-family:var(--f-body)}
.foot-top ul{list-style:none; padding:0; margin:0}
.foot-top li{margin-bottom:10px}
.foot-top a{text-decoration:none; color:#D9D3C4}
.foot-top a:hover{color:#fff; text-decoration:underline}
.foot-bottom{display:flex; flex-wrap:wrap; gap:14px 44px; padding-top:30px; font-size:13px; color:#9C937E}
.legal{max-width:70ch; line-height:1.6}
.credit{margin-left:auto; white-space:nowrap}
@media(max-width:760px){.credit{margin-left:0; white-space:normal}}
.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.skip:focus{position:fixed; width:auto; height:auto; clip:auto; clip-path:none; left:12px; top:12px; z-index:99; background:#fff; color:var(--ink); padding:12px 18px}

/* ---------- page hero (interior pages) ---------- */
.page-hero{position:relative; background:var(--ground-deep); color:#fff; overflow:hidden}
.page-hero .hero-media img{opacity:.48; object-position:center 42%}
.page-hero .hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(35,32,26,.93) 0%, rgba(35,32,26,.74) 48%, rgba(35,32,26,.30) 100%)}
.page-hero-in{position:relative; z-index:2; padding:clamp(78px,11vw,140px) var(--gut) clamp(56px,8vw,96px); max-width:var(--maxw); margin:0 auto}
.page-hero h1{font-size:clamp(34px,5.2vw,62px); max-width:17ch}
.page-hero .lede{color:#E8E3D6; max-width:54ch}
.page-hero .eyebrow{color:#C9BFA6}

/* ---------- stages ---------- */
.stages{list-style:none; margin:0; padding:0; counter-reset:stage}
.stage{display:grid; grid-template-columns:96px 1fr; gap:0 32px; padding:34px 0; border-top:1px solid var(--rule)}
.stage:last-child{border-bottom:1px solid var(--rule)}
.stage-n{font-family:var(--f-display); font-size:32px; font-weight:400; color:var(--action); line-height:1; letter-spacing:.02em}
.stage h3{margin-bottom:10px}
.stage p{color:var(--muted); font-size:16px}
.stage .resolved{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule);
  font-size:14.5px; color:var(--ink);
}
.stage .resolved b{font-weight:600; letter-spacing:.09em; text-transform:uppercase; font-size:11.5px; color:var(--action); display:block; margin-bottom:5px}
@media(max-width:640px){.stage{grid-template-columns:1fr; gap:12px} .stage-n{font-size:26px}}

/* ---------- two-order comparison ---------- */
.orders{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.2); margin-top:36px}
@media(max-width:760px){.orders{grid-template-columns:1fr}}
.order{background:var(--ground); padding:28px 26px 30px}
.order h3{font-size:19px; margin-bottom:6px}
.order .tag{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin-bottom:14px}
.order.usual .tag{color:#D9CFB6}
.order.ours .tag{color:#FF8C7F}
.order ol{margin:0; padding-left:20px; color:#E4DFD2; font-size:15.5px}
.order li{margin-bottom:7px}
.order li.key{color:#fff; font-weight:600}
.order p{font-size:14.5px; margin-top:16px; color:#CFC8B4}

figure.fig{margin:36px 0 0}
figure.fig svg{width:100%; height:auto; display:block; background:var(--surface); border:1px solid var(--rule); padding:22px}
figure.fig figcaption{margin-top:14px; font-size:14px; color:var(--muted); max-width:70ch}


/* ---------- full-width figure (the value/cost chart) ---------- */
.chart-intro{max-width:70ch}
.chart-intro h2{margin-bottom:4px}
figure.fig.wide{margin-top:40px}
figure.fig.wide svg{padding:clamp(20px,3vw,40px)}
figure.fig.wide figcaption{max-width:80ch; font-size:15px}


/* ---------- 404 link list ---------- */
.clean-links li{padding:14px 0; border-bottom:1px solid var(--rule); font-size:16.5px; color:var(--muted)}
.clean-links li:last-child{border-bottom:none}
.clean-links a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:2px solid var(--action)}
.clean-links a:hover{color:var(--action)}