/* =============================================================================
   GNC TECH - "Engineered Motion" (refinement 2)
   Public site stylesheet. Admin uses admin/assets/css/admin.css.

   Environments alternate: midnight (dark) / white (light) / ice.
   Motion is opt-in: html.motion is set by site.js only when the visitor does
   not prefer reduced motion. Without JS everything is visible and static.
   The homepage product hero alternates prominence gently on desktop.
   ========================================================================== */

/* 1. Fonts - Manrope variable (SIL OFL 1.1, assets/fonts/OFL.txt) ----------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* 2. Tokens ------------------------------------------------------------------ */
:root {
  --mid-950: #030d1c;
  --mid-900: #061731;
  --mid-850: #08203f;
  --mid-800: #0b2a50;
  --mid-700: #123a68;

  --teal-200: #a9f0e2;
  --teal-300: #5fe0c8;
  --teal-400: #35c9b0;
  --teal-600: #0b7d71;
  --blue-400: #4d8dff;
  --blue-500: #2f7cf6;
  --blue-600: #1c5fd0;

  --white: #ffffff;
  --ice-50: #f4f7fb;
  --ice-100: #e9f0f7;
  --ice-200: #d7e2ee;

  --ink: #071a33;
  --text: #2c3a50;
  --muted: #56647a;
  --on-dark: #f4f8fd;
  --on-dark-2: #b8c6da;
  --on-dark-3: #8496b0;

  --line: #dbe3ed;
  --line-strong: #c3cfdd;
  --line-dark: rgba(150, 180, 220, 0.16);
  --line-dark-strong: rgba(150, 180, 220, 0.3);

  --success-bg: #e6f7f1;
  --success-text: #0a6a49;
  --error-bg: #fdeeee;
  --error-text: #a3261f;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --fs-meta: 0.75rem;
  --fs-small: 0.9375rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  --fs-lead: clamp(1.0938rem, 1rem + 0.38vw, 1.3125rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.15rem + 2.3vw, 3.375rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 2.9vw, 4rem);
  --fs-display: clamp(2.5rem, 1.2rem + 4.3vw, 5rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --section-y: clamp(3.75rem, 2.4rem + 4.4vw, 6.5rem);

  --container: 75rem;
  --narrow: 44rem;
  --gutter: clamp(1.25rem, 0.5rem + 2.6vw, 2.5rem);
  --header-h: 4.5rem;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-frame: 0 32px 70px -36px rgba(1, 8, 20, 0.75), 0 0 0 1px rgba(150, 180, 220, 0.12);
  --shadow-pop: 0 28px 60px -24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(150, 180, 220, 0.14);
  --shadow-light: 0 24px 60px -36px rgba(7, 26, 51, 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* arrive, overshoot a hair, settle (signature service entrance) */
  --ease-settle: cubic-bezier(0.2, 1.14, 0.34, 1);
  --t-fast: 150ms;
  --t-base: 260ms;
  --t-slow: 900ms;
}

/* 3. Base -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--mid-950);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 450;
  color: var(--text);
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.has-open-menu {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  margin: 0;
  text-wrap: pretty;
}

p + p {
  margin-top: 1em;
}

a {
  color: var(--blue-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.env-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.cta-final :focus-visible {
  outline-color: var(--teal-300);
}

::selection {
  background: var(--teal-300);
  color: var(--mid-950);
}

.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--teal-300);
  color: var(--mid-950);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: var(--ease-out);
}

/* 4. Layout & environments ---------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--narrow));
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section__foot {
  margin-top: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}

.env-light {
  background: var(--white);
}

.env-ice {
  background: var(--ice-50);
}

.env-dark {
  position: relative;
  background: var(--mid-900);
  color: var(--on-dark-2);
  isolation: isolate;
}

.env-dark h1,
.env-dark h2,
.env-dark h3,
.env-dark h4 {
  color: var(--on-dark);
}

.env-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
}

/* 5. Typography system --------------------------------------------------------- */
.sec-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.sec-title {
  max-width: 18ch;
  font-size: var(--fs-h2);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.sec-lead {
  max-width: 32rem;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.env-dark .sec-lead {
  color: var(--on-dark-2);
}

@media (min-width: 960px) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--s-12);
  }

  .sec-head--split .sec-lead {
    padding-bottom: 0.3rem;
  }
}

/* 6. Buttons & links -------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-5);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--t-base) var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn:hover svg:last-of-type,
.btn:focus-visible svg:last-of-type {
  transform: translateX(3px);
}

.btn--lg {
  min-height: 3.125rem;
  padding: 0 var(--s-6);
  font-size: 1rem;
}

.btn--sm {
  min-height: 2.375rem;
  padding: 0 var(--s-4);
  font-size: 0.875rem;
}

.btn--signal {
  background: var(--teal-300);
  color: var(--mid-950);
}

.btn--signal::before {
  background: var(--white);
}

.btn--signal:hover {
  color: var(--mid-950);
}

.btn--ghost {
  border-color: var(--line-dark-strong);
  background: transparent;
  color: var(--on-dark);
}

.btn--ghost::before {
  background: rgba(150, 180, 220, 0.12);
}

.btn--ghost:hover {
  border-color: var(--teal-300);
  color: var(--on-dark);
}

.btn--ink {
  background: var(--mid-900);
  color: var(--white);
}

.btn--ink::before {
  background: var(--blue-600);
}

.btn--ink:hover {
  color: var(--white);
}

.btn:focus-visible {
  outline-offset: 4px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.link-arrow svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--blue-600);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

.env-dark .link-arrow,
.site-header .link-arrow {
  color: var(--on-dark);
}

.env-dark .link-arrow:hover,
.site-header .link-arrow:hover {
  color: var(--teal-300);
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* 7. Header - three zones, floating glass bar ------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--on-dark);
}

.site-header__bar {
  padding-top: 0.625rem;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-4);
  height: 3.625rem;
  padding: 0 var(--s-2) 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: 16px;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.site-header.is-scrolled .site-header__inner,
.has-open-menu .site-header__inner {
  border-color: var(--line-dark);
  background: rgba(6, 23, 49, 0.72);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border-radius: var(--r-xs);
}

.brand img {
  width: auto;
  height: 2.125rem;
}

.logo-plate {
  display: inline-flex;
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-sm);
  background: var(--white);
}

.logo-plate img {
  height: 1.75rem;
}

.primary-nav {
  position: relative;
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
}

.nav-item--has-panel {
  position: static;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--on-dark-2);
  font-size: 0.90625rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--on-dark);
  background: rgba(150, 180, 220, 0.08);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-300), var(--blue-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}

.nav-link.is-active {
  color: var(--on-dark);
}

.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-link .chevron {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.8;
  transition: transform var(--t-base) var(--ease-out);
}

.nav-link[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* Popovers: services panel + language menu (soft open, quicker close) */
html.js [data-popover] {
  opacity: 0;
  transition: opacity 130ms var(--ease-in), transform 130ms var(--ease-in);
}

html.js [data-popover].is-open {
  opacity: 1;
  transition: opacity 210ms var(--ease-out), transform 210ms var(--ease-out);
}

/* Services panel - independent floating panel with a deliberate gap */
.nav-panel {
  position: absolute;
  top: calc(100% + 1.125rem);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
  gap: var(--s-6);
  width: min(52rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(26rem 14rem at 0% 0%, rgba(53, 201, 176, 0.1), transparent 70%),
    rgba(6, 23, 49, 0.96);
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%);
  transform-origin: top center;
}

html.js .nav-panel:not(.is-open) {
  transform: translateX(-50%) translateY(-6px) scale(0.98);
}

.nav-panel[hidden] {
  display: none;
}

/* Invisible hover bridge for the no-JS hover fallback */
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.25rem;
}

.nav-panel__intro {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-right: var(--s-5);
  border-right: 1px solid var(--line-dark);
}

