/* =========================================================================
   A&A Innovations Sole Co., Ltd — design system
   Dark premium. White primary buttons. Aqua accent used sparingly.
   ========================================================================= */

:root {
  /* ground — Ink and Slate, straight from the brand book */
  --ink:       #070910;   /* Ink — also the type colour on white surfaces */
  --bg:        var(--ink);
  --bg-soft:   #0C111B;
  --card:      #151B26;   /* Slate */
  --card-high: #1D2534;
  --line:      #242D3D;
  --line-soft: #1A2130;

  /* ink */
  --txt:       #EFF3F9;   /* Paper */
  --txt-dim:   #C3CCDA;
  --mut:       #8D99AC;   /* Muted */

  /* Azure. The brand book is explicit that the GRADIENT is the brand colour,
     not any one stop, so it gets a token of its own and is used wherever a
     fill can take it. The three stops stay available for the places a
     gradient cannot reach: a 1px border, an svg stroke, a text colour. */
  --sky:    #A9D8FF;
  --signal: #4FA3F5;
  --deep:   #1858C6;
  --navy:   #12327A;   /* single-ink fallback ONLY — never as a UI accent */
  --azure:  linear-gradient(135deg, #A9D8FF 0%, #4FA3F5 55%, #1858C6 100%);

  --accent:      var(--signal);
  --accent-deep: var(--deep);
  --accent-glow: rgba(79, 163, 245, .18);

  /* product brand colours (from each product's own kit) */
  --books:  #6366f1;
  --kapook: #4A57EB;

  --radius:    16px;
  --radius-sm: 11px;
  --maxw:      1180px;

  /* "Noto Sans Lao" sits after the Latin face in EVERY stack. Font matching
     is per character, so Latin takes Poppins / Inter / IBM Plex Mono and Lao
     falls through to Noto — in every element, regardless of which rule
     matched or what html[lang] says. Leaving it out of one stack is what put
     h4 headings in the system font (Lao Sangam MN) instead. */
  --font-display: "Poppins", "Noto Sans Lao", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans Lao", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Eyebrows, labels and data. Noto Sans Lao sits in this stack too — the
     eyebrows carry Lao, and a mono stack without it falls to the system Lao
     face exactly the way --font-display once did. */
  --font-mono: "IBM Plex Mono", "Noto Sans Lao", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- Lao typography ------------------------------------------------------
   These rules adjust metrics only — never font-family. The family is handled
   by the fallback chain above, so a selector listed here cannot silently drop
   an element back to a system Lao font.

   Lao needs more leading than Latin, and blurs above weight 600 at small
   sizes: Noto Sans Lao is loaded at 400/500/600, so 700 would be synthesised.
   Every heading level is capped, h4 included.                              */

/* The Lao hero headline is a good deal longer than the English one and its
   glyphs are taller, so at the shared h1 size it ran to three lines and left
   a single word stranded on the last. A slightly smaller measure for this one
   heading keeps it to two balanced lines without touching any other heading. */

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

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--ink); padding: 12px 18px; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

section { position: relative; padding: 104px 0; }
section.tight { padding: 72px 0; }
.section-alt { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }

/* ---- type -------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0;
}

/* Silver gradient — the house heading treatment. */
.display {
  background: linear-gradient(168deg, #ffffff 8%, #cfd3de 46%, #8b90a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); letter-spacing: -.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: var(--txt-dim); max-width: 62ch; }
.mut { color: var(--mut); }

/* Eyebrow: the accent's main job on this site — one short tick line. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--azure); flex: none;
}
.eyebrow.center { justify-content: center; }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 + p { margin-top: 20px; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-size: .93rem; font-weight: 600; line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease),
              border-color .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary is WHITE, not the accent — a saturated fill reads dated at this size. */
.btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.btn-primary:hover { background: #e6e8ef; border-color: #e6e8ef; }

.btn-ghost { background: transparent; color: var(--txt); border-color: #2a2e3a; }
.btn-ghost:hover { border-color: #454b5c; background: rgba(255,255,255,.03); }

.btn svg { width: 16px; height: 16px; flex: none; }

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 9, 12, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(8, 9, 12, .9); }

.nav { display: flex; align-items: center; gap: 22px; height: 74px; }

/* The logotype is supplied as outlined vector inside the lockup, so it is an
   image, not text — the brand book forbids re-typing it in Poppins. Sized by
   height; the intrinsic 281.8x92 viewBox gives the width. Never below the
   120px minimum the brand book sets for the horizontal lockup. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo-lockup { width: auto; height: 38px; display: block; }
@media (max-width: 560px) { .logo-lockup { height: 32px; } }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  position: relative;
  font-size: .9rem; font-weight: 500; color: var(--txt-dim);
  padding: 9px 14px; border-radius: 8px;
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.burger {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid #262a35; border-radius: 10px;
  cursor: pointer; color: var(--txt);
}
.burger svg { width: 19px; height: 19px; }

@media (max-width: 940px) {
  .nav-links {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-soft); border-bottom: 1px solid var(--line);
    padding: 12px 20px 26px;
    transform: translateY(-120%);
    transition: transform .34s var(--ease);
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 15px 6px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links a::after { display: none; }
  .burger { display: inline-flex; }
  .nav-cta { display: none; }
}

/* ---- hero -------------------------------------------------------------- */
.hero { position: relative; padding: clamp(80px, 12vh, 132px) 0 clamp(72px, 10vh, 110px); overflow: hidden; }
.hero-inner { max-width: 900px; }
.hero h1 { margin-bottom: 26px; }
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); max-width: 58ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* faint grid + one soft aqua bloom, nothing louder */
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 30%, #000 30%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 30%, #000 30%, transparent 76%);
}
.hero-bloom {
  position: absolute; width: 720px; height: 720px; border-radius: 50%;
  top: -320px; left: 50%;
  translate: calc(-50% + var(--bx)) calc(var(--by) + var(--drift));
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 66%);
  filter: blur(30px);
}
.hero > .wrap { position: relative; z-index: 1; }

/* ---- hero motion --------------------------------------------------------
   The pointer writes four custom properties on .hero-bg and nothing else:
   --mx/--my locate the cursor for the lit grid's mask, --bx/--by carry the
   bloom's damped offset. One write per frame, no layout read, no reflow.
   Defaults here mean the hero looks right before any pointer arrives, on
   touch, and if the script never runs at all. */
.hero-bg {
  --mx: 50%;
  --my: 30%;
  --bx: 0px;
  --by: 0px;
  --drift: 0px;
}

.hero-grid-lit {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(to right, rgba(79, 163, 245, .60) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 163, 245, .60) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
/* .lit is set on pointer enter rather than :hover so a touch never sticks
   the highlight on with no way to clear it. */
.hero-bg.lit .hero-grid-lit { opacity: 1; }

.hero-halo {
  position: absolute; inset: 0;
  background: radial-gradient(circle 240px at var(--mx) var(--my),
              rgba(79, 163, 245, .12) 0%, transparent 68%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.hero-bg.lit .hero-halo { opacity: 1; }

/* The bloom keeps breathing on its own, so the hero is never fully static
   on a phone or before the cursor arrives. */
@keyframes hero-drift {
  0%, 100% { --drift: -14px; }
  50%      { --drift: 14px; }
}
@property --drift {
  syntax: "<length>"; inherits: true; initial-value: 0px;
}
.hero-bg { animation: hero-drift 13s ease-in-out infinite; }

/* ---- hero entrance ------------------------------------------------------
   The hero is above the fold, so it plays on load — .reveal is for what is
   scrolled to. Hidden only under html.js (set pre-paint in lang-boot.js),
   so the copy is never invisible to a reader without scripts. */
html.js .hero-inner > *,
html.js .strip-list li {
  opacity: 0;
  transform: translateY(16px);
}
html.js .hero.ready .hero-inner > *,
html.js .strip.ready .strip-list li {
  opacity: 1;
  transform: none;
  /* The stagger arrives through --d, not through a separate
     transition-delay rule. This shorthand resets delay to 0s and outranks
     any plain `.hero h1 { transition-delay }` on specificity, which is
     exactly how the stagger got flattened the first time. A custom property
     sidesteps the cascade fight: it only ever competes with other --d. */
  transition: opacity .8s var(--ease) var(--d, 0s),
              transform .8s var(--ease) var(--d, 0s);
}
.hero .eyebrow { --d: .04s; }
.hero h1       { --d: .15s; }
.hero .lede    { --d: .30s; }
.hero-cta      { --d: .44s; }
.strip-list li:nth-child(1) { --d: .54s; }
.strip-list li:nth-child(2) { --d: .62s; }
.strip-list li:nth-child(3) { --d: .70s; }
.strip-list li:nth-child(4) { --d: .78s; }

/* The primary CTA leans a little towards the cursor. JS supplies the offset
   in --mgx/--mgy; the existing :hover lift still applies on top. */
.btn-magnetic { --mgx: 0px; --mgy: 0px; translate: var(--mgx) var(--mgy); }

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero-grid-lit { display: none; }
  html.js .hero-inner > *,
  html.js .strip-list li { opacity: 1; transform: none; }
  .btn-magnetic { translate: none; }
}

/* ---- trust strip ------------------------------------------------------- */
.strip {
  border-block: 1px solid var(--line-soft);
  background: var(--bg-soft);
  padding: 26px 0;
}
.strip-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 40px; margin: 0; padding: 0; list-style: none;
}
.strip-list li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .86rem; color: var(--mut); letter-spacing: .01em;
}
.strip-list svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---- cards ------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              background .3s var(--ease);
}
/* one hairline of accent on hover — the second place accent appears */
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover { border-color: #2c313e; transform: translateY(-3px); background: var(--card-high); }
.card:hover::after { opacity: .85; }

.card h3 { margin-bottom: 12px; }
.card p { color: var(--mut); font-size: .95rem; margin: 0; }

.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--card-high); border: 1px solid var(--line);
  margin-bottom: 22px; color: var(--txt);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.icon svg { width: 21px; height: 21px; }
.card:hover .icon { color: var(--accent); border-color: rgba(79,163,245,.38); }

/* ---- product cards ----------------------------------------------------- */
.product-card {
  display: flex; flex-direction: column;
  padding: 36px;
  --brand: var(--accent);
}
.product-card.books  { --brand: var(--books); }
.product-card.kapook { --brand: var(--kapook); }

.product-card::before {
  content: ""; position: absolute; z-index: 0;
  width: 340px; height: 340px; border-radius: 50%;
  top: -190px; right: -140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 68%);
  filter: blur(22px);
  opacity: .75; transition: opacity .4s var(--ease);
}
.product-card:hover::before { opacity: 1; }
.product-card > * { position: relative; z-index: 1; }

