/* v4: presentation first. One thing at a time, revealed on interaction. Builds on rythium.css. */

.v4 .sec4 { padding: 62px 0; }
.v4 .sec4.tone { background: #ececea; }
.v4 h2.h4x { font: 600 44px/1.08 var(--display); letter-spacing: -.018em; margin: 0 0 16px; max-width: 18em; }
.v4 .sub4 { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 0; }

/* Practices: three plain entries, no borders */
.v4 .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.v4 .three .no { font: 600 15px/1 var(--label); letter-spacing: .14em; color: var(--red-text); }
.v4 .three h3 { font: 600 30px/1.12 var(--display); margin: 14px 0 10px; }
.v4 .three h3 a { text-decoration: none; }
.v4 .three p { margin: 0; color: var(--ink-2); font-size: 17px; }

/* Clients: one quiet band of marks */
.v4 .marks { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 26px 30px; margin-top: 36px; }
.v4 .marks img { height: 30px; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .7; }

/* The desk of engagements */
.v4 .desk4 { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; margin-top: 50px; }
.v4 .panel4 { min-height: 520px; }
.v4 .panel4 .tag { font: 600 13px/1.4 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.v4 .panel4 h3 { font: 600 38px/1.08 var(--display); margin: 12px 0 16px; letter-spacing: -.015em; }
.v4 .panel4 p { color: var(--ink-2); margin: 0 0 18px; }
.v4 .panel4 ol { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: al; }
.v4 .panel4 li { counter-increment: al; display: grid; grid-template-columns: 30px 1fr; padding: 4px 0; font-size: 17px; }
.v4 .panel4 li::before { content: "(" counter(al, lower-alpha) ")"; color: var(--mute); }
.v4 .panel4 .fade { transition: opacity .35s ease; }
.v4 .panel4.switching .fade { opacity: 0; }
.v4 .picker { display: flex; gap: 20px; margin-top: 18px; flex-wrap: nowrap; white-space: nowrap; }
.v4 .picker button { all: unset; cursor: pointer; font: 600 15px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-bottom: 8px; }
.v4 .picker button.on { color: var(--ink); background: var(--pen-under) left 100% / 100% 9px no-repeat; }
.v4 .table { position: relative; height: 620px; perspective: 1700px; }
.v4 .table .plane { left: 50%; top: 50%; transform: rotateX(44deg) rotateZ(-4deg) scale(.6); }
.v4 .doc { cursor: pointer; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s, filter .6s;
           transform: translate3d(var(--x), var(--y), 0) rotateZ(var(--rz)); }
.v4 .doc:not(.on) { filter: brightness(.93) saturate(.9); }
.v4 .doc:hover { transform: translate3d(var(--x), var(--y), 18px) rotateZ(var(--rz)); }
.v4 .doc.on { transform: translate3d(var(--x), var(--y), 70px) rotateZ(0deg) scale(1.04); z-index: 5;
              box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 2px rgba(0,0,0,.2), 0 50px 70px -20px rgba(0,0,0,.45), 0 90px 140px -30px rgba(0,0,0,.4); }

/* Coverage tabs */
.v4 .tabs4 { display: flex; gap: 44px; margin-top: 44px; border-bottom: 1px solid var(--hair); }
.v4 .tabs4 button { all: unset; cursor: pointer; font: 600 28px/1 var(--display); color: var(--mute); padding: 0 0 18px; }
.v4 .tabs4 button.on { color: var(--ink); background: var(--pen-under) left 100% / 100% 10px no-repeat; }
.v4 .pane4 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 34px; min-height: 230px; }
.v4 .pane4 .label { display: block; margin-bottom: 12px; }
.v4 .pane4 ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.v4 .pane4 li { font: 500 21px/1.5 var(--display); color: var(--ink); }

/* Independence: statement over the object */
.v4 .indep { text-align: center; }
.v4 .indep h2 { font: 600 52px/1.06 var(--display); letter-spacing: -.02em; margin: 0 auto 18px; max-width: 15em; }
.v4 .indep .sub4 { margin: 0 auto; }
.v4 .indep .stage { height: 380px; }
.v4 .three.small h3 { font-size: 22px; margin-top: 0; }
.v4 .three.small { text-align: left; gap: 48px; margin-top: 10px; }

/* AI: titles that open */
.v4 .ai4 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.v4 .opens { margin-top: 30px; }
.v4 .opens details { border-top: 1px solid var(--hair); }
.v4 .opens details:last-child { border-bottom: 1px solid var(--hair); }
.v4 .opens summary { list-style: none; cursor: pointer; padding: 15px 30px 15px 0; font: 600 21px/1.3 var(--display); position: relative; }
.v4 .opens summary::-webkit-details-marker { display: none; }
.v4 .opens summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font: 400 24px/1 var(--text); color: var(--red); }
.v4 .opens details[open] summary::after { content: "–"; }
.v4 .opens p { margin: 0 0 16px; color: var(--ink-2); font-size: 17px; }

