/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer wins ordinary layout rules.
   Native hidden and closed-dialog states take precedence over component display rules. */
@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }

  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* functional inline SVG icons opt into bounded geometry; content SVGs keep their own */
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display: none; }
/* /OD-LAYOUT-PRIMITIVES v1 */

/* =====================================================================
   Self-hosted display face: Manrope (SIL Open Font License, see assets/fonts/OFL.txt)
   ===================================================================== */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("assets/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: 200 800; font-display: swap;
  src: url("assets/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;
}

/* =====================================================================
   Rakami — design tokens
   Palette derived from the logo gradient (teal #0A9FA3 → deep blue #075A95).
   Teal is reserved for large type, icons and accents (3:1 on white);
   the deeper "ink-blue" carries links and small accent text (≥4.5:1).
   ===================================================================== */
:root {
  --c-teal: #0A9FA3;
  --c-teal-deep: #0A6D8F;      /* small accent text / links on white */
  --c-blue: #075A95;
  --c-navy: #0B2A3F;           /* inverse sections */
  --c-navy-2: #10384F;         /* inverse surface */
  --c-ink: #0F1A24;
  --c-ink-2: #3F4D5A;          /* secondary text, 8:1 on white */
  --c-ink-3: #5E6B77;          /* captions, 5.6:1 on white */
  --c-line: #D9E1E7;
  --c-surface: #FFFFFF;
  --c-surface-2: #F3F6F8;
  --c-surface-teal: #E6F5F5;
  --c-on-navy: #E8F0F5;
  --c-on-navy-2: #B9CBD8;      /* secondary on navy, 8.5:1 */
  --c-teal-on-navy: #4FC8CB;   /* accent on navy, 7.9:1 */
  --c-error: #B3261E;
  --c-success: #1B6B3A;

  --f-display: "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --f-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.875rem;   /* 14 */
  --t-sm: 1rem;       /* 16 */
  --t-md: 1.125rem;   /* 18 */
  --t-lg: 1.5rem;     /* 24 */
  --t-xl: 2rem;       /* 32 */
  --t-2xl: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
  --t-3xl: clamp(2.75rem, 2.2rem + 3vw, 4.5rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --container: 1200px;
  --header-h: 72px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.6, 0, 0.8, 0.4);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms;

  --shadow-sm: 0 1px 2px rgba(15, 26, 36, 0.06), 0 1px 1px rgba(15, 26, 36, 0.04);
}

/* --------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-surface);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; line-height: 1.15; letter-spacing: -0.01em; color: inherit; }
h1 { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: var(--t-lg); font-weight: 600; }
h4 { font-size: var(--t-md); font-weight: 600; }
p { margin: 0; }
p + p { margin-top: var(--s-4); }
a { color: var(--c-teal-deep); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--c-blue); }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; border-radius: var(--r-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 768px) { .container { padding-inline: var(--s-6); } }

.lead { font-size: var(--t-md); color: var(--c-ink-2); max-width: 62ch; }
.measure { max-width: 62ch; }
.muted { color: var(--c-ink-2); }
.eyebrow {
  display: block; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); margin-bottom: var(--s-3);
}
.inverse .eyebrow { color: var(--c-teal-on-navy); }
.inverse .lead, .inverse .muted { color: var(--c-on-navy-2); }

/* --------------------------------------------------------------- skip link */
.skip-link { position: absolute; left: var(--s-4); top: -100px; background: var(--c-navy); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); z-index: 100; text-decoration: none; }
.skip-link:focus { top: var(--s-4); color: #fff; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .bar { height: var(--header-h); display: flex; align-items: center; gap: var(--s-4); }
/* language switch: current code + chevron, other languages in a small menu */
.lang-switch { position: relative; margin-left: auto; order: 2; }
.lang-btn {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 40px; padding: 0 var(--s-2) 0 var(--s-3);
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em;
  color: var(--c-ink-2); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lang-btn:hover { color: var(--c-ink); background: var(--c-surface-2); border-color: #B8C5CF; }
.lang-btn .chevron { --od-icon-size: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.lang-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: 160px; padding: var(--s-2); margin: 0; z-index: 60;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 12px 28px rgba(11, 42, 63, 0.12);
  animation: nav-in var(--dur-fast) var(--ease-out);
}
.lang-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3);
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-2); text-decoration: none; border-radius: var(--r-sm);
}
.lang-menu li a:hover { color: var(--c-ink); background: var(--c-surface-2); }
.lang-menu li a[aria-current="true"] { color: var(--c-teal-deep); background: var(--c-surface-teal); }
.lang-menu li a[aria-current="true"]::after { content: "✓"; font-size: var(--t-xs); }
.nav-toggle { order: 3; }
@media (min-width: 1024px) { .site-nav { order: 1; margin-left: auto; } .lang-switch { margin-left: var(--s-3); } }
/* header brand: coloured emblem + typed name, mirroring the footer treatment */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink); }
.brand img { display: block; width: 32px; height: 32px; }
.brand span { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: 0.02em; color: var(--c-blue); line-height: 1; }
.brand:hover { color: var(--c-ink); }
.brand:hover span { color: var(--c-navy); }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
}
.nav-toggle .od-icon { --od-icon-size: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav { display: none; }
.site-nav ul { display: flex; flex-direction: column; gap: var(--s-1); }
/* plain menu links; the call-to-action button in .nav-cta keeps its own button styles */
.site-nav li:not(.nav-cta) a {
  display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3);
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm);
  color: var(--c-ink-2); text-decoration: none; border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-nav li:not(.nav-cta) a:hover { color: var(--c-ink); background: var(--c-surface-2); }
