/* =============================================================================================
   Pralovix Solutions - corporate site.

   Deliberately NOT the BookMyPlay11 design system. Pralovix is the company; BookMyPlay11 is one
   of its products, and a services buyer landing here should not arrive on a sports app's palette.
   Hence the logo's own navy and blue, with its lime as the one accent: the conventional, credible
   register for a B2B technology firm, which is the right thing to be conventional about. The
   three values were measured from the artwork (tools/logo.mjs prints them), not picked by eye.

   Plain CSS, no preprocessor. Whoever edits this next should not need a toolchain to change a
   colour. Tokens at the top; everything below reads from them.
   ============================================================================================= */

:root {
  --ink-900: #0b1526;
  --ink-700: #1f2d40;
  --ink-600: #3f4e63;
  --ink-400: #6c7b90;
  --line: #e3e9f0;
  --line-strong: #cbd5e1;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --surface-3: #eef3f8;

  --navy-900: #061233;
  --navy-800: #0b2358;
  --navy-700: #113275;

  --brand-700: #0644a0;
  --brand-600: #0a56c2;
  --brand-500: #1c6fe3;
  --brand-100: #d9e6fb;
  --brand-50: #edf3fd;

  /* The logo's lime. -400 sits on navy; -700 is the same hue darkened until it clears AA on
     white, for icons and ticks - the lime itself is too light to read on a white page. */
  --accent-500: #79c03d;
  --accent-400: #8ccf55;
  --accent-700: #3f7f16;
  --accent-100: #e9f5dc;

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgb(11 21 38 / 6%);
  --shadow: 0 1px 2px rgb(11 21 38 / 5%), 0 14px 34px -18px rgb(11 21 38 / 28%);
  --shadow-lg: 0 30px 70px -30px rgb(11 21 38 / 50%);

  --wrap: 1140px;
  --gutter: 20px;
  --head-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Light only, on purpose. A phone in dark mode must still get the white site, not a browser
     guess at an inverted palette; every surface below is set explicitly for the same reason. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-600);
  font: 400 16.5px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-600); }
strong, b { color: var(--ink-900); font-weight: 650; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Every icon on the site is one <use> into the sprite in layout.html. Stroke settings live here,
   once, and cascade into the referenced symbol - so an icon is coloured with `color`, like text. */
.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Keyboard users get a visible ring; mouse users do not get one on every click. */
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }

/* --- Type ---------------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--ink-900); margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 20px; }
h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 750; margin-bottom: 14px; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 700; margin-bottom: 8px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 18.5px; line-height: 1.6; color: var(--ink-600); max-width: 60ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-600); margin: 0 0 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.muted { color: var(--ink-400); }

/* --- Buttons ------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; color: inherit;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn .i { width: 18px; height: 18px; }
.btn-lg { padding: 15px 24px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 8px 22px -12px rgb(10 86 194 / 60%); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink-900); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink-400); background: var(--surface-2); }
.btn-outline-light { background: rgb(255 255 255 / 6%); color: #fff; border-color: rgb(255 255 255 / 30%); }
.btn-outline-light:hover { background: rgb(255 255 255 / 13%); border-color: rgb(255 255 255 / 50%); }
.btn-white { background: #fff; color: var(--brand-700); }
.btn-white:hover { background: var(--brand-50); transform: translateY(-1px); }

/* --- Header -------------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
}
/* Set by site.js once the page has scrolled: the bar needs an edge only once content runs under it. */
.site-head.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgb(11 21 38 / 30%); }
.site-head .wrap { display: flex; align-items: center; gap: 12px; height: var(--head-h); }

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand-logo { height: 44px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 10px; border-radius: 8px;
  color: var(--ink-700); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background 140ms, color 140ms;
}
.nav a:hover { background: var(--surface-2); color: var(--ink-900); }
.nav a.on { color: var(--brand-600); font-weight: 650; }
.nav .nav-cta { margin-left: 10px; color: #fff; font-weight: 600; }
.nav .nav-cta:hover { background: var(--brand-700); color: #fff; }

.nav-toggle {
  display: none; place-items: center;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-900); cursor: pointer; padding: 0;
}
.nav-toggle .i { width: 22px; height: 22px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

/* --- Sections ------------------------------------------------------------------------------ */
.section { padding: 88px 0; }
.section-tint { background: var(--surface-2); }
.section-dark { background: var(--navy-900); color: rgb(255 255 255 / 75%); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: var(--accent-400); }

.section-head { max-width: 66ch; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lead { margin: 0; }
.section-head.center .lead { margin: 0 auto; }

/* Heading on the left, a "see all" on the right - the pattern for any section that is a preview
   of a fuller page. */
.split-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.split-head > div { max-width: 62ch; }
.split-head h2 { margin-bottom: 0; }

/* --- Hero (home) --------------------------------------------------------------------------- */
.hero, .page-head {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 460px at 88% -12%, rgb(121 192 61 / 20%), transparent 62%),
    radial-gradient(700px 400px at -10% 110%, rgb(28 111 227 / 30%), transparent 60%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 70%);
}
/* A faint engineering grid, faded out towards the bottom so it reads as texture, not a chart. */
.hero::before, .page-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}
.hero .wrap, .page-head .wrap { position: relative; }
.hero { padding: 84px 0 92px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--accent-400); }
.hero .lead { color: rgb(255 255 255 / 80%); font-size: 19px; margin-bottom: 30px; }
/* The positioning line is three phrases long and the hero column is not wide enough for it at
   the standard tracking; a dash left alone on its own line reads as a mistake. */
