/* ==========================================================================
   TechXYZ website — site stylesheet, ported from the handoff's reference/site.css.
   Loaded AFTER css/tokens/styles.css (tokens + base layer).
   Breakpoints: mobile < 768 px · tablet 768–1199 px · desktop ≥ 1200 px
   Navigation: links shown from 1024 px, menu button below.
   ========================================================================== */

/* ---------- 1. Site tokens (on top of the design-system tokens) ---------- */
:root {
  --site-bg:            var(--neutral-50);
  --site-surface:       var(--neutral-0);
  --site-soft:          var(--azure-50);
  --site-strong:        var(--ink-900);
  --site-body:          var(--neutral-800);
  --site-muted:         var(--neutral-600);
  --site-eyebrow:       var(--azure-700);
  --site-border:        var(--neutral-300);
  --site-border-subtle: var(--neutral-200);
  --site-rule:          var(--ink-900);
  --site-icon-bg:       var(--ink-900);
  --site-numeral:       var(--azure-600);
  --site-dot-end:       var(--ink-900);
  --site-ink-section:   var(--ink-950);
  --site-card-border:   transparent;
  --site-footer-rule:   transparent;

  /* Fixed, identical in both themes */
  --site-ink:           var(--ink-900);
  --site-ink-raised:    var(--ink-800);
  --site-ink-deep:      var(--ink-950);
  --site-spark:         var(--azure-500);
  --site-spark-soft:    var(--azure-300);
  --site-on-ink:        rgba(255, 255, 255, 0.84);
  --site-on-ink-muted:  rgba(255, 255, 255, 0.72);
  --site-on-ink-line:   rgba(255, 255, 255, 0.32);

  --section-pad: clamp(64px, 9vw, 112px);
  --tile-pad:    clamp(24px, 3.4vw, 40px);

  color-scheme: light;
}

/* Dark theme: follows the system, unless data-theme forces a choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --site-bg: var(--ink-950); --site-surface: var(--ink-900); --site-soft: var(--ink-800);
    --site-strong: #ffffff; --site-body: #d6e1ea; --site-muted: #a3b6c6; --site-eyebrow: var(--azure-300);
    --site-border: rgba(255,255,255,0.16); --site-border-subtle: rgba(255,255,255,0.08); --site-rule: var(--azure-500);
    --site-icon-bg: var(--ink-800); --site-numeral: var(--azure-500); --site-dot-end: #ffffff;
    --site-ink-section: var(--ink-900); --site-card-border: rgba(255,255,255,0.12); --site-footer-rule: rgba(255,255,255,0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --site-bg: var(--ink-950); --site-surface: var(--ink-900); --site-soft: var(--ink-800);
  --site-strong: #ffffff; --site-body: #d6e1ea; --site-muted: #a3b6c6; --site-eyebrow: var(--azure-300);
  --site-border: rgba(255,255,255,0.16); --site-border-subtle: rgba(255,255,255,0.08); --site-rule: var(--azure-500);
  --site-icon-bg: var(--ink-800); --site-numeral: var(--azure-500); --site-dot-end: #ffffff;
  --site-ink-section: var(--ink-900); --site-card-border: rgba(255,255,255,0.12); --site-footer-rule: rgba(255,255,255,0.06);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--site-bg); color: var(--site-body); overflow-x: hidden; }
img { max-width: 100%; }
.container { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--section-pad); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: var(--z-toast);
  background: var(--site-spark); color: var(--ink-900); padding: 12px 16px; border-radius: var(--radius-md); font-weight: 700;
}
.skip-link:focus { top: 16px; }

.eyebrow-site {
  margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--site-eyebrow);
}
.on-ink .eyebrow-site { color: var(--site-spark-soft); }

.display-h2 {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; text-transform: uppercase; color: var(--site-strong);
}
.accent { color: var(--site-spark); }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- 3. Buttons (= design-system Button: primary/lg, and outline on ink) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--control-lg); padding: 0 28px; border-radius: var(--radius-md);
  font: var(--weight-semibold) var(--text-lg)/1 var(--font-sans); letter-spacing: 0.01em; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--primary:active { background: var(--color-primary-active); transform: scale(0.98); }
.btn--on-ink { background: transparent; color: #fff; border-color: var(--site-on-ink-line); padding: 0 20px; font-size: var(--text-md); }
.btn--on-ink:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.06); }
.btn--block { width: 100%; }
.btn:focus-visible { box-shadow: var(--ring-brand); border-radius: var(--radius-md); }

/* ---------- 4. Badge (= design-system Badge: soft variant with dot) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.01em; white-space: nowrap; background: var(--surface-sunken); color: var(--neutral-700);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral-500); flex: none; }
.badge--brand   { background: var(--azure-50);   color: var(--azure-700); }
.badge--brand::before { background: var(--azure-500); }
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--success::before { background: var(--success-500); }

/* ---------- 5. Header + hero (always on ink) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(70% 80% at 85% 10%, rgba(0,171,252,0.28) 0%, rgba(0,171,252,0) 55%), var(--site-ink);
}
/* The node graph strokes and fills with currentColor: its colour is the token, not the SVG. */
.graph { position: absolute; pointer-events: none; color: var(--site-spark); }
.hero .graph { top: -40px; right: -80px; width: 62%; min-width: 520px; opacity: 0.55; }