.site-nav li:not(.nav-cta) a[aria-current="page"] { color: var(--c-teal-deep); background: var(--c-surface-teal); }
.site-nav .nav-cta { margin-top: var(--s-3); }
.site-nav .nav-cta .btn-primary { color: #fff; background: var(--c-blue); border-color: var(--c-blue); }
.site-nav .nav-cta .btn-primary:hover, .site-nav .nav-cta .btn-primary:focus-visible { color: #fff; background: var(--c-navy); border-color: var(--c-navy); }

/* mobile drawer */
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: var(--header-h);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: var(--s-4) var(--s-5) var(--s-5);
  box-shadow: 0 16px 32px rgba(11, 42, 63, 0.08);
  animation: nav-in var(--dur-base) var(--ease-out);
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; padding: 0; border: 0; box-shadow: none; animation: none; }
  .site-nav ul { flex-direction: row; align-items: center; gap: var(--s-1); }
  .site-nav .nav-cta { margin: 0 0 0 var(--s-4); }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); line-height: 1.2;
  border-radius: var(--r-md); border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn .od-icon { --od-icon-size: 18px; }
.btn-primary { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-primary:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: #8FA6B6; border-color: #8FA6B6; color: #fff; cursor: not-allowed; }
.btn-secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); }
.btn-secondary:hover { background: var(--c-surface-2); color: var(--c-ink); border-color: #B8C5CF; }
.inverse .btn-secondary { background: transparent; color: var(--c-on-navy); border-color: rgba(232, 240, 245, 0.35); }
.inverse .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(232, 240, 245, 0.6); }
.inverse .btn-primary { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-navy); }
.inverse .btn-primary:hover { background: var(--c-teal-on-navy); border-color: var(--c-teal-on-navy); color: var(--c-navy); }
.btn-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-family: var(--f-display); font-weight: 700; color: var(--c-teal-deep); text-decoration: none; }
.btn-link .od-icon { --od-icon-size: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn-link:hover { color: var(--c-blue); text-decoration: underline; }
.btn-link:hover .od-icon { transform: translateX(3px); }
.inverse .btn-link { color: var(--c-teal-on-navy); }
.inverse .btn-link:hover { color: #fff; }

/* --------------------------------------------------------------- sections */
.section { padding-block: var(--s-8); }
@media (min-width: 768px) { .section { padding-block: var(--s-9); } }
.section-alt { background: var(--c-surface-2); }
.inverse { background: var(--c-navy); color: var(--c-on-navy); }
.inverse a { color: var(--c-teal-on-navy); }
.section-head { max-width: 62ch; margin-bottom: var(--s-7); }
.section-head p { margin-top: var(--s-4); }
.section-head.center { margin-inline: auto; text-align: center; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; padding-block: var(--s-8) var(--s-8); overflow: hidden; }
@media (min-width: 768px) { .hero { padding-block: var(--s-9) var(--s-9); } }
.hero-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } }
.hero h1 { max-width: 18ch; }
.hero .lead { margin-top: var(--s-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-emblem { display: flex; justify-content: center; padding: var(--s-6) 0; }
.hero-mark { position: relative; isolation: isolate; width: min(100%, 300px); }
.hero-mark img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.hero-mark::before {
  content: ""; position: absolute; inset: 10% -10% -10% 10%; z-index: -2;
  background: var(--c-surface-teal); border-radius: 48% 52% 50% 50%;
  animation: blob-drift 18s var(--ease-out) infinite alternate;
}
/* restrained network motif: nodes and links in the brand teal, sitting behind the emblem.
   Motion: the whole net turns once every two minutes, nodes breathe in turn, the blob drifts. */
.hero-net {
  position: absolute; left: -35%; top: -35%; width: 170%; height: 170%;
  z-index: -1; pointer-events: none; color: var(--c-teal);
  transform-origin: 50% 50%; will-change: transform;
  transition: transform 600ms var(--ease-out);   /* pointer parallax, driven by the script */
}
.hero-net .net-lines { opacity: 0.3; }
.hero-net .net-lines line { transition: opacity 400ms var(--ease-out); }
.hero-net .net-lines line.faint { opacity: 0.45; }
.hero-net .net-lines line.lit { opacity: 1; stroke-width: 1.75; }
.hero-net .net-nodes { opacity: 0.6; }
.hero-net .net-nodes circle { transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-out), opacity 500ms var(--ease-out); }
.hero-net .net-nodes circle.lit { transform: scale(1.9); opacity: 1; }
.hero-net .net-signals circle { opacity: 0.9; }
.hero-net .net-signals circle.halo { opacity: 0.25; }
@keyframes blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.04); }
  100% { transform: translate(2%, -3%) scale(0.98); }
}
@media (max-width: 767px) { .hero-net { left: -25%; top: -25%; width: 150%; height: 150%; } }
@media (prefers-reduced-motion: reduce) {
  .hero-mark::before { animation: none; }
  .hero-net, .hero-net .net-lines line, .hero-net .net-nodes circle { transition: none; }
}
.hero-note { margin-top: var(--s-6); display: flex; gap: var(--s-3); align-items: flex-start; color: var(--c-ink-2); font-size: var(--t-xs); max-width: 48ch; }
.hero-note .od-icon { --od-icon-size: 20px; color: var(--c-teal); margin-top: 2px; }