.hero .eyebrow { font-size: 11.5px; letter-spacing: 0.06em; gap: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts {
  list-style: none; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid rgb(255 255 255 / 14%);
  display: flex; flex-wrap: wrap; gap: 12px 28px; color: rgb(255 255 255 / 72%); font-size: 14.5px;
}
.hero-facts li { display: inline-flex; align-items: center; gap: 9px; }
.hero-facts .i { color: var(--accent-400); width: 18px; height: 18px; }

/* The panel: what we specialise in, as a thing you can scan rather than a sentence you must read.
   Glass over the gradient, with an opaque-enough fallback for browsers without backdrop-filter. */
.hero-panel {
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius-lg);
  padding: 22px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-lg);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head span { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 62%); }
.panel-head a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-400); font-size: 14px; font-weight: 600; text-decoration: none; }
.panel-head a .i { width: 16px; height: 16px; }
.domain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.domain-grid li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px;
  padding: 14px; border-radius: 12px;
  background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 8%);
  transition: background 160ms, border-color 160ms;
}
.domain-grid li:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 18%); }
.domain-grid .d-icon {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgb(121 192 61 / 16%); color: var(--accent-400);
}
.domain-grid .d-icon .i { width: 21px; height: 21px; }
.domain-grid b { color: #fff; font-size: 15px; font-weight: 650; line-height: 1.3; }
.domain-grid span:not(.d-icon) { color: rgb(255 255 255 / 60%); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }

/* --- Page head (inner pages) --------------------------------------------------------------- */
.page-head { padding: 60px 0 60px; }
.page-head h1 { color: #fff; font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 14px; }
.page-head p { color: rgb(255 255 255 / 78%); font-size: 18px; max-width: 66ch; margin: 0; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgb(255 255 255 / 55%); margin-bottom: 22px; }
.crumbs a { color: rgb(255 255 255 / 75%); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span:last-child { color: var(--accent-400); font-weight: 600; }

/* --- Grids and cards ----------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Five across, for a row of staffing models on the dark band. */
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* A business function: a card whose body is a role list, so the chips get the room. */
.function h3 { font-size: 19px; margin-bottom: 8px; }
.function > p { font-size: 15.5px; margin-bottom: 18px; }
.function .chips { gap: 8px; }
.icon-tile {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--brand-50); color: var(--brand-600);
}
.icon-tile .i { width: 24px; height: 24px; }
.icon-tile.accent { background: var(--accent-100); color: var(--accent-700); }
.icon-tile.navy { background: var(--navy-800); color: #fff; }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms;
}
/* A card is a column, so a button in one stretches to the full width unless it is told not to.
   A call to action as wide as the card reads as a banner, not a button. */
.card > .btn { align-self: flex-start; }
.card > .hero-actions .btn { align-self: auto; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card .icon-tile { margin-bottom: 20px; }
.card h3 { font-size: 18.5px; }
.card p { font-size: 15.5px; }
.card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px;
  font-weight: 600; font-size: 14.5px; color: var(--brand-600); text-decoration: none;
}
.card .more .i { width: 16px; height: 16px; transition: transform 160ms var(--ease); }
.card .more:hover .i { transform: translateX(3px); }

/* A row: icon tile beside its text. Used wherever a list of capabilities is longer than three,
   because a fourth, fifth, seventh identical box in a row is what the old site got wrong. Odd
   counts are fine in a list where they were not in a grid of boxes. */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { font-size: 15px; margin: 0; }
.feature .num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-400); margin-bottom: 6px; }
.feature.wide { grid-column: 1 / -1; }
.feature-list.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Steps ("How we work") ------------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 48px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-100) 20%, var(--brand-100) 80%, transparent);
}
.step { position: relative; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step-num {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy-800); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 18px;
  box-shadow: 0 0 0 6px var(--surface-2);
}
.step h3 { font-size: 18px; }
.step p { font-size: 15px; margin: 0; }

