:root{
  --paper:#FAFAF7;      /* surface */
  --paper-2:#F1F0EC;    /* surface-alt: image mats only */
  --ink:#121211;        /* text-primary  · on paper 18.6:1 */
  --ink-2:#64635E;      /* text-secondary · on paper 5.9:1 */
  --rule:#DEDDD8;       /* decorative row rule (tables only) */
  --m:40px; --gut:24px; --cols:12;
  --sec:200px;
  --h1:clamp(52px,7.4vw,112px);
  --h2:clamp(34px,3.75vw,56px);
  --big:clamp(64px,11.2vw,168px);
  --body:18px; --small:15px; --meta:13px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:Switzer,sans-serif;font-weight:400;font-size:var(--body);line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;font-size:14px;z-index:20}
.skip:focus{left:8px}

/* grid */
.wrap{padding:0 var(--m)}
.g{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut)}
.meta{font-size:var(--meta);line-height:1.4;color:var(--ink-2);letter-spacing:.005em}
.meta b{font-weight:500;color:var(--ink)}
.lab{grid-column:1/3}         /* the credit column: who speaks, what section */
.main{grid-column:3/13}

/* header */
header{position:sticky;top:0;z-index:10;background:var(--paper)}
header .g{height:72px;align-items:center}
.mark{grid-column:1/3;font-weight:500;font-size:19px;letter-spacing:-.02em;text-decoration:none;line-height:1}
nav.links{grid-column:7/11;display:flex;gap:28px;font-size:14px}
nav.links a{text-decoration:none;color:var(--ink-2)}
nav.links a:hover{color:var(--ink)}
.hcta{grid-column:11/13;justify-self:end;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.menu{display:none}

/* hero */
.hero{padding-top:clamp(56px,7vw,104px);padding-bottom:var(--sec)}
.hero h1{grid-column:1/-1;font-weight:300;font-size:var(--h1);line-height:.98;letter-spacing:-.035em}
.turn{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut)}
.turn .who{grid-column:1/3;font-size:var(--meta);line-height:1.4;letter-spacing:.005em;font-weight:400;color:var(--ink-2);padding-top:.9em}
.turn .who b{display:block;font-weight:500;color:var(--ink)}
.turn .line{display:block}
.turn.a .line{grid-column:3/13}
.turn.b{margin-top:.42em}
.turn.b .line{grid-column:5/13}
.lede{grid-column:5/10;margin-top:56px;font-size:20px;line-height:1.5}
.acts{grid-column:5/13;margin-top:36px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:16px;line-height:1;padding:19px 28px}
.btn:hover{background:#2c2c2a}
.acts .meta a{color:var(--ink)}

/* sections */
section.s{padding-bottom:var(--sec)}
.s h2{grid-column:3/13;font-weight:300;font-size:var(--h2);line-height:1.04;letter-spacing:-.03em}
.s .lab{padding-top:.75em}
.intro{grid-column:3/9;margin-top:28px;font-size:20px;line-height:1.5}

/* ways to work: a real table */
.score{grid-column:3/13;margin-top:88px}
.score .row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--gut);padding:28px 0 32px;border-top:1px solid var(--rule)}
.score .row:last-child{border-bottom:1px solid var(--rule)}
.score .head{border-top:0;padding:0 0 14px}
.score .c1{grid-column:1/5}.score .c2{grid-column:5/8}.score .c3{grid-column:8/11}
.score h3{font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.score .fmt{margin-top:8px}
.score p{font-size:16px;line-height:1.45}
.score .k{display:none}
.after{grid-column:3/9;margin-top:36px;font-size:16px}
.after + .after{margin-top:12px;color:var(--ink-2)}

/* method: versions */
.vers{grid-column:3/13;margin-top:96px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut)}
.v .n{font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.03em;font-feature-settings:"tnum" 1}
.v:nth-child(1) .n{font-weight:300;color:var(--ink-2)}
.v:nth-child(2) .n{font-weight:300}
.v:nth-child(3) .n{font-weight:400}
.v:nth-child(4) .n{font-weight:500}
.v h3{margin-top:28px;font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.v p{margin-top:10px;font-size:16px;line-height:1.45;max-width:30ch}

/* work */
.cases{grid-column:1/-1;margin-top:96px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut);row-gap:120px}
.case{text-decoration:none;display:block}
.case .img{aspect-ratio:16/9;background:var(--paper-2);overflow:hidden}
.case img{width:100%;height:100%;object-fit:cover;display:block}
.case .cap{margin-top:18px;display:grid;column-gap:var(--gut)}
.case h3{font-weight:400;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.case .one{font-size:16px;line-height:1.45;color:var(--ink-2);margin-top:4px;max-width:46ch}
.case dl{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:var(--meta);line-height:1.4;margin-top:14px}
.case dt{color:var(--ink-2)}
.case dd{color:var(--ink)}
.case dl div{min-width:0}
.case .see{display:inline-block;margin-top:14px;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.case:hover .see{text-decoration-thickness:2px}
.c-1{grid-column:1/13}
.c-1 .cap{grid-template-columns:repeat(12,minmax(0,1fr))}
.c-1 .cap .t{grid-column:3/8}
.c-1 .cap dl{grid-column:9/13;margin-top:4px;display:grid;grid-template-columns:1fr;gap:8px}
.c-2{grid-column:1/8}
.c-3{grid-column:9/13;margin-top:180px}
.c-4{grid-column:3/7}
.c-5{grid-column:8/13;margin-top:-60px}
.more{grid-column:3/13;margin-top:96px;font-size:16px;font-weight:500}
.more a{text-underline-offset:4px;text-decoration-thickness:1px}

/* founder */
.f-body{grid-column:8/13;font-size:18px}
.f-body p + p{margin-top:16px}
.f-body a{font-size:15px;font-weight:500;text-underline-offset:4px;text-decoration-thickness:1px}
.founder h2{grid-column:3/8}

/* contact */
.contact{padding-bottom:160px}
.contact h2{grid-column:3/13;font-size:var(--big);line-height:.92;letter-spacing:-.045em;font-weight:300}
.contact .body{grid-column:3/8;margin-top:56px;font-size:20px}
.contact .acts{grid-column:3/13;margin-top:32px}

/* footer */
footer{padding-bottom:40px}
footer .g{row-gap:12px;align-items:start}
footer .f1{grid-column:1/5}
footer .f2{grid-column:5/8}
footer .f3{grid-column:8/11;display:flex;gap:20px;flex-wrap:wrap}
footer .f4{grid-column:11/13;text-align:right}
footer a{text-underline-offset:3px;text-decoration-thickness:1px}
footer .mk{font-weight:500;font-size:15px;color:var(--ink);letter-spacing:-.01em}

/* 1200 band */
@media (max-width:1300px){
  :root{--m:32px;--sec:176px}
}
/* tablet 810 */
@media (max-width:1023px){
  :root{--cols:8;--m:32px;--gut:20px;--sec:144px;--h1:clamp(52px,8.6vw,80px);--big:clamp(56px,12vw,110px)}
  nav.links{display:none}
  .hcta{grid-column:6/9}
  .mark{grid-column:1/4}
  .lab{grid-column:1/9}
  .s .lab{padding-top:0;margin-bottom:16px}
  .s h2,.main,.intro,.score,.vers,.more,.after{grid-column:1/9}
  .intro{grid-column:1/7}
  .turn .who{grid-column:1/9;padding-top:0;margin-bottom:10px;display:flex;gap:6px}
  .turn .who b{display:inline}
  .turn.a .line{grid-column:1/9}
  .turn.b{margin-top:.5em}
  .turn.b .line{grid-column:2/9}
  .turn.b .who{grid-column:2/9}
  .lede{grid-column:2/8;margin-top:44px}
  .acts{grid-column:2/9}
  .score .c1{grid-column:1/5}.score .c2{grid-column:5/8}.score .c3{grid-column:8/11}
  .score .row{grid-template-columns:repeat(8,minmax(0,1fr))}
  .score .c1{grid-column:1/9}.score .c2{grid-column:1/5;margin-top:18px}.score .c3{grid-column:5/9;margin-top:18px}
  .score .head{display:none}
  .score .k{display:block;margin-bottom:4px}
  .vers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}
  .cases{row-gap:88px}
  .c-1{grid-column:1/9}
  .c-1 .cap{grid-template-columns:repeat(8,minmax(0,1fr))}
  .c-1 .cap .t{grid-column:1/6}
  .c-1 .cap dl{grid-column:6/9}
  .c-2{grid-column:1/6}
  .c-3{grid-column:5/9;margin-top:0}
  .c-4{grid-column:1/5}
  .c-5{grid-column:5/9;margin-top:120px}
  .c-2{grid-column:1/7}.c-3{grid-column:3/9}
  .c-4{grid-column:1/6}.c-5{grid-column:4/9;margin-top:0}
  .founder h2{grid-column:1/9}
  .f-body{grid-column:1/7;margin-top:28px}
  .contact h2,.contact .body,.contact .acts{grid-column:1/9}
  .contact .body{grid-column:1/7}
  footer .f1{grid-column:1/5}footer .f2{grid-column:5/9}
  footer .f3{grid-column:1/6;margin-top:16px}footer .f4{grid-column:6/9;margin-top:16px}
}
/* phone 390 */
@media (max-width:600px){
  :root{--cols:4;--m:20px;--gut:16px;--sec:112px;--h1:52px;--h2:34px;--big:64px;--body:17px}
  header .g{height:60px}
  .mark{grid-column:1/3;font-size:18px}
  .hcta{display:none}
  .menu{display:block;grid-column:3/5;justify-self:end;background:none;border:0;font:inherit;font-size:14px;font-weight:500;color:var(--ink);padding:12px 0 12px 16px;cursor:pointer}
  nav.links.open{display:flex;flex-direction:column;gap:0;position:absolute;top:60px;left:0;right:0;background:var(--paper);padding:8px 20px 20px;font-size:20px}
  nav.links.open a{color:var(--ink);padding:10px 0}
  .lab,.s h2,.main,.intro,.score,.vers,.more,.after,.f-body,.founder h2,.contact h2,.contact .body,.contact .acts{grid-column:1/5}
  .hero{padding-top:40px}
  .hero h1{letter-spacing:-.04em}
  .turn .who{grid-column:1/5}
  .turn.a .line{grid-column:1/5}
  .turn.b .line,.turn.b .who{grid-column:1/5;padding-left:44px}
  .turn.b .line{padding-left:44px}
  .lede{grid-column:1/5;margin-top:36px;font-size:18px}
  .acts{grid-column:1/5;margin-top:28px;gap:16px}
  .intro{font-size:18px}
  .score{margin-top:56px}
  .score .row{grid-template-columns:1fr;padding:24px 0 26px}
  .score .c1,.score .c2,.score .c3{grid-column:1/-1}
  .score .c2{margin-top:16px}.score .c3{margin-top:12px}
  .score h3{font-size:26px}
  .vers{grid-template-columns:1fr;row-gap:48px;margin-top:56px}
  .v h3{margin-top:16px}
  .cases{margin-top:56px;row-gap:64px}
  .c-1,.c-2,.c-3,.c-4,.c-5{grid-column:1/5;margin-top:0}
  .c-1 .cap{grid-template-columns:1fr}
  .c-1 .cap .t,.c-1 .cap dl{grid-column:1/-1}
  .c-1 .cap dl{margin-top:14px}
  .case dl{display:grid;grid-template-columns:1fr;gap:6px}
  .case dl div{display:flex;gap:8px}
  .more{margin-top:56px}
  .contact{padding-bottom:112px}
  .contact .body{margin-top:36px;font-size:18px}
  .contact .btn{font-size:15px;padding:18px 20px}
  footer .f1,footer .f2,footer .f3,footer .f4{grid-column:1/5;text-align:left;margin-top:0}
  footer .g{row-gap:20px}
}

/* v2 copy additions */
:root{--ind:calc((100% + var(--gut)) / 10 * 2)}
h2.split .ta,h2.split .tb{display:block}
h2.split .tb{padding-left:calc((100% + var(--gut)) / 10 * 2)}
.hero .eyeb{grid-column:1/3;grid-row:1;align-self:start;margin-bottom:56px}
.hero h1{grid-row:2}
.turn.b .line{grid-column:7/13}
.acts .mail{color:var(--ink-2);text-underline-offset:3px;text-decoration-thickness:1px}
nav.links{grid-column:6/11}
.moments{grid-column:3/13;margin-top:96px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--gut)}
.mom{grid-column:span 3}
.mom:nth-child(2){grid-column:5/8;margin-top:72px}
.mom:nth-child(3){grid-column:8/11;margin-top:144px}
.mom h3{font-weight:300;font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em}
.mom p{margin-top:14px;font-size:16px;line-height:1.45;max-width:30ch}
.score{margin-top:80px}
.score .c1{grid-column:1/5}.score .c2{grid-column:5/7}.score .c3{grid-column:7/11}
.score .row{align-items:baseline}
.score .len{font-size:15px;color:var(--ink-2)}
.score .c3{font-size:17px}
.founder h2{grid-column:3/8}
.contact .lab{padding-top:1.4em}
.contact h2.split .tb{padding-left:calc((100% + var(--gut)) / 10 * 2)}
.hero{padding-top:48px}
@media (max-width:1023px){
  h2.split .tb{padding-left:calc((100% + var(--gut)) / 8 * 1)}
  .hero .eyeb{grid-column:1/9;margin-bottom:40px}
  .turn.b .line,.turn.b .who{grid-column:2/9}
  .moments{grid-column:1/9;grid-template-columns:repeat(8,minmax(0,1fr));margin-top:64px;row-gap:56px}
  .mom:nth-child(1){grid-column:1/5}
  .mom:nth-child(2){grid-column:5/9;margin-top:56px}
  .mom:nth-child(3){grid-column:3/7;margin-top:0}
  .score .row{grid-template-columns:repeat(8,minmax(0,1fr))}
  .score .c1{grid-column:1/6}.score .c2{grid-column:6/9;text-align:right}.score .c3{grid-column:1/7;margin-top:10px}
  .contact h2.split .tb{padding-left:calc((100% + var(--gut)) / 8 * 1)}
}
@media (max-width:600px){
  h2.split .tb{padding-left:28px}
  .contact h2.split .tb{padding-left:28px}
  .hero .eyeb{grid-column:1/5;margin-bottom:32px}
  .turn.b .line,.turn.b .who{grid-column:1/5;padding-left:44px}
  .moments{grid-column:1/5;grid-template-columns:1fr;margin-top:48px;row-gap:40px}
  .mom:nth-child(n){grid-column:1/-1;margin-top:0}
  .score .c1,.score .c2,.score .c3{grid-column:1/-1;text-align:left}
  .score .c2{margin-top:6px}.score .c3{margin-top:10px}
}