/* page hero (inner pages) */
.page-hero { padding-block: var(--s-8) var(--s-7); border-bottom: 1px solid var(--c-line); }
@media (min-width: 768px) { .page-hero { padding-block: var(--s-9) var(--s-8); } }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: var(--s-5); }

/* ----------------------------------------------------------- service grid */
.services-grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1200px) { .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
  color: var(--c-ink); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.service-card:hover { border-color: var(--c-teal); color: var(--c-ink); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 42, 63, 0.08); }
.service-card .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--r-md); background: var(--c-surface-teal); color: var(--c-teal-deep);
}
.service-card .icon-wrap .od-icon { --od-icon-size: 24px; }
.service-card p { color: var(--c-ink-2); }
.service-card .btn-link { margin-top: auto; }

/* --------------------------------------------------------- service detail */
.service-detail { display: grid; gap: var(--s-6); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
@media (min-width: 1024px) { .service-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); } }
.service-detail + .service-detail { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--c-line); }
@media (min-width: 768px) { .service-detail + .service-detail { margin-top: var(--s-9); padding-top: var(--s-9); } }
.service-detail .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--s-5);
  border-radius: var(--r-md); background: var(--c-surface-teal); color: var(--c-teal-deep);
}
.service-detail .icon-wrap .od-icon { --od-icon-size: 28px; }
.service-detail h2 { font-size: var(--t-xl); }
.service-detail .lead { margin-top: var(--s-4); }
.facts { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { padding: var(--s-5); background: var(--c-surface-2); border-radius: var(--r-lg); }
.fact h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.fact ul { display: grid; gap: var(--s-2); }
.fact li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--c-ink-2); }
.fact li .od-icon { --od-icon-size: 20px; color: var(--c-teal-deep); margin-top: 3px; }

