/* Cinthamani design system v0.1 (phase 1 review build, Hexabin)
   Type: Archivo (variable width + weight) for display and text, IBM Plex Mono for technical labels.
   Colour: Cinthamani blue #000CFF (from the logo), deep navy, paper white, teal for data signals. */

:root {
  --brand: #000cff;
  --brand-700: #0009c7;
  --brand-300: #8f9cff;
  --brand-100: #e8eaff;
  --navy-950: #050b1d;
  --navy-900: #081330;
  --navy-800: #0d1c44;
  --navy-700: #16285a;
  --teal-400: #3fd3c8;
  --teal-700: #0b7f79;
  --tally: #e5484d;
  --paper: #f5f6f8;
  --white: #ffffff;
  --ink: #0a1224;
  --ink-2: #3a4459;
  --ink-3: #5b6478;
  --line: #dde1e8;
  --line-strong: #c4cad6;
  --on-dark: #ffffff;
  --on-dark-2: #a9b4cc;
  --on-dark-3: #8c98b4;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-dark-strong: rgba(255, 255, 255, 0.22);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --apple: -apple-system, BlinkMacSystemFont, "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.4vw, 4rem);
  --step-5: clamp(2.7rem, 1.9rem + 3.9vw, 5.6rem);

  --container: 1320px;
  --gutter: clamp(16px, 3vw, 32px);
  --section: clamp(72px, 9vw, 136px);
  --radius: 4px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --z-header: 50;
  --z-mega: 40;
  --z-drawer: 60;
  --z-review: 70;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.on-dark :focus-visible, .section--dark :focus-visible, .site-header :focus-visible { outline-color: var(--brand-300); }
::selection { background: var(--brand); color: var(--white); }
.skip-link { position: absolute; left: 16px; top: -48px; background: var(--brand); color: #fff; padding: 10px 14px; z-index: 100; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.05; letter-spacing: -0.022em; }
.display { font-size: var(--step-5); font-stretch: 112%; font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; }
.h1 { font-size: var(--step-4); font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.02; }
.h2 { font-size: var(--step-3); font-stretch: 108%; letter-spacing: -0.026em; line-height: 1.06; }
.h3 { font-size: var(--step-2); font-stretch: 104%; letter-spacing: -0.018em; line-height: 1.15; }
.h4 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.on-dark .lede, .section--dark .lede { color: var(--on-dark-2); }
p { margin: 0 0 1em; max-width: 68ch; }
.muted { color: var(--ink-3); }
.on-dark .muted, .section--dark .muted { color: var(--on-dark-3); }
.mono, .eyebrow, .tag, .spec dt, .node__label { font-family: var(--mono); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 22px;
}
.on-dark .eyebrow, .section--dark .eyebrow { color: var(--on-dark-2); }
.eyebrow .idx { color: var(--brand); }
.on-dark .eyebrow .idx, .section--dark .eyebrow .idx { color: var(--brand-300); }
.eyebrow .bar { width: 28px; height: 1px; background: currentColor; opacity: 0.5; }

/* Signal lines: the striped circle of the Cinthamani mark, unrolled into a rhythm of vertical lines */
.signal {
  display: inline-block; width: 34px; height: 12px; flex: none;
  background:
    linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px, currentColor 8px 12px, transparent 12px 15px,
      currentColor 15px 18px, transparent 18px 21px, currentColor 21px 23px, transparent 23px 26px,
      currentColor 26px 27.5px, transparent 27.5px 30px, currentColor 30px 31px, transparent 31px);
  color: var(--brand);
}
.on-dark .signal, .section--dark .signal { color: var(--brand-300); }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--navy-900); color: var(--on-dark); }
.section--deep { background: var(--navy-950); color: var(--on-dark); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head > :last-child { justify-self: start; }
.section-head .lede { margin: 0; }
.grid { display: grid; gap: var(--gutter); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--dark .rule { background: var(--line-dark); }
.stack-s > * + * { margin-top: 12px; }
.stack-m > * + * { margin-top: 24px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-700); }
.btn--secondary { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--secondary:hover { border-color: var(--ink); }
.on-dark .btn--secondary, .section--dark .btn--secondary, .hero .btn--secondary { border-color: var(--line-dark-strong); color: #fff; }
.on-dark .btn--secondary:hover, .section--dark .btn--secondary:hover, .hero .btn--secondary:hover { border-color: #fff; }
.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--brand-100); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--brand); cursor: pointer; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--brand-300); }