.lab b{display:block;font-weight:500;color:var(--ink)}
.hero .lede{grid-row:3;grid-column:7/12}
.hero .acts{grid-row:4;grid-column:7/13}
.turn.b{margin-top:.04em}
.mom h3{font-size:clamp(22px,1.9vw,27px);text-wrap:balance}
.mom p{text-wrap:pretty}
@media (max-width:1023px){.hero .lede{grid-column:2/8}.hero .acts{grid-column:2/9}}
@media (max-width:600px){.hero .lede,.hero .acts{grid-column:1/5}}

ol{list-style:none}
p,dd{text-wrap:pretty}
.case dl{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:6px 28px}
.c-4 dl{grid-template-columns:repeat(2,minmax(0,max-content))}
.c-4{grid-column:3/7;margin-top:140px}
.c-5{grid-column:8/13;margin-top:0}
footer .f1{grid-column:1/5}footer .f2{grid-column:5/8}footer .f3{grid-column:8/11}footer .f4{grid-column:11/13;text-align:right}
footer .f5{grid-column:1/8;margin-top:28px}
@media (max-width:1023px){
  .c-4{grid-column:1/6;margin-top:0}.c-5{grid-column:4/9;margin-top:0}
  footer .f1{grid-column:1/5}footer .f2{grid-column:5/9}
  footer .f3{grid-column:1/5;margin-top:16px}footer .f4{grid-column:5/9;margin-top:16px;text-align:left}
  footer .f5{grid-column:1/9}
}
@media (max-width:600px){
  .case dl,.c-4 dl{grid-template-columns:1fr}
  .c-4,.c-5{grid-column:1/5}
  footer .f1,footer .f2,footer .f3,footer .f4,footer .f5{grid-column:1/5;margin-top:0;text-align:left}
}