/* --- Chips ---------------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-700);
  font-size: 14px; font-weight: 600;
}
.chips li .i { width: 16px; height: 16px; color: var(--brand-600); }
.chips.on-dark li { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 14%); color: #fff; }
.chips.on-dark li .i { color: var(--accent-400); }

/* --- Ticks ---------------------------------------------------------------------------------- */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-600); font-size: 15.5px; line-height: 1.5; }
.ticks .i { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-700); stroke-width: 2.4; }
.ticks li b { color: var(--ink-900); }

/* --- "At a glance" facts ------------------------------------------------------------------- */
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts > div:first-child { padding-top: 0; }
.facts dt { color: var(--ink-400); font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-900); }

/* --- Leadership ------------------------------------------------------------------------------ */
.leader {
  display: flex; gap: 24px; align-items: flex-start;
  max-width: 760px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.leader-mark {
  display: grid; place-items: center; flex: none;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-600);
}
.leader-mark .i { width: 34px; height: 34px; }
.leader h3 { font-size: 20px; margin-bottom: 4px; }
.leader-role { color: var(--brand-600); font-weight: 600; font-size: 14.5px; margin-bottom: 12px; }
.leader p:not(.leader-role) { font-size: 15.5px; }
.leader .more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-weight: 600; font-size: 14.5px; color: var(--brand-600); text-decoration: none;
}
.leader .more .i { width: 18px; height: 18px; }