/* ----------------------------------------------- cloud vs on-prem compare */
/* collapsed "good to know / how it works" disclosure under each service */
.disclosure { grid-column: 1 / -1; margin-top: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.disclosure summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-4);
  min-height: 64px; padding: var(--s-4) var(--s-5); transition: background var(--dur-fast) var(--ease-out);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { background: var(--c-surface-2); }
.disclosure summary:focus-visible { outline: 3px solid var(--c-teal); outline-offset: -3px; }
.disclosure-kicker { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border-radius: 999px; background: var(--c-surface-teal); color: var(--c-teal-deep); font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.disclosure-title { font-family: var(--f-display); font-weight: 600; font-size: var(--t-md); color: var(--c-ink); line-height: 1.3; }
.disclosure .chevron { --od-icon-size: 22px; color: var(--c-teal-deep); transition: transform var(--dur-base) var(--ease-out); }
.disclosure[open] .chevron { transform: rotate(180deg); }
.disclosure[open] summary { border-bottom: 1px solid var(--c-line); }
.disclosure-body { padding: var(--s-5); animation: disclose var(--dur-slow) var(--ease-out); }
@media (min-width: 768px) { .disclosure-body { padding: var(--s-6) var(--s-7) var(--s-7); } }
@keyframes disclose { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .disclosure summary { grid-template-columns: minmax(0, 1fr) auto; }
  .disclosure-kicker { grid-column: 1 / -1; justify-self: start; }
}

/* numbered process inside a disclosure */
.process-intro { color: var(--c-ink-2); margin-bottom: var(--s-6); }
.process { display: grid; gap: var(--s-5); counter-reset: none; }
@media (min-width: 768px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 1200px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--c-surface-teal); }
.process .num { font-family: var(--f-display); font-weight: 700; color: var(--c-teal-deep); letter-spacing: 0.06em; }
.process h4 { font-size: var(--t-md); }
.process p { color: var(--c-ink-2); font-size: var(--t-sm); }

/* cloud vs on-prem comparison (lives inside a disclosure) */
.compare-title { font-size: var(--t-lg); margin-bottom: var(--s-5); max-width: 32ch; }
.compare-grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); } }
.compare-col h4 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); color: var(--c-teal-deep); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid var(--c-surface-teal); }
.compare-col h4 .od-icon { --od-icon-size: 22px; }
.compare-col ul { display: grid; gap: var(--s-3); }
.compare-col li { position: relative; padding-left: var(--s-5); color: var(--c-ink-2); }
.compare-col li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); }
.compare-note { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); color: var(--c-ink-2); }

/* ------------------------------------------------------------ trusted-by */
.logo-strip { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .logo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logo-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.logo-strip li {
  display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); letter-spacing: 0.02em; color: var(--c-ink-2); text-align: center;
}
/* Logos stay on white tiles in inverse sections so brand colours render as intended */
.inverse .logo-strip li { background: var(--c-surface); border-color: rgba(232, 240, 245, 0.12); color: var(--c-ink-2); }
.logo-strip li.wide { grid-column: span 2; }
@media (min-width: 768px) { .logo-strip li.wide { grid-column: span 1; } }
.logo-strip .logo { display: block; width: auto; height: auto; max-height: 40px; max-width: 150px; object-fit: contain; }
.logo-strip .logo.tall { max-height: 60px; }
.logo-strip .logo.wide { max-width: 170px; }
.logo-strip .logo.mark { max-height: 64px; max-width: 110px; }   /* square symbol-only marks (e.g. a swoosh) */
/* a white-only brand file sits on a navy tile so it stays visible */
.logo-strip li.on-dark, .inverse .logo-strip li.on-dark { background: var(--c-navy); border-color: var(--c-navy); }
.inverse .logo-strip li.on-dark { border-color: rgba(232, 240, 245, 0.25); }