/* ---------- header ---------- */
.topbar { background: var(--navy-950); color: var(--on-dark-3); font-size: 0.8rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 16px; }
.topbar a { color: var(--on-dark-2); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__offices { display: flex; gap: 18px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar__links { display: flex; gap: 20px; }

.site-header { position: sticky; top: 0; z-index: var(--z-header); background: transparent; color: #fff; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.site-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line-dark); }
.site-header.is-solid, .site-header.is-open { background: rgba(5, 11, 29, 0.94); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.has-hero .site-header { margin-bottom: calc(var(--header-h) * -1); }
.site-header > .container { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: stretch; gap: 4px; margin-left: auto; height: 100%; }
.nav__item { position: static; display: flex; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 100%;
  font-size: 0.93rem; font-weight: 500; color: rgba(255, 255, 255, 0.86); text-decoration: none;
  background: none; border: 0; cursor: pointer; position: relative;
}
.nav__link svg { width: 14px; height: 14px; opacity: 0.7; transition: transform .2s var(--ease); }
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: #fff; }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--brand-300); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__link[aria-expanded="true"]::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { margin-left: 12px; }
.header-cta .btn { min-height: 40px; padding: 0 16px; font-size: 0.88rem; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-dark-strong); border-radius: var(--radius); background: transparent; color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 20px; height: 20px; }

/* mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega);
  background: var(--navy-950); color: var(--on-dark); border-top: 1px solid var(--line-dark);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); gap: 0; height: auto; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; padding: 40px 40px 44px 0; }
.mega__col h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.005em; }
.mega__col h3 a { text-decoration: none; display: inline-flex; gap: 10px; align-items: baseline; }
.mega__col h3 a:hover { color: var(--brand-300); }
.mega__col .idx { font-family: var(--mono); font-size: 0.7rem; color: var(--on-dark-3); font-weight: 400; }
.mega__col p { font-size: 0.85rem; color: var(--on-dark-3); margin: 0 0 12px; line-height: 1.45; }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mega__col li a { font-size: 0.88rem; color: var(--on-dark-2); text-decoration: none; }
.mega__col li a:hover { color: #fff; text-decoration: underline; }
.mega__feature { border-left: 1px solid var(--line-dark); padding: 40px 0 44px 40px; display: flex; flex-direction: column; gap: 14px; }
.mega__feature .tag { align-self: flex-start; }
.mega__feature h3 { font-size: 1.3rem; font-stretch: 108%; line-height: 1.15; }
.mega__feature p { color: var(--on-dark-2); font-size: 0.9rem; margin: 0; }
.mega__feature figure { margin: 0; border: 1px solid var(--line-dark); background: #fff; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.mega__feature figure img { max-height: 86%; width: auto; }
.mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; padding: 40px 40px 44px 0; list-style: none; margin: 0; }
.mega__list a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; color: var(--on-dark-2); font-size: 0.95rem; }
.mega__list a:hover { color: #fff; }
.mega__list a span { font-family: var(--mono); font-size: 0.72rem; color: var(--on-dark-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--navy-950); color: #fff; overflow-y: auto; padding: 16px var(--gutter) 40px; transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; height: 56px; margin-bottom: 12px; }
.drawer__head img { height: 30px; width: auto; }
.drawer details { border-bottom: 1px solid var(--line-dark); }
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 1.2rem; font-weight: 600; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 18px; height: 18px; transition: transform .2s; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.drawer li a { display: block; padding: 10px 0; color: var(--on-dark-2); text-decoration: none; }
.drawer > a.drawer__link { display: block; padding: 18px 0; font-size: 1.2rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.drawer .btn { width: 100%; margin-top: 28px; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: var(--navy-950); isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 11, 29, 0.78) 0%, rgba(5, 11, 29, 0.35) 34%, rgba(5, 11, 29, 0.55) 62%, rgba(5, 11, 29, 0.97) 100%),
    linear-gradient(90deg, rgba(5, 11, 29, 0.85) 0%, rgba(5, 11, 29, 0.25) 62%, rgba(5, 11, 29, 0.1) 100%); }
.hero__body { min-height: min(92vh, 900px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--header-h) + 64px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero__body--short { min-height: min(78vh, 760px); }
.hero h1 { max-width: 15ch; }
.hero .lede { color: rgba(255, 255, 255, 0.82); margin: 28px 0 36px; max-width: 56ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--line-dark-strong); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); }
.onair { display: inline-flex; align-items: center; gap: 8px; }
.onair::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.22); }
.crumbs { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: 0.5; }
.section--paper .crumbs, .hero--light .crumbs, .hero--light .crumbs a { color: var(--ink-3); }

/* vertical index strip under the home hero */
.vstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-dark-strong); margin-top: clamp(40px, 6vw, 64px); }
.vstrip a { padding: 18px 16px 4px 0; text-decoration: none; color: var(--on-dark-2); border-right: 1px solid var(--line-dark); padding-left: 16px; transition: color .2s; }
.vstrip a:first-child { padding-left: 0; }
.vstrip a:last-child { border-right: 0; }
.vstrip a:hover { color: #fff; }
.vstrip .idx { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--brand-300); margin-bottom: 6px; }
.vstrip strong { font-weight: 600; font-size: 0.95rem; color: #fff; display: block; line-height: 1.3; }

/* light product hero */
.hero--light { background: var(--paper); color: var(--ink); }
.hero--light::before { display: none; }
.hero--light .lede { color: var(--ink-2); }
.hero--light .hero__body { min-height: auto; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 96px); }
.hero--light .crumbs span { color: var(--ink-3); }
.hero.hero--light .btn--secondary { border-color: var(--line-strong); color: var(--ink); }
.hero.hero--light .btn--secondary:hover { border-color: var(--ink); }
.path .tag { align-self: flex-start; }
.products--compact .product { min-height: 0; }
.product-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.product-hero figure { margin: 0; background: #fff; border: 1px solid var(--line); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.product-hero figure img { width: 88%; mix-blend-mode: multiply; }
.product-hero figcaption { position: absolute; left: 16px; bottom: 12px; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.has-light-hero .site-header { background: rgba(5, 11, 29, 0.97); }

/* ---------- credentials / metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.metric { padding: 28px 24px 8px 0; border-right: 1px solid var(--line); padding-left: 24px; }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric__value { font-size: var(--step-4); font-stretch: 112%; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.metric__value small { font-size: 0.5em; letter-spacing: -0.01em; color: var(--brand); margin-left: 2px; }
.metric__label { margin-top: 14px; font-size: 0.92rem; color: var(--ink-2); max-width: 26ch; }
.section--dark .metrics, .section--dark .metric { border-color: var(--line-dark); }
.section--dark .metric__value { color: #fff; }
.section--dark .metric__label { color: var(--on-dark-2); }

/* ---------- vertical tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { position: relative; background: #fff; display: flex; flex-direction: column; min-height: 520px; text-decoration: none; color: var(--ink); overflow: hidden; cursor: pointer; }
.tile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-900); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.035); }
.tile__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.tile__idx { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.1em; margin-bottom: 14px; }
.tile h3 { font-size: 1.55rem; font-stretch: 106%; letter-spacing: -0.02em; margin-bottom: 10px; }
.tile p { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 18px; }
.tile ul { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tile li { font-size: 0.76rem; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.tile__go { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); transition: background-color .2s, color .2s; }
.tile__go svg { width: 18px; height: 18px; }
.tile:hover .tile__go { background: var(--brand); color: #fff; }
.tile--apple .tile__media { background: #f5f5f7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-family: var(--apple); }
.tile--apple .apple-line { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: -0.03em; color: #1d1d1f; }
.tile--apple .apple-sub { font-size: 0.85rem; color: #6e6e73; letter-spacing: 0; }
.tile--playout .tile__media { background: var(--navy-950); }
/* SMPTE-style 75% colour bars, drawn in CSS (no third-party test card or channel branding) */
.bars { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 14.28% 28.57%, #00c0c0 28.57% 42.85%, #00c000 42.85% 57.14%, #c000c0 57.14% 71.42%, #c00000 71.42% 85.71%, #0000c0 85.71%) top / 100% 67% no-repeat,
    linear-gradient(90deg, #0000c0 0 14.28%, #111 14.28% 28.57%, #c000c0 28.57% 42.85%, #111 42.85% 57.14%, #00c0c0 57.14% 71.42%, #111 71.42% 85.71%, #c0c0c0 85.71%) 0 67% / 100% 8% no-repeat,
    linear-gradient(90deg, #00214c 0 17.8%, #fff 17.8% 35.7%, #32006a 35.7% 53.5%, #131313 53.5% 75%, #090909 75% 80%, #131313 80% 85%, #1d1d1d 85% 90%, #131313 90%) bottom / 100% 25% no-repeat;
  transition: transform .6s var(--ease); }
.tile:hover .bars { transform: scale(1.035); }
.bars__label { position: absolute; left: 16px; bottom: calc(25% + 10px); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: #fff; background: rgba(5, 11, 29, 0.78); padding: 5px 8px; display: inline-flex; align-items: center; gap: 8px; }
.bars__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); }

/* "since" panel: typographic stand-in until Cinthamani's own team photography exists */
.since { position: relative; background: var(--navy-900); color: #fff; aspect-ratio: 4 / 3; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.since::before { content: ""; position: absolute; inset: 0; opacity: 0.16;
  background: repeating-linear-gradient(90deg, var(--brand-300) 0 2px, transparent 2px 22px); mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); }
.since__year { position: relative; font-size: clamp(5rem, 12vw, 10rem); font-weight: 600; font-stretch: 118%; letter-spacing: -0.05em; line-height: 0.85; }
.since__rows { position: relative; display: grid; border-top: 1px solid var(--line-dark-strong); }
.since__rows span { padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-2); }
.since__note { position: relative; font-family: var(--mono); font-size: 0.68rem; color: var(--on-dark-3); letter-spacing: 0.04em; }
.tile--feature { grid-column: span 1; }

/* ---------- spotlight / split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.figure { margin: 0; position: relative; }
.figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure figcaption { margin-top: 12px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.06em; }
.section--dark .figure figcaption { color: var(--on-dark-3); }
.checklist { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.97rem; }
.checklist svg { width: 18px; height: 18px; color: var(--brand); margin-top: 3px; }
.section--dark .checklist, .section--dark .checklist li { border-color: var(--line-dark); }
.section--dark .checklist svg { color: var(--teal-400); }

/* chips (feature list) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; padding: 0; list-style: none; }
.chips li { font-size: 0.82rem; padding: 7px 12px; border: 1px solid var(--line-dark-strong); border-radius: var(--radius); color: var(--on-dark-2); }
.section:not(.section--dark):not(.section--deep) .chips li { border-color: var(--line); color: var(--ink-2); }
.tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border: 1px solid currentColor; border-radius: 2px; color: var(--brand); }
.section--dark .tag, .mega .tag { color: var(--teal-400); }

/* ---------- product cards ---------- */
.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); background: #fff; min-height: 300px; transition: background-color .2s; cursor: pointer; }
.product:hover { background: var(--paper); }
.product__role { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-700); }
.product h3 { font-size: 1.35rem; font-stretch: 106%; letter-spacing: -0.02em; }
.product p { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.product .link-arrow { margin-top: auto; font-size: 0.9rem; }
.section--dark .products, .section--dark .product { border-color: var(--line-dark); background: transparent; color: #fff; }
.section--dark .product:hover { background: rgba(255, 255, 255, 0.03); }
.section--dark .product p { color: var(--on-dark-2); }
.section--dark .product__role { color: var(--teal-400); }

/* ---------- workflow diagram ---------- */
.workflow { border: 1px solid var(--line-dark); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)); padding: clamp(20px, 3vw, 36px); position: relative; }
.workflow--light { border-color: var(--line); background: #fff; }
.workflow__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); }
.workflow--light .workflow__grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); opacity: 0.6; }
.flow { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
.node { position: relative; padding: 18px 18px 20px; margin-right: 34px; border: 1px solid var(--line-dark-strong); background: var(--navy-950); display: flex; flex-direction: column; gap: 8px; min-height: 196px; }
.workflow--light .node { background: #fff; border-color: var(--line-strong); }
.node:last-child { margin-right: 0; }
.node::after { /* connector */
  content: ""; position: absolute; top: 50%; right: -35px; width: 34px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--teal-400) 0 6px, transparent 6px 10px); background-size: 20px 1px;
  animation: signal-flow 1.2s linear infinite;
}
.node::before { content: ""; position: absolute; top: calc(50% - 3px); right: -5px; width: 6px; height: 6px; border-top: 1px solid var(--teal-400); border-right: 1px solid var(--teal-400); transform: rotate(45deg); z-index: 1; }
.node:last-child::after, .node:last-child::before { display: none; }
.workflow--light .node::after { background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 10px); background-size: 20px 1px; }
.workflow--light .node::before { border-color: var(--brand); }
@keyframes signal-flow { to { background-position: 20px 0; } }
.node__label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-400); }
.workflow--light .node__label { color: var(--teal-700); }
.node h4 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.node p { font-size: 0.82rem; color: var(--on-dark-2); margin: 0; line-height: 1.45; }
.workflow--light .node p { color: var(--ink-2); }
.node .tech { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-dark); font-family: var(--mono); font-size: 0.68rem; color: var(--on-dark-3); letter-spacing: 0.04em; line-height: 1.5; }
.workflow--light .node .tech { border-color: var(--line); color: var(--ink-3); }
.node--key { border-color: var(--brand-300); box-shadow: inset 0 0 0 1px var(--brand-300); }
.workflow--light .node--key { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.workflow__caption { margin-top: 20px; font-size: 0.82rem; color: var(--on-dark-3); display: flex; gap: 10px; align-items: baseline; }
.workflow--light .workflow__caption { color: var(--ink-3); }

/* tiers stack inside a node */
.tiers { display: grid; gap: 6px; margin-top: 4px; }
.tiers span { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 0.68rem; padding: 6px 8px; border: 1px solid var(--line-dark); color: var(--on-dark-2); }
.tiers span b { font-weight: 500; color: #fff; }
.tiers span:nth-child(1) { border-left: 3px solid #ff7a59; }
.tiers span:nth-child(2) { border-left: 3px solid #f2c94c; }
.tiers span:nth-child(3) { border-left: 3px solid var(--teal-400); }
.tiers span:nth-child(4) { border-left: 3px solid var(--brand-300); }

/* tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-dark); margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; padding: 14px 20px 14px 0; margin-right: 24px; color: var(--on-dark-3); cursor: pointer; font-weight: 500; font-size: 0.95rem; position: relative; white-space: nowrap; }
.tab .idx { font-family: var(--mono); font-size: 0.7rem; margin-right: 8px; }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-300); }
.tabpanel[hidden] { display: none; }

/* ---------- capability index ---------- */
.capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cap { padding: 26px 26px 30px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.cap:not(:nth-child(4n)) { border-right: 1px solid var(--line); }
.cap:not(:nth-child(4n+1)) { padding-left: 26px; }
.cap__n { font-family: var(--mono); font-size: 0.7rem; color: var(--brand); letter-spacing: 0.1em; }
.cap h3 { font-size: 1.12rem; letter-spacing: -0.012em; line-height: 1.25; }
.cap p { font-size: 0.88rem; color: var(--ink-2); margin: 0; }
.cap svg { width: 26px; height: 26px; color: var(--ink); stroke-width: 1.4; }

/* ---------- process ---------- */
.process { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); counter-reset: step; border-top: 1px solid var(--line-dark); }
.process li { list-style: none; padding: 24px 18px 0 0; position: relative; }
.process li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--brand-300); margin-bottom: 14px; }
.process li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--brand-300); }
.process h4 { font-size: 1.05rem; margin-bottom: 8px; }
.process p { font-size: 0.86rem; color: var(--on-dark-2); margin: 0; }
.section:not(.section--dark):not(.section--deep) .process { border-color: var(--line); }
.section:not(.section--dark):not(.section--deep) .process p { color: var(--ink-2); }
.section:not(.section--dark):not(.section--deep) .process li::before { color: var(--brand); }
.section:not(.section--dark):not(.section--deep) .process li::after { background: var(--brand); }

