/* ==========================================================
   Home variation (v2): your hero + motion-blur portraits,
   big numbers, bold colour blocks.
   ========================================================== */
:root { --red: #e5322d; --red-d: #c4221e; }
.btn--maroon { background: var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px -12px rgba(229,50,45,.9); }
.btn--maroon:hover { background: var(--red-d); }
.nav__cta:hover, .topbar__cta:hover { background: var(--red); }
.faq details[open] summary i { background: #ffe4e2; }

.kick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: inherit; margin-bottom: 20px; }
.kick::before { content: ""; width: 9px; height: 9px; background: var(--red); border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }

/* capabilities strip under the hero */
.caps { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 30px; padding: 6px var(--gutter); border-bottom: 1px solid var(--hair); }
.caps__lead { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.35; max-width: 210px; }

/* who we are */
.who { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(40px, 5vw, 64px); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.who h2 { font-weight: 500; font-size: clamp(32px, 4.5vw, 66px); line-height: 1.1; letter-spacing: -0.035em; max-width: 19em; }
.who h2 .w { color: #c7c7cc; transition: color .35s linear; }
.who h2 .w.on { color: var(--ink); }
.dash-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--red); font-size: 15px; font-weight: 500; white-space: nowrap; }
.dash-link i { font-style: normal; transition: transform .4s var(--ease); }
.dash-link:hover i { transform: translateX(6px); }

/* motion-blur portrait strip */
.strip { overflow: hidden; padding: 10px 0 clamp(50px, 6vw, 80px); }
.strip__track { display: flex; gap: 10px; width: max-content; padding: 0 var(--gutter); will-change: transform; }
.mcard { position: relative; display: block; flex: 0 0 clamp(250px, 27vw, 420px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #111; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: transform .35s var(--ease); }
.mcard:active { transform: scale(.985); transition-duration: 90ms; }
.mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard__smear { filter: url(#mblur); transform: scale(1.12); -webkit-mask-image: var(--mask); mask-image: var(--mask); opacity: .9; transition: opacity .5s var(--ease); }
.mcard:hover .mcard__smear, .mcard:focus-visible .mcard__smear { opacity: 0; }
.mcard--tint .mcard__sharp { filter: grayscale(1) contrast(1.15); }
.mcard--tint .mcard__smear { filter: url(#mblur) grayscale(1) contrast(1.15); }
.mcard--tint::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--t); mix-blend-mode: multiply; transition: opacity .5s var(--ease); pointer-events: none; }
.mcard--tint:hover::after { opacity: .35; }
.mcard__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 11px 15px; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; background: rgba(20,20,22,.34); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.mcard:hover .mcard__cap, .mcard:focus-visible .mcard__cap { opacity: 1; transform: none; }

/* big numbers */
.nums { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 9vw, 130px); }
.nums__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.nums b { display: block; font-weight: 500; font-size: clamp(52px, 6.6vw, 104px); line-height: 1; letter-spacing: -0.05em; padding-bottom: 16px; border-bottom: 1px dashed rgba(0,0,0,.28); }
.nums h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin-top: 16px; }
.nums p { color: var(--mute); font-size: 14.5px; line-height: 1.45; margin-top: 4px; max-width: 26ch; }

/* services */
.sv { background: #0b0b0c; color: #fff; padding: clamp(70px, 9vw, 120px) var(--gutter); position: relative; }
.sv__head { max-width: 1312px; margin: 0 auto clamp(30px, 4vw, 54px); display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.sv__head h2 { font-weight: 500; font-size: clamp(42px, 6vw, 88px); letter-spacing: -0.045em; line-height: 1; display: flex; align-items: center; gap: .22em; }
.sv__pill { display: inline-block; width: 1.1em; height: .78em; border-radius: .16em; overflow: hidden; }
.sv__pill img { width: 100%; height: 100%; object-fit: cover; filter: url(#mblur); transform: scale(1.2); }
.sv__head p { max-width: 340px; color: rgba(255,255,255,.62); font-size: 15px; }
.sv .svc-list { max-width: 1312px; margin: 0 auto; border-top: 1px dashed rgba(229,50,45,.65); }
.sv .svc-list li { border-bottom: 1px dashed rgba(229,50,45,.65); }
.sv .svc-list a { mix-blend-mode: normal; align-items: center; gap: 26px; padding: clamp(20px, 2.4vw, 32px) 0; font-weight: 500; color: #fff; font-size: clamp(28px, 4vw, 58px); }
.sv .svc-list li:hover a { padding-left: 20px; color: #fff; }
.sv .svc-list em { margin-left: auto; font-style: normal; font-size: 15px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.4; color: rgba(255,255,255,.6); max-width: 330px; text-align: right; }
.sv .svc-preview { border-radius: 16px; z-index: 30; }
.sv .svc-list { position: static; }
.sv .svc-list a { position: relative; z-index: 31; }

/* stacked colour project cards */
.stack-sec { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 9vw, 130px) var(--gutter) 40px; }
.stack-sec > .head-row { align-items: end; }
.scard { position: sticky; top: 84px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; min-height: min(74vh, 640px); margin-bottom: 26px; padding: 12px; border-radius: 28px; background: var(--c); color: var(--fg, #fff); box-shadow: 0 -22px 50px -34px rgba(0,0,0,.45); transform-origin: 50% 0; transform: scale(var(--s, 1)); will-change: transform; }
.scard__txt { display: flex; flex-direction: column; padding: clamp(20px, 3vw, 44px); }
.scard small { font-size: 14px; opacity: .8; }
.scard h3 { font-weight: 500; font-size: clamp(36px, 4.6vw, 70px); letter-spacing: -0.045em; line-height: 1; margin-top: 10px; }
.scard__m { margin-top: auto; }
.scard__m b { display: block; font-weight: 500; font-size: clamp(56px, 8vw, 124px); letter-spacing: -0.06em; line-height: .95; }
.scard__m span { display: block; max-width: 28ch; margin-top: 8px; opacity: .85; }
.scard__go { display: inline-flex; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-weight: 500; align-self: flex-start; }
.scard__img { border-radius: 18px; overflow: hidden; position: relative; min-height: 300px; }
.scard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.03); }

.v2-faq { max-width: 1440px; margin: 0 auto; padding: clamp(70px, 8vw, 120px) var(--gutter); }
.contact__card { background: var(--red); }
.contact__card .kicker--light { color: rgba(255,255,255,.85); }
.contact__card .mute { color: rgba(255,255,255,.7); }

@media (max-width: 1000px) {
  .who { grid-template-columns: 1fr; }
  .nums__grid { grid-template-columns: 1fr 1fr; }
  .scard { grid-template-columns: 1fr; position: relative; top: 0; }
  .scard__img { aspect-ratio: 16 / 10; min-height: 0; }
  .dash-link { justify-self: start; }
  .sv .svc-list em { display: none; }
  .strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .mcard { scroll-snap-align: center; flex-basis: 72vw; }
  .mcard__cap { opacity: 1; transform: none; }
}
@media (max-width: 640px) { .caps { grid-template-columns: 1fr; gap: 0; padding-top: 18px; } .caps__lead { max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  .who h2 .w { color: var(--ink); transition: none; }
  .scard { position: relative; top: 0; }
}