.site-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 16px; }
.site-header__logo { display: flex; align-items: center; min-height: 48px; }
.site-header__logo img { height: clamp(34px, 4vw, 44px); width: auto; display: block; }

.nav { display: none; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a { color: rgba(255,255,255,0.86); padding: 10px 0; }
.nav a:hover { color: #fff; }
.cta-pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  background: var(--site-spark); color: var(--ink-900) !important; font-weight: 700; font-size: 15px;
}
.cta-pill:hover { background: var(--azure-300); }
.nav-compact { display: flex; align-items: center; gap: 10px; }
.menu-button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: var(--radius-md); border: 1.5px solid var(--site-on-ink-line); background: transparent; color: #fff; cursor: pointer;
}
.menu-button .icon-close { display: none; }
.menu-button[aria-expanded="true"] .icon-open { display: none; }
.menu-button[aria-expanded="true"] .icon-close { display: block; }
.menu-panel {
  position: relative; margin: 0 16px; padding: 8px 20px; border-radius: 16px;
  background: var(--site-ink-raised); border: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; font: 700 20px/1.2 var(--font-display); text-transform: uppercase;
}
.menu-panel[hidden] { display: none; }
.menu-panel a { color: #fff; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.menu-panel a:last-child { color: var(--site-spark); border-bottom: 0; }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-compact, .menu-panel { display: none !important; }
}
/* The logo, the pill and the menu button need 336 px on one line, so below 385 px the pill
   broke onto two lines. Tightened, they need 308 px and fit from 357 px; below 360 px the pill
   goes, and the menu still lists Contact. Nothing changes from 385 px up. */
@media (max-width: 384px) {
  .site-header { column-gap: 16px; }
  .nav-compact .cta-pill { padding: 0 12px; }
}
@media (max-width: 359px) {
  .nav-compact .cta-pill { display: none; }
}