/* ---------- cases ---------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.case { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.case figure { margin: 0 0 20px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-900); }
.case figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.case:hover figure img { transform: scale(1.03); }
.case__meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: flex; gap: 14px; }
.case h3 { font-size: 1.3rem; letter-spacing: -0.018em; line-height: 1.2; margin-bottom: 10px; }
.case p { font-size: 0.93rem; color: var(--ink-2); }

/* ---------- partners ---------- */
.partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.partner { aspect-ratio: 16 / 9; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; place-items: center; padding: 16px; text-align: center; }
.partner span { font-weight: 600; font-stretch: 112%; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink-3); transition: color .2s; }
.partner:hover span { color: var(--ink); }
.partner small { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: 4px; font-stretch: 100%; }

/* ---------- specs ---------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.spec-table caption { text-align: left; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.06em; caption-side: bottom; padding-top: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table thead th { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--line-strong); }
.spec-table tbody th { font-weight: 600; }
.spec-table td { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* family cards */
.family { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.family__item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.family__item figure { margin: 0 0 6px; aspect-ratio: 419 / 300; display: grid; place-items: center; }
.family__item figure img { mix-blend-mode: multiply; }
.family__class { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-700); }
.family__item h3 { font-size: 1.3rem; font-stretch: 106%; }
.family__item p { font-size: 0.88rem; color: var(--ink-2); margin: 0; }
.family__item dl { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.84rem; }
.family__item dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.family__item dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* paths (two pathways) */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.path { background: var(--navy-900); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.path h3 { font-size: var(--step-2); font-stretch: 108%; }
.path p { color: var(--on-dark-2); margin: 0; }
.path ul { margin: 8px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.path li { padding-left: 18px; position: relative; color: var(--on-dark-2); font-size: 0.94rem; }
.path li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 1px; background: var(--teal-400); }
.path .btn { align-self: flex-start; margin-top: auto; }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); color: var(--brand); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 0 24px; color: var(--ink-2); max-width: 75ch; }