.pb{display:inline}
@media (max-width:600px){.pb{display:block;height:0;overflow:hidden}}

@media (max-width:1023px) and (min-width:601px){:root{--h1:clamp(60px,9.6vw,86px)}}
@media (max-width:1023px){.contact .lab{padding-top:0;margin-bottom:20px}}

.lede,.intro,.contact .body,.f-body{max-width:34em}

/* ===== v3c refinements ===== */
/* the mark: two equal parts, one shape */
.tm{display:inline-block;width:1.15em;height:.52em;vertical-align:baseline;flex:none;overflow:visible}
.tm rect{fill:none;stroke:currentColor;stroke-width:1.3}
.tm[data-turn="1"] .a,.tm[data-turn="2"] .b,.tm[data-turn="both"] rect{fill:currentColor}
.mark{display:inline-flex;align-items:baseline;gap:.42em;font-weight:500;font-size:19px;letter-spacing:-.022em}
.mark .tm{width:1.08em;height:.49em;transform:translateY(-.01em)}
/* optical tracking by size + optical left edge for display */
.hero h1{letter-spacing:-.042em;font-kerning:normal}
.hero h1 .line{margin-left:-.06em}
.s h2{letter-spacing:-.03em}
h2.split .ta{margin-left:-.05em}
.contact h2{letter-spacing:-.05em}
.contact h2 .ta{margin-left:-.07em}
.mom h3,.score h3{letter-spacing:-.018em}
.case h3,.v h3{letter-spacing:-.008em}
.meta,.lab,.case dl,.score .len{letter-spacing:.012em}
.n,.case dd,.f5{font-variant-numeric:tabular-nums}
/* metadata hierarchy: label in ink 500, value in ink-2 400, 13/18 everywhere */
.meta{font-size:13px;line-height:18px}
.turn .who{display:block;padding-top:1.05em}
.turn .who .tm{display:block;margin-bottom:10px;width:16px;height:7px;color:var(--ink)}
.tt{display:flex;align-items:center;gap:8px;margin-top:2px}
.tt .tm{width:16px;height:7px;color:var(--ink)}
.v .tm{display:block;width:18px;height:8px;margin-bottom:22px;color:var(--ink)}
.v .n{display:block}
/* vertical rhythm on an 8px base */
:root{--sec:208px}
.s h2 + .intro{margin-top:32px}
.moments,.vers,.score{margin-top:104px}
.cases{margin-top:112px;row-gap:136px}
/* work: more presence, first plate bleeds edge to edge */
.c-1{margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m))}
.c-1 .img{aspect-ratio:16/9}
.c-1 .cap{padding:0 var(--m)}
.case .cap{margin-top:20px}
.case h3{font-size:21px}
.case dl{margin-top:16px}
.case dt{margin-bottom:2px}
.nw{white-space:nowrap}
.c-2 .img img{object-position:40% 50%}
.c-4 .img img{object-position:50% 38%}
/* states */
a,button{transition:none}
.case .see,.more a,.f-body a{text-decoration-color:currentColor}
.case:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.case:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
nav.links a{position:relative}
nav.links a:hover,nav.links a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hcta:hover{text-decoration-thickness:2px}
.btn{padding:20px 30px;letter-spacing:-.005em}
.btn:active{background:#000}
/* footer: a colophon, as composed as the hero */
footer{padding-top:24px;padding-bottom:48px}
.fg{row-gap:0;align-items:start}
footer .f1{grid-column:1/7}
footer .f2{grid-column:7/9}
footer .f3{grid-column:9/11;display:block}
footer .f4{grid-column:11/13;text-align:left}
footer .meta b{display:block;font-weight:500;color:var(--ink);margin-bottom:6px}
footer .f2 a,footer .f3 a{display:block;width:max-content;color:var(--ink-2);text-underline-offset:3px;text-decoration-thickness:1px}
footer .f3 a + a{margin-top:2px}
footer .f2 a:hover,footer .f3 a:hover{color:var(--ink)}
.fmark{display:inline-flex;align-items:baseline;gap:.4em;font-size:clamp(28px,2.6vw,40px);font-weight:400;letter-spacing:-.03em;text-decoration:none;line-height:1}
.fmark .tm{width:1.05em;height:.48em}
footer .f1 .meta{margin-top:12px}
footer .f5{grid-column:1/7;margin-top:96px}
footer .f6{grid-column:7/13;margin-top:96px}
@media (max-width:1300px){:root{--sec:184px}}
@media (max-width:1023px){
  :root{--sec:152px}
  .menu{display:block;grid-column:6/9;justify-self:end;background:none;border:0;font:inherit;font-size:14px;font-weight:500;color:var(--ink);padding:12px 0 12px 16px;cursor:pointer}
  .hcta{display:none}
  nav.links.open{display:flex;flex-direction:column;gap:0;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:8px var(--m) 28px;font-size:22px;font-weight:300;letter-spacing:-.02em}
  nav.links.open a{color:var(--ink);padding:10px 0}
  .moments,.vers,.score{margin-top:72px}
  .cases{margin-top:80px;row-gap:96px}
  .c-1 .img{aspect-ratio:16/9}
  footer .f1{grid-column:1/9;margin-bottom:56px}
  footer .f2{grid-column:1/4}footer .f3{grid-column:4/6}footer .f4{grid-column:6/9;margin-top:0}
  footer .f5{grid-column:1/4;margin-top:72px}footer .f6{grid-column:4/9;margin-top:72px}
}
@media (max-width:600px){
  :root{--sec:120px}
  .menu{grid-column:3/5}
  nav.links.open{top:60px}
  .turn .who .tm{margin-bottom:8px}
  .moments,.vers,.score{margin-top:56px}
  .cases{margin-top:56px;row-gap:72px}
  .v .tm{margin-bottom:16px}
  footer .f1{grid-column:1/5;margin-bottom:48px}
  footer .f2,footer .f3,footer .f4{grid-column:1/5;margin-bottom:28px}
  footer .f5,footer .f6{grid-column:1/5;margin-top:16px}
}

@media (max-width:1023px){
  .turn .who{display:flex;align-items:center;gap:8px;padding-top:0}
  .turn .who .tm{display:inline-block;margin:0 4px 0 0}
  .c-2 dl{grid-template-columns:1fr}
}
@media (max-width:600px){
  footer .f2,footer .f3,footer .f4{margin-bottom:8px}
  footer .f1{margin-bottom:40px}
}

/* ===== v3c "Same table": turns retired ===== */
/* the mark: two equal parts, side by side, one shape. Same weight, no order. */
.tm rect{fill:currentColor;stroke:none}
.mark .tm{width:1.1em;height:.5em}
.fmark .tm{width:1.05em;height:.48em}
.hero .eyeb{grid-row:1}
.hero .cosign{grid-column:1/3;grid-row:2;align-self:start;padding-top:1.1em}
.cosign .tm{display:block;width:18px;height:8px;margin-bottom:10px;color:var(--ink)}
.cosign b{display:block;font-weight:500;color:var(--ink)}
.hero h1{grid-column:3/-1;grid-row:2;letter-spacing:-.042em}
.hero h1 .l1,.hero h1 .l2{display:block;margin-left:-.06em}
.hero h1 .l2{max-width:9.6em}
.hero .lede{grid-row:3}
.hero .acts{grid-row:4}
.s h2{margin-left:-.05em}
.contact h2{margin-left:-.07em}
.moments .mom:nth-child(n){margin-top:0}
.moments .mom:nth-child(1){grid-column:1/4}.moments .mom:nth-child(2){grid-column:4/8}.moments .mom:nth-child(3){grid-column:8/11}
.v .n{font-weight:300;color:var(--ink-2)}
.v:nth-child(n) .n{font-weight:300;color:var(--ink-2)}
.v h3{margin-top:24px}
.case dl.cosig{position:relative}
@media (max-width:1023px){
  .dbr{display:inline}
  .hero .cosign{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:10px;padding-top:0;margin-bottom:16px}
  .cosign .tm{display:inline-block;margin:0}
  .cosign b{display:inline;margin-right:4px}
  .hero h1{grid-column:1/-1;grid-row:3}
  .hero .lede{grid-row:4}.hero .acts{grid-row:5}
  .moments .mom:nth-child(1){grid-column:1/5}.moments .mom:nth-child(2){grid-column:5/9}.moments .mom:nth-child(3){grid-column:1/5}
}
@media (max-width:600px){
  .hero .cosign{align-items:flex-start}
  .cosign .tm{margin-top:5px}
  .moments .mom:nth-child(n){grid-column:1/-1}
  .hero h1 .l2{max-width:none}
}

/* founder: sober, at the level of the credits */
.founder{padding-bottom:var(--sec)}
.founder .who-f{grid-column:3/7}
.founder h2.fname{font-size:21px;line-height:1.25;letter-spacing:-.008em;font-weight:400;margin:0}
.founder .who-f .meta{margin-top:4px}
.founder .f-body{grid-column:8/13;font-size:17px;line-height:1.5}
.founder .f-body a{font-size:14px}
@media (max-width:1300px){
  .hero{padding-top:40px}
  .hero .eyeb{margin-bottom:40px}
  .hero .lede{grid-column:7/13;font-size:19px}
}
@media (max-width:1023px){
  .founder .who-f{grid-column:1/-1}
  .founder .f-body{grid-column:1/7;margin-top:20px}
}
@media (max-width:600px){.founder .f-body{grid-column:1/-1}}

.tm rect.a,.tm rect.b{fill:currentColor}
h2.split .tb,.contact h2.split .tb{padding-left:0}
h2.split .ta,h2.split .tb{margin-left:-.05em}
.contact h2.split .ta,.contact h2.split .tb{margin-left:-.07em}
/* first plate bleeds off the right edge only: the credit column stays clear */
.c-1{grid-column:3/-1;margin-left:0;margin-right:calc(-1 * var(--m))}
.c-1 .cap{grid-template-columns:repeat(10,minmax(0,1fr));padding:0 var(--m) 0 0}
.c-1 .cap .t{grid-column:1/6}
.c-1 .cap dl{grid-column:7/11}
@media (max-width:1023px){
  .c-1{grid-column:1/-1;margin-left:0}
  .c-1 .cap{grid-template-columns:repeat(8,minmax(0,1fr))}
  .c-1 .cap .t{grid-column:1/6}.c-1 .cap dl{grid-column:6/9}
}
@media (max-width:600px){
  .c-1{margin-right:calc(-1 * var(--m))}
  .c-1 .cap{grid-template-columns:1fr}
  .c-1 .cap .t,.c-1 .cap dl{grid-column:1/-1}
}

.about .founded{grid-column:3/9;margin-top:32px}
.about .founded a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:1023px){.about .founded{grid-column:1/-1}}