/* --- Product spotlight ---------------------------------------------------------------------- */
.product { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
/* The product's own palette inside the company's: this tile is green because BookMyPlay11 is. */
.product-visual {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 44px 28px; min-height: 340px;
  border-radius: var(--radius-lg); border: 1px solid #cfe7dc;
  background:
    radial-gradient(360px 240px at 20% 0%, rgb(18 150 111 / 16%), transparent 70%),
    linear-gradient(160deg, #e8f7f1 0%, #f6fbf9 100%);
}
.app-icon { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 24px 50px -20px rgb(7 84 63 / 55%); margin-bottom: 18px; }
.app-name { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0d1428; line-height: 1; }
.app-name span { color: #dd0064; }
.app-tag { margin: 10px 0 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; color: #667085; }
.app-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.app-pills li { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #cfe7dc; color: #07543f; font-size: 13px; font-weight: 600; }
.product .hero-actions { margin-top: 26px; }

/* --- CTA band ------------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; padding: 72px 0;
  background:
    radial-gradient(700px 300px at 100% 0%, rgb(121 192 61 / 20%), transparent 60%),
    linear-gradient(135deg, var(--brand-600) 0%, var(--navy-800) 100%);
}
.cta-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgb(255 255 255 / 82%); font-size: 17px; max-width: 56ch; margin: 0; }
.cta-band .hero-actions { justify-content: flex-end; }

/* --- Contact -------------------------------------------------------------------------------- */
.contact-card { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
.contact-card .icon-tile { margin-bottom: 0; }
/* A grid, not a plain block: the home page builds these out of spans inside a link, and inline
   children would ignore the label margin and the line break in the address. */
.contact-card .v { min-width: 0; display: grid; align-content: start; }
a.contact-card { text-decoration: none; color: inherit; }
/* Three to a row, the icon beside the text leaves 244px for a 251px email address. Stack it. */
.grid-3 .contact-card { flex-direction: column; gap: 14px; }
.grid-3 .contact-card .icon-tile { margin-bottom: 0; }
.contact-card .k { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 4px; }
/* 17px, not 20: the address is 27 characters and these cards are three to a row on the home
   page and in a narrow rail on the contact page. At 20px it broke mid-word. */
.contact-card .big { font-size: 17px; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; text-decoration: none; }
.contact-card .big:hover { color: var(--brand-600); }
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--ink-700); font-size: 14.5px;
}
.note .i { width: 20px; height: 20px; color: var(--brand-600); margin-top: 2px; }

/* --- Footer ------------------------------------------------------------------------------------ */
.site-foot { background: var(--navy-900); color: rgb(255 255 255 / 68%); padding: 64px 0 28px; font-size: 15px; }
.site-foot a { color: rgb(255 255 255 / 74%); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.9fr 1fr 1.15fr 1fr 1fr; gap: 36px; }
.foot-about { max-width: 44ch; }
/* The five pillars, as one wrapped line with faint dividers rather than five more links. */
.foot-pillars { font-size: 13.5px; line-height: 1.7; margin: 0 0 22px; }
.foot-pillars span { color: rgb(255 255 255 / 28%); padding: 0 2px; }
/* The wordmark is navy; on the navy footer it sits on a white tile. */
.foot-brand { display: inline-block; background: #fff; border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.foot-brand .brand-logo { height: 36px; }
.site-foot .tagline { color: var(--accent-400); font-size: 13.5px; font-weight: 650; margin-bottom: 12px; }
.site-foot h4 { color: #fff; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 16px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 10px; }
.site-foot .foot-contact li { display: flex; gap: 10px; align-items: flex-start; }
.site-foot .foot-contact .i { width: 18px; height: 18px; color: var(--accent-400); margin-top: 3px; }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 12%);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13.5px; color: rgb(255 255 255 / 50%);
}

/* --- Helpers added with the IT / non-IT split ------------------------------------------------ */
.wrap-narrow { max-width: 860px; }
.section-lead { font-size: 18px; line-height: 1.6; color: var(--ink-600); max-width: 72ch; margin: 0; }
.section-head.center .section-lead { margin: 0 auto; }
/* One button under a grid, centred. A link at the end of a section that has already made its
   case - so it is outline, not primary, everywhere except on the dark band. */
.center-cta { display: flex; justify-content: center; margin: 40px 0 0; }

/* A card with less air, for grids of six or more where the full padding wastes a screen. */
.card.compact { padding: 24px; }
.card.compact .icon-tile { margin-bottom: 14px; }
.card.compact h3 { font-size: 17px; margin-bottom: 6px; }
.card.compact p { font-size: 15px; margin: 0; }

/* A card that is a note rather than an offer: no lift, no shadow, tinted ground. */
.quiet-card { background: var(--surface-2); box-shadow: none; }
.quiet-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.quiet-card h3 { font-size: 16.5px; }
.quiet-card p { font-size: 15px; margin: 0; }

/* Chip sizes. A long role list (twelve chips) needs smaller type than three headline words. */
.chips.sm li { padding: 7px 12px; font-size: 13.5px; }
.chips.lg li { padding: 11px 18px; font-size: 15.5px; font-weight: 650; }
.chips.lg li .i { width: 18px; height: 18px; }

/* Four across: at that width the icon goes above the text, not beside it. */
.feature-list.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feature-list.cols-4 .feature { flex-direction: column; gap: 14px; padding: 22px 20px; }
.feature-list.cols-4 .feature .icon-tile { width: 44px; height: 44px; border-radius: 12px; }
.feature-list.cols-4 .feature h3 { font-size: 16.5px; }
.feature-list.cols-4 .feature p { font-size: 14.5px; }

/* Six steps wrap to two rows of three, and the connector line between them would have to jump a
   row-gap to be honest - so it is dropped and the numbers carry the sequence. */
.steps.six { grid-template-columns: repeat(3, 1fr); }
.steps.six::before { display: none; }

/* --- Home: the two halves ------------------------------------------------------------------- */
/* The hero panel's two cards. Same glass as .domain-grid, but one per row and with its own link,
   because there are two of them and each is a destination rather than a label. */
.split-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.split-cards li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px;
  padding: 18px; border-radius: 14px;
  background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 8%);
  transition: background 160ms, border-color 160ms;
}
.split-cards li:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 18%); }
.split-cards .d-icon {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgb(121 192 61 / 16%); color: var(--accent-400);
}
.split-cards .d-icon .i { width: 24px; height: 24px; }
.split-cards b { color: #fff; font-size: 16.5px; font-weight: 650; }
.split-cards li > span:not(.d-icon) { color: rgb(255 255 255 / 62%); font-size: 13.5px; line-height: 1.4; }
.split-cards a {
  grid-column: 2; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-400); font-size: 14px; font-weight: 600; text-decoration: none;
}
.split-cards a .i { width: 16px; height: 16px; transition: transform 160ms var(--ease); }
.split-cards li:hover a .i { transform: translateX(3px); }

