/* R&A art\pr agency — site styles */
:root {
  --black: #0D0D0D;
  --black-2: #1A1A1A;
  --black-3: #161616;
  --line: #2A2A2A;
  --lime: #E4FF3D;
  --lime-2: #CDDD47;
  --white: #fff;
  --gray: #F4F4F4;
  --gray-2: #E8E8E8;
  --muted: #8A8A8A;
  --wrap: 1240px;
  --pad: 24px;
  --r: 24px;
  --hdr: 76px;
  --edge: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  --font-d: 'Unbounded', 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-b: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px) }
body { margin: 0; background: var(--white); color: var(--black); font: 400 17px/1.6 var(--font-b); -webkit-font-smoothing: antialiased; overflow-x: clip }
img { max-width: 100%; height: auto }
a { color: inherit }
button, input, select, textarea { font: inherit }
[hidden] { display: none !important }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px }
.sec--lime :focus-visible, .cta-r :focus-visible, .shero-r :focus-visible, .hero-r :focus-visible { outline-color: var(--black) }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad) }
.wrap--narrow { max-width: 860px }
.edge-l { padding-left: var(--edge) }
.edge-r { padding-right: var(--edge) }
.disp { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em }
.i { width: 1em; height: 1em; flex: none }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--black); padding: 10px 16px; border-radius: 10px; font-weight: 800; text-decoration: none }
.skip:focus { top: 12px }