.hero__body { position: relative; padding-top: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
/* The tagline and the title. An inline style in the reference, a class here. */
.hero__heading { display: flex; flex-direction: column; gap: 24px; }
.tagline-site {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font-weight: var(--weight-light); font-size: 13px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--site-spark-soft);
}
.spark-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--site-spark); box-shadow: 0 0 0 4px rgba(0,171,252,0.25), 0 0 18px rgba(0,171,252,0.8); flex: none; }
.hero__title {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(30px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; color: #fff;
}
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px 56px; }
.hero__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-bottom: clamp(8px, 6vw, 88px); }
.hero__lead { margin: 0; max-width: 520px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--site-on-ink); }
.hero__lead strong { color: #fff; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.hero__screens { flex: 1.5 1 560px; min-width: 0; perspective: 1800px; margin-bottom: -40px; }
.hero__stack, .soon__stack { position: relative; aspect-ratio: 1.45; transform: rotateY(-14deg) rotateX(9deg) rotateZ(2deg); transform-style: preserve-3d; }
.hero__stack img, .soon__stack img {
  position: absolute; display: block; height: auto; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.shot-mail  { top: 0; right: 0; width: 74%; }
.shot-score { top: 24%; left: 0; width: 62%; }
.shot-gym   { bottom: 0; right: 8%; width: 50%; }

/* ---------- 6. Audiences band ---------- */
.audiences { background: var(--site-spark); color: var(--ink-900); }
.audiences ul {
  margin: 0 auto; list-style: none; padding-block: 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font: 700 clamp(16px, 2.2vw, 30px)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
}
.audiences li { display: flex; align-items: center; gap: 24px; }
.audiences li + li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-900); }
@media (max-width: 767px) { .audiences li + li::before { display: none; } .audiences ul { justify-content: flex-start; gap: 6px 20px; } }

/* ---------- 7. Services ---------- */
.services { display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: flex-start; }
.services__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.services__intro p:last-child { margin: 0; font-size: 17px; line-height: 1.65; color: var(--site-muted); }
.service-list { flex: 1.7 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--site-rule); }
.service { display: flex; gap: clamp(16px, 2vw, 24px); align-items: flex-start; padding-block: 28px; border-bottom: 1px solid var(--site-border); }
.service__icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--site-icon-bg); color: var(--site-spark); display: flex; align-items: center; justify-content: center; }
.service h3 { margin: 0 0 6px; font-size: clamp(19px, 1.6vw, 22px); color: var(--site-strong); }
.service p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--site-muted); }

/* ---------- 8. Projects (ink, bento) ---------- */
.projects { background: var(--site-ink-section); color: #fff; }
.projects .container { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.projects__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: clamp(8px, 2vw, 32px); }
.projects__head > div { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.projects__head .display-h2 { color: #fff; font-size: clamp(28px, 4.4vw, 60px); line-height: 1.02; }
.projects__head > p { flex: 0 1 420px; min-width: 0; margin: 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.78); }
.projects__row { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 24px); }

.project {
  min-width: 0; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--site-ink-raised); border: 1px solid rgba(255,255,255,0.08);
}
.project--w500 { flex: 1 1 500px; } .project--w460 { flex: 1 1 460px; } .project--w560 { flex: 1.4 1 560px; } .project--w380 { flex: 1 1 380px; }
.project__body { padding: var(--tile-pad) var(--tile-pad) 28px; display: flex; flex-direction: column; gap: 16px; }
.project--text .project__body { padding-bottom: var(--tile-pad); flex: 1; }
.project__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The name and the kind of the featured tile. An inline style in the reference, a class here. */
.project__title { display: flex; flex-direction: column; gap: 6px; }
.project__index { font: 700 14px/1 var(--font-display); letter-spacing: 0.08em; color: var(--site-spark-soft); }
.project h3 { margin: 0; font: 800 clamp(28px, 3vw, 40px)/1 var(--font-display); color: #fff; }
.project--text h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; }
.project__kind { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-spark-soft); }
.project__desc { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 560px; }
.project__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--site-spark); }
.project__link:hover { color: var(--azure-300); }
.project__shot { margin-top: auto; padding-left: var(--tile-pad); }
.project__shot img {
  display: block; width: 100%; height: auto; object-fit: cover; object-position: left top;
  border-top-left-radius: 14px; border: 1px solid rgba(255,255,255,0.12); border-right: 0; border-bottom: 0;
}
.chips { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding-left: 0; margin-bottom: 0; font: 12px/1.4 var(--font-mono); color: rgba(255,255,255,0.85); }
.chips li { padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); }