.nav-panel__title {
  color: var(--on-dark);
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.nav-panel__note {
  color: var(--on-dark-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

.nav-panel__groups {
  columns: 3 12rem;
  column-gap: var(--s-5);
}

.nav-panel__group {
  break-inside: avoid;
  margin-bottom: var(--s-4);
}

.nav-panel__module {
  margin-bottom: var(--s-1);
  padding-left: 0.6rem;
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-panel__group ul {
  list-style: none;
}

.nav-panel__link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.nav-panel__icon {
  width: 1rem;
  height: 1rem;
  color: var(--teal-300);
  opacity: 0.8;
}

.nav-panel__link:hover,
.nav-panel__link:focus-visible,
.nav-panel__link.is-active {
  color: var(--on-dark);
  background: rgba(150, 180, 220, 0.08);
}

html.no-js .nav-item--has-panel:hover .nav-panel,
html.no-js .nav-item--has-panel:focus-within .nav-panel {
  display: grid;
}

html.no-js .lang-switch:hover .lang-switch__menu,
html.no-js .lang-switch:focus-within .lang-switch__menu {
  display: block;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--s-1);
}

.lang-switch {
  position: relative;
  display: none;
}

.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0 0.65rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--on-dark-2);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.lang-switch__button .icon {
  width: 1rem;
  height: 1rem;
}

.lang-switch__button:hover,
.lang-switch__button[aria-expanded="true"] {
  color: var(--on-dark);
  background: rgba(150, 180, 220, 0.08);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 10rem;
  padding: 0.375rem;
  border-radius: var(--r-md);
  background: rgba(6, 23, 49, 0.97);
  box-shadow: var(--shadow-pop);
  list-style: none;
  transform-origin: top right;
}

html.js .lang-switch__menu:not(.is-open) {
  transform: translateY(-6px) scale(0.98);
}

.lang-switch__menu[hidden] {
  display: none;
}

.lang-switch__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 2.5rem;
  padding: 0 0.65rem;
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  font-size: 0.90625rem;
  font-weight: 600;
  text-decoration: none;
}

.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible {
  background: rgba(150, 180, 220, 0.08);
  color: var(--on-dark);
}

.lang-switch__menu a[aria-current="true"] {
  color: var(--teal-300);
}

.lang-switch__menu abbr {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  text-decoration: none;
  opacity: 0.7;
}

/* Reserved slot: customer login (feature flag, hidden until the portal exists) */
.header-login {
  display: none;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0 0.65rem;
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.header-login:hover {
  color: var(--on-dark);
  background: rgba(150, 180, 220, 0.08);
}

/* Signed-in customer: a quiet account chip instead of the login link. */
.header-account {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.2rem 0.85rem 0.2rem 0.25rem;
  border: 1px solid rgba(95, 224, 200, 0.28);
  border-radius: 999px;
  background: rgba(95, 224, 200, 0.06);
  color: var(--on-dark);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.header-account:hover,
.header-account:focus-visible,
.header-account[aria-current="page"] {
  border-color: var(--teal-300);
  background: rgba(95, 224, 200, 0.1);
}

.header-account__avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--teal-300), #2f7cf6);
  color: var(--mid-950);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.header-account__text {
  display: grid;
  line-height: 1.15;
}

.header-account__label {
  color: var(--on-dark-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.header-account__name {
  max-width: 9rem;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu__account {
  justify-content: flex-start;
  gap: 0.6rem;
}

.mobile-menu__account .header-account__avatar {
  width: 1.75rem;
  height: 1.75rem;
}

.header-cta {
  display: none;
  margin-left: var(--s-1);
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  margin-left: var(--s-1);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-sm);
  background: transparent;
}

.menu-toggle__bars {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.6875rem;
}

.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
  transition: transform var(--t-base) var(--ease-out), top var(--t-base) var(--ease-out);
}

.menu-toggle__bars span:first-child {
  top: 0;
}

.menu-toggle__bars span:last-child {
  top: calc(100% - 2px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* Mobile menu - immersive full screen */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-10);
  background:
    radial-gradient(36rem 26rem at 100% 0%, rgba(53, 201, 176, 0.13), transparent 70%),
    var(--mid-950);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__inner {
  display: grid;
  gap: var(--s-8);
}

.mobile-menu__list {
  display: grid;
  list-style: none;
}

.mobile-menu__list > li {
  border-bottom: 1px solid var(--line-dark);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.5rem;
  padding: var(--s-2) 0;
  color: var(--on-dark);
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.mobile-menu__link::-webkit-details-marker {
  display: none;
}

.mobile-menu__link.is-active {
  color: var(--teal-300);
}

.mobile-menu__group > summary .chevron {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  color: var(--on-dark-3);
  transition: transform var(--t-base) var(--ease-out);
}

.mobile-menu__group[open] > summary .chevron {
  transform: rotate(180deg);
}

.mobile-menu__sub {
  display: grid;
  gap: 0.125rem;
  padding: 0 0 var(--s-4);
  list-style: none;
}

.mobile-menu__sub a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  color: var(--on-dark-2);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu__sub a.is-active,
.mobile-menu__sub a[aria-current="page"] {
  color: var(--teal-300);
}

.mobile-menu__sub .icon {
  color: var(--teal-300);
}

.mobile-menu__footer {
  display: grid;
  gap: var(--s-5);
}

.mobile-menu__langs {
  display: flex;
  gap: var(--s-2);
  list-style: none;
}

.mobile-menu__langs a {
  display: inline-grid;
  place-items: center;
  min-width: 3.25rem;
  min-height: 2.75rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu__langs a[aria-current="true"] {
  border-color: var(--teal-300);
  color: var(--teal-300);
}

.mobile-menu__contact {
  display: grid;
  gap: var(--s-2);
}

.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--on-dark-2);
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu__contact .icon {
  color: var(--teal-300);
}

html.motion .mobile-menu:not([hidden]) .mobile-menu__list > li,
html.motion .mobile-menu:not([hidden]) .mobile-menu__footer {
  animation: menu-row 480ms var(--ease-out) both;
}

html.motion .mobile-menu__list > li:nth-child(2) { animation-delay: 35ms; }
html.motion .mobile-menu__list > li:nth-child(3) { animation-delay: 70ms; }
html.motion .mobile-menu__list > li:nth-child(4) { animation-delay: 105ms; }
html.motion .mobile-menu__list > li:nth-child(5) { animation-delay: 140ms; }
html.motion .mobile-menu__list > li:nth-child(6) { animation-delay: 175ms; }
html.motion .mobile-menu__list > li:nth-child(7) { animation-delay: 210ms; }
html.motion .mobile-menu:not([hidden]) .mobile-menu__footer { animation-delay: 250ms; }

@keyframes menu-row {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (min-width: 385px) {
  .header-cta {
    display: inline-flex;
  }
}

@media (min-width: 1100px) {
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-6);
  }

  .primary-nav,
  .lang-switch {
    display: block;
  }

  .header-login,
  .header-account {
    display: inline-flex;
  }

  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
}

/* 8. Homepage hero - GNC Assembly ------------------------------------------------ */
/* hero-manifest:begin - GENERATED by tools/hero-assembly/normalize.php (do not edit) */
.hero--assembly {
  --scene-w: 1672;
  --scene-h: 941;
  --frame-x: 572;
  --frame-y: 13;
  --frame-w: 1085;
  --frame-h: 883;
}
.scene__module--web {
  --vx: -110.9;
  --vy: -45.9;
}
.scene__module--mobile {
  --vx: 95;
  --vy: -55.5;
}
.scene__module--qr {
  --vx: -42.3;
  --vy: 30.3;
}
.scene__module--software {
  --vx: 67.6;
  --vy: 46.4;
}
.scene__module--systems {
  --vx: 0;
  --vy: 118;
}
/* hero-manifest:end */

/* Calm and immediately readable: copy left, the complete GNC ecosystem right.
   One load-time entrance (section 21), then the hero is static. */
.hero {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(52rem 34rem at 0% 0%, rgba(22, 58, 88, 0.55), transparent 70%),
    linear-gradient(165deg, #071a2c 0%, #04101e 46%, #01070f 100%);
  color: var(--on-dark-2);
  isolation: isolate;
}

.hero__stage {
  position: relative;
  display: grid;
  align-content: center;
  padding: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 3rem)) 0 var(--s-12);
}

.hero__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-5);
  max-width: 40rem;
}

.hero__kicker {
  color: var(--teal-300);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__title {
  color: var(--on-dark);
  font-size: var(--fs-display);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.hero__lead {
  max-width: 34rem;
  color: var(--on-dark-2);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.hero__actions {
  margin-top: var(--s-1);
}

/* The visual box is the assembly frame (union of the assembled layers, from
   the manifest). The full 1672 x 941 scene is offset so the frame fills it. */
.hero__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 40rem);
  aspect-ratio: var(--frame-w) / var(--frame-h);
  container-type: inline-size;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  display: none;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.5rem;
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: color var(--t-fast) var(--ease-out);
}

.hero__scroll-line {
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--teal-300), var(--line-dark-strong));
}

.hero__scroll:hover {
  color: var(--teal-300);
}

@media (min-width: 640px) {
  .hero__scroll {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .hero__stage {
    min-height: min(100svh, 58rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(3rem, 1rem + 3vw, 4.5rem);
  }

  /* Substantial but bounded: limited by the column (plus a bleed towards the
     viewport edge) and by the viewport height. */
  .hero__visual {
    --bleed: max(0px, calc((100vw - var(--container)) / 2 - 1.5rem));
    justify-self: end;
    width: min(100% + var(--bleed), (100svh - var(--header-h) - 9rem) * var(--frame-w) / var(--frame-h));
    margin-right: calc(-1 * var(--bleed));
  }
}

/* Assembly scene ------------------------------------------------------------------ */
.scene {
  position: absolute;
  top: calc(var(--frame-y) * -100cqw / var(--frame-w));
  left: calc(var(--frame-x) * -100cqw / var(--frame-w));
  width: calc(var(--scene-w) * 100cqw / var(--frame-w));
  aspect-ratio: var(--scene-w) / var(--scene-h);
  pointer-events: none;
}

.scene__backdrop,
.scene__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Registered plate; every edge fades into the hero tone (longest on the calm
   copy side) so no plate boundary is ever visible. */
.scene__backdrop {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.scene__svg {
  overflow: visible;
}

.scene__halo {
  fill: url(#scene-halo);
  opacity: 0.72;
}

/* Docking terminals: smoked glass bar, graphite collar, cyan interior signal. */
.scene__terminal-top {
  fill: rgba(150, 214, 232, 0.2);
  stroke: rgba(150, 236, 248, 0.78);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.scene__terminal-side {
  fill: rgba(28, 74, 98, 0.62);
  stroke: rgba(110, 214, 236, 0.6);
  stroke-width: 1;
  stroke-linejoin: round;
}

.scene__terminal-cap {
  fill: rgba(60, 120, 146, 0.55);
  stroke: rgba(150, 236, 248, 0.8);
  stroke-width: 1;
}

.scene__terminal-signal {
  fill: none;
  stroke: var(--teal-200);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  opacity: 0.75;
}

.scene__collar-top {
  fill: #3b4654;
  stroke: rgba(205, 220, 235, 0.42);
  stroke-width: 0.9;
}

.scene__collar-side {
  fill: #1c2530;
  stroke: rgba(160, 190, 215, 0.3);
  stroke-width: 0.9;
}

/* Rails: static conduits from each module terminal into its core port. */
.scene__rail path {
  fill: none;
  stroke-linecap: butt;
}

.scene__rail-bed {
  stroke: rgba(95, 224, 200, 0.2);
  stroke-width: 12;
}

.scene__rail-core {
  stroke: rgba(3, 13, 28, 0.88);
  stroke-width: 9;
}

.scene__rail-line {
  stroke: rgba(127, 236, 214, 0.7);
  stroke-width: 1.4;
}

.scene__joint {
  fill: var(--teal-300);
}

.scene__node {
  fill: var(--mid-950);
  stroke: var(--teal-300);
  stroke-width: 1.8;
}

/* Capability labels: real HTML text, quiet. */
.scene__label {
  overflow: visible;
}

.scene__tag {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 3px 9px;
  border: 1px solid rgba(95, 224, 200, 0.34);
  border-radius: 5px;
  background: rgba(3, 13, 28, 0.72);
  color: var(--teal-200);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
}

/* Tablet and phone: the composition alone, without the small labels. */
@media (max-width: 1023px) {
  .scene__label {
    display: none;
  }
}

/* 9. Homepage services - signature grid -------------------------------------------- */
/* The eight services as one compact grid of crisp cards: the older service
   artwork in one fixed frame, then title, text and a small directional cue.
   The entrance (each card arrives once from a nearby direction and is placed)
   is configured in includes/partials/service-grid.php and run by the motion
   system (section 21); hover lives on the inner panel so it never fights the
   entrance. */
.section--services {
  overflow-x: clip;
}

.svc-grid {
  display: grid;
  gap: var(--s-3);
  list-style: none;
}

.svc-card {
  display: grid;
}

.svc-card__inner {
  position: relative;
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  transition:
    transform 360ms var(--ease-out),
    border-color 240ms var(--ease-out),
    box-shadow 360ms var(--ease-out);
}

/* Artwork frame: same crop for every service, a hairline seam to the text and
   a thin teal edge that draws in on hover/focus. */
.svc-card__plate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--ice-100);
}

.svc-card__plate::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--teal-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
  pointer-events: none;
}

.svc-card__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.06);
  transition: transform 700ms var(--ease-out);
}

/* Fallback when a service has no artwork: its coded motif on the same frame. */
.svc-card__motif {
  display: block;
  width: 70%;
  height: 3.5rem;
  overflow: visible;
  color: var(--teal-600);
  stroke-width: 5;
}

.svc-card__motif .m-soft {
  fill: currentColor;
  fill-opacity: 0.08;
  stroke: none;
}

.svc-card__motif .m-guide {
  stroke: #7fa6d6;
  stroke-opacity: 0.4;
  stroke-width: 2.2;
  stroke-dasharray: 5 10;
}

