@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {--paper: #fff; --ink: #0a1931; --muted: #55617c; --line: #e1e7f3; --accent: #3e66c6; --blue-light: #6f93dc; --tint: #f0f4fd; --ease: cubic-bezier(.22,1,.36,1); font-synthesis: none; color-scheme: light;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 100px;}
body {margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.65 'DM Sans',Arial,sans-serif; -webkit-font-smoothing: antialiased;}
::selection {background: #e9eefb; color: var(--ink);}
a {color: inherit; text-decoration: none;}
button {font: inherit; cursor: pointer;}
button:disabled {cursor: default;}
button,a {-webkit-tap-highlight-color: transparent;}
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible {outline: 3px solid var(--accent); outline-offset: 5px;}
#main:focus {outline: none;}
button:focus:not(:focus-visible) {outline: none;}
img {display: block; max-width: 100%;}
[hidden] {display: none !important;}
.wrap {width: min(1200px,calc(100% - 96px)); margin-inline: auto;}
.eyebrow {font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; line-height: 1.5;}
.accent {color: var(--accent);}
.skip {position: fixed; top: -80px; left: 20px; z-index: 200; padding: 12px 20px; background: var(--ink); color: white; border-radius: 5px;}
.skip:focus {top: 12px;}
header {position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s,box-shadow .3s;}
.has-scrolled header {border-color: var(--line); box-shadow: 0 6px 24px -22px #0a1931;}
.reading-progress {position: absolute; top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--accent); pointer-events: none;}
.nav {height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.brand {display: inline-flex; align-items: center;}
.brand img {width: 146px; height: auto;}
nav {display: flex; align-items: center; gap: 32px; font-size: 14px;}
nav a:not(.nav-contact) {position: relative; padding: 12px 0; color: var(--muted);}
nav a:not(.nav-contact):after {content: ''; height: 1px; position: absolute; bottom: 5px; left: 0; right: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);}
nav a:hover,nav a[aria-current] {color: var(--accent);}
nav a[aria-current]:after,nav a:hover:after {transform: scaleX(1);}
.nav-contact {padding: 9px 17px; border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 24px; transition: background .2s,border-color .2s;}
.nav-contact:hover {background: var(--tint); border-color: var(--accent);}
.menu-button {display: none; border: 0; background: none; padding: 10px 0 10px 15px; font-size: 14px; min-height: 44px;}
.menu-button span {font-size: 22px; line-height: 1; margin-left: 8px; display: inline-block; transition: transform .3s;}
.menu-button[aria-expanded=true] span {transform: rotate(45deg);}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 13px 19px; border: 1px solid var(--accent); background: var(--accent); border-radius: 6px; color: white; font-size: 14px; font-weight: 500; transition: background .25s,box-shadow .25s;}
.button:hover {background: var(--ink); border-color: var(--ink); box-shadow: 0 6px 20px -14px var(--accent);}
.button>span,.text-link>span,.nav-contact>span,.email>span {display: inline-block; transition: transform .3s var(--ease);}
.button:hover>span,.nav-contact:hover>span,.email:hover>span {transform: translate(3px,-3px);}
.text-link {font-size: 14px; display: inline-flex; gap: 16px; align-items: center; min-height: 44px;}
.text-link:hover {color: var(--accent);}
.text-link:hover>span {transform: translateY(4px);}
section {padding: 100px 0; scroll-margin-top: 0;}
.section-head {display: grid; grid-template-columns: 1fr 2fr; gap: 50px; margin-bottom: 52px;}
.section-head>.eyebrow {padding-top: 8px;}
h2 {font-size: clamp(34px,4vw,52px); font-weight: 500; line-height: 1.13; letter-spacing: -.045em; margin: 0;}
h3 {font-weight: 500; letter-spacing: -.035em; line-height: 1.25;}
.section-intro {max-width: 555px; color: var(--muted); font-size: 17px; line-height: 1.7; margin: 21px 0 0;}
.approach {border-top: 1px solid var(--line); padding-top: 90px;}
.services {display: grid; grid-template-columns: 1fr 1fr; gap: 48px;}
.service {display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; border-top: 1px solid var(--line); padding-top: 28px;}

.service-label {color: var(--muted); font-size: 14px;}
.service h3 {font-size: 32px; margin: 10px 0 17px;}
.service p {color: var(--muted); margin: 0 0 25px; max-width: 425px;}
.service-audience {font-size: 14px; color: var(--accent);}
.approach-note {display: grid; grid-template-columns: 1fr 2fr; gap: 50px; margin-top: 58px; padding-top: 26px; border-top: 1px solid var(--line);}
.approach-note>span {font-size: 15px; font-weight: 500;}
.approach-note p {font-size: 15px; color: var(--muted); margin: 0; max-width: 600px;}
.clients {padding: 40px 0 82px;}
.client-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 33px;}
.client-heading h2 {font-size: 34px; margin-top: 13px;}
.client-heading p {color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0;}




