:root { --navy:#163e56; --blue:#235b83; --ink:#252a2d; --muted:#53606a; --annotation:#8b4b08; --annotation-bg:#fff8e9; }
html { scroll-padding-top:7rem; }
.page { width:min(70rem,calc(100% - 4rem)); }
.review-bar { position:sticky; top:0; z-index:20; background:#13364b; color:#fff; border-bottom:1px solid #416074; font-size:.875rem; }
.review-inner { width:min(82rem,calc(100% - 3rem)); margin:auto; display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.8rem 0; }
.review-inner strong { font-weight:600; }
.review-subtitle { margin-left:1rem; color:#d4e2ea; }
.review-controls { display:flex; align-items:center; gap:1.25rem; }
.review-controls a { color:#fff; }
.review-controls button { font:inherit; font-weight:600; padding:.55rem .9rem; background:#fff; border:1px solid #fff; border-radius:4px; color:#163e56; cursor:pointer; }
button:focus-visible,summary:focus-visible { outline:3px solid #2b709a; outline-offset:4px; }
.change-note { display:flex; gap:1.25rem; padding:1rem 1.2rem; margin:1.5rem 0 0; background:var(--annotation-bg); border-left:3px solid #c78429; font-size:.875rem; color:#70400b; line-height:1.55; }
.change-note p { margin:0; max-width:57rem; }
.change-label { flex:0 0 8.5rem; text-transform:uppercase; font-weight:700; font-size:.8125rem; letter-spacing:.04em; }
body:not(.annotated) .change-note { display:none; }
.intro { grid-template-columns:minmax(0,1fr) 14rem; gap:4rem; padding:3.25rem 0 3rem; }
h1 { font-size:clamp(2.6rem,4.5vw,4rem); line-height:1.13; }
h1 span { color:var(--blue); }
.eyebrow { margin-bottom:1rem; font-size:.875rem; font-weight:600; letter-spacing:.035em; color:var(--blue); }
.intro-copy { font-size:1.125rem; max-width:43rem; }
.intro-copy p + p { color:var(--muted); }
.portrait { padding-top:2.75rem; }
.portrait p { font-size:.9375rem; font-weight:600; margin-top:1rem; }
.portrait p span { display:block; color:var(--muted); font-size:.875rem; font-weight:400; margin-top:.2rem; }
.cta-row { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.8rem; font-size:1rem; }
.primary-button { display:inline-flex; gap:1.6rem; align-items:center; justify-content:center; min-height:3rem; padding:.7rem 1.1rem; background:var(--blue); border:1px solid var(--blue); color:#fff; border-radius:4px; text-decoration:none; font-weight:600; }
.primary-button:hover { background:#174363; }
.experience { padding-bottom:1.5rem; }
.logos { gap:3rem; padding:1.5rem 0; }
.concept-section { border-top:1px solid var(--line); padding-bottom:3.5rem; }
.section-heading { padding-top:3rem; margin-bottom:2rem; }
.section-heading h2 { font-family:Georgia,serif; font-size:clamp(2rem,3.1vw,2.65rem); line-height:1.2; font-weight:400; letter-spacing:-.02em; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; }
.service-grid article { padding-top:1.4rem; border-top:2px solid var(--line); }
.service-number { color:var(--blue); font-size:.875rem; }
.service-grid h3 { font-size:1.25rem; line-height:1.4; margin:.5rem 0 .65rem; }
.service-grid p { color:var(--muted); }
.deliverable { font-size:.9375rem; }
.deliverable strong { display:block; color:var(--ink); font-size:.875rem; }
.mockup-footer { font-size:.8125rem; color:var(--muted); padding-bottom:2rem; }
.section-lead { max-width:46rem; color:var(--muted); margin-top:-.6rem; margin-bottom:2rem; font-size:1.125rem; }
.approach-panel { display:grid; grid-template-columns:.9fr 1.3fr; background:#eff5f9; border:1px solid #d6e4ec; }
.approach-intro { padding:2rem; }
.approach-intro h3 { font-family:Georgia,serif; font-weight:400; font-size:1.8rem; line-height:1.3; margin:1rem 0; }
.approach-intro p { color:var(--muted); }
.draft-tag { display:inline-block; color:#425b6a; border:1px solid #a9c0ce; border-radius:3px; padding:.2rem .5rem; font-size:.8125rem; line-height:1.5; font-weight:600; }
.approach-steps { margin:0; padding:2rem 2rem 2rem 3.5rem; background:#f8fbfd; }
.approach-steps li { padding:0 0 1.2rem .4rem; }
.approach-steps li:last-child { padding-bottom:0; }
.approach-steps li::marker { color:var(--blue); font-weight:600; }
.approach-steps span { display:block; color:var(--muted); margin-top:.2rem; font-size:1rem; }
details > summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
details > summary::-webkit-details-marker { display:none; }
details > summary > span[aria-hidden] { color:var(--blue); font-size:1.6rem; flex-shrink:0; transition:transform .15s; }
details[open] > summary > span[aria-hidden] { transform:rotate(45deg); }
.example { border:1px solid var(--line); margin-top:1rem; }
.example summary { padding:1rem 1.4rem; font-weight:600; }
.example-body { padding:0 1.4rem 1.5rem; }
.example-body > p:not(.draft-tag) { color:var(--muted); }
.example-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; margin-top:1.5rem; }
.example h4 { margin:0 0 .4rem; font-size:1rem; }
.example-grid p { color:var(--muted); font-size:1rem; }
.example-footnote { margin-top:1.2rem; font-size:.875rem; }
.proof-strip { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.5rem 0; margin-bottom:2rem; }
.proof-strip strong { display:block; color:var(--blue); font-family:Georgia,serif; font-weight:400; font-size:1.65rem; }
.proof-strip span { color:var(--muted); font-size:.875rem; }
.featured-case { border-left:3px solid var(--blue); padding:1rem 0 1rem 1.5rem; margin-bottom:2.5rem; }
.featured-case h3 { font-size:1.6rem; font-weight:500; margin-bottom:1.3rem; }
.case-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; }
.case-grid h4 { font-size:.9375rem; margin:0 0 .5rem; }
.case-grid p { font-size:1rem; color:var(--muted); }
.case-grid .evidence-note { font-size:.8125rem; }
.retained-projects { margin-left:11rem; }
.retained-projects p { color:var(--muted); }
.draft-disclosure { color:var(--muted); font-size:.9375rem; }
.article-list { border-top:1px solid var(--line); }
.article-list details { border-bottom:1px solid var(--line); }
.article-list summary { padding:1.25rem 0; font-size:1.2rem; font-weight:500; }
.article-list small { display:block; font-size:.8125rem; color:var(--blue); font-weight:400; margin-bottom:.35rem; }
.article-list details > div { max-width:50rem; padding:0 2rem 1.25rem 0; color:var(--muted); font-size:1rem; }
.contact-concept { border-top:1px solid var(--line); }
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:3rem 0 4rem; }
.contact-inner h2 { font-family:Georgia,serif; font-size:2.5rem; line-height:1.2; font-weight:400; }
.contact-inner .contact-email { display:block; margin:1rem 0; font-size:1rem; overflow-wrap:anywhere; }
.role-note { color:var(--muted); font-size:.9375rem; }
@media(max-width:900px) {
 .review-subtitle { display:none; }
 .intro { grid-template-columns:minmax(0,1fr) 11rem; gap:2rem; }
 .case-grid { grid-template-columns:1fr; gap:1.25rem; }
 .retained-projects { margin-left:0; }
 .contact-inner { gap:2rem; }
 .approach-panel { grid-template-columns:1fr; }
 .proof-strip { gap:1rem; }
 .proof-strip strong { font-size:1.4rem; }
}
@media(max-width:640px) {
 html { scroll-padding-top:9rem; }
 .page { width:calc(100% - 2.5rem); }
 .review-inner { width:calc(100% - 2rem); align-items:flex-start; flex-direction:column; gap:.4rem; padding:.65rem 0; }
 .review-controls { width:100%; justify-content:space-between; gap:.7rem; }
 .review-controls button { padding:.45rem .65rem; }
 .site-header { padding:1.3rem 0 1rem; gap:.4rem; }
 nav { width:100%; justify-content:space-between; gap:.4rem; font-size:.875rem; }
 .change-note { flex-direction:column; gap:.35rem; padding:.9rem; }
 .change-label { flex-basis:auto; }
 .intro { display:flex; flex-direction:column; gap:1.5rem; padding:2rem 0; }
 h1 { font-size:2.7rem; }
 .intro-copy { font-size:1.0625rem; }
 .portrait { padding:0; display:flex; align-items:center; gap:1rem; }
 .portrait .headshot { width:5rem; margin:0; }
 .portrait p { margin:0; }
 .logos { grid-template-columns:1fr 1fr; gap:1.5rem 2rem; }
 .logos img { max-width:12rem; }
 .service-grid,.proof-strip,.contact-inner,.example-grid { grid-template-columns:1fr; }
 .service-grid { gap:1.4rem; }
 .section-heading { padding-top:2rem; }
 .section-heading h2,.contact-inner h2 { font-size:2rem; }
 .approach-intro { padding:1.4rem; }
 .approach-steps { padding:1.4rem 1.4rem 1.4rem 2.8rem; }
 .proof-strip { gap:1rem; }
 .proof-strip strong { font-size:1.6rem; }
 .featured-case { padding-left:1rem; }
 .article-list summary { font-size:1.1rem; }
 .text-section { grid-template-columns:1fr; gap:1rem; }
 .contact-inner { padding:2rem 0 3rem; }
 .concept-section { padding-bottom:2.5rem; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }
@media print { .review-bar { position:static; } .primary-button { color:var(--blue); background:#fff; } }
.short-version .page { width:min(62rem,calc(100% - 4rem)); }
.short-version .intro { grid-template-columns:minmax(0,1fr) 12rem; gap:2.5rem; padding:3.5rem 0 2.5rem; }
.short-version h1 { font-size:clamp(2.5rem,4.5vw,3.5rem); }
.short-version .intro-copy { max-width:38rem; font-size:1.125rem; }
.short-version .intro-copy .primary-button { margin-top:.5rem; font-size:1rem; }
.short-version .projects p { color:var(--muted); }
.short-version .role-note { margin-top:.5rem; }
.short-version .change-note { margin:0 0 1rem; padding:.7rem 1rem; }
.short-version .site-header + main > .change-note { margin-top:1rem; }
.short-version .review-bar { position:static; }
@media(max-width:640px) {
 .short-version .page { width:calc(100% - 2.5rem); }
 .short-version .intro { display:grid; grid-template-columns:1fr; padding:2.25rem 0 2rem; gap:1.5rem; }
 .short-version .intro > .headshot { width:6rem; }
 .short-version .review-inner { flex-direction:row; align-items:center; }
 .short-version .review-controls { width:auto; }
}

/* Supporting project page; retain the homepage's typography and spacing. */
.case-study { max-width:45rem; margin-inline:auto; padding:2rem 0 3.5rem; }
.case-back { font-size:.9375rem; margin-bottom:2.5rem; }
.case-lead { font-size:1.1875rem; color:var(--muted); }
.case-study article > section { margin-top:2.5rem; }
.case-study h2 { font-size:1.25rem; line-height:1.4; margin-bottom:1rem; }
.case-contact { border-top:1px solid var(--line); padding-top:2rem; }