/* AlphaBeta corporate website.
 *
 * Every value here comes from the approved design handoff. The prototype
 * expressed them as inline styles on each element; they are tokens and classes
 * here so a change lands in one place.
 *
 * Sizes resolve against `cqi` — container query inline units — measured on
 * .shell, which declares `container-type: inline-size`. That is what the design
 * specifies, and it keeps the layout responding to its container rather than
 * the viewport.
 */

/* ------------------------------------------------------------------ fonts */
/* Converted from the supplied TTFs; see src/assets/fonts/NOTICE.txt. */
@font-face {
  font-family: Poppins;
  src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url('/assets/fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* Surfaces */
  --bg: #1A1D1E;
  --panel: #1D2122;
  --deep: #0F1213;
  --screen: #15191A;
  --hover: #212627;

  /* Accent */
  --accent: #57D0D4;
  --accent-hover: #8AE3E6;
  --accent-ink: #0E1516;

  /* Ink */
  --ink-heading: #F2F4F4;
  --ink-strong: #E4E7E7;
  --ink-secondary: #C7CCCD;
  --ink-body: #A7AEAF;
  --ink-muted: #8C9394;
  --ink-footer: #6F7778;

  /* Status */
  --status-soon: #E8C06A;
  --status-busy: #D9776F;

  /* Hairlines — always white at low alpha, never a solid grey. */
  --line-06: rgba(255, 255, 255, 0.06);
  --line-07: rgba(255, 255, 255, 0.07);
  --line-08: rgba(255, 255, 255, 0.08);
  --line-09: rgba(255, 255, 255, 0.09);
  --line-12: rgba(255, 255, 255, 0.12);
  --line-14: rgba(255, 255, 255, 0.14);
  --line-16: rgba(255, 255, 255, 0.16);
  --line-18: rgba(255, 255, 255, 0.18);
  --line-20: rgba(255, 255, 255, 0.2);
  --line-22: rgba(255, 255, 255, 0.22);

  /* Accent tints */
  --accent-07: rgba(87, 208, 212, 0.07);
  --accent-08: rgba(87, 208, 212, 0.08);
  --accent-12: rgba(87, 208, 212, 0.12);
  --accent-55: rgba(87, 208, 212, 0.55);

  /* Rhythm */
  --max: 1320px;
  --pad-x: clamp(20px, 4.4cqi, 72px);
  --pad-y: clamp(56px, 7cqi, 104px);
  --pad-y-lg: clamp(64px, 8cqi, 124px);
  --gap-col: clamp(24px, 3cqi, 56px);
  --gap-split: clamp(30px, 3.6cqi, 64px);

  --font: Poppins, 'Helvetica Neue', Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body {
  color: var(--ink-heading);
  font-family: var(--font);
}

/* Several of the design's labels are rendered as real headings so the document
   has a usable outline. The user-agent margin that comes with them is not part
   of the design, so it goes here once rather than being forgotten per class. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
/* Same reasoning for paragraphs: the design sets every margin that exists, so
   the user-agent's 1em top and bottom are never what is wanted. */
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img, svg { max-width: 100%; }

/* A class that sets `display` beats the user-agent rule for [hidden]. The
   no-script topic <select> is a .field (display:grid) and stayed visible
   behind the chips without this. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The shell is the container that `cqi` units resolve against. */
.shell {
  container-type: inline-size;
  position: relative;
  background: var(--bg);
}

.wrap { max-width: var(--max); margin: 0 auto; }

/* Skip link — visible the moment it takes focus, never before. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 15px/1 var(--font);
  padding: 14px 20px;
  border-radius: 0 0 8px 0;
}
.skip:focus {
  left: 0;
  color: var(--accent-ink);
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(26, 29, 30, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-07);
}

.header__bar {
  /* The design's max-width is the width of the *content*, with the gutter
     outside it — the prototype relies on the default content-box for this.
     Under the border-box default set above, 1320px would swallow the gutter
     and pull every page 126px narrower than the approved layout. */
  box-sizing: content-box;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__logo { display: flex; align-items: center; flex: 0 0 auto; border-radius: 6px; }
.header__logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.header__logo img { height: 42px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.nav__link {
  font: 500 14px/1 var(--font);
  color: var(--ink-secondary);
  padding: 10px 14px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--accent); background: var(--accent-08); }
.nav__link[aria-current] { color: var(--accent); }

.nav__cta { margin-left: 14px; }

/* The hamburger and the desktop nav swap at a container width of 900px, the
 * one width-conditional rule in the design. The prototype used a
 * ResizeObserver; a container query does the same job without JavaScript, so
 * the header is correct before any script runs. */
.menu-button {
  margin-left: auto;
  width: 46px;
  height: 46px;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--line-18);
  border-radius: 12px;
  cursor: pointer;
}
.menu-button span {
  display: block;
  height: 1.5px;
  background: var(--ink-heading);
  border-radius: 2px;
}
.menu-button span:last-child { background: var(--accent); width: 60%; }

.menu {
  /* Open by default. A visitor with no JavaScript cannot work the button, and
     the desktop nav is hidden below 900px, so a closed default would leave
     them with no navigation at all. The `js` class on <html> — set before
     first paint — is what turns the collapse on. */
  display: flex;
  border-top: 1px solid var(--line-07);
  padding: 12px var(--pad-x) 22px;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
}
.js .menu { display: none; }
.js .menu[data-open='true'] { display: flex; }

.menu__link {
  font: 500 17px/1 var(--font);
  color: var(--ink-secondary);
  padding: 16px 8px;
  border-bottom: 1px solid var(--line-06);
}
.menu__link:last-of-type { border-bottom: none; }
.menu__link[aria-current] { color: var(--accent); }
.menu__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.menu__cta {
  margin-top: 14px;
  justify-content: center;
  padding: 17px 20px;
  font-size: 15px;
}

@container (max-width: 899px) {
  .nav { display: none; }
  /* The button only appears when it can do something. */
  .js .menu-button { display: flex; }
}

/* Above 900px the menu column is never the navigation, scripted or not. */
@container (min-width: 900px) {
  .menu { display: none; }
}

/* Without container query support the desktop nav is the safe fallback: every
 * link is still reachable, it simply wraps. */
@supports not (container-type: inline-size) {
  .nav { display: flex; flex-wrap: wrap; }
}

/* --------------------------------------------------------------- sections */
.section { padding: var(--pad-y) var(--pad-x); }
.section--lg { padding: var(--pad-y-lg) var(--pad-x); }
.section--hero { padding: clamp(40px, 5cqi, 72px) var(--pad-x) clamp(48px, 6cqi, 88px); }
.section--hero-home { padding: clamp(48px, 7cqi, 96px) var(--pad-x) clamp(40px, 5cqi, 72px); position: relative; overflow: hidden; }
.section--hero-flat { padding: clamp(40px, 5cqi, 72px) var(--pad-x) clamp(40px, 5cqi, 72px); }
.section--hero-tall { padding: clamp(40px, 5cqi, 72px) var(--pad-x) var(--pad-y); }
.section--crumbed { padding: clamp(34px, 4cqi, 56px) var(--pad-x) clamp(48px, 6cqi, 88px); }
.section--flush { padding: 0 var(--pad-x) var(--pad-y); }

.section--panel {
  background: var(--panel);
  border-top: 1px solid var(--line-07);
  border-bottom: 1px solid var(--line-07);
}
.section--panel-top { background: var(--panel); border-top: 1px solid var(--line-07); }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.eyebrow--hero { margin-bottom: clamp(20px, 2.4cqi, 34px); }
.eyebrow--product { margin-bottom: 24px; }
.eyebrow__label {
  font: 500 11.5px/1 var(--font);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow__rule {
  height: 1px;
  width: clamp(28px, 4cqi, 64px);
  background: var(--line-20);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- typography */
.h1 {
  margin: 0;
  font: 600 clamp(32px, 4.5cqi, 64px)/1.06 var(--font);
  letter-spacing: -0.028em;
  color: var(--ink-heading);
  text-wrap: pretty;
}
.h1--home {
  font: 600 clamp(34px, 4.9cqi, 72px)/1.05 var(--font);
  letter-spacing: -0.03em;
}
/* The six service-group pages. Service group 01 in the prototype carries a
   slightly larger scale (4.5cqi/64px, -0.026em) than 02–06 (4.4cqi/62px,
   -0.028em) — the handoff states that all six follow one skeleton and that
   adding a seventh should be a copy exercise, so all six use the form that
   five of them already have. Noted in the launch checklist. */
.h1--service {
  font: 600 clamp(32px, 4.4cqi, 62px)/1.06 var(--font);
  letter-spacing: -0.028em;
}

/* The AlphaRoom page sits a step smaller again — its hero also carries the
   product lockup above the heading. */
.h1--alpharoom {
  font: 600 clamp(30px, 4.2cqi, 58px)/1.07 var(--font);
  letter-spacing: -0.028em;
}

.h2 {
  margin: 0;
  font: 600 clamp(24px, 2.8cqi, 38px)/1.15 var(--font);
  letter-spacing: -0.02em;
  color: var(--ink-heading);
}
.h2--lg {
  font: 600 clamp(29px, 3.9cqi, 54px)/1.08 var(--font);
  letter-spacing: -0.022em;
}
.h2--product {
  font: 600 clamp(24px, 2.8cqi, 40px)/1.12 var(--font);
  letter-spacing: -0.02em;
}
.h2--cta {
  font: 600 clamp(26px, 3.2cqi, 44px)/1.1 var(--font);
  letter-spacing: -0.022em;
}
.h2--prose {
  font: 600 clamp(22px, 2.4cqi, 32px)/1.2 var(--font);
  letter-spacing: -0.02em;
}
.h2--spaced { margin-bottom: clamp(30px, 3.4cqi, 52px); }
.h2--spaced-sm { margin-bottom: clamp(26px, 3cqi, 44px); }
.h2--spaced-values { margin-bottom: clamp(28px, 3.2cqi, 48px); }

.accent { color: var(--accent); }

.lead {
  margin: clamp(20px, 2.2cqi, 30px) 0 0;
  max-width: 34em;
  font: 400 clamp(15px, 1.25cqi, 17.5px)/1.65 var(--font);
  color: var(--ink-body);
  text-wrap: pretty;
}
.lead--tight { margin-top: clamp(20px, 2.2cqi, 28px); }

.blurb {
  margin: 0;
  max-width: 40em;
  font: 400 clamp(15px, 1.15cqi, 16.5px)/1.7 var(--font);
  color: var(--ink-body);
  text-wrap: pretty;
}
.blurb--flow { margin: 22px 0 0; max-width: 36em; }
.blurb--cta { margin: 22px 0 0; max-width: 34em; }

.copy { margin: 0; font: 400 15px/1.7 var(--font); color: var(--ink-body); max-width: 32em; }
.copy--prose { margin: 0 0 16px; font: 400 15px/1.75 var(--font); max-width: none; }
.copy--prose:last-child { margin-bottom: 0; }
/* The closing call to action on every page but the homepage sits a step
   smaller than the homepage's: a fixed 15px rather than the scaling lead.
   Declared after .copy, which sets margin:0 and would otherwise win. */
.copy--cta { margin: 20px 0 0; max-width: 32em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/1 var(--font);
  padding: 17px 26px;
  border-radius: 999px;
  /* No border on the primary button — the design's pill is padding only, and
     a transparent 1px border would make it 2px wider than the approved size. */
  border: 0;
  cursor: pointer;
  text-align: center;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  transition: background .25s, transform .25s;
}
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-2px); }
.btn--primary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }

