/* tedsmedia.com, one stylesheet for every page.
   Ted’s Media brand book: Outfit Bold for headlines and numbers, DM Sans for text, black and chalk,
   square corners, no shadows or gradients, real client frames with the view count underneath,
   one green moment per page and one black block per page. */

:root {
  --chalk: #F6F5F0;
  --black: #111111;
  --green: #577D4B;
  --gray: #67675F;
  --mist: #DCDBD3;
  --white: #FFFFFF;
  --gray-d: #A3A39B;
  --line-d: #34342F;
  --black-2: #1B1B19;
  --display: "Outfit", "Century Gothic", Arial, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --pad: clamp(20px, 3.4vw, 48px);
  --gl: max(var(--pad), env(safe-area-inset-left, 0px));
  --gr: max(var(--pad), env(safe-area-inset-right, 0px));
  --hd: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 12px); }
body { margin: 0; background: var(--chalk); color: var(--black); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
button, input, select, textarea { border-radius: 0; }
input, textarea { -webkit-appearance: none; appearance: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--black); color: var(--white); }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--black); color: var(--white); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Type */
.label { display: block; font: 700 11.5px/1.35 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.dark .label { color: var(--gray-d); }
.h1, .h2, .h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; }
.h1 { font-size: clamp(44px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.035em; }
.h2 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.02; letter-spacing: -0.03em; }
.h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -0.02em; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.muted { color: var(--gray); }
.dark .muted { color: var(--gray-d); }
.num { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ap { color: var(--green); }
.src { font-size: 13px; line-height: 1.45; color: var(--gray); }
.dark .src { color: var(--gray-d); }
.src a { color: inherit; }
.mk-h { position: relative; }
.mk-h .mk { position: absolute; left: -0.6em; top: .1em; height: .7em; width: auto; }
@media (max-width: 1540px) { .mk-h .mk { position: static; display: block; height: .56em; margin-bottom: .22em; } }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 22px; border: 1.5px solid var(--black); background: transparent; color: var(--black); font: 700 15px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--black); color: var(--white); }
.btn--solid { background: var(--black); color: var(--white); }
.btn--solid:hover { background: #2B2B28; border-color: #2B2B28; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn .ar { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }
.btn[disabled] { opacity: .55; cursor: progress; }
.dark .btn { border-color: var(--white); color: var(--white); }
.dark .btn:hover { background: var(--white); color: var(--black); }
.dark .btn--solid { background: var(--white); color: var(--black); }
.dark .btn--solid:hover { background: var(--chalk); border-color: var(--chalk); }
.go { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--body); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.go .ar { transition: transform .25s var(--ease); }
.go:hover .ar, a:hover .go .ar { transform: translateX(4px); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Utility bar */
.ub { background: var(--black); color: var(--gray-d); font-size: 13px; line-height: 1.3; }
.ub .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.ub a { color: var(--white); text-decoration: none; }
.ub a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ub-r { display: flex; gap: 24px; white-space: nowrap; }
@media (max-width: 1020px) { .ub-r { display: none; } .ub .wrap { justify-content: center; text-align: center; } }

/* Header */
.hd { position: sticky; top: 0; z-index: 50; background: var(--chalk); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hd.is-scrolled, .hd.is-open { border-bottom-color: var(--mist); }
.hd-bar { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); height: var(--hd); }
.hd-logo { flex: none; display: block; }
.hd-logo img { height: 30px; width: auto; }
.nav { display: flex; align-items: stretch; height: 100%; }
.nv { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; background: none; border: 0; font: 400 15px/1 var(--body); color: var(--black); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nv::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nv:hover::after, .nv[aria-expanded="true"]::after, .nv[aria-current="page"]::after { transform: scaleX(1); }
.nv .pl { font-size: 17px; line-height: 1; transition: transform .25s var(--ease); }
.nv[aria-expanded="true"] .pl { transform: rotate(45deg); }
.hd-sp { flex: 1; }
.hd-r { display: flex; align-items: center; gap: 8px; }
.hd-mail { font-size: 14px; text-decoration: none; margin-right: 10px; white-space: nowrap; }
.hd-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-btn { display: none; }
@media (max-width: 1180px) { .hd-mail { display: none; } }
@media (max-width: 1020px) {
  :root { --hd: 62px; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hd-logo img { height: 26px; }
}
@media (max-width: 420px) { .hd-r .btn--apply .long { display: none; } }
@media (min-width: 421px) { .hd-r .btn--apply .short { display: none; } }

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--chalk); border-top: 1px solid var(--mist); border-bottom: 1.5px solid var(--black); }
.mega[hidden] { display: none; }
.mega-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 48px; padding-block: 36px 44px; }
.mega-in .h3 { margin-top: 12px; max-width: 16ch; }
.mega-in .go { margin-top: 22px; }
.mega-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
.mega-items a { display: block; padding: 16px 0 18px; border-top: 1px solid var(--mist); text-decoration: none; }
.mega-items b { display: block; font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; }
.mega-items span { display: block; margin-top: 4px; font-size: 14px; color: var(--gray); }
.mega-items a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.mega-feat { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-content: start; text-decoration: none; }
.mega-feat img { width: 112px; aspect-ratio: 9 / 16; object-fit: cover; }
.mega-feat .num { display: block; font-size: 34px; margin-top: 10px; }
.mega-feat p { margin-top: 6px; font-size: 14px; color: var(--gray); }

/* Mobile menu */
.mm { position: fixed; inset: 0; z-index: 60; background: var(--chalk); display: flex; flex-direction: column; overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.mm[hidden] { display: none; }
.mm-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--hd); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--mist); }
.mm-top img { height: 26px; width: auto; }
.mm-body { padding-block: 12px 28px; display: grid; gap: 0; }
.mm details { border-bottom: 1px solid var(--mist); }
.mm summary, .mm-link { display: flex; align-items: center; justify-content: space-between; min-height: 64px; font: 700 28px/1.1 var(--display); letter-spacing: -0.025em; list-style: none; cursor: pointer; text-decoration: none; border-bottom: 1px solid var(--mist); }
.mm details summary { border-bottom: 0; }
.mm summary::-webkit-details-marker { display: none; }
.mm summary::after { content: "+"; font: 400 28px/1 var(--body); transition: transform .25s var(--ease); }
.mm details[open] summary::after { transform: rotate(45deg); }
.mm details a { display: block; padding: 10px 0; font-size: 18px; text-decoration: none; }
.mm details div { padding-bottom: 16px; }
.mm-foot { display: grid; gap: 14px; margin-top: auto; padding-top: 20px; }
.mm-foot .btn { width: 100%; }