/* reference cards with a logo */
/* logo centred in its box; name and sector below stay left-aligned */
.ref-card .logo-box { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--s-2) 0; margin-bottom: var(--s-2); }
.ref-card .logo-box.on-dark { background: var(--c-navy); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.ref-card .logo { display: block; width: auto; height: auto; max-height: 44px; max-width: 180px; object-fit: contain; }
.ref-card .logo.tall { max-height: 64px; }
.ref-card .logo.mark { max-height: 72px; max-width: 130px; }

/* ------------------------------------------------------------ partners */
.partner-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .partner-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.partner { display: grid; gap: var(--s-1); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.partner .logo-box { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: var(--s-2) 0; margin-bottom: var(--s-2); }
.partner .logo { display: block; width: auto; height: auto; max-height: 40px; max-width: 150px; object-fit: contain; }
.partner .logo.tall { max-height: 56px; }
.partner .vendor { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); color: var(--c-ink); }
.partner .role { color: var(--c-ink-2); font-size: var(--t-xs); }
.partner .badge { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; color: var(--c-teal-deep); }
.partner .badge .od-icon { --od-icon-size: 16px; }
.iso-line { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-5); color: var(--c-ink-2); font-size: var(--t-xs); }
.iso-line .od-icon { --od-icon-size: 18px; color: var(--c-teal-deep); margin-top: 1px; }

/* ---------------------------------------------------- 2×2 logo square */
.logo-square { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); max-width: 440px; width: 100%; margin-inline: auto; }
@media (min-width: 1024px) { .logo-square { margin-inline: 0 auto; } }
.logo-square li {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: var(--s-5);
  border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid rgba(232, 240, 245, 0.12);
}
.logo-square li.on-dark { background: var(--c-navy-2); border-color: rgba(232, 240, 245, 0.25); }
.logo-square .logo { display: block; width: 100%; height: auto; max-height: 56%; object-fit: contain; }
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: 0.04em; color: var(--c-ink-2); text-align: center; }

/* ------------------------------------------------------------ carousel */
.carousel { display: grid; gap: var(--s-4); align-self: center; width: 100%; max-width: 480px; margin-inline: auto; }
@media (min-width: 1024px) { .carousel { margin-inline: auto 0; } }
.carousel-viewport { overflow: hidden; border-radius: var(--r-lg); }
.carousel-viewport:focus-visible { outline: 3px solid var(--c-teal-on-navy); outline-offset: 4px; }
.carousel-track { display: flex; transition: transform var(--dur-slow) var(--ease-out); }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-slide.ref-card { padding: var(--s-6); }
.carousel-slide .logo-box { min-height: 96px; }
.carousel-slide .logo.mark { max-height: 96px; max-width: 120px; }
.carousel-slide .wordmark { color: var(--c-ink-2); }
.carousel-slide[aria-hidden="true"] { visibility: hidden; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.carousel-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(232, 240, 245, 0.35); background: transparent; color: var(--c-on-navy);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.carousel-btn .od-icon { --od-icon-size: 20px; }
.carousel-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(232, 240, 245, 0.6); color: #fff; }
.carousel-btn:focus-visible { outline-color: var(--c-teal-on-navy); }
.carousel-dots { display: flex; gap: var(--s-2); }
.carousel-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 0; background: rgba(232, 240, 245, 0.35); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.carousel-dot:hover { background: rgba(232, 240, 245, 0.7); }
.carousel-dot[aria-selected="true"] { background: var(--c-teal-on-navy); transform: scale(1.2); }
.carousel-dot:focus-visible { outline: 3px solid var(--c-teal-on-navy); outline-offset: 3px; }
.carousel-status { flex-basis: 100%; text-align: center; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; color: var(--c-on-navy-2); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } .disclosure-body { animation: none; } }

/* ----------------------------------------------------------- split block */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
.split .actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.list-check { display: grid; gap: var(--s-3); }
.list-check li { display: flex; gap: var(--s-3); align-items: flex-start; }
.list-check .od-icon { --od-icon-size: 22px; color: var(--c-teal); margin-top: 2px; }