.btn--secondary {
  color: var(--ink-heading);
  border: 1px solid var(--line-22);
  background: transparent;
  transition: border-color .25s, background .25s;
}
.btn--secondary:hover { border-color: var(--accent); background: var(--accent-07); color: var(--ink-heading); }
.btn--secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--lg { padding: 18px 28px; }
.btn--nav { padding: 14px 20px; font-size: 14px; }
.btn__arrow { font-size: 16px; }
.btn--nav .btn__arrow { font-size: 15px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3cqi, 40px); }
.btn-row--tight { margin-top: clamp(26px, 3cqi, 38px); }
.btn-row--product { margin-top: clamp(26px, 3cqi, 40px); }
.btn-row--flush { margin-top: 0; }

/* ----------------------------------------------------------------- layout */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4cqi, 64px);
  align-items: center;
}
.split__major { flex: 1.4 1 min(100%, 400px); min-width: 0; }
.split__minor { flex: 1 1 min(100%, 300px); min-width: 0; }

/* The service-page and AlphaRoom heroes: a flex split, not a grid, so the
   heading column keeps its 1.35 share of the width rather than being pinned to
   an equal track. */
.split--hero .split__major { flex: 1.35 1 min(100%, 400px); }
.split--product .split__major { flex: 1.3 1 min(100%, 400px); }
.split--product .split__minor { flex: 1 1 min(100%, 320px); }

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap-col);
}
.duo--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 4cqi, 64px); }
.duo--prose { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap-split); }
.duo--middle { align-items: center; }
.duo--end { align-items: end; }