.logo-space {height: 64px; width: 100%; display: flex; align-items: center; justify-content: center;}
.logo-space img {width: 100%; height: auto; max-height: 60px; object-fit: contain; transition: transform .4s var(--ease);}


.hma-logo {background: var(--ink); border-radius: 4px; padding: 8px;}
.client-name {display: block; padding-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.5px; line-height: 1.3; text-align: center;}
.client-name span {font-size: 16px; font-weight: 400; letter-spacing: 0;}
.work {background: var(--ink); color: #fff; padding: 88px 0 60px; overflow: clip;}
.work .section-head>.eyebrow {color: var(--blue-light);}
.work .section-intro {color: #e1e7f3;}
.work-explorer {display: grid; grid-template-columns: 215px minmax(0,1fr); gap: 40px; align-items: start;}
.work-explorer:not(.enhanced) {display: block;}
.work-tab {width: 100%; text-align: left; display: flex; align-items: center; gap: 16px; min-height: 62px; padding: 15px 10px; border: 0; border-bottom: 1px solid rgba(225,231,243,.16); background: transparent; color: #b8c4da; font-size: 16px; transition: color .3s,background .3s;}

.tab-arrow {margin-left: auto; opacity: 0; transform: translate(-4px,4px); transition: transform .4s var(--ease),opacity .3s;}
.work-tab[aria-selected=true] {color: #fff; background: rgba(111,147,220,.10);}
.work-tab[aria-selected=true] .tab-arrow {opacity: 1; transform: none;}
.work-tab:hover {color: #fff; background: rgba(111,147,220,.07);}
.work-panels {min-width: 0;}
.work-panel {border-radius: 10px; background: white; color: var(--ink); padding: 34px; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: 35px; min-height: 435px; align-items: start;}
.work-panel+.work-panel {margin-top: 20px;}
.enhanced .work-panel {margin: 0;}
.work-panel.is-entering {animation: panel-in .5s var(--ease) both;}
.panel-copy h3 {font-size: 34px; line-height: 1.15; margin: 18px 0; max-width: 400px;}
.panel-copy p {font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 22px;}
.cap-tags {display: flex; flex-wrap: wrap; gap: 6px;}
.cap-tags span {font-size: 12px; color: var(--muted); background: var(--tint); border-radius: 3px; padding: 4px 8px;}
.panel-result {margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);}
.panel-result strong {display: block; font-size: 38px; font-weight: 500; letter-spacing: -.045em; line-height: 1.2; color: var(--accent);}
.panel-result>span {font-size: 12px; color: var(--muted); display: block; line-height: 1.5; margin-top: 7px; max-width: 280px;}
.panel-outcome {margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);}
.panel-outcome>span {color: var(--accent); margin-right: 7px;}
.work-bottom {display: flex; justify-content: space-between; gap: 30px; font-size: 13px; border-top: 1px solid rgba(225,231,243,.2); padding-top: 25px; margin-top: 42px;}
.work-bottom>span {color: #fff;}
.work-bottom>p {color: #b8c4da; margin: 0;}
.principle {text-align: center; padding: 110px 0 108px;}
.principle p {font-size: clamp(36px,4.7vw,63px); line-height: 1.17; letter-spacing: -.045em; margin: 28px 0 24px;}
.principle p>span {color: var(--accent);}
.principle-note {font-size: 15px; color: var(--muted);}
.people {border-top: 1px solid var(--line); padding: 88px 0 90px;}
.team-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px;}
.team-grid>article {border-top: 1px solid var(--line); padding-top: 24px;}
.person {display: flex; gap: 18px; align-items: center;}
.person img {width: 74px; height: 92px; object-fit: cover; object-position: center; border-radius: 5px; filter: grayscale(1); transition: filter .7s;}
.team-grid>article:hover .person img {filter: grayscale(0);}
.person h3 {font-size: 21px; line-height: 1.3; margin: 0 0 6px;}
.person span {color: var(--muted); font-size: 12px; display: block; line-height: 1.5;}
.person-copy {font-size: 15px; color: var(--muted); line-height: 1.7; margin: 22px 0 0;}
.contact {background: var(--tint); padding: 86px 0 75px;}
.contact-layout {display: flex; align-items: center; justify-content: space-between; gap: 45px;}
.contact h2 {font-size: clamp(40px,5vw,65px); margin: 22px 0; line-height: 1.1;}
.contact p {color: var(--muted); margin: 0;}
.contact-arrow {height: 110px; width: 110px; border-radius: 50%; border: 1px solid #c9d6f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .3s,border-color .3s;}
.contact-arrow>span {font-size: 48px; line-height: 1; color: var(--accent); transition: transform .5s var(--ease),color .3s;}
.contact-arrow:hover {background: var(--accent); border-color: var(--accent);}
.contact-arrow:hover>span {color: #fff; transform: translate(4px,-4px);}
.email {display: inline-flex; gap: 30px; align-items: center; margin-top: 32px; font-size: 23px; line-height: 1.5; border-bottom: 1px solid var(--accent); padding-bottom: 6px; color: var(--accent); max-width: 100%;}
footer .wrap {display: flex; justify-content: space-between; align-items: center; gap: 25px; min-height: 106px; font-size: 12px; color: var(--muted);}
footer .brand img {width: 123px;}
.hero-enter {animation: hero-in .9s var(--ease) both;}
.reveal.is-pending {opacity: 0; transform: translateY(22px);}
.reveal {transition: opacity .75s var(--ease),transform .85s var(--ease);}
.reveal.is-visible {opacity: 1; transform: none;}
@keyframes hero-in {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: none;}
}
@keyframes panel-in {
  from {opacity: .5; transform: translateY(8px);}
  to {opacity: 1; transform: none;}
}
@media (max-width:1100px) {.work-explorer {grid-template-columns: 170px minmax(0,1fr); gap: 24px;}.work-panel {padding: 26px; gap: 22px; grid-template-columns: 1fr;}.person {align-items: flex-start; flex-direction: column;}.client-name {font-size: 16px;}.client-name span {font-size: 14px;}}
@media (max-width:850px) {.wrap {width: calc(100% - 48px);}.section-head,.approach-note {grid-template-columns: 1fr; gap: 20px;}.section-head {margin-bottom: 40px;}section {padding: 70px 0;}.services {gap: 30px;}.service {gap: 12px; grid-template-columns: minmax(0,1fr);}.logo-space {max-width: 210px;}.client-name {font-size: 19px;}.client-name span {font-size: 16px;}.client-heading p {max-width: 240px;}.client-heading p br {display: none;}.work-bottom {flex-direction: column; gap: 8px;}.team-grid {gap: 25px;}.person h3 {font-size: 20px;}.principle {padding: 88px 0;}.contact-arrow {width: 85px; height: 85px;}.contact-arrow>span {font-size: 40px;}}
@media (max-width:580px) {html {scroll-padding-top: 83px;}.wrap {width: calc(100% - 40px);}.nav {height: 73px;}.brand img {width: 131px;}.menu-button {display: inline-flex; align-items: center;}nav {display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 10px 20px 22px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 4px;}nav.is-open {display: flex;}nav a:not(.nav-contact) {padding: 12px 0;}nav a:not(.nav-contact):after {bottom: 8px; right: auto; width: 28px;}.nav-contact {margin-top: 7px; padding: 12px 15px; justify-content: space-between;}.button {font-size: 14px; padding: 13px 16px; gap: 18px;}.text-link {font-size: 13px; gap: 9px;}section {padding: 53px 0;}.approach {padding-top: 51px;}.section-head {margin-bottom: 30px; gap: 17px;}h2 {font-size: 34px; line-height: 1.15;}.section-intro {font-size: 16px; margin-top: 17px;}.services {grid-template-columns: 1fr; gap: 32px;}.service {padding-top: 22px; grid-template-columns: minmax(0,1fr); gap: 15px;}.service h3 {font-size: 29px; margin: 8px 0 15px;}.service p {font-size: 16px; margin-bottom: 18px;}.service-audience {font-size: 13px;}.approach-note {margin-top: 33px; padding-top: 23px; gap: 10px;}.approach-note p {font-size: 15px;}.clients {padding: 16px 0 52px;}.client-heading {align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 25px;}.client-heading h2 {font-size: 30px;}.client-heading p {max-width: 320px; font-size: 15px;}.logo-space {height: 53px;}.work {padding: 53px 0 39px;}.work-explorer {grid-template-columns: 1fr; gap: 23px;}.work-tabs {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;}.work-tab {border: 1px solid rgba(225,231,243,.2); border-radius: 4px; font-size: 13px; gap: 7px; padding: 11px 9px; min-height: 45px; justify-content: center;}.work-tab .tab-arrow {display: none;}.work-tab[aria-selected=true] {background: #fff; color: var(--ink); border-color: white;}.work-panel {padding: 25px; gap: 24px; min-height: 0;}.panel-copy h3 {font-size: 31px; margin: 16px 0;}.panel-copy p {font-size: 16px;}.panel-result {margin-top: 24px;}.panel-result strong {font-size: 35px;}.panel-result>span {font-size: 12px;}.work-bottom {margin-top: 30px; font-size: 13px; line-height: 1.8;}.principle {padding: 66px 0;}.principle p {font-size: 35px; margin: 25px 0 20px;}.principle p br {display: none;}.principle p>span {display: block;}.principle-note {font-size: 14px;}.people {padding: 54px 0;}.team-grid {grid-template-columns: 1fr; gap: 28px;}.person {flex-direction: row; align-items: center; gap: 19px;}.person img {width: 74px; height: 88px;}.person h3 {font-size: 21px;}.person span {font-size: 13px;}.person-copy {font-size: 15px; margin-top: 19px;}.contact {padding: 55px 0 45px;}.contact h2 {font-size: 41px; margin: 20px 0;}.contact-layout {gap: 0;}.contact-arrow {display: none;}.contact p {font-size: 16px;}.email {font-size: 23px; gap: 24px; margin-top: 25px;}footer .wrap {padding: 24px 0; min-height: 0; gap: 20px; flex-wrap: wrap;}footer .brand img {width: 115px;}footer .wrap>span {order: 3; width: 100%; font-size: 12px;}}
@media (max-width:360px) {.wrap {width: calc(100% - 32px);}.button {gap: 15px;}.work-panel {padding: 20px;}.work-tab {font-size: 12px; padding-inline: 6px;}.contact h2 {font-size: 36px;}}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior: auto;}*,*:before,*:after {animation: none !important; transition: none !important;}.reveal.is-pending {opacity: 1; transform: none;}.hero-enter {opacity: 1; transform: none;}}
@media print {header,.work-tabs,.contact-arrow {display: none !important;}.work-panel[hidden] {display: grid !important;}.work-explorer {display: block;}.reveal.is-pending {opacity: 1; transform: none;}.work {background: white; color: var(--ink);}.work .section-intro,.work-bottom p {color: var(--muted);}.work-panel {break-inside: avoid; border: 1px solid var(--line); margin-top: 20px !important;}.wrap {width: 100%;}}
.work-tab {font-size: 16px;}
@media (max-width:580px) {.work-tab {font-size: 14px; padding-inline: 6px;}}
@media screen and (min-width:851px) {.wrap {--section-rail: 216px; --section-gap: 40px;}.section-head,.approach-note,.work-explorer {grid-template-columns: var(--section-rail) minmax(0,1fr); column-gap: var(--section-gap);}.section-head {align-items: start;}.section-intro {max-width: 640px;}.services {gap: 40px;}.service {grid-template-columns: minmax(0,1fr); gap: 17px;}.service>div {display: flex; flex-direction: column;}.service-audience {margin-top: auto;}.service p {max-width: 460px;}.client-heading {display: grid; grid-template-columns: var(--section-rail) minmax(0,1fr); gap: var(--section-gap); align-items: end;}.client-heading {row-gap: 17px;}.client-heading>div {display: contents;}.client-heading .eyebrow {grid-column: 1; grid-row: 1; align-self: start; padding-top: 8px;}.client-heading h2 {grid-column: 2; grid-row: 1; font-size: 34px; margin: 0;}.client-heading p {grid-column: 2; grid-row: 2; max-width: 640px; padding-bottom: 3px;}.client-heading p br {display: none;}.logo-space {max-width: 204px;}.work-explorer {align-items: stretch;}.work-tabs {display: grid; grid-template-rows: repeat(4,minmax(76px,1fr));}.work-tab {height: 100%; padding-inline: 14px;}.work-tab:first-child {border-top: 1px solid rgba(225,231,243,.16);}.work-panel {height: 100%; align-items: stretch;}.work-bottom {display: grid; grid-template-columns: var(--section-rail) minmax(0,1fr); gap: var(--section-gap);}.team-grid {gap: 32px; align-items: start;}.person {display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 16px; align-items: center;}.person img {width: 74px; min-width: 74px; height: 92px;}.person h3 {font-size: 20px;}.person span {min-height: 36px; display: flex; align-items: flex-start;}.person-copy {margin-top: 24px;}}
@media screen and (min-width:1101px) {.work-panel {min-height: 510px; padding: 32px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 30px;}.panel-copy {display: flex; flex-direction: column;}.panel-copy .cap-tags {margin-bottom: 24px;}.panel-copy .panel-result,.panel-copy .panel-outcome {margin-top: auto;}}
@media screen and (min-width:851px) and (max-width:1100px) {.wrap {--section-rail: 180px; --section-gap: 30px;}.team-grid {gap: 24px;}.person {grid-template-columns: 62px minmax(0,1fr); gap: 12px;}.person img {width: 62px; min-width: 62px; height: 88px;}.person h3 {font-size: 18px;}}
@media screen and (max-width:580px) {html {scroll-padding-top: 20px;}header {position: relative; top: auto; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none;}.has-scrolled header {box-shadow: none; border-color: var(--line);}.reading-progress {display: none;}.nav {height: auto; min-height: 73px; flex-wrap: wrap; row-gap: 0; align-content: start;}.nav>.brand,.nav>.menu-button {min-height: 73px;}#navigation {position: static; inset: auto; flex-basis: 100%; width: 100%; padding: 0 0 20px; border: 0;}}
/* The hero stays quiet around the copy; the animation uses the margins beside it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
}
.hero-stage { position: relative; }
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 960px;
  padding-top: clamp(48px, 5.3vw, 76px);
  padding-bottom: 104px;
  text-align: center;
}
.hero-content > .eyebrow { color: var(--accent); }
.hero h1 {
  font-size: clamp(64px, 7.1vw, 96px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.065em;
  margin: 25px 0 24px;
}
.hero h1 > span { color: var(--accent); }
.hero-copy {
  font-size: 20px;
  line-height: 1.65;
  letter-spacing: -.015em;
  color: var(--muted);
  margin: 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
}
.hero-audience {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 21px auto 0;
}
.hero-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Faint dot grid behind the page; sections with their own background cover it. */
.graph-paper {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.hero-baseline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding: 17px 0;
  font-size: 13px;
  color: var(--muted);
}
.hero-baseline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero-baseline a { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; }
.hero-baseline a:hover { color: var(--accent); }
.motion-toggle {
  min-width: 136px;
  min-height: 44px;
  padding: 10px 14px;
  gap: 10px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, border-color .2s;
}
.motion-toggle:hover { color: var(--accent); border-color: var(--accent); }
.motion-icon { flex-shrink: 0; width: 10px; height: 11px; border-inline: 2px solid currentColor; }
.is-paused .motion-icon { width: 0; height: 0; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; margin-left: 2px; }
.hero-content > .hero-enter:nth-child(2) { animation-delay: .07s; }
.hero-content > .hero-enter:nth-child(3) { animation-delay: .14s; }
.hero-content > .hero-enter:nth-child(4) { animation-delay: .21s; }
.hero-content > .hero-enter:nth-child(5) { animation-delay: .28s; }
@media (max-width: 850px) {
  .hero-content { padding-top: 52px; padding-bottom: 104px; }
  .hero h1 { font-size: clamp(62px, 9vw, 78px); }
}
@media (max-width: 580px) {
  .hero-content { padding-top: 43px; padding-bottom: 72px; }
  .hero h1 { font-size: clamp(43px, 12.6vw, 70px); line-height: 1.08; margin: 22px 0 20px; }
  .hero-copy { font-size: 17px; line-height: 1.7; }
  .hero-actions { flex-direction: column; gap: 5px; margin-top: 24px; }
  .hero-audience { font-size: 13px; max-width: 295px; margin-top: 17px; }
  .hero-baseline { display: block; padding: 15px 0 9px; font-size: 12px; }
  .hero-baseline-actions { justify-content: space-between; gap: 16px; margin-top: 2px; }
}
@media print { .hero-canvas, .graph-paper, .motion-toggle { display: none !important; } .hero-content { padding-block: 30px; } }

/* One list of clients, with a measured loop and native swipe support. */
.client-carousel { --client-width: 240px; min-width: 0; }
.client-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: auto;
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.client-viewport::-webkit-scrollbar { display: none; }
.client-track, .client-logos { display: flex; width: max-content; }
.client-logos { flex: 0 0 auto; }
.client-logo {
  flex: 0 0 var(--client-width);
  width: var(--client-width);
  min-width: 0;
  padding: 28px 24px 22px;
  display: grid;
  grid-template-rows: 64px 36px;
  align-items: center;
  justify-items: center;
  gap: 16px;
}
.client-logo .logo-space { height: 64px; max-width: 192px; }
.client-logo > span { align-self: start; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.client-logo:hover img { transform: translateY(-2px); }
.client-logo:focus-visible { outline-offset: -6px; border-radius: 6px; }
.client-carousel-controls { display: flex; justify-content: flex-end; padding-top: 12px; }
@media (max-width: 580px) {
  .client-carousel { --client-width: 200px; }
  .client-logo { grid-template-rows: 54px 36px; gap: 12px; padding: 24px 22px 18px; }
  .client-logo .logo-space { height: 54px; }
  .client-logo .client-name { font-size: 17px; }
  .client-logo .client-name span { font-size: 14px; }
  .hero-baseline-actions { gap: 8px 14px; }
  .hero-baseline-actions .motion-toggle { min-width: 132px; padding-inline: 12px; }
}
@media print {
  .client-viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .client-track, .client-logos { width: 100%; }
  .client-logos { flex-wrap: wrap; }
  [data-carousel-copy], .client-carousel-controls { display: none !important; }
}

/* Leave room for navigation on smaller tablets without changing the mobile menu. */
@media screen and (min-width:581px) and (max-width:740px) {
  .nav { gap: 16px; }
  nav { gap: 18px; }
  .nav-contact { gap: 16px; padding-inline: 12px; }
  .brand img { width: 131px; }
}
footer .wrap > a:last-child { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
/* Long contact text can wrap at enlarged text sizes. */
.contact-layout > div { min-width: 0; }
.email { overflow-wrap: anywhere; }
.not-found main { max-width: 680px; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 60px; }
.not-found .brand { margin-bottom: 70px; }
.not-found h1 { font-size: clamp(36px,7vw,64px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; margin: 10px 0; }
.not-found main > p:not(.eyebrow) { color: var(--muted); max-width: 420px; margin-bottom: 28px; }

/* Four work areas: balanced rows on desktop, a compact two-by-two mobile grid. */
.work-tab > span:nth-child(2) { min-width: 0; }
@media (max-width:580px) {
  .work-tab { min-height: 64px; text-align: center; line-height: 1.45; padding: 12px 8px; }
}

/* Quiet footer navigation and a readable, script-free privacy page. */
footer .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 24px; padding-block: 20px; font-size: 14px; }
footer .brand { justify-self: start; }
.footer-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 24px; }
.footer-meta a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.footer-meta a:hover { color: var(--accent); text-decoration-color: currentColor; }
.footer-top { justify-self: end; }
.privacy-header { position: relative; border-bottom: 1px solid var(--line); background: var(--paper); backdrop-filter: none; }
.privacy-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; min-height: 88px; padding-block: 12px; }
.privacy-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--muted); }
.privacy-back:hover { color: var(--accent); }
.privacy-content { width: min(760px,calc(100% - 48px)); margin-inline: auto; padding: 76px 0 80px; }
.privacy-content h1 { font-size: clamp(2.5rem,5vw,3.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; margin: 20px 0; }
.privacy-lead { color: var(--muted); font-size: 18px; max-width: 560px; margin: 0; }
.privacy-updated { color: var(--muted); font-size: 14px; margin: 20px 0 44px; }
.privacy-section { padding: 28px 0; border-top: 1px solid var(--line); }
.privacy-section h2 { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 14px; }
.privacy-section p { color: var(--muted); margin: 12px 0 0; overflow-wrap: anywhere; }
.privacy-section a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.privacy-page footer { border-top: 1px solid var(--line); }
@media (max-width:740px) {
  footer .wrap { grid-template-columns: minmax(0,1fr) auto; }
  .footer-meta { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; }
  .privacy-content { padding-block: 48px; }
}
@media (max-width:580px) {
  .privacy-bar { min-height: 73px; }
  .privacy-content { width: calc(100% - 40px); }
  .privacy-updated { margin-bottom: 32px; }
}
@media (max-width:360px) {
  .privacy-content { width: calc(100% - 32px); }
}

/* Workflow examples: one concrete process, with an explicit review and outcome. */
.workflow {
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background: var(--tint);
  border-radius: 7px;
}
.workflow-heading {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}
.workflow-title {
  margin: 0 0 26px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.workflow-stages {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.workflow-stage {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0,1fr);
  gap: 13px;
  padding-bottom: 22px;
}
.workflow-stage:last-child {padding-bottom: 0;}
.workflow-stage:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: -4px;
  width: 1px;
  background: var(--line);
}
.workflow-node {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}
.workflow-stage:last-child .workflow-node {background: var(--accent);}
.step-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}
.workflow-stage p,.workflow-result p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.workflow-result {
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.workflow-result .step-label {color: var(--accent);}
.workflow-caption {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width:1100px) {
  .workflow {padding: 22px;}
}
@media (min-width:760px) and (max-width:1100px) {
  .workflow-stages {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px;}
  .workflow-stage {display: block; padding: 0;}
  .workflow-node {display: block; margin: 0 0 12px;}
  .workflow-stage:not(:last-child)::before {left: 17px; top: 4px; bottom: auto; width: calc(100% - 3px); height: 1px;}
  .workflow-title {margin-bottom: 24px;}
}
@media (max-width:580px) {
  .workflow {padding: 20px;}
  .workflow-title {font-size: 22px; margin-bottom: 24px;}
  .workflow-stage {padding-bottom: 20px;}
}

/* --- Pathkey additions (Hugo homepage) ---
   Content folded in from the earlier site: LinkedIn and The Patkis links,
   and the positioning line in the hero. */
.person-link {display: inline-flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; color: var(--accent);}
.person-link > span {display: inline-block; transition: transform .3s var(--ease);}
.person-link:hover > span {transform: translate(3px,-3px);}
.people-more {display: inline-flex; gap: 16px; align-items: center; min-height: 44px; margin-top: 40px; font-size: 15px; border-bottom: 1px solid var(--line);}
.people-more > span {color: var(--accent); display: inline-block; transition: transform .3s var(--ease);}
.people-more:hover {color: var(--accent); border-color: var(--accent);}
.people-more:hover > span {transform: translateX(4px);}
@media (max-width:580px) {.people-more {margin-top: 28px;}}
.hero-position {display: block; color: var(--ink); font-weight: 500; margin-bottom: 6px;}
.hero-content > h1:first-child {margin-top: 0;}
/* Client logos: original colours, matched visual weight, no captions. */
.client-logo {grid-template-rows: 56px; padding: 30px 28px;}
.client-logo .logo-space {height: 56px; max-width: 192px;}
.client-logo .logo-space img {max-width: 100%; max-height: 48px;}
.client-logo .client-name {font-size: 17px; line-height: 1.25;}
.client-logo .client-name span {font-size: 15px;}
@media (max-width: 580px) {.client-logo {grid-template-rows: 48px; padding: 24px 20px;} .client-logo .logo-space {height: 48px;}}
.hero-copy {max-width: 680px; margin-inline: auto; text-wrap: balance;}
/* Clients: one quiet line above the logos instead of a full section heading. */
.clients {padding: 24px 0 72px;}
.client-intro {margin: 0 auto 18px; max-width: 520px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: balance;}
@media (max-width: 580px) {.clients {padding: 16px 0 52px;} .client-intro {font-size: 13px; margin-bottom: 12px;}}

/* --- Inner pages (The Patkis, Values) ---
   Same rails, type and spacing as the homepage sections. */
.page-intro {padding: 72px 0 56px;}
.page-intro h1 {font-size: clamp(44px,5.4vw,72px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; margin: 0;}
.page-block {border-top: 1px solid var(--line); padding: 88px 0 90px;}
.page-body {margin-top: 28px; max-width: 620px;}
.rich p {color: var(--muted); font-size: 16px; line-height: 1.75; margin: 0 0 16px;}
.rich p:last-child {margin-bottom: 0;}
.approach-note + .approach-note {margin-top: 28px;}
.approach-note p p {margin: 0;}
.plain-list {list-style: none; margin: 0; padding: 0; max-width: 600px;}
.plain-list li {position: relative; padding: 0 0 10px 20px; font-size: 15px; line-height: 1.65; color: var(--muted);}
.plain-list li:before {content: ''; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--accent);}

.person-name {font-size: 24px; line-height: 1.3; margin: 0; font-weight: 500; letter-spacing: -.035em;}

.values-grid .service-title {font-size: 30px; font-weight: 500; letter-spacing: -.035em; line-height: 1.25; margin: 2px 0 16px;}
.values-grid .rich p {max-width: 460px;}
.values-grid {row-gap: 56px;}
.pillars-grid {grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px;}
.pillars-grid .service h3 {font-size: 22px; margin: 2px 0 14px;}
.pillars-grid .service p {font-size: 15px;}

.talk {display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 40px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 20px; transition: border-color .3s, box-shadow .3s;}
.talk:hover {border-color: #c9d6f0; box-shadow: 0 10px 30px -24px var(--ink);}
.talk-thumb {position: relative; display: block; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: var(--tint);}
.talk-thumb img {width: 100%; height: 100%; object-fit: cover;}
.talk-play {position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(10,25,49,.78);}
.talk-play:after {content: ''; position: absolute; left: 26px; top: 21px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid #fff;}
.talk-copy {display: flex; flex-direction: column; gap: 12px; padding-right: 20px;}
.talk-title {font-size: clamp(26px,2.6vw,34px); font-weight: 500; letter-spacing: -.04em; line-height: 1.15;}
.talk-desc {color: var(--muted); font-size: 16px; line-height: 1.7;}
.talk-cta {color: var(--accent); font-size: 14px; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 3px;}

.venture-list {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 40px;}
.venture-list li {border-top: 1px solid var(--line); padding: 24px 0 30px;}
.venture-logo {height: 40px; display: flex; align-items: center; margin-bottom: 16px;}
.venture-logo img {max-height: 40px; max-width: 150px; width: auto; object-fit: contain;}
.venture-list h3 {font-size: 19px; margin: 0 0 4px;}
.venture-link {font-size: 13px; color: var(--accent);}
.venture-link:hover {text-decoration: underline; text-underline-offset: 3px;}
.venture-list p {font-size: 15px; line-height: 1.7; color: var(--muted); margin: 12px 0 0;}
.page-footnote {font-size: 13px; color: var(--muted); margin: 24px 0 0; max-width: 620px;}

.quotes {background: var(--ink); color: #fff; padding: 88px 0 80px;}
.quotes .section-head>.eyebrow {color: var(--blue-light);}
.quote-track {display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 40px) / 3)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;}
.quote-track::-webkit-scrollbar {display: none;}
.quote-track:focus-visible {outline: 3px solid var(--blue-light); outline-offset: 6px;}
.quote {scroll-snap-align: start; margin: 0; background: #fff; color: var(--ink); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;}
.quote blockquote {margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted);}
.quote figcaption strong {display: block; font-size: 16px; font-weight: 500;}
.quote figcaption span {display: block; font-size: 13px; color: var(--muted); margin-top: 2px;}
.quote-controls {display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px;}
.quote-button {width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(225,231,243,.3); background: transparent; color: #fff; font-size: 18px; transition: background .2s, border-color .2s;}
.quote-button:hover {background: rgba(111,147,220,.15); border-color: var(--blue-light);}
.quote-button:focus-visible {outline-color: var(--blue-light);}

.post-list {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 48px;}
.post-list li {border-top: 1px solid var(--line); padding: 22px 0 26px;}
.post-meta {font-size: 12px; color: var(--muted); letter-spacing: .02em;}
.post-list h3 {font-size: 20px; line-height: 1.35; margin: 6px 0 8px;}
.post-list h3 a:hover {color: var(--accent);}
.post-list p {font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0;}

@media screen and (min-width:851px) {.page-block .section-head {margin-bottom: 48px;}}
@media (max-width:1100px) {.pillars-grid {grid-template-columns: 1fr;} .venture-list {grid-template-columns: repeat(2,minmax(0,1fr));}}
@media (max-width:850px) {
  .page-intro {padding: 56px 0 40px;} .page-block {padding: 70px 0;} .quotes {padding: 70px 0 60px;}
  .post-list {grid-template-columns: 1fr;}
  .talk {grid-template-columns: 1fr; gap: 20px;} .talk-copy {padding: 0 4px 8px;}
  .quote-track {grid-auto-columns: minmax(280px, 80%);}
}
@media (max-width:580px) {
  .page-intro {padding: 40px 0 32px;} .page-intro h1 {font-size: 44px;}
  .page-block {padding: 53px 0;} .quotes {padding: 53px 0 45px;}
  .venture-list {grid-template-columns: 1fr;}
  .values-grid .service-title {font-size: 26px;}
  .quote-track {grid-auto-columns: 86%;}
}
.page-block--flush {border-top: 0; padding-top: 8px;}

/* Founders on The Patkis: one row each, large portrait beside name and bio. */
.founders {margin-top: 56px; display: grid; gap: 0;}
.founder {display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 48px; align-items: start; border-top: 1px solid var(--line); padding: 40px 0;}
.founder:last-child {padding-bottom: 0;}
.founder-photo {width: 240px; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; border-radius: 8px; background: var(--tint);}
.founder .person-name {font-size: 30px; margin-top: 4px;}
.founder-role {display: block; font-size: 13px; color: var(--muted); margin-top: 6px;}
.founder .person-copy {font-size: 17px; line-height: 1.75; margin-top: 18px; max-width: 620px;}
@media (max-width:850px) {.founder {grid-template-columns: 180px minmax(0,1fr); gap: 32px;} .founder-photo {width: 180px;}}
@media (max-width:580px) {.founders {margin-top: 32px;} .founder {grid-template-columns: 1fr; gap: 20px; padding: 28px 0;} .founder-photo {width: 100%; max-width: 280px;} .founder .person-name {font-size: 26px;} .founder .person-copy {font-size: 16px;}}

/* Blog */
.post-title {font-size: clamp(34px,4vw,52px) !important; margin-top: 10px !important;}
.page-intro .eyebrow a:hover {text-decoration: underline; text-underline-offset: 3px;}
.inline-link {color: var(--accent); text-decoration: underline; text-underline-offset: 3px;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}