/* Sign Depot site styles. The engine (scrollcraft.css) is themed through its
   tokens here and never edited. Brand colours come from the official logo:
   Signal Red sampled from the logo file is exactly #FF0000. */
:root {
  --red: #FF0000;          /* Signal Red: lines, dots, accents, never small text */
  --red-ui: #E10600;       /* button and tag fills: white text passes AA (4.97:1) */
  --red-deep: #C80000;     /* small red text on white (5.9:1) */
  --jet: #0D0D0F;
  --carbon: #1A1B1F;
  --carbon-2: #23252A;
  --steel: #6B6F76;        /* secondary text on white (5.0:1) */
  --steel-dark: #A3A7AE;   /* secondary text on jet (7.6:1) */
  --concrete: #F2F2F0;
  --white: #FFFFFF;
  --line: #E1E1DD;
  --slant: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  --skew: -12deg;

  --sc-canvas: #FFFFFF;
  --sc-surface: #F2F2F0;
  --sc-ink: #0D0D0F;
  --sc-ink-soft: #4A4D53;
  --sc-accent: #E10600;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-gutter: clamp(1rem, 4.5vw, 4.5rem);
  --sc-maxw: 84rem;
  --bar-h: 76px;
}

body { background: var(--white); color: var(--jet); }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--jet); color: #fff; padding: .7rem 1rem; border-radius: 6px; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--red-ui); outline-offset: 3px; border-radius: 4px; }
.ph { background: #FFF1B8; color: #5A4500; padding: 0 .2em; border-radius: 3px; font-weight: 600; }
.center { text-align: center; margin-top: var(--sc-7); }

/* ------------------------------------------------------------- type -- */
.h1, .h2, .h3, .h4, .hero__h, .cta__h { font-family: var(--sc-font-display); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; margin: 0; }
.h1 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 5.4rem); }
.h2 { font-size: clamp(2rem, 1.3rem + 3vw, 4rem); }
.h3 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); letter-spacing: -0.02em; margin-bottom: var(--sc-5); }
.h4 { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: var(--sc-4); }
.kw { color: var(--kw-light, var(--red)); }
:is(.hero, .phead, .led, .group, .caps, .proof) .kw { color: var(--kw-dark, var(--red)); }
.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55; max-width: 46ch; margin: var(--sc-5) 0 0; text-wrap: pretty; }
.lede-s { font-size: clamp(1.02rem, .98rem + .2vw, 1.15rem); color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }
.tag {
  display: inline-block; position: relative; isolation: isolate;
  font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; padding: .5em 1.05em .5em .95em; margin-bottom: var(--sc-5);
}
.tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red-ui); transform: skewX(var(--skew)); border-radius: 2px; }

/* ----------------------------------------------------------- buttons -- */
.btn {
  --b-bg: var(--jet); --b-fg: #fff; --b-bd: transparent;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.6rem; border: 0; background: none; cursor: pointer;
  color: var(--b-fg); font: 700 1rem/1.1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-bg);
  box-shadow: inset 0 0 0 2px var(--b-bd);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: background-color 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.btn > span { display: inline-flex; align-items: center; gap: .55em; }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn:hover::before { transform: scaleX(1.03); }