.heading-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap-col);
  align-items: end;
  margin-bottom: clamp(36px, 4cqi, 64px);
}

.inline-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-col);
  align-items: end;
}
.inline-head__title { flex: 1.3 1 min(100%, 420px); min-width: 0; }
.inline-head__copy {
  flex: 1 1 min(100%, 300px);
  min-width: 0;
  margin: 0;
  font: 400 clamp(15px, 1.2cqi, 17px)/1.7 var(--font);
  color: var(--ink-body);
  text-wrap: pretty;
}
/* Section intros sit a step below page intros. */
.inline-head__copy--sm { font: 400 15px/1.7 var(--font); }

/* ------------------------------------------------------------- hero graphic */
.mark {
  flex: 1 1 min(100%, 300px);
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(240px, 28cqi, 440px);
}
.mark--about { min-height: clamp(200px, 22cqi, 340px); }

.mark__glow {
  position: absolute;
  width: min(78%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(87, 208, 212, 0.22), rgba(87, 208, 212, 0.04) 55%, transparent 72%);
  animation: abPulse 9s ease-in-out infinite;
}
.mark--about .mark__glow {
  width: min(74%, 340px);
  background: radial-gradient(circle at 50% 50%, rgba(87, 208, 212, 0.18), rgba(87, 208, 212, 0.03) 55%, transparent 72%);
  animation-duration: 11s;
}

