/* Supplied Hyvon Labs brand fonts. */
/* All supplied font files are trial assets with embedded markings, so the live site uses a clean system sans until licensed webfonts are supplied. */
:root{--font-display:'Helvetica Neue',Arial,sans-serif;--font-text:'Helvetica Neue',Arial,sans-serif}
body{font-family:var(--font-text)}
h1,h2,h3,.hero-title,.statement-line span,.article h3,.work-copy h3{font-family:var(--font-display)}
.brand{display:inline-flex;align-items:center;width:max-content}
.brand-logo{display:block;width:106px;height:34px;object-fit:contain}
.site-header{background:rgba(22,22,22,.97)}
.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;background:var(--orange);color:var(--paper);font-weight:600;transition:background 180ms var(--hover),transform 180ms var(--hover)}
.header-cta:hover{background:#ff6a50;color:var(--paper);transform:translateY(-1px)}
.hero-grid{position:relative;background:#161616 url('public/assets/hero-contour-grid.svg') center/cover no-repeat}
.hero-title{max-width:none}
.hero-title span{white-space:nowrap}
.hero-title span:nth-child(1)::after{content:' '}
.hero-title span:nth-child(3){display:block}
.hero-art:after{background:linear-gradient(90deg,#161616 0%,rgba(22,22,22,.25) 23%,transparent 48%)}
.hero-art img{width:100%;height:100%;object-position:center;transform:none;opacity:.16}
.hero.is-ready .hero-art img{animation:structural-hero 1050ms var(--ease) both}
.decision-point{display:none}
.button{justify-content:center;min-width:184px;gap:0}
.button-primary{color:var(--paper)}
.button-secondary{background:var(--paper);color:var(--ink);transition:transform 180ms var(--hover),background 180ms var(--hover),color 180ms var(--hover)}
.button-secondary:hover{background:#e9e8e4;color:var(--ink)}
.menu-button{width:42px;height:42px;padding:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-button span{display:block;width:21px;height:1px;background:var(--paper);transition:transform 180ms var(--hover),opacity 180ms var(--hover)}
.menu-button[aria-expanded='true'] span:first-child{transform:translateY(6px) rotate(45deg)}
.menu-button[aria-expanded='true'] span:nth-child(2){opacity:0}
.menu-button[aria-expanded='true'] span:last-child{transform:translateY(-6px) rotate(-45deg)}
@keyframes structural-hero{from{opacity:.02;transform:translateX(-3%) scale(1.015)}to{opacity:1;transform:none}}
@media (max-width:1023px){.hero-art img{width:100%;height:100%;transform:none;object-position:center}.header-cta{display:none}.menu-button{display:flex}.primary-nav a{padding:14px 0}.primary-nav a:not(:last-child){border-bottom:1px solid rgba(249,249,249,.2)}}
@media (max-width:600px){.hero-title{font-size:clamp(35px,10.75vw,42px);line-height:.94;letter-spacing:-.06em}.hero-title span,.hero-title span:nth-child(3){display:block}.hero-title span:nth-child(1)::after{content:''}.hero-art img{width:100%;height:100%;transform:none;object-position:center}.hero.is-ready .hero-art img{animation:structural-hero-mobile 1050ms var(--ease) both}.hero-actions{width:100%}.button{width:100%;min-width:0}.hero-grid{background-size:auto 100%}}
@keyframes structural-hero-mobile{from{opacity:.02;transform:translateY(2%) scale(1.01)}to{opacity:1;transform:none}}
@media (max-width:899px) and (min-width:601px){.hero-grid{display:flex;flex-direction:column;min-height:0}.hero-copy{width:100%;padding:68px 0 42px}.hero-art{width:100%;min-height:400px;border-top:1px solid var(--line);border-left:0}.hero-art img{width:100%;height:100%;object-position:center 52%}.hero-actions{width:auto}.button{width:auto;min-width:184px}.hero-grid{background-size:cover}}

/* Approach: a clear decision statement, then its supporting visual/video surface. */
.topography-layout{display:flex;flex-direction:column;align-items:stretch;gap:64px}
.topography-copy{max-width:820px;padding-right:0}
.topography-cta{margin-top:36px}
.topography-visual{width:100%;min-height:clamp(400px,52vw,620px)}

/* Keep the 1→100 insight inside the statement, as supporting evidence rather than a separate feature. */
.statement-grid div>p{font-size:16px}
.statement-content .statement-line{max-width:600px;margin-top:48px;padding-top:18px}
.statement-content .statement-line span{max-width:500px;font-size:clamp(24px,2.25vw,34px);line-height:1.04}

/* Services: titles establish the left edge; descriptions finish at the far-right edge. */
.services-heading h2{justify-self:end;text-align:right}
.service{grid-template-columns:1fr 4fr 5fr}
.service p{justify-self:end}

/* Proof becomes a complete numbered ledger, not three isolated boxes. */
.proof-grid{grid-template-columns:3fr 7fr;margin-top:72px}
.proof-grid p,.proof-grid p:last-child{grid-column:2;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;min-height:0;padding:30px 0;border-right:0;border-top:0;border-bottom:1px solid var(--line);font-size:clamp(28px,3.1vw,46px);line-height:1.02;letter-spacing:-.055em}
.proof-grid p:last-child{border-bottom:0}
.proof-grid p span{color:var(--orange);font-size:12px;letter-spacing:.04em}
.proof-grid p strong{font:inherit;font-weight:400}

/* Thinking stays compact and resolves to the right edge. */
.thinking-header h2{justify-self:end;max-width:760px;font-size:clamp(34px,3.4vw,54px);text-align:right}
.article{grid-template-columns:3fr 7fr}
.article h3{justify-self:end;max-width:760px;font-size:clamp(24px,2.5vw,38px);text-align:right}

/* AA-safe label contrast on the signal-orange conversion section. */
.final-cta .eyebrow{color:var(--ink)}

@media (max-width:1350px){
  .topography-visual{min-height:clamp(360px,52vw,500px)}
}
@media (max-width:899px){
  .statement-grid,.services-heading,.work-heading,.proof-head,.thinking-header{display:block}
  .statement-grid .eyebrow,.services-heading .eyebrow,.work-heading .eyebrow,.proof-head .eyebrow,.thinking-header .eyebrow{margin-bottom:22px}
  .statement-grid h2,.services-heading h2,.work-heading h2,.proof-head h2,.thinking-header h2{max-width:760px}
  .service{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:28px 0}
  .service p,.service a{grid-column:2;justify-self:start}
  .service a{margin-top:4px}
  .work-feature{display:flex;flex-direction:column;gap:34px;min-height:0}
  .surface-visual{min-height:clamp(340px,55vw,480px)}
  .work-copy{max-width:700px;padding:0}
  .proof-grid{grid-template-columns:1fr;margin-top:62px}
  .proof-grid p,.proof-grid p:last-child{min-height:150px;border-right:0;border-top:0;border-bottom:1px solid var(--line)}
  .proof-grid p:last-child{border-bottom:0}
}
@media (max-width:700px){
  .current-index{grid-template-columns:1fr 1fr}
  .current-index article:nth-child(2){border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .topography-layout{gap:44px}
  .topography-cta{margin-top:30px}
}
@media (max-width:899px){
  .proof-grid p,.proof-grid p:last-child{grid-column:1;grid-template-columns:34px minmax(0,1fr);min-height:0;padding:26px 0;font-size:clamp(25px,5vw,38px)}
}

/* Typography system: one reading ladder across the complete homepage. */
:root{
  --type-hero:clamp(54px,5.1vw,80px);
  --type-section:clamp(38px,3.7vw,58px);
  --type-feature:clamp(32px,3.1vw,46px);
  --type-list:clamp(22px,2.2vw,30px);
  --type-body:16px;
  --type-meta:11px;
}
body{font-weight:400;line-height:1.5}
.eyebrow{font-size:var(--type-meta);font-weight:600;line-height:1.2;letter-spacing:.1em}
.hero-title{max-width:900px;font-size:var(--type-hero);font-weight:400;line-height:.94;letter-spacing:-.064em}
.hero-summary{font-size:18px;line-height:1.42}
.hero-qualification,.current-index p,.service p,.work-copy>p:not(.eyebrow),.final-cta p:not(.eyebrow){font-size:var(--type-body);line-height:1.5}
.statement-grid h2,.topography-copy h2,.services-heading h2,.work-heading h2,.proof-head h2,.thinking-header h2,.final-cta h2{font-size:var(--type-section);font-weight:400;line-height:1.04;letter-spacing:-.056em}
.statement-grid div>p,.topography-copy>p{font-size:var(--type-body);line-height:1.5}
.statement-content .statement-line span{font-size:clamp(23px,2vw,32px);font-weight:500;line-height:1.08;letter-spacing:-.048em}
.current-index h2{font-size:18px;font-weight:500;line-height:1.08;letter-spacing:-.042em}
.service h3{font-size:var(--type-list);font-weight:500;line-height:1.1;letter-spacing:-.045em}
.work-copy h3{font-size:var(--type-feature);font-weight:400;line-height:1.06;letter-spacing:-.054em}
.proof-grid p,.proof-grid p:last-child{font-size:clamp(26px,2.7vw,40px);font-weight:400;line-height:1.08;letter-spacing:-.05em}
.article h3{font-size:clamp(23px,2.25vw,34px);font-weight:400;line-height:1.08;letter-spacing:-.048em}
.button,.header-cta{font-size:15px;font-weight:600;letter-spacing:-.01em}
.primary-nav{font-size:14px;font-weight:500}
@media (max-width:600px){
  .hero-title{font-size:clamp(35px,10.4vw,42px);line-height:.94}
  .hero-summary{font-size:16px}
  .statement-grid h2,.topography-copy h2,.services-heading h2,.work-heading h2,.proof-head h2,.thinking-header h2,.final-cta h2{font-size:clamp(34px,9vw,42px);line-height:1.06}
  .work-copy h3{font-size:clamp(30px,8.5vw,38px)}
  .proof-grid p,.proof-grid p:last-child{font-size:clamp(24px,6.5vw,30px)}
  .article h3{font-size:clamp(22px,6vw,28px)}
  .current-index h2{font-size:17px}
}

/* Mobile Current Index: every module belongs to one fully ruled 2×2 grid. */
@media (max-width:600px){
  .current-index{border:1px solid var(--line)}
  .current-index article{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .current-index article:nth-child(2n){border-right:0}
  .current-index article:nth-last-child(-n + 2){border-bottom:0}
}

/* Right-edge editorial alignment for the closing content sections. */
.work-heading h2,.proof-head h2,.thinking-header h2{justify-self:end;width:100%;max-width:none;text-align:right}
.work-copy{max-width:none;padding-right:0;text-align:right}
.work-copy h3,.work-copy>p:not(.eyebrow){margin-left:auto}
.proof-grid p strong{justify-self:end;max-width:760px;text-align:right}
.thinking-header h2,.article h3{max-width:none}

/* Approach copy needs a slower, clearer vertical rhythm before the visual. */
.topography-layout{gap:80px}
.topography-copy .eyebrow{margin:0;color:var(--orange);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.topography-copy h2{margin-top:20px}
.topography-copy>p:not(.eyebrow){margin-top:34px}
.topography-cta{margin-top:44px}
@media (max-width:600px){
  .topography-layout{gap:56px}
  .topography-copy h2{margin-top:16px}
  .topography-copy>p:not(.eyebrow){margin-top:28px}
  .topography-cta{margin-top:36px}
}

/* Approved site-wide reading direction: all website copy is left aligned. */
body{text-align:left}
main :is(h1,h2,h3,p,span,strong,a,button),.site-header :is(a,button),.site-footer :is(p,span,a){text-align:left}

/* Lenis keeps native layout while taking ownership of the scroll interpolation. */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis.lenis-stopped{overflow:clip}
html.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* Restore the shared editorial sections to the same left-aligned reading edge. */
.services-heading h2,.work-heading h2,.proof-head h2,.thinking-header h2{justify-self:start;text-align:left}
.work-copy{padding-left:0;text-align:left}
.work-copy h3,.work-copy>p:not(.eyebrow){margin-left:0}
.proof-grid p strong{justify-self:start;text-align:left}
.article h3{justify-self:start;text-align:left}

/* Section taglines are editorial labels, not actions: a compact orange-glass cue
   makes the argument's category immediately scannable without competing with it. */
.eyebrow{
  display:inline-flex;
  align-items:center;
  align-self:start;
  justify-self:start;
  width:max-content;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(254,75,47,.5);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(254,75,47,.22),rgba(254,75,47,.1));
  box-shadow:inset 0 1px 0 rgba(249,249,249,.14),0 1px 8px rgba(0,0,0,.08);
  color:var(--paper);
  font-size:10px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}
.topography-copy .eyebrow{color:var(--paper)}
.thinking-section .eyebrow{
  border-color:rgba(195,39,19,.35);
  background:linear-gradient(135deg,rgba(254,75,47,.14),rgba(254,75,47,.05));
  box-shadow:inset 0 1px 0 rgba(249,249,249,.72);
  color:#9f2c1d;
}
.final-cta .eyebrow{
  border-color:rgba(22,22,22,.32);
  background:rgba(249,249,249,.16);
  box-shadow:inset 0 1px 0 rgba(249,249,249,.3);
  color:var(--ink);
}

/* Approved 1→100 hierarchy refinement. */
.statement-grid .statement-content > p{font-size:15px}
.statement-content .statement-line span{font-size:clamp(21px,calc(2vw - 2px),30px)}
.statement-content .statement-line{border-top:0}

/* The 1→100 problem sits within a quiet structural field: background order, not decoration. */
.statement-section{position:relative;isolation:isolate;overflow:clip}
.statement-section::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:12% 0 8%;
  pointer-events:none;
  background:url("public/assets/hero-contour-grid.svg") center / cover no-repeat;
  opacity:.72;
  mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
}

/* The approach section leads with its practical consequence, not its headline. */
.topography-copy h2{opacity:.42}
.topography-copy>p:not(.eyebrow){color:var(--paper);font-weight:600}

/* Page chapters move by tonal and spatial rhythm, not enclosing strokes. */
.section,.hero-grid,.current-index{border-top:0;border-bottom:0}

/* The orange conversion field needs a fully legible inverse category marker. */
.final-cta .eyebrow{
  background:var(--paper);
  border-color:rgba(22,22,22,.28);
  color:var(--ink);
  box-shadow:none;
}

/* Footer group labels are plain metadata, not category pills. */
.site-footer .eyebrow{
  display:block;
  width:auto;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--orange);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* The service menu is an inverse decision ledger: warm paper, precise dark rules. */
.services-section{background:var(--paper);color:var(--ink)}
.services-section .eyebrow,.services-section .service>span{color:#c32713}
.services-section .services-list{border-top-color:rgba(22,22,22,.24)}
.services-section .service{border-bottom-color:rgba(22,22,22,.24)}
.services-section .service p{color:#50545b}

/* Keep responsive image sources as layout-neutral media inside their existing visual shells. */
.hero-art picture,.topography-visual picture,.surface-visual picture{display:block;width:100%;height:100%}

/* Hero film: one quiet structural resolution, then its final frame remains. */
.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
@media (prefers-reduced-motion:no-preference){.hero.is-ready .hero-video{animation:structural-hero 420ms var(--ease) both}}

/* Mobile Current Index retains a complete 2×2 outer frame. */
@media (max-width:600px){
  .current-index{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
}

/* Lucide icons: quiet functional marks that support the editorial hierarchy. */
.lucide-icon{display:block;flex:0 0 auto;width:24px;height:24px;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.index-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.current-index .lucide-icon{width:20px;height:20px;opacity:.92}
.thinking-section .lucide-icon{stroke:#c32713}
.proof-grid p,.proof-grid p:last-child{grid-template-columns:32px minmax(0,1fr)}
.proof-grid .lucide-icon{align-self:start;margin-top:3px}
.article{grid-template-columns:3fr 7fr}
.thinking-section .lucide-icon{align-self:start;margin-top:3px;width:22px;height:22px}
@media (max-width:899px){
  .proof-grid p,.proof-grid p:last-child{grid-template-columns:28px minmax(0,1fr)}
  .article{grid-template-columns:28px minmax(0,1fr)}
}
@media (max-width:600px){
  .current-index .lucide-icon{width:19px;height:19px}
  .proof-grid .lucide-icon,.thinking-section .lucide-icon{width:21px;height:21px}
}

/* Independent work is an index of founder-built products, not a client-results grid. */
.work-heading{grid-template-columns:3fr 7fr}
.work-heading h2{grid-column:2;margin-bottom:0}
.work-heading>p:not(.eyebrow){grid-column:2;max-width:540px;margin:22px 0 0;color:var(--muted);font-size:var(--type-body);line-height:1.5}
.work-index{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:80px}
.work-card{display:flex;min-height:570px;flex-direction:column;border-top:1px solid var(--line);color:var(--paper);cursor:pointer}
.work-card:focus-visible{outline-offset:8px}
.work-card .surface-visual{min-height:340px;transition:none}
.work-card .work-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:28px 0 8px}
.work-card .work-copy h3{max-width:590px;margin:18px 0 14px}
.work-card .work-copy>p:not(.eyebrow){max-width:470px;margin:0;color:var(--muted)}
.repo-visual{position:relative;min-height:340px;overflow:hidden;background:#111;border-bottom:1px solid var(--line)}
.repo-visual::before,.repo-visual::after{content:"";position:absolute;background:rgba(249,249,249,.13)}
.repo-visual::before{width:1px;top:0;bottom:0;left:50%}
.repo-visual::after{height:1px;left:0;right:0;top:50%}
.repo-grid{position:absolute;inset:14%;background-image:radial-gradient(circle,rgba(249,249,249,.66) 1px,transparent 1.5px);background-size:14px 14px;mask-image:linear-gradient(135deg,transparent 0%,#000 30%,#000 75%,transparent 100%)}
.repo-marker{position:absolute;top:46%;left:calc(50% - 5px);width:10px;height:10px;background:var(--orange)}

/* Founder portrait is an identity-preserved editorial treatment of the supplied photograph. */
.founder-section{background:var(--ink-2)}
.founder-grid{display:grid;grid-template-columns:7fr 5fr;gap:16px;align-items:end}
.founder-copy{max-width:740px;padding-right:64px}
.founder-copy h2{margin:20px 0 30px;font-size:var(--type-section);font-weight:400;line-height:1.04;letter-spacing:-.056em}
.founder-copy>p:not(.eyebrow){max-width:560px;margin:0 0 18px;color:#d8d9d4;font-size:18px;line-height:1.5}
.founder-copy .founder-meta{margin-top:38px;color:var(--paper);font-size:13px;font-weight:600}
.founder-portrait{margin:0}
.founder-portrait img{display:block;width:100%;height:500px;object-fit:cover;object-position:50% 24%;background:var(--ink)}
.founder-portrait figcaption{padding-top:12px;color:var(--muted);font-size:12px}

.booking-dialog{width:min(940px,calc(100vw - 40px));height:min(760px,calc(100vh - 40px));padding:0;border:1px solid rgba(249,249,249,.28);background:var(--ink);color:var(--paper)}
.booking-dialog::backdrop{background:rgba(12,12,12,.78)}
.booking-dialog iframe{display:block;width:100%;height:100%;border:0;background:var(--paper)}
.booking-dialog-close{position:absolute;z-index:1;top:12px;right:12px;min-height:40px;padding:10px 14px;border:1px solid rgba(249,249,249,.32);background:var(--ink);color:var(--paper);font:inherit;font-size:12px;cursor:pointer}
.booking-dialog-close:hover{border-color:var(--orange);color:var(--orange)}
.booking-dialog-close:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Case-studies index: two projects, held as an editorial list until their full reports are published. */
.case-index-hero{padding:150px 0 112px;background:var(--ink)}
.case-index-copy{max-width:920px;margin-left:calc((100% - min(calc(100% - (var(--margin)*2)),var(--max)))/2)}
.case-index-copy h1{max-width:860px;margin:22px 0 28px;font-size:var(--type-hero);font-weight:400;line-height:.94;letter-spacing:-.064em}
.case-index-copy>p:not(.eyebrow){max-width:590px;margin:0;color:#d8d9d4;font-size:18px;line-height:1.5}
.case-index-list{padding:0 0 144px;background:var(--paper);color:var(--ink)}
.case-index-row{display:grid;grid-template-columns:1fr 7fr 2fr;gap:16px;padding:54px 0;border-top:1px solid rgba(22,22,22,.25);scroll-margin-top:100px}
.case-index-row:first-child{border-top:0}
.case-index-number{color:#c32713;font-size:13px;font-weight:600}
.case-index-row .eyebrow{color:#9f2c1d;border-color:rgba(195,39,19,.35);background:linear-gradient(135deg,rgba(254,75,47,.14),rgba(254,75,47,.05));box-shadow:none}
.case-index-row h2{max-width:770px;margin:22px 0 20px;font-size:var(--type-feature);font-weight:400;line-height:1.06;letter-spacing:-.054em}
.case-index-row div>p:not(.eyebrow){max-width:610px;margin:0;color:#50545b;font-size:16px;line-height:1.5}
.case-index-status{margin:0;color:#50545b;font-size:12px;line-height:1.45}

@media (max-width:899px){
  .work-heading{display:block}
  .work-heading .eyebrow{margin-bottom:22px}
  .work-heading>p:not(.eyebrow){margin-top:22px}
  .work-index{margin-top:60px}
  .founder-grid{grid-template-columns:1fr 1fr}
  .founder-copy{padding-right:32px}
  .founder-portrait img{height:420px}
  .case-index-hero{padding:120px 0 90px}
  .case-index-list{padding-bottom:104px}
  .case-index-row{grid-template-columns:44px minmax(0,1fr);padding:44px 0}
  .case-index-status{grid-column:2}
}
@media (max-width:600px){
  .work-index{grid-template-columns:1fr;gap:48px}
  .work-card{min-height:0}
  .work-card .surface-visual,.repo-visual{min-height:280px}
  .work-card .work-copy{min-height:260px;padding-top:22px}
  .work-card .work-copy h3{font-size:clamp(30px,8.5vw,38px)}
  .founder-grid{display:flex;flex-direction:column;gap:48px}
  .founder-copy{padding-right:0}
  .founder-copy>p:not(.eyebrow){font-size:16px}
  .founder-portrait{width:100%}
  .founder-portrait img{height:390px}
  .booking-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;border:0}
  .case-index-hero{padding:96px 0 72px}
  .case-index-copy{width:calc(100% - (var(--margin)*2));margin:auto}
  .case-index-copy h1{font-size:clamp(38px,10vw,48px)}
  .case-index-copy>p:not(.eyebrow){font-size:16px}
  .case-index-list{padding-bottom:80px}
  .case-index-row{grid-template-columns:1fr;gap:18px;padding:38px 0}
  .case-index-status{grid-column:1}
  .case-index-row h2{font-size:clamp(29px,8vw,37px)}
}