/* Sections */
.sec { padding-block: clamp(72px, 9vw, 136px); }
.sec--t { padding-top: clamp(48px, 5vw, 72px); }
.sec--b0 { padding-bottom: 0; }
.dark { background: var(--black); color: var(--white); }
.white { background: var(--white); }
.rule { border-top: 1px solid var(--mist); }
.dark .rule, .dark.rule { border-top-color: var(--line-d); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 4.6vw, 64px); }
.sec-head .label { grid-column: 1 / -1; }
.sec-head > p { color: var(--gray); max-width: 50ch; }
.dark .sec-head > p { color: var(--gray-d); }
.sec-head .side { display: grid; gap: 22px; justify-items: start; }
.sec-head .side p { color: var(--gray); max-width: 50ch; }
.dark .sec-head .side p { color: var(--gray-d); }
.count-big { font: 700 clamp(48px, 6vw, 96px)/.9 var(--display); letter-spacing: -0.04em; color: var(--gray-d); justify-self: end; }
@media (max-width: 860px) { .sec-head { grid-template-columns: minmax(0, 1fr); } .count-big { justify-self: start; } }

/* Divider: one or two lowercase words cropped by the bottom edge */
.divider { background: var(--black); color: var(--white); overflow: hidden; height: clamp(104px, 15.5vw, 236px); display: flex; align-items: flex-end; }
.divider span { display: block; font: 700 clamp(132px, 21vw, 320px)/.74 var(--display); letter-spacing: -0.055em; white-space: nowrap; transform: translateY(19%); padding-left: var(--gl); }
.divider--chalk { background: var(--chalk); color: var(--black); }

/* Frames: 9:16 with the view count underneath */
.vf { display: block; min-width: 0; text-decoration: none; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; width: 100%; }
.vf-img { position: relative; display: block; overflow: hidden; background: var(--black); aspect-ratio: 9 / 16; }
.vf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.vf-img.land { aspect-ratio: 16 / 9; }
.vf:hover .vf-img img { transform: scale(1.04); }
.vf .play { position: absolute; left: 0; bottom: 0; width: 44px; height: 44px; background: var(--black); display: grid; place-items: center; }
.vf .play svg { width: 13px; height: 15px; fill: var(--white); margin-left: 3px; }
.dark .vf .play { background: var(--white); }
.dark .vf .play svg { fill: var(--black); }
.vf .num { display: block; margin-top: 12px; font-size: clamp(24px, 2.2vw, 32px); }
.vf .who { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--gray); }
.dark .vf .who { color: var(--gray-d); }
.vf .who b { color: var(--black); font-weight: 700; }
.dark .vf .who b { color: var(--white); }

/* Carousel */
.car-wrap { position: relative; }
.car { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cw, 236px); gap: var(--cg, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gr)); padding-right: var(--gr); scroll-padding-left: 0; }
.car::-webkit-scrollbar { display: none; }
.car > * { scroll-snap-align: start; }
.car-nav { display: flex; gap: 8px; }
.car-nav button { width: 50px; height: 50px; display: grid; place-items: center; border: 1.5px solid var(--black); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.car-nav button:hover { background: var(--black); color: var(--white); }
.car-nav button[disabled] { opacity: .3; cursor: default; background: transparent; color: var(--black); }
.dark .car-nav button { border-color: var(--white); }
.dark .car-nav button:hover { background: var(--white); color: var(--black); }
.dark .car-nav button[disabled] { color: var(--white); background: transparent; }
.car-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.car-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.car-head--over { justify-content: flex-end; margin-top: -78px; }
@media (max-width: 760px) { .car-head--over { margin-top: 0; justify-content: flex-start; margin-bottom: 18px; } }

/* Tabs */
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--mist); margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 0 12px; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--black); border-bottom-color: var(--black); }
.tabs button .c { color: var(--gray); margin-left: 4px; }