/* Featured tile (TeamXYZ): always light, dark theme included */
.project--feature {
  background: #fff; color: var(--neutral-800); border: 0; padding: var(--tile-pad); gap: 20px;
  box-shadow: 0 0 0 1px rgba(0,171,252,0.4), 0 20px 60px rgba(0,171,252,0.18);
}
.project--feature .project__index, .project--feature .project__kind { color: var(--azure-700); }
.project--feature h3 { color: var(--ink-900); font-size: clamp(30px, 3.6vw, 48px); }
.project--feature .project__pitch { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--ink-900); }
.project--feature .chips { color: var(--neutral-700); }
.project--feature .chips li { background: var(--surface-sunken); }
.bullets { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; font-size: 15px; }
.bullets li { display: flex; gap: 10px; align-items: flex-start; }
.bullets li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--site-spark); }

/* ---------- 9. Method ---------- */
.method { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }
.method__head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px 32px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step__track { display: flex; align-items: center; }
.step__track::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--site-spark); box-shadow: 0 0 0 5px rgba(0,171,252,0.2); }
.step__track::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--site-spark), rgba(0,171,252,0.15)); }
.step:last-child .step__track::before { background: var(--site-dot-end); }
.step:last-child .step__track::after { display: none; }
.step__num { font: 800 clamp(64px, 6vw, 88px)/0.9 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--site-numeral); }
.step h3 { margin: 0; font-size: 20px; color: var(--site-strong); }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--site-muted); }

/* ---------- 10. Commitments ---------- */
.commitments { background: var(--site-surface); border-block: 1px solid var(--site-border-subtle); }
.commitments ul { margin: 0 auto; list-style: none; padding-block: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 40px; }
.commitments li { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 3px solid var(--site-spark); }
.commitments strong { font-size: 16px; color: var(--site-strong); }
.commitments span { font-size: 14px; line-height: 1.55; color: var(--site-muted); }