.mark__ring {
  position: absolute;
  width: min(70%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(87, 208, 212, 0.16);
  border-top-color: rgba(87, 208, 212, 0.5);
  animation: abRing 34s linear infinite;
}
.mark__ring--dashed {
  width: min(90%, 470px);
  border: 1px dashed var(--line-07);
  animation: abRing 62s linear infinite reverse;
}

.mark__img {
  position: relative;
  width: min(46%, 230px);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.5));
  animation: abFloat 11s ease-in-out infinite;
}
.mark--about .mark__img {
  width: min(40%, 180px);
  filter: none;
  animation-duration: 13s;
}

@keyframes abFloat { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(10px); } }
@keyframes abRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes abPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* ------------------------------------------------------------- group strip */
.strip {
  /* content-box for the same reason as .header__bar: the gutter sits outside
     the 1320px, which is what lets six groups share one row at desktop. */
  box-sizing: content-box;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.strip__item {
  padding: 22px 18px;
  border-right: 1px solid var(--line-07);
  font: 500 13.5px/1.4 var(--font);
  color: var(--ink-secondary);
}
.strip__item:first-child { padding-left: 0; }
.strip__item:last-child { padding-right: 0; border-right: none; }

/* -------------------------------------------------------------- card grids */
/* The gap is the rule: the container's background shows through a 1px gap. */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line-09);
  border-top: 1px solid var(--line-09);
  border-bottom: 1px solid var(--line-09);
}
/* Six service cards resolve to three columns by two rows on desktop, two on
 * tablet and one on mobile. The min(100%, …) guard stops the track floor
 * overflowing a narrow container. */
.grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grid--quads { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-bottom: none; }
.grid--steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid--related { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.grid--boxed {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border: 1px solid var(--line-09);
  border-radius: 16px;
  overflow: hidden;
}
/* The "What we provide" grid tightens as the set grows, so two wide cards and
   four narrow ones both read as one block: two cards sit on a 320px floor,
   three on 300px and four on 280px, with the card padding stepping down to
   match. The six service pages in the prototype follow exactly this. */
.grid--boxed-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--boxed-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--boxed-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Column direction plus grid stretch gives every card in a row equal height. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: clamp(26px, 2.6cqi, 38px);
  transition: background .3s;
}
a.card:hover { background: var(--hover); color: var(--ink-heading); }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.card--pad-lg { padding: clamp(26px, 2.8cqi, 42px); }
.card--pad-lg-3 { padding: clamp(26px, 2.8cqi, 40px); }
.card--pad-lg-4 { padding: clamp(24px, 2.6cqi, 38px); }
.card--pad-alt { padding: clamp(24px, 2.4cqi, 34px) clamp(20px, 2cqi, 30px) clamp(30px, 3cqi, 44px); }
.card--pad-step { padding: clamp(24px, 2.4cqi, 34px) clamp(18px, 2cqi, 28px) clamp(28px, 3cqi, 40px); }
.card--pad-sm { padding: clamp(24px, 2.4cqi, 34px); }
.card--pad-product { padding: clamp(26px, 2.8cqi, 40px); }

.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.card__top--middle { align-items: center; gap: 12px; margin-bottom: 14px; }

.numeral {
  font: 600 12px/1 var(--font);
  letter-spacing: .2em;
  color: var(--accent);
}
.numeral--block { margin-bottom: 18px; }
.numeral--lg { margin-bottom: 20px; }
.numeral--step { margin-bottom: 16px; }