.svc-card__motif .m-base {
  stroke: #7f97b6;
  stroke-opacity: 0.7;
}

.svc-card__motif .m-hot {
  stroke: currentColor;
  stroke-width: 6;
}

.svc-card__motif .m-node {
  fill: currentColor;
  stroke: none;
}

/* Cards stay still once placed: no looping signals here. */
.svc-card__motif .m-flow,
.svc-card__motif .m-scan {
  display: none;
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
}

.svc-card__title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.svc-card__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}

/* The whole panel is the link target. */
.svc-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.svc-card__text {
  flex: 1;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Phones: the cue is just the arrow, top right. */
.svc-card__more {
  position: absolute;
  top: 0.95rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--teal-600);
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.svc-card__more svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 360ms var(--ease-out);
}

/* Keyboard focus marks the whole panel (the link covers it). */
.svc-card__inner:has(.svc-card__link:focus-visible) {
  outline: 2px solid var(--teal-600);
  outline-offset: 3px;
}

.svc-card__link:focus-visible {
  outline: none;
}

/* Hover (fine pointers) and keyboard focus: a stronger edge, the teal line
   draws along the artwork, the art eases in a touch and the arrow moves on. */
.svc-card__inner:focus-within {
  border-color: #9ebebc;
}

.svc-card__inner:focus-within .svc-card__plate::after {
  transform: scaleX(1);
}

.svc-card__inner:focus-within .svc-card__more svg {
  transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .svc-card__inner:hover {
    border-color: #9ebebc;
    box-shadow: 0 16px 30px -22px rgba(7, 26, 51, 0.3);
    transform: translateY(-3px);
  }

  .svc-card__inner:hover .svc-card__plate::after {
    transform: scaleX(1);
  }

  .svc-card__inner:hover .svc-card__plate img {
    transform: scale(1.1);
  }

  .svc-card__inner:hover .svc-card__link {
    color: var(--teal-600);
  }

  .svc-card__inner:hover .svc-card__more svg {
    transform: translateX(4px);
  }
}

/* Tablet and up: artwork on top in a fixed frame, the cue on the last line. */
@media (min-width: 640px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .svc-card__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .svc-card__plate {
    aspect-ratio: 2 / 1;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .svc-card__motif {
    width: 50%;
    height: 5rem;
  }

  .svc-card__body {
    gap: 0.5rem;
    padding: 1.125rem 1.25rem 1.125rem;
  }

  .svc-card__title {
    font-size: 1.0625rem;
  }

  .svc-card__more {
    position: static;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
  }
}

@media (min-width: 1024px) {
  .svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
  }

  .svc-card__plate {
    aspect-ratio: 16 / 9;
  }
}

/* 11. Selected work - cinematic cases ----------------------------------------------- */
.section--work {
  background:
    radial-gradient(46rem 28rem at 10% 0%, rgba(47, 124, 246, 0.1), transparent 70%),
    var(--mid-900);
}

/* Side reveals drift in from beyond the bleeding media edge: never let that
   become horizontal scroll. */
.section--work:has([data-reveal-direction]) {
  overflow-x: clip;
}

.cases {
  display: grid;
  gap: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  list-style: none;
}

.case {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.case__frame {
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--mid-850);
  box-shadow: var(--shadow-frame);
}

.case__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 2.125rem;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(3, 13, 28, 0.6);
}

.case__bar span:not(.case__host) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-dark-strong);
}

.case__host {
  margin-left: var(--s-3);
  overflow: hidden;
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case__shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--mid-800);
}

.case__shot img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: left top;
}

.case__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--on-dark-3);
  font-size: 3.5rem;
  font-weight: 800;
}

.case__body {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-content: center;
}

.case__num {
  color: transparent;
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1px rgba(95, 224, 200, 0.5);
}

.case__meta {
  color: var(--teal-300);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Sample project: portfolio work without a live website (selected work, cases,
   references, project index). A quiet outlined label; its hollow dot answers
   the filled "live" dot of the hero showcase. */
.work-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  width: fit-content;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.work-badge::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.env-dark .work-badge,
.work-hero .work-badge {
  border-color: var(--line-dark-strong);
  color: var(--on-dark-2);
}

.case__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.case__text {
  max-width: 30rem;
  color: var(--on-dark-2);
  line-height: 1.6;
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
}

.case__tags li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-xs);
  color: var(--on-dark-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

.case__link {
  justify-self: start;
  margin-top: var(--s-2);
}

@media (min-width: 960px) {
  .case {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
  }

  .case--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .case--flip .case__media {
    order: 2;
  }

  .case:not(.case--flip) .case__media {
    margin-left: calc(-1 * min(var(--gutter), 2.5rem));
  }

  .case--flip .case__media {
    margin-right: calc(-1 * min(var(--gutter), 2.5rem));
  }
}

/* 12. Approach (manifesto) --------------------------------------------------------- */
.manifesto {
  position: relative;
  display: grid;
  gap: var(--s-6);
}

.manifesto__statement {
  max-width: 21ch;
  font-size: clamp(2rem, 1.25rem + 2.4vw, 3.5rem);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.manifesto__grid {
  display: grid;
  gap: var(--s-10);
  margin-top: var(--s-2);
}

.manifesto__copy {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  max-width: 30rem;
  color: var(--muted);
  line-height: 1.65;
}

.manifesto__copy p + p {
  margin-top: 0;
}

.manifesto__system {
  display: grid;
  gap: var(--s-6);
  align-content: start;
}

.manifesto__diagram {
  display: none;
  width: 7.5rem;
  height: auto;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.manifesto__diagram-hot {
  stroke: var(--teal-600);
  stroke-width: 1.4;
  stroke-dasharray: 1;
}

html.motion .manifesto:not(.is-in) .manifesto__diagram-hot {
  stroke-dashoffset: 1;
}

html.motion .manifesto__diagram-hot {
  transition: stroke-dashoffset 1600ms var(--ease-out) 300ms;
}

.manifesto__diagram-dot {
  fill: var(--teal-600);
  stroke: none;
}

.principles {
  display: grid;
  list-style: none;
}

.principle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}

.principle:last-child {
  border-bottom: 1px solid var(--line);
}

/* Technical line from one principle to the next, drawn as each one arrives. */
.principle:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.9rem;
  bottom: -0.75rem;
  left: calc(0.625rem - 0.5px);
  width: 1px;
  background: linear-gradient(180deg, var(--teal-600), rgba(11, 125, 113, 0.3));
  transform-origin: top;
}

html.motion .principle:not(:last-child)::after {
  transition: transform 700ms var(--ease-out) calc(var(--rv-delay) + 260ms);
}

html.motion .principle:not(.is-in)::after {
  transform: scaleY(0);
}

.principle__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--teal-600);
}

.principle__title {
  margin-bottom: 0.15rem;
  font-size: var(--fs-h4);
}

.principle__text {
  color: var(--muted);
  font-size: var(--fs-small);
}

@media (min-width: 960px) {
  .manifesto__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-12);
  }

  .manifesto__system {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-8);
  }

  .manifesto__diagram {
    display: block;
  }
}

/* Use cases */
.usecases {
  display: grid;
  gap: var(--s-6);
  margin-top: clamp(3rem, 2rem + 3.5vw, 5rem);
  padding-top: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  border-top: 1px solid var(--line);
}

.usecases__head {
  display: grid;
  gap: var(--s-2);
  max-width: 40rem;
}

.usecases__title {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-weight: 750;
  letter-spacing: -0.025em;
}

.usecases__lead {
  color: var(--muted);
}

.usecases__list {
  display: grid;
  gap: var(--s-5) var(--s-6);
  list-style: none;
}

.usecase {
  display: grid;
  align-content: start;
  gap: var(--s-2);
}

.usecase__icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--teal-600);
}

.usecase__title {
  font-size: var(--fs-h4);
}

.usecase__text {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

@media (min-width: 720px) {
  .usecases__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .usecases__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 13. Process path ------------------------------------------------------------------ */
.section--process {
  background:
    radial-gradient(54rem 28rem at 50% 100%, rgba(53, 201, 176, 0.1), transparent 70%),
    var(--mid-950);
}

.process {
  --progress: 1;
  position: relative;
}

.process__track {
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  width: 2px;
  overflow: hidden;
  background: var(--line-dark-strong);
}

.process__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--teal-300), var(--blue-400));
  transform: scaleY(var(--progress));
  transform-origin: top;
}

.process__pulse {
  position: absolute;
  left: -1px;
  width: 4px;
  height: 3rem;
  background: linear-gradient(180deg, transparent, var(--teal-200), transparent);
  opacity: 0;
}

html.motion .process__pulse {
  animation: process-pulse-v 3.2s linear infinite;
}

@keyframes process-pulse-v {
  0% {
    top: -3rem;
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

.process__steps {
  display: grid;
  gap: var(--s-8);
  list-style: none;
}

.process__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-left: 3.75rem;
  min-height: 2.5rem;
  transition: opacity var(--t-slow) var(--ease-out);
}

.process__node {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  background: var(--mid-950);
  color: var(--on-dark-3);
  transition: border-color 500ms var(--ease-out), color 500ms var(--ease-out), box-shadow 500ms var(--ease-out), background-color 500ms var(--ease-out);
}

.process__node .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.process__title {
  padding-top: 0.35rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  letter-spacing: -0.02em;
}

.process__text {
  max-width: 28rem;
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}

.process__step.is-active .process__node,
.process--entrance .process__step.is-in .process__node,
html:not(.js) .process__node {
  border-color: var(--teal-300);
  background: var(--mid-850);
  color: var(--teal-300);
  box-shadow: 0 0 0 5px rgba(95, 224, 200, 0.12), 0 0 22px rgba(95, 224, 200, 0.35);
}

html.js [data-process] .process__step:not(.is-active) {
  opacity: 0.45;
}

/* Entrance variant (homepage): once, the line draws left to right (top to
   bottom on small screens) and each stage lights up as the line reaches it;
   the stages themselves are a data-stagger group of 240 ms. */
.process--entrance {
  --draw: 1200ms;
}

.process--entrance.process--4 {
  --draw: 960ms;
}

.process--entrance.process--3 {
  --draw: 720ms;
}

html.motion .process--entrance:not(.is-in) {
  --progress: 0;
}

html.motion .process--entrance .process__fill {
  transition: transform var(--draw) linear 120ms;
}

html.motion .process--entrance .process__node {
  transition-delay: calc(var(--rv-delay) + 140ms);
}

@media (min-width: 1024px) {
  .process__track {
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .process__fill {
    background: linear-gradient(90deg, var(--teal-300), var(--blue-400));
    transform: scaleX(var(--progress));
    transform-origin: left;
  }

  .process__pulse {
    top: -1px;
    width: 4rem;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--teal-200), transparent);
  }

  html.motion .process__pulse {
    animation-name: process-pulse-h;
  }

  .process__steps {
    grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
    gap: var(--s-5);
  }

  .process--3 .process__steps { --steps: 3; }
  .process--4 .process__steps { --steps: 4; }

  .process__step {
    padding: 3.5rem var(--s-3) 0 0;
  }

  .process__title {
    padding-top: 0;
  }
}