/* The IT / non-IT pair, on white. Two cards of equal weight - the kicker is the only thing that
   tells them apart at a glance, so it carries the colour. */
.duo { gap: 28px; }
.duo-card { padding: 32px; }
.duo-kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-600); margin: 0 0 8px;
}
.duo-card:nth-child(2) .duo-kicker { color: var(--accent-700); }
.duo-card h3 { font-size: 22px; margin-bottom: 12px; }
/* The two card names are the point of the section, so they carry more weight than a card
   heading elsewhere would. */
.duo-title { font-size: 25px; }
.duo-card > p { font-size: 16px; }

/* A whole tile that is a link: icon, label, one line. Eight of these replace eight cards where
   the detail lives on the page they lead to. */
.tile-link {
  display: grid; gap: 4px; align-content: start;
  padding: 24px 22px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms;
}
.tile-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.tile-link .icon-tile { margin-bottom: 14px; }
.tile-link b { color: var(--ink-900); font-size: 16.5px; font-weight: 650; line-height: 1.3; }
.tile-link span:not(.icon-tile) { color: var(--ink-600); font-size: 14.5px; line-height: 1.45; }

/* Industries, as a scannable list rather than eight more cards. */
.ind-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ind-grid li {
  display: grid; gap: 4px; align-content: start;
  padding: 22px 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: background 160ms, border-color 160ms;
}
.ind-grid li:hover { background: var(--surface); border-color: var(--line-strong); }
.ind-grid .icon-tile { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px; }
.ind-grid b { color: var(--ink-900); font-size: 16px; font-weight: 650; }
.ind-grid span:not(.icon-tile) { color: var(--ink-600); font-size: 14px; line-height: 1.45; }
.ind-cards { gap: 28px; }

/* A staffing model on the dark band. */
.model {
  padding: 26px 24px; border-radius: var(--radius);
  background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 12%);
  transition: background 160ms, border-color 160ms;
}
.model:hover { background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 22%); }
.model .icon-tile { background: rgb(121 192 61 / 16%); color: var(--accent-400); margin-bottom: 16px; }
.model h3 { font-size: 17.5px; margin-bottom: 8px; }
.model p { color: rgb(255 255 255 / 70%); font-size: 15px; margin: 0; }

/* --- Jump list (long service pages) --------------------------------------------------------- */
/* Sticks under the header so the eight sections stay reachable from anywhere on the page. */
.jump { position: sticky; top: var(--head-h); z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.jump .wrap { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--gutter); scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--ink-600); text-decoration: none;
  border: 1px solid transparent; transition: background 160ms, color 160ms, border-color 160ms;
}
.jump a:hover { background: var(--surface-2); color: var(--ink-900); border-color: var(--line); }
/* Scroll-margin so an anchored section does not land under the sticky bar. */
.jump ~ section[id] { scroll-margin-top: calc(var(--head-h) + 58px); }

/* --- A service area (non-IT page) ----------------------------------------------------------- */
.area { border-top: 1px solid var(--line); padding-top: 34px; }
.area-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 30px; }
.area-head .icon-tile { flex: none; width: 56px; height: 56px; border-radius: 14px; margin: 0; }
.area-head .icon-tile .i { width: 28px; height: 28px; }
.area-head h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 10px; }
.area-head p { color: var(--ink-600); font-size: 16px; max-width: 70ch; margin: 0; }
.roles-head { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; }