.btn:active::before { transform: scale(.98); }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.05rem; }
.btn--sm { min-height: 40px; padding: .55rem 1.1rem; font-size: .9rem; }
.btn--red { --b-bg: var(--red-ui); }
.btn--red:hover { --b-bg: var(--red-deep); }
.btn--dark { --b-bg: var(--jet); }
.btn--dark:hover { --b-bg: #2a2c31; }
.btn--white { --b-bg: #fff; --b-fg: var(--jet); }
.btn--ghost { --b-bg: rgba(255,255,255,.06); --b-bd: rgba(255,255,255,.7); }
.btn--ghost:hover { --b-bg: rgba(255,255,255,.16); }
.btn--ghost-dark { --b-bg: transparent; --b-fg: var(--jet); --b-bd: var(--jet); }
.btn--messenger { --b-bg: #0866FF; }
.btn--messenger:hover { --b-bg: #0050D0; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; }

/* ------------------------------------------------------------ header -- */
.bar { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar-h); color: #fff; transition: background-color 260ms var(--sc-ease-out), box-shadow 260ms; }
.bar::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: color-mix(in srgb, var(--red) 40%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--sc-ease-out); }
.bar.is-solid { background: var(--jet); }
.bar.is-solid::after { transform: scaleX(1); }
.bar__in { height: 100%; max-width: 96rem; margin-inline: auto; padding-inline: var(--sc-gutter); display: flex; align-items: center; gap: var(--sc-6); }
.bar__logo { flex: none; padding: 6px 0; }
.bar__logo img { width: 150px; height: auto; }
.bar__nav { margin-left: auto; }
.bar__nav ul { display: flex; gap: clamp(.9rem, 1.6vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.bar__nav a { position: relative; text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem 0; color: rgba(255,255,255,.88); }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--sc-ease-out); }
.bar__nav a:hover, .bar__nav a[aria-current] { color: #fff; }
.bar__nav a:hover::after, .bar__nav a[aria-current]::after { transform: scaleX(1); }
.bar__progress { top: auto !important; bottom: 0; position: absolute !important; background: var(--red) !important; height: 2px; z-index: 1; }
.bar:not(.is-solid) .bar__progress { opacity: 0; }
.bar__burger { display: none; margin-left: auto; width: 48px; height: 48px; background: none; border: 0; cursor: pointer; position: relative; }
.bar__burger span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; }
.bar__burger span:nth-child(1) { top: 19px; } .bar__burger span:nth-child(2) { top: 28px; right: 19px; }
@media (max-width: 1080px) {
  .bar__nav, .bar__cta { display: none; }
  .bar__burger { display: block; }
}
.menu { position: fixed; inset: 0; z-index: 80; background: var(--jet); color: #fff; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 2rem; display: flex; flex-direction: column; gap: var(--sc-6); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: block; font: 900 clamp(1.8rem, 7vw, 2.6rem)/1.15 var(--sc-font-display); letter-spacing: -.02em; text-decoration: none; padding: .3rem 0; }
.menu li a[aria-current] { color: var(--red); }
.menu__close { position: absolute; top: 14px; right: var(--sc-gutter); width: 48px; height: 48px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.menu__meta { color: var(--steel-dark); font-size: .95rem; }
.menu .btn { align-self: flex-start; }
.menu.is-open { animation: menuIn 320ms var(--sc-ease-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }

/* -------------------------------------------------------------- mono -- */
.mono text { font: 900 520px var(--sc-font-display); letter-spacing: -30px; fill: none; stroke: currentColor; stroke-width: 3; }

/* -------------------------------------------------------------- hero -- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; background: var(--jet); overflow: clip; isolation: isolate; }
.hero__bg { position: absolute; inset: -6% 0 -18%; z-index: -3; will-change: transform; }
.hero__bg img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 900ms var(--sc-ease-out); }
.hero__video.is-on { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(13,13,15,.92) 0%, rgba(13,13,15,.72) 38%, rgba(13,13,15,.2) 75%),
  linear-gradient(0deg, rgba(13,13,15,.85) 0%, transparent 45%),
  linear-gradient(180deg, rgba(13,13,15,.6) 0%, transparent 22%); }
.hero__mono { position: absolute; z-index: -2; right: -6vw; top: 8vh; width: min(70vw, 1100px); color: rgba(255,255,255,.16); will-change: transform; pointer-events: none; }
.hero__mono .mono text { stroke-width: 2.5; }
.hero__fg { padding-top: calc(var(--bar-h) + 6vh); padding-bottom: clamp(5rem, 13vh, 9rem); }
.hero__h { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6.6rem); max-width: 13ch; line-height: .98; }
.hero__sub { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); line-height: 1.55; max-width: 52ch; margin: var(--sc-6) 0 0; color: rgba(255,255,255,.86); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-7); }
.hero__eyebrow .tag { margin-bottom: var(--sc-6); }
.hero__h, .hero__sub, .hero__ctas, .hero__eyebrow { animation: rise 900ms var(--sc-ease-out) both; }
.hero__h { animation-delay: 80ms; } .hero__sub { animation-delay: 200ms; } .hero__ctas { animation-delay: 320ms; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.hero__cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,.55); border-radius: 14px; }
.hero__cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--red); border-radius: 2px; animation: cue 1.8s var(--sc-ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ------------------------------------------------------------- proof -- */
.proof { background: var(--jet); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.proof__list { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(1.6rem, 3vw, 2.6rem) clamp(.8rem, 2vw, 2rem); border-left: 1px solid rgba(255,255,255,.1); display: grid; gap: .4rem; align-content: start; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n { font: 900 clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--sc-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__n .ph { font: 600 .95rem/1.3 var(--sc-font-text); letter-spacing: 0; display: inline-block; }
.stat__n--badge { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); color: #fff; }
.stat__n--badge::before { content: ""; display: inline-block; width: .5em; height: .5em; background: var(--red); transform: skewX(var(--skew)); margin-right: .35em; vertical-align: .08em; }
.stat__l { color: var(--steel-dark); font-size: .92rem; }
@media (max-width: 760px) {
  .proof__list { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}

/* ----------------------------------------------------------- section -- */
.sec { position: relative; padding-block: clamp(4.5rem, 9vw, 9rem); overflow: clip; }
.sec--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.sec--concrete { background: var(--concrete); }
.sec__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 52rem; }
.sec__head .lede-s { margin-top: var(--sc-5); }
.sec__head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sc-6); }
.mono-drift { position: absolute; left: -8vw; top: 4rem; width: min(78vw, 1200px); color: rgba(13,13,15,.05); pointer-events: none; z-index: 0; will-change: transform; }
.mono-drift--dark { color: rgba(255,255,255,.05); left: auto; right: -10vw; }
.sec > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------- overview -- */
.overview__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.overview__copy .h2 { margin-bottom: var(--sc-6); }
.overview__copy .lede-s + .lede-s { margin-top: var(--sc-4); }
.ticks { list-style: none; padding: 0; margin: var(--sc-6) 0 var(--sc-7); display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.ticks .ico { flex: none; width: 1.25rem; height: 1.25rem; color: var(--red-deep); margin-top: .15rem; stroke-width: 3; }
.ticks--2 { grid-template-columns: 1fr; font-weight: 500; }
.overview__fig { margin: 0; }
.overview__fig figcaption { font-size: .85rem; color: var(--steel); margin-top: .8rem; }
.slant-mask { clip-path: var(--slant); aspect-ratio: 4 / 5; overflow: hidden; background: var(--carbon); }
.overview__img { height: 118%; margin-top: -9%; will-change: transform; }
.overview__img img { width: 100%; height: 100%; object-fit: cover; }
[data-wipe] { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1100ms var(--sc-ease-in-out); }
[data-wipe].is-in { clip-path: var(--slant); }
@media (max-width: 860px) {
  .overview__grid { grid-template-columns: 1fr; }
  .slant-mask { aspect-ratio: 4 / 3.4; }
}
@media (max-width: 520px) { .ticks { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- story -- */
.story { background: var(--concrete); }
.story__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); }
.story__head { position: sticky; top: calc(var(--bar-h) + 3rem); align-self: start; }
.story__head .lede-s { margin-top: var(--sc-5); }
.tl { list-style: none; margin: 0; padding: 0 0 0 2.6rem; position: relative; }
.tl__track { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; background: #D9D9D4; }
.tl__fill { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(var(--tl, 0)); }
.tl__item { position: relative; padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.tl__item:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: calc(-2.6rem + 1px); top: .35rem; width: 15px; height: 15px; background: var(--concrete); border: 3px solid #C9C9C3; transform: skewX(var(--skew)); transition: background-color 300ms, border-color 300ms; }
.tl__item.is-lit .tl__dot { background: var(--red); border-color: var(--red); }
.tl__when { font: 800 .8rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 .6rem; }
.tl__title { font: 900 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--sc-font-display); letter-spacing: -.02em; margin: 0 0 .6rem; }
.tl__item p:last-child { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; }
.mvv { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: var(--sc-5); margin-top: clamp(4rem, 8vw, 7rem); }
.mvv__card { background: #fff; padding: clamp(1.6rem, 3vw, 2.6rem); border-top: 4px solid var(--jet); }
.mvv__card h3 { margin: 0; }
.mvv__big { font: 800 clamp(1.25rem, 1.05rem + .8vw, 1.7rem)/1.3 var(--sc-font-display); letter-spacing: -.015em; margin: 0; }
.mvv__card--values { background: var(--jet); color: #fff; border-top-color: var(--red); }
.mvv__card dl { margin: 0; display: grid; gap: .9rem; }
.mvv__card dt { font: 800 1.05rem/1.2 var(--sc-font-display); }
.mvv__card dd { margin: .15rem 0 0; color: var(--steel-dark); font-size: .95rem; }
.mvv__note { font-size: .85rem; color: var(--steel); margin-top: var(--sc-4); }
@media (max-width: 960px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__head { position: static; }
  .mvv { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- services -- */
.svc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); perspective: 1200px; }
.svc__card { position: relative; display: block; height: 100%; min-height: 440px; color: #fff; text-decoration: none; background: var(--carbon); overflow: hidden; isolation: isolate; }
.svc__media { position: absolute; inset: 0; z-index: -1; }
.svc__media img, .svc__media .ph-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sc-ease-out); }
.svc__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,13,15,.95) 0%, rgba(13,13,15,.7) 42%, rgba(13,13,15,.15) 75%); transition: background-color 400ms; }
.svc__body { position: absolute; inset: auto 0 0; padding: clamp(1.4rem, 2.4vw, 2rem); transform: translateZ(30px); }
.svc__num { font: 800 .8rem/1 var(--sc-font-text); letter-spacing: .14em; color: var(--red); }
.svc__name { font: 900 clamp(1.4rem, 1.15rem + .8vw, 1.85rem)/1.08 var(--sc-font-display); letter-spacing: -.02em; margin: .6rem 0 0; }
.svc__desc { color: rgba(255,255,255,.85); font-size: .95rem; margin: .8rem 0 0; }
.svc__more { display: inline-flex; gap: .45rem; align-items: center; font-weight: 700; margin-top: 1rem; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.svc__more .ico { width: 1rem; height: 1rem; stroke-width: 2.6; transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc__desc, .svc__more { opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); }
  .svc__card:hover .svc__desc, .svc__card:hover .svc__more, .svc__card:focus-visible .svc__desc, .svc__card:focus-visible .svc__more { opacity: 1; transform: none; }
  .svc__card:hover .svc__media img { transform: scale(1.06); }
  .svc__card:hover .svc__more .ico { transform: translateX(4px); }
}
@media (max-width: 1100px) { .svc__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .svc__grid { grid-template-columns: 1fr; } .svc__card { min-height: 360px; } }

/* --------------------------------------------------------- photo slot -- */
.ph-photo { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 220px; background: repeating-linear-gradient(-12deg, #202227 0 18px, #1c1d22 18px 36px); color: var(--steel-dark); text-align: center; font: 600 .82rem/1.4 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; }
.ph-photo__mark { position: absolute; inset: 15%; width: 70%; height: 70%; color: rgba(255,255,255,.08); }
.ph-photo span { position: relative; background: rgba(13,13,15,.7); padding: .4rem .8rem; }

/* --------------------------------------------------------------- LED -- */
.led { position: relative; background: var(--jet); color: #fff; padding-block: clamp(5rem, 10vw, 9rem); overflow: clip; isolation: isolate; }
.led__pixels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.led::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1.2px, transparent 1.6px); background-size: 18px 18px; }
.led .lede-s, .led p { color: rgba(255,255,255,.82); }
.led__head { max-width: 50rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.led__head .lede-s { margin-top: var(--sc-5); }
.led__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--sc-5); }
.mode, .pitch, .rb__col { background: rgba(26,27,31,.9); border: 1px solid rgba(255,255,255,.09); padding: clamp(1.4rem, 3vw, 2.4rem); backdrop-filter: blur(2px); }
.mode__tabs { display: inline-flex; background: #0d0d0f; padding: 4px; gap: 4px; border: 1px solid rgba(255,255,255,.12); margin-bottom: var(--sc-6); }
.mode__tabs button { min-height: 44px; padding: 0 1.4rem; border: 0; background: none; color: rgba(255,255,255,.75); font-weight: 700; cursor: pointer; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transition: background-color 200ms, color 200ms; }
.mode__tabs button[aria-selected="true"] { background: var(--red-ui); color: #fff; }
.mode__panel { margin: 0; display: grid; gap: 1.1rem; }
.mode__panel div { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }
.mode__panel dt { font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-dark); }
.mode__panel dd { margin: .4rem 0 0; font: 800 1.2rem/1.3 var(--sc-font-display); transition: opacity 200ms; }
.mode__panel.is-swapping dd { opacity: 0; }
.viewer { margin: var(--sc-5) 0 0; position: relative; background: #000; border: 1px solid rgba(255,255,255,.12); }
.viewer canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; }
.viewer__read { position: absolute; left: 0; bottom: 0; padding: .45rem .8rem; font: 700 .82rem/1.2 var(--sc-font-text); background: rgba(13,13,15,.82); }
.viewer__read b { color: var(--red); }
.viewer__ctl { display: flex; flex-wrap: wrap; gap: var(--sc-5); align-items: center; margin-top: var(--sc-4); }
.viewer__pitches { display: inline-flex; gap: 4px; }
.viewer__pitches button { min-height: 44px; min-width: 64px; border: 1px solid rgba(255,255,255,.2); background: none; color: #fff; font-weight: 700; cursor: pointer; }
.viewer__pitches button[aria-checked="true"] { background: #fff; color: var(--jet); }
.viewer__range { flex: 1 1 220px; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; font-size: .9rem; font-weight: 600; }
.viewer__range input { grid-column: 1 / -1; width: 100%; accent-color: var(--red); min-height: 32px; }
.viewer__range output { font-variant-numeric: tabular-nums; color: #fff; }
.pitch__table { width: 100%; border-collapse: collapse; margin-top: var(--sc-6); font-size: .93rem; }
.pitch__table th, .pitch__table td { text-align: left; padding: .7rem .6rem .7rem 0; border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: top; }
.pitch__table thead th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-dark); }
.pitch__table tbody th { font: 900 1.05rem var(--sc-font-display); color: #fff; }
.pitch__rule { font-size: .9rem; margin: var(--sc-4) 0 0; }
.rb { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); margin-top: var(--sc-5); }
.rb__h { grid-column: 1 / -1; margin: var(--sc-6) 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.rb__col h4 { font: 900 1.5rem/1 var(--sc-font-display); margin: 0 0 var(--sc-5); display: flex; align-items: center; gap: .6rem; }
.rb__col h4::before { content: ""; width: .9rem; height: .9rem; background: var(--red); transform: skewX(var(--skew)); }
.rb__col--buy h4::before { background: #fff; }
.rb__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.rb__col li { display: flex; gap: .6rem; }
.rb__col .ico { flex: none; width: 1.2rem; height: 1.2rem; color: var(--red); stroke-width: 3; margin-top: .2rem; }
.led__cta { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 960px) { .led__grid, .rb { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ capabilities -- */
.caps { background: var(--carbon); color: #fff; }
.caps__stage { display: flex; align-items: center; overflow: hidden; }
.caps__rail { display: flex; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); height: min(78svh, 760px); align-items: stretch; }
.caps__lead { flex: 0 0 min(34rem, 80vw); align-self: center; padding-right: var(--sc-6); }
.caps__lead .lede-s { color: rgba(255,255,255,.8); margin-top: var(--sc-5); }
.cap { position: relative; flex: 0 0 min(40vw, 560px); overflow: hidden; background: var(--jet); isolation: isolate; }
.cap__media { position: absolute; inset: 0 -12%; z-index: -1; transform: translate3d(calc((var(--sc-p, .5) - .5) * -16%), 0, 0); will-change: transform; }
.cap__media img, .cap__media .ph-photo { width: 100%; height: 100%; object-fit: cover; }
.cap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,13,15,.92) 0%, rgba(13,13,15,.2) 55%, transparent 80%); }
.cap__copy { position: absolute; inset: auto 0 0; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.cap__i { font: 800 .8rem/1 var(--sc-font-text); letter-spacing: .14em; color: var(--red); }
.cap h3 { font: 900 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.05 var(--sc-font-display); letter-spacing: -.02em; margin: .5rem 0; }
.cap p { margin: 0; color: rgba(255,255,255,.85); max-width: 36ch; }
@media (max-width: 860px) {
  .caps__rail { height: 72svh; }
  .cap { flex-basis: 82vw; }
  .caps__lead { flex-basis: 82vw; }
}

/* ----------------------------------------------------------- process -- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sc-5); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 3px; background: var(--line); }
.steps::after { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--sc-ease-in-out); }
.steps.is-in::after { transform: scaleX(1); }
.step { position: relative; opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); transition-delay: calc(var(--i) * 280ms); }
.steps.is-in .step { opacity: 1; transform: none; }
.step__n { display: grid; place-items: center; width: 58px; height: 58px; background: var(--jet); color: #fff; font: 900 1.4rem var(--sc-font-display); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); transition: background-color 400ms; transition-delay: calc(var(--i) * 280ms + 200ms); }
.steps.is-in .step__n { background: var(--red-ui); }
.step h3 { font: 900 1.45rem/1.1 var(--sc-font-display); margin: 1.2rem 0 .5rem; }
.step p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 0; }
  .steps::before, .steps::after { left: 27px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .steps::after { transform: scaleY(0); transform-origin: top; }
  .steps.is-in::after { transform: scaleY(1); }
  .step { display: grid; grid-template-columns: 58px 1fr; column-gap: 1.2rem; }
  .step__n { grid-row: span 2; }
  .step h3 { margin: .2rem 0 .3rem; }
}

/* ---------------------------------------------------------- projects -- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button { min-height: 42px; padding: 0 1rem; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; }
.filters button:hover { border-color: var(--jet); }
.filters button[aria-pressed="true"] { background: var(--jet); color: #fff; border-color: var(--jet); }
.pj__grid { list-style: none; margin: 0; padding: 0; columns: 3 320px; column-gap: var(--sc-5); }
.pj { break-inside: avoid; margin-bottom: var(--sc-5); }
.pj[hidden] { display: none; }
.pj__a { display: block; text-decoration: none; background: #fff; }
.pj__media { overflow: hidden; background: var(--carbon); }
.pj__media img { width: 100%; height: auto; transition: transform 700ms var(--sc-ease-out); }
.pj:nth-child(3n+1) .pj__media img, .pj:nth-child(3n+1) .pj__media .ph-photo { aspect-ratio: 4 / 5; object-fit: cover; }
.pj:nth-child(3n+2) .pj__media img, .pj:nth-child(3n+2) .pj__media .ph-photo { aspect-ratio: 4 / 3; object-fit: cover; }
.pj:nth-child(3n) .pj__media img, .pj:nth-child(3n) .pj__media .ph-photo { aspect-ratio: 1; object-fit: cover; }
.pj__a:hover .pj__media img { transform: scale(1.04); }
.pj__body { padding: 1.1rem 0 .4rem; }
.pj__cat { font: 700 .72rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.pj__body h3 { font: 900 1.3rem/1.15 var(--sc-font-display); letter-spacing: -.015em; margin: .5rem 0 .3rem; }
.pj__a:hover h3 { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pj__body p { margin: 0; color: var(--steel); font-size: .92rem; }
.pj__empty { color: var(--steel); }

/* -------------------------------------------------------- industries -- */
.industries { background: var(--concrete); }
.ind { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ind li { background: #fff; padding: 1.4rem 1rem; display: grid; gap: .9rem; align-content: start; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ind .ico { width: 36px; height: 36px; color: var(--jet); stroke-width: 1.8; }
.ind li:hover .ico { color: var(--red); }
@media (max-width: 1100px) { .ind { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .ind { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- group -- */
.group { background: var(--jet); color: #fff; }
.group .lede-s { color: rgba(255,255,255,.8); }
.grp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-4); }
.grp__card { background: var(--carbon); padding: 1.6rem; border: 1px solid rgba(255,255,255,.08); transition: border-color 300ms, transform 300ms var(--sc-ease-out); }
.grp__card:hover { border-color: color-mix(in srgb, var(--red) 60%, transparent); transform: translateY(-3px); }
.grp__card.is-self { grid-column: span 2; background: var(--carbon-2); border-left: 4px solid var(--red); }
.grp__logo { height: 84px; display: flex; align-items: center; margin-bottom: 1.1rem; }
.grp__logo img { max-height: 72px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
.grp__card.is-self .grp__logo img { max-width: 260px; }
.grp__card.is-light .grp__logo { background: #fff; padding: .6rem 1rem; justify-content: center; }
.grp__card.is-light .grp__logo img { max-height: 60px; }
.grp__card h3 { font: 900 1.15rem/1.2 var(--sc-font-display); margin: 0 0 .35rem; }
.grp__card p { margin: 0; color: var(--steel-dark); font-size: .92rem; }
.chain { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; counter-reset: c; }
.chain li { position: relative; padding: .8rem 1.6rem .8rem 1.4rem; font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: #fff; isolation: isolate; margin-right: -6px; }
.chain li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--carbon-2); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.chain li:last-child::before { background: var(--red-ui); }
@media (max-width: 1100px) { .grp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grp { grid-template-columns: 1fr; } .grp__card.is-self { grid-column: auto; } }

/* ------------------------------------------------------ testimonials -- */
.testi__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 60rem); gap: var(--sc-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.testi__item { scroll-snap-align: start; margin: 0; background: #fff; padding: clamp(1.8rem, 4vw, 3.4rem); border-left: 6px solid var(--red); }
.stars { display: flex; gap: 4px; color: #F5B300; }
.stars .ico { width: 22px; height: 22px; }
.testi__item blockquote { margin: 1.2rem 0; font: 800 clamp(1.3rem, 1.05rem + 1vw, 2rem)/1.3 var(--sc-font-display); letter-spacing: -.015em; }
.testi__item blockquote p { margin: 0; }
.testi__item figcaption { color: var(--steel); }
.testi__nav { display: flex; gap: .5rem; margin-top: 1rem; }
.testi__nav button { width: 48px; height: 48px; border: 1.5px solid var(--jet); background: #fff; font-size: 1.2rem; cursor: pointer; }

/* -------------------------------------------------------------- news -- */
.news__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); }
.news__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--carbon); clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%); }
.news__media img, .news__media .ph-photo { width: 100%; height: 100%; object-fit: cover; }
.news__date { font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); margin: 1.2rem 0 .5rem; }
.news__card h3 { font: 900 1.3rem/1.15 var(--sc-font-display); margin: 0 0 .4rem; }
.news__card p:last-child { color: var(--sc-ink-soft); margin: 0; }
@media (max-width: 860px) { .news__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- faq -- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); }
.faq__grid .lede-s { margin-top: var(--sc-5); }
.faq__grid .lede-s a { color: var(--red-deep); font-weight: 700; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.3rem 0; font: 800 clamp(1.05rem, 1rem + .3vw, 1.25rem)/1.3 var(--sc-font-display); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__x { position: relative; flex: none; width: 28px; height: 28px; background: var(--concrete); }
.faq__x::before, .faq__x::after { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 2px; background: var(--jet); transition: transform 300ms var(--sc-ease-out); }
.faq__x::after { transform: rotate(90deg); }
details[open] .faq__x { background: var(--red-ui); }
details[open] .faq__x::before, details[open] .faq__x::after { background: #fff; }
details[open] .faq__x::after { transform: rotate(0); }
.faq__a p { margin: 0 0 1.4rem; color: var(--sc-ink-soft); max-width: 62ch; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- cta -- */
.cta { position: relative; background: var(--jet); color: #fff; overflow: clip; isolation: isolate; padding-block: clamp(4rem, 8vw, 7rem); }
.cta__red { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 46%; background: var(--red-ui); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.cta__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cta__h { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem); }
.cta__h .kw { color: #fff; background: linear-gradient(var(--red), var(--red)) 0 92% / 100% .14em no-repeat; }
.cta__side p { font-size: 1.15rem; margin: 0 0 var(--sc-6); max-width: 34ch; }
.cta__btns { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
@media (max-width: 860px) {
  .cta__in { grid-template-columns: 1fr; }
  .cta__red { width: 100%; top: auto; height: 46%; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
}

/* ----------------------------------------------------------- contact -- */
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 6rem); }
.contact__info .lede-s { margin: var(--sc-5) 0 var(--sc-6); }
.contact__list { list-style: none; padding: 0; margin: var(--sc-7) 0; display: grid; gap: 1.1rem; }
.contact__list li { display: flex; gap: .9rem; }
.contact__list .ico { flex: none; width: 22px; height: 22px; color: var(--red-deep); margin-top: .2rem; }
.contact__list .k { display: block; font: 700 .72rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: .35rem; }
.contact__list a { font-weight: 700; }
.map { aspect-ratio: 4 / 3; background: var(--concrete); clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.form { background: var(--concrete); padding: clamp(1.4rem, 3.5vw, 3rem); border-top: 4px solid var(--red); align-self: start; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.f { display: grid; gap: .4rem; align-content: start; }
.f--full { grid-column: 1 / -1; }
.f label { font-weight: 700; font-size: .9rem; }
.f label span { color: var(--red-deep); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid #CFCFCA; background: #fff; border-radius: 0; font-size: 1rem; }
.f input[type="file"] { padding: .55rem; }
.f textarea { resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--jet); outline: 2px solid var(--red-ui); outline-offset: 0; }
.f small { color: var(--steel); font-size: .8rem; }
.f [aria-invalid="true"] { border-color: var(--red-deep); }
.hp { position: absolute; left: -9999px; }
.form__submit { margin-top: var(--sc-6); width: 100%; }
.form__status { margin: var(--sc-4) 0 0; font-weight: 600; min-height: 1.5em; }
.form__status.is-ok { color: #0A7A33; }
.form__status.is-err { color: var(--red-deep); }
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- page heads -- */
.phead { position: relative; background: var(--jet); color: #fff; padding: calc(var(--bar-h) + clamp(3rem, 8vw, 7rem)) 0 clamp(3.5rem, 7vw, 6rem); overflow: clip; isolation: isolate; }
.phead--img { min-height: 62svh; display: grid; align-items: end; }
.phead__bg { position: absolute; inset: -8% 0 -20%; z-index: -2; will-change: transform; }
.phead__bg img, .phead__bg .ph-photo { width: 100%; height: 100%; object-fit: cover; }
.phead--img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,13,15,.9) 0%, rgba(13,13,15,.6) 50%, rgba(13,13,15,.25) 100%), linear-gradient(0deg, rgba(13,13,15,.7), transparent 50%); }
.phead__mono { position: absolute; right: -8vw; top: 10%; width: min(60vw, 900px); color: rgba(255,255,255,.07); z-index: -1; will-change: transform; }
.phead .lede { color: rgba(255,255,255,.86); }
.crumbs ol { list-style: none; margin: 0 0 var(--sc-5); padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: rgba(255,255,255,.7); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--red); }
.crumbs a { color: #fff; }

/* ----------------------------------------------------- detail pages -- */
.svcd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.chips { list-style: none; padding: 0; margin: 0 0 var(--sc-7); display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .55rem 1rem; background: var(--concrete); font-weight: 600; font-size: .95rem; }
.gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
.gal li { aspect-ratio: 4 / 3; overflow: hidden; background: var(--carbon); }
.gal img, .gal .ph-photo { width: 100%; height: 100%; object-fit: cover; }
.other { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.other li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.other a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem; background: #fff; font-weight: 700; text-decoration: none; }
.other a:hover { color: var(--red-deep); }
.other .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.case { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); }
.case__facts { margin: 0; display: grid; gap: 1.2rem; align-content: start; }
.case__facts div { border-top: 3px solid var(--jet); padding-top: .8rem; }
.case__facts dt { font: 700 .72rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.case__facts dd { margin: .45rem 0 0; font: 800 1.1rem/1.35 var(--sc-font-display); }
.case__body .h3 { margin-top: var(--sc-6); margin-bottom: var(--sc-3); }
.case__body .h3:first-child { margin-top: 0; }
.case__body .btn { margin-top: var(--sc-7); }
@media (max-width: 860px) { .svcd__grid, .case { grid-template-columns: 1fr; } .gal { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ footer -- */
.foot { background: var(--jet); color: #fff; padding-top: clamp(4rem, 7vw, 6rem); }
.foot__grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); }
.foot__logo { width: 190px; height: auto; margin-bottom: 1.2rem; }
.foot__tag { color: var(--steel-dark); max-width: 30ch; margin: 0 0 1.4rem; }
.foot__h { font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-dark); margin: 0 0 1.1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot nav li + li { margin-top: .6rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--red); text-decoration: underline; }
.foot__social { display: flex; gap: .5rem; }
.foot__social a { display: grid; place-items: center; width: 44px; height: 44px; background: var(--carbon-2); }
.foot__social a:hover { background: var(--red-ui); color: #fff; }
.foot__social .ico { width: 20px; height: 20px; }
.foot__contact { display: grid; gap: .9rem; }
.foot__contact li { display: flex; gap: .7rem; color: rgba(255,255,255,.88); font-size: .95rem; }
.foot__contact .ico { flex: none; width: 18px; height: 18px; color: var(--red); margin-top: .2rem; }
.foot__group { margin-top: clamp(3rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
.foot__group ul { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; }
.foot__group img { height: 34px; width: auto; opacity: .85; }
.foot__group li.is-light { background: #fff; padding: 4px 10px; }
.foot__group li.is-light img { height: 28px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem 6rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); color: var(--steel-dark); font-size: .88rem; }
.foot__legal p { margin: 0; }
@media (max-width: 960px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- floating + overlays -- */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: .5rem; height: 56px; padding: 0 1.1rem 0 .9rem; border-radius: 28px; background: #0866FF; color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 6px 18px rgba(8,102,255,.35), 0 2px 4px rgba(0,0,0,.2); transition: transform 240ms var(--sc-ease-out); }
.fab:hover { transform: translateY(-2px); }
.fab .ico { width: 26px; height: 26px; }
@media (max-width: 560px) { .fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .fab { width: 56px; padding: 0; justify-content: center; } }
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 70; max-width: 420px; background: #fff; color: var(--jet); padding: 1.2rem; border-top: 4px solid var(--red); box-shadow: 0 12px 40px rgba(0,0,0,.25); font-size: .92rem; }
.cookie p { margin: 0 0 1rem; }
.cookie__btns { display: flex; gap: .6rem; justify-content: flex-end; }
@media (max-width: 560px) { .cookie { right: 84px; left: 12px; bottom: 12px; } }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(13,13,15,.92); display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__box { position: relative; width: min(100%, 1100px); }
.modal video { width: 100%; max-height: 82svh; background: #000; margin-inline: auto; }
.modal__note { color: var(--steel-dark); font-size: .85rem; text-align: center; margin: .8rem 0 0; }
.modal__close { position: absolute; top: -52px; right: 0; width: 48px; height: 48px; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; }

/* -------------------------------------------------------------- icons -- */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

/* -------------------------------------------------------- phones/motion -- */
@media (max-width: 700px) {
  :root { --bar-h: 64px; }
  .bar__logo img { width: 124px; }
  .hero { align-items: end; }
  .hero__h { font-size: clamp(2.3rem, 9.6vw, 3.4rem); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__shade { background: linear-gradient(0deg, rgba(13,13,15,.95) 0%, rgba(13,13,15,.75) 45%, rgba(13,13,15,.35) 75%, rgba(13,13,15,.6) 100%); }
  .hero__mono { width: 120vw; right: -40vw; top: 12vh; }
  .hero__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__h, .hero__sub, .hero__ctas, .hero__eyebrow { animation: none; }
  .hero__cue span { animation: none; }
  [data-wipe] { clip-path: var(--slant); transition: none; }
  .step, .steps::after { transition-duration: 1ms; transition-delay: 0ms; }
  .cap__media { transform: none; }
  [data-depth] { transform: none !important; }
}

/* ------------------------------------------------- group company sites -- */
.bar__logo--co img { width: auto; height: 42px; max-width: 190px; object-fit: contain; }
.bar__logo.is-chip { background: #fff; padding: 5px 10px; }
.bar__logo.is-chip img { height: 34px; }
.foot__logo-wrap { display: inline-block; margin-bottom: 1.2rem; }
.foot__logo-wrap .foot__logo { margin-bottom: 0; }
.foot__logo-wrap.is-co .foot__logo { width: auto; height: 64px; max-width: 220px; object-fit: contain; }
.foot__logo-wrap.is-chip { background: #fff; padding: 8px 12px; }
.foot__logo-wrap.is-chip .foot__logo { height: 48px; }
.foot__tag a { color: #fff; text-decoration: underline; text-decoration-color: var(--red); }
.foot__group a { display: block; }
.hero--plain { background:
  radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--red) 28%, transparent), transparent 70%),
  radial-gradient(circle, rgba(255,255,255,.07) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
  var(--jet); }
.hero--plain .hero__shade { background: linear-gradient(0deg, rgba(13,13,15,.7) 0%, transparent 50%); }
.hero--plain .hero__mono { color: color-mix(in srgb, var(--red) 45%, transparent); }
.grp__a { display: block; height: 100%; text-decoration: none; color: inherit; }
.grp__card { padding: 0; }
.grp__a { padding: 1.6rem; }
.grp__go { display: inline-flex; gap: .4rem; align-items: center; margin-top: .9rem; font-weight: 700; font-size: .88rem; color: #fff; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.grp__go .ico { width: .95rem; height: .95rem; stroke-width: 2.6; }
.grp__card.is-self .grp__go { border-bottom-color: transparent; color: var(--steel-dark); }
.pj__scope { margin-top: .4rem !important; color: var(--sc-ink-soft) !important; }
.fab--quote { background: var(--red-ui); box-shadow: 0 6px 18px color-mix(in srgb, var(--red-ui) 35%, transparent), 0 2px 4px rgba(0,0,0,.2); }
.fab--quote .ico { width: 22px; height: 22px; }
.svcl__item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.svcl__item:first-child { border-top: 0; padding-top: 0; }
.svcl__item:nth-child(even) .svcl__media { order: 2; }
.svcl__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--carbon); clip-path: var(--slant); }
.svcl__media img, .svcl__media .ph-photo { width: 100%; height: 100%; object-fit: cover; }
.svcl__copy .h3 { margin: .6rem 0 .8rem; }
.svcl__copy .ticks { margin: 1.4rem 0 2rem; }
.pk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-4); }
.pk__card { background: #fff; padding: 1.8rem; border-top: 4px solid var(--jet); display: flex; flex-direction: column; }
.pk__card.is-pick { border-top-color: var(--red); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.pk__card h3 { font: 900 1.6rem/1 var(--sc-font-display); margin: 0; }
.pk__price { margin: .6rem 0 1.2rem; font-weight: 700; }
.pk__card > ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; flex: 1; font-size: .95rem; }
.pk__card > ul li { display: flex; gap: .55rem; }
.pk__card .ico { flex: none; width: 1.1rem; height: 1.1rem; color: var(--red-deep); stroke-width: 3; margin-top: .2rem; }
.pk__card .btn { align-self: flex-start; }
@media (max-width: 1100px) { .pk { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .svcl__item { grid-template-columns: 1fr; } .svcl__item:nth-child(even) .svcl__media { order: 0; } }
@media (max-width: 560px) { .pk { grid-template-columns: 1fr; } }

/* ============================================================ reels -- */
/* Facebook reels: poster + muted loop in a phone-like card; click opens the
   full video with sound in the shared modal. Motion is transform/opacity. */
.reel { position: relative; margin: 0; }
.reel__btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.reel__btn:focus-visible { outline: none; }
.reel__btn:focus-visible .reel__frame { outline: 3px solid var(--red-ui); outline-offset: 4px; }
.reel__frame {
  position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 9 / 16;
  background: var(--carbon); border: 5px solid #0D0D0F; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 22px 44px -22px rgba(0,0,0,.6);
  transform: perspective(900px) translate3d(0, var(--lift, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 520ms var(--sc-ease-out), box-shadow 520ms var(--sc-ease-out);
}
.reel--v .reel__frame::before { content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; width: 26%; height: 5px; margin-left: -13%; border-radius: 3px; background: rgba(13,13,15,.55); }
.reel--h .reel__frame { aspect-ratio: 16 / 9; border-radius: 8px; border-width: 3px; }
.reel__poster, .reel__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__loop { opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
.reel.is-live .reel__loop { opacity: 1; }
.reel__shade { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(120% 55% at var(--gx, 50%) 0%, rgba(255,255,255,.14), transparent 60%),
  linear-gradient(0deg, rgba(13,13,15,.72) 0%, rgba(13,13,15,0) 38%); }
.reel__play { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: grid; place-items: center; width: 50px; height: 46px; color: #fff; background: var(--red-ui); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); transition: transform 320ms var(--sc-ease-out); }
.reel__play .ico { width: 20px; height: 20px; margin-left: 3px; }
.reel__dur { position: absolute; z-index: 2; right: 12px; bottom: 15px; padding: .32rem .5rem; border-radius: 4px; background: rgba(13,13,15,.62); color: #fff; font: 700 .76rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; }
.reel__cap { margin-top: .95rem; font: 800 1.02rem/1.25 var(--sc-font-display); letter-spacing: -.01em; text-wrap: balance; }
.reel__brand { display: block; margin-bottom: .4rem; font: 700 .7rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
@media (hover: hover) and (pointer: fine) {
  .reel__btn:hover .reel__frame { --lift: -8px; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 34px 60px -24px rgba(0,0,0,.7); }
  .reel__btn:hover .reel__play { transform: scale(1.1); }
}
.reel__btn:active .reel__frame { --lift: -2px; transition-duration: 160ms; }

/* Strip on the home pages: horizontal, snap, full-bleed with aligned start. */
.reels, .watch { background: var(--jet); color: #fff; }
:is(.reels, .watch) .lede-s { color: rgba(255,255,255,.8); }
:is(.reels, .watch) .kw { color: var(--kw-dark, var(--red)); }
:is(.reels, .watch, .svcl__reels, .overview__reel) .reel__brand { color: var(--kw-dark, var(--red)); }
.reels .sec__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.reels__nav { display: flex; gap: .5rem; }
.reels__nav button { width: 48px; height: 48px; border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; transition: background-color 200ms, border-color 200ms, opacity 200ms; }
.reels__nav button:hover:not(:disabled) { background: var(--red-ui); border-color: var(--red-ui); }
.reels__nav button:disabled { opacity: .3; cursor: default; }
.reels.is-static .reels__nav { visibility: hidden; }
.reels__track {
  list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 20vw, 290px);
  gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 1rem max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))) 1.5rem;
  scroll-padding-inline: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter)));
}
.reels__track::-webkit-scrollbar { display: none; }
.reels__track:focus-visible { outline-offset: -3px; }
.reels__item { scroll-snap-align: start; list-style: none;
  transform: translate3d(calc((1 - var(--rp, 1)) * (70px + var(--i, 0) * 28px)), calc((1 - var(--rp, 1)) * 36px), 0);
  opacity: calc(.15 + var(--rp, 1) * .85); }
@media (max-width: 700px) { .reels__track { grid-auto-columns: 64vw; } .reels__nav { display: none; } }

/* "Watch" block on service and project pages. */
.watch__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.watch__grid:has(.watch__list--4) { grid-template-columns: 1fr; }
.watch__copy .lede-s { margin-top: var(--sc-5); }
.watch__copy a { color: #fff; text-decoration-color: var(--red); text-underline-offset: 3px; }
.watch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.75rem); justify-content: start; }
.watch__list--1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.watch__list--2 { grid-template-columns: repeat(2, minmax(0, 290px)); }
.watch__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.watch__list--4 { grid-template-columns: repeat(4, minmax(0, 290px)); }
@media (max-width: 960px) {
  .watch__grid { grid-template-columns: 1fr; }
  .watch__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(64vw, 290px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--sc-gutter)); padding: .5rem var(--sc-gutter) 1rem; scroll-padding-inline: var(--sc-gutter); }
  .watch__list--1 { justify-content: start; }
  .watch__list > li { scroll-snap-align: start; }
}

/* Thee Print style hero: portrait reel beside the headline (desktop), the
   reel itself as the full-bleed background (phones). */
.hero--reel .hero__reel { position: absolute; z-index: 1; top: 50%; right: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))); width: clamp(230px, 23vw, 330px); transform: translateY(-44%); }
.hero--reel .hero__reel::before { content: ""; position: absolute; z-index: -1; inset: 10% -34% -8% -26%; background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 45%, #000)); clip-path: var(--slant); animation: slabIn 1000ms var(--sc-ease-out) both; }
.hero--reel .hero__reel::after { content: ""; position: absolute; z-index: -2; inset: -4% -12% 30% 44%; background: rgba(255,255,255,.07); clip-path: var(--slant); }
.hero--reel .hero__reel .reel { animation: reelIn 1100ms var(--sc-ease-out) 120ms both; }
.hero--reel .hero__fg { position: relative; z-index: 2; pointer-events: none; }
.hero--reel .hero__fg > * { pointer-events: auto; }
.hero--reel .hero__ctas { width: fit-content; }
.hero--reel .hero__h { max-width: 11ch; }
@keyframes slabIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes reelIn { from { opacity: 0; transform: translateY(36px) rotate(2deg); } }
@media (max-width: 860px) {
  .hero--reel .hero__reel { inset: 0; width: auto; transform: none; z-index: 0; pointer-events: none; }
  .hero--reel .hero__reel::before { display: none; }
  .hero--reel .hero__reel::after { inset: 0; z-index: 1; clip-path: none; background: linear-gradient(0deg, rgba(13,13,15,.96) 0%, rgba(13,13,15,.9) 50%, rgba(13,13,15,.5) 76%, rgba(13,13,15,.6) 100%); }
  .hero--reel .hero__reel .reel, .hero--reel .reel__btn { height: 100%; animation: none; }
  .hero--reel .reel__frame { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .hero--reel .reel__frame::before, .hero--reel .reel__play, .hero--reel .reel__dur, .hero--reel .reel__shade { display: none; }
  .hero--reel .hero__mono { display: none; }
  .hero--reel .hero__h { max-width: 13ch; }
}

/* Hero for companies with no photo or video: an accent composition. */
.hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__slab { position: absolute; right: -6vw; top: 16%; width: min(44vw, 720px); height: 62%; background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 40%, #0D0D0F)); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); animation: slabIn 1100ms var(--sc-ease-out) both; }
.hero__slab--2 { right: calc(-6vw + min(44vw, 720px) - 3vw); top: 30%; width: min(9vw, 140px); height: 48%; background: rgba(255,255,255,.08); animation-delay: 120ms; }
.hero__slab--3 { right: 12vw; top: 74%; width: min(18vw, 280px); height: 14%; background: color-mix(in srgb, var(--red) 55%, transparent); animation-delay: 220ms; }
.hero--art .hero__mono { color: rgba(255,255,255,.14); top: 14vh; }
.hero__chips { position: absolute; right: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))); top: 24%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.hero__chips li { position: relative; isolation: isolate; padding: .62rem 1.15rem .62rem 1rem; color: #fff; font: 800 clamp(.9rem, .72rem + .5vw, 1.2rem)/1 var(--sc-font-display); letter-spacing: -.005em; white-space: nowrap; animation: chipIn 700ms var(--sc-ease-out) both; animation-delay: calc(380ms + var(--i) * 90ms); }
.hero__chips li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(13,13,15,.62); border-left: 3px solid #fff; transform: skewX(var(--skew)); }
.hero__chips li:nth-child(odd) { margin-right: 1.4rem; }
@keyframes chipIn { from { opacity: 0; transform: translateX(28px); } }
@media (max-width: 860px) {
  .hero__slab { top: 10%; height: 38%; width: 78vw; right: -18vw; opacity: .85; }
  .hero__slab--2 { right: 52vw; top: 18%; width: 16vw; height: 26%; }
  .hero__slab--3 { display: none; }
  .hero__chips { top: calc(var(--bar-h) + 1.4rem); gap: .4rem; }
  .hero__chips li { font-size: .82rem; padding: .48rem .8rem; }
  .hero__chips li:nth-child(n+4) { display: none; }
}
@media (max-height: 700px) and (max-width: 860px) { .hero__chips { display: none; } }

/* Accent art used instead of "photo needed" on the company sites. */
.art { position: relative; display: block; width: 100%; height: 100%; min-height: 200px; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle, rgba(255,255,255,.06) 1.2px, transparent 1.6px) 0 0 / 18px 18px, var(--jet); }
.art__slab { position: absolute; inset: 16% -12% 16% 40%; background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 45%, #0D0D0F)); clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); transition: transform 700ms var(--sc-ease-out); }
.art__slab--2 { inset: 34% 66% 6% -8%; background: rgba(255,255,255,.07); }
.art__mono { position: absolute; left: -4%; top: 6%; width: 92%; height: auto; color: rgba(255,255,255,.13); }
.art__label { position: absolute; left: 1.1rem; top: 1.1rem; padding: .45rem .7rem; background: rgba(13,13,15,.66); color: #fff; font: 700 .72rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; }
.svc__media .art__label { display: none; }
.svc__card:hover .art__slab, .pj__a:hover .art__slab { transform: translateX(-10px); }
.pj__media { position: relative; }
.pj__media .art--card { aspect-ratio: 4 / 3; min-height: 0; }
.news__media .art { min-height: 0; }
.brandpanel { position: relative; display: grid; place-items: center; }
.brandpanel > .art { position: absolute; inset: 0; }
.brandpanel__logo { position: relative; z-index: 2; width: 52%; display: grid; place-items: center; }
.brandpanel__logo img { width: 100%; height: auto; max-height: 160px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.brandpanel__logo.is-chip { background: #fff; padding: 1rem 1.4rem; }

/* Reel badges on cards that link to a page with a reel. */
.svc__badge { position: absolute; z-index: 1; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem .45rem .55rem; background: rgba(13,13,15,.72); color: #fff; font: 700 .7rem/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; }
.svc__badge .ico { width: .85rem; height: .85rem; color: var(--kw-dark, var(--red)); }

/* Reels in the about block and the company service list. */
.overview__reel { position: relative; isolation: isolate; width: min(320px, 78%); margin-inline: auto; padding-block: 2.2rem; }
.overview__reel-slab { position: absolute; z-index: -1; inset: 0 -38%; background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 45%, #0D0D0F)); clip-path: var(--slant); }
.svcl__reels { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: flex-start; gap: 1.2rem; padding: 2.2rem 1.2rem; }
.svcl__reels::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(255,255,255,.07) 1.2px, transparent 1.6px) 0 0 / 18px 18px, linear-gradient(135deg, color-mix(in srgb, var(--red) 92%, #fff), color-mix(in srgb, var(--red) 45%, #0D0D0F)); clip-path: var(--slant); }
.svcl__reels .reel { width: min(300px, 64%); }
.svcl__reels--2 .reel { width: min(250px, 46%); }
.svcl__reels--2 .reel:nth-child(2) { margin-top: 2.6rem; }
.svcl__reels .reel__cap { color: #fff; font-size: .92rem; }
.svcl__reels .reel__brand { color: rgba(255,255,255,.8) !important; }

/* Product / spec table instead of a photo panel. */
.spec { position: relative; isolation: isolate; overflow: hidden; align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--jet); color: #fff; padding: clamp(1.4rem, 3vw, 2.6rem); border-top: 4px solid var(--red); clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%); }
.spec__h { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 1rem; font: 900 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.15 var(--sc-font-display); letter-spacing: -.015em; }
.spec__h span { font: 800 .8rem/1 var(--sc-font-text); letter-spacing: .14em; color: var(--kw-dark, var(--red)); }
.spec__t { width: 100%; border-collapse: collapse; font-size: .94rem; }
.spec__t th, .spec__t td { text-align: left; vertical-align: top; padding: .78rem .8rem .78rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.spec__t th { width: 46%; font: 800 1rem/1.3 var(--sc-font-display); letter-spacing: -.005em; }
.spec__t td { color: var(--steel-dark); }
.spec__t tr { transition: background-color 200ms; }
.spec__t tr:hover { background: rgba(255,255,255,.04); }
.spec__t .ph { font-size: .85rem; }
.spec__mono { position: absolute; z-index: -1; right: -12%; bottom: -16%; width: 72%; height: auto; color: color-mix(in srgb, var(--red) 34%, transparent); }
.svcl__media--art { position: relative; }
.svcl__media--art .art { position: absolute; inset: 0; }
@media (max-width: 560px) { .spec__t th { width: 42%; font-size: .92rem; } .spec__t { font-size: .88rem; } }

/* Company project cards that hold a playable reel. */
.reel--fill .reel__frame { aspect-ratio: 4 / 5; border: 0; border-radius: 0; box-shadow: none; }
.reel--fill .reel__frame::before { display: none; }
.pj .pj__media .reel__poster { height: 100% !important; aspect-ratio: auto !important; }
.pj .reel--fill { margin: 0; }

/* Page heads without a photo get the accent composition too. */
.phead:not(.phead--img) { background:
  radial-gradient(55% 90% at 92% 10%, color-mix(in srgb, var(--red) 26%, transparent), transparent 70%),
  radial-gradient(circle, rgba(255,255,255,.06) 1.2px, transparent 1.6px) 0 0 / 18px 18px, var(--jet); }
.phead:not(.phead--img)::before { content: ""; position: absolute; z-index: -1; right: 8vw; top: 0; bottom: 0; width: min(16vw, 240px); background: color-mix(in srgb, var(--red) 60%, transparent); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); opacity: .55; animation: slabIn 1000ms var(--sc-ease-out) both; }

/* Modal player: landscape or portrait. */
.modal.is-open .modal__box { animation: modalIn 380ms var(--sc-ease-out) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal video { display: block; }
.modal.is-portrait .modal__box { width: min(100%, calc(78svh * 9 / 16)); }
.modal.is-portrait video { aspect-ratio: 9 / 16; max-height: 78svh; width: 100%; object-fit: contain; }
.modal__note strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------- motion polish -- */
.hero__poster { animation: heroZoom 1800ms var(--sc-ease-out) both; }
@keyframes heroZoom { from { transform: scale(1.06); } }
.sec__head[data-sc-in] .tag::before, .watch__copy[data-sc-in] .tag::before { transform: skewX(var(--skew)) scaleX(.001); transform-origin: left; transition: transform 700ms var(--sc-ease-out) 180ms; }
.sec__head.sc-in .tag::before, .watch__copy.sc-in .tag::before { transform: skewX(var(--skew)) scaleX(1); }
.sec__head[data-sc-in] .tag, .watch__copy[data-sc-in] .tag { color: transparent; transition: color 300ms 420ms; }
.sec__head.sc-in .tag, .watch__copy.sc-in .tag { color: #fff; }
.pj__a { transition: transform 420ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pj__a:hover { transform: translateY(-4px); }
  .chips li { transition: background-color 200ms, color 200ms, transform 200ms var(--sc-ease-out); }
  .chips li:hover { background: var(--jet); color: #fff; transform: translateY(-2px); }
  .ind li .ico { transition: transform 300ms var(--sc-ease-out), color 200ms; }
  .ind li:hover .ico { transform: translateY(-3px); }
  .news__media img { transition: transform 700ms var(--sc-ease-out); }
  .news__card:hover .news__media img { transform: scale(1.04); }
  .gal li img { transition: transform 700ms var(--sc-ease-out); }
  .gal li:hover img { transform: scale(1.04); }
}
/* Cross-page fade (browsers that support cross-document view transitions). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut 220ms var(--sc-ease-out) both; }
  ::view-transition-new(root) { animation: vtIn 420ms var(--sc-ease-out) both; }
  .bar { view-transition-name: bar; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .reels__item { transform: none; opacity: 1; }
  .reel__frame, .reel__play, .art__slab, .pj__a { transition: none; transform: none; }
  .hero__slab, .hero__chips li, .hero--reel .hero__reel::before, .hero--reel .hero__reel .reel, .phead:not(.phead--img)::before, .hero__poster, .modal.is-open .modal__box { animation: none; }
  .sec__head[data-sc-in] .tag::before, .watch__copy[data-sc-in] .tag::before { transform: skewX(var(--skew)); transition: none; }
  .sec__head[data-sc-in] .tag, .watch__copy[data-sc-in] .tag { color: #fff; transition: none; }
}
.svc__card .svc__num { color: var(--kw-dark, var(--red)); }
/* Typographic project card (group companies, no photo yet). */
.pj__type { position: relative; isolation: isolate; overflow: hidden; display: block; min-height: 240px; padding: 1.6rem 1.5rem 1.5rem; background: var(--jet); color: #fff; border-top: 4px solid var(--red); }
.pj__type-slab { position: absolute; z-index: -1; right: -18%; top: -10%; width: 58%; height: 70%; background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 40%, #0D0D0F)); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); opacity: .85; transition: transform 600ms var(--sc-ease-out); }
.pj__type-mono { position: absolute; z-index: -1; left: -8%; bottom: -14%; width: 80%; height: auto; color: rgba(255,255,255,.07); }
.pj__type .pj__cat { color: var(--kw-dark, var(--red)); }
.pj__type h3 { font: 900 clamp(1.35rem, 1.1rem + .8vw, 1.75rem)/1.1 var(--sc-font-display); letter-spacing: -.02em; margin: 2.6rem 0 .5rem; max-width: 18ch; }
.pj__type .pj__loc { margin: 0; color: var(--steel-dark); font-size: .9rem; }
.pj__type .pj__scope { color: rgba(255,255,255,.82) !important; margin-top: .8rem !important; font-size: .95rem; }
.pj__type:hover .pj__type-slab { transform: translateX(-12px); }
.pj--type .pj__a:hover h3 { text-decoration: none; }
@media (max-width: 560px) { .hero__chips { display: none; } }