.product-mark {
  width: 54px; height: 54px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-high); border: 1px solid var(--line);
  margin-bottom: 24px;
}
.product-mark svg { width: 28px; height: 28px; }

/* In a page hero the mark stands alone on its own line. It has to be a block
   box to do that: .eyebrow is inline-flex and would otherwise sit beside it. */
.page-hero .product-mark { display: flex; }

.product-card .kicker {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 12px;
}
.product-card h3 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); margin-bottom: 14px; }
.product-card > p { color: var(--txt-dim); font-size: .98rem; }

.tick-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.tick-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .92rem; color: var(--txt-dim);
}
.tick-list svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--brand); }

.product-card .btn-row { margin-top: auto; padding-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- stats ------------------------------------------------------------- */

/* ---- client logo marquee ------------------------------------------------
   Pills rather than circles. A circle only offers a narrow horizontal band to
   a logo, and these marks are wide — DCAL is 3.98:1, Sengchanh 2.68:1 — so a
   circle shrinks them to nothing. A fully-rounded pill still reads as a round
   white shape while leaving the artwork legible. */
.lmarquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  margin-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lmarquee-track {
  display: flex; align-items: center;
  gap: 22px; width: max-content;
  animation: lmarquee 34s linear infinite;
}
@keyframes lmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Paused on hover and on keyboard focus, so anyone can stop it to look. */
.lmarquee:hover .lmarquee-track,
.lmarquee:focus-within .lmarquee-track { animation-play-state: paused; }

.lchip {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 216px; height: 104px;
  padding: 16px 30px;
  background: #fff;
  border-radius: 999px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lchip img { max-width: 100%; max-height: 64px; width: auto; object-fit: contain; }
.lchip:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -14px var(--accent-glow);
}
@media (max-width: 600px) {
  .lchip { width: 172px; height: 88px; padding: 14px 24px; }
  .lchip img { max-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .lmarquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .lmarquee-track { animation: none; }
  .lchip, .lchip:hover { transition: none; transform: none; }
}

/* ---- clients ------------------------------------------------------------
   Client marks are dark artwork drawn for light grounds, so each one sits on
   its own white plate inside the card — the same treatment the Ten Years site
   uses. Full colour, not greyscale: these are small raster marks and
   desaturating them only makes them muddy.

   The plate is a fixed height and the mark is contained inside it, so four
   logos of four different aspect ratios still line up on one optical baseline
   across the row. Never size these by width — mpwt is 2.7:1 and tenyears is
   1.7:1, and matching their widths would make one twice the height of the
   other. */

.client-mark {
  display: flex; align-items: center; justify-content: center;
  height: 104px;
  padding: 16px 20px;
  margin-bottom: 22px;
  background: #fff;
  border-radius: var(--radius-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.client-mark img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.client:hover .client-mark {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -14px var(--accent-glow);
}
@media (prefers-reduced-motion: reduce) {
  .client-mark, .client:hover .client-mark { transition: none; transform: none; }
}

/* ---- client detail cards ---- */
/* Three across, not four: with five clients a four-column row leaves one card
   stranded on its own. Three gives 3 + 2 and more room for the note. */
.clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 1040px) { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .clients { grid-template-columns: 1fr; } }

.client { display: flex; flex-direction: column; padding: 24px; }
.client .client-sector {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mut);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  margin-bottom: 18px; white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.client:hover .client-sector { color: var(--accent); border-color: rgba(79,163,245,.38); }

.client h3 { font-size: 1.02rem; line-height: 1.35; margin-bottom: 8px; }
.client .client-note { font-size: .89rem; color: var(--mut); margin: 0; }
/* the alternate-language name, shown as a subtitle under the heading */
.client .client-alt { font-size: .86rem; color: var(--txt-dim); margin: 0 0 14px; line-height: 1.6; }

/* Sits at the foot of the card whatever the note's length, so a card with a
   link and one without still line up. */
.client-link {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 500; letter-spacing: .02em;
  color: var(--mut);
  transition: color .25s var(--ease);
}
.client-link svg { width: 13px; height: 13px; flex: none; }
.client-link:hover { color: var(--signal); }
.client-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

/* ---- split (about / approach) ------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 42px; } }

.num-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.num-list li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; align-items: start; }
.num-list .n {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; color: var(--signal);
  padding-top: 4px;
}
.num-list h4 { font-size: 1.02rem; margin-bottom: 8px; }
.num-list p { color: var(--mut); font-size: .93rem; margin: 0; }

/* ---- FAQ --------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 24px 44px 24px 0; position: relative;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.03rem; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut);
  transform: rotate(45deg); transition: transform .3s var(--ease), border-color .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.faq details p { color: var(--mut); font-size: .95rem; padding: 0 44px 26px 0; margin: 0; }

/* ---- contact ----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 62px; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; gap: 44px; } }

.contact-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 24px; }
.contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.contact-list .ci {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); color: var(--accent);
}
.contact-list svg { width: 17px; height: 17px; }
.contact-list dt {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 5px;
}
.contact-list dd { margin: 0; font-size: .96rem; }
.contact-list dd a:hover { color: var(--accent); }

form.enquiry {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px;
}
.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field label {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mut);
  margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .95rem;
  padding: 13px 15px; border-radius: var(--radius-sm);
  background: #0a0c11; border: 1px solid #23272f; color: var(--txt);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #333846; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: #0c0f15;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field input::placeholder, .field textarea::placeholder { color: #565b6b; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23868b9c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 13px;
  padding-right: 40px;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .82rem; color: var(--mut); margin: 16px 0 0; }
.form-status {
  margin: 18px 0 0; padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: .9rem; display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(79,163,245,.10); border: 1px solid rgba(79,163,245,.36); color: #A9D8FF; }
.form-status.err { background: rgba(255,107,107,.09); border: 1px solid rgba(255,107,107,.34); color: #ffb3b3; }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ---- footer ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding: 68px 0 34px; background: var(--bg-soft); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 52px; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-about p { color: var(--mut); font-size: .9rem; margin: 20px 0 0; max-width: 34ch; }
.footer-col h4 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 18px; font-family: var(--font-mono); font-weight: 500;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { font-size: .9rem; color: var(--txt-dim); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: var(--mut);
}
.footer-bottom a:hover { color: var(--txt); }

/* ---- reveal on scroll -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---- inner page hero --------------------------------------------------- */
.page-hero { padding: 76px 0 62px; position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-bottom: 22px; }
.crumb { font-size: .84rem; color: var(--mut); margin-bottom: 26px; }
.crumb a:hover { color: var(--accent); }
.crumb span { margin: 0 8px; opacity: .5; }

/* ---- misc -------------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }