/* OG Software Services LLC – local review draft.
   Layout, grid and scroll composition follow the reference chosen for this draft; colours, type and content follow the OG Corporate Design V2.0. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.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;
}

:root {
  --navy: #042050;
  --blue: #005efc;
  --cyan: #00d4e8;
  --cloud: #f4f7fb;
  --white: #ffffff;
  --ink: var(--navy);
  --ink-2: #3e4e6b;
  --muted: #5b6b87;
  --tab-off: #7f8faa;
  --grid-line: #edf1f7;
  --panel-grid: #0b2a5e;
  --rule: rgba(4, 32, 80, 0.16);
  --accent: linear-gradient(90deg, var(--blue), var(--cyan));
  --hover-fill: linear-gradient(90deg, var(--navy), var(--blue));
  --font: "Inter", Arial, system-ui, sans-serif;
  --gutter: 40px;
  --header-h: 100px;
  --logo-h: 60px;
  --radius-l: 20px;
  --radius-m: 10px;
  --display: 100px;
  --title: 100px;
  --statement-a: 100px;
  --statement-b: 80px;
  --tab: 80px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --svh: 1vh;
}
@supports (height: 1svh) { :root { --svh: 1svh; } }

@media (max-width: 1850px) { :root { --display: min(5.6vw, 100px); --title: 88px; --statement-a: 88px; --statement-b: 72px; --tab: 72px; } }
@media (max-width: 1600px) { :root { --title: 65px; --statement-a: 65px; --statement-b: 65px; --tab: 65px; } }
@media (max-width: 1400px) { :root { --tab: 55px; } }
@media (max-width: 1200px) { :root { --header-h: 84px; --logo-h: 56px; } }
@media (max-width: 980px) {
  :root { --gutter: 20px; --display: clamp(36px, 10.4vw, 45px); --title: 45px; --statement-a: 40px; --statement-b: 40px; --tab: 32px; --radius-l: 16px; }
}
@media (max-width: 660px) { :root { --title: 36px; --statement-a: 28px; --statement-b: 28px; --tab: 26px; } }
@media (max-width: 420px) { :root { --gutter: 16px; --tab: 22px; } }
@media (max-width: 380px) { :root { --tab: 19px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--white);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (max-width: 980px) { body { font-size: 16px; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1100;
  padding: 12px 18px; border-radius: var(--radius-m);
  background: var(--navy); color: var(--white); font-weight: 600; font-size: 16px;
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip-link:focus-visible { transform: none; }

/* Split-line titles: lines clip their inner text so it can rise from below */
.ml { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ml__in { display: inline-block; }
.char { display: inline-block; will-change: auto; }
.word { display: inline-block; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Buttons: outlined, circle + chevron, fill on hover                   */
/* ------------------------------------------------------------------ */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
  min-width: 240px; height: 70px; padding: 0 28px; white-space: nowrap;
  border-radius: var(--radius-m);
  font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); z-index: -1; }