.card__arrow { font-size: 18px; color: var(--accent); }
.card__arrow--sm { font-size: 17px; }

.card__title {
  margin: 0 0 10px;
  font: 600 clamp(18px, 1.55cqi, 22px)/1.3 var(--font);
  color: var(--ink-heading);
}
/* The "What we provide" card. One scale by default — the form four of the six
   service pages already share. Groups 03 and 04 carry longer card titles and
   the design sets them a point smaller so each stays on one line; forcing the
   default on them wraps every title and makes the cards 35px taller, which is
   worse than the inconsistency. Those two opt in via `provideScale: 'tight'`
   in src/content/services.js. */
.card__title--lg { margin: 0 0 14px; font: 600 clamp(18px, 1.6cqi, 22px)/1.3 var(--font); }
.grid--tight .card__title--lg { font: 600 clamp(17px, 1.5cqi, 21px)/1.3 var(--font); }
.grid--tight .bullets { gap: 11px; }
.grid--tight .bullet__text { font-size: 14.3px; }
.card__title--product { margin: 0 0 12px; font: 600 clamp(18px, 1.6cqi, 22px)/1.3 var(--font); }
.card__title--md { font: 600 clamp(17px, 1.45cqi, 20px)/1.3 var(--font); }
.card__title--sm { margin: 0 0 8px; font: 600 17px/1.35 var(--font); }
.card__title--step { margin: 0 0 9px; font: 600 16.5px/1.3 var(--font); }

.card__body { margin: 0; font: 400 14.5px/1.65 var(--font); color: var(--ink-body); }
.card__body--sm { font: 400 14px/1.6 var(--font); }
.card__body--step { font: 400 14px/1.65 var(--font); }
.card__body--lead { margin: 0 0 22px; font: 400 14.8px/1.7 var(--font); }
.card__body--product { margin: 0 0 20px; font: 400 14.6px/1.7 var(--font); }

/* -------------------------------------------------------------- bullet list */
.bullets { display: grid; gap: 12px; }
.bullets--loose { gap: 14px; margin: 30px 0 0; }
.bullets--product { gap: 11px; }

.bullet { display: flex; gap: 13px; align-items: flex-start; }
.bullet__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
  flex: 0 0 auto;
}
.bullet__text { font: 400 14.5px/1.6 var(--font); color: var(--ink-secondary); }

.bullets--loose .bullet { gap: 14px; }
.bullets--loose .bullet__dot { width: 6px; height: 6px; }
.bullets--loose .bullet__text { font: 400 15px/1.55 var(--font); }
.bullets--product .bullet__text { font: 400 14.3px/1.6 var(--font); }
.bullets--integration { gap: 14px; }
.bullets--integration .bullet { gap: 14px; }
.bullets--integration .bullet__dot { width: 6px; height: 6px; }
.bullets--integration .bullet__text { font: 400 15px/1.6 var(--font); }

/* ------------------------------------------------------------- benefit cols */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 2.6cqi, 44px);
}
.benefit { border-top: 2px solid var(--line-14); padding-top: 22px; }
.benefit:first-child { border-top-color: var(--accent); }
.benefit__title {
  margin: 0 0 10px;
  font: 600 clamp(17px, 1.45cqi, 21px)/1.35 var(--font);
  color: var(--ink-heading);
}
.benefit__body { margin: 0; font: 400 14.8px/1.7 var(--font); color: var(--ink-body); }

/* Values (About) and problems (AlphaRoom) share the hairline-topped column. */
.tiles { display: grid; gap: clamp(18px, 2cqi, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.tiles--problems { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 2.2cqi, 36px); }
.tile { border-top: 1px solid var(--line-14); padding-top: 18px; }
.tiles--problems .tile { padding-top: 20px; }
.tile__title { margin: 0 0 8px; font: 600 16px/1.35 var(--font); color: var(--ink-heading); }
.tiles--problems .tile__title { margin: 0 0 9px; }
.tile__body { margin: 0; font: 400 14px/1.65 var(--font); color: var(--ink-body); }

/* ------------------------------------------------------------ numbered list */
.situations { display: grid; align-content: start; }
.situation {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-08);
}
.situation:last-child { border-bottom: none; }
.situation__n { font: 600 12px/1.6 var(--font); color: var(--accent); flex: 0 0 auto; }
.situation__text { font: 400 15px/1.6 var(--font); color: var(--ink-secondary); }

