/* =============================================================
   MOTION + INTERACTION LAYER
   Loaded LAST on every page (after each page's own <style>),
   so it can upgrade any page's components.
   Pairs with motion.js. You shouldn't need to edit this file
   to change content. Colors come from shared.css.

   CONTENTS
   01  Text selection color
   02  Text reveals (headline word masks, fade-ups)
   03  Hero load-in
   04  Type system: bracket eyebrows + mono labels
   05  Nav: logo intro + mobile menu
   06  Tickers (values bar, "as seen on")
   07  Results-board numbers (rolling digits)
   08  Flip cards (component)
   09  Flip cards: services, wins, awards, staff
   10  Video cards
   11  Case study tiles (tilt + glare) + filters
   12  Hero CP mark, cursor spotlight, rotating word
   13  Services: How We Work rail
   14  Why Us: win rows, awards, testimonials
   15  Team: leaders
   16  Case study pages
   17  CTA strip + footer
   18  Responsive (tablet + phone)
   19  Reduced motion
   ============================================================= */

/* ---------- 01 SELECTION ---------- */
::selection { background: var(--teal-light); color: var(--black); }

/* ---------- 02 TEXT REVEALS ---------- */
/* Headlines are split into words by motion.js (custom <cp-w>/<cp-i> tags so no page CSS touches them) */
.js cp-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0.04em 0.07em; margin: -0.1em -0.04em -0.07em; }
.js cp-i { display: inline-block; transform: translate3d(0, 112%, 0); }
.js .seen cp-i, .failsafe cp-i { transform: none; transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + var(--base, 0ms)); }
.js .hero-headline:not(.is-split), .js .cs-title:not(.is-split) { opacity: 0; }
.failsafe .hero-headline, .failsafe .cs-title { opacity: 1; }