/* ===== brand device: "We collaborate to ___" =====
   Constant start, variable ending. Rule: the ending sits one weight step above the start
   (display 300 -> 400; text 400 -> 500), same colour, same size. Nothing else changes. */
.wct-b{font-weight:500}
.wct-h1 .wct-a{font-weight:300}
.wct-h1 .wct-b{font-weight:400}
.score .c3 .wct{display:block;margin-bottom:4px}
.contact .body .wct{display:block;margin-bottom:6px}
.hero h1.wct-h1 .l2{max-width:none}

/* desktop: nothing enters the credit column below the hero (sticky labels live there) */
@media (min-width:1024px){
  .c-2{grid-column:3/9}.c-3{grid-column:10/13;margin-top:180px}
  .c-4{grid-column:3/7;margin-top:140px}.c-5{grid-column:8/13;margin-top:0}
  .c-2 dl{grid-template-columns:repeat(2,minmax(0,max-content))}
}
/* target size (WCAG 2.5.8): every small text link is at least 24px tall */
footer .f2 a,footer .f3 a{display:flex;align-items:center;min-height:24px}
footer .f3 a + a{margin-top:0}
header .mark,nav.links a,.hcta,.hero .mail,.more a{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:1023px){.hcta{display:none}}
/* Pause (Valentina's control): sits on the eyebrow's first line, right edge, as hero metadata */
.hero .mo-pause{top:38px}
@media (max-width:1300px){.hero .mo-pause{top:30px}}
/* phone: "to create impact." (Carlos's ending, the widest of the three in Switzer) holds on one line at 390 */
@media (max-width:600px){:root{--h1:48px}.score .c3{font-size:16px;line-height:1.5}}  /* display/body 48/16 = 3:1 */
/* final breakpoint overrides (keep last) */
@media (max-width:1023px){
  .hero .eyeb{grid-column:1/-1;grid-row:1}
  .hero .cosign{grid-column:1/-1;grid-row:2}
  .hero h1,.hero h1.wct-h1{grid-column:1/-1;grid-row:3}
  .hero .lede{grid-column:2/8;grid-row:4;font-size:20px}
  .hero .acts{grid-column:2/-1;grid-row:5}
}
@media (max-width:600px){
  .hero .lede{grid-column:1/-1;font-size:18px}
  .hero .acts{grid-column:1/-1}
}