/* Cases: one at a time */
.v4 .cases4 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; margin-top: 48px; align-items: start; }
.v4 .case-view .fig { font: 400 132px/0.9 var(--pen); color: var(--red-ink); transform: rotate(-3deg); display: inline-block; padding: 18px 34px;
                      background: var(--pen-loop) center / 100% 100% no-repeat; margin: 0 0 12px -20px; }
.v4 .case-view h3 { font: 600 34px/1.12 var(--display); margin: 8px 0 14px; letter-spacing: -.012em; }
.v4 .case-view p { color: var(--ink-2); font-size: 19px; margin: 0; max-width: 30em; }
.v4 .case-view .fade { transition: opacity .3s; }
.v4 .case-view.switching .fade { opacity: 0; }
.v4 .case-list { list-style: none; margin: 0; padding: 0; counter-reset: cs; }
.v4 .case-list li { counter-increment: cs; }
.v4 .case-list button { all: unset; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; width: 100%; padding: 13px 0; border-top: 1px solid var(--hair); font: 500 19px/1.35 var(--display); color: var(--mute); }
.v4 .case-list li:last-child button { border-bottom: 1px solid var(--hair); }
.v4 .case-list button::before { content: counter(cs, decimal-leading-zero); font: 600 14px/1.9 var(--label); letter-spacing: .12em; }
.v4 .case-list button.on { color: var(--ink); }
.v4 .case-list button.on::before { color: var(--red-text); }

/* Insights + one film */
.v4 .read4 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; margin-top: 44px; align-items: start; }
.v4 .read4 ol { list-style: none; margin: 0 0 22px; padding: 0; }
.v4 .read4 li a { display: block; padding: 16px 0; border-top: 1px solid var(--hair); font: 600 23px/1.28 var(--display); text-decoration: none; }
.v4 .read4 li:last-child a { border-bottom: 1px solid var(--hair); }
.v4 .read4 li a:hover { color: var(--red-text); }
.v4 .film { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #111; }
.v4 .film img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.85); transition: filter .4s; }
.v4 .film:hover img { filter: none; }
.v4 .film .play { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--red); box-shadow:0 12px 30px -8px rgba(0,0,0,.6); }
.v4 .film .play::after { content: ""; position: absolute; left: 31px; top: 25px; border-left: 22px solid var(--ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.v4 .film-title { font: 600 22px/1.3 var(--display); margin: 16px 0 8px; }
.v4 .more-films { color: var(--mute); font-size: 16px; margin: 0 0 14px; }

/* Questions: titles only */
.v4 .faq4 { columns: 2; column-gap: 56px; margin-top: 40px; }
.v4 .faq4 details { break-inside: avoid; border-top: 1px solid var(--hair); }
.v4 .faq4 summary { list-style: none; cursor: pointer; padding: 15px 30px 15px 0; font: 500 19px/1.35 var(--display); position: relative; }
.v4 .faq4 summary::-webkit-details-marker { display: none; }
.v4 .faq4 summary::after { content: "+"; position: absolute; right: 2px; top: 13px; font: 400 22px/1 var(--text); color: var(--red); }
.v4 .faq4 details[open] summary::after { content: "–"; }
.v4 .faq4 .a { padding: 0 0 16px; color: var(--ink-2); font-size: 16.5px; }
.v4 .faq4 .a p { margin: 0 0 10px; } .v4 .faq4 .a ul { margin: 0 0 10px; padding-left: 18px; }