/* Fade-up for cards and paragraphs (tagged .rv by motion.js) */
.rv { opacity: 0; transform: translate3d(0, 34px, 0); }
.rv.seen { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.failsafe .rv { opacity: 1; transform: none; }

/* Wipe-in utility (add class="wipe" to any element) */
.js .wipe:not(.seen) { clip-path: inset(0 100% 0 0); }
.wipe { transition: clip-path 1.6s var(--ease-out); }
.failsafe .wipe { clip-path: none; }

@keyframes cpRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
@keyframes cpFade { from { opacity: 0; } }

/* ---------- 03 HERO LOAD-IN ---------- */
.js :is(.hero-tag, .hero-eyebrow, .cs-back) { animation: cpRise 0.9s var(--ease-out) 0.05s backwards; }
.js :is(.hero-sub, .cs-tag) { animation: cpRise 1s var(--ease-out) 0.55s backwards; }
.js :is(.hero-stats, .cs-meta) { animation: cpRise 1s var(--ease-out) 0.7s backwards; }
.js :is(.hero-right-label, .cs-values) { animation: cpRise 1s var(--ease-out) 0.45s backwards; }
.js :is(.hero-quote-text, .hero-quote, .hero-statement) { animation: cpRise 1.1s var(--ease-out) 0.6s backwards; }
.js :is(.hero-quote-cite, .hero-cite) { animation: cpRise 1s var(--ease-out) 0.8s backwards; }
.js .award-badges .badge { animation: cpRise 0.8s var(--ease-out) backwards; animation-delay: calc(0.95s + var(--n, 0) * 70ms); }
.award-badges .badge:nth-child(2) { --n: 1; }
.award-badges .badge:nth-child(3) { --n: 2; }
.award-badges .badge:nth-child(4) { --n: 3; }
.award-badges .badge:nth-child(5) { --n: 4; }
.award-badges .badge:nth-child(6) { --n: 5; }
.award-badges .badge:nth-child(7) { --n: 6; }
.award-badges .badge:nth-child(8) { --n: 7; }
.award-badges .badge:nth-child(9) { --n: 8; }
.award-badges .badge:nth-child(10) { --n: 9; }
.js .hero-award-strip > p { animation: cpRise 0.8s var(--ease-out) 0.9s backwards; }
.js .cs-hero-img { animation: cpFade 1.2s ease 0.1s backwards; }

/* Big quote mark behind hero pull quotes */
.hero-right:has(.hero-quote, .hero-quote-text) { position: relative; overflow: hidden; }
.hero-right:has(.hero-quote, .hero-quote-text)::before { content: '\201C'; position: absolute; top: 18px; right: 32px; font-family: var(--font-serif); font-style: italic; font-size: 300px; line-height: 1; color: var(--teal); opacity: 0.13; pointer-events: none; }
.hero-right > * { position: relative; }

/* ---------- 04 TYPE SYSTEM ---------- */
/* Hero eyebrows get the same CP bracket treatment as section eyebrows */
:is(.hero-tag, .hero-eyebrow, .contact-eyebrow) { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 15px; letter-spacing: 0.16em; align-items: flex-start; gap: 9px; --bracket-p: var(--white); }
.watermark ~ .hero-eyebrow { --bracket-p: var(--black); }
:is(.hero-tag, .hero-eyebrow, .contact-eyebrow)::before,
:is(.hero-tag, .hero-eyebrow, .contact-eyebrow)::after { content: ''; width: 9px; height: 20px; flex-shrink: 0; display: block; -webkit-mask: var(--m) top left / 9px 20px no-repeat; mask: var(--m) top left / 9px 20px no-repeat; }
:is(.hero-tag, .hero-eyebrow, .contact-eyebrow)::before { background: currentColor; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20'%3E%3Cpath d='M9 0H4A4 4 0 0 0 0 4V11A4 4 0 0 0 4 15H9V12.6H4.3A1.6 1.6 0 0 1 2.7 11V4A1.6 1.6 0 0 1 4.3 2.4H9Z'/%3E%3C/svg%3E"); }
:is(.hero-tag, .hero-eyebrow, .contact-eyebrow)::after { background: var(--bracket-p); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20'%3E%3Cpath d='M0 0H5A4 4 0 0 1 9 4V11A4 4 0 0 1 5 15H3.2L0 20V12.6H4.7A1.6 1.6 0 0 0 6.3 11V4A1.6 1.6 0 0 0 4.7 2.4H0Z'/%3E%3C/svg%3E"); }

/* Small labels move to mono: reads like a returns board, and it's legible at 10-11px */
:is(.hero-right-label, .stat-label, .hero-stat-label, .leader-stat-label, .video-tag, .tile-tag, .win-location, .win-type,
    .team-role, .staff-title, .service-num, .award-org, .media-label, .test-title, .cs-tag, .cs-meta-label,
    .filter-label, .wins-sidebar-label, .hero-award-strip > p, .tile-result-label, .tile-cta, .cs-back, .cs-section-label-sub) {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.1em; }
.stat-label, .hero-stat-label, .leader-stat-label { font-size: 10px; margin-top: 8px; }

/* ---------- 05 NAV ---------- */
.intro .nav-mark .mk-c { animation: cpMkC 1.1s var(--ease-out) 0.1s backwards; }
.intro .nav-mark .mk-p { animation: cpMkP 1.1s var(--ease-out) 0.1s backwards; }
/* Typed wordmark: letters roll in on the first visit, and roll over on hover
   with Counter and Point trading colors */
.nav-word cp-l { display: inline-block; line-height: 1.2; clip-path: inset(0 -0.1em 0 -0.1em); }
.nav-word cp-li { display: block; position: relative; transition: transform 0.55s var(--ease-out); transition-delay: calc(var(--i, 0) * 22ms); }
.nav-word cp-li::after { content: attr(data-l); position: absolute; left: 0; top: 100%; }
.nw-counter cp-li::after { color: var(--teal-light); }
.nw-point cp-li::after { color: var(--white); }
.nav-logo:hover .nav-word cp-li { transform: translateY(-100%); }
.intro .nav-word cp-li { animation: cpLetterIn 0.8s var(--ease-out) backwards; animation-delay: calc(0.55s + var(--i, 0) * 38ms); }
.intro .nw-msg { animation: cpWipe 1s var(--ease-out) 1.05s backwards; }
@keyframes cpLetterIn { from { transform: translateY(105%); } }
@keyframes cpMkC { from { transform: translateX(-300px); opacity: 0; } }
@keyframes cpMkP { from { transform: translateX(300px); opacity: 0; } }
@keyframes cpWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Nav links: text roll on hover */
.nav-links a { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.nav-links a > cp-t { display: block; transition: transform 0.45s var(--ease-out); }
.nav-links a > cp-t::after { content: attr(data-t); position: absolute; left: 0; top: 100%; color: var(--teal-light); }
.nav-links a:hover > cp-t { transform: translateY(-100%); }
.nav-links-cta { display: none; }

/* ---------- 06 TICKERS ---------- */
.values-bar.is-marquee { flex-wrap: nowrap; padding: 13px 0; overflow: hidden; }
.mq-track { display: flex; align-items: center; flex-shrink: 0; width: max-content; animation: cpMarquee var(--dur, 40s) linear infinite; }
.is-marquee:hover .mq-track { animation-play-state: paused; }
@keyframes cpMarquee { to { transform: translate3d(-50%, 0, 0); } }
.media-row.is-marquee { flex-wrap: nowrap; overflow: hidden; gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.media-row.is-marquee .mq-track { gap: 10px; padding-right: 10px; }
.media-row.is-marquee .media-tag { white-space: nowrap; font-size: 15px; padding: 12px 24px; }

/* ---------- 07 RESULTS-BOARD NUMBERS ---------- */
cp-odo { display: inline-flex; align-items: flex-start; line-height: 1.05; }
cp-col { display: inline-block; height: 1.05em; overflow: hidden; }
cp-strip { display: flex; flex-direction: column; transition: transform 1.9s cubic-bezier(.2, .75, .12, 1); transition-delay: var(--d, 0ms); }
cp-strip > cp-d { display: block; height: 1.05em; }
.odo-in cp-strip { transform: translate3d(0, calc(var(--n) * -1.05em), 0); }
cp-ch { display: inline-block; }

/* ---------- 08 FLIP CARDS ----------
   Markup:  .flip > .flip-inner > .flip-front + .flip-back
   Hover flips on desktop. Tap flips on phones. Enter/Space flips by keyboard.
   Add .flip-x to flip top-to-bottom like a scoreboard flap. */
.flip { perspective: 1600px; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; }
.flip-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform 0.95s var(--ease-flip); }
.flip-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; overflow: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip.is-flipped > .flip-inner { transform: rotateY(180deg); }
.flip-x .flip-back { transform: rotateX(180deg); }
.flip-x.is-flipped > .flip-inner { transform: rotateX(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover > .flip-inner { transform: rotateY(180deg); }
  .flip-x:hover > .flip-inner { transform: rotateX(180deg); }
}
.flip:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; z-index: 2; }
.flip-hint { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.flip-hint::before { content: ''; width: 13px; height: 13px; background: currentColor; flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M13.6 8.4A5.6 5.6 0 1 1 11.8 3.6'/%3E%3Cpath d='M12.6 0.8V4.4H9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M13.6 8.4A5.6 5.6 0 1 1 11.8 3.6'/%3E%3Cpath d='M12.6 0.8V4.4H9'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- 09 FLIP CARD DESIGNS ---------- */
/* Services */
.service-card.flip { padding: 0; background: transparent; display: block; }
.service-card.flip:hover { background: transparent; }
.service-card.flip::before { display: none; }
.svc-front, .svc-back { padding: 36px 36px 32px; display: flex; flex-direction: column; min-height: 400px; }
.svc-front { background: var(--white); }
.svc-front .service-num { display: flex; justify-content: space-between; align-items: center; color: var(--teal-dim); }
.svc-icon { width: 76px; height: 76px; color: var(--teal); margin-top: 34px; overflow: visible; }
.js .svc-icon :is(path, rect, circle, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 0.35s; }
.js .seen .svc-icon :is(path, rect, circle, line, polyline), .failsafe .svc-icon * { stroke-dashoffset: 0; }
.svc-front .service-name { font-size: 40px; margin: auto 0 0; padding-top: 48px; position: relative; z-index: 1; }
.svc-front .flip-hint { color: var(--teal-dim); margin-top: 22px; position: relative; z-index: 1; }
.svc-bignum { position: absolute; right: -10px; top: -28px; font-family: var(--font-display); font-size: 210px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(36,143,159,0.2); pointer-events: none; user-select: none; }
.svc-back { background: var(--teal); color: var(--black); }
.svc-back .service-num { color: var(--black); opacity: 0.75; margin-bottom: 18px; }
/* Keep the front's title from showing through backwards once the card turns
   (Safari can ignore backface-visibility on layered children). Hides at the halfway point. */
.svc-front > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity 0s linear 0.45s; }
.flip.is-flipped .svc-front > * { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .flip:hover .svc-front > * { opacity: 0; } }
.svc-back .service-desc { color: var(--black); font-size: 14px; font-weight: 400; flex: 0 0 auto; }
.svc-back .service-list { margin-top: auto; padding-top: 24px; }
.svc-back .service-list li { color: var(--black); }
.svc-back .service-list li::before { background: var(--black); }
.svc-back .svc-back-name { font-family: var(--font-display); font-size: 26px; line-height: 0.95; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }

/* Homepage wins */
.win-item.flip { padding: 0; background: transparent; }
.win-item.flip:hover { background: transparent; }
.win-front, .win-back { padding: 28px 32px 26px; display: flex; flex-direction: column; min-height: 220px; }
.win-front { background: var(--black); transition: background 0.3s; }
.win-big { font-family: var(--font-display); font-size: 58px; line-height: 0.88; text-transform: uppercase; color: var(--white); margin: 16px 0 10px; }
.win-sub { font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.72); max-width: 280px; }
.win-front .flip-hint { margin-top: auto; padding-top: 18px; color: var(--teal-light); }
.win-back { background: var(--teal); justify-content: space-between; }
.win-back .win-location { color: var(--black); opacity: 0.8; }
.win-back .win-text { color: var(--black); font-size: 21px; line-height: 1.4; }

/* Why Us awards */
.award-card.flip { padding: 0; background: transparent; }
.award-card.flip::before { display: none; }
.award-card .flip-face { padding: 36px; min-height: 320px; display: flex; flex-direction: column; }
.award-card .flip-front { background: var(--near-black); }
.award-card .flip-front .award-name { font-size: 64px; line-height: 0.86; margin-bottom: 14px; }
.award-card .flip-front .flip-hint { margin-top: auto; color: var(--teal-light); }
.award-card .flip-back { background: var(--teal); justify-content: space-between; }
.award-card .flip-back .award-name { font-size: 30px; color: var(--black); }
.award-card .flip-back .award-name span { color: var(--white); }
.award-card .flip-back .award-desc { color: var(--black); font-size: 16px; font-weight: 400; line-height: 1.6; }

/* Team staff */
.staff-card.flip { display: block; background: transparent; }
.staff-card.flip:hover { background: transparent; }
.staff-card.flip::before { display: none; }
.staff-card .flip-front { background: var(--white); display: flex; flex-direction: column; }
.staff-card .flip-front .flip-hint { margin-top: 14px; color: var(--teal-dim); }
.staff-card .flip-back { background: var(--teal); padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.staff-card .flip-back .staff-name { color: var(--white); font-size: 30px; }
.staff-card .flip-back .staff-title { color: var(--black); }
.staff-card .flip-back .staff-bio { color: var(--black); font-weight: 400; font-size: 14px; flex: 0 0 auto; }
.staff-photo-fill, .staff-photo > img { transition: transform 1.2s var(--ease-out); }

/* ---------- 10 VIDEO CARDS ---------- */
.video-card { isolation: isolate; }
.video-bg, .video-card > img { transition: transform 1.2s var(--ease-out); }
.video-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card:hover .video-bg, .video-card:hover > img { transform: scale(1.07); }
/* Broadcast safe-area corners */
.video-card::before, .video-card::after { content: ''; position: absolute; top: 16px; width: 26px; height: 26px; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.55s var(--ease-out); }
.video-card::before { left: 16px; border-top: 2px solid var(--teal-light); border-left: 2px solid var(--teal-light); border-top-left-radius: 7px; transform: translate(12px, 12px); }
.video-card::after { right: 16px; border-top: 2px solid var(--white); border-right: 2px solid var(--white); border-top-right-radius: 7px; transform: translate(-12px, 12px); }
.video-card:hover::before, .video-card:hover::after { opacity: 1; transform: none; }
.play-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal-light); animation: cpPing 2.6s var(--ease-out) infinite; }
@keyframes cpPing { 0% { transform: scale(1); opacity: 0.85; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.video-card.featured .video-title { font-size: 34px; }

/* ---------- 11 CASE STUDY TILES + FILTERS ---------- */
@media (hover: hover) and (pointer: fine) {
  .case-tile { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; }
  .case-tile.is-tilting { transition: transform 0.12s linear; }
  .case-tile::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s; mix-blend-mode: screen;
    background: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 50%), rgba(58,184,204,0.28), transparent 55%); }
  .case-tile:hover::after { opacity: 1; }
}
.watermark { color: transparent; -webkit-text-stroke: 2px rgba(36,143,159,0.2); transform: translate3d(var(--wm, 0px), 0, 0); will-change: transform; }

/* Filter pills fill from the left instead of snapping */
.filter-btn { background-image: linear-gradient(var(--black), var(--black)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background-size 0.45s var(--ease-out), color 0.25s, border-color 0.25s; }
.filter-btn.active { background-color: var(--white); background-image: linear-gradient(var(--black), var(--black)); background-size: 100% 100%; }
.filter-btn[data-value] { background-image: linear-gradient(var(--teal-dim), var(--teal-dim)); }
.filter-btn[data-value].active { background-color: var(--white); background-image: linear-gradient(var(--teal-dim), var(--teal-dim)); background-size: 100% 100%; }

/* ---------- 12 HERO CP MARK, SPOTLIGHT, ROTATING WORD ---------- */
.hero-mark { position: absolute; z-index: 0; pointer-events: none; overflow: visible; width: min(30vw, 430px); right: -64px; top: 64px; transform: translate3d(0, var(--sy-mark, 0px), 0); }
.page-hero .hero-left > .hero-mark { width: min(19vw, 270px); right: 28px; top: auto; bottom: -70px; }
.page-hero .hero-left > :not(.hero-mark) { position: relative; z-index: 1; }
.hero-top .hero-left > .hero-mark { display: none; } /* Why Us: the stats row already carries the hero */
.hero-mark path { fill-opacity: 0; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: transform 1.2s var(--ease-out);
  animation: cpDraw 2.4s var(--ease-out) 0.35s forwards, cpFillIn 1.6s ease 2.1s forwards; }
.hero-mark .hm-c { stroke: var(--teal-light); fill: var(--teal); transform: translate(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -14px)); }
.hero-mark .hm-p { stroke: rgba(255,255,255,0.55); fill: var(--white); transform: translate(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 14px)); }
@keyframes cpDraw { to { stroke-dashoffset: 0; } }
@keyframes cpFillIn { to { fill-opacity: 0.07; } }

.cp-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background-image: radial-gradient(circle, rgba(58,184,204,0.95) 1.5px, transparent 1.6px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(240px circle at var(--sx, -999px) var(--sy, -999px), #000, transparent 100%);
          mask-image: radial-gradient(240px circle at var(--sx, -999px) var(--sy, -999px), #000, transparent 100%); }
.spot-on > .cp-spot { opacity: 1; }

/* Rotating word: letters cascade (about half a frame apart) and are clipped
   right at the top of their own line, so nothing ever crosses into WIN */
.rotator { display: inline-grid; vertical-align: top; clip-path: inset(-0.01em -0.3em -0.15em -0.3em); }
.rotator > cp-r { grid-area: 1 / 1; display: block; white-space: pre; }
.rotator cp-c { display: inline-block; transform: translate3d(0, 130%, 0); transition: transform 0.75s var(--ease-out); transition-delay: calc(var(--j, 0) * 21ms); }
.rotator > cp-r.on cp-c { transform: none; transition-delay: calc(var(--j, 0) * 21ms + 70ms); }
.rotator > cp-r.off cp-c { transform: translate3d(0, -130%, 0); }
.rotator > cp-r.reset cp-c { transition: none; }
cp-sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 13 HOW WE WORK RAIL ---------- */
.section-approach > div:first-child { position: sticky; top: calc(var(--nav-h) + 48px); }
.approach-steps { position: relative; }
.approach-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.08); z-index: 2; pointer-events: none; }
.approach-rail > i { display: block; height: 100%; background: var(--teal-light); transform-origin: top; transform: scaleY(var(--rail, 0)); }
.step-num { transition: opacity 0.5s, color 0.5s; }
.approach-step.is-active { background: #232222; }
.approach-step.is-active .step-num { opacity: 1; }

/* ---------- 14 WHY US ---------- */
.win-row { position: relative; isolation: isolate; }
.win-row::before { content: ''; position: absolute; inset: 0 -16px; background: var(--teal-pale); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease-out); z-index: -1; }
.win-row:hover { background: none; padding-left: 0; padding-right: 0; margin: 0; }
.win-row:hover::before { transform: scaleX(1); }
.win-row > * { transition: transform 0.55s var(--ease-out), color 0.3s; }
.win-row:hover .win-state { transform: translateX(10px); color: var(--black); }
.win-row:hover .win-type { color: var(--teal-dim); }
.test-quote-mark { transform-origin: left bottom; }
.testimonial.seen .test-quote-mark { animation: cpPop 0.9s var(--ease-out) 0.25s backwards; }
@keyframes cpPop { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } }

/* ---------- 15 TEAM ---------- */
.leader-photo > :first-child { transform: translate3d(0, var(--par, 0px), 0) scale(1.12); will-change: transform; }
.leader-photo::before { content: ''; position: absolute; top: 24px; left: 24px; width: 40px; height: 40px; border-top: 3px solid var(--teal-light); border-left: 3px solid var(--teal-light); border-top-left-radius: 10px; z-index: 2; pointer-events: none; }
.team-photo .photo-fill, .team-photo > img { transition: transform 1s var(--ease-out); }
.team-card:hover .photo-fill, .team-card:hover .team-photo > img { transform: scale(1.08); }

/* ---------- 16 CASE STUDY PAGES ---------- */
.cs-hero-img > :first-child:not(.cs-img-overlay) { transform: translate3d(0, var(--par, 0px), 0) scale(1.12); will-change: transform; }
.cs-hero-img::before { content: ''; position: absolute; top: 24px; left: 24px; width: 40px; height: 40px; border-top: 3px solid var(--teal-light); border-left: 3px solid var(--teal-light); border-top-left-radius: 10px; z-index: 2; pointer-events: none; }
.cs-section-num { color: transparent; -webkit-text-stroke: 1.5px var(--teal); opacity: 1; font-size: 64px; }
.cs-section { position: relative; }
.cs-section::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) 0.2s; }
.cs-section.seen::before { transform: scaleX(1); }
.cs-video-frame::before { content: ''; position: absolute; top: 14px; left: 14px; width: 26px; height: 26px; border-top: 2px solid var(--teal-light); border-left: 2px solid var(--teal-light); border-top-left-radius: 7px; z-index: 2; pointer-events: none; }