/* ------------------------------------------------------------- info panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line-09);
  border-radius: 20px;
  padding: clamp(22px, 2.4cqi, 34px);
}
.panel--light { background: var(--bg); padding: clamp(24px, 2.6cqi, 38px); }

.panel__label {
  font: 500 11.5px/1 var(--font);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.panel__label--tight { margin-bottom: 22px; }
.panel__label--accent { color: var(--accent); margin-bottom: 18px; }

.checklist { display: grid; gap: 2px; }
.check {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-07);
}
.check:last-child { border-bottom: none; }
/* Five items tighten by a point so the panel does not outgrow the heading
   beside it. The prototype tunes these rows per page — 15px/15px on service
   groups 03 and 05, 14px/14.5px on 04, and 16px/16px on 01. All six use the
   form that three of them already share, which is what the handoff's "one
   skeleton" means. Noted in the launch checklist. */
.checklist--tight .check { padding: 14px 0; }
.checklist--tight .check__text { font-size: 14.5px; }
.check__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-55);
  flex: 0 0 auto;
}
.check--live .check__dot { background: var(--accent); border-color: var(--accent); animation: abPulse 4s ease-in-out infinite; }
.check__text { font: 500 15px/1.4 var(--font); color: var(--ink-secondary); }
.check--live .check__text { color: var(--ink-heading); }

.aparts { display: grid; gap: 18px; }
.apart { border-left: 2px solid var(--line-16); padding-left: 16px; }
.apart:first-child { border-left-color: var(--accent); }
.apart__title { font: 600 15px/1.35 var(--font); color: var(--ink-heading); }
.apart__body { margin-top: 6px; font: 400 13.5px/1.6 var(--font); color: var(--ink-body); }

/* Mission / vision statements carry the strong body ink. */
.statement { margin: 0; font: 400 clamp(15px, 1.3cqi, 18px)/1.7 var(--font); color: var(--ink-strong); }

/* ------------------------------------------------------------- spec table */
.spec { display: grid; }
.spec__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-07);
}
.spec__row:last-child { border-bottom: none; }
.spec__key { font: 400 14.5px/1.4 var(--font); color: var(--ink-body); }
.spec__value { font: 600 14.5px/1.4 var(--font); color: var(--ink-heading); text-align: right; }

/* ------------------------------------------------------------- breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font: 500 12.5px/1 var(--font);
  color: var(--ink-muted);
  /* Wraps on a narrow screen without the extra leading changing the hero's
     height on a wide one. */
  row-gap: 8px;
  margin-bottom: clamp(28px, 3.4cqi, 52px);
}
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crumbs__current { color: var(--ink-secondary); }

/* ------------------------------------------------------------ service rows */
.rows { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line-09); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3cqi, 56px);
  padding: clamp(26px, 3cqi, 44px) clamp(6px, 1cqi, 16px);
  border-bottom: 1px solid var(--line-09);
  transition: background .3s;
}
.row:hover { background: var(--hover); color: var(--ink-heading); }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.row__n { flex: 0 0 auto; font: 600 12px/1 var(--font); letter-spacing: .2em; color: var(--accent); padding-top: 8px; }
.row__main { flex: 1.1 1 min(100%, 280px); min-width: 0; }
.row__title { display: block; font: 600 clamp(19px, 1.9cqi, 27px)/1.25 var(--font); color: var(--ink-heading); }
.row__desc { display: block; margin-top: 10px; font: 400 14.5px/1.65 var(--font); color: var(--ink-body); }
.row__subs {
  flex: 1 1 min(100%, 240px);
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  font: 400 14px/1.6 var(--font);
  color: var(--ink-secondary);
}
.row__arrow { flex: 0 0 auto; font-size: 20px; color: var(--accent); padding-top: 4px; }

/* ------------------------------------------------------- AlphaRoom lockup */
.ar-lockup {
  height: clamp(30px, 2.7cqi, 40px);
  width: auto;
  display: block;
  margin-bottom: 26px;
  /* The wordmark's measured width moves with font hinting. The viewBox has
     room for the worst case; this makes clipping impossible even if some
     renderer measures wider still. */
  overflow: visible;
}
.ar-lockup--hero { height: clamp(36px, 3.4cqi, 52px); margin-bottom: 26px; }
/* The wordmark is live text in an inlined SVG so it can reach the page's
 * @font-face. An SVG referenced through <img src> is an isolated document and
 * cannot. Size and tracking come from the asset's own attributes; only the
 * family has to be supplied here. */
.ar-lockup text { font-family: Poppins, sans-serif; font-weight: 600; }

