/* 9.3 applicable rules, with colour roles isolated for 9.4. Layout is preserved. */
:root{--serif: 'DM Serif Display',Georgia,serif;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; scroll-padding-top: 30px;}
body{margin: 0px; background: var(--paper); color: var(--ink); font: 16px / 1.6 "DM Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased;}
a{color: inherit; text-decoration: none;}
h1, h2, h3, p{margin: 0px;}
h1, h2, h3{font-family: var(--serif); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1;}
h2{font-size: clamp(36px, 3.5vw, 48px);}
.wrap{width: calc(100% - 108px); max-width: 1212px; margin-inline: auto;}
.site-header{border-bottom: 1px solid var(--line);}
.header-inner{display: flex; align-items: center; justify-content: space-between; min-height: 114px; gap: 24px;}
.wordmark{font: 38px/1 var(--serif); letter-spacing: -1.7px; white-space: nowrap;}
.wordmark em{color: var(--brand);}
.header-inner nav{display: flex; gap: 34px; align-items: center; font-size: 14px;}
.header-inner nav a:hover{text-decoration: underline; text-underline-offset: 6px;}
.contact-link{color: var(--link);}
.contact-link span{margin-left: 16px; font-size: 22px;}
.hero{display: grid; grid-template-columns: 1fr 1.05fr; position: relative; min-height: 680px; align-items: center; padding-block: 60px 70px; gap: 25px;}
.hero-copy{position: relative; z-index: 1;}
.hero-copy > p{max-width: 440px; font-size: 19px; line-height: 1.6;}
.button{display: inline-flex; gap: 35px; align-items: center; background: var(--primary); color: var(--on-primary); padding: 12px 22px; margin-top: 28px; font-size: 16px;}
.button:hover{background: var(--primary-hover);}
.hero-copy .hero-note{font-size: 14px; margin-top: 18px;}
.hero-art{position: absolute; right: -22px; top: 18px; width: 55%; height: calc(100% + 125px); pointer-events: none; z-index: 2;}
.hero-art img{display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top;}
.foundation{background: var(--foundation); padding: 45px 0px 44px;}
.foundation .wrap{position: relative; z-index: 3;}
.foundation h2{max-width: 670px; margin-bottom: 17px;}
.foundation p{max-width: 590px; font-size: 18px; line-height: 1.6;}
.foundation .foundation-note{margin-top: 13px; font-size: 15px;}
.capabilities{padding-block: 72px 74px;}
.capabilities > h2{margin-bottom: 40px;}
.cap-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.cap-grid article{border-right: 1px solid var(--line); padding-right: 35px;}
.cap-grid article:last-child{border: 0px;}
.cap-grid svg{width: 80px; height: 65px; fill: none; stroke: rgb(135, 167, 183); stroke-width: 1.3; stroke-linejoin: round; margin-bottom: 24px;}
.cap-grid article:nth-child(2) svg{stroke: rgb(145, 171, 149);}
.cap-grid h3{font-size: 29px; margin-bottom: 15px;}
.cap-grid p{font-size: 17px; line-height: 1.6; max-width: 310px;}
.work-section{padding-top: 65px; border-top: 1px solid var(--line); padding-bottom: 65px; font-family: Arial, Helvetica, sans-serif;}
.contact-cta{text-align: center; border-block: 1px solid var(--line); padding-block: 55px;}
.contact-cta p{margin-top: 18px; font-size: 18px;}
.text-link{display: inline-block; margin-top: 17px; color: var(--link); font-size: 20px; border-bottom: 1px solid;}
.text-link span{padding-left: 8px;}
.site-footer{text-align: center; padding-block: 28px; font: 23px var(--serif);}
.site-footer em{color: var(--brand); font-style: normal;}
.skip{position: absolute; top: -80px; left: 20px; z-index: 10; background: var(--paper); padding: 12px;}
.skip:focus{top: 10px;}
a:focus-visible, button:focus-visible{outline: 2px solid var(--green); outline-offset: 5px;}
@media (min-width: 1450px){.hero-art{right: 0px;}}
@media (max-width: 900px){.wrap{width: calc(100% - 48px);}
.header-inner{min-height: 95px;}
.wordmark{font-size: 31px;}
.header-inner nav{gap: 22px; font-size: 13px;}
.hero{min-height: 590px; padding-block: 50px;}
.hero-copy > p{font-size: 17px; max-width: 350px;}
.hero-art{right: -15px; width: 53%; top: 55px; height: calc(100% + 60px);}
.foundation p{max-width: 520px;}
.cap-grid{gap: 24px;}
.cap-grid article{padding-right: 20px;}
.cap-grid h3{font-size: 25px;}
.cap-grid p{font-size: 16px;}}
@media (max-width: 650px){.header-inner{flex-wrap: wrap; gap: 18px; padding-block: 24px; min-height: 0px;}
.wordmark{font-size: 32px;}
.header-inner nav{width: 100%; justify-content: space-between; gap: 12px;}
.hero{display: flex; flex-direction: column; align-items: stretch; gap: 0px; padding-top: 40px; padding-bottom: 0px; min-height: 0px;}
.hero-copy > p{max-width: 450px;}
.hero-art{position: relative; right: auto; top: auto; width: 100%; height: 390px; margin-top: 20px; margin-bottom: -65px; z-index: 1;}
.hero-art img{object-position: center center;}
.foundation{padding-top: 42px; padding-bottom: 36px;}
.foundation .wrap{z-index: 2;}
.foundation h2{font-size: 34px; max-width: 330px;}
.foundation p{font-size: 17px;}
.capabilities{padding-block: 48px;}
.cap-grid{grid-template-columns: 1fr; gap: 27px;}
.cap-grid article{border-right: 0px; border-bottom: 1px solid var(--line); padding: 0px 0px 25px; display: grid; grid-template-columns: 65px 1fr; column-gap: 20px;}
.cap-grid svg{width: 58px; height: 52px; grid-row: 1 / 3; margin: 0px;}
.cap-grid h3{font-size: 27px; margin-bottom: 12px;}
.cap-grid p{max-width: 430px;}
.work-section{padding-top: 42px; padding-bottom: 45px;}
.contact-cta{padding-block: 40px;}
.contact-cta h2{font-size: 36px;}
.contact-cta p{font-size: 16px;}
.site-footer{font-size: 22px;}}
@media (max-width: 380px){.wrap{width: calc(100% - 36px);}
.header-inner nav{font-size: 12px;}
.contact-link span{margin-left: 5px;}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}}
@media print{.site-header, .contact-cta, .site-footer{display: none;}
.hero-art{display: none;}
.hero{min-height: 0px; display: block;}
.wrap{width: 100%;}
.work-section{border: 0px;}}
.site-header{background:var(--header)}
.contact-cta{background:var(--closing)}