/* ===== Home: hero ===== */
.hero { position: relative; overflow: hidden; }
.hero-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line-d); }
.hero-tabs a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 12px; border-left: 1px solid var(--line-d); font: 700 11.5px/1.25 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-d); text-decoration: none; text-align: center; transition: color .2s, background .2s; }
.hero-tabs a:first-child { border-left: 0; }
.hero-tabs a:hover { color: var(--white); background: var(--black-2); }
.hero-main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); min-height: clamp(620px, calc(100svh - 38px - var(--hd) - 52px - 40px), 820px); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 56px; }
.hero h1 { font-size: clamp(46px, 6vw, 92px); line-height: .97; letter-spacing: -0.038em; max-width: 13.5ch; }
.hero .lead { color: var(--gray-d); max-width: 46ch; }
.hero .lead b { color: var(--white); font-weight: 700; }
.wall { position: relative; contain: size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow: hidden; margin-right: calc(-1 * var(--gr)); padding-right: var(--gr); }
.wall-col { position: relative; overflow: hidden; }
.wall-track { display: grid; gap: 22px; animation: wallUp var(--dur, 80s) linear infinite; }
.wall-col:nth-child(2) .wall-track { animation-direction: reverse; --dur: 95s; }
.wall-col:nth-child(3) .wall-track { --dur: 70s; }
.wall:hover .wall-track { animation-play-state: paused; }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 11px)); } }
.wall .vf .num { font-size: 22px; margin-top: 10px; }
.wall .vf .who { font-size: 12.5px; margin-top: 4px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-d); position: relative; background: var(--black); }
.hero-stats > div { padding: 22px 24px 20px; border-left: 1px solid var(--line-d); }
.hero-stats > div:first-child { border-left: 0; padding-left: 0; }
.hero-stats .num { display: block; font-size: clamp(34px, 3.4vw, 52px); }
.hero-stats span:not(.num) { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--gray-d); max-width: 24ch; }
.hero-src { border-top: 1px solid var(--line-d); padding-block: 12px 14px; }
.hero-stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-num { width: 100%; border: 1px solid var(--line-d); padding: clamp(24px, 3vw, 40px); margin-block: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; gap: 16px; }
.hero-num .num { font-size: clamp(60px, 6.6vw, 112px); line-height: .9; }
.hero-num .num.short { font-size: clamp(88px, 11vw, 168px); }
.hero-num p { color: var(--gray-d); font-size: 18px; max-width: 30ch; }
.hero-num .src { font-size: 13px; margin-top: auto; }
@media (max-width: 1020px) {
  .hero-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .hero-tabs::-webkit-scrollbar { display: none; }
  .hero-tabs a { flex: none; padding: 8px 18px; }
  .hero-main { grid-template-columns: minmax(0, 1fr); height: auto; gap: 8px; }
  .hero-copy { padding-block: 48px 36px; }
  .wall { contain: none; display: flex; flex-direction: column; gap: 0; margin-left: calc(-1 * var(--gl)); padding-left: 0; padding-right: 0; padding-bottom: 36px; }
  .wall-col { display: none; overflow: visible; }
  .wall-col:first-child { display: block; overflow: hidden; }
  .wall-col:first-child .wall-track { display: flex; width: max-content; gap: 12px; animation: mq 60s linear infinite; }
  .wall-col:first-child .vf { width: 136px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
}
@media (max-width: 760px) {
  .hero-stats.n3 { grid-template-columns: minmax(0, 1fr); }
  .hero-stats.n3 > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-d); }
  .hero-stats.n3 > div:first-child { border-top: 0; }
  .hero-num { margin-block: 0 40px; }
}