.btn::before { border: 1px solid var(--navy); background: rgba(255, 255, 255, 0.6); }
.btn::after { background: var(--hover-fill); opacity: 0; transform: scale(0.9, 0.8); }
.btn__label { transition: color 0.3s; }
.btn__ho { position: relative; display: flex; align-items: center; gap: 6px; }
.btn__ho i { display: block; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: all 0.35s var(--ease); }
.btn__chev { width: 14px; height: 14px; transition: transform 0.35s var(--ease), color 0.3s; position: relative; }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; transform: none; }
.btn:active, .row:active, .cases__ctrl:active, .nav__tile:active { transform: scale(0.98); }
.btn, .row { transition: transform 0.15s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { opacity: 0; transform: scale(1.08, 1.2); }
.btn:hover, .btn:focus-visible { color: var(--white); }
.btn:hover .btn__ho i, .btn:focus-visible .btn__ho i { width: 40px; height: 40px; background: var(--white); border-color: var(--white); transform: translateX(16px); }
.btn:hover .btn__chev, .btn:focus-visible .btn__chev { color: var(--blue); transform: translateX(-12px); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn--header { min-width: 200px; height: 60px; padding: 0 22px; font-size: 18px; }
@media (max-width: 1400px) { .btn--header { min-width: 160px; gap: 24px; } }
@media (max-width: 980px) {
  .btn { min-width: 180px; height: 52px; padding: 0 18px; gap: 28px; font-size: 16px; border-radius: 8px; }
}

/* ------------------------------------------------------------------ */
/* Header                                                               */
/* ------------------------------------------------------------------ */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; transition: transform 0.45s var(--ease); }
.site-header__inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 var(--gutter);
  transition: background-color 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid .site-header__inner { background: var(--white); border-color: #dde3ec; }
.site-header.is-hidden { transform: translateY(-100%); }
html.is-intro .site-header { transition: none; }
.brand { display: block; padding: calc(var(--logo-h) * 0.25); margin-left: calc(var(--logo-h) * -0.25); }
.brand__logo { height: var(--logo-h); width: auto; max-width: none; }
.nav { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; }
.nav__list { display: flex; height: 100%; }
.nav__item { position: static; display: flex; }
.nav__link {
  position: relative; display: flex; align-items: center; height: 100%;
  padding: 0 26px; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.4s;
}
@media (max-width: 1600px) { .nav__link { padding: 0 18px; font-size: 18px; } }
@media (max-width: 1360px) { .nav__link { padding: 0 13px; font-size: 16.5px; } }
.nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 3px; border-radius: 3px;
  background: var(--accent); transform: translateX(-50%); transition: width 0.5s var(--ease);
}
.nav__item:hover .nav__link, .nav__item.is-open .nav__link, .nav__link:focus-visible { color: var(--blue); }
.nav__item:hover .nav__link::after, .nav__item.is-open .nav__link::after { width: 40px; }
.nav__panel {
  position: absolute; left: 50%; top: 100%; width: min(1020px, calc(100vw - 2 * var(--gutter)));
  padding-top: 16px; transform: translate(-50%, 6px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s;
}
.nav__item:hover .nav__panel, .nav__item.is-open .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0.08s, 0.08s, 0s; }
.nav__item.is-suppressed .nav__panel { opacity: 0; visibility: hidden; }
.nav__tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px;
  background: var(--white); border-radius: var(--radius-l); box-shadow: 0 24px 60px rgba(4, 32, 80, 0.12);
}
.nav__tile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 70px; padding: 0 20px;
  border-radius: var(--radius-m); background: var(--cloud); font-size: 16px; line-height: 1.25; font-weight: 500;
  transition: background 0.4s, color 0.4s;
}
.nav__tile-icon { width: 14px; height: 14px; }
.nav__tile:hover, .nav__tile:focus-visible { background: var(--hover-fill); color: var(--white); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: rgba(4, 32, 80, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.site-header:has(.nav__item:hover, .nav__item.is-open) .nav-backdrop { opacity: 1; }
.site-header:has(.nav__item:hover, .nav__item.is-open) .site-header__inner { background: var(--white); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.menu-button {
  position: relative; display: none; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--radius-m); border: 1px solid var(--navy); background: rgba(255, 255, 255, 0.7); color: var(--navy);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.menu-button__bars { display: grid; gap: 7px; width: 20px; }
.menu-button__bars i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease), width 0.35s var(--ease); }
.menu-button__bars i:last-child { width: 13px; justify-self: end; }
.menu-button:hover, .menu-button:focus-visible { background: var(--hover-fill); color: var(--white); }
.menu-button:hover .menu-button__bars i:last-child { width: 20px; }
@media (max-width: 1200px) {
  .nav, .btn--header { display: none; }
  .menu-button { display: inline-flex; }
}

/* Mobile menu: full screen, the page grid around a navy panel like the hero, numbered groups, the core as guide */
.site-menu { position: fixed; inset: 0; z-index: 80; color: var(--white); }
.site-menu[hidden] { display: none; }
.site-menu__scrim {
  position: absolute; inset: 0; background-color: var(--white);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0; transition: opacity 0.3s var(--ease);
}
.site-menu__bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); opacity: 0; transition: opacity 0.3s var(--ease); }
.site-menu__brand { display: block; padding: calc(var(--logo-h) * 0.25); margin-left: calc(var(--logo-h) * -0.25); }
.site-menu__brand img { height: var(--logo-h); width: auto; max-width: none; }
.site-menu__close { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-m); border: 1px solid var(--navy); color: var(--navy); background: var(--white); transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.site-menu__close:hover, .site-menu__close:focus-visible { background: var(--hover-fill); color: var(--white); }
.menu-x { position: relative; width: 20px; height: 20px; }
.menu-x i { position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.menu-x i + i { transform: rotate(-45deg); }
.site-menu__panel {
  position: absolute; top: var(--header-h); left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 22px 24px; border-radius: 16px;
  background-color: var(--navy);
  background-image: linear-gradient(var(--panel-grid) 2px, transparent 2px), linear-gradient(90deg, var(--panel-grid) 2px, transparent 2px);
  background-size: 40px 40px; background-position: -1px -1px;
  clip-path: inset(0 0 100% 0 round 16px); transition: clip-path 0.6s var(--ease);
}
.site-menu__core { position: absolute; right: -60px; bottom: -40px; width: 260px; opacity: 0.85; pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.site-menu:has(.menu__toggle[aria-expanded="true"]) .site-menu__core { opacity: 0; transform: translateY(40px); }
.site-menu__core .core { width: 100%; }
.menu { position: relative; z-index: 1; }
.menu__group { border-bottom: 1px solid rgba(255, 255, 255, 0.18); opacity: 0; transform: translateY(26px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(0.18s + var(--i) * 0.06s); }
.menu__toggle { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; width: 100%; min-height: 64px; padding: 6px 0; text-align: left; color: var(--white); }
.menu__num { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--cyan); }
.menu__label { font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -0.035em; }
.menu__plus { position: relative; width: 16px; height: 16px; justify-self: end; }
.menu__plus::before, .menu__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease); }
.menu__plus::after { transform: rotate(90deg); }
.menu__toggle[aria-expanded="true"] .menu__plus::after { transform: rotate(0deg); }
.menu__toggle[aria-expanded="true"] .menu__label { color: var(--cyan); }
.menu__list { padding: 0 0 16px 34px; }
.menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 9px 0; font-size: 16px; line-height: 1.3; color: rgba(255, 255, 255, 0.84); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.menu__arrow { width: 15px; height: 15px; color: var(--cyan); transition: transform 0.3s var(--ease); }
.menu__list a:hover, .menu__list a:focus-visible { color: var(--white); }
.menu__list a:hover .menu__arrow, .menu__list a:focus-visible .menu__arrow { transform: translateX(4px); }
.site-menu__foot { position: relative; z-index: 1; margin-top: auto; padding-top: 28px; opacity: 0; transition: opacity 0.5s var(--ease) 0.5s; }
.btn--menu { width: 100%; color: var(--white); }
.btn--menu::before { border-color: rgba(255, 255, 255, 0.85); background: var(--navy); }
.btn--menu::after { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.site-menu.is-open .site-menu__scrim, .site-menu.is-open .site-menu__bar, .site-menu.is-open .site-menu__foot { opacity: 1; }
.site-menu.is-open .site-menu__panel { clip-path: inset(0 0 0 0 round 16px); }
.site-menu.is-open .menu__group { opacity: 1; transform: none; }
@media (min-width: 700px) { .site-menu__panel { padding: 40px 48px 36px; } .menu__label { font-size: 40px; } .menu__toggle { grid-template-columns: 48px minmax(0, 1fr) 24px; min-height: 84px; } .menu__list { padding-left: 48px; } .site-menu__core { width: 360px; right: -40px; bottom: -40px; } }
/* the open menu locks the page; stronger than Lenis' own stopped rule (overflow: clip) */
html.menu-open, html.menu-open.lenis.lenis-stopped { overflow: hidden; }

/* Lenis (smooth wheel scrolling), rules from lenis/dist/lenis.css */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Back to top */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: grid; place-items: center; width: 80px; height: 80px; border-radius: var(--radius-m);
  background: var(--white); border: 1px solid var(--navy); color: var(--navy); font-size: 18px;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.35s, transform 0.35s var(--ease), visibility 0s 0.35s, background 0.35s, color 0.35s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top.is-visible.is-muted { opacity: 0; visibility: hidden; transform: translateY(12px); }
.to-top__dot { position: absolute; left: 50%; top: 58%; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; transform: translateX(-50%); transition: all 0.35s var(--ease); }
.to-top__icon { position: relative; transform: translateY(-8px); transition: transform 0.35s var(--ease); }
.to-top:hover, .to-top:focus-visible { background: var(--hover-fill); color: var(--white); border-color: var(--navy); }
.to-top:hover .to-top__dot, .to-top:focus-visible .to-top__dot { width: 38px; height: 38px; top: 50%; transform: translate(-50%, -50%); background: var(--white); border-color: var(--white); }
.to-top:hover .to-top__icon, .to-top:focus-visible .to-top__icon { transform: none; color: var(--blue); }
@media (max-width: 980px) { .to-top { width: 50px; height: 50px; right: 14px; bottom: 14px; border-radius: 8px; font-size: 15px; } }

/* ------------------------------------------------------------------ */
/* Leitmotiv: OG system core, three plates in real CSS 3D               */
/* --spin turns the stack, --gap spreads the plates, --build is the     */
/* intro spread, --on (per layer) lifts and lights one plate.           */
/* ------------------------------------------------------------------ */
.core { --spin: -45deg; --tilt: 56deg; --gap: 1; --build: 1; position: relative; width: 420px; aspect-ratio: 1; container-type: inline-size; pointer-events: none; }
.core__scene { position: absolute; inset: 0; perspective: 320cqw; perspective-origin: 50% 35%; }
.core__rig { position: absolute; left: 23%; top: 25%; width: 54%; height: 54%; transform-style: preserve-3d; transform: rotateX(var(--tilt)) rotateZ(calc(var(--spin) + var(--yaw, 0deg))); }
.core__layer { --on: 0; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc((var(--i) - 1) * 15cqw * var(--gap) * var(--build) + var(--on) * 6cqw)); }
.core__face, .core__slab, .core__halo { position: absolute; inset: 0; border-radius: 13%; }
.core__face { width: 100%; height: 100%; overflow: visible; }
.core__slab { background: #021539; transform: translateZ(calc(var(--d) * -0.7cqw)); }
.core__layer--top .core__slab { background: #9fb2cf; }
.core__layer--top .core__slab[style*="--d:1"] { background: #c4d2e6; }
.core__halo { inset: -26%; border-radius: 30%; background: radial-gradient(closest-side, rgba(0, 212, 232, 0.85), rgba(0, 94, 252, 0.28) 60%, rgba(0, 94, 252, 0)); opacity: var(--on); transform: translateZ(-3cqw); }
.core__beam { position: absolute; width: 0.5cqw; height: calc(30cqw * var(--gap) * var(--build)); margin-left: -0.25cqw; transform-origin: 50% 0; transform: translateZ(calc(-15cqw * var(--gap) * var(--build))) rotateX(90deg); background: linear-gradient(to bottom, rgba(0, 212, 232, 0.05), rgba(0, 212, 232, 0.9) 50%, rgba(0, 212, 232, 0.05)); }
.core__beam[style*="--b:0"] { left: 9%; top: 9%; }
.core__beam[style*="--b:1"] { left: 91%; top: 9%; }
.core__beam[style*="--b:2"] { left: 91%; top: 91%; }
.core__beam[style*="--b:3"] { left: 9%; top: 91%; }
.core__beam--spine { left: 50%; top: 50%; width: 2cqw; margin-left: -1cqw; background: linear-gradient(to bottom, rgba(0, 94, 252, 0), rgba(0, 212, 232, 0.75) 50%, rgba(0, 94, 252, 0)); }
.core__shadow { position: absolute; left: 20%; right: 20%; bottom: 8%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 32, 80, 0.22), rgba(4, 32, 80, 0)); transform: scale(calc(0.9 + var(--gap) * 0.1)); }

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */
/* the projected 3D core may reach past the right edge; clip sideways only (sticky keeps working with clip) */
.hero { position: relative; z-index: 5; padding-top: var(--header-h); overflow-x: clip; }
.hero__stage { position: relative; height: calc(100 * var(--svh) - var(--header-h)); min-height: 520px; }
.hero__out, .hero__in { position: absolute; inset: 0; }
.hero__in { clip-path: inset(40px 40px 40px 50% round 20px); background-color: var(--navy); }
.hero__panel {
  position: absolute; inset: 0; overflow: hidden;
  background-image: linear-gradient(var(--panel-grid) 2px, transparent 2px), linear-gradient(90deg, var(--panel-grid) 2px, transparent 2px);
  background-size: 40px 40px; background-position: -1px -1px;
}
.hero__title {
  position: absolute; top: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: var(--gutter);
  font-size: var(--display); line-height: 1.16; font-weight: 600; letter-spacing: -0.045em;
  white-space: nowrap;
}
.hero__line { display: block; }
.hero__line + .hero__line { margin-top: 0.12em; }
.hero__title--light { color: var(--white); margin: 0; z-index: 3; }
.hero__lines, .hero__orbits { position: absolute; left: 75%; top: 50%; pointer-events: none; }
.hero__lines { width: 1800px; height: 1800px; transform: translate(-50%, -50%); }
.hero__orbits { width: min(800px, 52vw); transform: translate(-50%, -50%); }
.orbit { transform-box: view-box; transform-origin: 0 0; }
html.motion .orbit--inner { animation: orbit 30s linear infinite; }
html.motion .orbit--outer { animation: orbit 30s linear infinite reverse; }
html.motion .hero.is-offscreen .orbit { animation-play-state: paused; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero__flow {
  will-change: transform;
  position: absolute; z-index: 6; left: 50%; top: -50px; width: 50%; height: calc(100 * var(--svh));
  margin-left: -20px; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.core--hero { width: min(600px, 36vw); }
@media (max-width: 1600px) { .core--hero { width: 500px; } }
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 50px; z-index: 7;
  display: flex; align-items: flex-end; gap: 16px; font-size: 16px; font-weight: 500;
}
.hero__scroll-mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero__scroll-track { position: relative; width: 1px; height: 80px; background: #d5dce8; overflow: hidden; }
.hero__scroll-track::after { content: ""; position: absolute; inset: 0 0 auto; height: 0; background: var(--navy); }
html.motion .hero__scroll-track::after { animation: scroll-line 2s linear 3; }
@keyframes scroll-line { to { height: 100%; } }
.hero__scroll-dot { width: 7px; height: 7px; border: 1.5px solid var(--navy); border-radius: 50%; }
.hero__scroll-chev { width: 13px; height: 13px; margin-top: -6px; }

@media (max-width: 980px) {
  .hero__stage { height: calc(100 * var(--svh) - var(--header-h)); min-height: 560px; }
  .hero__in { clip-path: inset(42% var(--gutter) var(--gutter) var(--gutter) round 16px); }
  .hero__title { bottom: 54%; padding-left: calc(var(--gutter) + 16px); line-height: 1.12; letter-spacing: -0.04em; }
  .hero__w { display: block; }
  .hero__line + .hero__line { margin-top: 0; }
  .hero__lines, .hero__orbits { left: 50%; top: 71%; }
  .hero__orbits { width: 460px; }
  .hero__flow { left: 0; width: 100%; top: auto; bottom: var(--gutter); height: calc(58% - var(--gutter)); margin: 0; }
  .core--hero { width: min(320px, 70vw); }
  .hero__scroll { left: calc(var(--gutter) + 6px); bottom: calc(var(--gutter) + 6px); min-width: 44px; min-height: 44px; justify-content: center; align-items: center; color: var(--white); }
  .hero__scroll-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero__scroll-track { height: 30px; background: rgba(255, 255, 255, 0.3); }
  .hero__scroll-track::after { background: var(--white); }
  .hero__scroll-dot { border-color: var(--white); }
}
@media (max-width: 660px) { .hero__in { clip-path: inset(46% var(--gutter) var(--gutter) var(--gutter) round 16px); } .hero__flow { height: calc(54% - var(--gutter)); } .hero__title { bottom: 50%; } }

/* Sticky pins (motion mode): each block is taller by its scroll distance, its stage stays put meanwhile. */
html.motion .hero { height: calc(100 * var(--svh) * 1.4); padding-top: 0; }
html.motion .hero__sticky { position: sticky; top: 0; height: calc(100 * var(--svh)); padding-top: var(--header-h); }
html.motion .statement { height: calc(100 * var(--svh) * 2.4); }
html.motion .statement__stage { position: sticky; top: 0; }
html.motion .explore { height: calc(100 * var(--svh) * 3.1); }
html.motion .explore__stage { position: sticky; top: 0; }
html.motion .integration__pin { height: calc(100 * var(--svh) * 2.2); }
html.motion .integration__stage { position: sticky; top: -60px; }
@media (max-width: 980px) { html.motion .integration__stage { top: 0; } }

/* ------------------------------------------------------------------ */
/* Statement (tunnel)                                                   */
/* ------------------------------------------------------------------ */
.statement { position: relative; z-index: 3; }
.statement__stage {
  position: relative; height: calc(100 * var(--svh)); min-height: 560px; overflow: hidden; background: var(--white);
  border-top: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
}
.statement__axis { position: absolute; left: 50%; top: 0; height: 100%; border-left: 1px dashed #b9c3d4; }
.statement__tunnel { position: absolute; inset: 0; width: 100%; height: 100%; }
.pill { transform-box: view-box; transform-origin: 0 0; transform: scale(var(--s, 1)); opacity: var(--o, 1); }
.pill--tall { display: none; }
@media (max-aspect-ratio: 1/1) { .pill--wide { display: none; } .pill--tall { display: inline; } }
.statement__veil { position: absolute; left: 50%; top: 50%; width: 240px; height: 222px; transform: translate(-50%, -50%); background: var(--white); z-index: 2; }
.statement__a, .statement__b {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter); text-align: center; font-weight: 600; letter-spacing: -0.04em;
}
.statement__a { font-size: var(--statement-a); line-height: 1.12; }
.statement__b { font-size: var(--statement-b); line-height: 1.16; }
.sl { display: block; }
.statement__v { position: absolute; left: 50%; transform: translateX(-50%); width: min(960px, 70vw); }
.statement__v--top { top: 39px; }
.statement__v--bottom { bottom: 0; }
.vline { width: 100%; height: auto; }
@media (max-width: 1600px) { .statement__v { width: 660px; } }
@media (max-width: 980px) { .statement__v { width: 70vw; } .statement__v--top { top: 20px; } .statement__v--bottom { bottom: 20px; } .statement__veil { width: 100px; height: 100px; } }
/* static (no motion) composition: both statements readable */
html:not(.motion) .statement__a { justify-content: flex-end; bottom: 50%; padding-bottom: 0.3em; }
html:not(.motion) .statement__b { justify-content: flex-start; top: 50%; padding-top: 0.3em; color: var(--blue); }

/* ------------------------------------------------------------------ */
/* Security, cloud & data services (home, after the statement)          */
/* ------------------------------------------------------------------ */
.secure { position: relative; z-index: 5; padding: 160px var(--gutter) 140px; background: var(--white); }
.secure__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: end; gap: 40px; }
.secure__title { font-size: var(--title); line-height: 1.1; font-weight: 600; letter-spacing: -0.05em; }
.secure__aside { display: grid; justify-items: start; gap: 28px; }
.secure__intro { font-size: 22px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
.secure__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px;
  margin-top: 70px; padding: 70px 60px; border-radius: var(--radius-l); color: var(--white);
  background-color: var(--navy);
  background-image: linear-gradient(var(--panel-grid) 2px, transparent 2px), linear-gradient(90deg, var(--panel-grid) 2px, transparent 2px);
  background-size: 40px 40px; background-position: -1px -1px;
}
.secure__visual { position: relative; }
.secure__stick { position: sticky; top: calc(50 * var(--svh) - 230px); display: grid; place-items: center; height: 460px; }
html:not(.motion) .secure__stick { position: relative; top: auto; }
.core--secure { width: min(460px, 100%); }
.secure__group + .secure__group { margin-top: 64px; }
.secure__group-name { display: flex; align-items: baseline; gap: 16px; font-size: 44px; line-height: 1.1; letter-spacing: -0.04em; transition: color 0.5s var(--ease); }
.secure__group-num { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; color: var(--cyan); }
.secure__items { margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.secure__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; align-items: center; gap: 22px;
  padding: 22px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); transition: background-color 0.4s var(--ease);
}
.secure__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; font-size: 28px; color: var(--cyan); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(0, 212, 232, 0.4); }
.secure__name { display: block; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.secure__text { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.secure__arrow { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.6); transition: transform 0.35s var(--ease), color 0.35s; }
.secure__item:hover, .secure__item:focus-visible { background-color: rgba(255, 255, 255, 0.06); }
.secure__item:hover .secure__arrow, .secure__item:focus-visible .secure__arrow { transform: translateX(4px); color: var(--cyan); }
html.motion .secure__group:not(.is-current) .secure__group-name { color: rgba(255, 255, 255, 0.55); }
html.motion .secure__panel { clip-path: inset(0 50% 0 50% round 20px); transition: clip-path 1.2s var(--ease) 0.15s; }
html.motion .secure.is-in .secure__panel { clip-path: inset(0 0 0 0 round 20px); }
html.motion .secure__items li { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(0.15s + var(--i) * 0.12s); }
html.motion .secure__group.is-in .secure__items li { opacity: 1; transform: none; }
@media (max-width: 1600px) { .secure { padding: 110px var(--gutter) 100px; } .secure__group-name { font-size: 38px; } }
@media (max-width: 1200px) { .secure__panel { padding: 50px 36px; gap: 24px; } .secure__name { font-size: 19px; } .secure__text { font-size: 15px; } }
@media (max-width: 980px) {
  .secure { padding: 80px var(--gutter) 70px; }
  .secure__head { grid-template-columns: 1fr; gap: 18px; }
  .secure__intro { font-size: 18px; }
  .secure__panel { grid-template-columns: 1fr; gap: 8px; margin-top: 30px; padding: 20px 18px 28px; border-radius: 16px; }
  .secure__stick { position: relative; top: auto; height: 250px; }
  .core--secure { width: 250px; }
  .secure__group + .secure__group { margin-top: 40px; }
  .secure__group-name { font-size: 28px; gap: 12px; }
  .secure__group-num { font-size: 14px; }
  .secure__items { margin-top: 14px; }
  .secure__item { grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 14px; padding: 16px 2px; }
  .secure__icon { width: 44px; height: 44px; border-radius: 11px; font-size: 22px; }
  .secure__name { font-size: 17px; }
  .secure__text { font-size: 14px; line-height: 1.45; }
  .secure__arrow { width: 15px; height: 15px; }
}

/* ------------------------------------------------------------------ */
/* Explore (three-zone service navigation)                              */
/* ------------------------------------------------------------------ */
.explore { position: relative; z-index: 4; }
html.motion .explore::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--process-h, 0px); background: var(--cloud); z-index: -1; pointer-events: none; }
html.motion .home .process__bg { display: none; }
.explore__stage { position: relative; height: calc(100 * var(--svh)); min-height: 640px; }
.explore__axis { position: absolute; left: 50%; top: 0; height: 100%; border-left: 1px dashed #b9c3d4; }
.explore__tabs { position: absolute; top: 50%; right: 50%; margin-right: 445px; transform: translateY(-50%); z-index: 3; }
.explore__tablist { display: flex; flex-direction: column; gap: 40px; text-align: right; }
.explore__tab {
  display: block; font-size: var(--tab); line-height: 1.2; font-weight: 600; letter-spacing: -0.04em; color: var(--tab-off);
  transition: color 0.45s var(--ease);
}
.explore__tab:hover { color: var(--ink-2); }
.explore__tab.is-active, .explore__tab[aria-selected="true"] { color: var(--ink); }
.explore__hub { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.explore__ring { position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dotted rgba(4, 32, 80, 0.55); }
.explore__pointer { position: absolute; left: 50%; top: 50%; width: 600px; transform: translate(-50%, -50%) rotate(var(--pointer, 20deg)); transform-origin: 50% 50%; }
.pointer { width: 100%; height: auto; }
.explore__core { position: absolute; left: 50%; top: 50%; width: 420px; transform: translate(-50%, -50%); will-change: transform; }
.explore__core .core { width: 100%; }
.explore__panels { position: absolute; top: 0; left: 50%; width: 50vw; height: 100%; overflow: hidden; z-index: 3; }
.explore__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 100px 0 320px; }
.explore__panel-title { display: none; }
.explore__rows { display: flex; flex-direction: column; gap: 10px; }
.row {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 70px; padding: 0 30px; border-radius: var(--radius-m); font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.row::before, .row::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.row::before { border: 1px solid var(--navy); background: rgba(255, 255, 255, 0.72); }
.row::after { background: var(--hover-fill); opacity: 0; transform: scale(0.95, 0.8); }
.row:hover::after, .row:focus-visible::after { opacity: 1; transform: none; }
.row:hover::before, .row:focus-visible::before { opacity: 0; transform: scale(1.05, 1.2); }
.row:hover, .row:focus-visible { color: var(--white); }
.row__plus { width: 16px; height: 16px; }
@media (max-width: 1600px) {
  .row { font-size: 18px; } .explore__panel { padding-right: 20px; } .explore__tablist { gap: 32px; }
  .explore__tabs { right: auto; left: var(--gutter); margin: 0; }
  .explore__tablist { text-align: left; }
}
@media (max-width: 1400px) {
  .explore__ring { width: 340px; height: 340px; }
  .explore__core { width: 330px; }
  .explore__pointer { width: 470px; }
  .explore__panel { padding-left: 190px; }
  .row { min-height: 56px; padding: 0 22px; border-radius: 8px; }
}
@media (max-width: 1200px) {
  .explore__panel { padding-left: 170px; } .row { font-size: 16px; }
  .explore__ring { width: 300px; height: 300px; } .explore__core { width: 290px; } .explore__pointer { width: 420px; }
}
@media (max-width: 980px) {
  .explore__stage { min-height: 620px; }
  .explore__tabs { left: 0; right: 0; top: calc(var(--header-h) * 0.4 + 6%); transform: none; }
  .explore__tablist { flex-direction: row; justify-content: center; gap: 10px; text-align: center; }
  .explore__tab { padding: 8px 6px; min-height: 44px; display: flex; align-items: center; }
  .explore__hub { top: 37%; }
  .explore__ring { width: 230px; height: 230px; }
  .explore__core { width: 230px; }
  .explore__pointer { width: 330px; }
  .explore__panels { left: 0; width: 100%; top: auto; bottom: 0; height: 47%; }
  .explore__panel { justify-content: flex-start; padding: 8px var(--gutter) 24px; }
  .explore__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .row { min-height: 48px; padding: 0 14px; font-size: 15px; line-height: 1.2; }
  .row__plus { width: 13px; height: 13px; }
}
@media (max-width: 480px) { .explore__rows { grid-template-columns: 1fr; gap: 7px; } .row { min-height: 46px; } }
/* short phones (iPhone SE, small Android): smaller hub, taller list so all six rows fit the stage */
@media (max-width: 980px) and (max-height: 800px) {
  .explore__hub { top: 31%; }
  .explore__ring { width: 180px; height: 180px; }
  .explore__core { width: 180px; }
  .explore__pointer { width: 260px; }
  .explore__panels { height: 55%; }
  .explore__rows { gap: 6px; }
  .row { min-height: 44px; }
}

/* static (no motion / short screens): the three lists stack under their own headings */
html:not(.motion) .explore__stage, .explore.is-static .explore__stage { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr; padding: calc(var(--header-h) + 40px) var(--gutter) 80px; }
html:not(.motion) .explore__tabs, .explore.is-static .explore__tabs { position: static; transform: none; margin: 0 0 24px; }
html:not(.motion) .explore__tablist, .explore.is-static .explore__tablist { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px 32px; text-align: left; }
html:not(.motion) .explore__hub, .explore.is-static .explore__hub { display: none; }
html:not(.motion) .explore__axis, .explore.is-static .explore__axis { display: none; }
html:not(.motion) .explore__panels, .explore.is-static .explore__panels { position: static; width: auto; height: auto; overflow: visible; }
html:not(.motion) .explore__panel, .explore.is-static .explore__panel { position: static; padding: 0; margin-top: 32px; }
html:not(.motion) .explore__panel-title, .explore.is-static .explore__panel-title { display: block; font-size: 22px; margin-bottom: 14px; }
html:not(.motion) .explore__rows, .explore.is-static .explore__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
html:not(.motion) .explore__tab, .explore.is-static .explore__tab { color: var(--ink); font-size: var(--title); }

/* ------------------------------------------------------------------ */
/* Process band                                                         */
/* ------------------------------------------------------------------ */
.process { position: relative; z-index: 5; padding: 160px var(--gutter); }
.process__bg { position: absolute; inset: 0; background: var(--cloud); z-index: -1; }
.process__title, .arch__title, .integration__title, .cases__title, .closing__title {
  font-size: var(--title); line-height: 1.1; font-weight: 600; letter-spacing: -0.05em;
}
.process__band { position: relative; margin-top: 90px; padding: 10px; }
.corner { position: absolute; width: 30px; height: 30px; border-color: var(--navy); border-style: solid; border-width: 0; }
.corner::after { content: ""; position: absolute; width: 7px; height: 7px; border: 2px solid var(--navy); border-radius: 50%; background: var(--white); }
.corner--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.corner--tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.corner--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.corner--bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.corner--tl::after { left: -5px; top: -5px; } .corner--tr::after { right: -5px; top: -5px; } .corner--br::after { right: -5px; bottom: -5px; } .corner--bl::after { left: -5px; bottom: -5px; }
.process__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(4, 32, 80, 0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--white);
}
.process__step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 420px; padding: 40px 28px; }
.process__step + .process__step::before { content: ""; position: absolute; left: 0; top: 50%; height: 360px; width: 1px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.16); }
.process__num { font-size: 22px; font-weight: 500; color: var(--cyan); letter-spacing: 0.04em; }
.process__name { margin-top: 10px; font-size: 64px; line-height: 1.05; font-weight: 600; letter-spacing: -0.045em; }
.process__text { margin-top: 18px; max-width: 18em; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
html.motion .process .process__steps { clip-path: inset(0 50% 0 50%); transition: clip-path 1.2s var(--ease) 0.3s; }
html.motion .process.is-in .process__steps { clip-path: inset(0 0 0 0); }
html.motion .process .process__step + .process__step::before { transform: translateY(-50%) scaleY(0); transition: transform 1s var(--ease) 1s; }
html.motion .process.is-in .process__step + .process__step::before { transform: translateY(-50%) scaleY(1); }
@media (max-width: 1600px) { .process { padding: 90px 20px; } .process__name { font-size: 50px; } .process__step { min-height: 380px; } }
@media (max-width: 1200px) { .process__name { font-size: 40px; } .process__text { font-size: 16px; } }
@media (max-width: 980px) {
  .process { padding: 80px var(--gutter); }
  .process__band { margin-top: 30px; padding: 5px; }
  .corner { width: 20px; height: 20px; }
  .corner::after { width: 5px; height: 5px; border-width: 1.5px; }
  .process__steps { grid-template-columns: 1fr 1fr; }
  .process__step { min-height: 230px; padding: 24px 14px; }
  .process__step + .process__step::before { height: 70%; }
  .process__step:nth-child(3)::before { display: none; }
  .process__step:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .process__num { font-size: 15px; }
  .process__name { font-size: 30px; }
  .process__text { margin-top: 10px; font-size: 14px; }
}
@media (max-width: 420px) { .process__name { font-size: 26px; } .process__step { min-height: 210px; } }

/* ------------------------------------------------------------------ */
/* Architecture                                                         */
/* ------------------------------------------------------------------ */
.arch { position: relative; z-index: 5; padding: 160px var(--gutter) 192px; text-align: center; }
.arch__deco { position: absolute; top: 0; right: 50%; margin-right: -440px; width: 1401px; max-width: none; pointer-events: none; }
.arch__title { display: flex; justify-content: center; }
.arch__grid { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 60px; }
.arch__fig { width: 520px; flex: 0 1 520px; min-width: 0; }
.ring { width: 100%; height: auto; overflow: visible; }
.ring__halo { fill: #eaf0f9; }
.ring__core { fill: #f7f9fd; }
.ring__center { font-size: 23px; font-weight: 600; fill: var(--navy); letter-spacing: -0.01em; }
.ring__label { font-size: 18px; font-weight: 600; fill: var(--white); letter-spacing: -0.005em; }
.ring__dot { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.arch__mid { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 250px; height: 600px; }
.arch__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--navy); }
.arch__line::before, .arch__line::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; border: 2px solid var(--navy); border-radius: 50%; background: var(--white); transform: translateX(-50%); }
.arch__line::before { top: -4px; } .arch__line::after { bottom: -4px; }
.arch__card { position: relative; width: 100%; padding: 26px 22px; background: var(--white); border: 1px solid var(--navy); border-radius: var(--radius-m); text-align: left; }
.arch__card-title { font-size: 20px; letter-spacing: -0.01em; }
.arch__steps { margin-top: 14px; counter-reset: s; display: grid; gap: 10px; }
.arch__steps li { counter-increment: s; position: relative; padding-left: 30px; font-size: 16px; line-height: 1.35; }
.arch__steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.arch__caption { margin-top: 30px; font-size: 20px; font-weight: 600; }
html.motion .arch .ring__seg, html.motion .arch .ring__label, html.motion .arch .ring__dot { opacity: 0; transition: opacity 0.7s var(--ease); transition-delay: calc(0.5s + var(--i) * 0.18s); }
html.motion .arch.is-in .ring__seg, html.motion .arch.is-in .ring__label, html.motion .arch.is-in .ring__dot { opacity: 1; }
html.motion .arch .arch__fig { transform: scale(0.7); transition: transform 1s var(--ease); }
html.motion .arch.is-in .arch__fig { transform: none; }
html.motion .arch .arch__line { transform: scaleY(0); transition: transform 1s var(--ease); }
html.motion .arch.is-in .arch__line { transform: none; }
html.motion .arch .arch__card { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease) 0.9s, transform 0.8s var(--ease) 0.9s; }
html.motion .arch.is-in .arch__card { opacity: 1; transform: none; }
@media (max-width: 1600px) { .arch__fig { flex-basis: 470px; } .arch__mid { width: 230px; } }
@media (max-width: 1200px) { .arch__mid { width: 210px; } .arch__card { padding: 20px 16px; } .arch__steps li { font-size: 15px; } }
@media (max-width: 980px) {
  .arch { padding: 80px var(--gutter); }
  .arch__deco { display: none; }
  .arch__grid { flex-direction: column; gap: 28px; margin-top: 30px; }
  .arch__fig { width: min(400px, 100%); flex-basis: auto; }
  .arch__mid { width: 100%; max-width: 420px; height: auto; padding: 36px 0; }
  .arch__line { left: 50%; top: 0; bottom: 0; }
  .arch__caption { font-size: 15px; }
}