/* ================= v3d uplift (Andrés, 2026-11-04) ================= */
:root{--on-ink:#F4F3EF;--on-ink-2:#A19F98;--rule-ink:#34332F}
/* 1 · one contrast surface: Ways to work is the ink chapter (the device at display scale lives here) */
#ways.ink{background:var(--ink);color:var(--on-ink);padding-top:calc(var(--sec)*.8);padding-bottom:calc(var(--sec)*.8)}
#ways.ink .lab b{color:var(--on-ink)}
#ways.ink .score .row{border-color:var(--rule-ink)}
#ways.ink .score .len,#ways.ink .after{color:var(--on-ink-2)}
#ways.ink .score h3{color:var(--on-ink)}
#ways.ink a{color:var(--on-ink)}
#ways.ink :focus-visible{outline-color:var(--on-ink)}
#how{padding-bottom:calc(var(--sec)*.8)}
#work{padding-top:var(--sec)}
/* the rows: name + length, then the sentence at display scale, then the line under the length */
#ways .score{margin-top:96px}
#ways .score .row{padding:30px 0 52px;align-items:baseline}
#ways .score .c1{grid-column:1/5;grid-row:1}
#ways .score .c2{grid-column:5/11;grid-row:1;text-align:left}
#ways .score .c3{grid-column:1/-1;grid-row:2;margin-top:22px;font-size:17px;line-height:1.5;
  padding-left:calc((100% - 9*var(--gut))/10*4 + 4*var(--gut))}