/* Roster: client logo marquee */
.roster { display: grid; grid-template-columns: auto minmax(0, 1fr); border-bottom: 1px solid var(--mist); }
.roster-l { display: flex; align-items: center; padding: 16px 28px 16px var(--gl); border-right: 1px solid var(--mist); max-width: 240px; }
.mq { overflow: hidden; min-width: 0; }
.mq-track { display: flex; width: max-content; animation: mq var(--dur, 70s) linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-item { display: flex; align-items: center; gap: 14px; padding: 16px 30px 16px 24px; border-right: 1px solid var(--mist); text-decoration: none; white-space: nowrap; }
.mq-item img { width: 48px; height: 48px; object-fit: cover; }
.mq-item b { display: block; font: 700 19px/1.15 var(--display); letter-spacing: -0.02em; }
.mq-item small { display: block; font-size: 13px; color: var(--gray); }
@media (max-width: 760px) { .roster { grid-template-columns: minmax(0, 1fr); } .roster-l { display: none; } }

/* Text marquee */
.tmq { overflow: hidden; border-block: 1px solid var(--mist); padding-block: clamp(16px, 2vw, 26px); }
.tmq .mq-track { --dur: 55s; }
.tmq span { font: 700 clamp(36px, 5vw, 76px)/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; padding-right: .42em; }
.tmq span i { font-style: normal; color: var(--mist); padding-left: .42em; }

/* Bento: tiles meet on hairlines */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.bx { background: var(--chalk); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 260px; }
.bx .h3 { max-width: 20ch; }
.bx p { color: var(--gray); }
.bx .h3 { color: var(--black); }
.bx .num { font-size: clamp(64px, 7vw, 108px); }
.bx .bx-foot { margin-top: auto; }
.bx--photo { padding: 0; gap: 0; }
.bx--photo .ph { flex: 1; min-height: 0; overflow: hidden; background: var(--black); }
.bx--photo .ph img { width: 100%; height: 100%; object-fit: cover; }
.bx--photo figcaption { padding: 16px 20px 18px; display: grid; gap: 4px; border-top: 1px solid var(--mist); }
.bx--photo figcaption span { font-size: 15px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.r2 { grid-row: span 2; }
.loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: auto; border: 1.5px solid var(--black); }
.loop li { position: relative; padding: 14px 10px 12px; border-left: 1.5px solid var(--black); font: 700 15px/1.2 var(--display); letter-spacing: -0.01em; transition: background .35s, color .35s; }
.loop li:first-child { border-left: 0; }
.loop li small { display: block; font: 700 10.5px/1 var(--body); letter-spacing: .14em; color: var(--gray); margin-bottom: 18px; transition: color .35s; }
.loop li.on { background: var(--black); color: var(--white); }
.loop li.on small { color: var(--gray-d); }
.rep { margin-top: auto; border-top: 1.5px solid var(--black); }
.rep div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--mist); }
.rep dt { font-size: 15px; }
.rep dd { font: 700 22px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 1020px) {
  .s3, .s4, .s5 { grid-column: span 6; } .s7, .s8 { grid-column: span 12; } .r2 { grid-row: span 1; }
  .bx--photo .ph { aspect-ratio: 4 / 5; flex: none; }
  .bx--photo.wide .ph { aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) {
  .s3, .s4, .s5, .s6 { grid-column: span 12; }
  .loop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .loop li { font-size: 12.5px; padding: 12px 6px 10px; }
  .loop li small { margin-bottom: 12px; }
}

/* Services panel */
.svc-list { border-top: 1px solid var(--line-d); }
.svc-row { display: grid; grid-template-columns: 64px minmax(0, 4.2fr) minmax(0, 3.4fr) minmax(0, 4.4fr); gap: clamp(20px, 2.6vw, 40px); padding-block: 36px; border-bottom: 1px solid var(--line-d); text-decoration: none; transition: background .3s; }
a.svc-row:hover { background: var(--black-2); }
.svc-row .n { font: 700 15px/1.6 var(--display); color: var(--gray-d); padding-left: 2px; }
.svc-row h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.04; letter-spacing: -0.03em; }
.svc-inc { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.svc-inc li { padding: 9px 0; border-top: 1px solid var(--line-d); font-size: 14px; color: var(--gray-d); }
.svc-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-self: start; }
.svc-media img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.svc-media.web { grid-template-columns: minmax(0, 1fr); background: var(--mist); padding: 14px; }
.svc-media.web img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.svc-media.type { grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line-d); aspect-ratio: 4 / 3.4; padding: 18px; align-content: space-between; }
.svc-media.type .num { font-size: clamp(56px, 6vw, 96px); }
.svc-media.type .label { color: var(--gray-d); }
.svc-desc { display: flex; flex-direction: column; gap: 22px; }
.svc-desc p { color: var(--gray-d); max-width: 44ch; }
.svc-desc .num { display: block; font-size: clamp(40px, 4vw, 58px); }
.svc-desc .m span:not(.num) { display: block; margin-top: 8px; font-size: 14px; color: var(--gray-d); max-width: 30ch; }
.svc-desc .go { align-self: flex-start; margin-top: auto; }
.svc-extra { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); padding-block: 28px 0; }
.svc-extra ul { display: flex; flex-wrap: wrap; gap: 6px 0; }
.svc-extra li { font: 700 clamp(18px, 1.7vw, 24px)/1.25 var(--display); letter-spacing: -0.02em; }
.svc-extra li::after { content: "·"; color: var(--gray-d); padding: 0 .45em; }
.svc-extra li:last-child::after { content: ""; }
@media (max-width: 1100px) {
  .svc-row { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
  .svc-media { grid-column: 3; grid-row: 1 / span 2; }
  .svc-desc { grid-column: 2; }
}
@media (max-width: 700px) {
  .svc-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .svc-media, .svc-desc { grid-column: auto; grid-row: auto; }
  .svc-media { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; }
  .svc-media.type { aspect-ratio: auto; gap: 24px; }
  .svc-extra { grid-template-columns: minmax(0, 1fr); }
}

/* Case study cards */
.case { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; }
.case-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--black); overflow: hidden; }
.case-media img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; transition: transform .8s var(--ease); }
.case:hover .case-media img { transform: scale(1.035); }
.case-body { display: grid; gap: 8px; padding-top: 20px; }
.case-body h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; }
.case-body p { color: var(--gray); font-size: 15.5px; }
.case-m { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 1.5px solid var(--black); }
.case-m .num { font-size: clamp(36px, 3.4vw, 50px); white-space: nowrap; }
.case-m span:not(.num) { font-size: 14px; color: var(--gray); line-height: 1.35; }
.case .go { justify-self: start; margin-top: 10px; }
.site-card { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.site-card .shot { background: var(--mist); padding: clamp(14px, 1.6vw, 22px); }
.site-card .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.site-card:hover .shot img { transform: scale(1.02); }
.site-card b { display: block; margin-top: 18px; font: 700 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; }
.site-card span { display: block; margin-top: 6px; color: var(--gray); font-size: 15px; }
.photo-card { margin: 0; min-width: 0; }
.photo-card .ph { overflow: hidden; background: var(--mist); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar, 4 / 5); }
.photo-card figcaption { margin-top: 12px; font-size: 14px; color: var(--gray); }
[role="tabpanel"][hidden] { display: none; }