/* ---------- 17 CTA + FOOTER ---------- */
.cta-ghost { position: absolute; left: 0; top: 50%; z-index: 0; display: flex; width: max-content; pointer-events: none; user-select: none;
  transform: translate3d(0, -50%, 0); animation: cpMarqueeY 70s linear infinite; }
.cta-ghost span { font-family: var(--font-display); font-size: 260px; line-height: 1; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(23,22,22,0.13); padding-right: 0.25em; }
@keyframes cpMarqueeY { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } }
.cta-btn, .form-btn { will-change: transform; }
#contact, [id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- 18 RESPONSIVE ---------- */
.hero .hero-headline { font-size: clamp(60px, 8vw, 116px); }
.page-hero .hero-headline { font-size: clamp(54px, 6.7vw, 96px); }
.watermark ~ .hero-headline { font-size: clamp(60px, 8.4vw, 120px); }

@media (max-width: 1180px) {
  nav { padding: 0 28px; gap: 18px; }
  .nav-links { gap: 20px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  nav { padding: 0 20px; }
  .nav-word { font-size: 18px; }
  .nw-msg { font-size: 11px; margin-left: 6px; }
  .nav-mark { height: 32px; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 46px; height: 46px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
  .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); transition: transform 0.45s var(--ease-out); }
  .menu-open .nav-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-open .nav-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .nav-links { position: fixed; left: 0; right: 0; top: var(--nav-h); height: calc(100dvh - var(--nav-h)); background: var(--black); flex-direction: column; gap: 0; padding: 24px 20px 40px; overflow-y: auto;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.6s var(--ease-out), visibility 0s linear 0.6s; }
  .menu-open .nav-links { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.6s var(--ease-out), visibility 0s; }
  .menu-open, .menu-open body { overflow: hidden; }
  .nav-links li { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.09); }
  .nav-links a { display: block; font-size: 46px; line-height: 1.1; padding: 12px 0 10px; color: var(--white); overflow: visible; transform: translate3d(0, 110%, 0); transition: transform 0.6s var(--ease-out), color 0.2s; transition-delay: calc(var(--n, 0) * 55ms + 80ms); }
  .nav-links a > cp-t::after { display: none; }
  .nav-links a:hover > cp-t { transform: none; }
  .menu-open .nav-links a { transform: none; }
  .nav-links .nav-links-cta { display: block; border-bottom: 0; margin-top: 18px; }
  .nav-links .nav-links-cta a { color: var(--teal-light); }

  /* page heroes */
  .hero, .page-hero, .hero-top { grid-template-columns: 1fr !important; }
  .hero-left { padding: 56px 20px 48px !important; }
  .hero-right { padding: 44px 20px !important; border-left: 0 !important; border-top: 4px solid var(--teal); }
  .hero-headline { font-size: clamp(54px, 13vw, 88px) !important; }
  .hero-left > .hero-mark { width: 42vw; right: -10%; top: 84px; bottom: auto; opacity: 0.6; }
  .page-hero .hero-left > .hero-mark { display: none; }
  .section-headline, .section-headline-light { font-size: 48px; margin-bottom: 32px; }

  /* homepage */
  .section-video, .section-team, .section-staff, .section-wins:not(:has(.wins-sidebar)), .section-awards, .section-testimonials { padding: 64px 20px !important; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .video-card.featured { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .section-wins:has(.wins-sidebar) { grid-template-columns: 1fr; }
  .wins-sidebar { padding: 56px 20px; }
  .team-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-contact { grid-template-columns: 1fr; gap: 40px; padding: 64px 20px; }
  .contact-headline { font-size: 52px; }

  /* services */
  .services-intro { grid-template-columns: 1fr; gap: 18px; padding: 48px 20px; }
  .section-approach { grid-template-columns: 1fr; gap: 36px; padding: 64px 20px; }
  .section-approach > div:first-child { position: static; }

  /* team */
  .leader-card { grid-template-columns: 1fr; min-height: 0; direction: ltr !important; }
  .leader-photo { min-height: 380px; }
  .leader-bio, .leader-card:nth-child(even) .leader-bio { padding: 44px 20px; border-left: 0; border-right: 0; border-top: 4px solid var(--teal); }
  .leader-name { font-size: 54px; }

  /* why us */
  .hero-stats:has(.hero-stat) { grid-template-columns: repeat(2, 1fr); }
  .hero-stat { padding: 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .hero-stat-num { font-size: 46px; }
  .awards-grid, .test-grid { grid-template-columns: 1fr; }

  /* case studies */
  .page-hero:has(.watermark) { padding: 56px 20px 48px; }
  .watermark { font-size: 220px; }
  .filter-bar { padding: 14px 20px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-btn, .filter-label { flex-shrink: 0; }
  .tile-grid-wrap { padding: 40px 20px; }

  /* global strips */
  .values-bar { padding-left: 20px; padding-right: 20px; }
  .cta-strip { flex-direction: column; align-items: flex-start; padding: 56px 20px; gap: 24px; }
  .cta-right { align-items: flex-start; }
  .cta-body { text-align: left; }
  .cta-headline { font-size: 44px; }
  footer { padding: 48px 20px 20px; }
  .footer-top { flex-direction: column; gap: 24px; margin-bottom: 36px; }
}

@media (max-width: 640px) {
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .stat-num { font-size: 38px; }
  .video-grid { grid-template-columns: 1fr; }
  .video-card.featured { min-height: 360px; }
  :is(.section-eyebrow, .section-eyebrow-light, .hero-tag, .hero-eyebrow, .contact-eyebrow) { letter-spacing: 0.08em; }
  .wins-grid { grid-template-columns: 1fr !important; }
  .win-big { font-size: 50px; }
  .form-row { grid-template-columns: 1fr; }
  .team-card { gap: 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .svc-front, .svc-back { min-height: 360px; padding: 32px 22px 28px; }
  .approach-step { grid-template-columns: 52px 1fr; gap: 14px; padding: 26px 20px; }
  .step-num { font-size: 38px; }
  .tile-grid { grid-template-columns: 1fr; }
  .win-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .win-type { text-align: left; }
  .leader-stats { gap: 22px; flex-wrap: wrap; }
  .leader-stat-num { font-size: 34px; }
  .section-headline, .section-headline-light { font-size: 42px; }
  .cs-title { font-size: 44px !important; }
  .award-card .flip-front .award-name { font-size: 54px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 14px 22px; }
}

@media (max-width: 460px) {
  .staff-grid { grid-template-columns: 1fr; }
  .staff-photo { aspect-ratio: 1 / 1; }
  .nav-word { font-size: 16px; }
  .nw-msg { font-size: 10px; letter-spacing: 0.16em; }
  .nav-logo { gap: 9px; }
}

/* ---------- 19 REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .rv, .js cp-i { opacity: 1 !important; transform: none !important; }
  .js .wipe:not(.seen) { clip-path: none; }
  .cta-ghost, .play-btn::before { display: none; }
  .hero-mark path { stroke-dashoffset: 0; fill-opacity: 0.07; }
}

/* Breathing room between the homepage headline and the paragraph below it */
.hero .hero-bottom { margin-top: 40px; }

/* Grid hairlines live on the cards instead of the grid background,
   so no empty gray/teal slab shows before the cards fade in. */
:is(.services-grid, .staff-grid, .test-grid, .cs-sections) { background: transparent; gap: 1px; }
:is(.services-grid, .staff-grid, .test-grid, .cs-sections) > * { box-shadow: 0 0 0 1px var(--gray-light); }
.awards-grid { background: transparent; gap: 1px; }
.awards-grid > * { box-shadow: 0 0 0 1px rgba(36,143,159,0.18); }
.wins-grid { background: var(--black) !important; gap: 1px; }
.wins-grid > * { box-shadow: 0 0 0 1px rgba(36,143,159,0.22); }


/* =============================================================
   RECOGNITION (homepage hero) + PRESS NAMES
   Awards sit in laurels; outlets are set as type, each in its
   own face so the row reads like a logo wall, not buttons.
   Official logos: see images/press/README in the HTML comments.
   ============================================================= */
.recognition { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--gray-light); }
.rec-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); display: flex; align-items: center; gap: 12px; }
.rec-label::after { content: ''; flex: 1; height: 1px; background: var(--gray-light); }
.rec-awards { display: flex; gap: 36px; flex-wrap: wrap; margin: 18px 0 26px; }
.award-laurel { display: flex; align-items: center; gap: 4px; cursor: default; }
.laurel { width: 34px; height: 71px; color: var(--teal); fill: var(--teal); overflow: visible; flex-shrink: 0; transition: transform 0.6s var(--ease-out); }
.laurel-r { transform: scaleX(-1); }
.award-laurel:hover .laurel { transform: rotate(-7deg) translateX(-3px); }
.award-laurel:hover .laurel-r { transform: scaleX(-1) rotate(-7deg) translateX(-3px); }
.laurel .lf { transform-box: fill-box; transform-origin: center; }
.js .laurel .lf { animation: cpLeaf 0.6s var(--ease-out) backwards; animation-delay: calc(1.05s + var(--k, 0) * 45ms); }
.js .laurel .lstem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cpDraw 1s var(--ease-out) 0.95s forwards; }
@keyframes cpLeaf { from { transform: scale(0); } }
.al-text { text-align: center; padding: 0 6px; min-width: 112px; }
.al-big { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--black); text-transform: uppercase; }
.al-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim); margin-top: 4px; }
.al-org { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-top: 5px; }