/* ------------------------------------------------------------------ */
/* Integration (network)                                                */
/* ------------------------------------------------------------------ */
.integration { position: relative; z-index: 5; padding-top: 40px; }
.integration__title { padding: 0 var(--gutter); }
.integration__stage { position: relative; height: calc(100 * var(--svh)); min-height: 600px; padding: 40px; }
.integration__visual { position: relative; height: 100%; border-radius: var(--radius-l); overflow: hidden; }
.network__art { position: absolute; inset: 0; display: block; transform: scale(1.04); transition: transform 2s var(--ease); }
.network__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.integration.is-in .network__art { transform: none; }
.integration__claim {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  font-size: 56px; line-height: 1.16; font-weight: 600; letter-spacing: -0.04em; color: var(--navy); padding: calc(11 * var(--svh)) var(--gutter) 0;
}
/* the photos keep their upper middle free for the claim; the sphere cluster sits below it */
@media (max-aspect-ratio: 1/1) { .integration__claim { padding-top: calc(15 * var(--svh)); } }
.cl { display: block; }
html.motion .integration .integration__claim { opacity: 0; filter: blur(24px); letter-spacing: 0.01em; transition: opacity 1s, filter 1s, letter-spacing 1s; }
html.motion .integration.is-in .integration__claim { opacity: 1; filter: none; letter-spacing: -0.04em; }
.integration__panels { position: absolute; inset: 40px; display: flex; border-radius: var(--radius-l); overflow: hidden; pointer-events: none; }
.ipanel { flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 0.7s var(--ease); pointer-events: auto; }
.ipanel__link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
  padding: 24px 18px; color: var(--white); text-align: center; transform: translateY(var(--rise, 0%));
}
/* photo under a navy veil: white text keeps at least 4.5:1 even over a white pixel (veil alpha >= .62) */
.ipanel__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--navy); }
.ipanel__photo { position: absolute; inset: 0; display: block; }
.ipanel__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transform: scale(1.001); transition: transform 1.2s var(--ease); }
.ipanel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 32, 80, 0.66), rgba(4, 32, 80, 0.8)); }
.ipanel--3 .ipanel__media::after, .ipanel--5 .ipanel__media::after { background: linear-gradient(180deg, rgba(6, 42, 102, 0.66), rgba(4, 32, 80, 0.8)); }
.ipanel:hover .ipanel__photo img, .ipanel:focus-within .ipanel__photo img { transform: scale(1.05); }
.ipanel__link { isolation: isolate; }
.ipanel__head { display: flex; flex-direction: column; align-items: center; gap: 18px; transition: transform 0.7s var(--ease); }
.ipanel__icon { width: 56px; height: 56px; }
.ipanel__name { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ipanel__more { display: flex; flex-direction: column; align-items: center; gap: 22px; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.6s var(--ease), max-height 0.7s var(--ease); }
.ipanel__text { margin-top: 18px; max-width: 18em; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.ipanel__cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: var(--radius-m); background: var(--white); color: var(--navy); font-size: 16px; font-weight: 600; }
.ipanel:hover, .ipanel:focus-within { flex-grow: 1.9; }
.ipanel:hover .ipanel__more, .ipanel:focus-within .ipanel__more { max-height: 320px; opacity: 1; }
@media (max-width: 1600px) { .integration__claim { font-size: 45px; } }
@media (max-width: 1200px) { .ipanel__name { font-size: 18px; } .ipanel__icon { width: 44px; height: 44px; } }
@media (max-width: 980px) {
  .integration__stage { padding: 20px; min-height: 640px; }
  .integration__panels { inset: 20px; flex-direction: column; }
  .ipanel { flex: 1 1 0; }
  .ipanel:hover, .ipanel:focus-within { flex-grow: 1; }
  /* rows: icon | name over a one-line description; the whole row links to the service */
  .ipanel__link { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 2px; padding: 8px 16px; text-align: left; }
  .ipanel__head, .ipanel__more { display: contents; }
  .ipanel__icon { grid-row: 1 / span 2; align-self: center; width: 28px; height: 28px; }
  .ipanel__name { font-size: 16px; }
  .ipanel__text { margin: 0; max-width: none; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }
  .ipanel__cta { display: none; }
  .integration__claim { font-size: 30px; }
}
@media (max-width: 660px) { .integration__claim { font-size: 26px; } }
.integration__note { padding: 0 var(--gutter); margin-top: 8px; font-size: 16px; color: var(--muted); text-align: center; }
html:not(.motion) .integration__stage { height: auto; min-height: 0; }
html:not(.motion) .integration__visual { height: min(70vh, 640px); }
html:not(.motion) .integration__panels { position: static; margin-top: 20px; flex-wrap: wrap; gap: 0; }
html:not(.motion) .ipanel { flex: 1 1 33.33%; min-height: 220px; }
html:not(.motion) .ipanel__more { max-height: none; opacity: 1; }
@media (max-width: 980px) { html:not(.motion) .ipanel { flex-basis: 100%; min-height: 72px; } }

/* ------------------------------------------------------------------ */
/* Use cases carousel                                                   */
/* ------------------------------------------------------------------ */
.cases { position: relative; z-index: 5; padding-top: 160px; }
.cases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); }
.cases__rule { position: relative; height: 1px; margin: 30px var(--gutter) 40px; background: var(--navy); }
.cases__rule::before { content: ""; position: absolute; left: -5px; top: -5px; width: 7px; height: 7px; border: 2px solid var(--navy); border-radius: 50%; background: var(--white); }
.cases__viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-padding-inline: 0; outline-offset: -3px;
}
.cases__viewport::-webkit-scrollbar { display: none; }
.cases__track { display: flex; margin: 0; padding: 10px calc((100% - 54.6%) / 2) 30px; perspective: 1100px; }
.case { flex: 0 0 54.6vw; scroll-snap-align: center; scroll-snap-stop: always; padding: 0 10px; }
.case__card {
  display: flex; gap: 20px; height: 100%; padding: 20px; border-radius: var(--radius-m); background: #eef3fa;
  transform: perspective(1100px) rotateY(var(--tilt, 0deg)) translateX(var(--shift, 0%)); transition: transform 0.7s var(--ease);
}
.case__text { flex: 1 1 50%; padding: 20px 10px 10px; }
.case__label { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--blue); }
.case__title { margin-top: 26px; font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; }
.case__body { margin-top: 26px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.case__art { position: relative; flex: 1 1 50%; min-height: 290px; border-radius: 8px; overflow: hidden; background: var(--cloud); }
.case__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__flow { position: absolute; left: 12px; bottom: 12px; display: block; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 24px rgba(4, 32, 80, 0.14); }
.flow-chip { display: block; width: 150px; height: auto; }
.cases__controls { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.cases__ctrl { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--navy); font-size: 18px; transition: background 0.3s, color 0.3s; }
.cases__ctrl:hover, .cases__ctrl:focus-visible { background: var(--navy); color: var(--white); }
.cases__icon-play { display: none; }
.cases__play[aria-pressed="true"] .cases__icon-pause { display: none; }
.cases__play[aria-pressed="true"] .cases__icon-play { display: block; }
@media (hover: hover) { .cases__viewport { cursor: grab; } .cases__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; } }
@media (max-width: 1600px) { .cases { padding-top: 80px; } .case__title { font-size: 22px; } }
@media (max-width: 980px) {
  .cases__rule { margin: 15px var(--gutter) 20px; }
  .cases__track { padding: 6px calc((100% - 76.9%) / 2) 20px; }
  .case { flex-basis: 76.9vw; padding: 0 6px; }
  .case__card { flex-direction: column; padding: 12px; border-radius: 8px; }
  .case__art { min-height: 0; aspect-ratio: 16 / 10; }
  .case__flow { left: 8px; bottom: 8px; padding: 4px 6px; }
  .flow-chip { width: 120px; }
  .case__text { padding: 8px 6px 0; }
  .case__label { font-size: 13px; }
  .case__title { margin-top: 10px; font-size: 19px; }
  .case__body { margin-top: 10px; font-size: 14px; line-height: 1.55; }
}