/* Feature: Midtown opening */
.feat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.feat-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feat-frames .vf:nth-child(2) { margin-top: 48px; }
.timeline { margin-top: 28px; border-top: 1.5px solid var(--black); }
.timeline li { display: grid; grid-template-columns: 56px minmax(0, 150px) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--mist); }
.timeline .n { font: 700 15px/1.5 var(--display); color: var(--gray); }
.timeline b { font: 700 18px/1.4 var(--display); letter-spacing: -0.01em; }
.timeline p { font-size: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.trio .num { display: block; font-size: clamp(30px, 3vw, 44px); }
.trio span:not(.num) { display: block; margin-top: 8px; font-size: 14px; color: var(--gray); line-height: 1.35; }
.dark .trio span:not(.num) { color: var(--gray-d); }
@media (max-width: 960px) { .feat { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .timeline li { grid-template-columns: 40px minmax(0, 1fr); } .timeline li p { grid-column: 2; } .trio { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Top videos wall */
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 32px; padding-bottom: 2px; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px 0 6px; border: 1px solid var(--mist); background: transparent; font: 700 14px/1 var(--body); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.filters button:hover { border-color: var(--black); }
.filters button[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.filters img { width: 38px; height: 38px; object-fit: cover; }
.filters .all { width: 38px; height: 38px; display: grid; place-items: center; background: var(--black); color: var(--white); font: 700 12px/1 var(--body); }
.filters button[aria-pressed="true"] .all { background: var(--white); color: var(--black); }
.vgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 16px; }
.vgrid > [hidden] { display: none; }
.vgrid .vf.land { grid-column: span 2; }
.vgrid .vf.land .vf-img { aspect-ratio: auto; height: calc(100% - 0px); }
.vgrid-more { margin-top: 40px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.acct { margin-top: clamp(56px, 6vw, 88px); }
.acct-row { display: grid; grid-template-columns: 56px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--mist); text-decoration: none; }
.acct-head { border-bottom: 1.5px solid var(--black); padding-bottom: 10px; }
.acct-row img { width: 56px; height: 56px; object-fit: cover; }
.acct-row b { font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; }
.acct-row small { display: block; font-size: 13.5px; color: var(--gray); }
.acct-row .num { font-size: 28px; }
.acct-row .t { font-size: 14.5px; color: var(--gray); }
a.acct-row:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) { .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .acct-row { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; }
  .acct-row img { grid-row: span 2; }
  .acct-row img { width: 48px; height: 48px; }
  .acct-row .t, .acct-row .ext { display: none; }
  .acct-head { display: none; }
}

/* Ads results */
.ads { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.block { background: var(--black); color: var(--white); padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.block .label { color: var(--gray-d); }
.block .num { font-size: clamp(72px, 9vw, 140px); line-height: .9; }
.block p { color: var(--gray-d); font-size: 18px; max-width: 32ch; }
.block p b { color: var(--white); }
.block .src { font-size: 13px; color: var(--gray-d); }
.block--wide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 18px clamp(32px, 5vw, 80px); }
.block--wide .label { grid-column: 1 / -1; }
.block--wide .txt { display: grid; gap: 14px; padding-bottom: 10px; }
@media (max-width: 760px) { .block--wide { grid-template-columns: minmax(0, 1fr); } }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 620px; }
.tbl th { text-align: right; font: 700 11px/1.35 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); padding: 0 0 12px 14px; border-bottom: 1.5px solid var(--black); vertical-align: bottom; }
.tbl td { text-align: right; padding: 15px 0 15px 14px; border-bottom: 1px solid var(--mist); font-size: 16.5px; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl td:first-child { white-space: normal; }
.tbl td:first-child b { display: block; font: 700 17px/1.25 var(--display); letter-spacing: -0.01em; }
.tbl td:first-child small { display: block; font-size: 13px; color: var(--gray); }
.tbl .est { color: var(--gray); }
.tbl .dash { color: var(--mist); }
.tbl tfoot td { font-weight: 700; border-bottom: 0; border-top: 1.5px solid var(--black); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-size: 14px; color: var(--gray); }
.legend span { display: inline-flex; align-items: baseline; gap: 8px; max-width: 46ch; }
.key { flex: none; width: 10px; height: 10px; display: inline-block; background: var(--black); transform: translateY(1px); }
.key.e { background: transparent; border: 1.5px solid var(--gray); }
@media (max-width: 960px) { .ads { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .tbl-wrap { overflow: visible; }
  .tbl { min-width: 0; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tfoot { display: block; }
  .tbl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 16px 0; border-bottom: 1px solid var(--mist); }
  .tbl td { display: block; text-align: left; padding: 6px 0; border: 0; white-space: normal; }
  .tbl td::before { content: attr(data-l); display: block; font: 700 10.5px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-bottom: 2px; }
  .tbl--c tbody td:first-child, .tbl--c tfoot td:first-child { grid-column: 1 / -1; padding-bottom: 8px; }
  .tbl--c td:first-child::before { display: none; }
  .tbl td:empty { display: none; }
  .tbl tfoot tr { border-top: 1.5px solid var(--black); border-bottom: 0; }
  .tbl tfoot td { border: 0; }
}

/* Free plan */
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.plan-copy { display: grid; gap: 24px; align-content: start; }
.plan-copy p { color: var(--gray-d); max-width: 46ch; }
.plan-proof { border-top: 1px solid var(--line-d); }
.plan-proof li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-d); }
.plan-proof .num { flex: none; min-width: 3.3em; font-size: clamp(24px, 2.2vw, 32px); }
.plan-proof span:not(.num) { font-size: 15px; color: var(--gray-d); }
.pf { border: 1px solid var(--line-d); padding: clamp(22px, 3vw, 40px); display: grid; gap: 24px; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.pf-grid .full { grid-column: 1 / -1; }
.pf-grid label { display: grid; gap: 6px; min-width: 0; font: 700 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-d); }
.pf-grid .opt { font-weight: 400; letter-spacing: .08em; opacity: .8; }
.pf-grid input, .pf-grid select, .pf-grid textarea { width: 100%; min-width: 0; min-height: 48px; border: 0; border-bottom: 1.5px solid var(--line-d); border-radius: 0; background: transparent; color: var(--white); padding: 8px 2px; font: 400 18px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.pf-grid textarea { min-height: 72px; resize: vertical; font-size: 16px; }
.pf-grid select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 24px; }
.pf-grid .sel { position: relative; }
.pf-grid .sel::after { content: "+"; position: absolute; right: 2px; bottom: 12px; font: 400 18px/1 var(--body); color: var(--gray-d); pointer-events: none; }
.pf-grid select option { color: var(--black); background: var(--white); }
.pf-grid input::placeholder, .pf-grid textarea::placeholder { color: #75756D; }
.pf-grid input:focus, .pf-grid select:focus, .pf-grid textarea:focus { outline: none; border-bottom-color: var(--white); }
.pf-grid [aria-invalid="true"] { border-bottom-color: #E0745F; }
.pf .fine { font-size: 13px; color: var(--gray-d); }
.pf .err { font-size: 15px; color: #F0A090; }
.pf .err:empty { display: none; }
.plan-out { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--hd) + 24px); }
.plan-load { display: grid; justify-items: center; gap: 20px; padding: clamp(28px, 5vw, 56px) 16px; border: 1px solid var(--line-d); text-align: center; }
.plan-load .bar { width: min(320px, 100%); height: 3px; background: var(--line-d); overflow: hidden; }
.plan-load .bar i { display: block; height: 100%; width: 30%; background: var(--white); animation: load 1.4s var(--ease) infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.plan-load li { font-size: 16px; color: #75756D; transition: color .3s; }
.plan-load li.on { color: var(--white); }
.plan-load li.done { color: var(--gray-d); }
.plan-load li.done::before { content: "✓  "; }
.plan-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line-d); }
.plan-head h3 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1; max-width: 18ch; }
.plan-head p { margin-top: 10px; max-width: 60ch; color: var(--gray-d); }
.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); margin-top: 24px; }
.idea { background: var(--black); padding: clamp(18px, 2.2vw, 28px); display: grid; gap: 12px; align-content: start; min-width: 0; }
.idea-top { display: flex; gap: 12px; font: 700 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-d); }
.idea-top .n { color: var(--white); }
.idea-top .len { margin-left: auto; }
.idea h4 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.12; }
.idea .hook { font: 700 19px/1.3 var(--display); letter-spacing: -0.01em; }
.idea dt { font: 700 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-d); margin-top: 6px; }
.idea dd { margin: 4px 0 0; font-size: 15px; color: #D9D7CF; }
.plan-site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-top: 0; }
.plan-box { background: var(--black); padding: clamp(18px, 2.2vw, 28px); }
.plan-box h4 { font-size: 20px; margin-bottom: 12px; }
.plan-box p { color: #D9D7CF; font-size: 15.5px; }
.plan-box ol { display: grid; gap: 14px; counter-reset: f; }
.plan-box li { counter-increment: f; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; font-size: 15px; }
.plan-box li::before { content: counter(f, decimal-leading-zero); grid-row: span 2; font: 700 14px/1.5 var(--display); color: var(--gray-d); }
.plan-box li b { font-weight: 700; }
.plan-box li span { color: var(--gray-d); }
.plan-cta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(20px, 2.6vw, 32px); background: var(--white); color: var(--black); }
.plan-cta b { display: block; font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -0.02em; }
.plan-cta span { color: var(--gray); }
.plan-msg { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line-d); display: grid; gap: 14px; justify-items: start; }
.plan-msg b { font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--display); }
.plan-msg p { color: #D9D7CF; max-width: 60ch; }
@media (max-width: 960px) { .plan { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ideas, .plan-site { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }

/* Fit, steps, client tiles */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.fit h3 { font-size: 24px; padding-bottom: 14px; border-bottom: 1.5px solid var(--black); display: flex; gap: 12px; align-items: baseline; }
.fit h3 small { font: 700 11px/1 var(--body); letter-spacing: .14em; color: var(--gray); }
.fit li { padding: 15px 0; border-bottom: 1px solid var(--mist); font-size: 16.5px; }
.fit .no li { color: var(--gray); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.steps > div { background: var(--chalk); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
.steps .num { font-size: 15px; color: var(--gray); }
.steps b { font: 700 clamp(26px, 2.4vw, 34px)/1.05 var(--display); letter-spacing: -0.025em; margin-top: 20px; }
.steps p { color: var(--gray); }
.terms { margin-top: 18px; font-size: 15px; color: var(--gray); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); border-top: 1px solid var(--mist); border-left: 1px solid var(--mist); }
.tiles > * { border-right: 1px solid var(--mist); border-bottom: 1px solid var(--mist); padding: 20px 18px 18px; display: grid; gap: 14px; align-content: start; text-decoration: none; min-width: 0; transition: background .2s; }
a.tile-c:hover { background: var(--white); }
.tiles img { width: 64px; height: 64px; object-fit: cover; }
.tiles b { display: block; font: 700 17px/1.2 var(--display); letter-spacing: -0.01em; }
.tiles small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--gray); }
@media (max-width: 760px) { .fit, .steps { grid-template-columns: minmax(0, 1fr); } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ, two columns */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--hd) + 32px); display: grid; gap: 20px; justify-items: start; }
.faq-side p { color: var(--gray); max-width: 36ch; }
.faq { border-top: 1.5px solid var(--black); }
.faq details { border-bottom: 1px solid var(--mist); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--display); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid var(--black); font: 400 20px/1 var(--body); transition: transform .25s var(--ease), background .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--black); color: var(--white); }
.faq details p { padding: 0 52px 24px 0; max-width: 66ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-side { position: static; } }