.press-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 34px; margin-top: 14px; }
.press { display: inline-flex; align-items: center; color: var(--black); opacity: 0.72; white-space: nowrap; line-height: 1; transition: opacity 0.35s, transform 0.5s var(--ease-out); cursor: default; }
.press img { height: 24px; width: auto; display: block; filter: grayscale(1); }
.press:has(img) .press-name { display: none; }
.press-row:hover .press { opacity: 0.35; }
.press-row .press:hover { opacity: 1; transform: translateY(-2px); }
.press-npr { font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: 0.34em; }
.press-cnn { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.03em; }
.press-msnbc { font-family: var(--font-mono); font-weight: 500; font-size: 16px; letter-spacing: 0.06em; }
.press-daily { font-family: var(--font-serif); font-style: italic; font-size: 20px; }
.press-colbert { font-family: var(--font-body); font-weight: 400; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; }
.js .hero .press { animation: cpRise 0.8s var(--ease-out) backwards; animation-delay: calc(1.25s + var(--n, 0) * 90ms); }
.press-row .press:nth-child(2) { --n: 1; } .press-row .press:nth-child(3) { --n: 2; }
.press-row .press:nth-child(4) { --n: 3; } .press-row .press:nth-child(5) { --n: 4; }
.js .recognition > .rec-label { animation: cpRise 0.8s var(--ease-out) 0.9s backwards; }