@keyframes mq { to { transform: translateX(-50%) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fl { 50% { translate: 0 -12px } }
@keyframes up { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes blink { 50% { opacity: .2 } }

/* ── Buttons, pills, chips ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 2px solid transparent; font: 800 14px/1.1 var(--font-b); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s }
.btn:hover { transform: translateY(-2px) }
.btn .i { width: 18px; height: 18px }
.btn--lime { background: var(--lime); color: var(--black) }
.btn--black { background: var(--black); color: var(--lime) }
.btn--line { border-color: #3A3A3A; color: #fff; background: transparent }
.btn--line:hover { border-color: var(--lime); color: var(--lime) }
.btn--line-dark { border-color: var(--black); color: var(--black); background: transparent }
.btn--line-dark:hover { background: var(--black); color: var(--lime) }
.btn[disabled] { opacity: .6; pointer-events: none }
.btns { display: flex; flex-wrap: wrap; gap: 12px }
.pill { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--lime); color: var(--black); font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap }
.pill--ink { background: var(--black); color: var(--lime) }
.chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--lime); color: var(--black); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap }
.chip--ink { background: var(--black); color: var(--lime) }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.chip-link { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--black); color: var(--black); font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; transition: background .2s, color .2s }
.chip-link:hover { background: var(--black); color: var(--lime) }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: inherit; border-bottom: 2px solid var(--lime); padding-bottom: 4px }
.link-arrow .i { width: 16px; height: 16px; transition: transform .25s }
.link-arrow:hover .i { transform: translateX(4px) }
.link-arrow--dark { border-color: var(--black) }

/* ── Header ── */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(13, 13, 13, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; border-bottom: 1px solid #1f1f1f; transition: box-shadow .3s }
.hdr.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .35) }
.hdr-in { display: flex; align-items: center; gap: 20px; height: var(--hdr) }
.hdr-logo { display: block; flex: none }
.hdr-logo img { height: 44px; width: auto; display: block }
.hdr-nav { display: flex; gap: 2px; margin-left: auto }
.hdr-link { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; transition: color .2s }
.hdr-link:hover, .hdr-link[aria-current="page"] { color: var(--lime) }
.hdr-dd { position: relative }
.hdr-dd-panel { position: absolute; left: -16px; top: 100%; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s }
.hdr-dd:hover .hdr-dd-panel, .hdr-dd:focus-within .hdr-dd-panel { opacity: 1; visibility: visible; transform: none }
.hdr-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 540px; background: #141414; border: 1px solid #262626; border-radius: 20px; padding: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5) }
.hdr-dd-grid a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1.25 }
.hdr-dd-grid em { font-style: normal; color: var(--lime); font-size: 12px; font-weight: 800; width: 20px; flex: none }
.hdr-dd-grid a:hover { background: var(--lime); color: var(--black) }
.hdr-dd-grid a:hover em { color: var(--black) }
.hdr-r { display: flex; align-items: center; gap: 10px; margin-left: 8px }
.lang { position: relative }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid #333; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; font-weight: 800; font-size: 13px; letter-spacing: .08em }
.lang-btn .i { width: 14px; height: 14px; transition: transform .2s }
.lang.open .lang-btn .i { transform: rotate(180deg) }
.lang-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 2; list-style: none; margin: 0; padding: 8px; min-width: 200px; background: #141414; border: 1px solid #262626; border-radius: 16px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); display: none }
.lang.open .lang-list { display: block }
.lang-list a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600 }
.lang-list a b { width: 26px; font-weight: 800; color: var(--lime) }
.lang-list a:hover { background: #222 }
.lang-list a[aria-current] { background: var(--lime); color: var(--black) }
.lang-list a[aria-current] b { color: var(--black) }
.hdr-cta { min-height: 46px; padding: 0 22px; font-size: 13px }
.burger { display: none; width: 48px; height: 46px; border-radius: 999px; border: 1px solid #333; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px }
.burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg) }
.mnav { position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; z-index: 49; background: var(--black); overflow-y: auto; overscroll-behavior: contain; padding: 18px 0 48px }
.mnav-in { display: grid; gap: 28px }
.mnav-links a { display: block; padding: 6px 0; color: #fff; text-decoration: none; font: 800 clamp(28px, 8vw, 44px)/1.15 var(--font-d); text-transform: uppercase }
.mnav-links a:hover { color: var(--lime) }
.mnav-svc { display: flex; flex-wrap: wrap; gap: 8px }
.mnav-svc a { padding: 10px 14px; border: 1px solid #333; border-radius: 999px; color: #E6E6E6; text-decoration: none; font-weight: 700; font-size: 14px }
.mnav-langs { display: flex; flex-wrap: wrap; gap: 8px }
.mnav-lang { display: inline-flex; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #1C1C1C; color: #fff; text-decoration: none; font-size: 14px }
.mnav-lang b { color: var(--lime) }
.mnav-lang[aria-current] { background: var(--lime); color: var(--black) }
.mnav-lang[aria-current] b { color: var(--black) }
html.menu-open { overflow: hidden }

/* ── Sections ── */
.sec { padding: clamp(64px, 9vw, 112px) 0 }
.sec--top0 { padding-top: 0 }
.sec--black { background: var(--black); color: #fff }
.sec--lime { background: var(--lime); color: var(--black) }
.sec--gray { background: var(--gray) }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 46px) }
.h2 { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.02; margin: 0; text-wrap: balance }
.h3 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; margin: 0 }
.h4 { font-size: 15px; font-weight: 800; text-transform: uppercase; margin: 0 0 16px }
.sub { margin: 14px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; opacity: .85 }
.spaced { margin: 14px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .26em; line-height: 1.7; text-transform: uppercase; color: var(--lime) }
.spaced--ink { color: var(--black) }
.label { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--lime) }
.label--ink { color: var(--black) }
.band { background: var(--black-2); padding: 22px 0 }
.band p { margin: 0; color: var(--lime); font-weight: 800; font-size: 13px; letter-spacing: .24em; line-height: 1.7; text-transform: uppercase }
.band--bleed { margin: 24px calc(50% - 50vw); padding-inline: max(var(--pad), calc(50vw - var(--wrap) / 2 + var(--pad))) }
.lead-box { margin: 0 0 16px; padding: clamp(22px, 3vw, 34px); background: var(--gray); border-radius: var(--r); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45; text-transform: uppercase }
.lead-box--white { background: #fff }
.sec--gray .lead-box { background: #fff }
.sec + .band, .band + .wrap { margin-top: 0 }
#global .band, #events .band { margin-bottom: clamp(28px, 4vw, 44px) }

/* ── Reveal ── */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.js .rv.in { opacity: 1; transform: none }

/* ── Home hero ── */
.hero { display: grid; grid-template-columns: 62fr 38fr; min-height: 640px }
.hero-l { background: var(--black); color: #fff; padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 64px); padding-right: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px }
.hero-mark { animation: up 1s var(--ease) both }
.hero-logo { display: block; width: min(620px, 94%); height: auto }
.hero-tag { margin: 30px 0 0; font-weight: 800; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.4; text-transform: uppercase }
.hero-stats { display: flex; flex-wrap: wrap; gap: 26px 56px; animation: up 1s .2s var(--ease) both }
.hero-stats b { display: block; font: 800 clamp(36px, 4vw, 60px)/1 var(--font-d); color: var(--lime) }
.hero-stats span { display: block; margin-top: 10px; color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.hero-r { background: var(--lime); position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 64px); padding-left: 44px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 26px }
.hero-r > :not(.ast) { position: relative; z-index: 1; animation: up 1s .1s var(--ease) both }
.hero-word { margin: 0; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; letter-spacing: -.02em }
.hero-word i { font-style: normal; font-weight: 300 }
.hero-word b { font-weight: 800 }
.hero-h1 { margin: 0; max-width: 380px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.5 }
.hero-years b { display: block; font: 800 clamp(48px, 5.4vw, 82px)/1 var(--font-d) }
.hero-years span { display: block; margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.ast { display: block; pointer-events: none }
.hero-ast { position: absolute; right: -64px; bottom: -74px; width: 340px; height: 340px; color: var(--lime-2); animation: spin 50s linear infinite }

/* ── Ticker ── */
.ticker { background: var(--black); overflow: hidden; padding: 22px 0; border-top: 1px solid #222 }
.ticker-track { display: flex; width: max-content; animation: mq 36s linear infinite; font: 700 clamp(20px, 2.4vw, 30px)/1.1 var(--font-d); color: var(--lime); text-transform: uppercase; white-space: nowrap }
.ticker-track span { display: inline-flex; align-items: center }
.ticker-track span::after { content: "✱"; color: #fff; margin: 0 34px }

/* ── Rows (services list) ── */
.rows { border-top: 2px solid currentColor }
.row { display: grid; grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1fr) 60px; grid-template-areas: "n t d g"; gap: 20px; align-items: center; padding: 24px 16px; border-bottom: 2px solid currentColor; position: relative; color: inherit; text-decoration: none; transition: background .3s }
.row em { grid-area: n; font-style: normal; font-weight: 800; font-size: 15px }
.row h3 { grid-area: t; margin: 0; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.05; overflow-wrap: anywhere }
.row p { grid-area: d; margin: 0; font-size: 15.5px; line-height: 1.5; opacity: .85 }
.go { grid-area: g; width: 56px; height: 56px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; transition: transform .3s, background .3s, color .3s }
.go .i { width: 22px; height: 22px }
a.row:hover { background: var(--lime); color: var(--black) }
a.row:hover .go { background: var(--black); color: var(--lime); border-color: var(--black); transform: rotate(-45deg) }
.row-thumb { position: absolute; right: 96px; top: 50%; width: 160px; height: 116px; object-fit: cover; border-radius: 16px; translate: 0 -50%; rotate: -5deg; scale: .6; opacity: 0; transition: opacity .3s, scale .35s var(--ease); pointer-events: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); z-index: 2 }
a.row:hover .row-thumb { opacity: 1; scale: 1 }
.rows--static .row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "n t" ". d"; gap: 6px 16px; padding: 22px 8px }
.rows--static .row h3 { font-size: clamp(18px, 1.8vw, 24px) }

/* ── Story phones ── */
.stories { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px) }
.story { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: center }
.phone { width: 240px; height: 444px; background: #fff; border-radius: 40px; padding: 9px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); flex: none }
.phone-in { height: 100%; background: #1C1C1C; border-radius: 32px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: #fff }
.phone-bars { display: flex; gap: 5px; width: 100% }
.phone-bars i { flex: 1; height: 3px; border-radius: 2px; background: #4A4A4A }
.phone-bars i.on { background: var(--lime) }
.phone-acc { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 8px; font-size: 12px; font-weight: 800 }
.phone-acc img, .phone-acc em { width: 26px; height: 26px; border-radius: 50%; object-fit: cover }
.phone-acc em { display: grid; place-items: center; background: var(--lime); color: var(--black); font-style: normal; font-size: 7.5px; font-weight: 900 }
.phone-logo { width: 112px; height: 112px; border-radius: 50%; margin-top: 26px }
.phone strong { margin-top: 16px; font: 800 30px/1 var(--font-d); color: var(--lime); letter-spacing: -.02em }
.phone strong.m2 { margin-top: 12px; font-size: 26px }
.phone small { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase }
.story-info h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05 }
.story-meta { margin: 10px 0 22px; color: #9A9A9A; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.story-cycle { margin: 0 0 22px; font-size: 16px; line-height: 1.6 }
.ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px }
.ticks li { position: relative; padding-left: 26px; line-height: 1.5 }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--lime) }
.ticks--ink li::before { background: var(--black) }

/* ── Global cards & case slides ── */
.gcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.gcard { background: var(--black); color: #fff; border-radius: var(--r); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s }
.gcard:hover { transform: translateY(-4px) }
.gcard b { font: 800 36px/1 var(--font-d); color: var(--lime) }
.gcard h3 { margin: 6px 0 0; color: var(--lime); font-size: 16px; font-weight: 800; line-height: 1.25; text-transform: uppercase }
.gcard p { margin: 0; color: #E6E6E6; font-size: 15px; line-height: 1.55 }
.ctabs { margin-top: clamp(48px, 6vw, 76px) }
.ctabs-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px }
.ctab { padding: 14px 22px; border-radius: 999px; border: 2px solid var(--black); background: transparent; color: var(--black); cursor: pointer; font-weight: 800; font-size: 13.5px; letter-spacing: .03em; text-transform: uppercase; transition: background .2s, color .2s }
.ctab:hover { background: var(--gray) }
.ctab[aria-selected="true"] { background: var(--black); color: var(--lime) }
.cslide-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap }
.cslide-top h3 { margin: 0; font-size: clamp(26px, 3.4vw, 48px); line-height: 1 }
.cslide-more { margin: 24px 0 0 }
.cgrid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start }
.sphere small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .3em }
.sphere b { display: block; margin: 8px 0 22px; font-size: 16px; line-height: 1.4; text-transform: uppercase }
.ask { background: var(--gray); border-radius: var(--r); padding: 30px }
.ask h4, .ask .h4 { margin: 0 0 16px; font-size: 15px; font-weight: 800; text-transform: uppercase }
.ask p { margin: 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45 }
.impl { display: grid; gap: 12px; align-content: start }
.impl-h { background: var(--lime); border-radius: 20px; padding: 20px 28px; font-size: 22px }
.istep { background: var(--black); color: #fff; border-radius: 20px; padding: 22px 26px; display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center }
.istep b { font: 800 32px/1 var(--font-d); color: var(--lime) }
.istep h5 { margin: 0 0 4px; color: var(--lime); font-size: 15px; font-weight: 800; text-transform: uppercase }
.istep p { margin: 0; color: #E8E8E8; font-size: 14.5px; line-height: 1.5 }

/* ── Events ── */
.ev { display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; align-items: center }
.note { margin: 0 0 14px; padding: 28px 30px; background: var(--gray); border-radius: var(--r); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; text-transform: uppercase }
.note mark { background: var(--lime); color: inherit; padding: 0 .15em }
.note--lime { background: var(--lime); font-weight: 800 }
.collage { position: relative; height: 560px }
.collage img { position: absolute; object-fit: cover; border: 5px solid #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); rotate: var(--r, 0deg); transition: scale .35s var(--ease), rotate .35s var(--ease) }
.collage img:hover { scale: 1.08; rotate: 0deg; z-index: 9 !important }
.film { background: #0A0A0A; padding: 30px 0; overflow: hidden; position: relative }
.film::before, .film::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, .85) 9px 21px, transparent 21px 30px) }
.film::before { top: 9px }
.film::after { bottom: 9px }
.film-track { display: flex; gap: 12px; width: max-content; animation: mq 70s linear infinite }
.film:hover .film-track { animation-play-state: paused }
.film-track img { height: 230px; width: 340px; object-fit: cover; object-position: 50% 30%; border-radius: 4px; display: block; flex: none }
.formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px }
.formats span { padding: 10px 16px; border-radius: 999px; background: var(--lime); font-weight: 800; font-size: 13px; text-transform: uppercase }

