/* =============================================================
   HELIOS SYSTEMS
   Brand colours sampled from the official logo artwork:
     #0359EC primary blue · #23BDF9 cyan · #232323 wordmark ink
   Everything themable lives in :root.
   ============================================================= */

/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root {
  /* Brand */
  --blue:       #0359ec;
  --blue-deep:  #0846b8;
  --cyan:       #23bdf9;
  --cyan-soft:  #7ad6fb;

  /* Dark surfaces (hero, process, footer) */
  --ink:        #080b14;
  --ink-2:      #0f1420;
  --ink-3:      #161c2b;
  --on-dark:    #f4f6fb;
  --on-dark-2:  #a8b3c8;
  --on-dark-3:  #6f7c94;
  --line-dark:  rgba(255, 255, 255, .1);

  /* Light surfaces */
  --paper:      #fffffc;
  --paper-2:    #f3f6fc;
  --text:       #0d1424;
  --text-2:     #4a566e;
  --text-3:     #6b7690;
  --line:       rgba(13, 20, 36, .12);

  /* Type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;

  /* Rhythm */
  --shell:   1320px;
  --gutter:  clamp(20px, 4vw, 48px);
  --section: clamp(84px, 10vw, 150px);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  .74s;
}

/* -------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(15px, .98rem, 16.5px);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; transition: outline-offset .18s var(--ease); }
::selection { background: var(--blue); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 999;
  padding: 12px 22px; background: var(--cyan); color: var(--ink);
  border-radius: 999px; font-weight: 600;
}
.skip:focus { left: 16px; }

/* -------------------------------------------------------------
   3. TYPE
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.display-xl { font-size: clamp(40px, 7.4vw, 104px); }
.display-l  { font-size: clamp(32px, 5.2vw, 72px); }
.display-m  { font-size: clamp(26px, 3.4vw, 46px); }

/* The signature device: a serif italic line under the sans headline. */
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
}
.tint {
  background: linear-gradient(94deg, var(--cyan), var(--blue) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--blue);
}
.kicker::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.on-dark .kicker, .kicker--light { color: var(--cyan); }

.lede {
  font-size: clamp(16px, 1.12vw, 19px);
  line-height: 1.75; font-weight: 300;
  color: var(--text-2); max-width: 60ch;
}
.on-dark .lede { color: var(--on-dark-2); }

/* -------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }

.on-dark { background: var(--ink-2); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-light { background: var(--paper); color: var(--text); }
.on-light-2 { background: var(--paper-2); color: var(--text); }

/* Width is set in px, deliberately.
   `ch` resolves against the CONTAINER's font-size (16px), not the
   heading's — so a 20ch container was ~320px wide and forced 72px
   display headings into four-word columns. These caps are wide enough
   that each <br>-delimited line stays on one line at desktop sizes. */
.head { max-width: min(100%, 980px); margin-bottom: clamp(42px, 5vw, 68px); }
.head--wide { max-width: min(100%, 1120px); }
.head h2 { margin-block: 18px 20px; }
.head .lede { max-width: 58ch; }

/* Dotted texture, used on dark sections. Replaces the 600 KB
   Three.js canvas the previous Helios build pulled from a CDN. */
.dotted::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  pointer-events: none;
}

/* -------------------------------------------------------------
   5. MOTION
   Elements are visible by default; the inline snippet in <head>
   adds `.js`, and only then do the "before" states apply. A
   script that never loads can therefore never blank the page.
   ------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease),
              filter  var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; filter: blur(0); transform: none; }
.js [data-reveal='scale'] { transform: scale(.96); filter: blur(5px); }

/* -------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 62px; padding: 0 32px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  white-space: nowrap;
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; transform: none; }

.btn--accent {
  background: linear-gradient(180deg, var(--cyan-soft), var(--cyan));
  color: var(--ink);
  box-shadow: 0 16px 40px -16px rgba(35, 189, 249, .6);
}
.btn--accent:hover { box-shadow: 0 22px 50px -18px rgba(35, 189, 249, .75); }

.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 16px 40px -18px rgba(3, 89, 236, .8); }
.btn--blue:hover { background: var(--blue-deep); }

.btn--pale { background: #eef1f6; color: var(--ink); }
.btn--pale:hover { background: #fff; }

.btn--outline { border-color: var(--line); color: var(--text); background: var(--paper); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

.btn--outline-light { border-color: var(--line-dark); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }

.btn__dot {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  font-size: 13px;
  transition: transform .4s var(--ease);
}
.btn:hover .btn__dot { transform: translateX(4px); }
.btn--outline-light .btn__dot, .btn--blue .btn__dot { background: rgba(255, 255, 255, .18); }

/* -------------------------------------------------------------
   7. NAV
   ------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 400;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease),
              border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding-block: 12px;
  background: rgba(8, 11, 20, .78);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: var(--line-dark);
}
.nav__brand img { height: 30px; width: auto; }

.nav__links {
  display: flex; align-items: center; gap: clamp(20px, 2.8vw, 44px);
  font-size: 15px; font-weight: 500; color: var(--on-dark);
}
.nav__links a { position: relative; padding-block: 6px; opacity: .82; transition: opacity .3s var(--ease); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: right;
  transition: transform .42s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__right { display: flex; align-items: center; gap: 12px; }

.lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px; border: 1px solid var(--line-dark); border-radius: 999px;
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .05em;
}
.lang a { padding: 5px 10px; border-radius: 999px; color: var(--on-dark-3); transition: all .3s var(--ease); }
.lang a[aria-current='true'] { background: var(--cyan); color: var(--ink); }
.lang a:not([aria-current='true']):hover { color: #fff; }

.nav .btn { min-height: 50px; padding: 0 22px; font-size: 14px; }

.burger {
  display: none; place-items: center;
  width: 50px; height: 50px;
  border: 1px solid var(--line-dark); border-radius: 999px;
}
.burger i { display: block; width: 17px; height: 1.5px; background: #fff; position: relative; transition: background-color .2s; }
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: #fff;
  transition: transform .4s var(--ease);
}
.burger i::before { top: -6px; }
.burger i::after  { top: 6px; }
.burger[aria-expanded='true'] i { background: transparent; }
.burger[aria-expanded='true'] i::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] i::after  { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 390;
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px var(--gutter) var(--gutter);
  background: var(--ink);
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease), opacity .35s var(--ease);
}
/* Removing [hidden] makes the panel occupy layout again, but it is
   still opacity 0 / fully clipped at that instant — helios.js forces
   a reflow before adding .is-open, so the unfurl below actually
   animates instead of jumping straight to the open state. */
.menu.is-open { opacity: 1; clip-path: inset(0 0 0% 0); }
.menu[hidden] { display: none; }

.menu a {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 7.5vw, 56px); letter-spacing: -.03em;
  color: var(--on-dark-2); padding-block: 10px;
  border-bottom: 1px solid var(--line-dark);
  opacity: 0; filter: blur(7px); transform: translateY(22px);
  transition: color .3s var(--ease), padding-left .4s var(--ease),
              opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--mi, 0) * 55ms);
}
.menu.is-open a { opacity: 1; filter: blur(0); transform: none; }
.menu a:hover { color: var(--cyan); padding-left: 12px; }
html.nav-open { overflow: hidden; }