/* ------------------------------------------------------------- CTA band */
.cta-band { padding-block: var(--s-8); }
@media (min-width: 768px) { .cta-band { padding-block: var(--s-9); } }
.cta-band .inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .cta-band .inner { grid-template-columns: minmax(0, 2fr) auto; } }
.cta-band h2 { max-width: 20ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------- reference list */
.ref-grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1200px) { .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ref-card { padding: var(--s-5) var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); display: grid; gap: var(--s-2); }
.ref-card .name { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); color: var(--c-ink); }
.ref-card .sector { font-size: var(--t-xs); color: var(--c-ink-3); }
.ref-card.community { border-left: 0; background: var(--c-surface-2); }
.ref-card.community .sector { color: var(--c-ink-2); }

/* --------------------------------------------------------------- values */
.values { display: grid; gap: var(--s-5); counter-reset: value; }
@media (min-width: 768px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value { padding-top: var(--s-5); border-top: 2px solid var(--c-teal); }
.value::before { counter-increment: value; content: counter(value, decimal-leading-zero); display: block; font-family: var(--f-display); font-weight: 700; color: var(--c-teal-deep); margin-bottom: var(--s-3); }
.value h3 { margin-bottom: var(--s-3); }
.value p { color: var(--c-ink-2); }

/* -------------------------------------------------------- approach steps */
.steps { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { padding: var(--s-6); background: var(--c-navy-2); border-radius: var(--r-lg); }
.step .num { font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); color: var(--c-teal-on-navy); display: block; margin-bottom: var(--s-3); }
.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--c-on-navy-2); }

/* -------------------------------------------------------------- name story */
.name-story { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .name-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } }
.arabic { font-size: var(--t-3xl); font-weight: 600; font-family: "Segoe UI", "Noto Naskh Arabic", "Tahoma", serif; direction: rtl; color: var(--c-teal-deep); line-height: 1.2; }
.pronounce { font-family: var(--f-display); color: var(--c-ink-3); margin-top: var(--s-2); }