/* ── AI block ── */
.ai { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start }
.ai-lead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 30px; padding: 22px 22px 22px 28px; border: 1.5px solid #3A3A3A; border-radius: 28px; background: var(--black-3); color: #fff; text-decoration: none; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; text-transform: uppercase; transition: border-color .3s }
a.ai-lead:hover { border-color: var(--lime) }
.round-arrow { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: var(--black); display: grid; place-items: center }
.round-arrow .i { width: 26px; height: 26px }
.ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px }
.ai-list li { display: grid; grid-template-columns: 64px 1fr; gap: 12px }
.ai-list b { font: 800 28px/1 var(--font-d); color: var(--lime) }
.ai-list h3 { margin: 0 0 6px; color: var(--lime); font-size: 17px; font-weight: 800; text-transform: uppercase }
.ai-list p { margin: 0; color: #E6E6E6; line-height: 1.55 }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.ai-grid figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1.4 }
.ai-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.ai-grid figure:hover img { transform: scale(1.05) }
.ai-grid figcaption { position: absolute; left: 12px; bottom: 12px; padding: 9px 14px; border-radius: 999px; background: rgba(13, 13, 13, .86); color: var(--lime); font-size: 12px; font-weight: 800; text-transform: uppercase }

/* ── Process ── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px }
.step { background: var(--black); color: #fff; border-radius: var(--r); padding: 26px 22px; display: flex; flex-direction: column; gap: 10px }
.step b { font: 800 34px/1 var(--font-d); color: var(--lime) }
.step h3 { margin: 8px 0 0; color: var(--lime); font-size: 15px; font-weight: 800; line-height: 1.3; text-transform: uppercase }
.step p { margin: 0; color: #DADADA; font-size: 14.5px; line-height: 1.55 }
.step:last-child { background: var(--lime); color: var(--black) }
.step:last-child b, .step:last-child h3, .step:last-child p { color: var(--black) }

/* ── Team ── */
.team-logo { height: 56px; width: auto }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.tcard { background: #fff; border-radius: 28px; padding: 16px; transition: transform .35s var(--ease) }
.tcard:hover { transform: translateY(-6px) rotate(-.6deg) }
.tcard-in { height: 100%; background: var(--black); border-radius: 20px; padding: 28px 20px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px }
.tcard h3 { margin: 0; color: var(--lime); font: 700 clamp(16px, 1.5vw, 19px)/1.2 var(--font-d); text-transform: uppercase }
.tcard p { margin: 0; min-height: 2.9em; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.45; text-transform: uppercase }
.tcard img { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; border-radius: 12px; margin-top: auto }

/* ── Testimonials ── */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 420px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px }
.quote { margin: 0; scroll-snap-align: start; background: var(--black); color: #fff; border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px }
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.55 }
.quote figcaption b { display: block; color: var(--lime) }
.quote figcaption span, .quote figcaption em { display: block; font-size: 13px; color: #BDBDBD; font-style: normal }

/* ── Clients marquee ── */
.marquee { display: grid; gap: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.mq-row { display: flex; gap: 18px; width: max-content; animation: mq 80s linear infinite }
.mq-row--rev { animation-direction: reverse; animation-duration: 90s }
.marquee:hover .mq-row { animation-play-state: paused }
.mq-row img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex: none; display: block; transition: transform .3s }
.mq-row img:hover { transform: scale(1.1) }
.lg-more { flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--lime); color: var(--black); font-weight: 800; font-size: 12.5px; line-height: 1.15; text-transform: uppercase }

/* ── Blog cards ── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.posts--two { grid-template-columns: repeat(2, 1fr) }
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0, 0, 0, .1) }
.pcard-cover { position: relative; aspect-ratio: 16 / 10; background: var(--black); overflow: hidden }
.pcard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.pcard:hover .pcard-cover img { transform: scale(1.04) }
.pcard-cover .chip { position: absolute; left: 14px; top: 14px }
.tcover { display: grid; place-items: center; height: 100%; padding: 20px; background: var(--lime); color: var(--black); font: 800 clamp(22px, 2.6vw, 36px)/1.05 var(--font-d); text-transform: uppercase; text-align: center }
.tcover--big { aspect-ratio: 16 / 7; font-size: clamp(32px, 6vw, 84px); border-radius: 28px }
.pcard-bd { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.pcard-meta { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.pcard h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3 }
.pcard h3 a { color: inherit; text-decoration: none }
.pcard h3 a::after { content: ""; position: absolute; inset: 0 }
.pcard p { margin: 0; color: #4A4A4A; font-size: 15px; line-height: 1.55 }
.pcard .pcard-author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; color: var(--black); font-weight: 700; font-size: 14px }
.pcard-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover }
.av-team { background: var(--lime); object-fit: contain !important; padding: 18% 12% }
.posts--all .pcard--feat { grid-column: span 2; flex-direction: row }
.posts--all .pcard--feat .pcard-cover { flex: 1.2; aspect-ratio: auto; min-height: 340px }
.posts--all .pcard--feat .pcard-bd { flex: 1; padding: 30px }
.posts--all .pcard--feat h3 { font-size: clamp(22px, 2.2vw, 30px) }

/* ── FAQ ── */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start }
.faq details { border-bottom: 2px solid var(--black); padding: 22px 0 }
.faq details:first-child { border-top: 2px solid var(--black) }
.faq summary { display: flex; align-items: center; gap: 18px; cursor: pointer; list-style: none; font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; line-height: 1.3 }
.faq summary::-webkit-details-marker { display: none }
.faq summary em { flex: none; width: 30px; font: 800 14px var(--font-d); font-style: normal }
.faq summary::after { content: "+"; flex: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--black); display: grid; place-items: center; font-size: 22px; font-weight: 600; transition: background .25s, border-color .25s }
.faq details[open] summary::after { content: "−"; background: var(--lime); border-color: var(--lime) }
.faq-a p { margin: 14px 0 0 48px; max-width: 680px; color: #333; line-height: 1.65 }

/* ── Inner page hero ── */
.phero { position: relative; overflow: hidden; background: var(--black); color: #fff; padding: clamp(40px, 6vw, 72px) 0 clamp(44px, 6vw, 80px) }
.phero > .wrap { position: relative; z-index: 1 }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; color: #9A9A9A; font-size: 13px; font-weight: 700 }
.crumbs a { color: #9A9A9A; text-decoration: none }
.crumbs a:hover { color: var(--lime) }
.crumbs [aria-current] { color: #E6E6E6 }
.phero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap }
.phero-h1 { margin: 0; font-size: clamp(36px, 7vw, 100px); line-height: .96; letter-spacing: -.02em; overflow-wrap: anywhere; hyphens: auto }
.phero-lead { margin: 26px 0 0; max-width: 760px; color: #CFCFCF; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6 }
.phero-ast { position: absolute; right: -70px; top: -60px; width: 320px; height: 320px; color: #1C1C1C; animation: spin 60s linear infinite }
.phero--404 .e404 { margin: 0 0 10px; font-size: clamp(90px, 18vw, 220px); line-height: .9; color: var(--lime) }
.phero--404 .btns { margin-top: 34px }

/* ── Service hero ── */
.shero { display: grid; grid-template-columns: 62fr 38fr }
.shero-l { background: var(--black); color: #fff; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); padding-right: 48px; min-width: 0 }
.eyebrow { margin: 0 0 14px; color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase }
.shero-h1 { margin: 0; font-size: clamp(30px, 4.6vw, 68px); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance }
.shero-lead { margin: 24px 0 32px; max-width: 640px; color: #CFCFCF; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65 }
.shero-r { position: relative; overflow: hidden; background: var(--lime); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); padding-left: 44px }
.shero-r > :not(.ast) { position: relative; z-index: 1 }
.shero-label { margin: 0; font-size: 20px }
.benefits { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px }
.benefits li { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: start; padding-bottom: 14px; border-bottom: 2px solid rgba(13, 13, 13, .15) }
.benefits b { font: 800 22px/1.1 var(--font-d) }
.benefits span { font-size: 16.5px; font-weight: 700; line-height: 1.45 }
.shero-ast { position: absolute; right: -70px; bottom: -80px; width: 300px; height: 300px; color: var(--lime-2); animation: spin 50s linear infinite }

/* ── Included ── */
.inc { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: start }
.inc-img { position: sticky; top: calc(var(--hdr) + 24px); margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--gray) }
.inc-img img { width: 100%; height: 100%; object-fit: cover }
.inc .h2 { margin-bottom: 28px }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.stage { background: #fff; border-radius: 34px; padding: 9px }
.stage-in { min-height: 400px; background: #1C1C1C; color: #fff; border-radius: 27px; padding: 20px 18px 26px; display: flex; flex-direction: column; gap: 10px }
.stage-in .phone-acc { margin: 8px 0 26px }
.stage b { font: 800 46px/1 var(--font-d); color: var(--lime) }
.stage h3 { margin: 10px 0 0; color: var(--lime); font-size: 17px; font-weight: 800; line-height: 1.25; text-transform: uppercase }
.stage p { margin: 0; color: #E6E6E6; font-size: 15px; line-height: 1.55 }
.stage:last-child .stage-in { background: var(--lime); color: var(--black) }
.stage:last-child b, .stage:last-child h3, .stage:last-child p { color: var(--black) }
.stage:last-child .phone-bars i { background: var(--black) }
.stage:last-child .phone-acc em { background: var(--black); color: var(--lime) }
.recs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.rec { background: #fff; border-radius: 28px; padding: 9px }
.rec-in { position: relative; min-height: 320px; padding: 30px 30px 34px; border-radius: 21px; color: #fff; display: flex; flex-direction: column; gap: 10px; background:
  linear-gradient(var(--lime), var(--lime)) left 16px top 16px / 28px 3px no-repeat,
  linear-gradient(var(--lime), var(--lime)) left 16px top 16px / 3px 28px no-repeat,
  linear-gradient(var(--lime), var(--lime)) right 16px top 16px / 28px 3px no-repeat,
  linear-gradient(var(--lime), var(--lime)) right 16px top 16px / 3px 28px no-repeat,
  linear-gradient(var(--lime), var(--lime)) left 16px bottom 16px / 28px 3px no-repeat,
  linear-gradient(var(--lime), var(--lime)) left 16px bottom 16px / 3px 28px no-repeat,
  linear-gradient(var(--lime), var(--lime)) right 16px bottom 16px / 28px 3px no-repeat,
  linear-gradient(var(--lime), var(--lime)) right 16px bottom 16px / 3px 28px no-repeat,
  var(--black) }
.rec-top { display: flex; justify-content: space-between; color: #BDBDBD; font-size: 12px; font-weight: 800; letter-spacing: .12em }
.rec-dot { color: #fff }
.rec-dot::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--lime); animation: blink 1.4s infinite }
.rec b { margin-top: 12px; font: 800 38px/1 var(--font-d); color: var(--lime) }
.rec h3 { margin: 4px 0 0; color: var(--lime); font-size: 17px; font-weight: 800; text-transform: uppercase }
.rec p { margin: 0; color: #E6E6E6; font-size: 15px; line-height: 1.55 }

/* ── Case cards ── */
.ccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.ccard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: #fff; color: var(--black); text-decoration: none; border: 1px solid var(--gray-2); transition: transform .3s var(--ease), box-shadow .3s }
.ccard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0, 0, 0, .1) }
.ccard-cover { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: var(--c, var(--black)) }
.ccard-cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.ccard:hover .ccard-cover .bg { transform: scale(1.04) }
.ccard-cover .logo { width: 42%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 18px 40px rgba(0, 0, 0, .25) }
.ccard-cover.lime { background: var(--lime); color: var(--black) }
.ccard-cover.ink { background: var(--black); color: var(--lime) }
.ccard-cover strong { font: 800 clamp(34px, 4vw, 56px)/1 var(--font-d); letter-spacing: -.02em }
.ccard-cover .chip { position: absolute; left: 14px; top: 14px }
.ccard-bd { flex: 1; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px }
.ccard-bd h3 { margin: 0; font-size: 21px; line-height: 1.1 }
.ccard-geo { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase }
.ccard-bd p { margin: 0; color: #444; font-size: 15px; line-height: 1.55 }
.metric { align-self: flex-start; padding: 9px 14px; border-radius: 999px; background: var(--black); color: var(--lime); font-size: 13.5px; font-weight: 800 }
.ccard .link-arrow { margin-top: auto; align-self: flex-start }

/* ── Case page ── */
.cmeta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 40px }
.cmeta div { padding: 20px 22px; border-radius: 20px; background: var(--gray) }
.cmeta small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase }
.cmeta b { display: block; margin-top: 8px; font-size: 17px; line-height: 1.35 }
.cstory { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start }
.cycle { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px }
.cycle span { padding: 10px 16px; border-radius: 999px; border: 2px solid var(--black); font-size: 13px; font-weight: 800; text-transform: uppercase }
.metrics { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0 }
.metrics div { min-width: 180px; padding: 22px 26px; border-radius: 22px; background: var(--black); color: #fff }
.metrics b { display: block; font: 800 clamp(30px, 3.4vw, 48px)/1 var(--font-d); color: var(--lime) }
.metrics span { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase }
.case-site { margin: 28px 0 0 }
.case-fig { margin: 36px 0 0; border-radius: 28px; overflow: hidden }
.case-fig img { display: block; width: 100% }
.case-svc { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--black) }
.case-svc .chips { margin-top: 12px }
.next-case a { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: clamp(40px, 6vw, 72px); background: var(--lime); color: var(--black); text-decoration: none }
.next-case span { width: 100%; font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase }
.next-case b { font-size: clamp(28px, 5vw, 72px); line-height: 1 }
.next-case .go { width: 72px; height: 72px; flex: none }
.next-case a:hover .go { background: var(--black); color: var(--lime); transform: rotate(-45deg) }

/* ── Blog post ── */
.post-hero { background: var(--black); color: #fff; padding: clamp(40px, 6vw, 72px) 0 clamp(120px, 14vw, 190px) }
.post-h1 { margin: 20px 0 18px; font-size: clamp(28px, 4.2vw, 54px); line-height: 1.08; text-transform: none; text-wrap: balance }
.post-lead { margin: 0 0 28px; color: #CFCFCF; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6 }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; color: #BDBDBD; font-size: 14px; font-weight: 700 }
.post-meta .who { display: flex; align-items: center; gap: 12px }
.post-meta .who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover }
.post-meta .who b { display: block; color: #fff; font-size: 15px }
.post-meta .who small { display: block; color: #9A9A9A; font-size: 12.5px }
.post-cover { max-width: 1060px; margin: calc(-1 * clamp(90px, 11vw, 150px)) auto 0; padding-inline: var(--pad) }
.post-cover img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 0, 0, .18) }
.prose { padding-block: clamp(36px, 5vw, 60px); color: #1D1D1D; font-size: 18px; line-height: 1.75 }
.prose h2 { margin: 1.8em 0 .6em; font: 800 clamp(21px, 2.3vw, 28px)/1.25 var(--font-d); color: var(--black) }
.prose h2:first-child { margin-top: 0 }
.prose p { margin: 0 0 1.1em }
.prose ul { list-style: none; margin: 0 0 1.3em; padding: 0 }
.prose li { position: relative; margin: .55em 0; padding-left: 28px }
.prose li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--black) }
.prose a { color: var(--black); font-weight: 700; text-decoration: none; background: linear-gradient(transparent 58%, var(--lime) 58%) }
.prose a:hover { background: var(--lime) }
.prose blockquote { margin: 1.6em 0; padding: 26px 30px; border-radius: 24px; background: var(--lime); font-size: 20px; font-weight: 800; line-height: 1.45 }
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 36px }
.author-box { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(56px, 7vw, 88px); padding: 22px; border-radius: 24px; background: var(--gray) }
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none }
.author-box small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase }
.author-box b { display: block; margin-top: 4px; font-size: 18px }
.author-box span { display: block; color: #555; font-size: 14px }

/* ── Contact ── */
.cta-split { display: grid; grid-template-columns: 58fr 42fr; scroll-margin-top: var(--hdr) }
.cta-l { background: var(--black); color: #fff; padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 7vw, 88px); padding-right: 48px; min-width: 0 }
.cta-title { margin: 0; font-size: clamp(32px, 4.2vw, 62px); line-height: 1.02 }
.cta-sub { margin: 18px 0 0; color: var(--lime); font-size: clamp(13px, 1.2vw, 16px); font-weight: 800; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase }
.cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; max-width: 760px; margin-top: 34px; padding: 22px 26px; border: 2px dashed #3A3A3A; border-radius: 26px; background: var(--black-3) }
.cta-links a, .ftr-contacts a { display: flex; align-items: center; gap: 14px; padding: 9px 0; color: var(--lime); font-weight: 800; font-size: clamp(15px, 1.35vw, 18px); text-decoration: none; overflow-wrap: anywhere }
.cta-links a:hover span { text-decoration: underline }
.cta-links .i { width: 26px; height: 26px }
.cta-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9A9A9A; text-decoration: none; text-align: center }
.cta-qr > span { display: block; padding: 10px; background: var(--lime) }
.cta-qr img { display: block; width: 112px; height: auto }
.cta-qr small { max-width: 140px; font-size: 11.5px; line-height: 1.4 }
.cta-off { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; color: #9A9A9A; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.cta-off .i { width: 20px; height: 20px; color: var(--lime) }
.cta-r { position: relative; overflow: hidden; background: var(--lime); padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 7vw, 88px); padding-left: 44px }
.cta-ast { position: absolute; right: -80px; bottom: -90px; width: 320px; height: 320px; color: var(--lime-2); animation: spin 50s linear infinite }
.lead-form { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; max-width: 540px }
.lead-form h3 { grid-column: 1 / -1; margin: 0 0 6px; font-size: 24px }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.fld--full { grid-column: 1 / -1 }
.fld input, .fld select, .fld textarea { width: 100%; padding: 14px 18px; border: 2px solid var(--black); border-radius: 999px; background: rgba(255, 255, 255, .4); color: var(--black); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; outline: none; -webkit-appearance: none; appearance: none; transition: background .2s, box-shadow .2s }
.fld select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230D0D0D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px }
.fld textarea { min-height: 100px; border-radius: 22px; resize: vertical }
.fld input:focus, .fld select:focus, .fld textarea:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(13, 13, 13, .12) }
.fld.err input { border-color: #B00020; background-color: #fff }
.lead-form .btn { grid-column: 1 / -1; margin-top: 6px }
.form-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.5 }
.form-note a { font-weight: 800 }
.form-status { grid-column: 1 / -1; min-height: 1.4em; margin: 0; font-weight: 800; line-height: 1.45 }
.form-status.ok { padding: 14px 18px; border-radius: 16px; background: var(--black); color: var(--lime) }
.form-status.err { color: #8B0015 }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0 }

/* ── Footer ── */
.ftr { overflow: hidden; background: var(--black); color: #fff; padding-top: clamp(56px, 7vw, 88px) }
.ftr-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px }
.ftr-brand img { display: block; height: 58px; width: auto }
.ftr-brand p { max-width: 340px; margin: 18px 0 0; color: #A8A8A8; font-size: 15px; line-height: 1.6 }
.ftr-brand .ftr-off { color: var(--lime); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase }
.ftr-col h3 { margin: 0 0 16px; color: var(--lime); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.ftr-col ul a { color: #E6E6E6; font-size: 15px; font-weight: 600; text-decoration: none }
.ftr-col ul a:hover { color: var(--lime) }
.ftr-contacts a { padding: 6px 0; font-size: 15px }
.ftr-contacts .i { width: 20px; height: 20px }
.ftr-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px }
.ftr-langs a { padding: 8px 12px; border: 1px solid #333; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none }
.ftr-langs a[aria-current] { background: var(--lime); border-color: var(--lime); color: var(--black) }
.ftr-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 48px; padding: 22px 0; border-top: 1px solid #222; color: #8A8A8A; font-size: 13px; font-weight: 700 }
.ftr-giant { padding: 6px var(--pad) 0; line-height: 0 }
.ftr-giant img { display: block; width: 100%; height: auto; opacity: .07 }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .gcards, .stages, .recs { grid-template-columns: repeat(2, 1fr) }
  .steps { grid-template-columns: repeat(2, 1fr) }
  .step:last-child { grid-column: 1 / -1 }
  .stories { grid-template-columns: 1fr }
  .story { max-width: 760px }
}
@media (max-width: 1080px) {
  .hdr-nav { display: none }
  .burger { display: inline-flex }
  .hdr-r { margin-left: auto }
  .ccards, .posts { grid-template-columns: repeat(2, 1fr) }
  .ftr-top { grid-template-columns: 1fr 1fr }
}
@media (max-width: 960px) {
  .hero, .shero, .cta-split { grid-template-columns: 1fr }
  .hero-l, .shero-l, .cta-l { padding-right: var(--pad) }
  .hero-r, .shero-r, .cta-r { padding-left: var(--pad) }
  .hero { min-height: 0 }
  .hero-r { padding-top: 44px; padding-bottom: 48px }
  .cgrid, .ev, .ai, .inc, .faq-wrap, .cstory { grid-template-columns: 1fr }
  .inc-img { position: relative; top: 0; aspect-ratio: 16 / 10 }
  .cstory { justify-items: start }
  .collage { height: 460px }
  .posts--all .pcard--feat { grid-column: auto; flex-direction: column }
  .posts--all .pcard--feat .pcard-cover { min-height: 0; aspect-ratio: 16 / 10; flex: none }
  .row { grid-template-columns: 44px minmax(0, 1fr) 50px; grid-template-areas: "n t g" ". d g"; gap: 8px 14px; padding: 20px 6px }
  .go { width: 48px; height: 48px }
  .row-thumb { display: none }
  .cmeta { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  :root { --pad: 16px; --hdr: 68px }
  .hdr-logo img { height: 38px }
  .hdr-cta { display: none }
  .ccards, .posts, .posts--two, .gcards, .stages, .recs, .steps { grid-template-columns: 1fr }
  .team { grid-template-columns: 1fr 1fr; gap: 12px }
  .tcard { padding: 8px; border-radius: 20px }
  .tcard-in { padding: 18px 10px 10px; border-radius: 14px; gap: 8px }
  .tcard p { font-size: 10.5px }
  .story { grid-template-columns: 1fr; justify-items: center; text-align: left }
  .story-info { width: 100% }
  .phone { width: 220px; height: 410px }
  .lead-form { grid-template-columns: 1fr }
  .cta-card { grid-template-columns: 1fr }
  .cta-qr { flex-direction: row; justify-content: flex-start; text-align: left }
  .faq-a p { margin-left: 0 }
  .collage { height: 380px }
  .ftr-top { grid-template-columns: 1fr }
  .mq-row img, .lg-more { width: 84px; height: 84px }
  .film-track img { height: 170px; width: 250px }
  .pill { min-height: 48px; padding: 0 20px; font-size: 13px }
  .hero-ast, .shero-ast, .cta-ast { width: 220px; height: 220px; right: -60px; bottom: -60px }
  .shero-h1 { font-size: clamp(26px, 8vw, 40px) }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
  .js .rv { opacity: 1; transform: none }
}