/* --- Mission, vision, values (about) -------------------------------------------------------- */
.mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.mv { padding: 34px; }
.mv h3 { font-size: 21px; margin-bottom: 10px; }
.mv p { font-size: 16.5px; color: var(--ink-600); margin: 0; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value { padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.value .icon-tile { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.value h3 { font-size: 17px; margin-bottom: 6px; }
.value p { font-size: 14.5px; color: var(--ink-600); margin: 0; }

/* --- Forms ---------------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 40px; align-items: start; }
.contact-rail { display: grid; gap: 16px; }
.contact-rail .contact-card p { font-size: 14.5px; margin: 6px 0 0; }

.form-card { padding: 36px; }
.form-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.form-card h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 10px; }
.form-lead { color: var(--ink-600); font-size: 15.5px; margin: 0 0 28px; }

.field { display: grid; gap: 7px; margin-bottom: 18px; }
/* The row owns the spacing below it, not its fields: when the row stacks on a phone its own gap
   and each field's margin would otherwise add up to a double gap on one side only. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.field-row .field { margin-bottom: 0; }
.field-row .field.narrow { max-width: 220px; }
.field label, .label-static { font-size: 14px; font-weight: 650; color: var(--ink-700); }
.req { color: var(--accent-700); }

.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 13px 15px; appearance: none; -webkit-appearance: none;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
/* A select is not a text box: it has no placeholder, so the empty option is greyed by hand. */
.select-wrap { position: relative; display: block; }
.select-wrap .i {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-400); pointer-events: none;
}
.select-wrap select { padding-right: 42px; cursor: pointer; }
.field select:invalid { color: var(--ink-400); }

/* Red only after the first submit attempt. A form that is scarlet before it has been filled in
   is telling the visitor off for arriving. */
.form-card.checked input:invalid, .form-card.checked select:invalid, .form-card.checked textarea:invalid {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgb(192 57 43 / 12%);
}
.form-error {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  background: rgb(192 57 43 / 7%); border: 1px solid rgb(192 57 43 / 25%);
  color: #9b2d20; font-size: 14.5px; font-weight: 600;
}
/* The same box, in green, once the mail app has been handed the details. */
.form-error.ok {
  background: var(--accent-100); border-color: rgb(63 127 22 / 30%); color: var(--accent-700);
  align-items: center; flex-wrap: wrap;
}
.form-error button {
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; border: 1px solid currentColor;
  background: transparent; color: inherit;
}
.form-error button:hover { background: rgb(63 127 22 / 10%); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.form-note { margin-top: 20px; }
.attach-note {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  color: var(--ink-600); font-size: 14.5px; line-height: 1.5;
}
.attach-note .i { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--brand-600); }

/* The models, as one quiet line under the two cards - it balances a tall headline opposite. */
.panel-foot {
  margin: 14px 2px 2px; text-align: center;
  color: rgb(255 255 255 / 55%); font-size: 12.5px; letter-spacing: 0.02em;
}


/* A jump bar already separates the head from the first section; the full 88px on top of it is a
   screen of nothing. */
.jump + .section { padding-top: 48px; }
/* --- Hero panel: the engagement models ------------------------------------------------------- */
.model-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.model-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 8%);
  transition: background 160ms, border-color 160ms;
}
.model-list li:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 18%); }
.model-list .i { width: 19px; height: 19px; flex: none; color: var(--accent-400); }
.model-list b { color: #fff; font-size: 14.5px; font-weight: 600; }

/* --- Technology expertise grid ---------------------------------------------------------------- */
/* The chips are the content here, so the card gives them the room a paragraph would have had. */
.tech-grid .card h3 { margin-bottom: 14px; }
.tech-grid .chips { gap: 8px; }

/* --- Five across ------------------------------------------------------------------------------ */
.feature-list.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.feature-list.cols-5 .feature { flex-direction: column; gap: 14px; padding: 22px 20px; }
.feature-list.cols-5 .feature .icon-tile { width: 44px; height: 44px; border-radius: 12px; }
.feature-list.cols-5 .feature h3 { font-size: 16px; }
.feature-list.cols-5 .feature p { font-size: 14.5px; }

/* --- Product strip ----------------------------------------------------------------------------- */
.product-strip { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.product-strip h2 { margin-bottom: 12px; }
.product-mark {
  display: grid; place-items: center; width: 190px; height: 190px; border-radius: 34px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.product-mark img { width: 128px; height: 128px; border-radius: 28px; }

/* Seven cards in three columns leave the last one stranded in an empty row. It takes the row.
   Below the two-column breakpoint seven is 3x2 + 1, so the rule holds there too. */
.what-grid > :last-child { grid-column: 1 / -1; }

/* --- Nav dropdowns --------------------------------------------------------------------------- */
/* A group's trigger is a button, because "Solutions" has no page behind it. It is dressed to match
   the links either side so the bar still reads as one row of nav items. */
.nav-group { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-700);
  background: none; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer;
  transition: background 140ms, color 140ms;
}
.nav-top .i { width: 15px; height: 15px; transition: transform 160ms var(--ease); }
.nav-top:hover { background: var(--surface-2); color: var(--ink-900); }
.nav-group.here > .nav-top { color: var(--brand-600); font-weight: 650; }
.nav-group.open > .nav-top .i { transform: rotate(180deg); }

.nav-menu {
  display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px;
}
.nav-menu a {
  padding: 9px 14px; border-radius: 8px; white-space: nowrap;
  font-size: 14.5px; color: var(--ink-700); text-decoration: none;
}
.nav-menu a:hover { background: var(--surface-2); color: var(--brand-600); }
.nav-menu a.on { color: var(--brand-600); font-weight: 650; }

/* --- Wide screens: the bar, with panels that drop ---------------------------------------------- */
@media (min-width: 1200px) {
  .nav-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
  }
  /* The last two groups sit near the right edge; their panels hang from it instead. */
  .nav-group:nth-last-of-type(1) .nav-menu { left: auto; right: 0; }
  /* Hover and the open class only. :focus-within was here and made Escape useless: closing the
     panel returns focus to its button, which is inside the group, which re-opened it at once.
     A keyboard reaches the panel by pressing Enter on the button, which fires the same click. */
  .nav-group:hover > .nav-menu,
  .nav-group.open > .nav-menu {
    opacity: 1; visibility: visible; transform: none;
  }
  /* A gap between the button and the panel would drop the hover on the way down. */
  .nav-group::after { content: ''; position: absolute; inset: 100% 0 auto; height: 10px; }
}

/* --- 1200-1365: nine items and a button, with the gaps given back ------------------------------ */
@media (max-width: 1365px) and (min-width: 1200px) {
  .brand-logo { height: 38px; }
  .nav a, .nav-top { padding: 9px 7px; font-size: 14px; }
  .nav .nav-cta { margin-left: 6px; padding: 9px 13px; }
}
/* --- Below 1200: the bar becomes a drawer ------------------------------------------------------
   Nine items and three dropdowns do not fit a laptop header, let alone a tablet, so the collapse
   happens well above phone width. Inside the drawer a group is a section that expands in place -
   a panel that floated over the list would have nowhere to float to. */
@media (max-width: 1199px) {
  .nav-toggle { display: grid; }
  /* backdrop-filter makes the header the containing block for a fixed descendant, which traps
     the open menu inside the bar. On small screens the bar is solid and the menu is free. */
  .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .nav {
    position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); padding: 8px var(--gutter) 28px; overflow-y: auto;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav > a { font-size: 17px; padding: 15px 6px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav > a:hover { background: none; }
  .nav .nav-cta { margin: 20px 0 0; border: 0; border-radius: var(--radius-sm); padding: 15px; text-align: center; }
  body.nav-open { overflow: hidden; }

  .nav-group { border-bottom: 1px solid var(--line); }
  .nav-top {
    width: 100%; justify-content: space-between;
    font-size: 17px; padding: 15px 6px; border-radius: 0;
  }
  .nav-top:hover { background: none; }
  .nav-top .i { width: 18px; height: 18px; }
  .nav-menu { display: none; border: 0; box-shadow: none; background: var(--surface-2); padding: 6px; margin: 0 0 14px; }
  .nav-group.open > .nav-menu { display: grid; }
  .nav-menu a { font-size: 15.5px; padding: 12px 14px; white-space: normal; }
}

/* --- Tablet and below ------------------------------------------------------------------------
   The hero stacks here, because a split hero needs room for both halves, and three- and
   four-across grids go to two. The nav is not in this block any more - it collapses at 1200. */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 64px 0 56px; }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .foot-about { grid-column: 1 / -1; max-width: none; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-band .hero-actions { justify-content: flex-start; }
  .contact-layout { grid-template-columns: 1fr; }
  .duo { gap: 20px; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-list.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .product-strip { grid-template-columns: 1fr; gap: 28px; }
  .feature-list.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-grid { grid-template-columns: 1fr; }
  .steps.six { grid-template-columns: repeat(2, 1fr); }
}

/* --- Phones ------------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  :root { --head-h: 60px; --gutter: 18px; }
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .brand-logo { height: 36px; }

  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .lead, .hero .lead { font-size: 17px; }
  /* An eyebrow that wraps to two lines with a dash hanging off the first looks broken; two plain
     lines of small caps do not. */
  .eyebrow { font-size: 12px; }
  .eyebrow::before { display: none; }
  .contact-card { flex-direction: column; gap: 12px; }
  .contact-card .big { font-size: 18px; }
  .hero { padding: 48px 0 44px; }
  .hero-actions .btn { width: 100%; }
  .hero-facts { gap: 10px; flex-direction: column; margin-top: 26px; padding-top: 22px; }

  /* The panel drops its descriptions on a phone: six icon-and-label tiles scan; six paragraphs
     under a hero do not. */
  .hero-panel { padding: 16px; }
  .domain-grid { gap: 8px; }
  .domain-grid li { padding: 12px; grid-template-rows: auto; align-items: center; }
  .domain-grid .d-icon { grid-row: 1; width: 36px; height: 36px; }
  .domain-grid span:not(.d-icon) { display: none; }
  .domain-grid b { font-size: 14px; }

  .page-head { padding: 40px 0 40px; }
  .page-head p { font-size: 16.5px; }
  .split-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .section-head { margin-bottom: 28px; }

  .grid-2, .grid-3, .grid-4, .grid-5, .feature-list, .feature-list.cols-3 { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .feature { padding: 18px; gap: 14px; }
  .icon-tile { width: 44px; height: 44px; border-radius: 12px; }

  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps::before {
    top: 30px; bottom: 30px; left: 41px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, var(--brand-100) 10%, var(--brand-100) 90%, transparent);
  }
  .step { padding: 22px; display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; }
  .step-num { margin: 0; grid-row: 1 / 3; }
  .step h3 { grid-column: 2; font-size: 17px; }
  .step p { grid-column: 2; }

  .product { grid-template-columns: 1fr; gap: 26px; }
  .product-visual { min-height: 0; padding: 32px 20px; }
  .app-icon { width: 96px; height: 96px; border-radius: 22px; }
  .cta-band { padding: 52px 0; }
  .cta-band .hero-actions .btn { width: 100%; }

  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .leader { flex-direction: column; gap: 14px; padding: 22px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; }
  .ind-grid, .feature-list.cols-4, .feature-list.cols-5, .value-grid, .mv-grid, .field-row, .steps.six, .duo { grid-template-columns: 1fr; }
  .product-mark { width: 150px; height: 150px; border-radius: 28px; }
  .product-mark img { width: 100px; height: 100px; border-radius: 22px; }
  .field-row .field.narrow { max-width: none; }
  .form-card { padding: 22px; }
  .duo-card, .mv { padding: 22px; }
  .model { padding: 22px 20px; }
  .tile-link { padding: 20px 18px; }
  .form-actions .btn, .center-cta .btn { width: 100%; }
  .center-cta { margin-top: 30px; }
  .area { padding-top: 28px; }
  .area-head { flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .area-head p { font-size: 15.5px; }
  .split-cards li { padding: 14px; }
  .split-cards .d-icon { width: 40px; height: 40px; }
  .jump .wrap { padding: 8px var(--gutter); }
  .jump a { padding: 8px 13px; font-size: 13.5px; }
}