@keyframes process-pulse-h {
  0% {
    left: -4rem;
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* 14. Brands (homepage) ----------------------------------------------------------------- */
/* One dark field instead of a row of boxes: the logos share a ground (several
   are opaque tiles or white wordmarks), cells are divided by hairlines and each
   carries a quiet caption. Hairlines are drawn as 1px outer shadows on the left
   and top of every cell, so the field's own edge clips them and only the seams
   between cells remain, for any number of columns or a partial last row.
   Column count comes from includes/partials/logo-wall.php. */
.client-board {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(53, 201, 176, 0.07), transparent 70%),
    var(--mid-900);
  list-style: none;
}

.client {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  box-shadow: -1px 0 0 var(--line-dark), 0 -1px 0 var(--line-dark);
  transition: background-color 320ms var(--ease-out);
}

.client__mark {
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  padding: var(--s-4) var(--s-3);
  border-right: 1px solid var(--line-dark);
}

/* Optical sizes: square marks tallest, wide wordmarks narrowest in height.
   Opaque tiles get the same small corner as everything else on the field. */
.client__mark img {
  display: block;
  width: auto;
  max-width: 88%;
  border-radius: 6px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 320ms var(--ease-out), transform 520ms var(--ease-out);
}

.client__mark--square img {
  height: 3.75rem;
}

.client__mark--landscape img {
  height: 2.75rem;
}

.client__mark--wide img {
  height: 2.25rem;
}

.client__initial {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-sm);
  color: var(--teal-300);
  font-size: 1.5rem;
  font-weight: 800;
}

.client__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
}

.client__sector {
  color: var(--teal-300);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.client__name {
  color: var(--on-dark);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.client__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  margin-top: 0.35rem;
  color: var(--on-dark-2);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}

.client__link svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 360ms var(--ease-out);
}

/* The whole entry is the link target when a case exists. */
.client__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keyboard focus is drawn inside the cell: the field clips its edge. */
.client__link:focus-visible {
  outline: none;
}

.client:has(.client__link:focus-visible) {
  outline: 2px solid var(--teal-300);
  outline-offset: -4px;
}

.client--linked:focus-within {
  background-color: rgba(150, 180, 220, 0.05);
}

.client--linked:focus-within .client__mark img {
  opacity: 1;
}

.client--linked:focus-within .client__link {
  color: var(--teal-300);
}

.client--linked:focus-within .client__link svg {
  transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .client:hover .client__mark img {
    opacity: 1;
    transform: scale(1.03);
  }

  .client--linked:hover {
    background-color: rgba(150, 180, 220, 0.05);
  }

  .client--linked:hover .client__link {
    color: var(--teal-300);
  }

  .client--linked:hover .client__link svg {
    transform: translateX(4px);
  }
}

/* Tablet and up: columns, logo above its caption. Three brands sit in one row;
   four or more go two to a row on tablets (no slivers), then three or four on
   desktop. One or two brands keep a narrower field instead of stretching a few
   logos across the page. */
@media (min-width: 640px) {
  .client-board--2,
  .client-board--3,
  .client-board--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-board--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .client-board--1 {
    max-width: 24rem;
  }

  .client {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .client__mark {
    min-height: 8.5rem;
    padding: var(--s-6) var(--s-5);
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .client__mark img {
    max-width: 78%;
  }

  .client__mark--square img {
    height: 4.75rem;
  }

  .client__mark--landscape img {
    height: 3.5rem;
  }

  .client__mark--wide img {
    height: 3rem;
  }

  .client__meta {
    justify-content: flex-start;
    padding: var(--s-4) var(--s-5) var(--s-5);
  }
}

@media (min-width: 1024px) {
  .client-board--2 {
    max-width: 52rem;
  }

  .client-board--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .client__mark {
    min-height: 10.5rem;
  }

  .client__mark--square img {
    height: 5.75rem;
  }

  .client__mark--landscape img {
    height: 4.25rem;
  }

  .client__mark--wide img {
    height: 3.75rem;
  }

  .client__meta {
    padding: var(--s-5) var(--s-6) var(--s-6);
  }

  .client__name {
    font-size: 1.0625rem;
  }
}

/* 15. Notes (homepage blog preview) --------------------------- */
.notes {
  display: grid;
  gap: var(--s-8);
  list-style: none;
}

.note article {
  position: relative;
  display: grid;
  gap: var(--s-3);
}

.note__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  background: var(--ice-100);
}

.note__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.note__media--plate {
  display: grid;
  align-content: space-between;
  aspect-ratio: 16 / 7;
  padding: var(--s-5) var(--s-6);
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(53, 201, 176, 0.18), transparent 70%),
    var(--mid-900);
  isolation: isolate;
}

.note__media--plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.6;
}

.note__plate-label {
  color: var(--on-dark);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* Quiet rail motif across the plate */
.note__media--plate::after {
  content: "";
  position: absolute;
  left: var(--s-6);
  right: 4.5rem;
  bottom: 2.15rem;
  height: 1px;
  background: linear-gradient(90deg, var(--teal-400), transparent);
  opacity: 0.6;
}

.note__plate-icon {
  justify-self: end;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--on-dark-3);
}

.note__title {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.note__title a {
  color: inherit;
  text-decoration: none;
}

.note__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.note:hover .note__title {
  color: var(--blue-600);
}

.note:hover .note__media img {
  transform: scale(1.03);
}

.note__summary {
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

@media (min-width: 720px) {
  .notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .notes--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-meta);
}

.post-meta__category {
  color: var(--teal-600);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-meta__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

/* 17. Final CTA ---------------------------------------------------------------------- */
.cta-final {
  position: relative;
  padding: clamp(4rem, 2.6rem + 4.6vw, 7rem) 0;
  overflow: hidden;
  background:
    radial-gradient(44rem 26rem at 85% 30%, rgba(53, 201, 176, 0.13), transparent 65%),
    radial-gradient(36rem 26rem at 0% 100%, rgba(47, 124, 246, 0.11), transparent 60%),
    var(--mid-900);
  color: var(--on-dark-2);
  isolation: isolate;
}

/* The rails own a band inside the bottom padding (shorter than the padding of
   both the signal and the compact band), so they never cross the copy, the
   email, the phone number or the WhatsApp link. */
.cta-final__lines {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  width: 100%;
  height: clamp(2.75rem, 2rem + 2.4vw, 4.25rem);
  opacity: 0.85;
  pointer-events: none;
}

.cta-final__rail {
  fill: none;
  stroke: #7fa6d6;
  stroke-opacity: 0.18;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cta-final__pulse {
  fill: none;
  stroke: var(--teal-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 200;
  stroke-dashoffset: -60;
  vector-effect: non-scaling-stroke;
}

html.motion .cta-final__pulse {
  animation: sc-pulse 6s linear infinite;
}

html.motion .cta-final__pulse--late {
  animation-delay: -3s;
}

.is-paused .cta-final__pulse,
.is-paused .process__pulse {
  animation-play-state: paused !important;
}

@keyframes sc-pulse {
  from {
    stroke-dashoffset: 14;
  }

  to {
    stroke-dashoffset: -100;
  }
}

/* Entrance variant (homepage): the rails drift in once and one of them is
   drawn; the copy rises and the button arrives last (cta-band.php delays). */
.cta-final--entrance .cta-final__lines {
  width: calc(100% + 24px);
}

.cta-final__draw {
  fill: none;
  stroke: var(--teal-300);
  stroke-width: 1.6;
  stroke-opacity: 0.6;
  vector-effect: non-scaling-stroke;
}

/* The rail is drawn by a clip wipe: a stretched SVG cannot normalise dash
   lengths with a non-scaling stroke. */
.cta-final__wipe {
  transform-box: fill-box;
  transform-origin: left center;
}

html.motion .cta-final--entrance .cta-final__lines {
  transition: transform 1600ms var(--ease-out);
}

html.motion .cta-final--entrance:not(.is-in) .cta-final__lines {
  transform: translateX(-24px);
}

html.motion .cta-final--entrance .cta-final__wipe {
  transition: transform 1400ms var(--ease-in-out) 200ms;
}

html.motion .cta-final--entrance:not(.is-in) .cta-final__wipe {
  transform: scaleX(0);
}

.cta-final__grid {
  display: grid;
  gap: var(--s-8);
  align-items: end;
}

.cta-final__main {
  display: grid;
  gap: var(--s-4);
}

.cta-final__title {
  max-width: 17ch;
  color: var(--on-dark);
  font-size: clamp(2.25rem, 1.25rem + 3.2vw, 4.25rem);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.cta-final__text {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.cta-final__side {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
}

.cta-final__channels {
  display: grid;
  gap: var(--s-1);
  list-style: none;
}

.cta-final__channels a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.25rem;
  overflow-wrap: anywhere;
  color: var(--on-dark-2);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}

.cta-final__channels .icon {
  width: 1rem;
  height: 1rem;
  color: var(--teal-300);
}

.cta-final__channels a:hover {
  color: var(--teal-300);
}

@media (min-width: 1024px) {
  .cta-final__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--s-12);
  }

  .cta-final__side {
    justify-self: end;
  }
}

/* 20. Footer - compact, grouped ------------------------------------------------------ */
.site-footer {
  position: relative;
  padding: clamp(3rem, 2.4rem + 2vw, 4rem) 0 var(--s-5);
  overflow: hidden;
  background: var(--mid-950);
  color: var(--on-dark-3);
  font-size: 0.90625rem;
  isolation: isolate;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.site-footer__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  overflow: hidden;
  background: var(--line-dark-strong);
}

.site-footer__rule span {
  position: absolute;
  top: 0;
  left: 0;
  width: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-300), transparent);
}

html.motion .site-footer__rule span {
  animation: footer-scan 8s var(--ease-in-out) infinite;
}

@keyframes footer-scan {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(560%);
  }
}

.site-footer a {
  color: var(--on-dark-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--teal-300);
}

.site-footer .btn--signal,
.site-footer .btn--signal:hover {
  color: var(--mid-950);
}

.footer-main {
  display: grid;
  gap: var(--s-8) var(--s-6);
  padding-bottom: var(--s-8);
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  max-width: 20rem;
}

.footer-brand__logo {
  display: inline-flex;
  width: fit-content;
}

.footer-brand__logo img {
  width: auto;
  height: 2.375rem;
}

.footer-brand__text {
  color: var(--on-dark-2);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
}

