:root {
  --hf-paper: #f0efe9;
  --hf-ink: #10110e;
  --hf-orange: #ff4b1f;
  --hf-line: rgba(16,17,14,.24);
  --hf-muted: rgba(16,17,14,.58);
}

.hf-case { margin: 0; background: var(--hf-paper); color: var(--hf-ink); }
.hf-case main { overflow: hidden; }
.hf-case .nav { background: rgba(240,239,233,.94); }
.hf-case .nav-inner { max-width: none; padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.hf-case .nav-logo { display: flex; align-items: center; gap: 12px; color: var(--hf-ink); }
.hf-case .logo-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 10px var(--font-mono); }
.hf-case .logo-name { font-size: 14px; font-weight: 700; }
.hf-case .nav-links a { color: var(--hf-ink); }
.hf-case .nav-agent-btn { padding: 9px 15px; color: var(--hf-ink); background: transparent; border: 1px solid currentColor; border-radius: 99px; }
.hf-case .nav-agent-btn span { color: var(--hf-orange); }
.hf-case em { color: var(--hf-orange); font-style: normal; }
.hf-case mark { padding: 0 .08em; background: none; color: var(--hf-orange); }
.hf-case button { font: inherit; }

.hf-hero, .hf-light, .hf-dark, .hf-next { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.hf-hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: clamp(72px,8vw,140px); }
.hf-topline { display: flex; justify-content: space-between; gap: 24px; font: 11px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.hf-topline span, .hf-index span { color: var(--hf-orange); }
.hf-name { margin-top: clamp(90px,10vw,170px); }
.hf-name > p { margin-bottom: 18px; color: var(--hf-muted); font: 11px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.hf-name h1 { font-size: clamp(110px,16vw,250px); line-height: .86; letter-spacing: -.07em; }
.hf-ivr .hf-name h1 { font-size: clamp(104px,15vw,230px); }
.hf-name h1 span { color: var(--hf-orange); }
.hf-thesis { margin-top: clamp(80px,10vw,170px); padding-top: 34px; border-top: 1px solid var(--hf-ink); display: grid; grid-template-columns: 1.5fr .75fr; gap: 8vw; align-items: start; }
.hf-thesis h2 { font-size: clamp(54px,7vw,112px); line-height: .98; letter-spacing: -.06em; }
.hf-thesis h2 em, .hf-section-intro h2 em { display: block; margin-top: .08em; }
.hf-thesis > p { max-width: 600px; color: var(--hf-muted); font-size: clamp(17px,1.55vw,23px); line-height: 1.55; }
.hf-meta { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--hf-ink); border-bottom: 1px solid var(--hf-ink); }
.hf-meta > div { min-height: 104px; padding: 24px 20px 22px 0; border-right: 1px solid var(--hf-line); display: flex; flex-direction: column; justify-content: space-between; }
.hf-meta > div:not(:first-child) { padding-left: 20px; }
.hf-meta > div:last-child { border-right: 0; }
.hf-meta span, .hf-index p { color: var(--hf-muted); font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hf-meta strong { font-size: 14px; }

.hf-ia, .hf-collapse { margin: clamp(70px,8vw,130px) 0 45px; border: 1px solid var(--hf-ink); display: grid; grid-template-columns: 1fr .24fr 1fr; }
.hf-ia-head, .hf-collapse-head { grid-column: 1 / -1; padding: 22px 28px; border-bottom: 1px solid var(--hf-ink); display: flex; justify-content: space-between; gap: 30px; }
.hf-ia-head span, .hf-collapse-head span { color: var(--hf-orange); font: 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hf-ia-head strong, .hf-collapse-head strong { font-size: 15px; }
.hf-ia-model { min-height: 460px; padding: clamp(28px,4vw,66px); display: flex; flex-direction: column; }
.hf-ia-model > span, .hf-collapse > div > span { color: var(--hf-muted); font: 11px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.hf-ia-model > strong { margin: 45px 0; font-size: clamp(38px,4vw,64px); line-height: .95; letter-spacing: -.05em; }
.hf-ia-model ul { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; }
.hf-ia-model li { padding: 13px 0; border-top: 1px solid var(--hf-line); color: var(--hf-muted); font-size: 15px; list-style: none; }
.hf-ia-model li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--hf-line); }
.hf-ia-model.is-after strong { color: var(--hf-orange); }
.hf-ia-arrow { border-left: 1px solid var(--hf-ink); border-right: 1px solid var(--hf-ink); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; }
.hf-ia-arrow i { color: var(--hf-orange); font-size: 48px; font-style: normal; }
.hf-ia-arrow span { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--hf-muted); font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hf-ia figcaption, .hf-collapse figcaption, .hf-routing figcaption, .hf-woz figcaption { grid-column: 1 / -1; padding: 20px 28px; border-top: 1px solid var(--hf-ink); color: var(--hf-muted); font: 11px/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }

.hf-light, .hf-dark { padding-top: clamp(90px,10vw,170px); padding-bottom: clamp(90px,10vw,170px); }
.hf-dark { background: var(--hf-ink); color: var(--hf-paper); }
.hf-index { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid currentColor; }
.hf-dark .hf-index { border-color: rgba(240,239,233,.28); }
.hf-dark .hf-index p { color: rgba(240,239,233,.46); }
.hf-section-intro { margin-top: clamp(75px,9vw,145px); display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: start; }
.hf-section-intro h2 { font-size: clamp(64px,9vw,145px); line-height: .9; letter-spacing: -.065em; }
.hf-section-intro > p { max-width: 620px; color: var(--hf-muted); font-size: clamp(17px,1.55vw,24px); line-height: 1.55; }
.hf-dark .hf-section-intro > p { color: rgba(240,239,233,.54); }
.hf-dark blockquote, .hf-light blockquote { margin-top: clamp(85px,9vw,150px); padding: 26px 0 0 30%; border-top: 1px solid currentColor; font-size: clamp(30px,4vw,64px); line-height: 1.08; letter-spacing: -.045em; }

.hf-audio-laws { margin-top: 9vw; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(240,239,233,.28); }
.hf-audio-laws article { min-height: 390px; padding: clamp(26px,3vw,50px); border-right: 1px solid rgba(240,239,233,.28); display: flex; flex-direction: column; }
.hf-audio-laws article:last-child { border-right: 0; }
.hf-audio-laws span, .hf-room > span, .hf-observation span, .hf-supporting-decisions span, .hf-invariants span, .hf-pair span { color: var(--hf-orange); font: 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hf-audio-laws strong { margin-top: auto; font-size: clamp(38px,4vw,65px); line-height: .95; letter-spacing: -.05em; }
.hf-audio-laws p { margin-top: 22px; color: rgba(240,239,233,.62); font-size: 16px; line-height: 1.55; }

.hf-phrase-test { margin-top: 9vw; display: grid; grid-template-columns: 1fr .22fr 1fr; border-top: 1px solid var(--hf-ink); border-bottom: 1px solid var(--hf-ink); }
.hf-phrase-test article { min-height: 500px; padding: clamp(28px,4vw,64px); display: flex; flex-direction: column; }
.hf-phrase-test article > span { color: var(--hf-muted); font: 11px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.hf-phrase-test article > p { margin: auto 0; font-size: clamp(40px,4.5vw,72px); line-height: 1.02; letter-spacing: -.05em; }
.hf-phrase-test article > div { padding-top: 22px; border-top: 1px solid var(--hf-line); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.hf-phrase-test article > div strong { font-size: 24px; }
.hf-phrase-test article > div small { max-width: 260px; color: var(--hf-muted); font-size: 14px; line-height: 1.5; }
.hf-phrase-test .is-passed { background: var(--hf-ink); color: var(--hf-paper); }
.hf-phrase-test .is-passed > span, .hf-phrase-test .is-passed small { color: rgba(240,239,233,.5); }
.hf-same-words { border-left: 1px solid var(--hf-ink); border-right: 1px solid var(--hf-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.hf-same-words i { color: var(--hf-orange); font-size: 38px; font-style: normal; }
.hf-same-words span { writing-mode: vertical-rl; transform: rotate(180deg); font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hf-insight-line { margin-top: 6vw; padding: 30px 0; border-top: 1px solid var(--hf-ink); border-bottom: 1px solid var(--hf-ink); display: grid; grid-template-columns: .6fr auto 1.4fr; gap: 30px; align-items: center; }
.hf-insight-line strong { color: var(--hf-orange); font-size: clamp(32px,4vw,60px); }
.hf-insight-line i { font-size: 38px; font-style: normal; }
.hf-insight-line p { font-size: clamp(20px,2vw,30px); }

.hf-woz { margin-top: 9vw; display: grid; grid-template-columns: 1fr .25fr 1fr; border: 1px solid rgba(240,239,233,.32); }
.hf-room { min-height: 450px; padding: clamp(28px,4vw,60px); display: flex; flex-direction: column; }
.hf-room > strong { margin-top: auto; font-size: clamp(34px,4vw,62px); line-height: .95; letter-spacing: -.05em; }
.hf-handset { width: 220px; height: 76px; margin: auto; border: 2px solid var(--hf-paper); border-radius: 50px; display: flex; align-items: center; justify-content: space-around; font-size: 20px; transform: rotate(-8deg); }
.hf-handset i { width: 85px; border-top: 2px solid var(--hf-paper); }
.hf-script { width: min(100%,300px); margin: auto; border: 1px solid rgba(240,239,233,.35); }
.hf-script i { display: block; padding: 14px 16px; border-bottom: 1px solid rgba(240,239,233,.2); color: rgba(240,239,233,.72); font: 11px/1.5 var(--font-mono); font-style: normal; }
.hf-script i:last-child { border-bottom: 0; color: var(--hf-orange); }
.hf-partition { border-left: 1px solid rgba(240,239,233,.32); border-right: 1px solid rgba(240,239,233,.32); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; }
.hf-partition span { writing-mode: vertical-rl; color: rgba(240,239,233,.6); font: 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.hf-partition i { color: var(--hf-orange); font-size: 26px; font-style: normal; }
.hf-woz figcaption { border-color: rgba(240,239,233,.32); color: rgba(240,239,233,.46); }
.hf-observation { margin-top: 50px; padding: 25px 0; border-top: 1px solid rgba(240,239,233,.32); border-bottom: 1px solid rgba(240,239,233,.32); display: grid; grid-template-columns: .5fr 1.5fr; gap: 6vw; }
.hf-observation p { color: rgba(240,239,233,.72); font-size: clamp(18px,2vw,28px); }

.hf-recovery-flow { margin-top: 9vw; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; border-top: 1px solid var(--hf-ink); border-bottom: 1px solid var(--hf-ink); }
.hf-recovery-flow article { min-height: 290px; padding: 28px 22px; display: flex; flex-direction: column; }
.hf-recovery-flow article > span { color: var(--hf-orange); font: 11px var(--font-mono); }
.hf-recovery-flow article strong { margin-top: auto; font-size: 32px; }
.hf-recovery-flow article p { min-height: 62px; margin-top: 14px; color: var(--hf-muted); font-size: 15px; line-height: 1.5; }
.hf-recovery-flow > i { padding: 0 12px; border-left: 1px solid var(--hf-line); border-right: 1px solid var(--hf-line); display: flex; align-items: center; color: var(--hf-muted); font: 11px var(--font-mono); font-style: normal; writing-mode: vertical-rl; text-transform: uppercase; }
.hf-recovery-flow .is-handoff { background: var(--hf-ink); color: var(--hf-paper); }
.hf-recovery-flow .is-handoff p { color: rgba(240,239,233,.6); }
.hf-supporting-decisions, .hf-invariants { margin-top: 7vw; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hf-ink); }
.hf-supporting-decisions article, .hf-invariants article { padding: 26px 6vw 0 0; }
.hf-supporting-decisions p, .hf-invariants p { margin-top: 15px; color: var(--hf-muted); font-size: 16px; line-height: 1.6; }

.hf-throughline > h2 { margin-top: 8vw; font-size: clamp(68px,10vw,160px); line-height: .88; letter-spacing: -.07em; }
.hf-throughline-copy { margin: 8vw 0 0 35%; display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; }
.hf-throughline-copy p { color: rgba(240,239,233,.55); font-size: clamp(17px,1.45vw,22px); line-height: 1.65; }
.hf-throughline blockquote { padding-left: 0; max-width: 1350px; }

/* HDFC-specific diagrams */
.hf-collapse { grid-template-columns: 1fr .32fr 1fr; }
.hf-five-labels, .hf-one-task { min-height: 470px; padding: clamp(28px,4vw,65px); display: flex; flex-direction: column; }
.hf-five-labels ul { margin-top: auto; }
.hf-five-labels li { padding: 13px 0; border-top: 1px solid var(--hf-line); color: var(--hf-muted); font-size: 15px; list-style: none; }
.hf-router { border-left: 1px solid var(--hf-ink); border-right: 1px solid var(--hf-ink); display: grid; place-content: center; text-align: center; }
.hf-router b { font-size: clamp(62px,7vw,110px); line-height: .8; }
.hf-router b:last-of-type { color: var(--hf-orange); }
.hf-router i { margin: 22px 0; color: var(--hf-orange); font-size: 42px; font-style: normal; }
.hf-router span { margin-top: 35px; }
.hf-one-task > strong { margin: auto 0; color: var(--hf-orange); font-size: clamp(50px,6vw,96px); line-height: .92; letter-spacing: -.06em; }
.hf-one-task > div { display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--hf-line); }
.hf-one-task small, .hf-one-task i { padding: 12px; border-bottom: 1px solid var(--hf-line); font: 11px/1.5 var(--font-mono); font-style: normal; }
.hf-one-task i { border-left: 1px solid var(--hf-line); }
.hf-burden-map { margin-top: 9vw; display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid rgba(240,239,233,.3); }
.hf-burden-map > div { min-height: 410px; padding: clamp(28px,4vw,58px); border-right: 1px solid rgba(240,239,233,.3); display: flex; flex-direction: column; }
.hf-burden-map > div:last-child { border-right: 0; }
.hf-burden-map span, .hf-routing span, .hf-device-field article > span, .hf-breakpoint-note span { color: var(--hf-orange); font: 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hf-burden-map strong { margin-top: auto; font-size: clamp(36px,4vw,62px); line-height: .95; letter-spacing: -.05em; }
.hf-burden-question ul { margin: auto 0; }
.hf-burden-question li { padding: 13px 0; border-top: 1px solid rgba(240,239,233,.25); color: rgba(240,239,233,.68); font-size: 15px; list-style: none; }
.hf-burden-result strong { color: var(--hf-orange); }
.hf-routing { margin-top: 9vw; border: 1px solid var(--hf-ink); display: grid; grid-template-columns: .8fr 1fr .8fr; }
.hf-routing > div { min-height: 480px; padding: clamp(28px,4vw,58px); border-right: 1px solid var(--hf-ink); display: flex; flex-direction: column; }
.hf-routing > div:last-of-type { border-right: 0; }
.hf-routing-user strong { margin-top: auto; font-size: 12px; }
.hf-routing-user i { margin-top: 7px; padding: 13px; border: 1px solid var(--hf-line); font: 11px var(--font-mono); font-style: normal; }
.hf-routing-user button { margin-top: 18px; padding: 14px; border: 0; background: var(--hf-orange); color: white; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.hf-routing-engine div { margin: auto 0; }
.hf-routing-engine i, .hf-routing-sources i { display: block; padding: 13px 0; border-top: 1px solid var(--hf-line); color: var(--hf-muted); font-size: 15px; font-style: normal; }
.hf-routing-engine strong { color: var(--hf-orange); font-size: 20px; }
.hf-routing-sources i:first-of-type { margin-top: auto; }
.hf-routing figcaption { border-color: var(--hf-ink); }
.hf-device-field { margin-top: 9vw; border-top: 1px solid rgba(240,239,233,.3); }
.hf-device-field article { width: var(--w); padding: 25px 0; border-bottom: 1px solid rgba(240,239,233,.3); }
.hf-device-field article > div { margin: 16px 0 10px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; }
.hf-device-field b, .hf-device-field i, .hf-device-field strong { padding: 12px; border: 1px solid rgba(240,239,233,.3); font: 11px var(--font-mono); font-style: normal; }
.hf-device-field i { color: rgba(240,239,233,.55); }
.hf-device-field strong { background: var(--hf-orange); color: white; }
.hf-device-field small { color: rgba(240,239,233,.58); font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hf-breakpoint-note { margin: 55px 0 0 45%; padding-top: 25px; border-top: 1px solid rgba(240,239,233,.3); display: grid; grid-template-columns: .5fr 1.5fr; gap: 4vw; }
.hf-breakpoint-note p { color: rgba(240,239,233,.58); font-size: 17px; line-height: 1.6; }
.hf-invariants article strong { display: block; margin-top: 35px; font-size: clamp(28px,3vw,46px); }
.hf-pair { margin-top: 8vw; display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid rgba(240,239,233,.3); border-bottom: 1px solid rgba(240,239,233,.3); }
.hf-pair article { min-height: 390px; padding: clamp(28px,4vw,58px); display: flex; flex-direction: column; }
.hf-pair > i { padding: 0 30px; border-left: 1px solid rgba(240,239,233,.3); border-right: 1px solid rgba(240,239,233,.3); display: flex; align-items: center; color: var(--hf-orange); font-size: 38px; font-style: normal; }
.hf-pair strong { margin-top: auto; font-size: clamp(38px,5vw,74px); line-height: .92; letter-spacing: -.055em; }
.hf-pair p { margin-top: 20px; color: rgba(240,239,233,.52); }

.hf-next { padding-top: 9vw; padding-bottom: 9vw; background: var(--hf-ink); color: var(--hf-paper); }
.hf-next > div { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 35px; color: rgba(240,239,233,.6); font: 11px/1.5 var(--font-mono); text-transform: uppercase; }
.hf-next > div a { color: inherit; text-decoration: none; }
.hf-next > a { border: 1px solid rgba(240,239,233,.3); color: inherit; text-decoration: none; display: grid; grid-template-columns: 1.2fr 1fr; }
.hf-next-visual { min-height: 410px; overflow: hidden; background: var(--hf-paper); }
.hf-next-visual img { width: 100%; height: 100%; object-fit: cover; }
.hf-next-copy { padding: clamp(28px,4vw,60px); border-left: 1px solid rgba(240,239,233,.3); display: flex; flex-direction: column; }
.hf-next-copy span { color: var(--hf-orange); font: 11px/1.5 var(--font-mono); text-transform: uppercase; }
.hf-next-copy strong { margin-top: auto; font-size: clamp(38px,4vw,64px); line-height: .95; }
.hf-next-copy i { align-self: flex-end; color: var(--hf-orange); font-size: 40px; font-style: normal; }
.hf-next-lab { padding: 45px; background: #d7ff36; color: var(--hf-ink); display: flex; justify-content: space-between; align-items: flex-end; }
.hf-next-lab span { font-size: clamp(120px,18vw,280px); font-weight: 900; line-height: .7; letter-spacing: -.09em; }
.hf-next-lab i { font-size: 52px; font-style: normal; }

.hf-footer { margin: 0 var(--site-gutter); padding: 36px 0 28px; border-top: 1px solid var(--hf-ink); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 4vw; font-size: 11px; }
.hf-footer > a { color: inherit; font-size: 17px; font-weight: 800; text-decoration: none; }
.hf-footer div { display: flex; flex-direction: column; gap: 8px; }
.hf-footer div a { color: inherit; text-decoration: none; }
.hf-footer p { color: var(--hf-muted); line-height: 1.5; }
.hf-footer small { grid-column: 1 / -1; margin-top: 42px; color: rgba(16,17,14,.5); font: 11px var(--font-mono); }

/* Standard Bank hands off to the paired case study on a distinct light field. */
.hf-ivr .hf-next { background: var(--hf-paper); color: var(--hf-ink); border-top: 1px solid var(--hf-ink); }
.hf-ivr .hf-next > div { color: var(--hf-muted); }
.hf-ivr .hf-next > a { border-color: var(--hf-ink); }
.hf-ivr .hf-next-copy { border-color: var(--hf-ink); }

/* IVR narrative statements share one left edge instead of floating in the grid. */
.hf-ivr .hf-dark blockquote, .hf-ivr .hf-light blockquote { padding-left: 0; }
.hf-ivr .hf-observation { grid-template-columns: 1fr; gap: 18px; }
.hf-ivr .hf-observation p { max-width: 1100px; }
.hf-ivr .hf-throughline-copy { margin-left: 0; max-width: 1100px; }

/* HDFC uses the same page-gutter alignment and a shorter, evidence-led narrative. */
.hf-hdfc .hf-section-intro { grid-template-columns: 1fr; gap: 32px; }
.hf-hdfc .hf-section-intro > p { max-width: 900px; }
.hf-hdfc .hf-dark blockquote, .hf-hdfc .hf-light blockquote { padding-left: 0; max-width: 1200px; }
.hf-hdfc .hf-throughline-copy { margin-left: 0; max-width: 900px; grid-template-columns: 1fr; gap: 18px; }
.hf-hdfc .hf-breakpoint-note { margin-left: 0; max-width: 900px; grid-template-columns: 1fr; gap: 18px; }
.hf-hdfc-close { color: var(--hf-ink); }
.hf-hdfc-close .hf-index { border-color: var(--hf-ink); }
.hf-hdfc-close .hf-throughline-copy p { color: var(--hf-muted); }

@media (max-width: 900px) {
  .hf-thesis, .hf-section-intro { grid-template-columns: 1fr 1fr; gap: 5vw; }
  .hf-ia-model, .hf-five-labels, .hf-one-task { min-height: 390px; padding: 30px; }
  .hf-ia-model ul { grid-template-columns: 1fr; }
  .hf-ia-model li:nth-child(even) { padding-left: 0; border-left: 0; }
  .hf-audio-laws article, .hf-burden-map > div { min-height: 330px; padding: 28px; }
  .hf-recovery-flow { grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; }
  .hf-recovery-flow > i { padding: 0; font-size: 0; }
  .hf-case .nav-links { gap: 20px; }
}

@media (max-width: 700px) {
  .hf-case .nav { height: 64px; }
  .hf-case .nav-inner { padding: 0 18px; }
  .hf-case .logo-name { display: none; }
  .hf-case .nav-mobile-menu { top: 64px; }
  .hf-hero { padding-top: 92px; }
  .hf-topline p:last-child { display: none; }
  .hf-name { margin-top: 80px; }
  .hf-name h1 { font-size: clamp(82px,27vw,118px); line-height: .78; }
  .hf-thesis, .hf-section-intro { margin-top: 80px; display: block; }
  .hf-thesis h2, .hf-section-intro h2 { font-size: 54px; line-height: .9; }
  .hf-thesis > p, .hf-section-intro > p { margin-top: 38px; font-size: 17px; }
  .hf-meta { grid-template-columns: 1fr 1fr; }
  .hf-meta > div:nth-child(2) { border-right: 0; }
  .hf-meta > div:nth-child(n+3) { border-top: 1px solid var(--hf-line); }
  .hf-meta > div:nth-child(3) { padding-left: 0; }
  .hf-ia, .hf-collapse { display: flex; flex-direction: column; }
  .hf-ia-head, .hf-collapse-head { flex-direction: column; }
  .hf-ia-model, .hf-five-labels, .hf-one-task { min-height: 350px; }
  .hf-ia-arrow, .hf-router { min-height: 130px; border: 0; border-top: 1px solid var(--hf-ink); border-bottom: 1px solid var(--hf-ink); }
  .hf-ia-arrow { flex-direction: row; }
  .hf-ia-arrow span { writing-mode: initial; transform: none; }
  .hf-router { display: flex; flex-direction: row; align-items: center; gap: 22px; }
  .hf-router b { font-size: 55px; }
  .hf-router i { margin: 0; }
  .hf-router span { margin: 0; }
  .hf-audio-laws, .hf-burden-map, .hf-supporting-decisions, .hf-invariants { display: block; }
  .hf-audio-laws article, .hf-burden-map > div { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(240,239,233,.28); }
  .hf-audio-laws article:last-child, .hf-burden-map > div:last-child { border-bottom: 0; }
  .hf-dark blockquote, .hf-light blockquote { padding-left: 0; font-size: 32px; }
  .hf-phrase-test { display: flex; flex-direction: column; }
  .hf-phrase-test article { min-height: 390px; padding: 28px 20px; }
  .hf-phrase-test article > p { font-size: 38px; }
  .hf-same-words { min-height: 100px; border: 0; border-top: 1px solid var(--hf-ink); border-bottom: 1px solid var(--hf-ink); flex-direction: row; }
  .hf-same-words span { writing-mode: initial; transform: none; }
  .hf-insight-line { grid-template-columns: 1fr auto; }
  .hf-insight-line p { grid-column: 1 / -1; }
  .hf-woz { display: flex; flex-direction: column; }
  .hf-room { min-height: 360px; }
  .hf-partition { min-height: 100px; border: 0; border-top: 1px solid rgba(240,239,233,.3); border-bottom: 1px solid rgba(240,239,233,.3); flex-direction: row; }
  .hf-partition span { writing-mode: initial; }
  .hf-observation { grid-template-columns: 1fr; }
  .hf-recovery-flow { display: block; }
  .hf-recovery-flow article { min-height: 230px; border-bottom: 1px solid var(--hf-line); }
  .hf-recovery-flow > i { height: 54px; padding: 0; border: 0; border-bottom: 1px solid var(--hf-line); justify-content: center; writing-mode: initial; font-size: 11px; }
  .hf-supporting-decisions article, .hf-invariants article { padding: 25px 0; border-bottom: 1px solid var(--hf-line); }
  .hf-throughline > h2 { margin-top: 75px; font-size: 62px; }
  .hf-throughline-copy { margin: 70px 0 0; grid-template-columns: 1fr; }
  .hf-routing { display: flex; flex-direction: column; }
  .hf-routing > div { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--hf-ink); }
  .hf-device-field article { width: 100%; }
  .hf-device-field article > div { grid-template-columns: auto 1fr; }
  .hf-device-field article > div strong { grid-column: 1 / -1; text-align: center; }
  .hf-breakpoint-note { margin-left: 0; grid-template-columns: 1fr; }
  .hf-pair { display: block; }
  .hf-pair article { min-height: 320px; }
  .hf-pair > i { min-height: 70px; padding: 0; border: 0; border-top: 1px solid rgba(240,239,233,.3); border-bottom: 1px solid rgba(240,239,233,.3); justify-content: center; }
  .hf-next > div { flex-direction: column; }
  .hf-next > a { display: flex; flex-direction: column; }
  .hf-next-visual { min-height: 0; aspect-ratio: 16/9; }
  .hf-next-copy { min-height: 310px; border-left: 0; border-top: 1px solid rgba(240,239,233,.3); }
  .hf-next-lab { aspect-ratio: 16/9; }
  .hf-footer { grid-template-columns: 1fr 1fr; gap: 35px 20px; }
  .hf-footer p { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .hf-name h1 { font-size: 80px; }
  .hf-thesis h2, .hf-section-intro h2 { font-size: 48px; }
  .hf-phrase-test article > p { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-case * { scroll-behavior: auto !important; }
}