/* Home: white page, near-black ink, two greys and one coral accent; Geist grotesk display (Patensify palette and type), hairlines, large work. */
.home-page {
  --ink: #121212; --g: #8f8f8f; --muted: #6b6b6b; --line: #e8e8e8; --wash: #f5f5f5; --coral: #e36f58; --accent: #121212; --accent-wash: #f3f3f3;
  --f-body: "Geist", "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-serif: "Geist", "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-num: var(--f-serif);
  --f-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;
  --f-display: var(--f-serif);
  --col: 1320px; --gut: clamp(16px, 3.2vw, 48px);
  --ease: cubic-bezier(.2,.7,.1,1);
  background: #fff; color: var(--ink); font-family: var(--f-body);
}
.home-page .wrap { max-width: calc(var(--col) + 2 * var(--gut)); padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.home-page section { padding-block: clamp(80px, 11vw, 168px); }
.home-page section + section { border-top: 0; }
.home-page .g { color: var(--g); }
.home-page .todo { color: var(--muted); background: transparent; border: 1px dashed #c9cbcf; border-radius: 2px; }
.home-page ::selection { background: #111214; color: #fff; }
.home-page a:focus-visible, .home-page button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.figs b, .three-ed b, .why3 b, .sec-h .cnt, .home-head .brand, .foot-ed .foot-word, .mail-big { font-family: var(--f-num) !important; }

/* text link with a hairline that redraws on hover */
.ln-u { position: relative; text-decoration: none; display: inline-flex; gap: .4em; align-items: baseline; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.ln-u:hover { background-size: 0 1px; background-position: 100% 100%; }
.ln-u span[aria-hidden] { transition: transform .4s var(--ease); }
.ln-u:hover span[aria-hidden] { transform: translateX(4px); }
.ln-u.big { font-size: 17px; }

/* header */
.home-head { background: #fff; border-bottom: 1px solid transparent; transition: border-color .3s; }
.home-head.scrolled { border-bottom-color: var(--line); }
.home-head .wrap { min-height: 68px; gap: 32px; flex-wrap: nowrap; }
.home-head .brand { font: 500 26px/1 var(--f-serif); letter-spacing: -.01em; align-items: baseline; gap: 1px; }
.home-head .brand small { font: 400 13px var(--f-body); color: var(--g); letter-spacing: 0; }
.home-head .nav { gap: 28px; font-size: 14px; }
.home-head .nav a { color: var(--muted); transition: color .2s; }
.home-head .nav a:hover, .home-head .nav a.on { color: var(--ink); }
.home-head .langsw { font-size: 12px; }
.home-head .langdd { margin-left: 4px; }
.home-head .head-cta { font-size: 14px; white-space: nowrap; }

/* small section label and serif headings */
.sl { font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.h2s { font: 500 clamp(34px, 4.6vw, 64px)/1.12 var(--f-serif); letter-spacing: -.015em; }
:lang(zh-CN) .h2s, .home-page:not(:lang(en)) .h2s { font-weight: 500; letter-spacing: 0; }
.sec-h { display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; row-gap: 20px; align-items: start; margin-bottom: clamp(48px, 6vw, 96px); position: relative; }
.sec-h .sl { padding-top: .9em; }
.sec-h .h2s, .sec-h .sec-note { grid-column: 2; }
.sec-h .sec-note { color: var(--muted); max-width: 34em; font-size: 15px; }
.sec-h .cnt { position: absolute; right: 0; top: 0; font: 500 clamp(34px, 4.6vw, 64px)/1.12 var(--f-serif); color: var(--g); }
.g12 { display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; }

/* hero */
.hero-ed { padding-block: clamp(40px, 6vw, 80px) 0 !important; }
.meta-row { display: flex; justify-content: space-between; gap: 16px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.meta-row .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-right: 10px; vertical-align: 1px; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hx { font: 500 clamp(44px, 7.4vw, 112px)/1.08 var(--f-serif); letter-spacing: -.01em; margin: clamp(24px, 4vw, 64px) 0 0; text-wrap: initial; }
.hx .ln { display: block; overflow: hidden; padding-bottom: .26em; margin-bottom: -.26em; }
.hx .ln > span { display: inline-block; }
html.js .hx .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
html.js .hx .ln:nth-child(2) > span { transition-delay: .12s; }
html.js .ready .hx .ln > span { transform: none; }
.hx .mark { font-style: normal; position: relative; white-space: nowrap; }
.hx .mark svg { position: absolute; left: -2%; width: 104%; bottom: -.06em; height: .22em; overflow: visible; }
.hx .mark path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .hx .mark path, .ready .hx .mark path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) .9s; }
.hero-foot { display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; margin-top: clamp(36px, 4.4vw, 64px); align-items: end; }
.hero-foot { grid-template-columns: 3fr 5fr 4fr; align-items: start; }
.hero-foot p { grid-column: 2; max-width: 30em; font-size: 17px; line-height: 1.75; color: var(--muted); }
.hero-foot .ln-u { grid-column: 2; justify-self: start; margin-top: 24px; }
.reel-fig { margin: clamp(56px, 7vw, 104px) 0 0; }
.reel-m { width: calc(100% - 2 * var(--gut)); max-width: calc(var(--col) + 200px); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #f5f8fb; transform-origin: 50% 0; will-change: transform; }
.reel-m video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-fig figcaption { display: flex; gap: 24px; align-items: baseline; padding-top: 14px; font-size: 13px; color: var(--muted); }
.fig-n { font: 400 12px var(--f-mono); color: var(--ink); white-space: nowrap; }
.fig-t { flex: 1; min-width: 0; }
.reel-ctl { all: unset; cursor: pointer; font: 400 12px var(--f-mono); letter-spacing: .06em; color: var(--ink); border-bottom: 1px solid currentColor; }
.reel-ctl [hidden] { display: none; }

/* why: three pain points under the hero */
.why-ed { padding-block: clamp(72px, 9vw, 136px) 0 !important; }
.why3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.why3 li { border-top: 1px solid var(--ink); padding: 22px 24px 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 10px; align-content: start; }
.why3 b { font: 500 40px/1 var(--f-serif); grid-row: span 2; color: var(--g); }
.why3 h3 { font: 500 clamp(22px, 2vw, 28px)/1.3 var(--f-serif); }
.why3 p { color: var(--muted); font-size: 15px; max-width: 22em; }

/* hero: training types on the right of the slogan */
.hero-cats { grid-column: 3; grid-row: 1 / span 2; padding-left: 24px; border-left: 1px solid var(--line); }
.hero-cats ol { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 20px; }
.hero-cats li { break-inside: avoid; }
.hero-cats a { display: block; padding: 7px 0; text-decoration: none; font-size: 15px; transition: transform .35s var(--ease), color .2s; }
.hero-cats a:hover { transform: translateX(4px); }
.hero-cats .more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.hero-cats .more:hover { color: var(--ink); border-color: var(--ink); }
.hero-cats sup, .chip sup { font: 400 10px var(--f-mono); color: var(--g); margin-left: 4px; vertical-align: 5px; }

/* work: filter by training type, one grid of separate pieces */
.filters { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 18px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.chip { all: unset; cursor: pointer; font-size: 15px; color: var(--muted); padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--ink); border-bottom-color: var(--ink); }
.chip:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(44px, 5vw, 72px); margin-bottom: clamp(56px, 7vw, 104px); }
.wk-grid .wk-m { aspect-ratio: 16 / 10; }
.wk-grid .wk-m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.wk:hover .wk-m img { transform: scale(1.025); }
.wk-grid .wk-c h3 { font-size: clamp(19px, 1.6vw, 22px); }
.wk-tag { display: block; margin-top: 6px; padding-left: 36px; font: 400 11px var(--f-mono); letter-spacing: .04em; color: var(--g); }
.wk-grid .wk.hide { display: none; }
.wk-grid .wk.show { animation: wkin .6s var(--ease); }
@keyframes wkin { from { opacity: 0; transform: translateY(12px); } }

/* about */
.stmt { font: 500 clamp(26px, 3.2vw, 44px)/1.42 var(--f-serif); letter-spacing: -.005em; text-wrap: pretty; }
.home-page:not(:lang(en)) .stmt { font-weight: 500; letter-spacing: 0; }
.about-b { margin-top: clamp(56px, 7vw, 112px); grid-template-columns: 3fr 4fr 5fr; align-items: start; }
.pf { margin: 0; }
.pf img { width: 100%; height: auto; max-width: 260px; aspect-ratio: 4 / 5; object-fit: cover; }
.pf figcaption { margin-top: 10px; font: 400 12px var(--f-mono); color: var(--muted); }
.bio { display: grid; gap: 16px; font-size: 15px; line-height: 1.85; color: var(--muted); padding-right: 24px; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.svc li { display: flex; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; transition: padding .4s var(--ease); }
.svc li:hover { padding-left: 8px; }
.svc li span { font: 400 12px var(--f-mono); color: var(--g); }

/* work */
.wk-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-bottom: clamp(56px, 7vw, 112px); align-items: start; }
.wk { display: block; text-decoration: none; min-width: 0; }
.wk-m { overflow: hidden; aspect-ratio: 16 / 9; background: #f5f8fb; outline: 1px solid rgba(17,18,20,.06); outline-offset: -1px; }
.wk-m video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.wk:hover .wk-m video { transform: scale(1.025); }
.wk-c { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: baseline; padding-top: 16px; }
.wk-c .n { font: 400 12px var(--f-mono); color: var(--g); }
.wk-c h3 { font: 500 clamp(20px, 1.8vw, 26px)/1.3 var(--f-serif); }
.home-page:not(:lang(en)) .wk-c h3 { font-weight: 500; }
.wk-c .t { font-size: 13px; color: var(--muted); white-space: nowrap; }
.r1 .wk { grid-column: 1 / -1; }
.r2 .wk:first-child { grid-column: 1 / span 7; }
.r2 .wk:last-child { grid-column: 9 / span 4; margin-top: clamp(80px, 14vw, 220px); }
.r3 .pull { grid-column: 1 / span 4; margin: 0; align-self: end; padding-bottom: 64px; }
.r3 .wk { grid-column: 5 / span 8; }
.pull p { font: 500 clamp(28px, 3vw, 42px)/1.3 var(--f-serif); }
.home-page:not(:lang(en)) .pull p { font-weight: 500; }
.pull span { display: block; margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 22em; }
.r4 .wk { grid-column: span 4; }
.r4 .wk:nth-child(2) { margin-top: 64px; }
.r4 .wk-c h3, .r2 .wk:last-child .wk-c h3 { font-size: 20px; }
.r5 .wk { grid-column: 1 / span 6; }
.r5 .side-note { grid-column: 8 / span 4; align-self: end; display: grid; gap: 20px; justify-items: start; padding-bottom: 64px; }
.side-note p { font: 500 clamp(20px, 1.8vw, 26px)/1.5 var(--f-serif); color: var(--muted); }
.idx { border-top: 1px solid var(--ink); margin-top: clamp(24px, 4vw, 64px); }
.idx a { display: grid; grid-template-columns: 3fr 8fr 1fr; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .5s var(--ease), color .3s; }
.idx a:hover { padding-left: 12px; }
.idx .k { font: 400 12px var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.idx b { font: 500 clamp(20px, 2.2vw, 30px)/1.3 var(--f-serif); }
.home-page:not(:lang(en)) .idx b { font-weight: 500; }
.idx .ar { justify-self: end; transition: transform .4s var(--ease); }
.idx a:hover .ar { transform: translateX(6px); }

/* process */
.three-ed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.three-ed li { border-top: 1px solid var(--ink); padding-top: 22px; display: grid; gap: 10px; align-content: start; padding-right: 24px; }
.three-ed b { font: 500 clamp(56px, 6vw, 88px)/1 var(--f-serif); font-weight: 400; }
.three-ed h3 { font: 500 20px/1.3 var(--f-body); margin-top: 18px; }
.three-ed p { color: var(--muted); font-size: 15px; }
.three-ed .t { font: 400 12px var(--f-mono); color: var(--ink); margin-top: 6px; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(72px, 9vw, 136px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figs div { padding: 32px 24px 28px 0; display: grid; gap: 12px; }
.figs div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.figs b { font: 500 clamp(56px, 7vw, 104px)/.95 var(--f-serif); letter-spacing: -.02em; font-weight: 400; }
.figs span { font-size: 13px; color: var(--muted); line-height: 1.6; }
.tl { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tl li { padding: 16px 12px 0 0; border-top: 1px solid var(--line); position: relative; display: grid; gap: 4px; }
.tl li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--ink); transition: width 1s var(--ease); transition-delay: var(--d, 0s); }
.tl li.in::before { width: 100%; }
.tl .n { font: 400 11px var(--f-mono); color: var(--g); }
.tl h3 { font: 500 15px/1.4 var(--f-body); }
.tl .d { font: 400 12px var(--f-mono); color: var(--muted); }

/* pricing */
.ptable { border-top: 1px solid var(--ink); }
.pr { display: grid; grid-template-columns: 3fr 4fr 2fr 2fr 1fr; gap: 24px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .5s var(--ease); }
.pr:hover { padding-left: 12px; }
.pr h3 { font: 500 clamp(24px, 2.4vw, 34px)/1.2 var(--f-serif); }
.home-page:not(:lang(en)) .pr h3 { font-weight: 500; }
.pr h3 small { display: block; font: 400 11px var(--f-mono); letter-spacing: .06em; color: var(--muted); margin-top: 10px; text-transform: uppercase; }
.pr p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.pr .d { font: 400 13px var(--f-mono); }
.pr .amt { font-size: 14px; }
.pr .ar { justify-self: end; transition: transform .4s var(--ease); }
.pr:hover .ar { transform: translateX(6px); }

/* faq + contact */
.faq-ed .g12 { grid-template-columns: 5fr 7fr; column-gap: clamp(24px, 5vw, 96px); }
.faq-side { display: grid; gap: 28px; align-content: start; }
.faq-side .h2s { margin-top: 8px; }
.call { display: grid; grid-template-columns: 56px 1fr; gap: 18px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.call .ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.call h3 { font: 500 17px/1.4 var(--f-body); }
.call p { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 26em; }
.call-mail { display: flex; gap: 14px; align-items: baseline; margin-top: 18px; flex-wrap: wrap; }
.call-mail .ln-u { font-size: 16px; }
.copy { all: unset; cursor: pointer; font: 400 11px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.copy:hover, .copy.ok { color: var(--ink); }
.wx { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.faq-ed .faq { border-top: 1px solid var(--ink); }
.faq-ed .faq details { padding: 0; border-bottom: 1px solid var(--line); }
.faq-ed .faq summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 17px; font-weight: 500; }
.faq-ed .faq summary::-webkit-details-marker { display: none; }
.faq-ed .faq summary::after { content: "+"; font: 300 22px/1 var(--f-body); color: var(--muted); transition: transform .4s var(--ease); }
.faq-ed .faq details[open] summary::after { transform: rotate(45deg); }
.faq-ed .faq details p { margin: -6px 0 26px; font-size: 15px; line-height: 1.85; }

/* closing */
.close-ed { padding-bottom: clamp(64px, 8vw, 120px) !important; }
.close-big { font: 500 clamp(40px, 6.4vw, 96px)/1.12 var(--f-serif); letter-spacing: -.01em; }
.home-page:lang(en) .close-big { font-weight: 400; }
.mail-big { display: inline-flex; gap: .3em; margin-top: clamp(40px, 5vw, 72px); font: 500 clamp(22px, 2.6vw, 36px)/1.2 var(--f-serif); text-decoration: none; padding-bottom: 6px; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.mail-big:hover { background-size: 0 1px; background-position: 100% 100%; }

/* footer */
.foot-ed { padding: 0 0 28px; }
.foot-ed .foot-word { font: 500 clamp(64px, 19.4vw, 290px)/.86 var(--f-serif); letter-spacing: -.035em; white-space: nowrap; padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ink); }
.foot-ed .foot-word span { color: var(--g); }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; font-size: 12px; color: var(--muted); }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* hover cursor label on work */
.cur { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 400 12px var(--f-mono); letter-spacing: .06em; transform: scale(0); transition: transform .35s var(--ease); }
.cur.on { transform: scale(1); }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* reveal: slower and softer than the shared default */
html.js .home-page .rv { transform: translateY(28px); transition-duration: 1s, 1s; }

@media (max-width: 960px) {
  .home-head .nav { display: none; }
  .home-head .langsw, .home-head .langdd { margin-left: auto; }
  .sec-h, .g12, .hero-foot { grid-template-columns: 1fr; }
  .sec-h .h2s, .sec-h .sec-note, .hero-foot p, .hero-foot .ln-u { grid-column: 1; }
  .sec-h .sl { padding-top: 0; }
  .g12 > .sl { margin-bottom: 20px; }
  .about-b { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .about-b .svc { grid-column: 1 / -1; }
  .wk-row > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .wk-grid { grid-template-columns: 1fr 1fr; }
  .hero-cats { grid-column: 1; grid-row: auto; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 40px; }
  .wk-row { row-gap: 48px; }
  .r3 .pull, .r5 .side-note { padding-bottom: 0; }
  .three-ed, .why3 { grid-template-columns: 1fr; row-gap: 40px; }
  .figs { grid-template-columns: 1fr 1fr; }
  .figs div:nth-child(3) { border-left: 0; padding-left: 0; }
  .figs div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tl { grid-template-columns: 1fr; }
  .tl li { grid-template-columns: 32px 1fr auto; padding: 14px 0; align-items: baseline; }
  .pr { grid-template-columns: 1fr auto; row-gap: 8px; }
  .pr p { grid-column: 1 / -1; grid-row: 2; }
  .pr .d { grid-row: 3; }
  .pr .amt { grid-row: 3; justify-self: end; }
  .pr .ar { display: none; }
  .faq-ed .g12 { grid-template-columns: 1fr; row-gap: 48px; }
  .idx a { grid-template-columns: 1fr auto; row-gap: 6px; }
  .idx .k { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .home-head .head-cta { display: none; }
  .meta-row { font-size: 11px; }
  .meta-row span:first-child { display: none; }
  .hx { font-size: clamp(38px, 11vw, 52px); }
  .about-b { grid-template-columns: 1fr; }
  .wk-grid { grid-template-columns: 1fr; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
  .chip { white-space: nowrap; }
  .pf img { max-width: 200px; }
  .wk-c { grid-template-columns: auto 1fr; }
  .wk-c .t { grid-column: 2; }
  .reel-fig figcaption .fig-t { display: none; }
  .reel-fig figcaption { justify-content: space-between; }
  .reel-m { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hx .ln > span { transform: none; transition: none; }
  .hx .mark path { stroke-dashoffset: 0; }
  .reel-m { transform: none !important; }
}


/* Patensify type: tight grotesk headlines, grey lead-in line, coral used once or twice */
.hx, .h2s, .close-big, .stmt, .figs b, .three-ed b, .foot-ed .foot-word, .sec-h .cnt { letter-spacing: -.035em; }
.home-page:not(:lang(en)) .hx, .home-page:not(:lang(en)) .h2s, .home-page:not(:lang(en)) .close-big, .home-page:not(:lang(en)) .stmt { letter-spacing: -.01em; font-weight: 600; }
.hx { font-weight: 600; line-height: 1.06; }
.hx .ln:first-child { color: var(--g); }
.hx .mark path { stroke: var(--coral); }
.meta-row .dot { background: var(--coral); }
.stmt { font-weight: 500; line-height: 1.38; }
.why3 b, .three-ed b, .figs b { font-weight: 500; }
.why3 b { color: var(--coral); font-size: 15px; font-family: var(--f-mono); grid-row: span 2; padding-top: 6px; }
.home-head .brand { font: 600 19px/1 var(--f-body); letter-spacing: -.03em; }
.home-head .head-cta, .hero-foot .ln-u.big { background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 20px; font-weight: 500; transition: background .2s, transform .2s; }
.home-head .head-cta { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.home-head .head-cta:hover, .hero-foot .ln-u.big:hover { background: #2a2a2a; }
.hero-foot .ln-u.big:hover span[aria-hidden] { transform: translateX(4px); }
.chip.on { border-bottom-color: var(--coral); }
.chip.on sup { color: var(--coral); }
.wk-m, .reel-m { background: var(--wash); border-radius: 14px; outline: 0; }
.pf img, .call .ava { border-radius: 14px; }
.call .ava { border-radius: 50%; }
.foot-ed .foot-word { font-weight: 600; color: #e9e9e9; letter-spacing: -.05em; border-top-color: var(--line); }
.foot-ed .foot-word span { color: #e9e9e9; }
.sl, .meta-row, .fig-n, .wk-c .n, .wk-tag, .tl .n, .tl .d, .three-ed .t, .pr .d, .idx .k { font-family: var(--f-mono); }
.mail-big { font-weight: 500; letter-spacing: -.02em; }
.foot-ed .foot-word { font-size: clamp(48px, 13.6vw, 206px); overflow: hidden; padding-bottom: .04em; }


/* ---------- Dia-inspired sections: centred headlines, list + framed recording, bento, toggles, closing CTA, column footer ---------- */
.cx-h { text-align: center; font: 600 clamp(36px, 5.2vw, 76px)/1.04 var(--f-serif); letter-spacing: -.035em; margin: 0 auto clamp(48px, 7vw, 104px); text-wrap: balance; }
.home-page:not(:lang(en)) .cx-h { letter-spacing: -.01em; }
.cx-h.g { color: var(--g); }

/* what learners see: the full list beside every frame, its own item open */
.xp-ed { padding-top: clamp(64px, 8vw, 120px) !important; }
.xp-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.xp-row + .xp-row { margin-top: clamp(72px, 10vw, 150px); }
.xp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.xp-list li { padding-left: 18px; border-left: 2px solid transparent; color: var(--g); }
.xp-list li.on { border-left-color: var(--ink); color: var(--ink); }
.xp-list a { color: inherit; text-decoration: none; display: block; transition: color .2s; }
.xp-list a:hover { color: var(--ink); }
.xp-list .n { display: block; font: 400 11px/1 var(--f-mono); letter-spacing: .06em; color: var(--g); margin-bottom: 8px; }
.xp-list b { display: block; font-weight: 500; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -.01em; }
.xp-list p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 36ch; }
.xp-f { position: relative; margin: 0; background: var(--wash); border-radius: 20px; padding: clamp(28px, 4.6vw, 68px) clamp(44px, 5.6vw, 88px); }
.xp-m { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; box-shadow: 0 1px 2px rgba(18,18,18,.06), 0 30px 60px -30px rgba(18,18,18,.35); }
.xp-m video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-f .vt { position: absolute; top: 50%; writing-mode: vertical-rl; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.xp-f .vt.l { left: clamp(14px, 1.8vw, 30px); transform: translateY(-50%) rotate(180deg); }
.xp-f .vt.r { right: clamp(14px, 1.8vw, 30px); transform: translateY(-50%); }

/* bento of course features */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bn-c { background: var(--wash); border-radius: 20px; padding: 28px 28px 0; display: flex; flex-direction: column; overflow: hidden; min-height: 440px; }
.bn-l { align-self: flex-start; font: 400 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; }
.bn-c > p { margin: 16px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 42ch; }
.bn-c > div { margin-top: auto; height: 260px; position: relative; }
.v-voice, .v-quiz, .v-dash, .v-upd, .v-kids { margin-inline: 6%; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 1px 2px rgba(18,18,18,.05), 0 24px 50px -24px rgba(18,18,18,.25); overflow: hidden; }
.v-voice { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; padding: 0 24px; }
.v-voice .wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 86px; overflow: hidden; }
.v-voice .wave i { flex: 0 0 4px; height: calc(var(--h) * 100%); background: var(--ink); border-radius: 2px; transform-origin: center; animation: wv 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.11s); }
@keyframes wv { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.v-voice .langs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.v-voice .langs span { font: 400 12px/1 var(--f-mono); padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.v-voice .langs .on { background: var(--ink); border-color: var(--ink); color: #fff; }
.v-quiz .qc { padding: 22px 24px; }
.v-quiz .qn { font: 400 11px/1 var(--f-mono); color: var(--g); }
.v-quiz b { display: block; font-weight: 500; font-size: 15px; line-height: 1.4; margin: 8px 0 14px; }
.v-quiz ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.v-quiz li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.v-quiz li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 400 10px/1 var(--f-mono); background: var(--wash); flex: none; }
.v-quiz li.ok { animation: pick 4.5s var(--ease) infinite; }
.v-quiz li.ok span { animation: pickn 4.5s var(--ease) infinite; }
@keyframes pick { 0%, 38% { border-color: var(--line); } 46%, 92% { border-color: var(--ink); } 100% { border-color: var(--line); } }
@keyframes pickn { 0%, 38% { background: var(--wash); color: var(--ink); } 46%, 92% { background: var(--coral); color: #fff; } 100% { background: var(--wash); color: var(--ink); } }
.v-dash { padding: 22px 24px; display: grid; gap: 20px; align-content: start; }
.v-dash .kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.v-dash .kp small { display: block; font-size: 11px; color: var(--g); }
.v-dash .kp b { font-weight: 600; font-size: 26px; letter-spacing: -.03em; }
.v-dash .br { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v-dash .br li { display: grid; grid-template-columns: 84px 1fr 36px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.v-dash .br i { height: 6px; border-radius: 3px; background: #eeeeee; position: relative; overflow: hidden; }
.v-dash .br i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 1%); background: var(--ink); border-radius: 3px; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.bn-c.in .v-dash .br i::after, html:not(.js) .v-dash .br i::after { transform: none; }
.v-dash .br em { font-style: normal; font-family: var(--f-mono); font-size: 11px; text-align: right; }
.v-upd .doc { padding: 26px 26px; position: relative; height: 100%; }
.v-upd .ln1 { margin: 0 0 18px; font-size: 15px; line-height: 1.8; }
.v-upd .ss { font: 400 10px/1 var(--f-mono); color: var(--g); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; margin-right: 10px; vertical-align: 2px; }
.v-upd del { color: var(--g); text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; margin-right: 6px; }
.v-upd ins { text-decoration: none; background: #fbe9e5; border-radius: 4px; padding: 1px 5px; animation: insb 4.5s var(--ease) infinite; }
@keyframes insb { 0%, 30% { background: #fff; color: #fff; } 42%, 100% { background: #fbe9e5; color: var(--ink); } }
.v-upd .g1, .v-upd .g2 { height: 8px; border-radius: 4px; background: #efefef; margin: 0 0 12px; }
.v-upd .g1 { width: 86%; } .v-upd .g2 { width: 58%; }
.v-upd .tag { position: absolute; left: 26px; bottom: 24px; font: 400 11px/1 var(--f-mono); color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.v-upd .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.v-screen .tab { position: absolute; left: 6%; bottom: -26px; width: 74%; aspect-ratio: 16 / 10.4; border: 9px solid var(--ink); border-radius: 16px; overflow: hidden; background: #000; }
.v-screen .ph { position: absolute; right: 7%; bottom: -34px; width: 24%; aspect-ratio: 9 / 18.5; border: 6px solid var(--ink); border-radius: 20px; overflow: hidden; background: #000; box-shadow: -12px 0 30px -10px rgba(18,18,18,.3); }
.v-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-kids img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; transform: scale(1.9); transform-origin: 50% 62%; }

/* delivery: toggles running across a framed panel */
.dv-ed .wrap.dv { --dvp: clamp(20px, 4.4vw, 72px); max-width: min(1180px, calc(100% - 2 * var(--gut))); margin-inline: auto; border: 1px solid var(--line); border-radius: 24px; padding: clamp(40px, 5vw, 72px) var(--dvp); text-align: center; overflow: hidden; }
.dv-ic { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.4; display: block; margin: 0 auto 22px; }
.dv .cx-h { margin-bottom: 0; }
.tg-run { display: flex; overflow: hidden; margin: 30px calc(-1 * var(--dvp)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tg-track { display: flex; gap: 12px; padding-right: 12px; flex: none; animation: mq 46s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }
.tg { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 16px; font: 400 12px/1 var(--f-mono); color: var(--ink); background: #fff; }
.tg i { width: 26px; height: 15px; border-radius: 999px; background: var(--ink); position: relative; flex: none; }
.tg i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.tg.off i { background: #d9d9d9; }
.tg.off i::after { right: auto; left: 2px; }
.tg em { font-style: normal; color: var(--g); font-size: 11px; min-width: 2.2em; text-align: left; }
.dv-p { max-width: 60ch; margin: 40px auto 24px; color: var(--muted); font-size: 16px; line-height: 1.75; }

/* closing call to action */
.cta-ed .wrap.cta { text-align: center; display: grid; justify-items: center; }
.cta .cx-h { margin-bottom: 36px; }
.cta .pill { display: inline-flex; gap: .5em; align-items: center; background: var(--ink); color: #fff; text-decoration: none; border-radius: 12px; padding: 15px 26px; font-weight: 500; font-size: 16px; transition: background .2s; }
.cta .pill:hover { background: #2a2a2a; }
.cta .pill span { transition: transform .4s var(--ease); }
.cta .pill:hover span { transform: translateX(4px); }
.cta-n { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.cta-mail { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* column footer with a turning stamp */
.foot-dia { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 32px; background: #fff; }
.fd-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 128px; gap: 32px; align-items: start; }
.fd-c h4 { margin: 0 0 16px; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g); }
.fd-c a, .fd-c > span { display: block; font: 400 12px/2.1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.fd-c a:hover { color: var(--muted); }
.fd-c a[aria-current] { color: var(--g); }
.fd-c .todo { font-size: 11px; padding: 0 4px; }
.stamp { width: 120px; height: 120px; justify-self: end; }
.stamp text { font: 500 8.2px var(--f-mono); fill: var(--ink); letter-spacing: .12em; }
.stamp .mid { font: 600 30px var(--f-body); letter-spacing: -.04em; }
.stamp .rot { transform-origin: 60px 60px; animation: spin 36s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fd-bot { margin-top: clamp(48px, 7vw, 96px); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font: 400 11px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .xp-row { grid-template-columns: 1fr; gap: 24px; }
  .xp-list li:not(.on) { display: none; }
  .xp-f { padding: 14px; border-radius: 16px; }
  .xp-f .vt { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bn-c { min-height: 0; padding: 22px 20px 0; }
  .bn-c > div { height: 230px; }
  .bn-c > .v-screen { height: 190px; }
  .fd-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stamp { grid-column: 1 / -1; justify-self: start; width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-track, .stamp .rot, .v-voice .wave i, .v-quiz li.ok, .v-quiz li.ok span, .v-upd ins { animation: none; }
  .tg-run { flex-wrap: wrap; justify-content: center; } .tg-track + .tg-track { display: none; } .tg-track { flex-wrap: wrap; justify-content: center; }
}


/* ---------- hero arc: the cases fanned on an arc; each card plays its clip and floats; hover stands it up and unfolds its brief ---------- */
.arc-hint { grid-column: 2; margin-top: 22px; font: 400 12px var(--f-mono); letter-spacing: .06em; color: var(--g); text-transform: uppercase; }
.arc-hint i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: 8px; vertical-align: 1px; animation: blink 2.4s ease-in-out infinite; }
.arc { --R: 1100px; --cw: 240px; --ch: 150px; position: relative; height: 560px; margin-top: 0; overflow: clip; z-index: 5; }
.arc-pivot { position: absolute; left: 50%; top: 64px; width: 0; height: 0; }
.arc-c { position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) / -2); width: var(--cw); display: block; cursor: pointer; text-decoration: none; color: var(--ink);
  transform-origin: calc(var(--cw) / 2) calc(var(--R) + var(--ch) / 2); transform: rotate(var(--a)); z-index: 1; transition: opacity .5s; will-change: transform; }
.arc-c:focus-visible { outline: none; }
.arc-c .in { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; min-height: var(--ch);
  transform-origin: 50% 40%; transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .4s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(0,0,0,.18); }
.arc-c .m { position: relative; aspect-ratio: 16 / 10; background: var(--wash); overflow: hidden; }
.arc-c .m video, .arc-c .m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.arc-c .m .ind { position: absolute; left: 10px; top: 10px; font: 400 11px/1 var(--f-mono); letter-spacing: .05em; color: #fff; background: rgba(18,18,18,.88); padding: 6px 9px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.arc-c .bar { display: grid; gap: 3px; padding: 10px 14px 11px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.arc-c .bar span { font: 400 11px var(--f-mono); color: var(--g); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-c .info { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s; padding: 0 14px; }
.arc-c .info p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }
.arc-c .info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px; line-height: 1.5; }
.arc-c .info dt { font: 400 11px var(--f-mono); color: var(--g); letter-spacing: .04em; padding-top: 2px; }
.arc-c .info dd { margin: 0; }
.arc-c .info .go { display: inline-block; margin: 12px 0 14px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.arc-c .info .go::after { content: " →"; }
.arc-c:hover, .arc-c:focus-visible, .arc-c.on { z-index: 10; }
.arc-c:hover .in, .arc-c:focus-visible .in, .arc-c.on .in { border-color: var(--ink);
  transform: translateY(-24px) rotate(calc(var(--a) * -1)) scale(1.22);
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 40px 80px -30px rgba(0,0,0,.3); }
.arc-c:hover .info, .arc-c:focus-visible .info, .arc-c.on .info { max-height: 340px; opacity: 1; }
.arc:has(.arc-c:hover) .arc-c:not(:hover), .arc:has(.arc-c.on) .arc-c:not(.on) { opacity: .5; }
@media (max-width: 1100px) {
  .arc { height: auto; overflow: visible; padding-block: 36px 24px; margin-top: 0; }
  .arc-pivot { position: static; width: 100%; height: auto; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); scroll-padding-inline: var(--gut); }
  .arc-c { position: static; transform: none !important; flex: 0 0 min(78vw, 300px); scroll-snap-align: start; opacity: 1 !important; }
  .arc-c .in { transform: none !important; box-shadow: none; }
  .arc-c .info { max-height: none; opacity: 1; }
}
@media (max-width: 820px) { .arc-hint { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .arc-c .in, .arc-c .info { transition: none; } }

/* work: one case per row, the clip large, the brief beside it */
.cs-rows { display: grid; }
.cs-row { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 80px); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.cs-row:nth-child(even) .cs-fig { order: 2; }
.cs-row.hl { background: linear-gradient(var(--wash), var(--wash)) 50% 0 / 100vw 100% no-repeat; }
.cs-fig { display: block; aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; border-radius: 4px; max-width: 100%; min-width: 0; }
.cs-fig video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.cs-fig:hover video { transform: scale(1.02); }
.cs-txt { min-width: 0; }
.cs-txt .sl b { color: var(--ink); font-weight: 400; }
.cs-txt h3 { font: 500 clamp(24px, 2.4vw, 34px)/1.2 var(--f-serif); margin: 12px 0 14px; text-wrap: balance; letter-spacing: -.01em; }
.cs-txt .q { color: var(--muted); max-width: 30em; font-size: 16px; line-height: 1.7; }
.cs-txt dl { display: grid; grid-template-columns: 84px 1fr; gap: 8px 16px; margin: 22px 0 0; font-size: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.cs-txt dt { font: 400 11px/1.9 var(--f-mono); color: var(--g); letter-spacing: .06em; text-transform: uppercase; }
.cs-txt dd { margin: 0; }
.cs-txt .ln-u { margin-top: 24px; font-size: 15px; }
.work-ed .idx { margin-top: clamp(40px, 5vw, 80px); }
@media (max-width: 820px) { .cs-row { grid-template-columns: 1fr; } .cs-row:nth-child(even) .cs-fig { order: 0; } }

/* hero with the arc: tighter than the reel version so the cards are on the first screen */
.hero-ed:has(.arc) { padding-top: clamp(24px, 3.4vw, 44px) !important; }
.hero-ed:has(.arc) .hx { font-size: clamp(40px, 6.2vw, 92px); margin-top: clamp(16px, 2.4vw, 36px); }
.hero-ed:has(.arc) .hero-foot { margin-top: clamp(24px, 3vw, 40px); }
.hero-ed:has(.arc) .hero-foot p { font-size: 16px; line-height: 1.65; }
.hero-ed:has(.arc) .hero-foot .ln-u { margin-top: 18px; }
.arc-hint { margin-top: 18px; }

/* hero copy aligned under the slogan, not indented */
.hero-ed:has(.arc) .hero-foot { grid-template-columns: 1fr; }
.hero-ed:has(.arc) .hero-foot p, .hero-ed:has(.arc) .hero-foot .ln-u, .hero-ed:has(.arc) .arc-hint { grid-column: 1; }

/* about, compact: statement, then portrait beside a fact list */
.about-ed:has(.facts) .about-b { grid-template-columns: 3fr 9fr; margin-top: clamp(40px, 5vw, 72px); }
.about-ed:has(.facts) .pf img { max-width: 220px; border-radius: 4px; }
.facts { max-width: 46em; }
.facts dl { margin: 0; display: grid; border-top: 1px solid var(--ink); }
.facts dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.facts dt { font: 400 11px/2.1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
.facts dd { margin: 0; }
.facts .note { margin-top: 16px; font-size: 14px; color: var(--muted); }
@media (max-width: 820px) { .facts dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* work: one featured case, then a two-column grid */
.cs-feat { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(40px, 5vw, 72px); scroll-margin-top: 90px; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 72px); }
.cs-card { display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; min-width: 0; scroll-margin-top: 90px; padding: 12px; margin: -12px; border-radius: 6px; transition: background .4s; }
.cs-card.hl { background: var(--wash); }
.cs-m { aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; border-radius: 4px; max-width: 100%; margin-bottom: 6px; }
.cs-m video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.cs-card:hover .cs-m video { transform: scale(1.03); }
.cs-card .sl b { color: var(--ink); font-weight: 400; }
.cs-card h3 { font: 500 clamp(20px, 1.7vw, 24px)/1.25 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.cs-card p { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 34em; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cs-tags span { font: 400 11px/1 var(--f-mono); letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; }
.cs-feat.hl { background: linear-gradient(var(--wash), var(--wash)) 50% 0 / 100vw 100% no-repeat; }
@media (max-width: 820px) { .cs-feat, .cs-grid { grid-template-columns: 1fr; } }