#ways .score .c3 .wct{display:block;margin:0 0 22px calc(-1*((100% - 5*var(--gut))/6*4 + 4*var(--gut)));
  font-size:clamp(34px,3.9vw,60px);line-height:1.02;letter-spacing:-.032em;font-weight:300;text-wrap:balance}
#ways .score .c3 .wct-a{font-weight:300}
#ways .score .c3 .wct-b{font-weight:400}
#ways .score h3{font-size:22px;font-weight:400;letter-spacing:-.012em}
/* 2 · scale in the steps: the numerals become the rhythm of the section */
.v .n{font-size:clamp(72px,8.4vw,128px);font-weight:300;letter-spacing:-.045em;line-height:.9;margin-left:-.06em;margin-bottom:28px;display:block}
.vers .v{border-top:1px solid var(--rule);padding-top:22px}
/* moments a step larger */
.mom h3{font-size:clamp(24px,2.35vw,34px)}
/* 3 · the case plates: bigger, alternating scale, two plates bleed off the right edge */
@media (min-width:1024px){
  .cases{row-gap:160px}
  .c-2{grid-column:3/10}
  .c-3{grid-column:10/13;margin-top:300px}
  .c-4{grid-column:4/8;margin-top:40px}
  .c-5{grid-column:8/-1;margin-right:calc(-1*var(--m));margin-top:220px}
  .c-5 .cap{padding-right:var(--m)}
  .c-2 .cap,.c-5 .cap{max-width:none}
  .c-3 dl{display:grid;grid-template-columns:1fr;gap:6px}
  .c-3 dl div{display:flex;gap:8px}
}
/* 4 · the device carries the close: contact sentence a scale up */
.contact .body .wct{display:block;font-size:clamp(24px,2.3vw,34px);line-height:1.16;letter-spacing:-.02em;margin-bottom:18px;max-width:22em}
.contact .body .wct-a{font-weight:300}.contact .body .wct-b{font-weight:400}
/* 5 · scroll companion: Valentina's .mo-pair (created by motion.js), docked at top:78px in the credit column, above the sticky labels (top:104px). No container here. */
/* the pair and the section label read as one line: the label docks to the right of the pair (text starts past the
   squares' widest part, 76px at 1440), so a label leaving upward never crosses the squares. Motion + desktop only. */