/* A faint, oversized mark in the corner — the same watermark idea as
   the footer signature, at menu scale. Purely decorative. */
.menu::after {
  content: '';
  position: absolute; right: clamp(-60px, -4vw, -20px); bottom: clamp(-60px, -4vw, -20px);
  width: clamp(220px, 30vw, 380px); aspect-ratio: 1;
  background:
    radial-gradient(circle, transparent 56%, rgba(35, 189, 249, .05) 58%, transparent 62%),
    radial-gradient(circle, transparent 70%, rgba(3, 89, 236, .06) 72%, transparent 76%);
  pointer-events: none;
}

/* -------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(150px, 20vh, 220px) clamp(70px, 8vw, 110px);
  text-align: center;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; left: 50%; top: -30%;
  width: min(1100px, 120vw); aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(circle,
    rgba(3, 89, 236, .3) 0%, rgba(35, 189, 249, .12) 34%, transparent 66%);
  pointer-events: none; z-index: 0;
}
/* WebGL starfield. Sits above the dotted texture and the radial
   bloom, below the content. If the script bails — no WebGL, reduced
   motion, data saver — the element stays empty and the CSS gradient
   underneath is still the hero background. */
.hero__galaxy {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  /* Cleared out behind the headline and densest toward the edges —
     the starfield frames the text instead of competing with it. */
  -webkit-mask-image: radial-gradient(105% 88% at 50% 42%,
    transparent 0%, rgba(0, 0, 0, .3) 34%, rgba(0, 0, 0, .78) 62%, #000 100%);
  mask-image: radial-gradient(105% 88% at 50% 42%,
    transparent 0%, rgba(0, 0, 0, .3) 34%, rgba(0, 0, 0, .78) 62%, #000 100%);
}
.hero__galaxy[data-galaxy-ready] { opacity: .7; }
.hero__galaxy canvas { display: block; width: 100%; height: 100%; }

/* On phones the starfield runs at half the layers, DPR 1 and ~30fps
   (see galaxy.js). It is also pulled back visually, because a small
   screen puts the headline right on top of it. */
@media (max-width: 860px) {
  .hero__galaxy[data-galaxy-ready] { opacity: .5; }
  .hero__galaxy {
    -webkit-mask-image: radial-gradient(120% 70% at 50% 38%,
      transparent 0%, rgba(0, 0, 0, .22) 40%, rgba(0, 0, 0, .7) 70%, #000 100%);
    mask-image: radial-gradient(120% 70% at 50% 38%,
      transparent 0%, rgba(0, 0, 0, .22) 40%, rgba(0, 0, 0, .7) 70%, #000 100%);
  }
}

/* The pointer repulsion needs events, but only inside the hero and
   only where a fine pointer exists. */
@media (hover: hover) and (pointer: fine) {
  .hero__galaxy { pointer-events: auto; }
}

.hero > .shell { position: relative; z-index: 1; }

.badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 20px 10px 16px;
  background: #eef1f6; color: var(--ink);
  border-radius: 999px; font-size: 14px; font-weight: 600;
}
.badge__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(3, 89, 236, .6);
  animation: badgePulse 2.6s var(--ease) infinite;
}
@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(3, 89, 236, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(3, 89, 236, 0); }
  100% { box-shadow: 0 0 0 0 rgba(3, 89, 236, 0); }
}

.hero h1 { margin-block: 30px 26px; }
.hero .lede { margin-inline: auto; text-align: center; }
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; margin-top: 40px;
}

.trust {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 38px; padding: 12px 22px;
  border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: 13.5px; color: var(--on-dark-2);
}
.trust strong { color: #fff; font-weight: 600; }
.trust__sep { width: 1px; height: 16px; background: var(--line-dark); }

/* -------------------------------------------------------------
   9. MARQUEES
   ------------------------------------------------------------- */
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee + .marquee { margin-top: 18px; }
.marquee__track {
  display: flex; align-items: stretch; gap: var(--gap, 18px);
  width: max-content; will-change: transform;
  animation: marqueeRun 52s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--gap, 18px) / 2)), 0, 0); }
}