/* ------------------------------------------------------------ door tablet */
.tablet-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tablet {
  width: 100%;
  max-width: 460px;
  background: var(--deep);
  border: 1px solid var(--line-12);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.tablet__screen {
  border-radius: 16px;
  background: var(--screen);
  border: 1px solid var(--line-06);
  padding: clamp(18px, 2cqi, 26px);
  display: grid;
  gap: 18px;
}
.tablet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tablet__room { font: 600 clamp(15px, 1.3cqi, 18px)/1.2 var(--font); color: var(--ink-heading); }
.tablet__meta { font: 400 12px/1.2 var(--font); color: var(--ink-muted); margin-top: 5px; }
.tablet__clock { font: 500 13px/1 var(--font); color: var(--ink-muted); }

.tablet__state { display: flex; align-items: center; gap: 14px; }
.tablet__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  animation: abPulse 3.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.tablet__word {
  font: 600 clamp(26px, 2.9cqi, 40px)/1 var(--font);
  letter-spacing: -0.02em;
  color: var(--accent);
}
.tablet__detail { font: 400 13.5px/1.5 var(--font); color: var(--ink-body); min-height: 2lh; }
.tablet__rule { height: 1px; background: var(--line-07); }
.tablet__agenda { display: grid; gap: 10px; }
.tablet__slot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 12.5px/1.4 var(--font);
  color: var(--ink-muted);
}
.tablet__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tablet__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 13px/1 var(--font);
  padding: 14px 18px;
  border-radius: 10px;
}
.tablet__action--ghost {
  background: transparent;
  color: var(--ink-secondary);
  font-weight: 500;
  border: 1px solid var(--line-14);
}

/* State 1 — free soon. State 2 — occupied. Set by the toggles. */
.tablet[data-state='1'] .tablet__dot { background: var(--status-soon); }
.tablet[data-state='1'] .tablet__word { color: var(--status-soon); }
.tablet[data-state='2'] .tablet__dot { background: var(--status-busy); }
.tablet[data-state='2'] .tablet__word { color: var(--status-busy); }

.tablet-toggles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* The design puts these at 40px. The handoff flags that they should be raised
   if the 44px touch target is to be met strictly, so they are. */
.chip {
  background: transparent;
  border: 1px solid var(--line-16);
  color: var(--ink-secondary);
  font: 500 12.5px/1 var(--font);
  padding: 11px 15px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color: var(--accent); color: var(--ink-heading); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[aria-pressed='true'] {
  background: var(--accent-12);
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------------- form */
.contact-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 3.4cqi, 64px);
  align-items: flex-start;
}
.form { flex: 1.4 1 min(100%, 420px); min-width: 0; display: grid; gap: 22px; }
.form__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 22px;
}
.field { display: grid; gap: 9px; }
.field__label { font: 500 12.5px/1 var(--font); letter-spacing: .06em; color: var(--ink-secondary); }
.field__optional { color: var(--ink-muted); font-weight: 400; letter-spacing: 0; }

.input, .textarea {
  font: 400 15px/1.4 var(--font);
  color: var(--ink-heading);
  background: var(--panel);
  border: 1px solid var(--line-14);
  border-radius: 10px;
  padding: 15px 16px;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
.textarea { line-height: 1.6; resize: vertical; min-height: 150px; }
.input:focus, .textarea:focus { border-color: var(--accent); }
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); }
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--status-busy); }

.field__error {
  font: 400 12.5px/1.5 var(--font);
  color: var(--status-busy);
  min-height: 0;
}
.field__error:empty { display: none; }