/* Apply band */
.cta-band { padding-top: clamp(72px, 9vw, 128px); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; padding-bottom: clamp(56px, 6vw, 88px); }
.cta-grid h2 { font-size: clamp(46px, 6.6vw, 104px); line-height: .96; letter-spacing: -0.04em; }
.cta-side { display: grid; gap: 22px; justify-items: start; }
.cta-side p { color: var(--gray-d); max-width: 40ch; }
.copy-mail { display: inline-flex; align-items: center; gap: 12px; font: 700 18px/1 var(--display); letter-spacing: -0.01em; }
.copy-mail button { border: 1.5px solid currentColor; background: none; min-height: 32px; padding: 0 12px; font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Footer */
.ft { padding-top: clamp(56px, 6vw, 88px); }
.ft-top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: 40px 32px; }
.ft h4 { margin-bottom: 14px; }
.ft nav { display: grid; gap: 8px; }
.ft nav a { width: fit-content; text-decoration: none; font-size: 15.5px; }
.ft nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft-wait { display: grid; gap: 14px; align-content: start; }
.ft-wait p { color: var(--gray); max-width: 40ch; }
.ft-wait .row { display: flex; gap: 0; max-width: 420px; }
.ft-wait input { flex: 1; min-width: 0; min-height: 50px; border: 1.5px solid var(--black); border-right: 0; background: transparent; padding: 0 14px; font: 400 16px/1 var(--body); border-radius: 0; }
.ft-wait input:focus { outline: none; background: var(--white); }
.ft-wait .note { font-size: 14px; color: var(--gray); min-height: 1.2em; }
.ft-contact { margin-top: 18px; display: grid; gap: 4px; font-size: 15px; }
.ft-contact a { font: 700 18px/1.3 var(--display); text-decoration: none; }
.ft-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft-areas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: clamp(44px, 5vw, 64px); padding-block: 22px; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
.ft-areas ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ft-areas li { font: 700 17px/1.3 var(--display); letter-spacing: -0.01em; }
.ft-mark { padding-top: clamp(32px, 5vw, 64px); }
.ft-mark img { width: 100%; height: auto; }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px max(24px, env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--gray); }
.ft-legal a { text-decoration: none; color: var(--black); }
@media (max-width: 1020px) { .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-wait { grid-column: 1 / -1; } }