.footer-chips a {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.footer-chips a:hover {
  border-color: var(--teal-300);
  background: rgba(95, 224, 200, 0.08);
  color: var(--teal-300);
}

.footer-chips .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-nav__title {
  margin-bottom: var(--s-3);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-nav ul,
.footer-contact ul {
  display: grid;
  gap: 0.125rem;
  list-style: none;
}

.footer-nav a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2rem;
}

.footer-nav--services ul {
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: var(--s-6);
}

.footer-contact {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.footer-contact .footer-nav__title {
  margin-bottom: 0;
}

.footer-contact .icon {
  width: 1rem;
  height: 1rem;
  color: var(--teal-300);
}

.footer-contact .btn {
  justify-self: start;
  margin-top: var(--s-1);
}

@media (min-width: 640px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-main {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr) minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--s-8);
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
}

.footer-bottom__copy {
  margin-right: auto;
  font-family: var(--mono);
  font-size: var(--fs-meta);
}

.footer-legal,
.footer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  list-style: none;
}

.footer-legal a,
.footer-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}

.footer-langs {
  gap: var(--s-1);
  padding-left: var(--s-4);
  border-left: 1px solid var(--line-dark);
}

.footer-langs a {
  justify-content: center;
  min-width: 2.25rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.footer-langs a[aria-current="true"] {
  color: var(--teal-300);
}

/* Cookie notice */
.cookie-notice {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  display: grid;
  gap: var(--s-3);
  max-width: 25rem;
  padding: var(--s-4);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-md);
  background: var(--mid-900);
  box-shadow: var(--shadow-pop);
  color: var(--on-dark-2);
  font-size: 0.875rem;
}

.cookie-notice[hidden],
.has-open-menu .cookie-notice {
  display: none;
}

.cookie-notice strong {
  color: var(--on-dark);
}

.cookie-notice p {
  margin-top: var(--s-1);
}

.cookie-notice a {
  color: var(--teal-300);
}

.cookie-notice__actions {
  display: flex;
  gap: var(--s-2);
}

/* 21. Motion system: entrances and load-time intro ------------------------------- */
/* One system for every entrance. assets/js/site.js only adds .is-in (once) and
   per-element custom properties; without JS or with reduced motion nothing
   here hides anything.

     data-reveal           enters once. Presets: "" fade up | "title" line
                           unmasks | "mask" frame unmasks (data-reveal-direction
                           left|right: from that edge) | "soft" dimmed and a
                           touch small, settles | "scatter" arrives from its own
                           direction and is placed without overshoot
     data-reveal-from      "x y rotate scale" start offset as desktop art
                           direction (px, deg, factor) -> --rv-x/-y/-r/-s;
                           tablets and phones scale it down (--rv-t*)
     data-reveal-delay     extra delay (ms)
     data-stagger="ms"     group: its items enter together, ms apart
     data-reveal-at        trigger point, share of the viewport from the
                           bottom (default 0.1)
     data-inview           container marked .is-in without moving it       */
:root {
  --rv-tx: 1;
  --rv-ty: 1;
  --rv-tr: 1;
  --rv-ts: 1;
  --rv-rmax: 12deg;
}

/* Tablet: roughly a third less travel and rotation. */
@media (max-width: 1023px) {
  :root {
    --rv-tx: 0.65;
    --rv-ty: 0.7;
    --rv-tr: 0.65;
    --rv-ts: 0.7;
  }
}

/* Phone: short travel, hardly any sideways movement, rotation capped. */
@media (max-width: 639px) {
  :root {
    --rv-tx: 0.25;
    --rv-ty: 0.5;
    --rv-tr: 0.4;
    --rv-ts: 0.5;
    --rv-rmax: 2.5deg;
  }
}

[data-reveal] {
  --rv-x: 0;
  --rv-y: 18;
  --rv-r: 0;
  --rv-s: 1;
  --rv-o: 0;
  --rv-kx: 1;
  --rv-ky: 1;
  --rv-kr: 1;
  --rv-ks: 1;
  --rv-delay: 0ms;
  --rv-dur: 800ms;
  --rv-fade: 800ms;
  --rv-ease: var(--ease-out);
}

[data-reveal-from] {
  --rv-kx: var(--rv-tx);
  --rv-ky: var(--rv-ty);
  --rv-kr: var(--rv-tr);
  --rv-ks: var(--rv-ts);
}

[data-reveal="soft"] {
  --rv-o: 0.5;
  --rv-y: 24;
  --rv-s: 0.96;
  --rv-dur: 900ms;
  --rv-fade: 700ms;
}

/* Placed, not bounced: a long deceleration with no overshoot. */
[data-reveal="scatter"] {
  --rv-dur: 820ms;
  --rv-fade: 460ms;
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion [data-reveal] {
  transition:
    opacity var(--rv-fade) var(--ease-out) var(--rv-delay),
    transform var(--rv-dur) var(--rv-ease) var(--rv-delay);
}

/* Revealed all at once for a full-size capture or print (site.js): no fades. */
html.rv-instant [data-reveal],
html.rv-instant [data-inview],
html.rv-instant [data-inview] * {
  transition: none !important;
}

html.motion [data-reveal]:not(.is-in) {
  opacity: var(--rv-o);
  transform:
    translate3d(calc(var(--rv-x) * var(--rv-kx) * 1px), calc(var(--rv-y) * var(--rv-ky) * 1px), 0)
    rotate(clamp(-1 * var(--rv-rmax), var(--rv-r) * var(--rv-kr) * 1deg, var(--rv-rmax)))
    scale(calc(1 - (1 - var(--rv-s)) * var(--rv-ks)));
}

html.motion [data-reveal="title"]:not(.is-in) {
  opacity: 1;
  transform: translateY(0.3em);
  clip-path: inset(0 0 100% 0);
}

html.motion [data-reveal="title"] {
  transition: transform 950ms var(--ease-out) var(--rv-delay), clip-path 950ms var(--ease-out) var(--rv-delay);
  clip-path: inset(-0.1em -0.1em -0.3em -0.1em);
}

html.motion [data-reveal="mask"]:not(.is-in) {
  opacity: 1;
  transform: none;
  clip-path: inset(8% 5% 8% 5% round 18px);
}

html.motion [data-reveal="mask"] {
  transition: clip-path 1200ms var(--ease-out) var(--rv-delay);
  clip-path: inset(0 0 0 0 round 0);
}

/* From one side: unmasked from that edge while it drifts the last few pixels. */
html.motion [data-reveal="mask"][data-reveal-direction] {
  transition: clip-path 1150ms var(--ease-out) var(--rv-delay), transform 1150ms var(--ease-out) var(--rv-delay);
}

html.motion [data-reveal="mask"][data-reveal-direction="left"]:not(.is-in) {
  clip-path: inset(0 100% 0 0 round var(--r-md));
  transform: translate3d(calc(-36px * var(--rv-tx)), 0, 0);
}

html.motion [data-reveal="mask"][data-reveal-direction="right"]:not(.is-in) {
  clip-path: inset(0 0 0 100% round var(--r-md));
  transform: translate3d(calc(36px * var(--rv-tx)), 0, 0);
}

html.motion [data-reveal="mask"]:not(.is-in) .case__shot {
  transform: scale(1.1);
}

html.motion [data-reveal="mask"] .case__shot {
  transition: transform 1500ms var(--ease-out) var(--rv-delay);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__kicker,
  .hero__title,
  .hero__lead,
  .hero__actions {
    animation: intro-rise 900ms var(--ease-out) backwards;
  }

  .hero__title {
    animation-name: intro-title;
    animation-delay: 70ms;
  }

  .hero__lead {
    animation-delay: 200ms;
  }

  .hero__actions {
    animation-delay: 300ms;
  }

  /* The ecosystem settles in once: the visual rises and scales to rest while
     each module eases its last few pixels inward along its own axis; the
     conduits and labels follow. Backwards fill only: once finished, nothing
     lingers and the hero is plain static content again. */
  .hero__visual {
    animation: hero-visual-in 900ms var(--ease-out) 80ms backwards;
  }

  .scene__module {
    animation: hero-module-settle 620ms var(--ease-out) 160ms backwards;
  }

  .scene__module--mobile { animation-delay: 205ms; }
  .scene__module--qr { animation-delay: 250ms; }
  .scene__module--software { animation-delay: 295ms; }
  .scene__module--systems { animation-delay: 340ms; }

  .scene__rails,
  .scene__label {
    animation: hero-fade 520ms var(--ease-out) 420ms backwards;
  }
}

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes intro-title {
  from {
    opacity: 0;
    transform: translateY(0.3em);
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
  }
}

@keyframes hero-visual-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.965);
  }
}