/* Why Us "As seen on" ticker uses the same type, reversed for the dark section */
.media-row .press { color: var(--white); opacity: 0.75; font-size: revert; }
.media-row .press-npr { font-size: 20px; } .media-row .press-cnn { font-size: 32px; }
.media-row .press-msnbc { font-size: 20px; } .media-row .press-daily { font-size: 25px; }
.media-row .press-colbert { font-size: 17px; }
.media-row.is-marquee .mq-track { gap: 64px; padding-right: 64px; }
.media-row:not(.is-marquee) { gap: 20px 48px; align-items: center; }
.media-row .press img { filter: grayscale(1) invert(1) brightness(1.4); height: 30px; }

@media (max-width: 640px) {
  .rec-awards { gap: 6px; flex-wrap: nowrap; justify-content: space-between; }
  .award-laurel { gap: 3px; }
  .laurel { width: 26px; height: 54px; }
  .al-text { min-width: 0; padding: 0 4px; }
  .al-big { font-size: 27px; }
  .al-name { font-size: 11px; }
  .al-org { font-size: 8px; letter-spacing: 0.04em; max-width: 92px; margin-left: auto; margin-right: auto; line-height: 1.4; }
  .press-row { gap: 12px 24px; }
}


/* =============================================================
   WATCH AN AD (homepage hero)
   Reads the ad list in the HTML, shows a random one per visit,
   plays it in a full-size player on click.
   ============================================================= */