.topics { display: grid; gap: 12px; }
.topics__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.topic {
  background: transparent;
  border: 1px solid var(--line-16);
  color: var(--ink-secondary);
  font: 500 13px/1 var(--font);
  padding: 13px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.topic:hover { border-color: var(--accent); }
.topic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topic[aria-pressed='true'] {
  background: var(--accent-12);
  border-color: var(--accent);
  color: var(--accent);
}

.form__submit { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form__note { font: 400 13px/1.5 var(--font); color: var(--ink-muted); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.form__status {
  font: 400 14.5px/1.6 var(--font);
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line-14);
  background: var(--panel);
  color: var(--ink-secondary);
}
.form__status:empty { display: none; }
.form__status[data-tone='ok'] { border-color: var(--accent); color: var(--ink-heading); background: rgba(87, 208, 212, 0.1); }
.form__status[data-tone='bad'] { border-color: var(--status-busy); color: var(--ink-heading); }

.sidebar { flex: 1 1 min(100%, 280px); min-width: 0; display: grid; gap: 18px; }
.sidecard {
  background: var(--panel);
  border: 1px solid var(--line-09);
  border-radius: 18px;
  padding: clamp(24px, 2.6cqi, 34px);
}
.sidecard__label {
  font: 500 11.5px/1 var(--font);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.sidecard__link { display: inline-block; font: 500 14.5px/1.4 var(--font); color: var(--accent); }
.steps { display: grid; gap: 18px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step__n { font: 600 12px/1.5 var(--font); color: var(--accent); flex: 0 0 auto; }
.step__text { font: 400 14.3px/1.6 var(--font); color: var(--ink-secondary); }

/* The honeypot is off-screen rather than display:none — a bot that reads the
 * computed style skips a hidden field, and a real visitor never reaches it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------------------------- footer */
.footer {
  border-top: 1px solid var(--line-07);
  padding: clamp(44px, 5cqi, 76px) var(--pad-x) clamp(28px, 3cqi, 44px);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 3cqi, 56px);
}
.footer__logo { height: 52px; width: auto; display: block; opacity: .92; }
.footer__line { margin: 20px 0 0; max-width: 24em; font: 400 14px/1.7 var(--font); color: var(--ink-muted); }
.footer__head {
  font: 500 11.5px/1 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-footer);
  margin-bottom: 18px;
}
.footer__links { display: grid; gap: 12px; }
.footer__links a { font: 400 14.5px/1.4 var(--font); color: var(--ink-secondary); }
.footer__links a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: clamp(32px, 3.4cqi, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--line-07);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.footer__copy { font: 400 12.5px/1.4 var(--font); color: var(--ink-footer); }
.footer__tag {
  font: 500 11px/1.4 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-footer);
}

/* ------------------------------------------------------------------- 404 */
.notfound { display: grid; gap: 22px; max-width: 46em; }
.notfound__links { display: grid; gap: 12px; }
.notfound__links a { font: 500 15px/1.5 var(--font); }

/* --------------------------------------------------------------- reveals */
/* Content is visible by default. The reveal is opt-in, applied by script only
 * once the observer is known to work, so nothing can be left invisible by a
 * failed animation. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1);
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Continuous animation stops; nothing is hidden by it. */
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .header, .footer, .tablet-toggles { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------- touch targets (mobile) */
/* The design's buttons, nav links and chips already clear 44px. These are the
 * remaining inline links — breadcrumbs, footer columns, the 404 index. On a
 * pointer they are fine at the approved size and are left exactly as designed;
 * under the same 900px container width that swaps in the mobile nav, they get
 * a target a thumb can hit. */
@container (max-width: 899px) {
  .crumbs { gap: 4px; }
  .crumbs a,
  .crumbs__current {
    display: inline-block;
    padding: 7px 6px;
  }

  .footer__links { gap: 2px; }
  .footer__links a,
  .sidecard__link,
  .notfound__links a {
    display: block;
    padding: 12px 0;
  }
  .sidecard__link { display: inline-block; padding: 12px 0; }
}

/* The skip link's target. `tabindex="-1"` is what actually moves focus into
 * main when the fragment is followed — without it the browser scrolls there
 * but leaves focus in the header, so the next Tab goes back to the navigation
 * and the skip link achieves nothing for the people it exists for.
 *
 * It is focused programmatically, never tabbed to, so `:focus-visible` does
 * not match it and no ring appears. This rule only guarantees that. */
main[tabindex='-1']:focus { outline: none; }

/* ------------------------------------------- enquiries temporarily disabled */
/* The whole form lives in a fieldset so the server can disable every control
 * with one attribute when there is no mail configuration. A visitor must never
 * be able to fill this in and have the submission fail or disappear.
 *
 * `min-width: 0` is not optional: a fieldset defaults to `min-width:
 * min-content`, which stops the grid inside it shrinking and reintroduces
 * horizontal overflow on a narrow screen. */
.form__set {
  display: grid;
  gap: 22px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.form__unavailable {
  font: 400 14.5px/1.6 var(--font);
  color: var(--ink-heading);
  background: rgba(232, 192, 106, 0.1);
  border: 1px solid var(--status-soon);
  border-radius: 10px;
  padding: 16px 18px;
}
.form__unavailable[hidden] { display: none; }

/* Unmistakably inert, without hiding what the form asks for — someone can
 * still read it and know what to send us another way. */
.form__set[disabled] { opacity: .55; }
.form__set[disabled] .input,
.form__set[disabled] .textarea,
.form__set[disabled] .topic,
.form__set[disabled] .btn { cursor: not-allowed; }
.form__set[disabled] .btn--primary { background: var(--ink-muted); }