/* ----------------------------------------------------------------- forms */
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }
.form { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* label / control / hint stack from the top; a hint in one field must not stretch the control in its neighbour */
.field { display: grid; gap: var(--s-2); align-content: start; }
.field label { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xs); color: var(--c-ink); }
.field .req { color: var(--c-error); margin-left: 2px; }
.field .hint { font-size: var(--t-xs); color: var(--c-ink-3); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  font: inherit; color: var(--c-ink); background: var(--c-surface);
  border: 1px solid #AEBAC4; border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { min-height: 160px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #7F8F9C; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--c-teal-deep); box-shadow: 0 0 0 3px rgba(10, 159, 163, 0.25); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--c-error); }
.input:disabled, .textarea:disabled { background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-ink-3); cursor: not-allowed; }
.field:has(:disabled) label { color: var(--c-ink-3); }
.field-error { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-xs); color: var(--c-error); }
.field-error .od-icon { --od-icon-size: 18px; margin-top: 1px; }
.form-summary { padding: var(--s-4) var(--s-5); border: 1px solid var(--c-error); border-radius: var(--r-md); background: #FBEDEC; color: var(--c-ink); }
.form-summary ul { margin-top: var(--s-2); display: grid; gap: var(--s-1); list-style: disc; padding-left: var(--s-5); }
.form-summary a { color: var(--c-error); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.form-status { padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-teal); color: var(--c-ink); }
.form-status.is-error { border-color: var(--c-error); background: #FBEDEC; }
.form-status a { font-weight: 600; }
/* client topics (support, remote assistance) point to the Zoho portals instead of sending the form */
.form-redirect { padding: var(--s-5); border: 1px solid #B5DCDD; border-radius: var(--r-lg); background: var(--c-surface-teal); display: grid; gap: var(--s-4); justify-items: start; }
.form-redirect p { color: var(--c-ink); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }  /* spam trap, off-screen */
/* ALTCHA captcha widget, themed with the site tokens */
altcha-widget {
  --altcha-border-color: var(--c-line); --altcha-border-radius: var(--r-md); --altcha-checkbox-border-radius: var(--r-sm);
  --altcha-color-base: var(--c-surface); --altcha-color-base-content: var(--c-ink);
  --altcha-color-primary: var(--c-blue); --altcha-color-primary-content: #fff;
  --altcha-color-success: var(--c-success); --altcha-color-error: var(--c-error); --altcha-spinner-color: var(--c-teal);
  --altcha-max-width: 320px; --altcha-shadow: none;
  display: block; font-family: var(--f-body); font-size: var(--t-xs);
}
.form-note { font-size: var(--t-xs); color: var(--c-ink-3); }
.form-success { padding: var(--s-6); border: 1px solid #BFE3CB; border-radius: var(--r-lg); background: #EDF8F0; display: grid; gap: var(--s-3); }
.form-success .od-row .od-icon { --od-icon-size: 28px; color: var(--c-success); }
.form-success h3 { color: var(--c-success); }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.contact-aside { display: grid; gap: var(--s-5); }
.contact-card { padding: var(--s-6); border-radius: var(--r-lg); background: var(--c-surface-2); display: grid; gap: var(--s-4); }
.contact-card h3 { font-size: var(--t-md); }
.contact-line { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact-line .od-icon { --od-icon-size: 22px; color: var(--c-teal-deep); margin-top: 2px; }
.contact-line .od-stat { --od-gap: 2px; }
.contact-line .label { font-size: var(--t-xs); color: var(--c-ink-3); }
.placeholder { color: var(--c-ink-2); font-style: italic; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--c-navy); color: var(--c-on-navy); padding-block: var(--s-8) var(--s-6); }
.footer-grid { display: grid; gap: var(--s-7); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.footer-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: #fff; }
.footer-brand img { width: 26px; height: 32px; }
.footer-brand span { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: 0.02em; }
.footer-motto { margin-top: var(--s-4); font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); color: var(--c-teal-on-navy); letter-spacing: 0.01em; }
.footer-tagline { margin-top: var(--s-2); color: var(--c-on-navy-2); max-width: 36ch; }
.motto { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); color: var(--c-teal-deep); letter-spacing: 0.01em; margin-bottom: var(--s-3); }
.site-footer h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-on-navy-2); margin-bottom: var(--s-4); }
.site-footer ul { display: grid; gap: var(--s-2); }
.site-footer li a { color: var(--c-on-navy); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.site-footer li a:hover { color: var(--c-teal-on-navy); text-decoration: underline; }
.footer-credentials { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(232, 240, 245, 0.14); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--c-on-navy-2); }
.footer-credentials .lbl { color: var(--c-teal-on-navy); text-transform: uppercase; letter-spacing: 0.12em; margin-right: var(--s-2); }
.footer-credentials span + span:not(.lbl)::before { content: "·"; margin-right: var(--s-4); color: rgba(232, 240, 245, 0.35); }
.footer-credentials .lbl + span::before { content: none; }
.footer-bottom a { color: var(--c-on-navy); text-decoration: none; }
.footer-bottom a:hover { color: var(--c-teal-on-navy); text-decoration: underline; }
/* 404 */
.notfound { padding-block: var(--s-9); text-align: center; }
.notfound .code { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(5rem, 4rem + 6vw, 9rem); line-height: 1; letter-spacing: -0.03em; color: var(--c-surface-teal); -webkit-text-stroke: 2px var(--c-teal); margin-bottom: var(--s-5); }
.notfound h1 { max-width: 18ch; margin-inline: auto; }
.notfound .lead { margin: var(--s-4) auto 0; }
.notfound .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
/* legal pages */
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--t-lg); margin-top: var(--s-7); margin-bottom: var(--s-3); }
.legal h2:first-child { margin-top: 0; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: var(--s-3); }
.legal ul { list-style: disc; padding-left: var(--s-5); display: grid; gap: var(--s-2); color: var(--c-ink-2); }
.legal p { color: var(--c-ink-2); }
.legal .todo { background: #FFF6DB; border: 1px solid #E8D59A; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); color: var(--c-ink); }
.legal .updated { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: var(--s-7); }
.footer-bottom { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid rgba(232, 240, 245, 0.14); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: var(--t-xs); color: var(--c-on-navy-2); }

/* ------------------------------------------------------------- reveal motion */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

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