@keyframes hero-module-settle {
  from {
    opacity: 0.2;
    transform: translate(calc(var(--vx) * 0.07px), calc(var(--vy) * 0.07px));
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  @view-transition {
    navigation: none;
  }
}

/* Homepage product showcase. Scoped to the hero; other sections retain their art. */
.hero--products {
  background: radial-gradient(ellipse at 82% 38%, rgba(45, 121, 132, .13), transparent 52%),
    linear-gradient(160deg, #091f32, #04101e 65%, #061321);
}
.hero--products .hero__stage {
  padding: calc(var(--header-h) + 3.5rem) 0 4rem;
}
.hero--products .hero__grid { gap: 2.5rem; }
.hero--products .hero__copy { gap: 1.5rem; max-width: none; }
.hero--products .hero__title {
  font-size: clamp(2.5rem, 1.5rem + 2.4vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: balance;
  animation: none;
}
.hero--products .hero__lead { max-width: 31rem; font-size: 1.125rem; }
.hero--products .hero__actions { gap: 1.75rem; align-items: center; }
.hero__project-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  color: var(--on-dark-2);
  font-size: .9375rem;
  font-weight: 650;
  text-decoration: none;
}
.hero__project-link svg { width: 1.1rem; height: 1.1rem; }
.hero__project-link:hover { color: var(--teal-300); }
.hero--products .hero__visual {
  width: 100%;
  max-width: 44rem;
  aspect-ratio: 1.2;
  margin: 0;
  container-type: normal;
  animation: none;
}
.product-showcase { position: relative; width: 100%; height: 100%; perspective: 1400px; }
.product-showcase::before {
  content: "";
  position: absolute;
  inset: 3% -3% 4% 9%;
  background: linear-gradient(rgba(142, 188, 201, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 188, 201, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse, #000, transparent 73%);
  pointer-events: none;
}
.product-showcase__project { position: absolute; margin: 0; }
.product-showcase__project--main {
  top: 8%; left: 0; width: 100%;
  transform: rotateY(-4deg) rotateX(2deg);
}
.product-showcase__project--secondary {
  bottom: 2%; right: -2%; width: 53%;
  transform: rotateY(-2deg) rotateX(1deg);
  z-index: 1;
}
.product-showcase__screen {
  overflow: hidden;
  aspect-ratio: 1.75;
  border: 1px solid rgba(181, 220, 232, .35);
  border-top-color: rgba(209, 238, 244, .6);
  border-radius: 9px;
  background: #132b3b;
  box-shadow: 0 26px 65px -15px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
}
.product-showcase__project--secondary .product-showcase__screen { aspect-ratio: 1.6; }
.product-showcase__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.product-showcase__project--secondary img { width: 155%; height: auto; max-width: none; }
.product-showcase figcaption {
  padding: .8rem .15rem 0;
  color: #a7bdcd;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
}
@media (min-width: 1024px) {
  .hero--products .hero__stage { min-height: clamp(44rem, 88svh, 56rem); }
  .hero--products .hero__grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 2.5rem; }
  .hero--products .hero__visual {
    justify-self: start;
    width: calc(100% + clamp(0rem, 5vw, 5rem));
    max-width: 46rem;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero--products .hero__copy { max-width: 39rem; }
  .hero--products .hero__title { font-size: 3.5rem; }
  .hero--products .hero__visual { max-width: 39rem; aspect-ratio: 1.35; }
  .product-showcase__project--main { transform: rotateY(-2deg); }
  .product-showcase__project--secondary { transform: none; }
}
@media (max-width: 639px) {
  .hero--products .hero__stage { padding: calc(var(--header-h) + 2.25rem) 0 2.75rem; }
  .hero--products .hero__grid { gap: 2rem; }
  .hero--products .hero__copy { gap: 1.25rem; }
  .hero--products .hero__title { font-size: clamp(2rem, 8.8vw, 2.8rem); line-height: 1.13; }
  .hero--products .hero__lead { font-size: 1rem; }
  .hero--products .hero__actions { gap: .6rem 1.25rem; }
  .hero--products .hero__actions .btn { padding: .9rem 1.1rem; font-size: .875rem; }
  .hero__project-link { font-size: .875rem; }
  .hero--products .hero__visual { aspect-ratio: 1.17; }
  .product-showcase__project--main { top: 3%; transform: none; }
  .product-showcase__project--secondary { bottom: 0; right: 0; width: 61%; transform: none; }
  .product-showcase figcaption { font-size: .625rem; padding-top: .55rem; letter-spacing: .02em; }
  .product-showcase__screen { border-radius: 6px; }
}
@media (min-width: 640px) {
  html:lang(ru) .hero--products .hero__title { font-size: clamp(2.5rem, 3.4vw, 3rem); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hero--products .hero__title,
  html.js .hero--products .hero__lead,
  html.js .hero--products .hero__actions { animation: product-copy-in 700ms var(--ease-out) backwards; }
  html.js .hero--products .hero__lead { animation-delay: 90ms; }
  html.js .hero--products .hero__actions { animation-delay: 160ms; }
  html.js .product-showcase__project--main { animation: product-main-in 850ms var(--ease-out) 80ms backwards; }
  html.js .product-showcase__project--secondary { animation: product-secondary-in 800ms var(--ease-out) 240ms backwards; }
}
@keyframes product-copy-in { from { opacity: 0; translate: 0 14px; } }
@keyframes product-main-in { from { opacity: 0; translate: 0 22px; scale: .975; } }
@keyframes product-secondary-in { from { opacity: 0; translate: 24px 16px; } }
.no-js .hero--products .hero__lead,
.no-js .hero--products .hero__actions { animation: none; }

/* Homepage refinement: once-only section arrivals. */
.page-home .manifesto__system,
.page-home .manifesto__diagram { border: 0; border-radius: 0; box-shadow: none; background: none; }
.page-home main > section:not(.hero) [data-reveal] {
  --rv-y: 14;
  --rv-dur: 650ms;
  --rv-fade: 650ms;
}
/* Homepage headings use the same quiet rise as their sections, without a wipe. */
html.motion .page-home main > section:not(.hero) [data-reveal="title"] {
  clip-path: none;
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
html.motion .page-home main > section:not(.hero) [data-reveal="title"]:not(.is-in) { opacity: 0; }
/* Service cards keep their own placement timing (scatter preset, section 21). */
.page-home main .svc-grid > .svc-card[data-reveal] {
  --rv-dur: 780ms;
  --rv-fade: 420ms;
}
/* Homepage: brand hero -> services -> selected work -> GNC Restaurant System ->
   closing CTA. The two coded drawings (hero, product schematic) share one
   line-art vocabulary in the service-detail family. All motion is one-time
   and ends at rest; without JS or with reduced motion everything is static
   and complete. */
.home-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.home-art .hl-guide {
  stroke: #7fa6d6;
  stroke-opacity: 0.24;
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

.home-art .hl-soft {
  fill: currentColor;
  fill-opacity: 0.06;
  stroke: none;
}

.home-art .hl-base {
  stroke: #a9bfdc;
  stroke-opacity: 0.62;
}

.home-art .hl-hot {
  stroke: currentColor;
  stroke-width: 2.2;
}

.home-art .hl-node {
  fill: #a9bfdc;
  fill-opacity: 0.72;
  stroke: none;
}

.home-art [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Brand hero - "GNC TECH Signature Motion". Statement left, the signature
   artwork right (includes/partials/home-hero-art.php). The markup is the final
   composition; one ~1.9 s opening sequence plays on load and then everything
   is static. Without JS or with reduced motion the finished scene shows. */
.home-hero {
  background:
    radial-gradient(40rem 30rem at 74% 48%, rgba(64, 225, 184, 0.09), transparent 62%),
    radial-gradient(34rem 26rem at 100% 0%, rgba(47, 124, 246, 0.1), transparent 60%),
    radial-gradient(30rem 22rem at 0% 100%, rgba(47, 124, 246, 0.06), transparent 60%),
    var(--mid-950);
}

.home-hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1.25rem + 3vw, 4rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.home-hero__copy {
  display: grid;
  gap: var(--s-6);
  justify-items: start;
}

.home-hero__title {
  max-width: 18ch;
  color: var(--on-dark);
  font-size: clamp(2.375rem, 1.45rem + 2.8vw, 4rem);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Russian words run long: one step smaller keeps the statement to 3-4 lines. */
html:lang(ru) .home-hero__title {
  font-size: clamp(2.125rem, 1.25rem + 2.3vw, 3.375rem);
}

.home-hero__lead {
  max-width: 33rem;
  color: var(--on-dark-2);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-2);
}

.home-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}

.home-hero__link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease-out);
}

.home-hero__link:hover {
  color: var(--teal-300);
}

.home-hero__link:hover svg {
  transform: translateY(2px);
}

.home-hero__art {
  width: 100%;
  max-width: 40rem;
  justify-self: center;
}

/* Hero showcase: the live client work, one project at a time
   (includes/partials/home-hero-showcase.php) - a quiet browser frame on an
   offset drafting plate, the project named underneath, small controls below.
   The frame links to the site; hover lifts it a little and warms its border.
   Every slide sits in one grid cell with one 16:10 screen box, so the card
   keeps its size between projects; inactive slides are hidden (and their
   lazy screens not loaded) until site.js primes them. */
.hero-case {
  position: relative;
  display: grid;
  gap: var(--s-5);
}

.hero-case__slides {
  display: grid;
}

.hero-case__slide {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  align-content: start;
  gap: var(--s-8);
  min-width: 0;
  margin: 0;
}

.hero-case__slide.is-current {
  z-index: 1;
}

.hero-case__slide:not(.is-current):not(.is-leaving) {
  visibility: hidden;
}

.hero-case__slide:not(.is-current) .hero-case__stage,
.hero-case__slide:not(.is-current) .hero-case__meta {
  opacity: 0;
}

/* The outgoing screen stays under the incoming one until it has faded in. */
.hero-case__slide.is-leaving .hero-case__stage {
  opacity: 1;
}

.hero-case__slide:not(.is-current):not(.is-primed) .hero-case__shot {
  display: none;
}

.hero-case__stage {
  position: relative;
}

.hero-case__stage::before {
  content: "";
  position: absolute;
  inset: 0.875rem -0.875rem -0.875rem 0.875rem;
  border: 1px solid rgba(127, 166, 214, 0.16);
  border-radius: var(--r-md);
  pointer-events: none;
}

.hero-case__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(150, 180, 220, 0.22);
  border-radius: var(--r-md);
  background: #0b111c;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -28px rgba(0, 0, 0, 0.7),
    0 12px 24px -16px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition:
    transform var(--t-slow) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-slow) var(--ease-out);
}

.hero-case__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.125rem;
  padding: 0 0.875rem;
  border-bottom: 1px solid rgba(150, 180, 220, 0.12);
  background: #111a28;
}

.hero-case__bar i {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(169, 191, 220, 0.28);
}

.hero-case__url {
  min-width: 0;
  margin: 0 auto;
  padding: 0.1875rem 0.875rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(150, 180, 220, 0.08);
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-0.75rem);
}

.hero-case__view {
  display: block;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: #0b111c;
}

.hero-case__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

a.hero-case__frame:hover {
  border-color: rgba(64, 225, 184, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 36px 70px -28px rgba(0, 0, 0, 0.75),
    0 14px 28px -16px rgba(0, 0, 0, 0.5);
  transform: translateY(-3px);
}

.hero-case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  color: var(--on-dark-3);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.hero-case__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--teal-300);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-case__tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(64, 225, 184, 0.16);
}

.hero-case__name {
  color: var(--on-dark);
  font-weight: 700;
}

.hero-case__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.5rem;
  color: var(--on-dark-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: rgba(150, 180, 220, 0.35);
  text-underline-offset: 0.25em;
  transition: color var(--t-base) var(--ease-out), text-decoration-color var(--t-base) var(--ease-out);
}

.hero-case__link svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

.hero-case__link:hover {
  color: var(--teal-300);
  text-decoration-color: currentColor;
}

.hero-case__link:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Controls: hidden (space kept, nothing moves) until site.js runs them. */
.hero-case__controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

[data-showcase]:not(.is-ready) .hero-case__controls {
  visibility: hidden;
}