/* Tech-stack chip: name over category label, like the reference */
.chip {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 210px; padding: 22px 26px;
  border: 1px solid var(--line-dark); border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.chip:hover { border-color: rgba(35, 189, 249, .45); background: rgba(35, 189, 249, .05); }
.chip__name { font-family: var(--display); font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.chip__cat { margin-top: 5px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }

/* Project tile in the work marquee */
.tile {
  position: relative; flex: none;
  width: clamp(240px, 26vw, 340px);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--ink-3);
}
/* Light plate: the product logos are full-colour, so they sit on a
   pale surface and keep their own identity rather than being
   flattened to white.

   The logos have very different native ratios — DocFlow is square,
   CMS is 1.8:1 — so object-fit alone makes them read at wildly
   different sizes. Capping BOTH axes inside a fixed-height plate is
   what makes them look equal. */
.tile__plate {
  height: 168px; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(140deg, #ffffff, #eef3fb 55%, #e3ecfa);
}
.tile__plate img {
  /* --logo-h is set per logo in the markup. Equal HEIGHT makes wide
     logos twice the optical weight of square ones, so each logo gets
     a height tuned to land on roughly the same area (~11k px²).
     That is the manual optical balancing a designer does by eye. */
  max-height: var(--logo-h, 92px); max-width: 74%; width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .55s var(--ease);
}
.tile:hover .tile__plate img { transform: scale(1.05); }
.tile__body { padding: 18px 20px 22px; }
.tile__cat { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.tile__name { font-family: var(--display); font-size: 18px; font-weight: 600; color: #fff; margin-top: 7px; letter-spacing: -.02em; }

/* -------------------------------------------------------------
   10. INQUIRY (multi-step)
   ------------------------------------------------------------- */
.inquiry__stage {
  border: 1px solid var(--line); border-radius: 26px;
  background: var(--paper); padding: clamp(26px, 3.4vw, 48px);
  box-shadow: 0 30px 80px -50px rgba(13, 20, 36, .5);
}
.inquiry__step { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.inquiry__q { font-family: var(--display); font-size: clamp(21px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.025em; margin-block: 12px 8px; }
.inquiry__hint { font-size: 14.5px; color: var(--text-3); }

.options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.option {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-size: 14.5px; font-weight: 500;
  transition: border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.option:hover { border-color: var(--blue); transform: translateY(-2px); }
.option { text-align: left; }
.option__check {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); font-size: 12px; color: var(--text-3);
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) {
  .option:hover { border-color: var(--blue); background: rgba(3, 89, 236, .05); }
  .option:hover .option__check {
    background: var(--blue); border-color: var(--blue); color: #fff; transform: translateX(2px);
  }
}

/* Form fields sit on the white inquiry panel, so they need the light
   treatment rather than the dark one used on the contact page. */
.inquiry__stage .field label { color: var(--text-3); }
.inquiry__stage .field input,
.inquiry__stage .field textarea {
  color: var(--text); background: #f7f9fd; border-color: var(--line);
}
.inquiry__stage .field input::placeholder,
.inquiry__stage .field textarea::placeholder { color: var(--text-3); }
.inquiry__stage .field input:focus,
.inquiry__stage .field textarea:focus { border-color: var(--blue); background: #fff; }
.inquiry__stage .field textarea { min-height: 110px; }

.progress { display: flex; gap: 6px; margin-top: 30px; }
.progress span { height: 3px; flex: 1; border-radius: 999px; background: var(--line); }
.progress span.is-on { background: linear-gradient(90deg, var(--cyan), var(--blue)); }

/* -------------------------------------------------------------
   11. PROCESS STEPS
   ------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.step { padding-top: 28px; border-top: 1px solid var(--line-dark); position: relative; }
.step::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 46px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.step__n { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--cyan); }
.step h3 { font-size: clamp(20px, 1.9vw, 26px); margin-block: 14px 12px; }
.step p { font-size: 14.5px; color: var(--on-dark-2); line-height: 1.7; }
.step__tags { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.step__tags li { font-size: 13px; color: var(--on-dark-3); padding-left: 16px; position: relative; }
.step__tags li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 2px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}

/* -------------------------------------------------------------
   12. RESULTS (counters)
   ------------------------------------------------------------- */
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 20px; overflow: hidden; }
.result { background: var(--ink-2); padding: clamp(26px, 3vw, 40px); }
.result__n {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(36px, 5vw, 68px); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(140deg, var(--cyan), var(--blue) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result__l { margin-top: 12px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); line-height: 1.5; }

/* -------------------------------------------------------------
   13. PIPELINE 01–05
   ------------------------------------------------------------- */
.pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pipeline__cell { flex: 1 1 180px; background: var(--paper); padding: clamp(22px, 2.6vw, 34px); }
.pipeline__cell:first-child { background: var(--ink); color: #fff; display: grid; place-items: center; }
.pipeline__cell:first-child img { height: 26px; width: auto; }
.pipeline__n { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--blue); }
.pipeline__t { font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }

/* -------------------------------------------------------------
   14. DOMAINS
   ------------------------------------------------------------- */
.domain {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 48px); align-items: start;
  padding-block: clamp(30px, 3.6vw, 52px);
  border-top: 1px solid var(--line);
}
.domain:last-child { border-bottom: 1px solid var(--line); }
.domain__n { font-family: var(--display); font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -.04em; color: var(--line-strong, rgba(13,20,36,.16)); }
.domain__cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.domain__t { font-family: var(--display); font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.025em; margin-top: 12px; }
.domain__d { font-size: 15px; color: var(--text-2); line-height: 1.75; }
.domain__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill {
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(3, 89, 236, .04); font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}

/* -------------------------------------------------------------
   15. CONTACT
   ------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.contact__cards { display: flex; flex-direction: column; gap: 12px; }
.ccard {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 26px;
  border: 1px solid var(--line-dark); border-radius: 18px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.ccard:hover { border-color: rgba(35, 189, 249, .5); background: rgba(35, 189, 249, .05); transform: translateX(5px); }
/* The label and the value are inline spans, so a vertical margin
   between them does nothing — they end up glued side by side.
   The wrapper becomes a column instead. */
.ccard > span:first-child {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.ccard__k {
  display: block;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark-3);
}
.ccard__v {
  display: block;
  font-family: var(--display); font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 600; color: #fff; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.ccard__sub { display: block; margin-top: 4px; font-size: 13.5px; color: var(--on-dark-3); }
.ccard__go { color: var(--cyan); font-size: 20px; flex: none; transition: transform .4s var(--ease); }
.ccard:hover .ccard__go { transform: translate(4px, -4px); }

/* ---- Map ----
   The embed keeps Google's own light styling: a legible map matters
   more than a themed one. It sits on a pale plate, the same device
   already used for the project logos on dark sections. */
.map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: #eef3fb;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8);
}
.map iframe {
  display: block; width: 100%; height: clamp(300px, 42vw, 460px);
  border: 0;
}
.map__note {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: 14px; font-size: 13px; color: var(--on-dark-3);
}
.map__note a { color: var(--cyan); }

/* -------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-dark-2); padding: clamp(70px, 8vw, 110px) var(--gutter) 0; overflow: hidden; }

/* The footer runs wider than the page grid: content spreads across
   the full width instead of bunching against the left edge. */
.footer > .shell {
  width: min(100% - (var(--gutter) * 2), 1760px);
  container-type: inline-size;   /* lets .footer__mark size off this box */
}

.footer__lead { font-family: var(--display); font-size: clamp(26px, 3.6vw, 54px); font-weight: 600; letter-spacing: -.035em; color: #fff; max-width: 24ch; line-height: 1.05; }

/* Grid, not flex — four equal tracks that fill the whole width. */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 52px);
  margin-top: clamp(44px, 5vw, 70px);
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__col h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 16px; }
.footer__col a { display: block; font-size: 14.5px; color: var(--on-dark-2); margin-bottom: 11px; transition: color .3s var(--ease), transform .3s var(--ease); }
.footer__col a:hover { color: var(--cyan); transform: translateX(4px); }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-block: 26px; font-size: 12px; color: var(--on-dark-3); letter-spacing: .04em; }
.footer__top-link { display: inline-flex; align-items: center; gap: 8px; }

/* Brand logo at the top of the footer */
.footer__logo { height: 42px; width: auto; margin-bottom: 26px; }

/* Oversized signature bleeding off the bottom: the brand symbol
   followed by the full company name in the brand gradient. */
.footer__mark {
  display: flex; align-items: center; gap: .1em;
  font-family: var(--display); font-weight: 700;
  /* Sized against the FOOTER SHELL, not the viewport, so the
     signature spans the full width whatever the screen. The vw value
     is the fallback for engines without container query units. */
  font-size: clamp(26px, 11.9vw, 300px);
  font-size: 13.3cqw;
  line-height: .92;
  letter-spacing: -.05em;
  margin-top: 10px; margin-bottom: -.1em;
  white-space: nowrap;
  user-select: none;
  /* Fades as it bleeds off the bottom edge, so the signature reads
     as a watermark rather than a solid block of colour. */
  -webkit-mask-image: linear-gradient(180deg, #000 22%, rgba(0, 0, 0, .28) 100%);
  mask-image: linear-gradient(180deg, #000 22%, rgba(0, 0, 0, .28) 100%);
}
.footer__mark-text {
  background: linear-gradient(96deg,
    rgba(35, 189, 249, .52) 0%,
    rgba(75, 155, 245, .44) 36%,
    rgba(3, 89, 236, .36) 70%,
    rgba(8, 70, 184, .24) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.footer__mark-o { opacity: .62; }
/* The symbol IS the O of Helios — it sits inline, in place of the
   letter, exactly as in the wordmark. Sized and nudged to sit on the
   same baseline as the surrounding lowercase glyphs. */
.footer__mark-o {
  display: inline-block;
  width: .62em; height: .62em;
  vertical-align: -.055em;
  margin-inline: .015em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------
   17. FLOATING CONTACT RAIL
   ------------------------------------------------------------- */
.rail { position: fixed; right: clamp(10px, 1.4vw, 20px); bottom: clamp(16px, 3vw, 34px); z-index: 350; display: flex; flex-direction: column; gap: 10px; }
.rail a {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; background: var(--ink-3); color: #fff;
  border: 1px solid var(--line-dark);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .7);
  transition: background-color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.rail a:hover { background: var(--blue); border-color: var(--blue); transform: scale(1.08); }
.rail svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------
   17b. INNER PAGES
   ------------------------------------------------------------- */

/* Page hero (every page except home) */
.phero {
  position: relative; background: var(--ink); color: var(--on-dark);
  padding-block: clamp(140px, 18vh, 200px) clamp(56px, 7vw, 92px);
  overflow: hidden;
}
.phero::after {
  content: ''; position: absolute; left: 50%; top: -40%;
  width: min(980px, 115vw); aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(circle, rgba(3, 89, 236, .26) 0%, rgba(35, 189, 249, .1) 36%, transparent 66%);
  pointer-events: none;
}
.phero > .shell { position: relative; z-index: 1; }
.phero h1 { margin-block: 22px 22px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--on-dark-3); }
.crumbs a:hover { color: var(--cyan); }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

/* Equal-height card grid.
   `align-items: stretch` is the grid default, so the cards match; the
   body then takes `flex: 1` to push footers to a common baseline. */
.cards { display: grid; gap: clamp(16px, 1.6vw, 22px); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.pcard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: border-color .38s var(--ease), box-shadow .38s var(--ease), transform .38s var(--ease);
}
.pcard:hover {
  border-color: rgba(3, 89, 236, .32);
  box-shadow: 0 26px 60px -34px rgba(13, 20, 36, .45);
  transform: translateY(-5px);
}

/* Same normalisation as the marquee tiles: fixed plate, capped logo
   box on both axes, so every product reads at the same weight. */
.pcard__plate {
  height: 170px; display: grid; place-items: center; padding: 26px;
  background: linear-gradient(140deg, #ffffff, #eef3fb 55%, #e3ecfa);
  border-bottom: 1px solid var(--line);
}
.pcard__plate img {
  /* Same optical balancing as the marquee tiles — see .tile__plate img */
  max-height: var(--logo-h, 92px); max-width: 74%; width: auto;
  object-fit: contain; mix-blend-mode: multiply;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard__plate img { transform: scale(1.05); }

.pcard__body { display: flex; flex-direction: column; gap: 11px; padding: 24px 24px 26px; flex: 1; }
.pcard__cat { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.pcard__t { font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.02em; }
.pcard__d { font-size: 14px; color: var(--text-2); line-height: 1.7; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 12px; }
.pcard__badge {
  align-self: flex-start; margin-top: 10px; padding: 7px 14px;
  border-radius: 999px; background: rgba(13, 20, 36, .05);
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}

/* Text card (services, values) — no plate, still equal height */
.tcard {
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  transition: border-color .38s var(--ease), box-shadow .38s var(--ease), transform .38s var(--ease);
}
.tcard:hover { border-color: rgba(3, 89, 236, .32); box-shadow: 0 26px 60px -34px rgba(13, 20, 36, .45); transform: translateY(-5px); }
.tcard__n { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--blue); }
.tcard h3 { font-size: clamp(18px, 1.6vw, 23px); }
.tcard p { font-size: 14.5px; color: var(--text-2); line-height: 1.7; }
.tcard .pcard__tags { margin-top: auto; }

.tcard--dark { background: rgba(255, 255, 255, .02); border-color: var(--line-dark); }
.tcard--dark h3 { color: #fff; }
.tcard--dark p { color: var(--on-dark-2); }
.tcard--dark:hover { border-color: rgba(35, 189, 249, .45); box-shadow: none; }
.tcard--dark .pill { border-color: var(--line-dark); background: rgba(255, 255, 255, .04); color: var(--on-dark-2); }

/* Feature list */
.flist { display: flex; flex-direction: column; gap: 9px; }
.flist li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.flist li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.on-dark .flist li { color: var(--on-dark-2); }

/* Two-column prose block */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
.prose p + p { margin-top: 18px; }
.prose p { color: var(--text-2); line-height: 1.85; }
.on-dark .prose p { color: var(--on-dark-2); }

/* Numbered timeline (approach page) */
.tl { display: flex; flex-direction: column; }
.tl__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 48px); padding-block: clamp(28px, 3.4vw, 46px); border-top: 1px solid var(--line-dark); }
.tl__item:last-child { border-bottom: 1px solid var(--line-dark); }
.tl__n { font-family: var(--display); font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -.04em; color: rgba(255, 255, 255, .18); }
.tl__t { font-family: var(--display); font-size: clamp(19px, 1.9vw, 27px); font-weight: 600; letter-spacing: -.025em; color: #fff; }
.tl__d { font-size: 15px; color: var(--on-dark-2); line-height: 1.8; }

/* Contact form */
.form { display: grid; gap: 16px; min-width: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* A <select> defaults to the width of its longest option, which on a
   narrow screen drags the whole grid wider than the viewport. Both
   declarations are needed: width caps it, min-width lets it shrink
   below its intrinsic content size inside a grid track. */
.field select { width: 100%; min-width: 0; max-width: 100%; }
.field input, .field textarea { width: 100%; min-width: 0; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 15px; color: #fff;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-dark); border-radius: 14px;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--cyan); background: rgba(35, 189, 249, .05);
}
.field select option { background: var(--ink-2); color: #fff; }
.form__note { font-size: 12.5px; color: var(--on-dark-3); }
.form__note[data-form-status] { min-height: 1.4em; transition: color .3s var(--ease); }
.form__note[data-form-status].is-ok { color: var(--cyan); font-weight: 600; }
.form__note[data-form-status].is-err { color: var(--on-dark); font-weight: 600; }
.inquiry__hint.is-err { color: var(--ink); font-weight: 600; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 24px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; color: var(--blue); transition: transform .35s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }

/* Native <details> hides its content with a hard `display:none` the
   instant [open] is removed — there is no "before" state to
   transition FROM, so a plain CSS transition on the answer can never
   animate; it just snaps, which is the "not fluide" the accordion
   was doing.

   Fix: keep the wrapper laid out at all times (this class selector
   outranks the UA stylesheet's `details:not([open]) > *` rule) and
   drive the actual reveal with a grid-rows tween instead — 0fr
   collapses the row to nothing, 1fr opens it to its natural content
   height, and `grid-template-rows` interpolates smoothly between
   `fr` values. The answer itself needs `overflow: hidden`, which is
   what lets the grid track's minimum size actually reach zero. No
   JS, no measured heights, no ResizeObserver. */
.faq details > .faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq details[open] > .faq__body { grid-template-rows: 1fr; }
/* The grid item itself must stay free of padding/border — those never
   get clipped by overflow, so they'd stop the row reaching true 0.
   Padding belongs one level deeper, on content the overflow can clip. */
.faq__body > .faq__inner { overflow: hidden; }
.faq__inner > p { padding-bottom: 26px; color: var(--text-2); max-width: 70ch; }

/* =============================================================
   17c. INTERACTION LAYER
   Every pointer-driven effect sits inside @media (hover:hover), so
   touch devices never get a stuck hover state.
   ============================================================= */

:root {
  --link-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='15' fill='%230359ec'/%3E%3Cpath d='M13 11h10v10h-3v-4.9l-6.8 6.8-2.1-2.1 6.8-6.8H13v-3z' fill='%23fff'/%3E%3C/svg%3E") 17 17, pointer;
}

/* ---- Scroll progress ---- */
.progressbar {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 500;
  transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  pointer-events: none;
}

/* ---- Nav hides going down, returns going up ---- */
.nav { transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease),
                   border-color .4s var(--ease), padding .4s var(--ease),
                   transform .45s var(--ease); }
.nav.is-hidden { transform: translateY(-102%); }

/* ---- Buttons: magnetic offset + light sweep + arrow pivot ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)));
}
.btn::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .42) 50%, transparent 78%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .85s var(--ease);
}
@media (hover: hover) {
  .btn:hover { --lift: -3px; }
  .btn:hover::before { transform: translateX(130%) skewX(-12deg); }
  .btn:hover .btn__dot { transform: rotate(-45deg); }
}
.btn:active { --lift: -1px; }

/* ---- Cards: lift, ring, spotlight following the pointer ---- */
.pcard, .tcard, .tile, .ccard { position: relative; }
.pcard::after, .tcard::after, .tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--px, 50%) var(--py, 50%),
              rgba(35, 189, 249, .18), transparent 62%);
  transition: opacity .45s var(--ease);
}
.pcard__body, .tile__body { position: relative; z-index: 2; }

@media (hover: hover) {
  .pcard, .tcard, .tile, .ccard, .btn, .option { cursor: var(--link-cursor); }

  .pcard:hover::after, .tcard:hover::after, .tile:hover::after { opacity: 1; }

  .pcard:hover, .tcard:hover {
    transform: translateY(-6px);
    border-color: rgba(3, 89, 236, .34);
    box-shadow: 0 32px 74px -34px rgba(3, 89, 236, .42);
  }
  .tcard--dark:hover { border-color: rgba(35, 189, 249, .5); box-shadow: none; }

  .pcard:hover .pcard__plate img,
  .tile:hover .tile__plate img { transform: scale(1.06); filter: saturate(1.08) contrast(1.03); }

  .tile:hover { border-color: rgba(35, 189, 249, .45); transform: translateY(-5px); }

  /* Process steps slide, like the reference */
  .step:hover { transform: translateX(6px); }
  .result:hover { background: rgba(35, 189, 249, .05); }
}
.step { transition: transform .45s var(--ease); }
.result { transition: background-color .45s var(--ease); }
.tile { transition: transform .4s var(--ease), border-color .4s var(--ease); }

/* ---- Domain rows: slide + an accent rule drawing in from the left ---- */
.domain { transition: transform .45s var(--ease); }
.domain::after {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .domain:hover { transform: translateX(9px); }
  .domain:hover::after { transform: scaleX(1); }
  .domain:hover .domain__n { color: var(--blue); }
}
.domain__n { transition: color .45s var(--ease); }

/* ---- Inquiry options ---- */
.option { transition: border-color .35s var(--ease), background-color .35s var(--ease),
                      transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (hover: hover) { .option:hover { box-shadow: 0 12px 26px -14px rgba(3, 89, 236, .5); } }

/* Multi-step machinery */
.inquiry__panel[hidden] { display: none; }
.inquiry__panel { animation: stepIn .5s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.inquiry__nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.inquiry__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-3);
  transition: color .3s var(--ease);
}
.inquiry__back:hover { color: var(--blue); }
.inquiry__done { display: flex; flex-direction: column; gap: 14px; }
.inquiry__check {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(140deg, var(--cyan), var(--blue)); color: #fff; font-size: 24px;
}

/* ---- Hero: word-by-word entrance ---- */
.js [data-reveal][data-split] { opacity: 1; filter: none; transform: none; }
.js [data-split] .word {
  display: inline-block;
  opacity: 0; filter: blur(9px); transform: translateY(26px);
  transition: opacity .82s var(--ease), filter .82s var(--ease), transform .82s var(--ease);
  transition-delay: calc(var(--i) * 52ms);
}
.js [data-split].is-revealed .word { opacity: 1; filter: blur(0); transform: none; }

/* A .word carries a `filter`, which creates its own rendering
   context — so the gradient that .tint clips to ITS text can no
   longer paint through the child's glyphs, and the word renders as
   transparent text on no background: invisible.
   Each word therefore carries the gradient itself. Every tinted
   span on the site is a single word, so the result is identical. */
.js [data-split] .tint .word {
  background: linear-gradient(94deg, var(--cyan), var(--blue) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =============================================================
   17d. SIGNATURE COMPONENTS

   Two components carry the personality of the site.

   .scard — a service card laid out as a 4-row grid, cards divided
     by hairlines rather than boxed in rounded borders. On hover a
     dark panel wipes across (::before, scaleX with the origin
     flipped so it enters from the left), an accent bar grows up the
     left edge (::after, scaleY), the icon chip flips to accent and
     the inner pill inverts.

   .ptile — a project tile whose circular arrow sits rotated off
     axis and straightens as it fills with accent on hover.
   ============================================================= */

/* ---------- Service cards ---------- */
.scards {
  display: flex;
  gap: 0;
  margin-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scards::-webkit-scrollbar { display: none; }
.on-dark .scards { border-top-color: var(--line-dark); }

.scard {
  isolation: isolate; position: relative; overflow: hidden;
  flex: 0 0 33.3333%; min-width: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-items: start; gap: 16px;
  padding: 30px 28px 34px;
  color: var(--text);
  background: rgba(255, 255, 252, .28);
  border-bottom: 1px solid var(--line);
  transition: color .36s ease, transform .52s var(--ease), box-shadow .52s var(--ease);
  transform: translate(0, 0);
}
.scard + .scard { border-left: 1px solid var(--line); }
.scard > * { position: relative; z-index: 1; }

/* The dark panel that wipes across */
.scard::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--ink-2);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .62s var(--ease);
}
/* The accent bar on the leading edge */
.scard::after {
  content: ''; position: absolute; inset: 0 auto 0 0; z-index: 2;
  width: 3px; height: auto;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .52s var(--ease);
}

.scard__icon {
  grid-area: 1 / 1; align-self: center;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  color: var(--blue); background: #e7eefc;
  box-shadow: 0 0 0 1px rgba(13, 20, 36, .08);
  transition: color .36s var(--ease), background-color .36s var(--ease),
              transform .36s var(--ease), box-shadow .36s var(--ease);
}
.scard__icon svg { width: 24px; height: 24px; fill: currentColor; }

.scard__name {
  grid-area: 1 / 2; align-self: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 1.8vw, 30px); letter-spacing: -.04em; line-height: 1.02;
}
.scard__desc {
  grid-area: 2 / 1 / auto / -1; max-width: 46ch; margin-top: 4px;
  font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--text-2);
  transition: color .36s;
}
.scard__caps {
  grid-area: 3 / 1 / auto / -1; margin-top: 6px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text-2);
  transition: color .36s;
}
.scard__caps li { display: flex; align-items: center; gap: 9px; }
.scard__caps li::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); transition: background-color .36s;
}
.scard__cta {
  grid-area: 4 / 1 / auto / -1; place-self: end start;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 13px 24px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  color: #fff; background: var(--ink);
  transition: color .36s, background-color .36s;
}
.scard__cta span { transition: transform .32s var(--ease); }

@media (hover: hover) {
  .scard:hover { color: #fff; transform: translate(6px); box-shadow: 0 26px 70px -30px rgba(3, 89, 236, .5); }
  .scard:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .scard:hover::after  { transform: scaleY(1); }
  .scard:hover .scard__desc { color: #b9c2d4; }
  .scard:hover .scard__caps { color: #e7ebf4; }
  .scard:hover .scard__caps li::before { background: var(--cyan); }
  .scard:hover .scard__icon {
    color: var(--ink); background: var(--cyan); transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(35, 189, 249, .55), 0 8px 22px rgba(35, 189, 249, .22);
  }
  .scard:hover .scard__cta { color: var(--ink); background: var(--cyan); }
  .scard:hover .scard__cta span { transform: translateX(3px); }
}
.scard:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

/* Carousel controls */
.scards-nav { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.scards-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text);
  transition: background-color .24s ease, border-color .24s ease, color .24s ease,
              opacity .24s ease, transform .22s var(--ease);
}
.scards-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.scards-btn:active:not(:disabled) { transform: scale(.92); }
.scards-btn:disabled { opacity: .32; cursor: default; }
.scards-btn svg { width: 18px; height: 18px; fill: currentColor; }
.scards-count {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.on-dark .scards-btn { border-color: var(--line-dark); color: #fff; }
.on-dark .scards-btn:hover:not(:disabled) { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.on-dark .scards-count { color: var(--on-dark-3); }

/* ---------- Project rows ----------
   The work listing is a run of rows, not a grid of boxes:
   [visual | category + name | arrow], divided by hairlines, with the
   same dark wipe as .scard. */
.plist {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.plist--single { grid-template-columns: 1fr; }
.on-dark .plist { border-top-color: var(--line-dark); }

.prow {
  isolation: isolate; position: relative; overflow: hidden;
  min-height: 188px;
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 1.1fr) 44px;
  align-items: center; gap: 18px; padding: 18px;
  color: var(--text);
  background: rgba(255, 255, 252, .28);
  border-bottom: 1px solid var(--line);
  transition: color .36s ease, transform .52s var(--ease), box-shadow .52s var(--ease);
}
.plist:not(.plist--single) .prow:nth-child(2n) { border-left: 1px solid var(--line); }
.prow > * { position: relative; z-index: 1; }

.prow::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--ink-2);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .62s var(--ease);
}
.prow::after {
  content: ''; position: absolute; inset: 0 auto 0 0; z-index: 2;
  width: 3px; background: linear-gradient(180deg, var(--cyan), var(--blue));
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .52s var(--ease);
}

.prow__visual {
  aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; padding: 16px;
  background: linear-gradient(140deg, #ffffff, #eef3fb 55%, #e3ecfa);
  box-shadow: 0 0 0 1px rgba(13, 20, 36, .08);
  transition: box-shadow .42s var(--ease);
}
.prow__visual img {
  max-height: calc(var(--logo-h, 92px) * .78); max-width: 76%; width: auto;
  object-fit: contain; mix-blend-mode: multiply;
  transition: transform .55s var(--ease), filter .42s ease;
}
.prow__cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); transition: color .36s;
}
.prow__name {
  margin-top: 7px; font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -.035em; line-height: 1.05;
}
.prow__desc {
  margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-2);
  max-width: 46ch; transition: color .36s;
}
.prow__arrow {
  justify-self: end; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: 20px; line-height: 1;
  transform: rotate(-38deg);
  transition: color .36s ease, background-color .36s ease,
              border-color .36s ease, transform .52s var(--ease);
}

@media (hover: hover) {
  .prow:hover { color: #fff; transform: translate(6px); box-shadow: 0 26px 70px -32px rgba(3, 89, 236, .45); }
  .prow:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .prow:hover::after { transform: scaleY(1); }
  .prow:hover .prow__cat { color: var(--cyan); }
  .prow:hover .prow__desc { color: #b9c2d4; }
  .prow:hover .prow__visual { box-shadow: 0 0 0 2px var(--cyan); }
  .prow:hover .prow__visual img { transform: scale(1.05); filter: saturate(1.08); }
  .prow:hover .prow__arrow { transform: rotate(0); background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
}
.prow:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

/* ---------- Project tiles ---------- */
.ptiles { display: grid; gap: clamp(22px, 2.6vw, 36px); }
.ptiles--2 { grid-template-columns: repeat(2, 1fr); }
.ptiles--3 { grid-template-columns: repeat(3, 1fr); }

.ptile { display: grid; gap: 16px; color: inherit; }
.ptile__visual {
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(140deg, #ffffff, #eef3fb 55%, #e3ecfa);
  box-shadow: 0 0 0 1px rgba(13, 20, 36, .08);
  display: grid; place-items: center; padding: 26px;
  transition: box-shadow .42s var(--ease);
}
.ptile__visual img {
  max-height: var(--logo-h, 92px); max-width: 70%; width: auto;
  object-fit: contain; mix-blend-mode: multiply;
  transition: filter .42s ease, transform .62s var(--ease);
}
.ptile__copy {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "category arrow" "name arrow";
  align-items: center; gap: 6px 16px; padding: 0 4px;
}
.ptile__cat {
  grid-area: category; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.ptile__name {
  grid-area: name; font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -.035em; line-height: 1.05;
}
.ptile__arrow {
  grid-area: arrow; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 20px; line-height: 1;
  transform: rotate(-38deg);
  transition: color .36s ease, background-color .36s ease,
              border-color .36s ease, transform .52s var(--ease);
}
.on-dark .ptile__cat { color: var(--on-dark-3); }
.on-dark .ptile__name { color: #fff; }
.on-dark .ptile__arrow { border-color: var(--line-dark); color: #fff; }

@media (hover: hover) {
  .ptile:hover .ptile__arrow {
    transform: rotate(0); background: var(--cyan);
    border-color: var(--cyan); color: var(--ink);
  }
  .ptile:hover .ptile__visual { box-shadow: 0 0 0 2px var(--cyan), 0 26px 70px -34px rgba(3, 89, 236, .55); }
  .ptile:hover .ptile__visual img { transform: scale(1.05); filter: saturate(1.08) contrast(1.03); }
}
.ptile:focus-visible { outline: none; }
.ptile:focus-visible .ptile__visual { box-shadow: 0 0 0 3px var(--blue); }

/* =============================================================
   17e. CUSTOM CURSOR
   The brand symbol IS a ring with a centre dot, so the cursor is
   the mark itself: the dot tracks the pointer exactly, the ring
   trails behind and opens up over anything interactive.
   Fine pointers only — never on touch.
   ============================================================= */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 950;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
  display: none;
}
html.has-cursor .cursor { display: block; }
html.has-cursor .cursor.is-visible { opacity: 1; }

.cursor__ring {
  position: absolute;
  width: 42px; height: 42px;
  translate: -50% -50%;
  transform: translate(var(--rx, 0px), var(--ry, 0px));
  transition: width .32s var(--ease), height .32s var(--ease), opacity .3s var(--ease);
}
.cursor__ring svg { width: 100%; height: 100%; overflow: visible; }
.cursor__ring g { transform-origin: 100px 100px; transition: transform .5s var(--ease); }

/* A hairline, and one that stays a hairline.
   `stroke-width` in viewBox units is multiplied by the render scale,
   so the ring got THICKER as it opened — the opposite of elegant.
   non-scaling-stroke pins the line to screen pixels instead, so it
   reads the same at 34px and at 58px. CSS wins over the presentation
   attribute in the markup, so nothing else needs touching. */
.cursor__ring svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25;
  stroke-opacity: .92;
}

.cursor__dot {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  translate: -50% -50%;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: width .28s var(--ease), height .28s var(--ease), background-color .28s var(--ease);
}

/* Over a link, a card, a button: the ring opens and the arcs turn. */
.cursor.is-active .cursor__ring { width: 66px; height: 66px; }
.cursor.is-active .cursor__ring g { transform: rotate(90deg); }
.cursor.is-active .cursor__ring svg path { stroke-opacity: 1; }
.cursor.is-active .cursor__dot { width: 8px; height: 8px; }

/* Over a text field the ring steps back — precision belongs to the
   native caret there. */
.cursor.is-text .cursor__ring { opacity: 0; }
.cursor.is-text .cursor__dot { width: 2px; height: 20px; border-radius: 1px; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor .scard,
  html.has-cursor .prow,
  html.has-cursor .pcard,
  html.has-cursor .tcard,
  html.has-cursor .tile,
  html.has-cursor .ccard,
  html.has-cursor .option,
  html.has-cursor summary { cursor: none; }

  /* Form fields keep the real caret — hiding it there hurts. */
  html.has-cursor input,
  html.has-cursor textarea,
  html.has-cursor select { cursor: auto; }
}

/* =============================================================
   17f. LOADING SCREEN
   Shown once per session only. Navigating between twelve pages
   should not mean watching the same animation twelve times.
   ============================================================= */

/* Without JS, neither overlay's controlling class (`loading` /
   `pt-cover`) can ever be added or removed — so both must default to
   invisible in that case, or a script failure/CSP block would leave
   the whole page permanently hidden behind an opaque panel. */
html:not(.js) .loader,
html:not(.js) .pt-overlay { display: none; }

.loader {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; gap: 0;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
  transition: clip-path .95s var(--ease), opacity .45s ease .45s;
}
html.is-loaded .loader { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
html.loading { overflow: hidden; }

.loader__inner { display: grid; justify-items: center; gap: 26px; }

.loader__mark { width: clamp(72px, 9vw, 104px); aspect-ratio: 1; overflow: visible; }
.loader__halo { transform-origin: 100px 100px; animation: loaderHalo 2.4s var(--ease) infinite; }
.loader__spin { transform-origin: 100px 100px; animation: loaderSpin 3.2s linear infinite; }
.loader__arc {
  stroke-dasharray: 210; stroke-dashoffset: 210;
  animation: loaderDraw 1.05s var(--ease) forwards;
}
.loader__arc:nth-of-type(2) { animation-delay: .12s; }

@keyframes loaderDraw { to { stroke-dashoffset: 0; } }
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderHalo {
  0%, 100% { transform: scale(.85); opacity: .22; }
  50%      { transform: scale(1.25); opacity: 0; }
}

.loader__word {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: var(--on-dark-2);
}

.loader__meter { display: grid; justify-items: center; gap: 12px; }
.loader__bar {
  width: clamp(160px, 22vw, 240px); height: 2px;
  background: rgba(255, 255, 255, .1); border-radius: 999px; overflow: hidden;
}
.loader__fill {
  display: block; height: 100%; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width .28s linear;
}
.loader__pct {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--on-dark-3);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   17g. PAGE TRANSITIONS
   The big .loader plays once, on the very first page of the
   session — wordmark and progress bar included, because that
   moment can afford to be ceremonial. Every navigation after that
   plays this instead: a circular reveal that grows from wherever
   the visitor clicked, covers the screen, and shrinks away again
   once the next page has painted.

   It carries the SAME mark treatment as the big loader — the arcs
   draw themselves in, the halo pulses, at a size close to the
   loader's own — just without the wordmark or the progress bar,
   which would be dishonest here: a static page arrives instantly,
   so there is nothing to show a percentage of.
   ============================================================= */
.pt-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: var(--ink);
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .62s var(--ease);
  pointer-events: none;
}
html.pt-cover .pt-overlay { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); pointer-events: auto; }
html.pt-cover { overflow: hidden; }

.pt-overlay__mark { width: clamp(64px, 7vw, 92px); aspect-ratio: 1; overflow: visible; }
.pt-overlay__halo { transform-origin: 100px 100px; animation: loaderHalo 2.4s var(--ease) infinite; }
.pt-overlay__spin { transform-origin: 100px 100px; animation: loaderSpin 1.9s linear infinite; }
.pt-overlay__arc {
  stroke-dasharray: 210; stroke-dashoffset: 210;
  /* Quicker than the loader's .arc: the whole transition is over in
     well under a second, so the draw-in has to finish inside that
     window rather than the loader's more leisurely 1.05s. */
  animation: loaderDraw .48s var(--ease) forwards;
}
.pt-overlay__arc:nth-of-type(2) { animation-delay: .08s; }

/* -------------------------------------------------------------
   18. RESPONSIVE — four breakpoints, used consistently
   ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .nav .btn--accent, .nav .btn--blue { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .scard { flex-basis: 52%; }
  .ptiles--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .results { grid-template-columns: repeat(2, 1fr); }
  .domain { grid-template-columns: 60px minmax(0, 1fr); }
  .domain__body--right { grid-column: 2; }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  /* The grid children are the number, the title wrapper and the body
     wrapper — NOT .tl__d, which is a paragraph nested inside the
     third one. Targeting .tl__d did nothing, so the body wrapper
     fell into the 62px number column and broke to one word a line. */
  .tl__item { grid-template-columns: 62px minmax(0, 1fr); }
  .tl__item > *:last-child { grid-column: 1 / -1; margin-top: 4px; }
  .scard { flex-basis: 78%; }
  .scard__caps { grid-template-columns: 1fr; gap: 9px; }
}
@media (max-width: 860px) {
  .plist { grid-template-columns: 1fr; }
  .plist .prow:nth-child(2n) { border-left: 0; }
}
@media (max-width: 640px) {
  .scard { flex-basis: 88%; padding: 26px 22px 30px; }
  .ptiles--2, .ptiles--3 { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 14px; min-height: 0; }
  .prow__desc { display: none; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* Footer columns: the grid has to be stepped down explicitly —
   `flex-direction` no longer applies now that it is a grid. */
@media (max-width: 900px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 460px) { .footer__cols { grid-template-columns: 1fr; gap: 28px; } }

/* Contact page: let both grid children shrink below their content. */
.contact__grid > * { min-width: 0; }
@media (max-width: 480px) {
  .results { grid-template-columns: 1fr; }
  .domain { grid-template-columns: 1fr; }
  .domain__n { font-size: 24px; }
  .rail a { width: 44px; height: 44px; }
  .tl__item { grid-template-columns: 1fr; }
  .tl__item > *:last-child { grid-column: 1; }
}

/* -------------------------------------------------------------
   18b. MOBILE REFINEMENTS
   ------------------------------------------------------------- */

/* Project rows stack: a 120px middle column cannot hold a name
   like "ADO Barite System". The visual goes full width above. */
@media (max-width: 560px) {
  .prow { grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; padding: 16px; }
  .prow__visual { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .prow__arrow { align-self: center; }
  .prow__desc { display: block; }
}

/* 10.5px labels are fine on a desktop monitor, not in the hand. */
@media (max-width: 640px) {
  .tile__cat, .prow__cat, .ptile__cat, .chip__cat, .pcard__cat,
  .ccard__k, .footer__col h4, .scards-count { font-size: 11.5px; }
  .kicker { font-size: 11.5px; letter-spacing: .18em; }
}

/* Touch targets: 30px logo, 30px language switch and a 20px
   "back to top" are all below the 44px minimum. Padding grows the
   hit area without changing the visual size.
   Keyed on width AS WELL AS pointer type — a narrow window on a
   laptop needs the same generosity, and `pointer: coarse` alone is
   untestable from a desktop browser. */
@media (max-width: 860px), (pointer: coarse) {
  .nav__brand { padding-block: 9px; }
  .footer__col a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .footer__top-link { min-height: 44px; }
  .crumbs a,
  .footer__bar a,
  .form__note a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The 44px links are taller than the plain <li> text around them,
     so the row has to centre itself or the separator drifts up. */
  .crumbs ol { align-items: center; }
  .crumbs li { display: flex; align-items: center; }

}

/* The language switch moves out of the header and into the menu:
   two characters in a 44px round target read as a blob, and the
   mobile header already carries a logo and a burger.

   Keyed on WIDTH ONLY, matching the breakpoint where the burger
   appears. Including `pointer: coarse` here would hide it on a
   touch laptop at 1440px — where there is no burger either, so the
   language switch would be unreachable. */
@media (max-width: 1080px) {
  .nav__right .lang { display: none; }
}

.menu .lang {
  align-self: flex-start;
  margin-top: clamp(24px, 4vw, 40px);
}
/* These anchors sit inside .menu, so without an explicit reset they
   inherit the 56px menu-link treatment, borders and all. */
.menu .lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 58px; padding: 0 18px;
  font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .05em;
  border-bottom: 0;
}
.menu .lang a:hover { padding-left: 18px; }

@media (min-width: 1081px) {
  .menu .lang { display: none; }
}

/* -------------------------------------------------------------
   19. REDUCED MOTION
   Each element is placed in its intended final state rather than
   blanket-disabled, so nothing disappears or half-renders.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; width: auto; }
  .badge__dot { animation: none; }
  .btn:hover, .ccard:hover, .option:hover, .footer__col a:hover, .rail a:hover { transform: none; }

  /* Interaction layer: keep the state changes, drop the movement. */
  .btn { transform: none !important; }
  .btn::before { display: none; }
  .pcard:hover, .tcard:hover, .tile:hover, .step:hover, .domain:hover { transform: none; }
  .domain::after { transition: none; }
  .pcard::after, .tcard::after, .tile::after { display: none; }
  .js [data-split] .word { opacity: 1; filter: none; transform: none; transition: none; }
  .inquiry__panel { animation: none; }
  .progressbar { display: none; }
  .nav.is-hidden { transform: none; }

  /* Signature components: keep the state change, drop the travel. */
  .scard:hover, .prow:hover { transform: none; }
  .scard::before, .scard::after, .prow::before, .prow::after { transition: none; }
  .prow__arrow { transform: none; transition: none; }
  .prow:hover .prow__arrow { transform: none; }
  .prow__visual img { transition: none; }
  .prow:hover .prow__visual img { transform: none; }
  .scard__icon, .scard__cta, .scard__cta span { transition: none; }
  .ptile__arrow { transform: none; transition: none; }
  .ptile:hover .ptile__arrow { transform: none; }
  .ptile__visual img { transition: none; }
  .ptile:hover .ptile__visual img { transform: none; }
  .scards { scroll-snap-type: none; }
  .hero__galaxy { display: none; }

  /* Cursor keeps its states, loses the trailing lag and the spin. */
  .cursor__ring, .cursor__dot { transition: none; }
  .cursor__ring g { animation: none; transition: none; }
  .loader__spin, .loader__halo, .loader__arc { animation: none; }
  .loader__arc { stroke-dashoffset: 0; }
  .loader { transition: opacity .3s ease; }
  html.is-loaded .loader { clip-path: none; }

  /* Belt and suspenders: chrome.js already skips the whole page-
     transition system under reduced motion, so this only matters if
     that check somehow disagrees with the media query at paint time. */
  .pt-overlay { transition: none; }
  .pt-overlay__spin, .pt-overlay__halo, .pt-overlay__arc { animation: none; }
  .pt-overlay__arc { stroke-dashoffset: 0; }

  /* Menu: keep the open/closed states, lose the unfurl and the
     per-link stagger. */
  .menu { transition: none !important; }
  .menu a { transition: color .2s ease !important; opacity: 1 !important; filter: none !important; transform: none !important; }

  /* FAQ: still opens and closes, just without the tween. */
  .faq details > .faq__body { transition: none !important; }
  .faq summary::after { transition: none !important; }
}

/* -------------------------------------------------------------
   20. PRINT
   ------------------------------------------------------------- */
@media print {
  .nav, .menu, .burger, .rail, .hero::after, .dotted::before, .inquiry,
  .loader, .pt-overlay, .cursor { display: none !important; }
  body, .on-dark, .hero, .footer { background: #fff !important; color: #000 !important; }
  .on-dark h1, .on-dark h2, .on-dark h3, .footer__lead { color: #000 !important; }
  .section { padding-block: 18px; }
}