/* ---------- CTA + form ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.contacts { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--line-dark); }
.contacts div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); font-size: 0.94rem; }
.contacts dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); padding-top: 3px; }
.contacts dd { margin: 0; color: var(--on-dark-2); }
.contacts a { color: #fff; text-decoration: none; }
.contacts a:hover { text-decoration: underline; }
.form { background: #fff; color: var(--ink); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius); display: grid; gap: 18px; }
.form h3 { font-size: 1.4rem; font-stretch: 106%; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.field .hint { font-size: 0.78rem; color: var(--ink-3); }
.interest { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.interest legend { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.interest label { cursor: pointer; }
.interest input { position: absolute; opacity: 0; pointer-events: none; }
.interest span { display: inline-block; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 0.84rem; transition: all .15s; }
.interest input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.interest input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.form .consent { font-size: 0.78rem; color: var(--ink-3); margin: 0; }
.form .btn { justify-self: start; }
.form__status { font-size: 0.88rem; color: var(--teal-700); min-height: 1.2em; margin: 0; }

/* ---------- footer ---------- */
.footer { background: var(--navy-950); color: var(--on-dark-2); padding: 80px 0 32px; font-size: 0.9rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); }
.footer__brand img { height: 34px; width: auto; margin-bottom: 22px; }
.footer__brand p { color: var(--on-dark-3); font-size: 0.88rem; max-width: 34ch; }
.footer h4 { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer a { color: var(--on-dark-2); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line-dark); }
.footer__offices h5 { margin: 0 0 8px; font-size: 0.95rem; color: #fff; font-weight: 600; }
.footer__offices p { margin: 0; font-size: 0.86rem; color: var(--on-dark-3); }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 28px; font-size: 0.8rem; color: var(--on-dark-3); flex-wrap: wrap; }