/* ---------- 11. About ---------- */
.about { background: var(--site-soft); }
.about .container { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }
.quote { margin: 0; display: flex; flex-direction: column; gap: 20px; max-width: 1040px; }
.quote::before { content: "“"; font: 800 clamp(72px, 7vw, 96px)/0.5 var(--font-display); color: var(--site-spark); }
.quote p { margin: 0; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.2; font-weight: 700; color: var(--site-strong); text-wrap: balance; }
.about__row { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.about__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about__text p:not(.eyebrow-site) { margin: 0; font-size: 17px; line-height: 1.7; color: var(--site-body); }
.about__card {
  flex: 1 1 340px; min-width: 0; background: var(--site-ink); color: #fff; border: 1px solid var(--site-card-border);
  border-radius: var(--radius-xl); padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 22px;
}
.person { display: flex; align-items: center; gap: 16px; }
.person__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--site-spark); color: var(--ink-900); display: flex; align-items: center; justify-content: center; font: 800 18px/1 var(--font-display); }
.person__name { margin: 0; font-weight: 700; font-size: 17px; }
.person__role { margin: 0; font-size: 14px; color: var(--site-on-ink-muted); }
.facts { margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.facts div { display: flex; gap: 12px; align-items: flex-start; }
.facts dt { flex: none; color: var(--site-spark); }
.facts dd { margin: 0; color: rgba(255,255,255,0.86); }

/* ---------- 12. Contact ---------- */
.contact {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(70% 120% at 0% 100%, rgba(0,171,252,0.24) 0%, rgba(0,171,252,0) 55%), var(--site-ink);
}
.contact .graph { bottom: -120px; right: -60px; width: 46%; min-width: 420px; opacity: 0.45; }
.contact .container { position: relative; padding-block: clamp(72px, 10vw, 120px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.contact__title { margin: 0; font: 800 clamp(28px, 8.5vw, 136px)/0.92 var(--font-display); text-transform: uppercase; color: #fff; white-space: nowrap; }
.contact__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; }
.contact__row > p { flex: 1 1 420px; min-width: 0; margin: 0; max-width: 560px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--site-on-ink); }
.contact__actions { flex: 1 1 320px; max-width: 400px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---------- 13. Footer ---------- */
.site-footer { background: var(--site-ink-deep); color: var(--site-on-ink-muted); border-top: 1px solid var(--site-footer-rule); }
.site-footer .container { padding-block: 48px 40px; display: flex; flex-direction: column; gap: 32px; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer__top img { height: 40px; width: auto; display: block; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.site-footer a { color: rgba(255,255,255,0.78); padding-block: 10px; }
.site-footer a:hover { color: #fff; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; }
.site-footer__bottom p { margin: 0; }

/* ---------- 14. Specificity adjustments ---------- */
.nav .cta-pill { padding: 0 18px; }
/* The legal link has no vertical padding in the reference, so its hit area is ~22 px tall.
   A pseudo-element brings it to 44 px without moving anything on screen. */
.site-footer__bottom a { padding-block: 0; position: relative; }
.site-footer__bottom a::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); }

/* ---------- 15. Accessibility adjustments (RGAA audit, lot 5) ---------- */
/* WCAG 1.4.12: with the text-spacing test styles applied at 320 px, "CONSTRUISONS" no longer
   fits its line and "Parlons de votre projet" no longer fits its nowrap button, and both ran
   past the viewport. These rules only act when that happens: a word breaks only if it cannot
   fit a line on its own, and a button only wraps if its label cannot fit. At normal spacing the
   page renders as before, bar the 320–359 px padding adjustment below. */
/* Headings only break below 768 px, where every column spans the container, so a word that
   does not fit would run off the screen. Wider, the reference lets "CONSTRUISONS" overhang its
   column into the gap, and breaking it there would change the design. */
@media (max-width: 767px) {
  h1, h2, h3 { overflow-wrap: break-word; }
}
.btn { height: auto; min-height: var(--control-lg); padding-block: 8px; white-space: normal; text-align: center; }
/* "Parlons de votre projet" needs 274.5 px and the column is 272 px wide at 320 px: the
   reference let it run 2.5 px into the gutter, and now that buttons may wrap it would break
   onto two lines. 24 px of side padding keeps it on one. */
@media (max-width: 359px) {
  .btn--primary { padding-inline: 24px; }
}
/* Primary button contrast (handoff § 9, point 7): white on --color-primary (--azure-600) is
   3.8:1, short of the 4.5:1 an 18 px semibold label needs. Jon chose the fill one step darker,
   here rather than in the design system, which is served as handed off: --azure-700 gives
   5.8:1, and hover and pressed move down a step with it. */
.btn--primary { background: var(--azure-700); }
.btn--primary:hover { background: var(--azure-800); }
.btn--primary:active { background: var(--azure-900); }
/* <main> takes focus from the skip link only to move the reading position: it is not a
   control, so it shows no ring. */
#contenu:focus { box-shadow: none; outline: none; }

/* ---------- 16. Secondary pages (legal notice, not found, error) ---------- */
/* Not in the reference, which is one page: they reuse its type, colours and rhythm. */
.status-page__body, .legal__body { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.status-page__body > p:not(.eyebrow-site) { margin: 0; font-size: 17px; line-height: 1.65; color: var(--site-muted); }
.legal__body { gap: clamp(28px, 3vw, 40px); }
.legal__block { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--site-border); }
.legal__block h2 { margin: 0; font-size: 20px; color: var(--site-strong); }
.legal__block p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--site-body); }
.legal__facts { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
.legal__facts div { display: flex; flex-wrap: wrap; gap: 0 16px; }
.legal__facts dt { flex: 0 0 220px; font-weight: var(--weight-semibold); color: var(--site-strong); }
.legal__facts dd { flex: 1 1 260px; margin: 0; color: var(--site-body); }

/* ---------- 17. Coming-soon page (docs/techxyz-coming-soon) ---------- */
/* Ported from the coming-soon handoff's style.css, onto the site's classes and tokens. It is
   dark only: App.razor holds data-theme="dark" while it is up. */
.soon {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--site-on-ink);
  /* The coming-soon handoff loads tokens.css alone, without the design system's base layer:
     its kerning settings and its text-wrap: pretty on paragraphs move line breaks, so they are
     set back here and below. */
  font-feature-settings: normal; text-rendering: auto;
  background:
    radial-gradient(70% 70% at 90% 0%, rgba(0,171,252,0.28) 0%, rgba(0,171,252,0) 55%),
    radial-gradient(60% 60% at 0% 100%, rgba(0,171,252,0.14) 0%, rgba(0,171,252,0) 60%),
    var(--site-ink);
}
.soon p { text-wrap: wrap; }
.soon__backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.soon .graph { top: -40px; right: -80px; width: 62%; min-width: 520px; opacity: 0.55; }
/* A container in a flex column only fills it with an explicit width: its auto margins
   would shrink it to its content. */
.soon .container { position: relative; width: 100%; }
/* Underlined, as the handoff's browser default leaves them: the address in its sentence is
   then a link by more than its colour (RGAA 10.6). */
.soon a:not(.btn) { color: var(--site-spark-soft); text-decoration: underline; }
.soon a:not(.btn):hover { color: #fff; }

.soon__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 20px; }
.soon__header img { display: block; height: clamp(34px, 4vw, 44px); width: auto; }
.soon__logo { display: flex; align-items: center; min-height: 44px; }
.soon__status {
  margin: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #fff; background: rgba(12,34,54,0.6);
}
.soon__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--site-spark); box-shadow: 0 0 0 4px rgba(0,171,252,0.25), 0 0 14px rgba(0,171,252,0.8); flex: none; }