@media (min-width:1024px){
  .mo .s > .lab{top:64px;padding-left:48px;z-index:2}
  .mo .contact > .lab{padding-left:48px}
  /* hero caption as the same lockup: mark at the left, text past the pair's lane (the pair is born from this mark) */
  .hero .cosign{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start}
  .hero .cosign .tm{margin:5px 0 0}
  header{z-index:30}
}
@media (max-width:1023px){
  #ways .score .c1{grid-column:1/6}
  #ways .score .c2{grid-column:6/9;text-align:right}
  #ways .score .c3{padding-left:calc((100% - 7*var(--gut))/8*2 + 2*var(--gut))}
  #ways .score .c3 .wct{margin-left:calc(-1*((100% - 5*var(--gut))/6*2 + 2*var(--gut)))}
}
@media (max-width:600px){
  #ways .score .c1,#ways .score .c2{grid-column:1/-1;text-align:left}
  #ways .score .c2{grid-row:2;margin-top:4px}
  #ways .score .c3{grid-row:3;padding-left:0}
  #ways .score .c3 .wct{margin-left:0;font-size:32px}
  .v .n{font-size:64px;margin-bottom:16px}
}

/* legal + 404 pages (Tomás). Same tokens and grid as Home. */
.page{padding-top:clamp(56px,7vw,104px);padding-bottom:var(--sec)}
.page h1{grid-column:3/13;font-weight:300;font-size:var(--h2);line-height:1.04;letter-spacing:-.03em}
.page .lab{padding-top:.75em}
.page .upd{grid-column:3/13;margin-top:20px}
.prose{grid-column:3/9;margin-top:72px}
.prose h2{font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-.01em;margin-top:48px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin-top:12px;max-width:62ch}
.prose ul{padding-left:1.1em}
.prose li{margin-top:6px}
.prose a{text-underline-offset:3px;text-decoration-thickness:1px}
.nf .body{grid-column:3/9;margin-top:32px}
.nf .acts{grid-column:3/13;margin-top:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
@media (max-width:1023px){.page h1,.page .upd,.prose,.nf .body,.nf .acts{grid-column:1/9}.page .lab{padding-top:0;margin-bottom:16px}}
@media (max-width:600px){.page h1,.page .upd,.prose,.nf .body,.nf .acts{grid-column:1/5}.prose{margin-top:48px}}