/* Detail pages share the homepage's compact, rectangular navigation. */
.detail-page { --panel:#171817; --hover:#292d29; --shell-pad:clamp(22px,2.5vw,42px); }
.site-header { display:grid; gap:8px; margin-bottom:8px; }
.site-masthead { display:grid; grid-template-columns:4fr 4fr 2fr 2fr; gap:8px; }
.site-masthead > * { min-width:0; background:var(--panel); padding:18px 22px; min-height:80px; display:flex; align-items:center; border-radius:0; }
.site-wordmark { gap:10px; font-size:25px; }
.site-wordmark img { flex:0 0 40px; width:40px; height:40px; }
.site-masthead .site-position { font:19px/1.2 sf-pro-display,sans-serif; letter-spacing:-.02em; }
.site-archive,.site-contact { font-size:14px; line-height:1.4; }
.site-contact { background:#292d29; }
.site-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.site-nav > a { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; min-height:48px; gap:8px; padding:10px 16px; font-size:14px; background:var(--panel); border-radius:0; }
.site-nav-number { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.site-nav > a[aria-current] { background:var(--fg); color:#131613; }
.site-nav > a[aria-current] .site-nav-number { color:#4c534c; }
.site-header a:hover { background:var(--hover); }
.site-nav > a[aria-current]:hover { background:#fff; }
.site-header a:focus-visible { outline:2px solid #fff; outline-offset:-4px; }

.detail-page .detail { margin:0; width:100%; min-width:0; }
.detail-page :is(.detail-intro,.text-panel,.hero,.related,.detail-photo,.case-photo,.case-facts>div,.contact-form,.draft,.process-step,.process-output,.contact-guide) { border-radius:0; }
.detail-page .detail > .detail-intro:first-child { margin-top:0; }
.detail-page .hero { max-height:560px; }
.detail-page .detail-intro { padding:var(--shell-pad); }
.detail-page .detail-intro h1 { font-size:clamp(36px,4.6vw,72px); max-width:1050px; line-height:1.07; }
.detail-page .detail-intro p { max-width:65ch; font-size:20px; line-height:1.5; }
.detail-page .footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 0 0; }
.detail-page .footer > * { padding:18px 22px; background:var(--panel); font-size:14px; line-height:1.4; }

/* About has a clear introduction, followed by people, scope and experience. */
.about-evidence .detail-intro {
  display:grid; grid-template-columns:2fr 1fr; gap:4px 8px;
  background:var(--bg); padding:0; margin:0;
}
.about-evidence .detail-intro > * { background:var(--panel); margin:0; min-width:0; }
.about-evidence .detail-intro > .case-step { grid-column:1; padding:24px var(--shell-pad) 0; margin:0; font-size:14px; }
.about-evidence .detail-intro h1 { grid-column:1; grid-row:2; padding:20px var(--shell-pad) 34px; font-size:clamp(42px,5.4vw,88px); letter-spacing:-.04em; line-height:1.05; max-width:none; }
.about-evidence .detail-intro p { grid-column:2; grid-row:1 / 3; padding:var(--shell-pad); margin:0; display:flex; align-items:flex-end; font-size:clamp(20px,1.8vw,28px); line-height:1.35; max-width:none; }
.about-evidence .case-composition { grid-template-columns:1fr 2fr; }
.about-evidence .text-panel { padding:var(--shell-pad); }
.about-evidence .about-person { display:flex; flex-direction:column; }
.about-evidence .about-person h2 { font-size:clamp(36px,3.5vw,54px); margin:20px 0; }
.about-evidence .text-panel p { font-size:17px; line-height:1.55; }
.about-evidence .about-person > a { margin-top:auto; padding-top:16px; width:fit-content; }
.about-evidence .about-scope h2 { font-size:clamp(30px,3.2vw,48px); line-height:1.12; }
.about-evidence .about-scope p { max-width:64ch; }
.about-experience { margin-top:8px; }
.about-experience > header { display:grid; grid-template-columns:1fr 2fr; gap:8px; padding:0; }
.about-experience > header > * { background:var(--panel); padding:20px var(--shell-pad); display:flex; align-items:center; }
.about-experience > header h2 { font-size:clamp(26px,2.8vw,40px); margin:0; }
.about-experience > div { margin-top:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.about-experience .text-panel { padding:0; gap:0; background:var(--panel); }
.about-case-brand { display:flex; align-items:center; gap:16px; min-height:90px; padding:18px 22px; border-bottom:4px solid var(--bg); }
.about-case-brand .index-brand-logo { width:48px; height:48px; flex-basis:48px; border-radius:0; }
.about-experience .text-panel .about-case-brand h3 { margin:0; font-size:28px; }
.about-experience .text-panel > :is(.case-step,p) { padding:0 22px; }
.about-experience .text-panel > .case-step { margin-top:18px; }
.about-experience .text-panel > p { margin:12px 0 20px; font-size:18px; }
.about-experience a > span:last-child { border-top:4px solid var(--bg); padding:14px 22px; min-height:48px; }
.about-mandate { display:grid; grid-template-columns:1fr 2fr; gap:8px; }
.about-mandate > .case-step { grid-column:1; }
.about-evidence .about-mandate > h2 { grid-column:1; grid-row:2; margin:12px 20px 0 0; font-size:clamp(30px,2.8vw,44px); line-height:1.12; }
.about-mandate .mandate-grid { grid-column:2; grid-row:1 / 3; gap:28px; }
.about-evidence .about-mandate .mandate-grid h3 { margin:0 0 16px; font-size:18px; }
.about-mandate .mandate-grid a { display:inline-block; font-size:14px; padding-bottom:3px; }

@media(max-width:1000px) {
  .site-masthead { grid-template-columns:1fr 1fr 1fr; }
  .site-position { display:none!important; }
  .site-nav > a { grid-template-columns:1fr; padding:12px; }
  .site-nav-number { display:none; }
  .about-evidence .detail-intro { grid-template-columns:3fr 2fr; }
  .about-evidence .case-composition { grid-template-columns:1fr 1.5fr; }
  .about-experience > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .about-case-brand { padding:16px; gap:10px; flex-wrap:wrap; }
  .about-experience .text-panel > :is(.case-step,p) { padding-inline:16px; }
  .about-evidence .about-experience .text-panel p { font-size:16px; }
  .about-mandate .mandate-grid { grid-template-columns:1fr; gap:26px; }
}
@media(max-width:656px) {
  .detail-page { --shell-pad:22px; }
  .site-masthead { grid-template-columns:1.4fr 1fr; }
  .site-masthead > * { min-height:64px; padding:12px 14px; }
  .site-wordmark { font-size:22px; gap:8px; }
  .site-wordmark img { flex-basis:32px; width:32px; height:32px; }
  .site-masthead .site-archive { display:none; }
  .site-contact { font-size:14px; }
  .site-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .site-nav > a { min-height:44px; padding:10px 12px; font-size:14px; }
  .detail-page .detail-intro h1 { font-size:36px; }
  .detail-page .detail-intro p { font-size:18px; line-height:1.45; }
  .about-evidence .detail-intro { grid-template-columns:1fr; row-gap:0; }
  .about-evidence .detail-intro > .case-step { padding-top:22px; }
  .about-evidence .detail-intro h1 { font-size:clamp(35px,9vw,54px); padding-block:20px 26px; }
  .about-evidence .detail-intro p { grid-column:1; grid-row:3; border-top:4px solid var(--bg); padding:20px 22px; }
  .about-evidence .case-composition { grid-template-columns:1fr; }
  .about-evidence .about-person h2 { font-size:40px; }
  .about-evidence .about-scope h2 { font-size:32px; }
  .about-experience > header { grid-template-columns:1fr; gap:0; }
  .about-experience > header > .case-step { padding-bottom:0; }
  .about-experience > header h2 { font-size:29px; }
  .about-experience > div { grid-template-columns:1fr; }
  .about-case-brand { flex-wrap:nowrap; }
  .about-experience .text-panel > :is(.case-step,p) { padding-inline:22px; }
  .about-evidence .about-experience .text-panel p { font-size:18px; }
  .about-mandate { grid-template-columns:1fr; gap:0; }
  .about-evidence .about-mandate > h2 { margin-bottom:28px; font-size:32px; }
  .about-mandate .mandate-grid { grid-column:1; grid-row:3; }
  .detail-page .footer { grid-template-columns:1fr 1fr; }
  .detail-page .footer > a[href^="mailto:"] { grid-column:1 / -1; grid-row:2; }
  .detail-page .footer > * { padding:15px; font-size:12px; overflow-wrap:anywhere; }
}
/* Inputs must read as editable surfaces within the dark panel. */
.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea{background:#0d0f0d;border:1px solid #747e74;border-radius:0;color:#edf0ed}
.contact-form :is(input,select,textarea):focus-visible{outline:2px solid #eef2ee;outline-offset:3px;border-color:#eef2ee}
.contact-form :is(input,textarea)::placeholder{color:#aeb5ae}
.contact-form .submit,.draft-actions .pill,.draft textarea{border-radius:0}
.contact-selection{line-height:1.5;font-size:15px}