.soon__main { flex: 1; display: flex; flex-direction: column; }
.soon__hero {
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px;
  padding-block: clamp(24px, 4vw, 48px) clamp(48px, 5vw, 64px);
}
.soon__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.soon__title {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(30px, 4.6vw, 68px); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; color: #fff;
}
.soon__lead { margin: 0; max-width: 540px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; }
.soon__lead strong { color: #fff; font-weight: var(--weight-bold); }
.soon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
/* Its button has no border, so it is 3 px narrower than the site's. */
.soon__actions .btn { letter-spacing: normal; border-width: 0; }
.soon__actions .icon { width: 20px; height: 20px; }
.soon__mail { margin: 0; color: var(--site-on-ink-muted); }
.soon__mail a { font-weight: var(--weight-semibold); }
.soon__screens { flex: 1.2 1 480px; min-width: 0; perspective: 1800px; }

.soon__band { position: relative; background: var(--site-spark); color: var(--ink-900); }
/* A wrapping row where the handoff has a grid of minmax(110px, max-content) tracks: those tracks
   shrink below the labels' width, which are nowrap, and the labels ran into each other at 320,
   360 and 410–600 px. The row spreads them the same way wherever the grid did not overlap. */
.soon__band ul {
  margin: 0 auto; list-style: none; padding-block: 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px;
  font: 700 clamp(14px, 1.9vw, 24px)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
}
/* 110 px, the grid's minimum track, so "PME" keeps its place. */
.soon__band li { display: flex; align-items: center; gap: 10px; min-width: 110px; white-space: nowrap; }
.soon__band li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-900); }

/* The legal notice and the error pages: their column starts at the logo's edge, as the
   handoff's legal page has it, rather than centred, and they sit closer to the header. */
.soon .legal, .soon .status-page { padding-block: clamp(32px, 6vw, 72px); }
.soon .legal__body, .soon .status-page__body { max-width: var(--container-xl); }
.soon .legal__body > *, .soon .status-page__body > * { max-width: 760px; }

.soon__footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  padding-block: 24px; font-size: var(--text-sm); color: var(--site-on-ink-muted);
}
.soon__footer p { margin: 0; }
.soon .soon__footer a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,0.82); }
.soon .soon__footer a:hover { color: #fff; }