.watch-ad { margin-top: 2px; }
.ad-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ad-list a { font-family: var(--font-mono); font-size: 12px; color: var(--teal-dim); }
.js .watch-ad.is-ready .ad-list { display: none; }
.ad-card { display: grid; grid-template-columns: 284px 1fr; gap: 22px; align-items: center; margin-top: 14px; }
.ad-card.swap { animation: cpAdSwap 0.6s var(--ease-out); }
@keyframes cpAdSwap { from { opacity: 0; transform: translateX(14px); } }
.js .hero .ad-card { animation: cpRise 0.9s var(--ease-out) 1.3s backwards; }
.ad-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  background: repeating-linear-gradient(45deg, var(--near-black), var(--near-black) 1px, rgba(36,143,159,0.12) 1px, rgba(36,143,159,0.12) 12px); }
.ad-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), opacity 0.4s; }
.ad-thumb:hover img { transform: scale(1.07); }
.ad-thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal); z-index: 2; }
.ad-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,22,22,0.55), transparent 60%); z-index: 1; }
.ad-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--teal); z-index: 2; display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease-out), background 0.2s; }
.ad-play::after { content: ''; border-left: 14px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.ad-play::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal-light); animation: cpPing 2.6s var(--ease-out) infinite; }
.ad-thumb:hover .ad-play { transform: scale(1.12); background: var(--teal-light); }
.ad-client { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dim); }
.ad-title { font-family: var(--font-display); font-size: 26px; line-height: 0.95; text-transform: uppercase; color: var(--black); margin: 7px 0 14px; }
.ad-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.ad-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; }
.ad-btn:hover { color: var(--teal-dim); }
.ad-btn-play::before { content: ''; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ad-next::before { content: ''; width: 12px; height: 12px; background: currentColor; transition: transform 0.5s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M13.6 8.4A5.6 5.6 0 1 1 11.8 3.6'/%3E%3Cpath d='M12.6 0.8V4.4H9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M13.6 8.4A5.6 5.6 0 1 1 11.8 3.6'/%3E%3Cpath d='M12.6 0.8V4.4H9'/%3E%3C/svg%3E") center / contain no-repeat; }
.ad-next:hover::before { transform: rotate(180deg); }

/* Full-size player */
.ad-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 28px; background: rgba(12,12,12,0.9); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s linear 0.35s; }
.ad-modal.open { opacity: 1; visibility: visible; transition: opacity 0.35s, visibility 0s; }
.modal-open, .modal-open body { overflow: hidden; }
.ad-modal-inner { width: min(1120px, 100%, calc((100vh - 150px) * 16 / 9)); transform: translateY(26px) scale(0.97); transition: transform 0.6s var(--ease-out); }
.ad-modal.open .ad-modal-inner { transform: none; }
.ad-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ad-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ad-modal-frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--teal); }
.ad-modal-frame::before { content: ''; position: absolute; top: -12px; left: -12px; width: 34px; height: 34px; border-top: 2px solid var(--teal-light); border-left: 2px solid var(--teal-light); border-top-left-radius: 9px; }
.ad-modal-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 18px; }
.ad-modal-bar .ad-client { color: var(--teal-light); }
.ad-modal-bar .ad-title { color: var(--white); font-size: 30px; margin: 6px 0 0; }
.ad-modal-bar .ad-btn { color: rgba(255,255,255,0.8); }
.ad-modal-bar .ad-btn:hover { color: var(--teal-light); }
.ad-close::before { content: ''; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M1 1L11 11M11 1L1 11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M1 1L11 11M11 1L1 11'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (max-width: 640px) {
  .ad-card { grid-template-columns: 178px 1fr; gap: 14px; }
  .ad-title { font-size: 21px; margin-bottom: 10px; }
  .ad-actions { gap: 12px; }
  .ad-modal { padding: 14px; }
  .ad-modal-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ad-modal-bar .ad-title { font-size: 24px; }
}