/* ------------------------------------------------------------------ */
/* Closing                                                              */
/* ------------------------------------------------------------------ */
.closing { position: relative; z-index: 4; padding: 310px var(--gutter); text-align: center; overflow: hidden; }
.closing::before, .closing::after { content: ""; position: absolute; left: 0; right: 0; height: 485px; z-index: 1; pointer-events: none; }
.closing::before { top: 0; background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)); }
.closing::after { bottom: 0; background: linear-gradient(to top, #fff 20%, rgba(255, 255, 255, 0)); }
.closing > * { position: relative; z-index: 2; }
.closing__title { display: flex; flex-direction: column; align-items: center; }
.btn--closing { margin-top: 35px; }
.closing__core { position: absolute; z-index: 0; left: 50%; bottom: -60px; width: 360px; transform: translate(var(--dx, -720px), var(--dy, -420px)); pointer-events: none; }
.closing__core .core { width: 100%; }
@media (max-width: 1600px) { .closing { padding: 200px var(--gutter); } }
@media (max-width: 980px) {
  .closing { padding: 120px var(--gutter); }
  .closing::before, .closing::after { height: 20%; }
  .closing__core { width: 170px; bottom: -20px; }
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */
.site-footer { position: relative; z-index: 10; padding: 80px; background: var(--white); border-top: 1px solid var(--rule); }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 50px; }
.footer__brand { display: block; padding: 15px; margin: -15px; }
.footer__brand img { height: 64px; width: auto; max-width: none; }
.footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.footer__legal-item { font-size: 17px; font-weight: 600; color: var(--ink); }
.footer__legal-item small { font-weight: 400; color: var(--muted); font-size: 14px; }
.footer__name { font-size: 16px; font-weight: 600; margin-bottom: 18px; }
.footer__fields { display: flex; flex-wrap: wrap; gap: 14px 40px; font-size: 16px; }
.footer__field { display: flex; gap: 10px; }
.footer__field dt { font-weight: 600; }
.footer__field dd { color: var(--muted); }
.footer__copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 50px; font-size: 14px; color: var(--muted); }
.footer__draft { font-weight: 600; color: var(--ink-2); }
@media (max-width: 1200px) { .footer__brand img { height: 56px; } }
@media (max-width: 980px) {
  .site-footer { padding: 60px var(--gutter) 90px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .footer__legal { align-items: flex-start; text-align: left; gap: 8px; }
  .footer__legal-item { font-size: 15px; }
  .footer__fields { flex-direction: column; gap: 8px; font-size: 14px; }
  .footer__field { flex-direction: column; gap: 0; }
  .footer__copy { flex-direction: column; margin-top: 30px; font-size: 13px; }
}

/* ------------------------------------------------------------------ */
/* Sub pages                                                            */
/* ------------------------------------------------------------------ */
.sub { padding-top: var(--header-h); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 14px; height: 1px; background: var(--muted); }
.crumbs a { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; font-size: 18px; color: var(--ink); }
.subnav { position: sticky; top: 0; z-index: 40; display: none; background: var(--cloud); border-bottom: 1px solid var(--rule); transition: top 0.45s var(--ease); }
.site-header:not(.is-hidden) ~ main .subnav { top: var(--header-h); }
.subnav__list { display: flex; gap: 22px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.subnav__link { position: relative; display: flex; align-items: center; gap: 6px; min-height: 50px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.subnav__num { color: var(--blue); }
.subnav__link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--accent); transform: translateX(-50%); transition: width 0.4s var(--ease); }
.subnav__link.is-current { color: var(--ink); }
.subnav__link.is-current::after, .subnav__link:hover::after { width: 40px; }

/* ------------------------------------------------------------------ */
/* Services page                                                        */
/* ------------------------------------------------------------------ */
.hero__crumbs { position: absolute; left: var(--gutter); top: 22px; z-index: 8; }
.overview { position: relative; z-index: 5; padding: 160px var(--gutter) 120px; }
.overview__intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: 60px; }
.overview__lead { font-size: 52px; line-height: 1.14; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance; }
.overview__text { font-size: 19px; color: var(--ink-2); }
.overview__groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 100px; }
.overview__name { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--navy); font-size: 34px; line-height: 1.15; letter-spacing: -0.035em; }
.overview__num { font-size: 16px; font-weight: 500; color: var(--blue); }
.overview__rows { display: grid; gap: 10px; }
.row__num { margin-right: 10px; font-size: 0.78em; font-weight: 500; color: var(--blue); transition: color 0.3s; }
.row:hover .row__num, .row:focus-visible .row__num { color: var(--cyan); }
html.motion .overview__lead, html.motion .overview__text { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.motion .overview__text { transition-delay: 0.15s; }
html.motion .overview.is-in .overview__lead, html.motion .overview.is-in .overview__text { opacity: 1; transform: none; }
html.motion .overview__rows li { opacity: 0; transform: translateX(-18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.25s + var(--i) * 0.05s); }
html.motion .overview.is-in .overview__rows li { opacity: 1; transform: none; }

.chapters { position: relative; z-index: 5; padding: 60px var(--gutter) 40px; }
.chapters__head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 30px; border-bottom: 1px solid var(--navy); }
.chapters__num { font-size: 18px; font-weight: 600; color: var(--blue); }
.chapters__title { font-size: var(--title); line-height: 1.1; letter-spacing: -0.05em; }
.chapters__grid { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: 60px; margin-top: 70px; }
.rail { position: relative; }
.rail__stick { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
html:not(.motion) .rail__stick { position: static; }
.rail__core { width: min(340px, 100%); margin: -40px auto -20px; }
.rail__core .core { width: 100%; }
.rail__index { display: grid; gap: 4px; }
.rail__link { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; min-height: 50px; padding: 0 16px; border-radius: 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--tab-off); transition: color 0.4s var(--ease), background-color 0.4s var(--ease); }
.rail__num { font-size: 14px; font-weight: 500; color: var(--blue); }
.rail__link:hover, .rail__link:focus-visible { color: var(--ink); }
.rail__link.is-current { color: var(--ink); background: var(--cloud); box-shadow: inset 3px 0 0 var(--blue); }
.chapter { padding-bottom: 120px; scroll-margin-top: calc(var(--header-h) + 24px); }
.chapter__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--cloud); }
.chapter__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__badge {
  position: absolute; left: 20px; bottom: 20px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
  background: var(--navy); color: var(--white); box-shadow: inset 0 0 0 2px rgba(0, 212, 232, 0.55), 0 10px 30px rgba(4, 32, 80, 0.25);
}
.svc__badge .icon { width: 34px; height: 34px; }
.chapter__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; }
.svc__num { font-size: 18px; font-weight: 600; color: var(--blue); }
.svc__title { margin-top: 6px; font-size: 52px; line-height: 1.08; letter-spacing: -0.045em; }
.svc__lead { margin-top: 18px; font-size: 21px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; }
.svc__text { color: var(--ink-2); }
.svc__label { margin-top: 26px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.svc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.svc__chips li { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 15px; }
.svc__control { position: relative; margin-top: 24px; padding-top: 18px; font-size: 16px; color: var(--ink-2); }
.svc__control::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform-origin: left; }
html.motion .chapter__media { clip-path: inset(14% 10% 14% 10% round 20px); }
html.motion .chapter .svc__lead, html.motion .chapter .svc__text, html.motion .chapter .svc__label, html.motion .chapter .svc__control { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.motion .chapter .svc__text { transition-delay: 0.1s; } html.motion .chapter .svc__label { transition-delay: 0.2s; } html.motion .chapter .svc__control { transition-delay: 0.45s; }
html.motion .chapter .svc__chips li { opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(0.3s + var(--i) * 0.08s); }
html.motion .chapter .svc__control::before { transform: scaleX(0); transition: transform 1.1s var(--ease) 0.6s; }
html.motion .chapter.is-in .svc__lead, html.motion .chapter.is-in .svc__text, html.motion .chapter.is-in .svc__label, html.motion .chapter.is-in .svc__control, html.motion .chapter.is-in .svc__chips li { opacity: 1; transform: none; }
html.motion .chapter.is-in .svc__control::before { transform: none; }
.secure--detail .secure__item { grid-template-columns: 56px minmax(0, 1fr); scroll-margin-top: calc(var(--header-h) + 40px); }
.secure--detail .secure__name { font-size: 22px; }
@media (max-width: 1600px) { .overview { padding: 110px var(--gutter) 90px; } .overview__lead { font-size: 44px; } .svc__title { font-size: 44px; } }
@media (max-width: 1200px) { .chapters__grid { gap: 36px; } .svc__title { font-size: 38px; } .chapter__body { gap: 30px; } }
@media (max-width: 980px) {
  .hero__crumbs { top: 10px; }
  .overview { padding: 70px var(--gutter) 50px; }
  .overview__intro { grid-template-columns: 1fr; gap: 18px; }
  .overview__lead { font-size: 27px; line-height: 1.22; }
  .overview__text { font-size: 16px; }
  .overview__groups { grid-template-columns: 1fr; gap: 44px; margin-top: 46px; }
  .overview__name { font-size: 25px; margin-bottom: 16px; padding-bottom: 14px; }
  .subnav { display: block; }
  .chapters { padding: 46px var(--gutter) 20px; }
  .chapters__head { padding-bottom: 20px; }
  .chapters__grid { grid-template-columns: 1fr; margin-top: 30px; }
  .rail { display: none; }
  .chapter { padding-bottom: 64px; }
  .chapter__media { aspect-ratio: 4 / 3; }
  .svc__badge { left: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 13px; }
  .svc__badge .icon { width: 28px; height: 28px; }
  .chapter__body { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .svc__title { font-size: 32px; }
  .svc__lead { font-size: 18px; margin-top: 12px; }
  .svc__label { margin-top: 18px; }
  .secure--detail .secure__item { grid-template-columns: 44px minmax(0, 1fr); }
  .secure--detail .secure__name { font-size: 17px; }
}

/* Contact */
.contact-hero { padding: 60px var(--gutter) 50px; text-align: center; }
.contact-hero .crumbs ol { justify-content: center; }
.contact-hero__title { margin-top: 24px; font-size: var(--title); line-height: 1.08; letter-spacing: -0.05em; }
.contact-hero__intro { max-width: 34em; margin: 30px auto 0; font-size: 20px; font-weight: 600; line-height: 1.5; }
.contact-hero__notice { display: inline-block; max-width: 40em; margin-top: 22px; padding: 12px 20px; border-radius: var(--radius-m); background: #fff6db; border: 1px solid #e6c766; font-size: 15px; color: #4d3a00; }
.form-card { max-width: 1240px; margin: 0 auto 120px; padding: 0 var(--gutter); }
.enquiry { padding: 50px; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 30px 80px rgba(4, 32, 80, 0.08); border: 1px solid var(--rule); }
.enquiry__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; }
.enquiry__wide { display: grid; gap: 26px; margin-top: 30px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 15px; font-weight: 600; }
.field__req { color: var(--blue); font-weight: 600; }
.field__hint { font-weight: 400; color: var(--muted); }
.field__input { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid transparent; border-radius: 8px; background: var(--cloud); font: inherit; font-size: 16px; color: var(--ink); }
.field__input:focus { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--white); border-color: var(--rule); }
.field__input--area { min-height: 160px; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: #c4252c; background: #fff6f6; }
.field__error { font-size: 14px; color: #b0151d; }
.enquiry__summary { margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background: #fff1f1; color: #8f1117; font-weight: 600; font-size: 15px; }
.enquiry__topics { margin: 34px 0 0; padding: 0; border: 0; }
.enquiry__topics legend { margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--navy); border-radius: 8px; font-size: 15px; font-weight: 500; transition: background 0.3s, color 0.3s; }
.chip input:checked + span { background: var(--navy); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.enquiry__privacy { margin-top: 34px; padding: 20px 22px; border-radius: 8px; background: var(--cloud); font-size: 15px; color: var(--ink-2); }
.enquiry__privacy-title { font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.enquiry__consent { margin-top: 20px; text-align: center; }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); }
.enquiry__status { margin-top: 18px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.enquiry__status:empty { display: none; }
.enquiry__status.is-visible, .enquiry__status.is-notice { display: block; padding: 14px 18px; border-radius: 8px; background: #fff6db; border: 1px solid #e6c766; color: #4d3a00; }
.enquiry__submit { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 980px) {
  .contact-hero { padding: 36px var(--gutter) 34px; }
  .contact-hero__intro { font-size: 17px; }
  .enquiry { padding: 24px 18px; }
  .enquiry__grid { grid-template-columns: 1fr; gap: 20px; }
  .form-card { margin-bottom: 80px; }
}

/* ------------------------------------------------------------------ */
/* Reduced motion: everything readable and static                       */
/* ------------------------------------------------------------------ */
@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; }
  .case__card { transform: none !important; }
}