@font-face {
  font-family:ItalianPlate;
  src:url("assets/ItalianPlateNo2-Regular.ttf") format("truetype");
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:ItalianPlate;
  src:url("assets/ItalianPlateNo2-Demibold.ttf") format("truetype");
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:OpenSans;
  src:url("assets/OpenSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:OpenSans;
  src:url("assets/OpenSans-Semibold.ttf") format("truetype");
  font-weight:600;
  font-display:swap
}
:root {
  --navy:#0e2240;
  --ink:#111820;
  --paper:#fff;
  --surface:#fafafa;
  --accent:#ffc72c;
  --muted:#525b65;
  --line:#d8dde3;
  --body:OpenSans,Arial,sans-serif;
  --display:ItalianPlate,Arial,sans-serif;
  --caption-size:13px;
  --caption-print-size:10pt
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65
}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}
button {
  font:inherit
}
h1,h2,h3,p {
  margin:0
}
p+p {
  margin-top:16px
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:700;
  color:var(--navy)
}
h1,h2 {
  text-transform:uppercase
}
h1 {
  font-size:50px;
  line-height:1;
  letter-spacing:normal
}
h2 {
  font-size:50px;
  line-height:1;
  letter-spacing:normal
}
h3 {
  font-size:34px;
  line-height:1
}
.wrap {
  max-width:1320px;
  margin-inline:auto;
  padding-inline:64px
}
.masthead {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}
.identity {
  text-decoration:none;
  font:700 23px/1 var(--display);
  letter-spacing:.035em;
  color:var(--navy)
}
.identity span {
  display:block;
  font:400 11px/1.4 var(--body);
  letter-spacing:.05em;
  text-transform:none;
  margin-top:9px
}
.masthead nav {
  display:flex;
  gap:32px;
  font-size:12px
}
.masthead nav a {
  text-decoration:none
}
.masthead nav a:hover {
  text-decoration:underline
}
.hero {
  padding-top:64px;
  padding-bottom:48px
}
.eyebrow {
  font-size:10px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:normal;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:24px
}
.hero-grid {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:72px;
  align-items:start
}
.hero-intro {
  max-width:365px;
  padding-bottom:3px
}
.hero-intro>p:first-of-type {
  font-size:20px;
  line-height:1.55;
  color:var(--navy)
}
.secondary {
  color:var(--muted);
  font-size:15px;
  line-height:1.7
}
.accent-rule {
  display:block;
  width:48px;
  height:4px;
  background:var(--accent);
  margin-bottom:24px
}
.text-link {
  display:inline-flex;
  gap:24px;
  align-items:center;
  margin-top:24px;
  font-size:12px;
  font-weight:600
}
.hero-note {
  display:flex;
  gap:32px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:64px;
  font-size:var(--caption-size);
  letter-spacing:.035em;
  color:var(--muted)
}
.surface {
  background:var(--surface)
}
section.approach,section.experience,section.evidence {
  padding-block:88px
}
.section-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:96px
}
.section-intro {
  max-width:430px;
  margin-top:24px;
  font-size:15px;
  color:var(--muted)
}
.case {
  padding-top:5px
}
.case h3 {
  max-width:390px
}
.tabs {
  display:flex;
  gap:16px;
  margin-top:32px;
  border-bottom:1px solid var(--line)
}
.tabs button {
  border:0;
  border-bottom:3px solid transparent;
  background:none;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  padding:14px 0;
  cursor:pointer;
  min-height:48px
}
.tabs button[aria-selected=true] {
  color:var(--navy);
  border-bottom-color:var(--accent)
}
.case-panel {
  margin-top:24px;
  min-height:167px;
  font-size:14px;
  color:var(--muted);
  max-width:430px
}
.case-caption {
  margin-top:24px;
  font-size:10px;
  color:var(--muted)
}
.experience-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:96px
}
.experience-item {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:32px;
  padding-block:24px;
  border-bottom:1px solid var(--line)
}
.experience-item:first-child {
  padding-top:0
}
.experience-item h3 {
  font-size:27px
}
.experience-item small {
  display:block;
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  margin-top:8px
}
.experience-item p {
  font-size:14px;
  color:var(--muted)
}
.reading-list {
  list-style:none;
  padding:0;
  margin:40px 0 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px
}
.reading-list li {
  border-top:1px solid var(--line);
  padding-top:24px
}
.reading-list .eyebrow {
  margin-bottom:16px
}
.reading-list h3 {
  font-size:30px;
  line-height:1.16
}
.reading-list p {
  margin-top:16px;
  font-size:14px;
  color:var(--muted)
}
.reading-list a {
  text-decoration:none
}
.reading-list a:hover {
  text-decoration:underline
}
.quotation {
  padding-block:72px;
  background:var(--navy);
  color:#fff
}
.quotation blockquote {
  font:400 31px/1.35 var(--display);
  max-width:880px;
  margin:0
}
.quotation figcaption {
  margin-top:24px;
  font-size:var(--caption-size);
  line-height:1.8;
  color:#fff
}
.quotation .eyebrow {
  color:#fff
}
.application {
  padding-block:64px
}
.application .wrap {
  display:flex;
  gap:48px;
  justify-content:space-between;
  align-items:center
}
.application h2 {
  font-size:40px
}
.application p {
  font-size:13px;
  margin-top:12px;
  color:var(--muted)
}
.downloads {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border:1px solid var(--navy);
  text-decoration:none;
  font-size:12px;
  font-weight:600
}
.button.primary {
  background:var(--navy);
  color:#fff
}
.footer {
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  padding-block:24px;
  border-top:1px solid var(--line);
  font-size:var(--caption-size);
  color:var(--muted)
}
.footer-identity { display:grid; gap:6px; }
.footer-identity>span:first-child { color:var(--navy); font-weight:600; }
.footer-profiles { display:flex; flex-wrap:wrap; gap:0 24px; }
.footer-profiles a { display:inline-flex; align-items:center; min-height:44px; color:var(--navy); text-decoration:none; }
.footer-profiles a:hover { text-decoration:underline; }
:focus-visible {
  outline:2px solid var(--navy);
  outline-offset:5px
}
.quotation :focus-visible {
  outline-color:white
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  padding:12px;
  background:#fff;
  z-index:3
}
.skip:focus {
  top:12px
}
[hidden] {
  display:none!important
}
.logic {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  list-style:none;
  margin:28px 0 0;
  padding:0
}
.logic li {
  border-top:1px solid var(--line);
  padding-top:12px
}
.logic strong {
  display:block;
  font-size:11px;
  color:var(--navy)
}
.logic span {
  display:block;
  margin-top:8px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted)
}
@media(max-width:991px) {
  h1,h2 { font-size:40px; }
  h3 { font-size:28px; }
}
@media(max-width:850px) {
  .reading-list {
    grid-template-columns:1fr
  }
  .wrap {
    padding-inline:32px
  }
  .masthead nav {
    gap:20px
  }
  .hero-grid {
    gap:40px;
    grid-template-columns:1.35fr 1fr
  }
  .hero-intro>p:first-of-type {
    font-size:17px
  }
  .section-grid,.experience-grid {
    gap:48px
  }
  .tabs {
    gap:12px
  }
}
@media(max-width:620px) {
  .wrap {
    padding-inline:24px
  }
  .masthead {
    min-height:104px;
    align-items:flex-start;
    padding-top:24px;
    gap:18px;
    flex-direction:column;
    padding-bottom:24px
  }
  .masthead nav {
    gap:24px;
    font-size:11px;
    flex-wrap:wrap
  }
  .hero {
    padding-top:40px;
    padding-bottom:40px
  }
  .hero-grid,.section-grid,.experience-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .hero h1 {
    font-size:40px;
    line-height:1
  }
  .hero-intro {
    max-width:none
  }
  .hero-intro>p:first-of-type {
    font-size:18px
  }
  .hero-note {
    margin-top:40px;
    gap:16px;
    flex-wrap:wrap;
    line-height:1.5
  }
  .hero .eyebrow {
    max-width:260px
  }
  .hero-intro .accent-rule {
    margin-bottom:20px
  }
  section.approach,section.experience,section.evidence {
    padding-block:56px
  }
  .case-panel {
    min-height:180px
  }
  .experience-item {
    grid-template-columns:1fr;
    gap:16px
  }
  .reading-list {
    grid-template-columns:1fr;
    gap:32px
  }
  .quotation {
    padding-block:48px
  }
  .quotation blockquote {
    font-size:27px
  }
  .application .wrap {
    display:block
  }
  .downloads {
    margin-top:24px
  }
  .footer {
    display:block
  }
  .footer-profiles { margin-top:16px; }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
@media print {
  @page {
    size:A4;
    margin:16mm 17mm
  }
  body {
    font-size:10pt;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact
  }
  .wrap {
    padding-inline:0;
    max-width:none
  }
  .masthead {
    min-height:36px;
    padding:0;
    margin-bottom:24px
  }
  .masthead nav,.skip,.hero-note,.tabs {
    display:none
  }
  .hero {
    padding:0 0 32px
  }
  .hero h1 {
    font-size:48pt
  }
  .hero-grid {
    gap:24px;
    grid-template-columns:1.3fr 1fr
  }
  .hero-intro>p:first-of-type {
    font-size:11pt
  }
  .hero .secondary {
    font-size:9pt
  }
  .eyebrow {
    font-size:7pt;
    margin-bottom:12px
  }
  .text-link {
    font-size:8pt;
    margin-top:12px
  }
  .approach {
    break-before:page
  }
  .section-grid,.experience-grid {
    gap:32px
  }
  section.approach,section.experience,section.evidence {
    padding-block:30px
  }
  h2 {
    font-size:29pt
  }
  h3 {
    font-size:20pt
  }
  .section-intro,.experience-item p,.reading-list p {
    font-size:9pt
  }
  .case-panel[hidden] {
    display:block!important
  }
  .case-panel {
    min-height:0;
    font-size:9pt;
    margin-top:16px
  }
  .case-caption {
    font-size:7pt
  }
  .case h3 {
    font-size:21pt
  }
  .experience {
    break-before:page
  }
  .experience-item {
    gap:24px;
    padding-block:18px
  }
  .experience-item h3 {
    font-size:18pt
  }
  .evidence {
    break-before:page
  }
  .reading-list {
    gap:24px;
    margin-top:24px
  }
  .reading-list h3 {
    font-size:19pt
  }
  .quotation {
    padding:30px 24px;
    break-inside:avoid
  }
  .quotation blockquote {
    font-size:19pt
  }
  .quotation figcaption {
    font-size:var(--caption-print-size)
  }
  .application {
    padding-block:28px
  }
  .application h2 {
    font-size:27pt
  }
  .application p {
    font-size:9pt
  }
  .application .wrap {
    gap:24px
  }
  .downloads {
    gap:12px
  }
  .button {
    font-size:8pt;
    min-height:34px;
    padding:8px 12px
  }
  .footer {
    font-size:var(--caption-print-size);
    padding-block:16px
  }
  .masthead,.hero-grid,.experience-item,.reading-list li {
    break-inside:avoid
  }
}