/* ===== Inner pages ===== */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.ph-hero { border-bottom: 1px solid var(--mist); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.ph-copy { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.ph-copy h1 { font-size: clamp(42px, 5.4vw, 84px); line-height: 1; letter-spacing: -0.035em; max-width: 15ch; }
.ph-copy .lead { max-width: 54ch; }
.ph-media { position: relative; display: flex; align-items: flex-end; min-height: 100%; }
.ph-frames { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; align-self: stretch; align-items: end; padding-top: clamp(40px, 5vw, 72px); width: 100%; margin-right: calc(-1 * var(--gr)); }
.ph-frames .vf:nth-child(2) { transform: translateY(-36px); }
.ph-frames .vf .who { margin-bottom: 20px; }
.ph-media .block { width: 100%; margin-block: clamp(40px, 5vw, 72px); }
.ph-media .shot { width: 100%; background: var(--mist); padding: clamp(16px, 2vw, 28px); margin-block: clamp(40px, 5vw, 72px); }
.ph-media .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ph-media .logos { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--mist); border: 1px solid var(--mist); margin-block: clamp(40px, 5vw, 72px); }
.ph-media .logos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 960px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ph-copy { padding-bottom: 32px; }
  .ph-frames { padding-top: 0; margin-right: 0; padding-bottom: 8px; }
  .ph-frames .vf:nth-child(2) { transform: none; }
  .ph-media .block, .ph-media .shot, .ph-media .logos { margin-block: 0 48px; }
}
@media (max-width: 560px) { .ph-frames { --n: 2 !important; } .ph-frames .vf:nth-child(3) { display: none; } }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats > div { padding: 28px 28px 30px; border-left: 1px solid var(--mist); }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats .num { display: block; font-size: clamp(44px, 5.2vw, 76px); }
.stats span:not(.num) { display: block; margin-top: 10px; color: var(--gray); font-size: 15.5px; max-width: 28ch; }
.stats-src { border-top: 1px solid var(--mist); padding-block: 14px; }
@media (max-width: 760px) { .stats { grid-template-columns: minmax(0, 1fr); } .stats > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--mist); padding-block: 22px; } .stats > div:first-child { border-top: 0; } }
.two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.two-side { position: sticky; top: calc(var(--hd) + 32px); display: grid; gap: 18px; }
.two-side p { color: var(--gray); }
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); } .two-side { position: static; } }
.rows { border-top: 1.5px solid var(--black); }
.rows > div { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--mist); align-items: baseline; }
.rows .n { font: 700 15px/1 var(--display); color: var(--gray); }
.rows h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.rows p { color: var(--gray); }
@media (max-width: 700px) { .rows > div { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; } .rows p { grid-column: 2; } }
.facts { border-top: 1.5px solid var(--black); }
.facts > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--mist); }
.facts dt { font: 700 11.5px/1.7 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.facts dd { font-size: 18px; }
@media (max-width: 640px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.story-q { font: 700 clamp(26px, 2.8vw, 40px)/1.15 var(--display); letter-spacing: -0.025em; max-width: 26ch; }
.story p { max-width: 64ch; }
.sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sites.one { grid-template-columns: minmax(0, 720px); }
@media (max-width: 900px) { .sites { grid-template-columns: minmax(0, 1fr); } }
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.rel a { background: var(--chalk); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start; min-height: 220px; text-decoration: none; transition: background .2s; }
.rel a:hover { background: var(--white); }
.rel b { font: 700 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; }
.rel p { color: var(--gray); font-size: 15px; }
.rel .go { margin-top: auto; justify-self: start; }
@media (max-width: 900px) { .rel { grid-template-columns: minmax(0, 1fr); } .rel a { min-height: 0; } }
.idx { border-top: 1.5px solid var(--black); }
.idx a { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--mist); text-decoration: none; }
.idx .n { font: 700 15px/1 var(--display); color: var(--gray); }
.idx h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; }
.idx p { color: var(--gray); }
.idx a:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 760px) { .idx a { grid-template-columns: 40px minmax(0, 1fr); } .idx p, .idx .go { grid-column: 2; } }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
@media (max-width: 760px) { .case-grid { grid-template-columns: minmax(0, 1fr); } }
.photo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Video viewer */
.viewer { position: fixed; inset: 0; z-index: 80; background: rgba(17, 17, 17, .92); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.viewer[hidden] { display: none; }
.vbox { width: min(920px, 100%); max-height: calc(100svh - 32px); background: var(--chalk); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.vmedia { position: relative; background: #000; aspect-ratio: 9 / 16; max-height: calc(100svh - 32px); }
.vmedia iframe, .vmedia img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vmedia img.land { object-fit: contain; }
.vside { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.vtop { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.vclient { display: flex; gap: 12px; align-items: center; }
.vclient img { width: 44px; height: 44px; object-fit: cover; }
.vclient b { display: block; font: 700 19px/1.2 var(--display); letter-spacing: -0.015em; }
.vclient span { font-size: 13.5px; color: var(--gray); }
.ibtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--black); background: transparent; cursor: pointer; }
.ibtn:hover { background: var(--black); color: var(--white); }
.ibtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ibtn[disabled] { opacity: .3; }
.vviews .num { display: block; font-size: clamp(48px, 5vw, 68px); }
.vviews span:not(.num) { display: block; margin-top: 6px; color: var(--gray); font-size: 14px; }
.vcap { font-size: 16.5px; }
.vrows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mist); font-size: 15px; }
.vrows div span:first-child { color: var(--gray); }
.vnote { font-size: 13.5px; color: var(--gray); }
.vnav { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
@media (max-width: 760px) {
  .viewer { padding: 0; align-items: stretch; }
  .vbox { grid-template-columns: minmax(0, 1fr); max-height: none; height: 100%; overflow-y: auto; }
  .vmedia { max-height: 66svh; aspect-ratio: auto; height: 66svh; }
}

/* Application */
.apply { position: fixed; inset: 0; z-index: 90; background: var(--chalk); display: flex; flex-direction: column; }
.apply[hidden] { display: none; }
.ap-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--hd); padding-top: env(safe-area-inset-top, 0px); }
.ap-top .brand { display: flex; align-items: center; gap: 16px; }
.ap-top img { height: 26px; width: auto; }
.ap-bar { height: 3px; background: var(--mist); }
.ap-bar i { display: block; height: 100%; width: 0; background: var(--black); transition: width .5s var(--ease); }
.ap-body { flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 32px var(--gr) 32px var(--gl); }
.ap-step { width: min(760px, 100%); animation: stepin .45s var(--ease); }
@keyframes stepin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ap-step h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; margin-top: 14px; }
.ap-step .help { margin-top: 12px; color: var(--gray); }
.opts { margin-top: 28px; display: grid; gap: 8px; }
.opts.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.optb { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--mist); background: transparent; padding: 13px 14px; cursor: pointer; font: 400 18px/1.25 var(--body); transition: border-color .15s, background .15s, color .15s; }
.optb:hover { border-color: var(--black); }
.optb[aria-checked="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.optb kbd { font: 700 12px/1 var(--body); width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid currentColor; flex: none; }
.optb .ck { margin-left: auto; opacity: 0; }
.optb[aria-checked="true"] .ck { opacity: 1; }
.fields { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fields .full { grid-column: 1 / -1; }
.fields label { display: grid; gap: 6px; font: 700 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.fields label .opt { font-weight: 400; letter-spacing: .08em; }
.fields input, .fields textarea { min-height: 52px; border: 0; border-bottom: 2px solid var(--mist); background: transparent; padding: 8px 2px; font: 400 22px/1.3 var(--body); color: var(--black); border-radius: 0; text-transform: none; letter-spacing: 0; }
.fields textarea { min-height: 90px; resize: vertical; font-size: 18px; }
.fields input:focus, .fields textarea:focus { outline: none; border-bottom-color: var(--black); }
.ap-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ap-actions .hint { font-size: 13.5px; color: var(--gray); }
.ap-err { margin-top: 12px; color: #B3261E; font-size: 15px; min-height: 1.2em; }
.ap-sum { margin-top: 24px; border-top: 1.5px solid var(--black); }
.ap-sum div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--mist); font-size: 15px; }
.ap-sum div span:first-child { color: var(--gray); }
.ap-sum div span:last-child { text-align: right; }
@media (max-width: 560px) { .fields, .opts.cols { grid-template-columns: minmax(0, 1fr); } .ap-actions .hint { display: none; } }

/* Reveal and motion */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .mq, .wall-col:first-child { overflow-x: auto; }
}
@media print { .ub, .hd, .viewer, .apply, .mm { display: none !important; } }