.hero-case__step {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(150, 180, 220, 0.24);
  border-radius: 50%;
  background: transparent;
  color: var(--on-dark-2);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.hero-case__step svg {
  width: 1rem;
  height: 1rem;
}

.hero-case__step:hover {
  border-color: rgba(64, 225, 184, 0.5);
  color: var(--teal-300);
}

.hero-case__dots {
  display: inline-flex;
  align-items: center;
  margin: 0 0.25rem;
}

.hero-case__dot {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-case__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(169, 191, 220, 0.34);
  transition: width var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.hero-case__dot:hover::before {
  background: rgba(169, 191, 220, 0.6);
}

.hero-case__dot[aria-current="true"]::before {
  width: 1.125rem;
  background: var(--teal-300);
}

.hero-case__step:focus-visible,
.hero-case__dot:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 2px;
}

.hero-case__dot:focus-visible {
  border-radius: 999px;
}

/* Project change: the new screen fades in over the old one, the caption
   swaps quickly. Without motion the change is instant. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hero-case__slide.is-current .hero-case__stage {
    transition: opacity 640ms var(--ease-out);
  }

  html.motion .hero-case__slide.is-current .hero-case__meta {
    transition: opacity 420ms var(--ease-out) 160ms;
  }

  html.motion .hero-case__slide.is-leaving .hero-case__meta {
    transition: opacity 160ms linear;
  }
}

@media (max-width: 639px) {
  .hero-case {
    gap: var(--s-4);
  }

  .hero-case__slide {
    gap: var(--s-6);
  }

  .hero-case__stage::before {
    inset: 0.5rem -0.5rem -0.5rem 0.5rem;
  }

  .hero-case__bar {
    height: 1.75rem;
  }

  .hero-case__url {
    font-size: 0.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-case__frame,
  .hero-case__frame:hover {
    transform: none;
    transition: none;
  }

  .hero-case__dot::before {
    transition: none;
  }
}

/* Signature artwork layers (includes/partials/home-hero-art.php). Light is
   hierarchy: the lead band and the window's right edge are brightest, teal
   accents next, structure in quiet blue-grey, drafting faintest. */
.sg {
  --sg-travel: 34px;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.sg-grid {
  stroke: #4d8dff;
  stroke-opacity: 0.09;
  stroke-width: 1;
}

.sg-arc__solid {
  stroke: #7fa6d6;
  stroke-opacity: 0.16;
  stroke-width: 1;
}

.sg .sg-arc__dash {
  stroke: #7fa6d6;
  stroke-opacity: 0.22;
  stroke-width: 1;
  stroke-dasharray: 4 8;
}

.sg-guides {
  stroke: #7fa6d6;
  stroke-opacity: 0.26;
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

.sg-base-line {
  stroke: #7fa6d6;
  stroke-opacity: 0.2;
  stroke-width: 1;
}

.sg-spec {
  stroke: #8fb3d9;
  stroke-opacity: 0.34;
  stroke-width: 1;
}

.sg-dims {
  stroke: #a9bfdc;
  stroke-opacity: 0.45;
  stroke-width: 1.1;
}

.sg-label {
  fill: #8496b0;
  stroke: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.sg-window__fill {
  fill-opacity: 0.92;
}

.sg-window__line {
  stroke: #a9bfdc;
  stroke-opacity: 0.5;
  stroke-width: 1.6;
}

.sg-window__edge {
  stroke: url(#sg-edge);
  stroke-width: 2;
}

.sg-dots circle {
  stroke: #a9bfdc;
  stroke-opacity: 0.55;
  stroke-width: 1.4;
}

.sg-ui {
  stroke: #a9bfdc;
  stroke-opacity: 0.4;
  stroke-width: 1.6;
}

.sg-ui .sg-ui__rule {
  stroke-opacity: 0.26;
  stroke-width: 1.2;
}

.sg-ui .sg-card {
  stroke-opacity: 0.46;
}

.sg-panel {
  stroke: #5fc8f0;
  stroke-opacity: 0.38;
  stroke-width: 1.4;
}

.sg-ring {
  stroke: #a9bfdc;
  stroke-opacity: 0.18;
  stroke-width: 4;
}

.sg-accents {
  stroke: var(--teal-300);
  stroke-width: 2.2;
}

.sg-accents path {
  stroke-width: 3;
}

.sg-accents .sg-accent--blue {
  stroke: #4d8dff;
  stroke-opacity: 0.9;
  stroke-width: 4;
}

.sg-accents .sg-ring__arc {
  stroke-width: 4;
}

.sg-band__soft {
  fill: url(#sg-band-soft);
  fill-opacity: 0.42;
  stroke: #5fd3e6;
  stroke-opacity: 0.72;
  stroke-width: 1.6;
}

.sg-band__lead {
  fill: url(#sg-band-lead);
  stroke: #c6fbef;
  stroke-opacity: 0.5;
  stroke-width: 1;
}

.sg-band__halo {
  fill: none;
  stroke: var(--teal-300);
  stroke-opacity: 0.1;
  stroke-width: 14;
}

.sg-anchors {
  fill: var(--teal-300);
  fill-opacity: 0.85;
}

.sg [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* The one highlight that completes the window; invisible at rest. */
.sg .sg-sweep {
  stroke: #c6fbef;
  stroke-width: 2.2;
  stroke-dasharray: 0.12 0.88;
  stroke-dashoffset: 0.12;
  opacity: 0;
}

/* Tablet: no drafting grid. Phones: the central silhouette only - no grid,
   dimensions, labels, diagonal guides, dashed arc or outer anchors. */
@media (max-width: 1023px) {
  .sg-grid {
    display: none;
  }
}

@media (max-width: 639px) {
  .sg {
    --sg-travel: 16px;
  }

  .sg-dims,
  .sg .sg-arc__dash,
  .sg-guides__diag,
  .sg-anchor--aux {
    display: none;
  }
}

/* Stacked tablet hero: the artwork stays a strong figure without doubling
   the hero's height. */
@media (min-width: 640px) and (max-width: 1023px) {
  .home-hero__art {
    max-width: 36rem;
  }
}

/* Below 1200px the dimension figures would render at about 10px: keep the
   dimension lines, drop the numbers. */
@media (max-width: 1199px) {
  .sg-label {
    display: none;
  }
}

@media (min-width: 1024px) {
  .home-hero {
    display: grid;
    min-height: clamp(38rem, 86svh, 54rem);
    align-items: center;
  }

  .home-hero__grid {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  /* The showcase stays inside the container, aligned to its right edge. */
  .home-hero__art {
    justify-self: end;
  }
}

/* Opening sequence (about 1.9 s), then static.
   A  construction  0.0-0.5 s  grid, construction circle, guides, anchors,
                               specification rectangle, dimensions
   B  formation     0.5-1.4 s  window completes, rules and dots, surfaces,
                               bands enter into the window in sequence,
                               teal accents activate
   C  settle        1.4-1.9 s  one highlight completes the window, the lead
                               band's halo and the right edge settle, guides
                               quieten
   Every keyframe ends on the static value: nothing is left hidden. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .home-hero__title {
    animation: sg-rise 780ms var(--ease-out) 60ms backwards;
  }

  html.motion .home-hero__lead {
    animation: sg-rise 760ms var(--ease-out) 200ms backwards;
  }

  html.motion .home-hero__actions {
    animation: sg-settle 620ms var(--ease-out) 420ms backwards;
  }

  /* Transform only: the screenshot is the LCP element and paints at once. */
  html.motion .hero-case {
    animation: hero-case-in 900ms var(--ease-out) 120ms backwards;
  }

  /* A - construction */
  html.motion .sg-grid {
    animation: sg-fade 500ms var(--ease-out) backwards;
  }

  html.motion .sg-arc__solid {
    animation: sg-draw 900ms var(--ease-in-out) backwards;
  }

  html.motion .sg .sg-arc__dash {
    animation: sg-fade 600ms var(--ease-out) 100ms backwards;
  }

  html.motion .sg-guides {
    animation: sg-guides 1900ms linear backwards;
  }

  html.motion .sg-base-line {
    animation: sg-fade 500ms var(--ease-out) 150ms backwards;
  }

  html.motion .sg-spec {
    animation: sg-draw 600ms var(--ease-out) 100ms backwards;
  }

  html.motion .sg-dims > path {
    animation: sg-draw 500ms var(--ease-out) 200ms backwards;
  }

  html.motion .sg-label {
    animation: sg-fade 300ms var(--ease-out) 480ms backwards;
  }

  html.motion .sg-anchors > * {
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-pop 320ms var(--ease-out) 120ms backwards;
  }

  html.motion .sg-anchors > :nth-child(2) { animation-delay: 160ms; }
  html.motion .sg-anchors > :nth-child(3) { animation-delay: 200ms; }
  html.motion .sg-anchors > :nth-child(4) { animation-delay: 240ms; }
  html.motion .sg-anchors > :nth-child(5) { animation-delay: 270ms; }
  html.motion .sg-anchors > :nth-child(6) { animation-delay: 300ms; }
  html.motion .sg-anchors > :nth-child(7) { animation-delay: 330ms; }
  html.motion .sg-anchors > :nth-child(8) { animation-delay: 360ms; }
  html.motion .sg-anchors > :nth-child(9) { animation-delay: 390ms; }
  html.motion .sg-anchors > :nth-child(n + 10) { animation-delay: 420ms; }

  /* B - formation */
  html.motion .sg-window__line {
    animation: sg-draw 700ms var(--ease-in-out) 380ms backwards;
  }

  html.motion .sg-window__fill {
    animation: sg-fade 450ms var(--ease-out) 450ms backwards;
  }

  html.motion .sg-ui > * {
    animation: sg-draw 420ms var(--ease-out) 620ms backwards;
  }

  html.motion .sg-ui > :nth-child(2) { animation-delay: 660ms; }
  html.motion .sg-ui > :nth-child(3) { animation-delay: 720ms; }
  html.motion .sg-ui > :nth-child(4) { animation-delay: 750ms; }
  html.motion .sg-ui > :nth-child(5) { animation-delay: 780ms; }
  html.motion .sg-ui > :nth-child(6) { animation-delay: 810ms; }
  html.motion .sg-ui > :nth-child(7) { animation-delay: 840ms; }
  html.motion .sg-ui > :nth-child(8) { animation-delay: 800ms; }
  html.motion .sg-ui > :nth-child(9) { animation-delay: 850ms; }
  html.motion .sg-ui > :nth-child(10) { animation-delay: 920ms; }

  html.motion .sg-dots circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-pop 300ms var(--ease-out) 700ms backwards;
  }

  html.motion .sg-dots circle:nth-child(2) { animation-delay: 740ms; }
  html.motion .sg-dots circle:nth-child(3) { animation-delay: 780ms; }

  html.motion .sg-panel {
    animation: sg-surface 520ms var(--ease-out) 820ms backwards;
  }

  html.motion .sg-ring {
    animation: sg-fade 400ms var(--ease-out) 900ms backwards;
  }

  html.motion .sg-band {
    animation: sg-band 560ms var(--ease-out) 900ms backwards;
  }

  html.motion .sg-band:nth-child(2) { animation-delay: 980ms; }
  html.motion .sg-band:nth-child(3) { animation-delay: 1060ms; }

  html.motion .sg-glow {
    animation: sg-fade 700ms var(--ease-out) 1100ms backwards;
  }

  html.motion .sg-accents > * {
    animation: sg-draw 380ms var(--ease-out) 1150ms backwards;
  }

  html.motion .sg-accents > :nth-child(2) { animation-delay: 1190ms; }
  html.motion .sg-accents > :nth-child(3) { animation-delay: 1230ms; }

  html.motion .sg-accents .sg-ring__arc {
    animation-duration: 480ms;
    animation-delay: 1000ms;
  }

  /* C - settle */
  html.motion .sg-window__edge {
    animation: sg-draw 600ms var(--ease-out) 1100ms backwards;
  }

  html.motion .sg-band__halo {
    animation: sg-fade 500ms var(--ease-out) 1300ms backwards;
  }

  html.motion .sg .sg-sweep {
    animation: sg-sweep 500ms var(--ease-in-out) 1400ms backwards;
  }
}

@keyframes sg-rise {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes hero-case-in {
  from { transform: translateY(18px); }
}

@keyframes sg-settle {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes sg-fade {
  from { opacity: 0; }
}

@keyframes sg-draw {
  from { stroke-dashoffset: 1; }
}

@keyframes sg-pop {
  from { opacity: 0; transform: scale(0.6); }
}

@keyframes sg-surface {
  from { opacity: 0; transform: translateY(6px); }
}

/* Bands slide up their own 45-degree axis into the window. */
@keyframes sg-band {
  from { opacity: 0; transform: translate(calc(-1 * var(--sg-travel)), var(--sg-travel)); }
}

/* Guides arrive brighter while the scene is set out, then quieten to rest. */
@keyframes sg-guides {
  0% { opacity: 0; stroke-opacity: 0.5; }
  20% { opacity: 1; stroke-opacity: 0.5; }
  74% { stroke-opacity: 0.5; }
  100% { opacity: 1; stroke-opacity: 0.26; }
}

@keyframes sg-sweep {
  0% { opacity: 0; stroke-dashoffset: 0.12; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -0.88; }
}

/* Selected work: two editorial scenes, one dominant real screen at a time. */
/* The MYK wipe starts 32px outside its column: keep it from widening the page. */
.home-work {
  overflow-x: clip;
}

.home-work__head {
  display: grid;
  gap: var(--s-3) var(--s-8);
  margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
}

.home-work__title {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.home-work__lead {
  max-width: 30rem;
  color: var(--muted);
  font-size: var(--fs-lead);
}

.home-work__all {
  justify-self: start;
}

.work-scene {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.work-scene + .work-scene {
  margin-top: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
}

.work-scene__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mid-950);
  box-shadow: 0 40px 80px -48px rgba(7, 26, 51, 0.55), 0 0 0 1px rgba(7, 26, 51, 0.08);
  clip-path: inset(0 round 14px);
}

.work-scene__bar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid rgba(150, 180, 220, 0.14);
  background: #0a1a2e;
}

.work-scene__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(150, 180, 220, 0.35);
}

.work-scene__bar span {
  min-width: 0;
  margin-left: var(--s-3);
  overflow: hidden;
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-scene__shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.work-scene__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.work-scene__copy {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

.work-scene__sector {
  color: var(--teal-600);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-scene__name {
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.work-scene__category {
  color: var(--ink);
  font-weight: 650;
}

.work-scene__text {
  max-width: 30rem;
  color: var(--text);
}

.work-scene__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-6);
  margin-top: var(--s-1);
}

@media (hover: hover) and (pointer: fine) {
  .work-scene__shot img {
    transition: transform 1.2s var(--ease-out);
  }

  .work-scene__frame:hover .work-scene__shot img {
    transform: scale(1.02);
  }
}

@media (min-width: 960px) {
  .home-work__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .home-work__all {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
  }

  .work-scene {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .work-scene--b {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  }

  .work-scene--b .work-scene__frame {
    order: 2;
  }
}

/* Arrival as each scene is reached: Sabur opens from a centred mask and
   settles; MYK answers with a wipe from its outer edge. Copy follows. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .work-scene__frame {
    transition: clip-path 1.15s var(--ease-out), transform 1.15s var(--ease-out);
  }

  html.motion .work-scene__shot img {
    transition: transform 1.4s var(--ease-out);
  }

  html.motion .work-scene__copy > * {
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }

  html.motion .work-scene__copy > :nth-child(1) { transition-delay: 0.25s; }
  html.motion .work-scene__copy > :nth-child(2) { transition-delay: 0.31s; }
  html.motion .work-scene__copy > :nth-child(3) { transition-delay: 0.37s; }
  html.motion .work-scene__copy > :nth-child(4) { transition-delay: 0.43s; }
  html.motion .work-scene__copy > :nth-child(n + 5) { transition-delay: 0.49s; }

  html.motion .work-scene--a:not(.is-in) .work-scene__frame {
    clip-path: inset(9% 7% 9% 7% round 26px);
    transform: translateY(28px);
  }

  html.motion .work-scene--a:not(.is-in) .work-scene__shot img {
    transform: scale(1.08);
  }

  html.motion .work-scene--b:not(.is-in) .work-scene__frame {
    clip-path: inset(0 0 0 100% round 14px);
    transform: translateX(32px);
  }

  html.motion .work-scene--b:not(.is-in) .work-scene__shot img {
    transform: scale(1.06) translateX(-3%);
  }

  html.motion .work-scene:not(.is-in) .work-scene__copy > * {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Featured product: deep navy, schematic left, product copy right. */
.home-product {
  position: relative;
  padding: clamp(4.5rem, 3rem + 5vw, 7.5rem) 0 clamp(4rem, 2.6rem + 4vw, 6rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 70%, rgba(2, 8, 18, 0.55)),
    radial-gradient(44rem 30rem at 20% 40%, rgba(95, 224, 200, 0.1), transparent 62%),
    radial-gradient(34rem 24rem at 100% 0%, rgba(47, 124, 246, 0.1), transparent 60%),
    var(--mid-950);
  color: var(--on-dark-2);
  isolation: isolate;
}

.home-product :focus-visible {
  outline-color: var(--teal-300);
}

.home-product__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}

.home-product__art {
  margin: 0;
  padding: var(--s-6) var(--s-5) var(--s-4);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  background: rgba(6, 23, 49, 0.55);
  color: var(--teal-300);
}

.home-product__caption {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}

.home-product__copy {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}

.home-product__label {
  color: var(--teal-300);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-product__title {
  color: var(--on-dark);
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.home-product__text {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.home-product__areas {
  display: grid;
  width: 100%;
  max-width: 34rem;
  border-top: 1px solid var(--line-dark-strong);
  list-style: none;
}

.home-product__areas li {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

.home-product__areas .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--teal-300);
}

.home-product__cta {
  margin-top: var(--s-2);
}

@media (min-width: 640px) {
  .home-product__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .home-product__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* The schematic draws once on arrival: tables, then orders, then surfaces. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .home-product__art [pathLength] {
    transition: stroke-dashoffset 1.1s var(--ease-out);
  }

  html.motion .home-product__art .hl-orders > [pathLength] { transition-delay: 0.45s; }
  html.motion .home-product__art .hl-surfaces > [pathLength] { transition-delay: 0.75s; }
  html.motion .home-product__art .hl-trend > [pathLength] { transition-delay: 1.35s; }

  html.motion .home-product__art .hl-node,
  html.motion .home-product__art .hl-soft {
    transition: opacity 0.6s var(--ease-out) 0.35s;
  }

  html.motion .home-product__art .hl-soft {
    transition-delay: 1.2s;
  }

  html.motion .home-product__art:not(.is-in) [pathLength] {
    stroke-dashoffset: 1;
  }

  html.motion .home-product__art:not(.is-in) .hl-node,
  html.motion .home-product__art:not(.is-in) .hl-soft {
    opacity: 0;
  }
}

/* Genuine product screens (home-product.php; replaces the schematic once the
   owner installs screenshots). One dominant screen, smaller supporting screens
   below it, quiet frames: the real UI is the focus. Frame ratios: desktop and
   web 16:10, phone 9:19.5. Focal point and fit per slot come from the
   partial's $productScreens (data-focus / data-fit). */
.rp {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}

.rp-screen {
  display: block;
  min-width: 0;
  margin: 0;
}

.rp-screen__bar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line-dark-strong);
  border-bottom-color: var(--line-dark);
  border-radius: 12px 12px 0 0;
  background: #0a1a2e;
}

.rp-screen__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(150, 180, 220, 0.35);
}

/* Desktop application: window controls on the right, no browser chrome. */
.rp-screen__bar--desktop {
  justify-content: flex-end;
  gap: 9px;
}

.rp-screen__bar--desktop i {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(150, 180, 220, 0.42);
  border-radius: 1.5px;
  background: none;
}

.rp-screen__view {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-dark-strong);
  border-radius: 12px;
  background: #06142a;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
}

.rp-screen__bar + .rp-screen__view {
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.rp-screen__view picture {
  display: contents;
}

.rp-screen__view img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.rp-screen[data-fit="contain"] .rp-screen__view img { object-fit: contain; object-position: center; }
.rp-screen[data-focus="top"] .rp-screen__view img { object-position: center top; }
.rp-screen[data-focus="top-left"] .rp-screen__view img { object-position: left top; }
.rp-screen[data-focus="center"] .rp-screen__view img { object-position: center; }
.rp-screen[data-focus="left"] .rp-screen__view img { object-position: left center; }

/* QR menu: a clean, narrow mobile viewport. */
.rp-screen--phone .rp-screen__view {
  aspect-ratio: 9 / 19.5;
  border: 2px solid rgba(150, 180, 220, 0.32);
  border-radius: 24px;
}

.rp-screen__label {
  margin-top: 0.6rem;
  color: var(--on-dark-3);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}

/* The QR menu alone leads as a centred phone, not a stretched panel. */
.rp-screen--lead.rp-screen--phone {
  justify-self: center;
  width: min(100%, 17rem);
}

/* Supporting screens: always smaller than the lead, aligned to its right. */
.rp-support {
  display: grid;
  gap: inherit;
  align-items: end;
}

.rp-support--wide .rp-screen {
  justify-self: end;
  width: 64%;
}

.rp-support--phone .rp-screen {
  justify-self: end;
  width: min(30%, 9.5rem);
}

/* A wide screen and the phone share one baseline at about equal heights. */
.rp-support--pair {
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr);
}

/* Lead plus the phone only: side by side on one baseline (tablet up), which
   keeps the section as compact as the schematic. */
@media (min-width: 640px) {
  .rp--side {
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr);
    align-items: end;
  }

  .rp--side .rp-support--phone .rp-screen {
    width: 100%;
  }
}

@media (max-width: 639px) {
  .rp-support--wide .rp-screen {
    width: 78%;
  }

  .rp-support--phone .rp-screen {
    width: 36%;
  }

  .rp-support--pair {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* Arrival: the lead unmasks upward with a short rise; supports follow. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .rp-screen--lead {
    clip-path: inset(-3rem);
    transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out), opacity 0.6s var(--ease-out);
  }

  html.motion .rp:not(.is-in) .rp-screen--lead {
    clip-path: inset(-3rem -3rem 18% -3rem);
    opacity: 0;
    transform: translateY(18px);
  }

  html.motion .rp-support .rp-screen {
    transition: opacity 0.7s var(--ease-out) 0.22s, transform 0.7s var(--ease-out) 0.22s;
  }

  html.motion .rp-support .rp-screen + .rp-screen {
    transition-delay: 0.32s;
  }

  html.motion .rp:not(.is-in) .rp-support .rp-screen {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Product -> closing CTA: the product section deepens toward its foot so the
   CTA band reads a tone lighter, divided by a hairline that fades at its ends. */
.page-home .cta-final {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(150, 180, 220, 0.24) 18%, rgba(150, 180, 220, 0.24) 82%, transparent) 1;
}

@media print {
  .site-header,
  .site-footer,
  .cookie-notice,
  .mobile-menu,
  .cta-final,
  .scene {
    display: none !important;
  }

  .hero,
  .env-dark {
    background: none !important;
    color: #000 !important;
  }
}