/* ---------- index hero (sub-pages): navy, outlined practice number, signal lines ---------- */
.hero--index { background: var(--navy-950); }
.hero--index::before { background: radial-gradient(120% 90% at 85% 10%, rgba(0, 12, 255, 0.28) 0%, rgba(5, 11, 29, 0) 55%); }
.hero--index .hero__body { min-height: auto; padding-top: calc(var(--header-h) + clamp(56px, 7vw, 96px)); padding-bottom: clamp(56px, 7vw, 96px); }
.hero--index h1 { max-width: 18ch; }
.hero__index { position: absolute; right: var(--gutter); bottom: -0.16em; font-size: clamp(9rem, 22vw, 19rem); font-weight: 700; font-stretch: 125%; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(143, 156, 255, 0.28); pointer-events: none; z-index: -1; letter-spacing: -0.04em; }
.hero__lines { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: -1; opacity: 0.14; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--brand-300) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(90deg, transparent, #000 70%), linear-gradient(0deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); }
.related { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.chiplinks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.chiplinks a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: border-color .2s, background-color .2s; }
.chiplinks a:hover { border-color: var(--brand); background: var(--brand-100); }
.chiplinks svg { width: 14px; height: 14px; color: var(--brand); }
.sibs { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
.sibs a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; transition: color .2s, padding .25s var(--ease); }
.sibs a:hover { color: var(--brand); padding-left: 6px; }
.sibs a svg { width: 16px; height: 16px; color: var(--ink-3); }
.sibs a[aria-current="page"] { color: var(--brand); }
.pmark { position: relative; background: #fff; border: 1px solid var(--line); aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 3vw, 40px); overflow: hidden; }
.pmark::after { content: ""; position: absolute; inset: 0 0 0 40%; background: repeating-linear-gradient(90deg, var(--brand) 0 2px, transparent 2px 18px); opacity: 0.12; mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); }
.pmark__role { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-700); position: relative; z-index: 1; }
.pmark__name { position: relative; z-index: 1; font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 600; font-stretch: 118%; letter-spacing: -0.04em; line-height: 0.95; }
.pmark__maker { position: relative; z-index: 1; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); }
.article { max-width: 72ch; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; }
.article h2 { font-size: var(--step-2); font-stretch: 104%; margin: 2.2em 0 0.6em; }
.article p, .article li { color: var(--ink-2); }
.article ul { padding-left: 1.2em; }
.article blockquote { margin: 2em 0; padding: 0 0 0 22px; border-left: 3px solid var(--brand); font-size: 1.25rem; color: var(--ink); }
.article .meta-row { margin: 0 0 32px; }
.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.office { border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.office h3 { font-size: 1.4rem; font-stretch: 106%; }
.office p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.office dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.9rem; }
.office dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.office dd { margin: 0; }
.office a { color: var(--brand); text-decoration: none; }
.dir-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; }
.dir-tools input { min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 14px; width: min(360px, 100%); }
.dir-tools button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; font-size: 0.84rem; cursor: pointer; }
.dir-tools button[aria-pressed="true"] { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dir-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; background: #fff; text-decoration: none; color: inherit; scroll-margin-top: 120px; }
.dir-item:target { background: var(--brand-100); }
.dir-item strong { font-size: 1.1rem; font-stretch: 106%; }
.dir-item span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-700); }
.dir-item p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.dir-item.is-featured { box-shadow: inset 3px 0 0 var(--brand); }
.dir-item[hidden] { display: none; }
@media (max-width: 1024px) { .related, .offices { grid-template-columns: 1fr; } .directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .directory { grid-template-columns: 1fr; } }

/* ---------- playout console illustration (Channel Magick page) ---------- */
.pmock { background: #090d18; border: 1px solid var(--line-dark-strong); border-radius: 10px; overflow: hidden; font-family: var(--mono); color: var(--on-dark-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85); font-size: 0.72rem; }
.pmock__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-dark); background: #0d1324; letter-spacing: 0.08em; text-transform: uppercase; }
.pmock__bar b { color: #fff; font-weight: 500; }
.pmock__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); }
.pmock__list { border-right: 1px solid var(--line-dark); }
.pmock__row { display: grid; grid-template-columns: 62px 1fr 52px; gap: 8px; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background-color .4s, color .4s; }
.pmock__row span:last-child { text-align: right; }
.pmock__row.is-on { background: rgba(0, 12, 255, 0.28); color: #fff; box-shadow: inset 3px 0 0 var(--tally); }
.pmock__row.is-next { color: #fff; }
.pmock__pgm { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pmock__pgm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pmock__bug { position: absolute; top: 8%; right: 4%; background: rgba(0, 12, 255, 0.9); color: #fff; padding: 4px 8px; font-weight: 500; letter-spacing: 0.08em; transition: opacity .4s; }
.pmock__clock { position: absolute; top: 8%; left: 4%; background: rgba(5, 11, 29, 0.78); color: #fff; padding: 4px 8px; transition: opacity .4s; }
.pmock__lower { position: absolute; left: 4%; bottom: 20%; background: #fff; color: var(--navy-950); padding: 6px 12px; font-family: var(--font); font-weight: 600; font-size: 0.82rem; box-shadow: inset 4px 0 0 var(--tally); transition: opacity .4s, transform .4s; }
.pmock__ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: var(--navy-950); display: flex; align-items: center; overflow: hidden; border-top: 2px solid var(--brand); transition: opacity .4s; }
.pmock__ticker b { flex: none; background: var(--tally); color: #fff; height: 100%; display: flex; align-items: center; padding: 0 10px; font-weight: 500; z-index: 1; }
.pmock__ticker span { white-space: nowrap; padding-left: 100%; color: #fff; animation: ticker 22s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.pmock__layers { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line-dark); background: #0d1324; }
.pmock__layers span { padding: 4px 8px; border: 1px solid var(--line-dark-strong); border-radius: 3px; transition: all .3s; }
.pmock__layers span.on { border-color: var(--teal-400); color: var(--teal-400); }
.pmock.l-bug-off .pmock__bug, .pmock.l-clock-off .pmock__clock, .pmock.l-ticker-off .pmock__ticker { opacity: 0; }
.pmock.l-lower-off .pmock__lower { opacity: 0; transform: translateX(-12px); }
.pmock__cap { margin-top: 12px; font-family: var(--mono); font-size: 0.7rem; color: var(--on-dark-3); }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 18%; }
.compare .yes { color: var(--teal-700); font-weight: 600; }
.compare .no { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .pmock__ticker span { animation: none; padding-left: 12px; } }
@media (max-width: 720px) { .pmock__grid { grid-template-columns: 1fr; } .pmock__list { border-right: 0; border-top: 1px solid var(--line-dark); order: 2; } }

/* ---------- sitemap / review documents ---------- */
.tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tree__col { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 26px 30px; scroll-margin-top: calc(var(--header-h) + 24px); }
.tree__col:target { background: var(--brand-100); }
.tree__col h3 { font-size: 1.15rem; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.tree__url { font-family: var(--mono); font-size: 0.72rem; color: var(--teal-700); letter-spacing: 0.02em; word-break: break-all; }
.tree__col > p { font-size: 0.88rem; color: var(--ink-2); margin: 10px 0 14px; }
.tree ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tree li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; }
.tree li span:last-child { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); text-align: right; white-space: nowrap; }
.status { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; white-space: nowrap; }
.status--done { background: var(--brand); color: #fff; }
.status--p2 { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
.status--private { background: var(--navy-900); color: #fff; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--ink-3); margin-top: 12px; }
.meta-row b { color: var(--ink-2); font-weight: 600; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.doc-table th, .doc-table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table thead th { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom-color: var(--line-strong); }
.doc-table td code, .doc-table th code { font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }
.pill { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; }
.pill--crit { background: #fde2e2; color: #8a1c1c; }
.pill--high { background: #fff1d6; color: #7a4b00; }
.pill--med { background: var(--brand-100); color: var(--brand-700); }
.pill--ok { background: #dff5f2; color: var(--teal-700); }
@media (max-width: 1024px) { .tree { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tree { grid-template-columns: 1fr; } .doc-table { font-size: 0.82rem; } }

/* ---------- review annotations (design review only) ---------- */
[data-verify] { position: relative; }
html.review [data-verify] { outline: 1px dashed #d97706; outline-offset: 3px; }
html.review [data-verify]::after {
  content: "Verify: " attr(data-verify); position: absolute; left: 0; top: calc(100% + 6px); z-index: 5;
  font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.02em; text-transform: none; color: #1a1300; background: #fbbf24;
  padding: 4px 7px; border-radius: 2px; width: max-content; max-width: 280px; white-space: normal; pointer-events: none;
}
.review-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: var(--z-review); display: inline-flex; align-items: center; gap: 10px;
  background: #111827; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 10px 16px 10px 12px;
  font: 500 0.78rem/1 var(--mono); letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.review-toggle i { width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; display: inline-block; }
html.review .review-toggle { background: #fbbf24; color: #1a1300; }
html.review .review-toggle i { background: #1a1300; }

/* ---------- motion layer (GSAP + Lenis + View Transitions; see assets/js/motion.js) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .56s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.site-header { view-transition-name: site-header; transition: background-color .25s var(--ease), transform .45s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* home hero: broadcast level meters drawn from the logo's stripes */
.hero__signal { position: absolute; right: 0; bottom: 0; top: 0; width: min(38vw, 560px); z-index: -1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; padding-right: var(--gutter); pointer-events: none; opacity: 0.8;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-composite: intersect; }
.hero__signal i { display: block; height: 78%; background: linear-gradient(0deg, var(--brand) 0%, var(--brand-300) 60%, rgba(143, 156, 255, 0.15) 100%); transform-origin: 50% 100%; border-radius: 1px; }
.hero__tc { position: absolute; top: calc(var(--header-h) + 22px); right: var(--gutter); display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--on-dark-2); text-transform: uppercase; z-index: 2; }
.hero__tc [data-tc] { color: #fff; font-variant-numeric: tabular-nums; min-width: 11ch; }
@media (max-width: 720px) { .hero__signal { width: 70vw; opacity: 0.35; } .hero__tc { display: none; } }

/* workflow signal pulse */
.node { transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); }
.node.is-live { border-color: var(--teal-400); box-shadow: 0 0 0 1px var(--teal-400), 0 18px 40px -24px rgba(63, 211, 200, 0.55); }
.workflow--light .node.is-live { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 18px 40px -24px rgba(0, 12, 255, 0.35); }
.node.is-live .node__label::after { content: " \25CF"; color: var(--tally); }

/* ---------- partner logos (one-colour masks; colour = currentColor) ---------- */
.plogo { display: inline-block; flex: none; width: var(--lw); height: var(--lh); background-color: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: middle; }
.partner { position: relative; color: var(--ink-3); transition: color .25s var(--ease), background-color .25s var(--ease); flex-direction: column; gap: 10px; }
.partner:hover { color: var(--ink); background: #fff; }
.partner .plogo { transition: transform .35s var(--ease); }
.partner:hover .plogo { transform: scale(1.06); }
.partner small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.partner:hover small { opacity: 1; transform: none; }
.partner--featured { color: var(--navy-900); }
.partner--featured::before { content: "Featured"; position: absolute; top: 10px; left: 12px; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
/* logo marquee */
.marquee { position: relative; overflow: hidden; padding: 30px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 72px; width: max-content; animation: marquee 52s linear infinite; color: var(--ink-3); }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track .plogo { transition: color .25s; }
.marquee__track .plogo:hover { color: var(--brand); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 28px; } }
.dir-item .plogo { color: var(--ink); margin-bottom: 12px; transition: color .25s var(--ease); }
.dir-item:hover .plogo { color: var(--brand); }
.pmark__logo { position: relative; z-index: 1; color: var(--navy-900); }
.crumb-logo { display: flex; color: var(--ink); margin-bottom: 18px; }

/* ---------- micro-interactions (site-wide) ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--brand-300) 60%, var(--teal-400)); }
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%); transform: translateX(-120%); }
.btn--primary:hover::after { transform: translateX(120%); transition: transform .8s ease; }
.btn:active { transform: scale(0.97); }
.btn.is-busy { pointer-events: none; opacity: 0.85; }
.btn.is-busy svg { animation: btn-spin .8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn.is-done { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.link-arrow { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.tile__go svg { transition: transform .3s var(--ease); }
.tile:hover .tile__go svg { transform: translate(2px, -2px); }
.node:hover { transform: translateY(-3px); }
.hero .eyebrow .signal { animation: sig-breathe 2.8s ease-in-out infinite; }
@keyframes sig-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* cursor spotlight on cards (motion.js sets --mx / --my) */
.product, .dir-item, .family__item, .office, .cap, .tile, .path, .case figure { --mx: 50%; --my: 50%; }
.product, .dir-item, .family__item, .office, .cap, .path { position: relative; }
.product::after, .dir-item::after, .family__item::after, .office::after, .cap::after, .tile::after, .path::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(0, 12, 255, 0.07), transparent 62%); }
.section--dark .product::after, .section--dark .cap::after, .path::after { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(143, 156, 255, 0.16), transparent 62%); }
.product:hover::after, .dir-item:hover::after, .family__item:hover::after, .office:hover::after, .cap:hover::after, .tile:hover::after, .path:hover::after { opacity: 1; }
.tile { transition: transform .25s ease-out, box-shadow .3s; }
.tile:hover { box-shadow: 0 24px 50px -30px rgba(5, 11, 29, 0.45); z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero .eyebrow .signal { animation: none; } .btn--primary:hover::after { transition: none; } }

/* split-text line masks (SplitText mask option adds wrappers; keep descenders visible) */
.split-line { padding-bottom: 0.06em; margin-bottom: -0.06em; }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .node::after { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cap:not(:nth-child(4n)) { border-right: 0; }
  .cap:not(:nth-child(4n+1)) { padding-left: 0; }
  .cap:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
  .cap:not(:nth-child(3n+1)) { padding-left: 26px; }
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; }
  .node { margin-right: 0; min-height: 0; }
  .node::after { top: auto; bottom: -27px; right: auto; left: 28px; width: 1px; height: 26px; background: repeating-linear-gradient(180deg, var(--teal-400) 0 6px, transparent 6px 10px); background-size: 1px 20px; animation-name: signal-flow-v; }
  .workflow--light .node::after { background: repeating-linear-gradient(180deg, var(--brand) 0 6px, transparent 6px 10px); background-size: 1px 20px; }
  .node::before { top: auto; bottom: -6px; right: auto; left: 25px; transform: rotate(135deg); }
  @keyframes signal-flow-v { to { background-position: 0 20px; } }
}
@media (max-width: 1024px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .topbar__offices { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vstrip a { border-bottom: 1px solid var(--line-dark); padding-bottom: 14px; }
  .vstrip a:nth-child(3n) { border-right: 0; }
  .vstrip a:nth-child(3n+1) { padding-left: 0; }
  .split, .split--wide, .cta, .product-hero { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3) { padding-left: 0; }
  .metric { border-bottom: 1px solid var(--line); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .cases { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tiles, .cases, .paths, .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .products, .family, .capabilities { grid-template-columns: 1fr; }
  .cap, .cap:not(:nth-child(3n+1)) { padding-left: 0; border-right: 0 !important; }
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vstrip a:nth-child(3n) { border-right: 1px solid var(--line-dark); }
  .vstrip a:nth-child(2n) { border-right: 0; }
  .vstrip a:nth-child(3n+1) { padding-left: 16px; }
  .vstrip a:nth-child(2n+1) { padding-left: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .footer__top, .footer__offices { grid-template-columns: 1fr 1fr; }
  .topbar { display: none; }
  .review-toggle { left: auto; right: 12px; bottom: 12px; }
  .hero__body { min-height: 88vh; }
  .contacts div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 420px) {
  .footer__top, .footer__offices { grid-template-columns: 1fr; }
  .metric { padding-left: 14px; }
  .metric:nth-child(odd) { padding-left: 0; }
  .metric__value { font-size: 2.2rem; }
  .brand img { height: 28px; }
}

.footer__offices--one { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__offices a { color: var(--on-dark-2); }
.offices--one { grid-template-columns: minmax(0, 560px); }

/* ---------- responsive polish (phones and tablets) ---------- */
/* These two came after the media queries above, so they kept three columns on phones. */
@media (max-width: 720px) {
  .footer__offices--one, .offices--one { grid-template-columns: 1fr; }
  .footer__offices--one > * { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  /* product cards: no desktop minimum height, so no empty gap above the link */
  .product { min-height: 0; padding: 22px 20px; gap: 12px; }
  .product .link-arrow { margin-top: 8px; }
  /* partner grid: cells size to their logo; the "Featured" tag no longer sits on the logo */
  .partner { aspect-ratio: auto; min-height: 104px; padding: 16px 12px; }
  .partner--featured { padding-top: 34px; }
  .partner--featured::before { top: 12px; left: 14px; }
  /* tab rows scroll sideways with a fade, so a cut-off tab reads as "more this way" */
  .tabs { margin-right: -16px; padding-right: 24px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .tab { scroll-snap-align: start; min-height: 44px; }
  /* the Apple card's picture area keeps a height of its own */
  .tile--apple .tile__media { min-height: 200px; }
}
@media (max-width: 1024px) {
  /* touch targets of at least 44px for navigation-type links */
  .footer li a, .footer__top a, .footer__offices a { display: inline-block; padding: 10px 0; }
  .crumbs a { display: inline-block; padding: 12px 0; }
  .link-arrow { min-height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 720px) {
  /* labels under 12px are hard to read on a phone */
  .bars__label, .node__label, .node .tech, .product__role, .partner small, .contacts dt, .mega h4 { font-size: 0.75rem; }
}
/* Reduced motion shows the logo strip as a wrapped list, so the copy kept for the endless loop must not show twice. */
@media (prefers-reduced-motion: reduce) { .marquee__track > [aria-hidden="true"] { display: none !important; } }

.footer__credit { margin: 14px 0 0; font-size: 0.78rem; color: var(--on-dark-3); }
.footer__credit a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; }
.footer__credit a:hover { color: #fff; }

/* Partner grid on tablets too: cells size to their logo and the "Featured" tag keeps clear of it. */
@media (max-width: 1180px) {
  .partner { aspect-ratio: auto; min-height: 104px; padding: 16px 12px; }
  .partner--featured { padding-top: 34px; }
  .partner--featured::before { top: 12px; left: 14px; }
  .bars__label, .node__label, .node .tech, .product__role, .partner small, .contacts dt, .mega h4, .footer h4 { font-size: 0.75rem; }
}
.drawer { padding-inline: 20px; }

@media (max-width: 1180px) {
  .topbar a { display: inline-block; padding: 12px 4px; }
  .ap-subnav__title, .ap-link, .ap-pill { min-height: 44px; display: inline-flex; align-items: center; }
}