/* ==========================================================================
   Vatous Global Solutions — design system
   --------------------------------------------------------------------------
   One coherent system: tokens → base → type → layout → components → chrome.
   Colour is the existing Vatous palette (paper / deep blue / cyan / teal).
   Type is Instrument Sans + Instrument Serif (editorial accent) + JetBrains
   Mono (labels & figures). No framework: every rule here is intentional.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces: warm white, light warm grey, white cards. No dark blue. */
  --paper:      #FAF8F2;
  --paper-2:    #F1EDE4;
  --surface:    #F5F2EB;
  --card:       #FFFFFF;

  /* Text: charcoal, never pure black */
  --ink:        #171A20;
  --ink-2:      #3B414C;
  --muted:      #6A7280;
  --line:       rgba(23, 26, 32, .13);
  --line-soft:  rgba(23, 26, 32, .07);

  /* Brand accents drawn from the logo mark.
     --brand is the logo's royal blue, used only in small areas.
     --aqua is decorative only (it never carries text on a light surface). */
  --brand:      #1B3FD8;
  --brand-800:  #1430A8;
  --brand-050:  #ECEFFC;
  --teal:       #0E7490;
  --teal-050:   #E3F2F7;
  --aqua:       #14D3C7;
  --aqua-050:   #DFFAF6;

  /* Strong surfaces (former navy role): charcoal */
  --charcoal:   #1E222B;
  --charcoal-2: #262B35;

  /* Legacy aliases kept so older markup keeps rendering correctly */
  --blue-900:   var(--charcoal);
  --blue-800:   var(--charcoal-2);
  --blue:       var(--brand);
  --blue-050:   #EFECE5;
  --cyan:       var(--aqua);
  --cyan-050:   var(--aqua-050);
  --night:      var(--charcoal);
  --night-2:    var(--charcoal-2);

  /* Type */
  /* Two families only: Instrument Sans for everything functional, Instrument
     Serif for the italic accent. Labels use the sans family with tracking. */
  --font-sans:  'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono:  var(--font-sans);

  --t-display: clamp(2.6rem, 1.1rem + 5.2vw, 5.4rem);
  --t-1:       clamp(2.25rem, 1.4rem + 3.2vw, 3.9rem);
  --t-2:       clamp(1.8rem, 1.35rem + 1.9vw, 2.85rem);
  --t-3:       clamp(1.3rem, 1.15rem + .65vw, 1.6rem);
  --t-lede:    clamp(1.075rem, 1rem + .38vw, 1.28rem);
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-xs:      .8125rem;
  --t-label:   .72rem;

  /* Space & shape */
  --shell:     1240px;
  --gutter:    clamp(20px, 5vw, 52px);
  --sect:      clamp(68px, 8.5vw, 128px);
  --r-sm:      10px;
  --r:         16px;
  --r-lg:      clamp(18px, 2.2vw, 30px);
  --r-pill:    999px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(23, 26, 32, .05), 0 8px 24px -18px rgba(23, 26, 32, .28);
  --shadow-md: 0 2px 4px rgba(23, 26, 32, .05), 0 26px 60px -34px rgba(23, 26, 32, .34);
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* The CMS image bindings toggle [hidden] at runtime — it must win over
   the display rules above. */
[hidden] { display: none !important; }

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

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

::selection { background: var(--cyan); color: #04222B; }

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--blue-900);
  color: #fff;
  border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

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

/* Class-based hiding (JS toggles it) — doubled selector so it beats other
   component display rules, but still yields to an inline style. */
.hidden.hidden { display: none; }

/* Circular monogram used for authors and people */
.avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-900);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.avatar--cyan { background: var(--teal); }
.avatar--paper { background: var(--brand-050); color: var(--brand); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.042em;
}

.h1 { font-size: var(--t-1); letter-spacing: -.036em; }
.h2 { font-size: var(--t-2); letter-spacing: -.03em; }
.h3 { font-size: var(--t-3); letter-spacing: -.02em; line-height: 1.2; }

.h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.35;
}

/* Editorial accent: one serif italic word inside a sans headline. */
.em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--teal);
}
.band-blue .em, .hero-panel .em, .band-ink .em { color: var(--cyan); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -.011em;
  text-wrap: pretty;
}

.small { font-size: var(--t-small); }
.xs    { font-size: var(--t-xs); }

.muted { color: var(--muted); }
.soft  { color: var(--ink-2); }

strong, b { font-weight: 600; }

.mono {
  font-family: var(--font-mono);
  font-size: .8em;
  letter-spacing: .02em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.eyebrow--dot::before {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--cyan);
  opacity: 1;
}

.band-blue .eyebrow, .hero-panel .eyebrow, .band-ink .eyebrow { color: rgba(255, 255, 255, .72); }
.band-blue .eyebrow--dot::before, .hero-panel .eyebrow--dot::before { background: var(--cyan); }

/* Small kicker used to number chapters */
.chapter-no {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--teal);
}

.section-head { max-width: 62ch; }
.section-head .h2 { margin-top: 18px; }
.section-head .lede { margin-top: 20px; }
.section-head--wide { max-width: 78ch; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 860px; }
.shell--wide   { max-width: 1400px; }

.band { padding-block: var(--sect); }
.band--tight { padding-block: clamp(48px, 6vw, 84px); }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

.band-alt  { background: var(--paper-2); }
.band-blue {
  background: var(--charcoal);
  color: #fff;
}
.band-ink {
  background: var(--night);
  color: rgba(255, 255, 255, .84);
}
.band-blue h1, .band-blue h2, .band-blue h3, .band-blue h4,
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: #fff; }
.band-blue .lede, .band-ink .lede { color: rgba(255, 255, 255, .76); }
.band-blue .muted, .band-ink .muted { color: rgba(255, 255, 255, .6); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.band-blue .rule, .hero-panel .rule { background: rgba(255, 255, 255, .16); }

.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asymmetric split: editorial text + visual */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
}
.split--text-first { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split-sticky { position: sticky; top: 110px; }

.stack > * + * { margin-top: var(--stack, 18px); }
.flow > * + * { margin-top: 14px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: clamp(48px, 6vw, 72px); }

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

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .975rem;
  font-weight: 600;
  letter-spacing: -.011em;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
}
.btn--ghost:hover { --btn-bd: rgba(15, 23, 42, .3); background: rgba(255, 255, 255, .6); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--blue-900); --btn-bd: #fff; }
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .34);
}
.btn--outline-light:hover { --btn-bd: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); }

.btn--cyan { --btn-bg: var(--cyan); --btn-fg: #04222B; --btn-bd: var(--cyan); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--block { width: 100%; }

/* Text link with an animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--brand);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
}
.link:hover { background-size: 100% 1.5px; }
.link .arrow { transition: transform .22s var(--ease); }
.link:hover .arrow { transform: translateX(4px); }
.band-blue .link, .hero-panel .link, .band-ink .link { color: var(--cyan); }

/* --------------------------------------------------------------------------
   6. Chips, tags, stats
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip--live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(20, 211, 199, .25);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

.band-blue .chip, .hero-panel .chip {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88);
}

/* Selected state for filter chips (aria-pressed is toggled by main.js) */
.chip[aria-pressed="true"],
[data-filter][aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--blue-900);
  color: #fff;
}

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-num {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--blue-900);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.band-blue .stat-num, .hero-panel .stat-num, .band-ink .stat-num { color: #fff; }
.band-blue .stat-label, .hero-panel .stat-label, .band-ink .stat-label { color: rgba(255, 255, 255, .62); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.band-blue .stats-row, .hero-panel .stats-row { border-color: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   7. Cards & panels
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--flat { background: transparent; }
.card--paper { background: var(--paper); }
.card--pad-lg { padding: clamp(26px, 3vw, 40px); }

a.card:hover, .card--link:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 27, 120, .25);
  box-shadow: var(--shadow-md);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.card-title { font-size: 1.19rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.card-text { color: var(--muted); font-size: var(--t-small); line-height: 1.6; margin-top: 9px; }
.card-foot { margin-top: auto; padding-top: 20px; }

/* Icon tile — the only "illustration" primitive that repeats */
.tile {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-050);
  color: var(--brand);
}
.tile--cyan { background: var(--cyan-050); color: var(--teal); }
.tile--teal { background: rgba(8, 145, 178, .12); color: var(--teal); }
.tile--sm { width: 34px; height: 34px; border-radius: 10px; }
.tile--lg { width: 52px; height: 52px; border-radius: 15px; }
.band-blue .tile, .hero-panel .tile, .band-ink .tile { background: rgba(255, 255, 255, .1); color: var(--cyan); }

.panel {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.panel--paper { background: var(--paper-2); }
.panel--blue {
  background: var(--charcoal);
  border-color: transparent;
  color: #fff;
}
/* A blue panel carries its own light text colours */
.panel--blue .lede { color: rgba(255, 255, 255, .78); }
.panel--blue .muted { color: rgba(255, 255, 255, .6); }
.panel--blue .eyebrow { color: rgba(255, 255, 255, .72); }
.panel--blue .eyebrow--dot::before { background: var(--cyan); }
.panel--blue .em { color: var(--cyan); }
.panel--blue .chapter-no { color: var(--cyan); }
.panel--blue .rule { background: rgba(255, 255, 255, .16); }
.panel--blue .link { color: var(--cyan); }
.panel--blue .list-check li { color: rgba(255, 255, 255, .8); }
.panel--blue .list-check li::before {
  background-color: rgba(20, 211, 199, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314D3C7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.band-blue .panel, .band-ink .panel { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(16px, 2.4vw, 28px); padding-bottom: clamp(16px, 2.4vw, 28px); }

.hero .shell {
  max-width: 100%;
}

.hero-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 5.4vw, 84px) 0 clamp(30px, 4vw, 60px);
  background: var(--charcoal);
  color: #fff;
  /* stretched edge-to-edge; shell provides the actual content width */
}
/* One restrained accent instead of gradients, orbs or dot grids: a short
   aqua mark on the top edge. */
.hero-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--aqua);
}

/* Text colours inside a coloured panel (dark by default, reset on --paper) */
.hero-panel .lede { color: rgba(255, 255, 255, .78); }
.hero-panel .muted { color: rgba(255, 255, 255, .6); }
.hero-panel .list-check li { color: rgba(255, 255, 255, .8); }
.hero-panel .list-check li::before {
  background-color: rgba(20, 211, 199, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314D3C7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.hero-panel .fact-list, .hero-panel .fact-row { border-color: rgba(255, 255, 255, .14); }
.hero-panel .fact-row dt { color: rgba(255, 255, 255, .6); }
.hero-panel .index-list, .hero-panel .index-item { border-color: rgba(255, 255, 255, .14); }
.hero-panel .index-text { color: rgba(255, 255, 255, .62); }
.hero-panel .index-arrow { color: rgba(255, 255, 255, .5); }

.hero-panel--paper {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
}
.hero-panel--paper::before,
.hero-panel--paper::after { content: none; }
/* Paper panels are light — undo every dark-panel text treatment above */
.hero-panel--paper .lede { color: var(--ink-2); }
.hero-panel--paper .muted { color: var(--muted); }
.hero-panel--paper .eyebrow { color: var(--muted); }
.hero-panel--paper .em { color: var(--teal); }
.hero-panel--paper .link { color: var(--brand); }
.hero-panel--paper .rule { background: var(--line); }
.hero-panel--paper .chip {
  background: rgba(255, 255, 255, .6);
  border-color: var(--line);
  color: var(--ink-2);
}
.hero-panel--paper .stat-num { color: var(--brand); }
.hero-panel--paper .stat-label { color: var(--muted); }
.hero-panel--paper .tile {
  background: var(--brand-050);
  color: var(--brand);
}
.hero-panel--paper .list-check li { color: var(--ink-2); }
.hero-panel--paper .list-check li::before {
  background-color: var(--cyan-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.hero-panel--paper .fact-list, .hero-panel--paper .fact-row { border-color: var(--line); }
.hero-panel--paper .fact-row dt { color: var(--muted); }
.hero-panel--paper .index-list, .hero-panel--paper .index-item { border-color: var(--line); }
.hero-panel--paper .index-text { color: var(--muted); }
.hero-panel--paper .index-arrow { color: var(--muted); }

.hero-panel--split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}

.hero-title { margin: 0 0 16px; font-size: clamp(2.4rem, 4vw + 1rem, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; max-width: none; }
.hero-title--wide { max-width: none; font-size: clamp(2rem, 3vw + .8rem, 3.2rem); }
.hero-panel--split .display { font-size: clamp(2.2rem, 2vw + .7rem, 3rem); }
.hero-panel--split .hero-title { max-width: none; font-size: clamp(2rem, 2.2vw + .8rem, 2.8rem); }
.hero-panel--split .hero-title--wide { max-width: none; font-size: clamp(1.8rem, 2vw + .7rem, 2.4rem); }
.hero-lede { margin: 0 0 24px; max-width: 56ch; font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem); }
.hero-actions { margin: 32px 0 0; }

.hero-foot {
  margin-top: clamp(34px, 4.4vw, 56px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
  justify-content: flex-start;
}

/* Inner-page hero (shorter) */
.hero--page .hero-title { max-width: 18ch; }

/* --------------------------------------------------------------------------
   9. Product / interface mockups  (replaces the old vector illustrations)
   -------------------------------------------------------------------------- */
.mock {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mock--dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .6);
  color: #fff;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.mock--dark .mock-bar { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.mock-dots { display: flex; gap: 5px; }
.mock-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .18);
}
.mock--dark .mock-dots i { background: rgba(255, 255, 255, .24); }
.mock-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock--dark .mock-title { color: rgba(255, 255, 255, .55); }

.mock-body { padding: clamp(14px, 1.8vw, 20px); }

.mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.mock--dark .mock-row { border-color: rgba(255, 255, 255, .12); }
.mock-row:last-child { border-bottom: 0; }
.mock-grow { flex: 1; min-width: 0; }

.mock-label { font-size: .84rem; font-weight: 500; letter-spacing: -.008em; }
.mock-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.mock--dark .mock-meta { color: rgba(255, 255, 255, .5); }

.mock-avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--blue-050);
  color: var(--blue-900);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.mock-avatar--cyan { background: var(--cyan-050); color: var(--teal); }
.mock--dark .mock-avatar { background: rgba(255, 255, 255, .14); color: #fff; }

.mock-pill {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--cyan-050);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mock-pill--blue { background: var(--brand-050); color: var(--brand); }
.mock-pill--warn { background: rgba(245, 158, 11, .16); color: #92600a; }
.mock--dark .mock-pill { background: rgba(20, 211, 199, .18); color: var(--cyan); }

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mock-kpi {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.mock--dark .mock-kpi { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.mock-kpi b {
  display: block;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.mock-kpi span {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock--dark .mock-kpi span { color: rgba(255, 255, 255, .5); }

.mock-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  overflow: hidden;
}
.mock--dark .mock-track { background: rgba(255, 255, 255, .12); }
.mock-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
}
.mock-fill--blue { background: var(--brand); }

.mock-chart { width: 100%; height: auto; display: block; }

.mock-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: var(--cyan-050);
  color: #06525F;
  font-size: .82rem;
  line-height: 1.45;
}
.mock--dark .mock-note { background: rgba(20, 211, 199, .12); color: #C9FBF5; }

/* Message blocks inside a mock (question / answer pairs) */
.mock-q {
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--paper-2);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.mock--dark .mock-q { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .92); }
.mock-answer { font-size: .87rem; line-height: 1.55; color: var(--ink-2); }
.mock--dark .mock-answer { color: rgba(255, 255, 255, .8); }
.mock-source {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 6px 0;
}
.mock--dark .mock-source { color: rgba(255, 255, 255, .55); }
.mock-source::before {
  content: '';
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--cyan);
}

/* Floating caption that anchors a mock to a business outcome */
.mock-caption {
  position: absolute;
  right: -14px;
  bottom: -22px;
  max-width: 216px;
  padding: 12px 15px;
  border-radius: 14px;
  background: var(--blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  font-size: .8rem;
  line-height: 1.4;
}
.mock-caption b { color: var(--cyan); font-weight: 600; }
.mock-wrap { position: relative; }

/* Phone frame (Joblira / academy) */
.phone {
  width: min(280px, 100%);
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.phone-notch {
  width: 96px;
  height: 5px;
  margin: 10px auto 0;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 42, .16);
}
.phone-body { padding: 14px; }

/* --------------------------------------------------------------------------
   10. Lists, indexes, tables
   -------------------------------------------------------------------------- */
.list-check, .list-x {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 13px;
}
.list-check li, .list-x li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.list-check li::before, .list-x li::before { flex: none; }
.list-check li::before {
  content: '';
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--cyan-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.list-x li::before {
  content: '';
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626E86' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.list-x li { color: var(--muted); }
.band-blue .list-check li, .band-ink .list-check li { color: rgba(255, 255, 255, .78); }
.band-blue .list-check li::before, .band-ink .list-check li::before {
  background-color: rgba(20, 211, 199, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314D3C7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Numbered index — the magazine-style spine used for processes & services */
.index-list { border-top: 1px solid var(--line); }
.index-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1.25fr) 30px;
  gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s var(--ease), padding-left .2s var(--ease);
}
a.index-item:hover { background: rgba(255, 255, 255, .55); padding-inline: 12px; }
.index-no {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--teal);
}
.index-title { font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); font-weight: 600; letter-spacing: -.024em; }
.index-text { color: var(--muted); font-size: var(--t-small); line-height: 1.55; }

/* Compact portfolio rail used inside feature cards */
.rail { margin-top: 16px; border-top: 1px solid var(--line); }
.rail-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.rail-no {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--muted);
  padding-top: 2px;
}
.rail-title { display: block; font-weight: 600; letter-spacing: -.012em; }
.rail-note { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.5; margin-top: 2px; }
.index-arrow { color: var(--muted); justify-self: end; transition: transform .22s var(--ease), color .22s var(--ease); }
a.index-item:hover .index-arrow { transform: translateX(5px); color: var(--brand); }
.band-blue .index-list, .band-blue .index-item, .band-ink .index-list, .band-ink .index-item { border-color: rgba(255, 255, 255, .14); }
.band-blue .index-text, .band-ink .index-text { color: rgba(255, 255, 255, .62); }
.band-blue .index-arrow, .band-ink .index-arrow { color: rgba(255, 255, 255, .5); }

/* Comparison */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.compare-col {
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
}
.compare-col--now {
  background: var(--charcoal);
  border-color: transparent;
  color: #fff;
}
.compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-label);
  font-family: var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-col--now .compare-head { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .7); }

/* Facts sheet — hairline table used in place of decorative lists */
.fact-list { border-top: 1px solid var(--line); }
.fact-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}
.fact-row dt { color: var(--muted); }
.fact-row dd { font-weight: 600; text-align: right; }
.band-blue .fact-list, .band-blue .fact-row, .band-ink .fact-list, .band-ink .fact-row { border-color: rgba(255, 255, 255, .14); }
.band-blue .fact-row dt, .band-ink .fact-row dt { color: rgba(255, 255, 255, .6); }

/* Definition-style key/value pair used on service pages */
.kv { display: grid; gap: 8px; }
.kv dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.kv dd { font-size: var(--t-small); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   11. Quotes, testimonials, logos
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
}
.quote-text {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
  line-height: 1.48;
  letter-spacing: -.017em;
  text-wrap: pretty;
}
.quote-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-name { font-weight: 600; font-size: .94rem; }
.quote-role { font-size: var(--t-xs); color: var(--muted); }

.logo-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #171A20 8%, #171A20 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #171A20 8%, #171A20 92%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  gap: clamp(30px, 5vw, 72px);
  animation: slide 34s linear infinite;
}
.logo-strip:hover .logo-track { animation-play-state: paused; }
.logo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--muted);
  white-space: nowrap;
}
.band-blue .logo-item, .band-ink .logo-item { color: rgba(255, 255, 255, .62); }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  width: 100%;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -.018em;
  cursor: pointer;
}
.faq-icon {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  inset: 50% 8px auto;
  height: 1.5px;
  background: var(--ink);
  transform: translateY(-50%);
  transition: transform .25s var(--ease), background-color .2s var(--ease);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.open .faq-icon { background: var(--brand); border-color: var(--brand); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: #fff; }
.faq-item.open .faq-icon::after { transform: translateY(-50%) rotate(0deg); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s var(--ease);
}
.faq-a p {
  padding-bottom: 24px;
  max-width: 74ch;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-2);
}
.field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: .97rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field::placeholder { color: #9AA4B6; }
.field:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .14);
}
.field.invalid { border-color: #DC6B6B; box-shadow: 0 0 0 3px rgba(220, 107, 107, .13); }
textarea.field { min-height: 130px; resize: vertical; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626E86' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; }

.field-error {
  display: none;
  margin-top: 6px;
  font-size: var(--t-xs);
  color: #B3423F;
}
.field-error.show { display: block; }

.field-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.form-note { font-size: var(--t-xs); color: var(--muted); }

/* --------------------------------------------------------------------------
   14. Chrome: header, nav, mobile menu
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: rgba(246, 244, 239, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.nav-link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.011em;
  color: var(--ink-2);
  padding: 6px 0;
  transition: color .18s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  place-items: center;
  transition: transform .28s var(--ease), background-color .2s var(--ease);
}
.burger:hover { background: var(--paper-2); }
.burger:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--paper);
  padding: 80px 20px 32px;
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .38s var(--ease), opacity .32s var(--ease), visibility .38s;
  box-shadow: 0 0 0 rgba(0,0,0,.1);
}
.mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-head { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: 32px; }
.mobile-head .logo { display: flex; align-items: center; gap: 12px; }
.mobile-head .logo img { max-height: 32px; width: auto; }
.mobile-links { margin-top: 0; display: flex; flex-direction: column; gap: 0; }
.mobile-links a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  background: transparent;
  width: 100%;
  transition: color .2s var(--ease), background-color .18s var(--ease);
}
.mobile-links a:hover { color: var(--teal); background: var(--paper-2); }
.mobile-links a[aria-current="page"] { color: var(--teal); }
.mobile-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
body.no-scroll { overflow: hidden; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.icon-btn:hover { background: var(--paper-2); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--night);
  color: rgba(255, 255, 255, .66);
  padding-top: clamp(52px, 6vw, 84px);
  padding-bottom: 26px;
}
.site-footer a { color: rgba(255, 255, 255, .66); transition: color .18s var(--ease); }
.site-footer a:hover { color: #fff; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
  padding-bottom: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-desc { margin-top: 18px; max-width: 34ch; font-size: var(--t-small); line-height: 1.62; }
.footer-socials { display: flex; gap: 9px; margin-top: 22px; }
.social {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  color: rgba(255, 255, 255, .74);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.social:hover { background: var(--cyan); border-color: var(--cyan); color: #04222B; }

.footer-col h3 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: var(--t-small); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .45);
}
.footer-legal { display: flex; gap: 22px; }

.newsletter { display: flex; gap: 8px; margin-top: 18px; max-width: 340px; }
.newsletter .field {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.newsletter .field::placeholder { color: rgba(255, 255, 255, .4); }
.newsletter .field:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(20, 211, 199, .18); }

/* --------------------------------------------------------------------------
   16. Overlays: toast, chat button, cookie bar, modal
   -------------------------------------------------------------------------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  padding: 13px 17px;
  border-radius: 12px;
  border-left: 3px solid var(--cyan);
  background: var(--night);
  color: #fff;
  font-size: var(--t-small);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0); }

.vg-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 110;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #1FAF5F;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(16, 120, 60, .7);
  transition: transform .2s var(--ease);
}
.vg-fab:hover { transform: translateY(-2px) scale(1.03); }
.vg-fab svg { width: 28px; height: 28px; }
.vg-fab-ping {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(31, 175, 95, .55);
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
.vg-fab-label {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--night);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 500;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.vg-fab:hover .vg-fab-label { opacity: 1; transform: translateX(0); }

.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(140%);
  z-index: 130;
  width: min(720px, calc(100vw - 28px));
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-md);
  transition: transform .38s var(--ease);
}
.cookie-bar.show { transform: translateX(-50%) translateY(0); }
.cookie-text { font-size: var(--t-xs); color: var(--muted); max-width: 46ch; }
.cookie-actions { display: flex; gap: 9px; }

dialog.resource {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
dialog.resource::backdrop { background: rgba(5, 12, 46, .55); backdrop-filter: blur(3px); }
.resource-inner { padding: clamp(24px, 3vw, 34px); }

/* --------------------------------------------------------------------------
   17. Motion
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Rotating hero word: cross-fade + rise */
.rotator {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  padding-bottom: .06em;
}
.rotator [data-slide] {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(26%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rotator [data-slide][aria-hidden="false"] { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   18. Long-form article body
   -------------------------------------------------------------------------- */
.article-body {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink-2);
  margin-top: clamp(24px, 3.5vw, 44px);
}
.article-body > * + * { margin-top: 1.1rem; }
.article-body h2 {
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.22;
  color: var(--ink);
  margin-top: 2.4rem;
}
.article-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-top: 1.8rem;
}
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body ul, .article-body ol { display: grid; gap: .5rem; margin-top: 1.1rem; }
.article-body ol { list-style: decimal; padding-left: 1.3rem; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul li { position: relative; padding-left: 1.5rem; }
.article-body ul li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.article-body blockquote {
  margin: 1.8rem 0;
  padding: .2rem 0 .2rem 1.3rem;
  border-left: 3px solid var(--cyan);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--ink);
}
.article-body code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--paper-2);
  padding: .12em .42em;
  border-radius: 5px;
}
.article-body pre {
  background: var(--night);
  color: #E6ECF5;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  overflow-x: auto;
}
.article-body pre code { background: none; color: inherit; padding: 0; }
.article-body img { border-radius: var(--r-sm); margin: 1.6rem 0; }
.article-body hr { border: 0; height: 1px; background: var(--line); margin: 2rem 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.article-body th, .article-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   19. Page-level utilities
   -------------------------------------------------------------------------- */
.page-head { padding-top: clamp(30px, 4vw, 56px); }
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs a:hover { color: var(--ink); }

.notfound { min-height: 62vh; display: grid; place-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: grid; }
  .hero-panel--split { grid-template-columns: minmax(0, 1fr); }
  .split, .split--text-first { grid-template-columns: minmax(0, 1fr); }
  .split-sticky { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-item { grid-template-columns: 44px minmax(0, 1fr) 24px; }
  .index-no { grid-column: 1; grid-row: 1; }
  .index-title { grid-column: 2; grid-row: 1; }
  .index-text { grid-column: 2 / -1; grid-row: 2; }
  .index-arrow { grid-column: 3; grid-row: 1; align-self: center; }
  .mock-caption { position: static; margin-top: 16px; max-width: none; }
}

@media (max-width: 720px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .hero-panel { padding-inline: clamp(20px, 6vw, 30px); }
  .mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd final KPI spans the row instead of leaving a gap */
  .mock-kpis .mock-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cookie-bar { flex-direction: column; align-items: stretch; }
  .cookie-actions .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   21. Admin back-office compatibility
   The admin shell predates this system; these rules keep it rendering
   correctly while it stays on its own Tailwind utilities.
   -------------------------------------------------------------------------- */
.admin-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .92rem;
  color: var(--ink-2);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.admin-sidebar-link:hover { background: rgba(15, 23, 42, .045); color: var(--ink); }
.admin-sidebar-link.active { background: var(--brand-050); color: var(--brand); font-weight: 600; }
.admin-sidebar-link.active svg { color: var(--brand); }

.tile-violet { background: rgba(124, 58, 237, .12); color: #6D28D9; }
.tile-emerald { background: rgba(16, 185, 129, .14); color: #047857; }
.tile-amber { background: rgba(245, 158, 11, .16); color: #92600A; }
.tile-rose { background: rgba(244, 63, 94, .13); color: #BE123C; }
.tile-indigo { background: rgba(79, 70, 229, .13); color: #4338CA; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 42, .18);
  transition: background-color .2s var(--ease);
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s var(--ease);
}
.switch input:checked + .track { background: var(--teal); }
.switch input:checked + .track::after { transform: translateX(18px); }

.teal { color: var(--teal); }
.text-mute { color: var(--muted); }
.text-soft { color: var(--ink-2); }

/* Legacy admin class names (the back office still uses its own markup and
   Tailwind CDN). Kept so the admin keeps working after the site redesign. */
.vg-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--paper-2);
  background-image: none;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(7, 27, 120, .9);
}
.btn-primary:hover { background: #05125A; transform: translateY(-1px); }
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
}
.btn-ghost:hover { --btn-bd: rgba(15, 23, 42, .3); background: rgba(15, 23, 42, .04); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  padding: .34rem .75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: rgba(15, 23, 42, .02);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover { border-color: rgba(23, 26, 32, .28); }
.pill-live { color: var(--teal); border-color: rgba(8, 145, 178, .4); background: rgba(8, 145, 178, .08); }
.pill[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: transparent; }
.tile-teal { background: var(--teal-050); color: var(--teal); }
.tile-blue { background: rgba(83, 122, 210, .14); color: #1D4ED8; }
.tile-cyan { background: rgba(20, 211, 199, .16); color: #0D9488; }
.tile-dark { background: rgba(7, 27, 120, .12); color: #1D4ED8; }
.link-teal, .link-cyan {
  color: var(--teal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .22s var(--ease), color .22s var(--ease);
}
.link-teal:hover, .link-cyan:hover { gap: .7rem; color: #1D4ED8; }
.glass {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   REDESIGN ADDITIONS — distinct hero visuals, illustrations, floating cards
   ========================================================================== */
.hero-visual { position: relative; min-height: 0; }
.hero-visual__canvas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-visual__canvas svg { width: 100%; height: 100%; display: block; }
.hero-content { position: relative; z-index: 2; }

/* Floating cards */
.floating-card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  font-size: .82rem;
  line-height: 1.3;
  max-width: 220px;
  z-index: 3;
  animation: floatY 6s ease-in-out infinite;
}
.floating-card__title { font-weight: 600; color: var(--ink); margin: 0 0 2px; font-size: .85rem; }
.floating-card__meta { color: var(--muted); font-size: .74rem; }
.floating-card--a { top: 12%; right: 6%; animation-delay: 0s; }
.floating-card--b { bottom: 18%; right: 14%; animation-delay: 1.2s; }
.floating-card--c { top: 55%; left: 4%; animation-delay: 2.4s; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Hero variants */
.hero--home { background: radial-gradient(1200px 600px at 80% -10%, rgba(20,211,199,.18), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(27,63,216,.12), transparent 60%), var(--paper); }
.hero--services { background: linear-gradient(135deg, var(--paper) 0%, var(--teal-050) 100%); }
.hero--products { background: radial-gradient(800px 400px at 100% 0%, rgba(27,63,216,.10), transparent 60%), var(--paper); }
.hero--joblira { background: linear-gradient(160deg, #0E7490 0%, #1B3FD8 100%); color: #fff; }
.hero--joblira .hero-panel { background: transparent; }
.hero--joblira .eyebrow, .hero--joblira .hero-title, .hero--joblira .hero-lede { color: #fff; }
.hero--about { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.hero--contact { background: radial-gradient(700px 400px at 50% 120%, rgba(20,211,199,.2), transparent 60%), var(--paper); }

/* Illustration SVG container */
.hero-illust { width: 100%; max-width: 420px; margin: 0 auto; }
.hero-illust svg { width: 100%; height: auto; display: block; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floating-card { animation: none; }
}

/* Responsive: stack floating cards on small screens */
@media (max-width: 768px) {
  .floating-card { position: static; max-width: 100%; margin: 8px 0; animation: none; }
  .hero-illust { max-width: 100%; }
}

/* Section illustrations */
.section-illust { width: 100%; max-width: 480px; margin: 0 auto; }
.section-illust svg { width: 100%; height: auto; display: block; }

/* Process diagram */
.process-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.process-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; text-align: center; min-width: 140px; }
.process-step__num { font-family: var(--font-mono); font-size: .72rem; color: var(--brand); font-weight: 600; }
.process-step__label { font-weight: 600; margin-top: 4px; }
.process-arrow { color: var(--brand); font-size: 1.2rem; }

/* Alternating section layout */
.section-visual { display: flex; align-items: center; justify-content: center; }

/* Card hover lift */
.card--lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }


/* 2026 responsive polish: bold, readable, viewport-aware heroes across the site. */
:root { --muted: #555e6b; --hero-gutter: clamp(20px, 4.4vw, 64px); }
.hero { padding-block: clamp(10px, 1.5vw, 20px); }
.hero .shell { max-width: 1480px; }
.hero-panel {
  min-height: clamp(540px, 76svh, 820px);
  padding: clamp(34px, 5.2vw, 76px) var(--hero-gutter);
  border-radius: var(--r-lg);
  background-image: radial-gradient(ellipse at 90% 12%, rgba(20,211,199,.12), transparent 34%), radial-gradient(ellipse at 4% 92%, rgba(27,63,216,.14), transparent 38%);
}
.hero-panel--paper {
  background-color: var(--card);
  background-image: radial-gradient(ellipse at 92% 8%, rgba(20,211,199,.12), transparent 34%), radial-gradient(ellipse at 4% 96%, rgba(27,63,216,.07), transparent 36%);
}
.hero-panel--split { align-items: center; gap: clamp(24px, 4vw, 64px); }
.hero-title, .hero-panel--split .hero-title, .hero-panel--split .display, .hero-title--wide {
  font-size: clamp(2.65rem, 5.1vw, 5.8rem);
  font-weight: 800; line-height: .99; letter-spacing: -.045em; max-width: 16ch; text-wrap: balance;
}
.hero-panel--split .hero-title--wide { font-size: clamp(2.45rem, 4.4vw, 5rem); }
.hero-lede { max-width: 62ch; font-size: clamp(1.05rem, 1.15vw + .72rem, 1.32rem); line-height: 1.58; }
.hero-panel--paper .muted, .card .muted, .panel .muted { color: #555e6b; }
.card-text { color: #515a67; }
.nav-link[aria-current="page"] { color: var(--brand); font-weight: 700; }
a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(20,211,199,.18); }
button, .btn, .nav-link, .mobile-links a { touch-action: manipulation; }
.field, input, select, textarea, svg, img, video, iframe { max-width: 100%; }
@media (max-width: 960px) {
  .hero .shell { padding-inline: clamp(12px, 3vw, 24px); }
  .hero-panel { min-height: min(760px, 82svh); padding: clamp(30px, 6vw, 54px); }
  .hero-panel--split { grid-template-columns: minmax(0, 1fr); }
  .hero-panel--split .hero-title, .hero-panel--split .display, .hero-panel--split .hero-title--wide { font-size: clamp(2.6rem, 7vw, 4.5rem); max-width: 15ch; }
}
@media (max-width: 720px) {
  .hero { padding-block: 0; }
  .hero .shell { padding-inline: 0; }
  .hero-panel, .hero-panel--paper {
    min-height: calc(100svh - 68px);
    padding: clamp(28px, 7vw, 38px) clamp(20px, 6vw, 28px);
    border-radius: 0; border-inline: 0;
  }
  .hero-panel--split { align-content: center; gap: 28px; }
  .hero-title, .hero-panel--split .hero-title, .hero-panel--split .display, .hero-panel--split .hero-title--wide, .hero-title--wide {
    font-size: clamp(2.45rem, 10vw, 4rem); line-height: .99; letter-spacing: -.045em; max-width: 13ch;
  }
  .hero-lede { font-size: 1.05rem; line-height: 1.58; }
  .hero-actions { align-items: stretch; gap: 10px; }
  .hero-actions .btn { min-height: 48px; flex: 1 1 auto; }
  .hero-panel .card--pad-lg { padding: 22px; }
  .hero-panel .floating-card { position: static !important; margin: 0 0 14px; max-width: 100%; }
  .section-head .h1, .section-head .h2 { text-wrap: balance; }
  .card, .panel { min-width: 0; }
  .cookie-bar { width: calc(100% - 20px); left: 10px; right: 10px; bottom: 10px; padding: 16px; gap: 12px; }
  .cookie-actions { flex-wrap: wrap; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .hero-panel, .card, .btn, .link { transition-duration: .001ms !important; } }


/* ──────────────────────────────────────────────────────────────────────────
   VATOU S / STUDIO SYSTEM — expressive editorial redesign
   Reference principles: bold type, deliberate section rhythm, rich visual
   stages and restrained motion. Original layouts and artwork, not a clone.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --studio-lime: #d8ff72;
  --studio-orange: #ff835c;
  --studio-violet: #7565f5;
  --studio-deep: #11141d;
  --studio-shadow: 0 28px 80px rgba(22, 28, 44, .15);
}
body { background: #f8f7f3; }
::selection { background: var(--studio-lime); color: #11141d; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 5px; }
.shell { width: min(var(--shell), calc(100% - 2 * var(--gutter))); }
.nav {
  background: rgba(250,248,242,.88);
  border-bottom: 1px solid rgba(23,26,32,.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.scrolled { background: rgba(250,248,242,.96); box-shadow: 0 10px 30px rgba(18,22,32,.06); }
.nav-inner { min-height: 78px; }
.nav-link { position: relative; padding-block: 10px; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 2px;
  background: var(--studio-violet); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.btn {
  border-radius: 999px; min-height: 48px; padding: 13px 22px;
  font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 6px 0 rgba(17,20,29,.08);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(17,20,29,.13); }
.btn:active { transform: translateY(0); }
.btn--ghost, .btn--outline-light { box-shadow: none; }
.band { position: relative; padding-block: clamp(72px, 9vw, 136px); }
.band--flush-top { padding-top: clamp(34px, 5vw, 72px); }
.band--flush-bottom { padding-bottom: clamp(34px, 5vw, 72px); }
.band-alt { background: #f0eee7; }
.section-head { max-width: 800px; margin-bottom: clamp(34px, 4vw, 56px); }
.section-head .h1, .section-head h2 {
  font-size: clamp(2.15rem, 4.3vw, 4.4rem); line-height: 1.02;
  letter-spacing: -.055em; font-weight: 800; text-wrap: balance;
}
.section-head .lede { max-width: 62ch; margin-top: 18px; }
.chapter-no, .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 800; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--dot::before { width: 8px; height: 8px; border-radius: 50%; background: var(--studio-violet); content: ''; box-shadow: 0 0 0 5px rgba(117,101,245,.12); }
.em { color: var(--brand); }
.hero { padding-top: 16px; }
.hero .shell { max-width: 1500px; }
.hero-panel {
  min-height: clamp(570px, 78svh, 860px);
  padding: clamp(42px, 6vw, 88px) clamp(26px, 5vw, 72px);
  border-radius: clamp(24px, 3vw, 42px);
  box-shadow: 0 28px 80px rgba(22,28,44,.08);
}
.hero-panel::before { height: 5px; background: linear-gradient(90deg,var(--studio-lime),var(--aqua),var(--studio-violet),var(--studio-orange)); }
.hero-panel--paper { background-color: #f1f0e9; color: var(--ink); }
.hero-panel--paper .lede, .hero-panel--paper .muted { color: #4c5360; }
.hero-panel--paper .hero-title { position: relative; z-index: 2; }
.hero-title, .hero-title--wide, .hero-panel--split .hero-title, .hero-panel--split .display {
  font-size: clamp(3rem, 6.2vw, 6.7rem); line-height: .94; letter-spacing: -.065em;
  font-weight: 800; text-wrap: balance; max-width: 12ch;
}
.hero-panel--split .hero-title--wide { font-size: clamp(2.8rem, 5.2vw, 5.6rem); }
.hero-lede { font-size: clamp(1.1rem, 1.25vw, 1.32rem); line-height: 1.6; max-width: 56ch; }
.hero-actions { gap: 12px; margin-top: 28px; }
.hero-panel--paper .hero-actions .btn:first-child { background: var(--studio-deep); color: #fff; border-color: var(--studio-deep); }
.hero-panel--paper .hero-actions .btn:first-child:hover { background: var(--brand); border-color: var(--brand); }
.hero-panel--paper .chip { background: rgba(255,255,255,.72); border-color: rgba(17,20,29,.1); }
.hero-panel--split { grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); gap: clamp(32px,5vw,80px); }
.hero-panel--split > * { min-width: 0; }
.hero-visual__canvas { opacity: .7; }
.hero--home .hero-panel { background: #151922; background-image: radial-gradient(ellipse at 90% 0%,rgba(117,101,245,.27),transparent 35%), radial-gradient(ellipse at 0% 100%,rgba(20,211,199,.14),transparent 38%); }
.hero--home .hero-panel::after, .hero--joblira .hero-panel::after {
  content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13); right: -120px; bottom: -180px;
  box-shadow: 0 0 0 36px rgba(255,255,255,.025), 0 0 0 72px rgba(255,255,255,.02);
  pointer-events: none;
}
.hero--home .hero-title { max-width: 10ch; }
.hero--home .hero-title .em { color: var(--studio-lime); }
.hero--home .hero-panel > .card {
  border: 1px solid rgba(255,255,255,.65); border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25); transform: rotate(1.5deg);
  transition: transform .4s var(--ease);
}
.hero--home .hero-panel > .card:hover { transform: rotate(0) translateY(-5px); }
.hero--joblira .hero-panel { background: #20223b; background-image: radial-gradient(ellipse at 80% 10%,rgba(117,101,245,.32),transparent 38%), radial-gradient(ellipse at 0% 100%,rgba(216,255,114,.12),transparent 38%); }
.hero--joblira .hero-title .em { color: var(--studio-lime); }
.hero--joblira .hero-panel > .card { border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: rgba(255,255,255,.97)!important; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.hero--about .hero-panel { background: #e9f0ff; background-image: radial-gradient(ellipse at 94% 12%,rgba(117,101,245,.16),transparent 34%), radial-gradient(ellipse at 0% 100%,rgba(216,255,114,.28),transparent 38%); }
.hero--about .em { color: #4d40cc; }
.hero--services .hero-panel { background: #e5ffef; background-image: radial-gradient(ellipse at 90% 12%,rgba(20,160,117,.18),transparent 36%), radial-gradient(ellipse at 0% 100%,rgba(216,255,114,.5),transparent 42%); }
.hero--services .em { color: #0c765d; }
.hero--products .hero-panel { background: #fff0e7; background-image: radial-gradient(ellipse at 90% 8%,rgba(255,131,92,.2),transparent 34%), radial-gradient(ellipse at 0% 100%,rgba(117,101,245,.12),transparent 40%); }
.hero--products .em { color: #d44f2e; }
.hero--contact .hero-panel { background: #e7e4ff; background-image: radial-gradient(ellipse at 92% 10%,rgba(117,101,245,.22),transparent 38%), radial-gradient(ellipse at 0% 100%,rgba(20,211,199,.2),transparent 40%); }
.hero--contact .em { color: #4d40cc; }
.hero--about .hero-panel, .hero--services .hero-panel, .hero--products .hero-panel, .hero--contact .hero-panel { padding-right: clamp(28px, 5vw, 72px); }
.hero--about .hero-title, .hero--services .hero-title, .hero--products .hero-title, .hero--contact .hero-title { max-width: 10.5ch; }
.hero-art {
  position: absolute; z-index: 1; right: 3.5%; top: 11%; bottom: 9%;
  width: 42%; min-height: 280px; overflow: visible;
  border-radius: 30px; perspective: 1200px; pointer-events: none;
}
.hero-art__photo {
  position: absolute; inset: 4% 4% 5% 8%; width: 88%; height: 91%;
  object-fit: cover; border-radius: 28px; box-shadow: var(--studio-shadow);
  transform: rotate(2deg); border: 8px solid rgba(255,255,255,.72);
}
.hero-art__glass {
  position: absolute; z-index: 2; background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.95); border-radius: 18px;
  box-shadow: 0 22px 55px rgba(27,31,50,.17); backdrop-filter: blur(14px);
  color: #171a20; padding: 16px 18px; max-width: 240px;
}
.hero-art__glass--top { top: 4%; left: -2%; transform: rotate(-5deg); }
.hero-art__glass--bottom { right: -1%; bottom: 4%; transform: rotate(4deg); }
.hero-art__label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #636b78; font-weight: 800; }
.hero-art__title { display: block; font-size: 1.05rem; line-height: 1.2; font-weight: 800; margin-top: 5px; }
.hero-art__mini { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #4d5665; font-size: .77rem; }
.hero-art__dot { width: 8px; height: 8px; border-radius: 50%; background: #21a77a; box-shadow: 0 0 0 4px rgba(33,167,122,.12); }
.hero-art__orb { position:absolute; width:92px; height:92px; right:0; top:0; border-radius:28px; background:var(--studio-lime); transform:rotate(14deg); box-shadow:0 18px 36px rgba(17,20,29,.12); }
.hero-art__orb::after { content:'✳'; display:grid; place-items:center; height:100%; font-size:3rem; color:#171a20; }
.hero--about .hero-panel > :not(.hero-visual__canvas):not(.hero-art),
.hero--services .hero-panel > :not(.hero-visual__canvas):not(.hero-art),
.hero--products .hero-panel > :not(.hero-visual__canvas):not(.hero-art),
.hero--contact .hero-panel > :not(.hero-visual__canvas):not(.hero-art) { position:relative; z-index:2; max-width:56%; }
.hero--about .hero-panel > .hero-art, .hero--services .hero-panel > .hero-art,
.hero--products .hero-panel > .hero-art, .hero--contact .hero-panel > .hero-art { max-width:none; }
.chip-row { gap: 10px; }
.chip { border-radius: 999px; padding: 8px 12px; font-size: .78rem; font-weight: 700; }
.card, .panel {
  border-radius: 22px; border-color: rgba(23,26,32,.1);
  box-shadow: 0 8px 28px rgba(22,28,44,.035);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
}
.card:hover, .panel:hover { box-shadow: 0 24px 55px rgba(22,28,44,.11); border-color: rgba(117,101,245,.28); }
.card--lift:hover { transform: translateY(-7px) rotate(-.25deg); }
.card .tile { border-radius: 14px; width: 48px; height: 48px; }
.card-title { font-size: clamp(1.15rem,1.25vw,1.4rem); font-weight: 800; letter-spacing: -.035em; }
.card-text { font-size: 1rem; line-height: 1.68; color: #515967; }
.grid { align-items: stretch; }
.grid > .card, .grid > article.card, .grid > a.card { height: 100%; }
.section-illust { border-radius: 24px; overflow: hidden; background: linear-gradient(135deg,#e6ffec,#e9e7ff); }
.section-illust svg { width: 100%; height: auto; }
img[data-lazy], .content-image { border-radius: 24px; }
.content-image { width:100%; object-fit:cover; box-shadow: var(--studio-shadow); }
.fact-row { border-color: rgba(23,26,32,.12); }
.field, input, select, textarea { border-radius: 12px; min-height: 48px; }
textarea { min-height: 150px; }
.site-footer { background: #141720; color: #f8f7f3; border-radius: 34px 34px 0 0; margin-top: 30px; }
.site-footer .footer-desc, .site-footer .muted { color: #c4c8d1; }
.site-footer a { color: #f8f7f3; text-decoration-color: rgba(248,247,243,.3); }
.site-footer a:hover { color: var(--studio-lime); }
.site-footer .footer-bottom { border-color: rgba(255,255,255,.14); }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; }
.reveal { transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1); }
.js .reveal { will-change: opacity, transform; }
.hero-art__photo { animation: artFloat 8s ease-in-out infinite; }
.hero-art__glass--top { animation: glassFloat 7s ease-in-out infinite; }
.hero-art__glass--bottom { animation: glassFloat 8s ease-in-out infinite reverse; }
@keyframes artFloat { 0%,100% { transform:rotate(2deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-8px); } }
@keyframes glassFloat { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
@media (hover:hover) and (pointer:fine) {
  .hero-art { transition: transform .35s ease; }
  .hero-art:hover { filter: drop-shadow(0 12px 24px rgba(22,28,44,.08)); }
  .card--link:hover .arrow { transform: translateX(5px); }
}
@media (max-width: 960px) {
  .hero-panel--split { grid-template-columns: minmax(0,1fr); }
  .hero--home .hero-panel > .card, .hero--joblira .hero-panel > .card { max-width: 720px; width:100%; margin-inline:auto; }
  .hero-title, .hero-title--wide, .hero-panel--split .hero-title, .hero-panel--split .display { font-size: clamp(2.8rem,8vw,5rem); }
  .hero-art { right: 2%; width: 38%; }
}
@media (max-width: 720px) {
  .hero { padding-top: 0; }
  .hero .shell { width:100%; }
  .hero-panel { min-height: auto; padding: 36px 22px 30px; border-radius: 0 0 26px 26px; }
  .hero--home .hero-panel, .hero--joblira .hero-panel { padding: 34px 22px 28px; }
  .hero-title, .hero-title--wide, .hero-panel--split .hero-title, .hero-panel--split .display,
  .hero--about .hero-title, .hero--services .hero-title, .hero--products .hero-title, .hero--contact .hero-title {
    font-size: clamp(2.65rem, 11.2vw, 4.25rem); line-height: .96; max-width: 12ch;
  }
  .hero-lede { font-size: 1.05rem; }
  .hero--about .hero-panel > :not(.hero-visual__canvas):not(.hero-art),
  .hero--services .hero-panel > :not(.hero-visual__canvas):not(.hero-art),
  .hero--products .hero-panel > :not(.hero-visual__canvas):not(.hero-art),
  .hero--contact .hero-panel > :not(.hero-visual__canvas):not(.hero-art) { max-width: 100%; }
  .hero-art {
    position: relative; inset: auto; width: 100%; height: 300px; min-height: 300px;
    margin-top: 28px; display:block;
  }
  .hero-art__photo { inset: 4% 7% 4% 7%; width:86%; height:92%; }
  .hero-art__glass { padding:12px 13px; max-width:190px; }
  .hero-art__glass--top { left:0; }
  .hero-art__glass--bottom { right:0; }
  .hero-art__orb { width:64px; height:64px; border-radius:20px; }
  .hero-art__orb::after { font-size:2.2rem; }
  .hero-actions { display:flex; flex-wrap:wrap; }
  .hero-actions .btn { flex:1 1 170px; }
  .band { padding-block: 68px; }
  .band--flush-top { padding-top: 34px; }
  .section-head .h1, .section-head h2 { font-size: clamp(2.1rem,8vw,3.2rem); }
  .grid-2, .grid-3, .grid-4, .split, .split--text-first { grid-template-columns:minmax(0,1fr); }
  .site-footer { border-radius: 24px 24px 0 0; }
  .footer-top { grid-template-columns: minmax(0,1fr); gap:32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art__photo, .hero-art__glass--top, .hero-art__glass--bottom { animation:none !important; }
}


/* New editorial pages: insights, careers and readable legal layouts. */
.hero--insights .hero-panel {
  background: #e7e7ff;
  background-image: radial-gradient(ellipse at 90% 10%,rgba(117,101,245,.23),transparent 38%),radial-gradient(ellipse at 0% 100%,rgba(216,255,114,.36),transparent 42%);
}
.hero--insights .em { color:#5142d0; }
.hero--insights .hero-panel > :not(.insights-hero-art) { position:relative; z-index:2; max-width:52%; }
.insights-hero-art { position:absolute; z-index:1; right:4%; top:8%; bottom:8%; width:42%; overflow:hidden; }
.insights-orbit { position:absolute; border:1px solid rgba(81,66,208,.22); border-radius:50%; aspect-ratio:1; }
.insights-orbit--one { width:84%; top:3%; right:1%; box-shadow:0 0 0 24px rgba(81,66,208,.035),0 0 0 52px rgba(81,66,208,.025); }
.insights-orbit--two { width:54%; bottom:2%; left:0; border-color:rgba(20,160,117,.3); }
.insights-star { position:absolute; top:13%; right:12%; display:grid; place-items:center; width:100px; height:100px; border-radius:28px; background:var(--studio-lime); font-size:3.6rem; color:var(--studio-deep); transform:rotate(12deg); box-shadow:0 20px 40px rgba(17,20,29,.12); animation:glassFloat 6s ease-in-out infinite; }
.insights-note { position:absolute; display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:18px; background:rgba(255,255,255,.88); box-shadow:var(--studio-shadow); max-width:240px; }
.insights-note span { font-size:.68rem; letter-spacing:.12em; font-weight:800; color:#676d7b; }
.insights-note strong { font-size:1.25rem; line-height:1.1; letter-spacing:-.04em; }
.insights-note--a { top:32%; left:0; transform:rotate(-5deg); }
.insights-note--b { bottom:7%; right:2%; transform:rotate(4deg); }
.insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.insight-card { background:#fff; border:1px solid rgba(23,26,32,.09); border-radius:24px; overflow:hidden; box-shadow:0 8px 30px rgba(22,28,44,.04); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.insight-card:hover { transform:translateY(-7px); box-shadow:0 24px 55px rgba(22,28,44,.12); }
.insight-card__image { height:230px; position:relative; overflow:hidden; background:#e9e7ff; }
.insight-card__image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(15,18,29,.55)); }
.insight-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.insight-card:hover .insight-card__image img { transform:scale(1.06); }
.insight-card__image span { position:absolute; z-index:1; left:18px; bottom:17px; color:white; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.insight-card__body { padding:24px; }
.insight-meta { font-size:.78rem; color:#6b7280; font-weight:700; }
.insight-card__body h2 { font-size:clamp(1.35rem,1.7vw,1.8rem); line-height:1.1; letter-spacing:-.045em; margin-top:13px; }
.insight-card__body > p:not(.insight-meta) { margin-top:12px; color:#515967; line-height:1.65; }
.text-link { display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-weight:800; color:var(--brand); }
.text-link span { transition:transform .2s ease; }
.text-link:hover span { transform:translate(3px,-3px); }
.insights-bottom,.closing-panel { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:clamp(28px,4vw,50px); margin-top:clamp(44px,6vw,76px); border-radius:28px; background:#171a22; color:#fff; }
.insights-bottom .eyebrow,.closing-panel .eyebrow { color:var(--studio-lime); }
.insights-bottom .h2,.closing-panel .h1 { max-width:15ch; }
.hero--careers .hero-panel { background:#fff0e5; background-image:radial-gradient(ellipse at 90% 8%,rgba(255,131,92,.24),transparent 38%),radial-gradient(ellipse at 0% 100%,rgba(216,255,114,.34),transparent 42%); }
.hero--careers .em { color:#d44f2e; }
.hero--careers .hero-panel > :not(.careers-art) { position:relative; z-index:2; max-width:54%; }
.careers-art { position:absolute; z-index:1; right:4%; top:9%; bottom:8%; width:42%; min-height:300px; }
.careers-art__sun { position:absolute; width:230px; height:230px; top:8%; right:7%; border-radius:50%; background:var(--studio-lime); }
.careers-art__shape { position:absolute; border-radius:35px; box-shadow:0 24px 55px rgba(22,28,44,.13); }
.careers-art__shape--one { width:60%; height:56%; left:5%; top:23%; transform:rotate(-10deg); background:linear-gradient(145deg,#7565f5,#a9a0ff); }
.careers-art__shape--two { width:56%; height:54%; right:0; bottom:3%; transform:rotate(8deg); background:linear-gradient(145deg,#171a22,#323746); border:8px solid rgba(255,255,255,.65); }
.careers-art__label { position:absolute; left:0; top:8%; padding:12px 16px; background:#fff; border-radius:999px; font-weight:800; font-size:.78rem; box-shadow:0 10px 25px rgba(22,28,44,.1); }
.careers-art__label span { color:#7565f5; padding-inline:3px; }
.careers-art__card { position:absolute; z-index:2; right:6%; top:38%; padding:19px 22px; background:var(--studio-lime); color:#171a22; border-radius:18px; box-shadow:0 20px 45px rgba(22,28,44,.18); transform:rotate(4deg); }
.careers-art__card b,.careers-art__card small { display:block; }
.careers-art__card b { font-size:1.2rem; letter-spacing:-.04em; }
.careers-art__card small { margin-top:4px; }
.career-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:17px; font-size:1.7rem; font-weight:800; }
.career-icon--lime { background:#e7ffb4; color:#24310a; }
.career-icon--violet { background:#e8e5ff; color:#4b3cc3; }
.career-icon--orange { background:#ffebe2; color:#b84827; }
.careers-status { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; margin-top:clamp(42px,6vw,76px); padding:clamp(24px,4vw,44px); background:#fff; border:1px solid rgba(23,26,32,.1); border-radius:26px; box-shadow:0 15px 40px rgba(22,28,44,.06); }
.careers-status__mark { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; background:var(--studio-lime); font-size:1.8rem; }
.hero--privacy .hero-panel { background:#e6f6ed; background-image:radial-gradient(ellipse at 90% 8%,rgba(20,160,117,.16),transparent 38%),radial-gradient(ellipse at 0% 100%,rgba(216,255,114,.34),transparent 40%); }
.hero--terms .hero-panel { background:#f0eaff; background-image:radial-gradient(ellipse at 90% 8%,rgba(117,101,245,.18),transparent 38%),radial-gradient(ellipse at 0% 100%,rgba(255,131,92,.14),transparent 40%); }
.legal-hero { min-height:400px; padding-block:clamp(40px,5vw,68px); }
.legal-hero .hero-title { max-width:11ch; }
.legal-hero .hero-lede { max-width:55ch; }
.legal-hero__symbol { position:absolute; width:190px; height:190px; right:11%; top:50%; transform:translateY(-50%) rotate(5deg); display:grid; place-items:center; color:#0b8c68; border-radius:38% 62% 54% 46% / 48% 38% 62% 52%; background:rgba(255,255,255,.48); box-shadow:0 20px 50px rgba(22,28,44,.08); }
.legal-hero__symbol svg { width:72%; }
.legal-hero__symbol--terms { color:#5b4ad5; transform:translateY(-50%) rotate(-6deg); border-radius:28px; }
.legal-layout { display:grid; grid-template-columns:220px minmax(0,760px); justify-content:space-between; gap:clamp(38px,7vw,100px); align-items:start; }
.legal-index { position:sticky; top:110px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:24px; background:#eeece5; border-radius:20px; }
.legal-index .eyebrow { margin-bottom:5px; }
.legal-index a { font-size:.9rem; color:#525a66; font-weight:600; }
.legal-index a:hover { color:var(--brand); }
.legal-copy { min-width:0; }
.legal-updated { font-size:.83rem; font-weight:700; color:#6a7280; padding-bottom:24px; border-bottom:1px solid var(--line); }
.legal-copy section { padding:28px 0; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.legal-copy h2 { font-size:clamp(1.35rem,2vw,1.75rem); letter-spacing:-.04em; line-height:1.2; }
.legal-copy p { margin-top:13px; color:#4d5562; line-height:1.8; }
.legal-copy a { color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.legal-note { padding:22px; margin-top:24px; background:#efede7; border-radius:16px; font-size:.9rem; }
@media (max-width:960px) {
 .insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .legal-layout { grid-template-columns:180px minmax(0,1fr); gap:28px; }
 .legal-hero__symbol { right:6%; width:155px; height:155px; }
}
@media (max-width:720px) {
 .hero--insights .hero-panel > :not(.insights-hero-art),.hero--careers .hero-panel > :not(.careers-art) { max-width:100%; }
 .insights-hero-art,.careers-art { position:relative; inset:auto; width:100%; height:280px; min-height:280px; margin-top:28px; }
 .insights-star { width:68px; height:68px; border-radius:20px; font-size:2.4rem; }
 .insights-note { padding:13px 15px; max-width:190px; }
 .insights-note strong { font-size:1.05rem; }
 .insight-grid { grid-template-columns:minmax(0,1fr); }
 .insight-card__image { height:220px; }
 .insights-bottom,.closing-panel { align-items:flex-start; flex-direction:column; }
 .careers-status { grid-template-columns:auto minmax(0,1fr); }
 .careers-status > .btn { grid-column:1/-1; justify-self:start; }
 .legal-hero { min-height:0; }
 .legal-hero__symbol { position:relative; inset:auto; transform:none; margin:28px 0 0; width:110px; height:110px; }
 .legal-layout { grid-template-columns:minmax(0,1fr); }
 .legal-index { position:relative; top:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .legal-index .eyebrow { grid-column:1/-1; }
 .legal-copy section { padding:24px 0; }
}

.reading-progress {
  position: fixed; z-index: 9999; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--studio-lime), var(--aqua), var(--studio-violet), var(--studio-orange));
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

@media (min-width:961px) {
  .nav-links { gap: clamp(10px,1.35vw,20px); }
  .nav-link { font-size: .9rem; }
  .nav-cta .btn { padding-inline:18px; }
  .hero--privacy .legal-hero > :not(.legal-hero__symbol),
  .hero--terms .legal-hero > :not(.legal-hero__symbol) { max-width:62%; position:relative; z-index:2; }
}
@media (max-width:960px) {
  .hero--privacy .legal-hero > :not(.legal-hero__symbol),
  .hero--terms .legal-hero > :not(.legal-hero__symbol) { max-width:100%; }
}


/* ============================================================
   FULL-VIEWPORT HERO SYSTEM — VGS brand refresh
   Real photography replaces decorative placeholder artwork.
   ============================================================ */
:root {
  --vgs-blue: #1B3FD8;
  --vgs-blue-deep: #1430A8;
  --vgs-teal: #14D3C7;
  --vgs-ink: #171A20;
  --vgs-paper: #FAF8F2;
  --vgs-peach: #F4A08E;
}
html { scroll-behavior: smooth; }
body { background: var(--vgs-paper); color: var(--vgs-ink); }
.btn, .nav-cta .btn, .button, button[type="submit"] {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:hover, .nav-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,63,216,.18); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--vgs-teal); outline-offset: 4px; }

/* Each page gets a spacious, full-screen opening with consistent margins. */
.hero {
  min-height: calc(100svh - 94px);
  display: flex;
  align-items: center;
  padding: clamp(34px, 5.5vw, 84px) 0 clamp(54px, 7vw, 104px);
  overflow: clip;
  isolation: isolate;
}
.hero > .shell {
  width: min(1440px, calc(100% - clamp(36px, 8vw, 144px)));
  margin-inline: auto;
}
.hero .hero-panel {
  min-height: min(690px, calc(100svh - 190px));
  border-radius: clamp(24px, 3vw, 42px);
  padding: clamp(34px, 6.2vw, 92px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  border: 1px solid rgba(23,26,32,.07);
  box-shadow: 0 28px 80px rgba(23,26,32,.07);
  background: #fffdf9;
}
.hero .hero-panel--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
.hero .hero-title {
  font-size: clamp(2.8rem, 5.5vw, 5.8rem);
  line-height: .99;
  letter-spacing: -.065em;
  max-width: 13ch;
  text-wrap: balance;
  position: relative;
  z-index: 2;
}
.hero .hero-title--wide { max-width: 15ch; }
.hero .hero-lede, .hero .lede {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.65;
  max-width: 56ch;
  position: relative;
  z-index: 2;
}
.hero .eyebrow, .hero .actions { position: relative; z-index: 2; }
.hero .em { color: var(--vgs-blue); }
.hero .hero-visual__canvas,
.hero .insights-hero-art,
.hero .careers-art { display: none !important; }

/* Photo panels are page-specific and use real, relevant photography. */
.hero .hero-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 7%;
  right: 4%;
  bottom: 7%;
  width: 43%;
  border-radius: 28px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 70px rgba(23,26,32,.16);
  animation: vgs-photo-arrive .85s cubic-bezier(.2,.7,.2,1) both;
}
.hero .hero-panel > * { position: relative; z-index: 1; }
.hero .hero-panel:not(.hero-panel--split) { padding-right: 48%; }
.hero--home .hero-panel::after {
  background-image: linear-gradient(145deg,rgba(20,211,199,.06),rgba(27,63,216,.08)),url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1400&q=88');
  background-position: center;
}
.hero--about .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1400&q=88');
  background-position: center;
}
.hero--contact .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=88');
}
.hero--joblira .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1400&q=88');
}
.hero--products .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=88');
}
.hero--services .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1400&q=88');
}
.hero--insights .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1400&q=88');
}
.hero--careers .hero-panel::after {
  background-image: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1400&q=88');
}
.hero--privacy .hero-panel::after, .hero--terms .hero-panel::after { display: none; }
.hero--joblira .hero-panel { background: #171A20; color: #fff; }
.hero--joblira .hero-title, .hero--joblira .hero-lede { color: #fff; }
.hero--joblira .em { color: var(--vgs-teal); }
.hero--joblira .hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 15%,rgba(27,63,216,.24),transparent 42%);
}
.hero--joblira .hero-panel::after { border: 5px solid rgba(20,211,199,.22); }
.hero--privacy .hero-panel, .hero--terms .hero-panel { background: #edf0ff; }
.hero--privacy .em, .hero--terms .em { color: var(--vgs-blue); }

/* Brand colour is carried consistently through buttons, links and accents. */
.btn:not(.btn--ghost), .nav-cta .btn, .hero .btn:not(.btn--ghost) {
  background: var(--vgs-blue);
  border-color: var(--vgs-blue);
  color: #fff;
}
.btn:not(.btn--ghost):hover, .nav-cta .btn:hover { background: var(--vgs-blue-deep); }
.nav-link[aria-current="page"], .nav-link:hover, .footer a:hover { color: var(--vgs-blue); }
::selection { background: rgba(20,211,199,.35); color: var(--vgs-ink); }

@keyframes vgs-photo-arrive {
  from { opacity: 0; transform: translate3d(18px,12px,0) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@media (max-width: 900px) {
  .hero { min-height: calc(100svh - 72px); padding: 28px 0 48px; }
  .hero > .shell { width: calc(100% - 32px); }
  .hero .hero-panel, .hero .hero-panel--split {
    min-height: min(800px, calc(100svh - 130px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: clamp(26px, 6vw, 48px);
    gap: 18px;
  }
  .hero .hero-title { font-size: clamp(2.55rem, 9vw, 4.6rem); max-width: 12ch; }
  .hero .hero-lede, .hero .lede { max-width: 100%; }
  .hero .hero-panel::after {
    position: relative; top: auto; right: auto; bottom: auto;
    display: block; width: 100%; height: clamp(220px, 40vh, 340px);
    min-height: 220px; margin-top: auto; flex: 0 0 auto;
    border-radius: 20px;
  }
  .hero .hero-panel:not(.hero-panel--split) { padding-right: clamp(26px, 6vw, 48px); }
  .hero--privacy .hero-panel::after, .hero--terms .hero-panel::after { display:none; }
}
@media (max-width: 480px) {
  .hero { padding-top: 16px; }
  .hero > .shell { width: calc(100% - 24px); }
  .hero .hero-panel, .hero .hero-panel--split { padding: 24px 20px; border-radius: 22px; }
  .hero .hero-title { font-size: clamp(2.35rem, 11vw, 3.25rem); }
  .hero .hero-panel::after { height: 230px; min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-panel::after { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Sticky site header */
.site-header, header.site-header, .site-nav, .navbar, #site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}
.site-header, header.site-header {
  background: rgba(250,248,242,.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(23,26,32,.08);
}

/* Refined mobile navigation drawer */
.mobile-menu {
  inset: 0 0 0 auto; width: min(100%, 520px); height: 100dvh; min-height: 100vh;
  padding: max(24px, env(safe-area-inset-top)) clamp(22px, 5vw, 40px) max(24px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; display: flex;
  background: radial-gradient(ellipse at 100% 0%, rgba(20,211,199,.15), transparent 42%), radial-gradient(ellipse at 0% 80%, rgba(27,63,216,.08), transparent 40%), var(--paper);
  border-left: 1px solid rgba(23,26,32,.08); box-shadow: -28px 0 90px rgba(23,26,32,.12);
  transform: translate3d(32px,0,0); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility .48s; will-change: transform, opacity;
}
.mobile-menu.open { transform: translate3d(0,0,0); opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-head { min-height: 48px; height: auto; margin-bottom: clamp(24px,5vh,46px); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mobile-menu-kicker { color: #1B3FD8; font: 600 .72rem/1.2 var(--font-mono,monospace); letter-spacing: .18em; text-transform: uppercase; }
.mobile-head .icon-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; border-color: rgba(23,26,32,.12); transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .2s ease, color .2s ease; }
.mobile-head .icon-btn:hover { transform: rotate(90deg); background: #1B3FD8; color: #fff; }
.mobile-links { gap: 5px; }
.mobile-links a {
  position: relative; min-height: 62px; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px;
  font-size: clamp(1.22rem,4vw,1.65rem); font-weight: 600; letter-spacing: -.045em; justify-content: space-between;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), color .2s ease, background-color .2s ease, border-color .2s ease;
}
.mobile-links a .mono { font-size: .72rem; letter-spacing: .1em; color: #8a91a0; }
.mobile-links a::after { content: "↗"; margin-left: auto; color: #1B3FD8; opacity: 0; transform: translate(-6px,5px); transition: opacity .22s ease, transform .22s ease; }
.mobile-links a:hover, .mobile-links a[aria-current="page"] { color: #1B3FD8; background: rgba(27,63,216,.055); border-color: rgba(27,63,216,.1); }
.mobile-links a:hover { transform: translateX(4px); }
.mobile-links a:hover::after, .mobile-links a[aria-current="page"]::after { opacity: 1; transform: translate(0,0); }
.mobile-links a[aria-current="page"] { box-shadow: inset 3px 0 0 #1B3FD8; }
.mobile-menu.open .mobile-links a { animation: mobile-link-in .42s both; }
.mobile-menu.open .mobile-links a:nth-child(1) { animation-delay: .04s; }
.mobile-menu.open .mobile-links a:nth-child(2) { animation-delay: .08s; }
.mobile-menu.open .mobile-links a:nth-child(3) { animation-delay: .12s; }
.mobile-menu.open .mobile-links a:nth-child(4) { animation-delay: .16s; }
.mobile-menu.open .mobile-links a:nth-child(5) { animation-delay: .20s; }
.mobile-menu.open .mobile-links a:nth-child(6) { animation-delay: .24s; }
.mobile-foot { margin-top: auto; padding-top: 28px; gap: 12px; }
.mobile-foot .btn { min-height: 52px; border-radius: 14px; }
@keyframes mobile-link-in { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@media (max-width: 520px) { .mobile-menu { width: 100%; border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-links a, .mobile-head .icon-btn { transition: none !important; animation: none !important; } }

/* Ensure the open mobile drawer and its close control sit above sticky navigation. */
.mobile-menu { z-index: 2001 !important; }
.mobile-menu .mobile-head { position: relative; z-index: 2; }
.mobile-menu #menu-close { position: relative; z-index: 3; flex: 0 0 46px; cursor: pointer; }

/* Homepage hero: editorial, photographic, warm and brand-led */
.hero.hero--home{min-height:calc(100svh - 76px);padding:clamp(24px,4.4vh,52px) 0 clamp(26px,4vh,44px);background:#FAF8F2}
.hero--home>.shell{width:min(1460px,calc(100% - clamp(28px,7vw,112px)))}
.home-hero{position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;gap:clamp(28px,5vw,76px);min-height:clamp(540px,70svh,740px);padding:clamp(30px,4.2vw,64px) clamp(8px,1.6vw,24px)}
.home-hero__copy{position:relative;z-index:3;max-width:650px;animation:home-copy-in .7s cubic-bezier(.2,.75,.25,1) both}
.home-hero__eyebrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:clamp(22px,3vh,34px);font:600 .72rem/1.3 var(--font-mono,monospace);letter-spacing:.13em;color:#35415a}
.home-hero__eyebrow i{width:9px;height:9px;border-radius:50%;background:#14D3C7;box-shadow:0 0 0 5px rgba(20,211,199,.13)}
.home-hero__title{max-width:11ch;margin:0;color:#171A20;font-size:clamp(3.35rem,6.1vw,6.6rem);font-weight:650;letter-spacing:-.075em;line-height:.96;text-wrap:balance}
.home-hero__title span{color:#1B3FD8}
.home-hero__lede{max-width:48ch;margin:clamp(22px,3vh,30px) 0 0;color:#515968;font-size:clamp(1.05rem,1.3vw,1.24rem);line-height:1.72}
.home-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:clamp(26px,3.4vh,38px)}
.home-hero__actions .btn{min-height:54px;padding:0 25px;border-radius:12px;box-shadow:0 12px 26px rgba(27,63,216,.16)}
.home-hero__text-link{display:inline-flex;align-items:center;gap:12px;font-weight:650;color:#171A20}
.home-hero__text-link span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(23,26,32,.18);border-radius:50%;transition:transform .25s ease,background .25s ease,color .25s ease}
.home-hero__text-link:hover span{transform:translate(3px,-3px);background:#1B3FD8;color:#fff}
.home-hero__proof{display:flex;align-items:center;gap:13px;margin-top:clamp(32px,5vh,56px);padding-top:22px;border-top:1px solid rgba(23,26,32,.12);max-width:470px}
.home-hero__proof-mark{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:#1B3FD8;color:#fff;font-weight:800;font-size:1.15rem}
.home-hero__proof strong,.home-hero__proof small{display:block}
.home-hero__proof strong{font-size:.88rem;letter-spacing:-.015em;color:#222630}
.home-hero__proof small{margin-top:4px;font-size:.78rem;line-height:1.45;color:#747b87}
.home-hero__visual{position:relative;min-width:0;height:clamp(430px,62vh,660px);isolation:isolate}
.home-hero__photo{position:absolute;inset:3% 4% 4% 6%;overflow:hidden;border-radius:clamp(26px,3vw,42px);background:#e6e9e4;box-shadow:0 30px 80px rgba(24,36,58,.16)}
.home-hero__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(27,63,216,.05),transparent 44%,rgba(20,211,199,.12));pointer-events:none}
.home-hero__photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;animation:home-photo-in 1s cubic-bezier(.2,.75,.25,1) both}
.home-hero__photo-wash{position:absolute;z-index:-1;inset:0 0 0 12%;border-radius:36px;background:rgba(20,211,199,.16);transform:rotate(5deg) scale(.93);animation:home-wash-in .9s .12s ease-out both}
.home-hero__float{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:rgba(255,253,249,.94);box-shadow:0 18px 44px rgba(20,29,49,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:home-float 6s ease-in-out infinite}
.home-hero__float small,.home-hero__float strong{display:block}
.home-hero__float small{font:600 .61rem/1.3 var(--font-mono,monospace);letter-spacing:.08em;color:#747b87}
.home-hero__float strong{margin-top:5px;font-size:.9rem;letter-spacing:-.025em;color:#171A20}
.home-hero__float--top{top:12%;left:-5%}
.home-hero__float--bottom{right:-2%;bottom:13%;animation-delay:-2.8s}
.home-hero__float-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#e8edff;color:#1B3FD8;font-size:1.5rem}
.home-hero__status{width:10px;height:10px;flex:none;border-radius:50%;background:#14D3C7;box-shadow:0 0 0 5px rgba(20,211,199,.14)}
.home-hero__corner{position:absolute;left:9%;bottom:8%;display:flex;align-items:center;gap:16px;color:#fff;font:600 .64rem/1 var(--font-mono,monospace);letter-spacing:.14em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.home-hero__corner b{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.75);border-radius:50%;font-weight:500}
.home-hero__bottomline{display:flex;align-items:center;gap:clamp(16px,3vw,42px);padding:15px clamp(8px,1.6vw,24px) 0;border-top:1px solid rgba(23,26,32,.12);font:600 .65rem/1.4 var(--font-mono,monospace);letter-spacing:.13em;color:#697080}
.home-hero__bottomline>span:first-child{color:#1B3FD8}
.home-hero__scroll{display:flex;align-items:center;gap:10px;margin-left:auto}
.home-hero__scroll i{font-size:1rem;font-style:normal;color:#1B3FD8;animation:home-scroll 1.6s ease-in-out infinite}
@keyframes home-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-photo-in{from{opacity:.3;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
@keyframes home-wash-in{from{opacity:0;transform:rotate(1deg) scale(.88)}to{opacity:1;transform:rotate(5deg) scale(.93)}}
@keyframes home-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes home-scroll{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(max-width:900px){.hero.hero--home{min-height:auto;padding:20px 0 28px}.hero--home>.shell{width:calc(100% - 32px)}.home-hero{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding:26px 0 32px}.home-hero__copy{max-width:760px}.home-hero__title{max-width:12ch;font-size:clamp(3.2rem,9vw,5.5rem)}.home-hero__visual{height:clamp(350px,58vw,520px);margin:0 8px}.home-hero__photo{inset:3% 4% 4% 5%}.home-hero__float--top{left:-3%;top:10%}.home-hero__float--bottom{right:-2%;bottom:10%}.home-hero__proof{margin-top:30px}}
@media(max-width:520px){.hero--home>.shell{width:calc(100% - 24px)}.home-hero{gap:24px;padding:23px 0 26px}.home-hero__eyebrow{font-size:.59rem;letter-spacing:.08em;margin-bottom:20px}.home-hero__title{font-size:clamp(2.8rem,12vw,4.1rem);letter-spacing:-.07em}.home-hero__lede{font-size:1rem;line-height:1.65;margin-top:18px}.home-hero__actions{gap:16px;align-items:flex-start;flex-direction:column;margin-top:24px}.home-hero__actions .btn{min-height:50px}.home-hero__proof{margin-top:28px;padding-top:18px}.home-hero__visual{height:360px;margin:0 3px}.home-hero__photo{inset:5% 3% 5% 5%;border-radius:24px}.home-hero__photo-wash{border-radius:24px}.home-hero__float{gap:9px;padding:11px 12px;border-radius:13px}.home-hero__float small{font-size:.52rem}.home-hero__float strong{font-size:.75rem}.home-hero__float-icon{width:32px;height:32px;font-size:1.2rem}.home-hero__float--top{top:9%;left:-2%}.home-hero__float--bottom{right:-2%;bottom:9%}.home-hero__bottomline{gap:12px;font-size:.53rem;letter-spacing:.07em;flex-wrap:wrap}.home-hero__bottomline>span:nth-child(2){display:none}.home-hero__scroll{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.home-hero__copy,.home-hero__photo img,.home-hero__photo-wash,.home-hero__float,.home-hero__scroll{animation:none!important}}

/* Align homepage hero to the same shared shell/grid as every following section. */
.hero.hero--home { box-sizing: border-box; width: 100%; }
.hero--home > .shell {
  width: 100%;
  max-width: var(--shell, 1480px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 72px));
  box-sizing: border-box;
}
.home-hero {
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0;
  gap: clamp(26px, 4vw, 64px);
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
}
.home-hero__copy, .home-hero__visual { min-width: 0; }
.home-hero__visual { width: 100%; }
.home-hero__photo { inset: 3% 3% 4% 4%; }
.home-hero__bottomline { padding-inline: 0; }
@media (max-width: 900px) {
  .hero--home > .shell {
    width: 100%;
    padding-inline: var(--gutter, 24px);
  }
  .home-hero { padding-inline: 0; gap: 28px; }
  .home-hero__visual { width: calc(100% - 12px); margin-inline: 6px; }
  .home-hero__photo { inset: 3% 3% 4% 3%; }
  .home-hero__float--top { left: -2%; }
  .home-hero__float--bottom { right: -2%; }
}
@media (max-width: 520px) {
  .hero--home > .shell {
    width: 100%;
    padding-inline: var(--gutter, 20px);
  }
  .home-hero { padding-inline: 0; }
  .home-hero__visual { width: calc(100% - 4px); margin-inline: 2px; }
  .home-hero__photo { inset: 4% 2% 5% 2%; }
  .home-hero__bottomline { padding-inline: 0; }
}


/* Homepage hero: intentional mobile layout, not a compressed desktop composition. */
.hero.hero--home {
  min-height: 0;
  padding-block: clamp(30px, 5vw, 64px) clamp(26px, 4vw, 44px);
  overflow: clip;
}
.hero--home > .shell {
  width: 100%;
  max-width: var(--shell, 1480px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 72px));
  box-sizing: border-box;
}
.home-hero {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  min-height: 0;
  padding: clamp(22px, 3vw, 44px) 0;
  box-sizing: border-box;
}
.home-hero__copy, .home-hero__visual { min-width: 0; }
.home-hero__copy { max-width: 620px; }
.home-hero__title { max-width: 10.5ch; font-size: clamp(3.1rem, 5.7vw, 6.2rem); line-height: .98; }
.home-hero__visual { width: 100%; height: clamp(400px, 49vw, 620px); margin: 0; }
.home-hero__photo { inset: 0; border-radius: clamp(22px, 2.6vw, 38px); }
.home-hero__photo-wash { inset: 2% -2% -1% 7%; }
.home-hero__float--top { left: -4%; }
.home-hero__float--bottom { right: -3%; }
.home-hero__bottomline { flex-wrap: wrap; padding: 17px 0 0; }

@media (max-width: 900px) {
  .hero.hero--home { padding-block: 28px 30px; }
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 18px 28px;
  }
  .home-hero__copy { max-width: 720px; }
  .home-hero__title { max-width: 12ch; font-size: clamp(3.2rem, 8.5vw, 5.4rem); }
  .home-hero__visual { width: 100%; height: clamp(340px, 56vw, 500px); margin: 0; }
  .home-hero__photo { inset: 0; }
  .home-hero__float--top { left: 16px; top: 16px; }
  .home-hero__float--bottom { right: 16px; bottom: 16px; }
  .home-hero__bottomline { gap: 14px 24px; }
}
@media (max-width: 600px) {
  .hero.hero--home { padding-block: 18px 24px; }
  .hero--home > .shell { padding-inline: clamp(20px, 6vw, 28px); }
  .home-hero { gap: 26px; padding-block: 22px 24px; }
  .home-hero__eyebrow {
    gap: 9px; margin-bottom: 20px; font-size: .62rem;
    letter-spacing: .075em; line-height: 1.6; flex-wrap: wrap;
  }
  .home-hero__title {
    max-width: 11ch;
    font-size: clamp(2.75rem, 11.6vw, 4.25rem);
    line-height: .99; letter-spacing: -.065em;
    overflow-wrap: normal;
  }
  .home-hero__lede { max-width: 39ch; margin-top: 19px; font-size: 1rem; line-height: 1.7; }
  .home-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 15px; margin-top: 25px; }
  .home-hero__actions .btn { width: 100%; min-height: 54px; justify-content: center; }
  .home-hero__text-link { min-height: 44px; align-self: flex-start; }
  .home-hero__proof { align-items: flex-start; gap: 12px; max-width: none; margin-top: 28px; padding-top: 18px; }
  .home-hero__proof-mark { width: 38px; height: 38px; border-radius: 11px; }
  .home-hero__proof strong { font-size: .83rem; line-height: 1.45; }
  .home-hero__proof small { font-size: .78rem; line-height: 1.55; }
  .home-hero__visual { height: clamp(270px, 78vw, 390px); }
  .home-hero__photo { inset: 0; border-radius: 22px; }
  .home-hero__photo-wash { inset: 3% -1% -2% 5%; border-radius: 22px; }
  /* The desktop floating labels compete with the photo on small screens. */
  .home-hero__float { display: none; }
  .home-hero__corner { left: 16px; bottom: 16px; font-size: .58rem; }
  .home-hero__bottomline { gap: 10px 18px; padding-top: 15px; font-size: .57rem; letter-spacing: .07em; }
  .home-hero__bottomline > span:nth-child(2) { display: none; }
  .home-hero__scroll { margin-left: auto; }
}
@media (max-width: 360px) {
  .hero--home > .shell { padding-inline: 18px; }
  .home-hero__title { font-size: clamp(2.55rem, 11vw, 3rem); }
  .home-hero__visual { height: 260px; }
  .home-hero__bottomline { font-size: .51rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__copy, .home-hero__photo img, .home-hero__photo-wash,
  .home-hero__float, .home-hero__scroll { animation: none !important; }
}


/* Vatous homepage visual system: cyan-grey hero, editorial sections and restrained motion. */
.hero.hero--home {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(20,211,199,.17), transparent 34%),
    radial-gradient(ellipse at 12% 84%, rgba(27,63,216,.055), transparent 35%),
    linear-gradient(125deg, #F7FAFB 0%, #EFF4F5 48%, #E5F5F5 100%);
}
.hero--home .home-hero__eyebrow i { box-shadow: 0 0 0 6px rgba(20,211,199,.14); }
.home-section-intro { display:grid; grid-template-columns:minmax(150px,.55fr) minmax(0,1.45fr); gap:clamp(28px,7vw,110px); align-items:start; margin-bottom:clamp(36px,6vw,76px); }
.home-section-intro .chapter-no { padding-top:12px; }
.home-section-intro .chapter-no span, .chapter-no span { color:#1B3FD8; }
.home-section-intro__body { max-width:800px; }
.home-section-intro .h1 { max-width:13ch; margin:0; font-size:clamp(2.5rem,5.2vw,5rem); line-height:.99; letter-spacing:-.065em; }
.home-section-intro .lede { max-width:62ch; margin-top:22px; }
.home-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.home-service-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:340px; padding:clamp(24px,3vw,38px); border:1px solid rgba(28,40,58,.09); border-radius:24px; color:#171A20; background:#fff; text-decoration:none; overflow:hidden; box-shadow:0 8px 28px rgba(30,46,65,.035); transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease,border-color .35s ease; }
.home-service-card:hover { transform:translateY(-5px); border-color:rgba(27,63,216,.2); box-shadow:0 22px 54px rgba(30,46,65,.1); }
.home-service-card--feature { grid-row:span 2; min-height:0; padding:0; background:#F0F7F7; }
.home-service-card__art { position:relative; min-height:290px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#E1F7F5,#EAF0F5 70%,#E3E9FA); }
.home-service-card__art:before,.home-service-card__art:after { content:"";position:absolute;border:1px solid rgba(27,63,216,.12);border-radius:50%;width:290px;height:290px; }
.home-service-card__art:after { width:370px;height:370px;border-color:rgba(20,211,199,.3); }
.mini-browser { position:relative; z-index:1; width:min(76%,370px); border:1px solid rgba(23,26,32,.1); border-radius:13px; overflow:hidden; background:#fff; box-shadow:0 28px 55px rgba(23,45,65,.14); transform:rotate(-3deg); transition:transform .5s cubic-bezier(.2,.75,.25,1); }
.home-service-card:hover .mini-browser { transform:rotate(0) translateY(-4px); }
.mini-browser__bar { height:34px; display:flex; align-items:center; gap:5px; padding:0 12px; background:#F4F6F8; border-bottom:1px solid #E7EAEE; }
.mini-browser__bar i { width:6px;height:6px;border-radius:50%;background:#B8C1CA; }
.mini-browser__bar span { margin-left:auto;font-size:7px;font-weight:700;letter-spacing:.12em;color:#7D8792; }
.mini-browser__body { position:relative; min-height:220px; padding:28px 24px; overflow:hidden; }
.mini-browser__body b { position:relative;z-index:1;display:block;font-size:clamp(2rem,4vw,3.5rem);line-height:.92;letter-spacing:-.075em;color:#171A20; }
.mini-browser__body em { color:#1B3FD8;font-style:normal; }
.mini-browser__line { display:block;width:65%;height:5px;margin-top:17px;border-radius:8px;background:#DDE3E8; }
.mini-browser__line--short { width:43%;margin-top:7px; }
.mini-browser__button { display:block;width:82px;height:23px;margin-top:18px;border-radius:6px;background:#1B3FD8; }
.mini-browser__orb { position:absolute;right:-36px;bottom:-64px;width:160px;height:160px;border-radius:50%;background:linear-gradient(140deg,#14D3C7,#C8F4EE); }
.home-service-card__content { padding:clamp(25px,3vw,38px); }
.home-service-card--feature .home-service-card__content { padding-top:30px; }
.home-card-kicker { display:block;margin-bottom:18px;font:700 .66rem/1.4 var(--font-mono,monospace);letter-spacing:.12em;color:#657181; }
.home-service-card h3 { margin:0;color:#171A20;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.08;letter-spacing:-.05em; }
.home-service-card p { max-width:43ch;margin:14px 0 24px;color:#606A78;font-size:.97rem;line-height:1.7; }
.home-card-link { display:inline-flex;align-items:center;gap:12px;margin-top:auto;font-size:.88rem;font-weight:700;color:#1B3FD8; }
.home-card-link b { display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(27,63,216,.2);border-radius:50%;font-size:1rem;transition:transform .25s ease,background .25s ease,color .25s ease; }
.home-service-card:hover .home-card-link b,.home-card-link:hover b { transform:translate(3px,-3px);background:#1B3FD8;color:white; }
.home-service-card__icon { display:grid;place-items:center;width:58px;height:58px;margin-bottom:35px;border-radius:17px; }
.home-service-card__icon svg { width:31px;height:31px; }
.home-icon--cyan { color:#087D7A;background:#DDF8F3; }
.home-icon--blue { color:#1B3FD8;background:#E8EDFF; }
.home-icon--soft { color:#475B76;background:#EEF2F5; }
.home-icon--dark { color:#fff;background:#202630; }

.home-product { overflow:hidden; }
.home-product__layout { display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(44px,8vw,120px); }
.home-product__copy { max-width:600px; }
.home-product__overline { margin:35px 0 13px;color:#1B3FD8;font-size:.76rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase; }
.home-product__copy .h1 { margin:0;max-width:12ch;font-size:clamp(2.6rem,5vw,4.9rem);line-height:.98;letter-spacing:-.07em; }
.home-product__copy .lede { margin-top:23px; }
.home-product__points { display:grid;gap:12px;margin-top:25px;color:#333D4B;font-size:.9rem;font-weight:600; }
.home-product__points span { display:flex;align-items:center;gap:10px; }
.home-product__points i { display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#DDF8F3;color:#087D7A;font-style:normal;font-size:.75rem; }
.home-product__visual { position:relative;min-height:480px; }
.home-product__image { position:absolute;inset:12px 22px 36px 45px;overflow:hidden;border-radius:28px;background:#DDE8E8; }
.home-product__image:after { content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(27,63,216,.06),transparent 55%,rgba(20,211,199,.22)); }
.home-product__image img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.75,.25,1); }
.home-product__visual:hover .home-product__image img { transform:scale(1.04); }
.joblira-card { position:absolute;z-index:2;left:0;bottom:5px;width:min(76%,365px);padding:22px;border:1px solid rgba(255,255,255,.8);border-radius:19px;background:rgba(255,255,255,.96);box-shadow:0 25px 60px rgba(20,35,55,.17);backdrop-filter:blur(12px);animation:home-card-drift 7s ease-in-out infinite; }
.joblira-card__top,.joblira-card__bottom { display:flex;align-items:center;gap:10px; }
.joblira-mark { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#1B3FD8;color:white;font-weight:800; }
.joblira-card__label { font:700 .58rem/1.3 var(--font-mono,monospace);letter-spacing:.09em;color:#697382; }
.joblira-card__dots { margin-left:auto;color:#9AA3AF;letter-spacing:.12em; }
.joblira-card__title { margin:23px 0 18px;font-size:clamp(1.65rem,3vw,2.35rem);font-weight:750;line-height:.98;letter-spacing:-.06em;color:#171A20; }
.joblira-card__title em { color:#1B3FD8;font-style:normal; }
.joblira-card__chips { display:flex;flex-wrap:wrap;gap:7px;padding-bottom:18px;border-bottom:1px solid #E9EDF1; }
.joblira-card__chips span { padding:6px 9px;border-radius:7px;background:#F0F4F7;color:#55606E;font-size:.65rem;font-weight:650; }
.joblira-card__bottom { padding-top:15px; }
.joblira-card__avatar { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#DDF8F3;color:#087D7A;font-weight:800; }
.joblira-card__bottom b,.joblira-card__bottom small { display:block; }
.joblira-card__bottom b { font-size:.78rem;color:#171A20; }
.joblira-card__bottom small { margin-top:3px;font-size:.66rem;color:#737D8B; }
.joblira-card__arrow { display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border-radius:50%;background:#E8EDFF;color:#1B3FD8; }
.home-product__stamp { position:absolute;right:0;top:0;padding:13px 15px;border-radius:10px;background:#14D3C7;color:#173D43;font:800 .59rem/1.45 var(--font-mono,monospace);letter-spacing:.1em;transform:rotate(4deg); }

.home-process__grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #DCE2E7;border-bottom:1px solid #DCE2E7; }
.home-process-step { position:relative;min-width:0;padding:32px 26px 28px 0; }
.home-process-step + .home-process-step { padding-left:26px;border-left:1px solid #DCE2E7; }
.home-process-step__number { position:absolute;right:20px;top:30px;color:#A1AAB5;font:700 .66rem/1 var(--font-mono,monospace); }
.home-process-step__icon { display:grid;place-items:center;width:54px;height:54px;margin-bottom:31px;border-radius:16px;background:#EAF7F6;color:#087D7A;transition:transform .3s ease,background .3s ease; }
.home-process-step:nth-child(2) .home-process-step__icon { background:#E8EDFF;color:#1B3FD8; }
.home-process-step:nth-child(3) .home-process-step__icon { background:#EEF1F4;color:#485668; }
.home-process-step:nth-child(4) .home-process-step__icon { background:#DDF8F3;color:#087D7A; }
.home-process-step__icon svg { width:31px;height:31px; }
.home-process-step:hover .home-process-step__icon { transform:translateY(-4px) rotate(-4deg); }
.home-process-step h3 { margin:0;font-size:1.45rem;letter-spacing:-.045em;color:#171A20; }
.home-process-step p { min-height:96px;margin:12px 0 25px;color:#606A78;font-size:.9rem;line-height:1.7; }
.home-process-step__foot { color:#798391;font:700 .59rem/1.4 var(--font-mono,monospace);letter-spacing:.09em; }

.home-difference__layout { display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(45px,9vw,135px);align-items:start; }
.home-difference__intro .h1 { margin:24px 0 20px;font-size:clamp(2.5rem,4.8vw,4.6rem);line-height:1;letter-spacing:-.07em; }
.home-difference__intro .lede { max-width:48ch; }
.home-difference__note { display:flex;align-items:center;gap:14px;margin-top:36px;padding:18px 20px;border:1px solid rgba(27,63,216,.12);border-radius:14px;background:rgba(255,255,255,.65); }
.home-difference__note>span { display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#1B3FD8;color:white;font-size:1.2rem; }
.home-difference__note p { margin:0;font-size:.88rem;font-weight:650;line-height:1.5;color:#27303D; }
.home-difference__list { border-top:1px solid #D9E0E5; }
.home-difference-item { display:grid;grid-template-columns:45px minmax(0,1fr) 30px;gap:17px;align-items:start;padding:24px 0;border-bottom:1px solid #D9E0E5; }
.home-difference-item__icon { display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;color:#1B3FD8;font:750 .68rem/1 var(--font-mono,monospace); }
.home-difference-item h3 { margin:2px 0 7px;font-size:1.15rem;letter-spacing:-.03em;color:#171A20; }
.home-difference-item p { max-width:48ch;margin:0;color:#606A78;font-size:.9rem;line-height:1.65; }
.home-difference-item__arrow { color:#1B3FD8;font-size:1.1rem;transition:transform .25s ease; }
.home-difference-item:hover .home-difference-item__arrow { transform:translate(3px,-3px); }

.home-founder__panel { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:28px;background:#F1F5F6;border:1px solid rgba(28,40,58,.07); }
.home-founder__visual { position:relative;min-height:480px;overflow:hidden;background:#DDE8E8; }
.home-founder__visual:after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,25,38,.46),transparent 55%),linear-gradient(135deg,rgba(20,211,199,.1),transparent 55%); }
.home-founder__visual img { display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .8s ease; }
.home-founder__panel:hover .home-founder__visual img { transform:scale(1.035); }
.home-founder__visual-label { position:absolute;z-index:1;left:28px;bottom:26px;color:white;font:750 .68rem/1.7 var(--font-mono,monospace);letter-spacing:.13em; }
.home-founder__orb { position:absolute;z-index:1;right:-35px;top:35px;width:110px;height:110px;border:22px solid rgba(20,211,199,.8);border-radius:50%; }
.home-founder__copy { padding:clamp(30px,5vw,70px);align-self:center; }
.home-founder__copy .h1 { margin:25px 0 28px;font-size:clamp(2.5rem,4.5vw,4.3rem);line-height:.98;letter-spacing:-.07em; }
.home-founder__identity { display:flex;align-items:center;gap:12px;margin:0 0 22px; }
.home-founder__avatar { display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#1B3FD8;color:white;font-size:.85rem;font-weight:800; }
.home-founder__identity b,.home-founder__identity small { display:block; }
.home-founder__identity b { color:#171A20;font-size:.9rem; }
.home-founder__identity small { margin-top:4px;color:#697382;font-size:.76rem; }
.home-founder__copy .lede { font-size:1rem;line-height:1.75; }
.home-founder__copy .home-card-link { margin-top:25px; }

.home-contact__panel { position:relative;display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);gap:clamp(25px,6vw,85px);align-items:center;min-height:350px;padding:clamp(28px,6vw,76px);border-radius:28px;overflow:hidden;background:linear-gradient(120deg,#182B40 0%,#202E42 55%,#1B3FD8 130%);color:#fff; }
.home-contact__copy { position:relative;z-index:2;max-width:720px; }
.home-contact__copy .chapter-no { color:#C1CBD7; }
.home-contact__copy .chapter-no span { color:#14D3C7; }
.home-contact__copy .h1 { margin:22px 0 0;color:#fff;font-size:clamp(2.6rem,5.5vw,5.2rem);line-height:.98;letter-spacing:-.07em; }
.home-contact__copy .h1 span { color:#70F0E5; }
.home-contact__copy .lede { max-width:56ch;margin-top:20px;color:#D6DFE9; }
.home-contact__copy .btn { background:#14D3C7;color:#10353A;border-color:#14D3C7; }
.home-contact__copy .btn--ghost { background:transparent;color:#fff;border-color:rgba(255,255,255,.32); }
.home-contact__art { position:relative;min-height:210px;display:grid;place-items:center; }
.home-contact__circle { position:absolute;display:block;border:1px solid rgba(112,240,229,.65);border-radius:50%; }
.home-contact__circle--one { width:190px;height:190px;box-shadow:0 0 0 20px rgba(20,211,199,.035),0 0 0 42px rgba(20,211,199,.025);animation:home-orbit 18s linear infinite; }
.home-contact__circle--two { width:125px;height:125px;border-color:rgba(255,255,255,.45);border-style:dashed;animation:home-orbit 26s linear infinite reverse; }
.home-contact__cross { position:relative;display:grid;place-items:center;width:80px;height:80px;border-radius:24px;background:#14D3C7;color:#153F45;font-size:2.7rem;box-shadow:0 15px 45px rgba(20,211,199,.2);animation:home-card-drift 6s ease-in-out infinite; }
.home-contact__spark { position:absolute;right:12%;top:18%;color:#70F0E5;font-size:2rem; }
@keyframes home-card-drift { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }
@keyframes home-orbit { to{transform:rotate(360deg)} }

@media (max-width: 900px) {
  .home-section-intro { grid-template-columns:1fr;gap:17px; }
  .home-section-intro .chapter-no { padding-top:0; }
  .home-service-card--feature { grid-row:auto; }
  .home-product__layout,.home-difference__layout { grid-template-columns:1fr;gap:42px; }
  .home-product__copy { max-width:700px; }
  .home-product__visual { min-height:440px; }
  .home-process__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-process-step { padding:26px 22px 25px 0; }
  .home-process-step + .home-process-step { padding-left:22px; }
  .home-process-step:nth-child(3) { border-left:0;padding-left:0;border-top:1px solid #DCE2E7; }
  .home-process-step:nth-child(4) { border-top:1px solid #DCE2E7; }
  .home-process-step p { min-height:0; }
  .home-founder__visual { min-height:390px; }
  .home-contact__panel { grid-template-columns:180px minmax(0,1fr);gap:28px; }
  .home-contact__circle--one { width:145px;height:145px; }
  .home-contact__circle--two { width:100px;height:100px; }
}
@media (max-width: 600px) {
  .home-section-intro { margin-bottom:32px;gap:14px; }
  .home-section-intro .h1 { font-size:clamp(2.45rem,10vw,3.6rem);line-height:1.01; }
  .home-section-intro .lede { margin-top:16px;font-size:1rem;line-height:1.7; }
  .home-service-grid { grid-template-columns:minmax(0,1fr);gap:14px; }
  .home-service-card { min-height:0;padding:24px;border-radius:20px; }
  .home-service-card--feature { padding:0; }
  .home-service-card__art { min-height:230px; }
  .home-service-card__content { padding:25px 24px 27px; }
  .home-service-card h3 { font-size:1.7rem; }
  .home-service-card p { margin:12px 0 20px;font-size:.93rem; }
  .home-service-card__icon { width:50px;height:50px;margin-bottom:24px;border-radius:15px; }
  .home-card-kicker { margin-bottom:13px; }
  .home-product__layout { gap:30px; }
  .home-product__overline { margin-top:26px; }
  .home-product__copy .h1 { font-size:clamp(2.5rem,10vw,3.65rem); }
  .home-product__copy .lede { font-size:1rem;line-height:1.7; }
  .home-product__visual { min-height:340px; }
  .home-product__image { inset:0 0 27px 20px;border-radius:21px; }
  .joblira-card { left:0;bottom:0;width:min(88%,330px);padding:16px;border-radius:16px; }
  .joblira-card__title { margin:16px 0 14px; }
  .home-product__stamp { right:0;top:-8px;font-size:.48rem;padding:10px; }
  .home-process__grid { grid-template-columns:minmax(0,1fr);border-bottom:0; }
  .home-process-step,.home-process-step + .home-process-step,.home-process-step:nth-child(3),.home-process-step:nth-child(4) { display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:15px;align-items:start;padding:22px 0;border-left:0;border-top:1px solid #DCE2E7; }
  .home-process-step__icon { grid-row:span 3;width:48px;height:48px;margin:0; }
  .home-process-step__number { top:24px;right:0; }
  .home-process-step h3 { padding-right:35px;font-size:1.25rem; }
  .home-process-step p { grid-column:2;margin:7px 0 14px;font-size:.9rem; }
  .home-process-step__foot { grid-column:2; }
  .home-difference__layout { gap:30px; }
  .home-difference__intro .h1 { margin:18px 0;font-size:clamp(2.45rem,9.8vw,3.6rem); }
  .home-difference__note { margin-top:24px; }
  .home-difference-item { grid-template-columns:38px minmax(0,1fr) 20px;gap:12px;padding:20px 0; }
  .home-difference-item__icon { width:34px;height:34px; }
  .home-difference-item h3 { font-size:1.03rem; }
  .home-difference-item p { font-size:.87rem; }
  .home-founder__panel { grid-template-columns:minmax(0,1fr);border-radius:22px; }
  .home-founder__visual { min-height:270px; }
  .home-founder__visual-label { left:20px;bottom:19px; }
  .home-founder__copy { padding:27px 24px 30px; }
  .home-founder__copy .h1 { margin:20px 0 23px;font-size:clamp(2.45rem,9.5vw,3.5rem); }
  .home-contact__panel { grid-template-columns:minmax(0,1fr);gap:15px;padding:28px 24px;border-radius:22px; }
  .home-contact__art { min-height:115px;grid-row:1;justify-content:start;margin-left:14px; }
  .home-contact__circle--one { width:100px;height:100px; }
  .home-contact__circle--two { width:70px;height:70px; }
  .home-contact__cross { width:54px;height:54px;border-radius:17px;font-size:1.8rem; }
  .home-contact__spark { right:auto;left:125px;top:5px; }
  .home-contact__copy .h1 { font-size:clamp(2.5rem,10vw,3.65rem); }
  .home-contact__copy .lede { font-size:1rem;line-height:1.7; }
  .home-contact__copy .actions { align-items:stretch;flex-direction:column; }
  .home-contact__copy .actions .btn { width:100%;justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .home-service-card,.mini-browser,.home-product__image img,.joblira-card,
  .home-process-step__icon,.home-difference-item__arrow,.home-founder__visual img,
  .home-contact__circle,.home-contact__cross { animation:none!important;transition:none!important; }
}


/* ============================================================
   VGS · Cross-page visual system refresh
   Shared quality, with a distinct visual signature per page.
   ============================================================ */
:root {
  --page-blue: #1B3FD8;
  --page-cyan: #14D3C7;
  --page-ink: #182230;
  --page-muted: #596675;
  --page-paper: #F8FAF8;
}
.hero { position:relative; isolation:isolate; }
.hero > .shell { position:relative; z-index:1; }
.hero .hero-panel {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(31,48,69,.08);
  border-radius:clamp(22px,3vw,36px);
  box-shadow:0 22px 70px rgba(27,43,66,.065);
}
.hero .hero-title { text-wrap:balance; }
.hero .hero-title .em { color:var(--brand,#1B3FD8); }
.hero .hero-lede { max-width:62ch; color:#526071; line-height:1.75; }
.hero .eyebrow { letter-spacing:.13em; }
.hero .hero-actions { gap:12px; }
.hero .hero-actions .btn { min-height:48px; }
.hero .hero-art { filter:drop-shadow(0 18px 28px rgba(27,43,66,.11)); }
.hero .hero-art__photo { transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.hero:hover .hero-art__photo { transform:scale(1.025); }
.hero .hero-art__glass { backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 15px 40px rgba(18,32,52,.12); }
.hero .hero-visual__canvas { pointer-events:none; }
.hero .hero-visual__canvas svg { width:100%;height:100%; }
.hero .chip-row { gap:9px; }
.hero .chip { border-color:rgba(27,63,216,.13); background:rgba(255,255,255,.72); }

/* About: people, purpose and a calm cyan-blue wash. */
.hero--about .hero-panel {
  background:
    radial-gradient(ellipse at 82% 15%,rgba(20,211,199,.18),transparent 35%),
    linear-gradient(118deg,#F8FBFA 0%,#F0F6F7 54%,#F5F7FC 100%);
}
.hero--about .hero-title .em { color:#1B3FD8; }
.hero--about .hero-art__orb { border-color:rgba(20,211,199,.82); }
.hero--about + .band .card { transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; border:1px solid rgba(27,63,216,.075); }
.hero--about + .band .card:hover { transform:translateY(-5px);box-shadow:0 18px 42px rgba(27,43,66,.08); }

/* Contact: inviting, action-led, without competing with the form. */
.hero--contact .hero-panel {
  background:
    radial-gradient(ellipse at 84% 18%,rgba(20,211,199,.2),transparent 32%),
    linear-gradient(120deg,#F7FAFA 0%,#EEF5F6 56%,#F4F6FC 100%);
}
.hero--contact .hero-title .em { color:#1B3FD8; }
.hero--contact .hero-art__glass { border:1px solid rgba(255,255,255,.7); }
.hero--contact + .band .fact-row { padding:17px 0; }

/* Joblira: confident product blue, cyan signals and dashboard feel. */
.hero--joblira .hero-panel {
  background:
    radial-gradient(ellipse at 88% 10%,rgba(20,211,199,.2),transparent 32%),
    linear-gradient(125deg,#17263B 0%,#1B3FD8 105%);
  border-color:rgba(255,255,255,.13);
  color:#fff;
}
.hero--joblira .hero-title,.hero--joblira .hero-lede { color:#fff; }
.hero--joblira .hero-title .em { color:#75F2E8; }
.hero--joblira .eyebrow { color:#C6FFF8; }
.hero--joblira .hero-panel .card { border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.96);color:#182230; }
.hero--joblira .hero-panel .card .card-text { color:#526071; }
.hero--joblira .hero-panel .chip { background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22); }

/* Products: clean product-studio gradient with a soft data motif. */
.hero--products .hero-panel {
  background:
    radial-gradient(ellipse at 83% 22%,rgba(20,211,199,.2),transparent 30%),
    linear-gradient(118deg,#F9FBFA 0%,#F0F7F7 52%,#F2F4FC 100%);
}
.hero--products .hero-title .em { color:#1B3FD8; }
.hero--products .hero-art__orb { background:rgba(20,211,199,.16); }

/* Services: sharper blue-cyan energy and a clearer consulting hierarchy. */
.hero--services .hero-panel {
  background:
    radial-gradient(ellipse at 84% 13%,rgba(20,211,199,.2),transparent 31%),
    linear-gradient(125deg,#F8FAFC 0%,#EDF4F8 55%,#F1F3FC 100%);
}
.hero--services .hero-title .em { color:#1B3FD8; }
.hero--services + .band .card { border:1px solid rgba(27,63,216,.09);transition:transform .25s ease,box-shadow .25s ease; }
.hero--services + .band .card:hover { transform:translateY(-4px);box-shadow:0 18px 42px rgba(27,43,66,.09); }

/* Insights: editorial masthead, ink, bright cyan details. */
.hero--insights .hero-panel {
  min-height:390px;
  background:
    radial-gradient(circle at 85% 22%,rgba(20,211,199,.2),transparent 26%),
    linear-gradient(120deg,#F9FBF9 0%,#EFF6F6 57%,#F1F4FC 100%);
}
.hero--insights .hero-title { max-width:13ch; }
.hero--insights .hero-title .em { color:#1B3FD8; }
.insights-hero-art { filter:drop-shadow(0 16px 26px rgba(27,43,66,.09)); }
.insights-note { border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 34px rgba(27,43,66,.09); }
.insight-card { overflow:hidden;border:1px solid rgba(27,43,66,.09);border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(27,43,66,.045);transition:transform .28s ease,box-shadow .28s ease; }
.insight-card:hover { transform:translateY(-5px);box-shadow:0 22px 48px rgba(27,43,66,.1); }
.insight-card__image img { transition:transform .65s ease; }
.insight-card:hover .insight-card__image img { transform:scale(1.045); }

/* Careers: a warmer human tone, still inside the core palette. */
.hero--careers .hero-panel {
  background:
    radial-gradient(ellipse at 83% 16%,rgba(20,211,199,.19),transparent 30%),
    linear-gradient(118deg,#FAFBF8 0%,#EFF6F4 56%,#F3F5FC 100%);
}
.hero--careers .hero-title .em { color:#1B3FD8; }
.careers-art { border-radius:24px;overflow:hidden; }
.careers-art__card { border:1px solid rgba(255,255,255,.7);box-shadow:0 16px 42px rgba(27,43,66,.13); }
.careers-status { border:1px solid rgba(27,63,216,.12);border-radius:24px;background:linear-gradient(115deg,#F4F8F8,#F2F5FC); }
.career-icon { box-shadow:0 10px 24px rgba(27,43,66,.08); }

/* Legal pages: quiet, readable, intentional rather than generic. */
.hero--privacy .legal-hero {
  background:
    radial-gradient(ellipse at 86% 18%,rgba(20,211,199,.18),transparent 30%),
    linear-gradient(120deg,#F8FBF9 0%,#EEF6F4 60%,#F3F6FC 100%);
}
.hero--terms .legal-hero {
  background:
    radial-gradient(ellipse at 85% 16%,rgba(27,63,216,.1),transparent 28%),
    linear-gradient(120deg,#FAFBFC 0%,#F0F4F8 60%,#F2F4FC 100%);
}
.legal-hero__symbol { color:#1B3FD8; }
.legal-hero__symbol svg { filter:drop-shadow(0 12px 20px rgba(27,63,216,.12)); }
.legal-copy { max-width:78ch; }
.legal-copy section { padding:26px 0;border-bottom:1px solid rgba(27,43,66,.1); }
.legal-copy section h2 { letter-spacing:-.035em; }
.legal-index { position:sticky;top:110px;align-self:start; }
.legal-index a { transition:color .2s ease,transform .2s ease; }
.legal-index a:hover { color:#1B3FD8;transform:translateX(3px); }

/* Keep page rhythm generous on phones, not merely scaled down. */
@media (max-width:900px) {
  .hero .hero-panel { border-radius:25px; }
  .hero--joblira .hero-panel { background:radial-gradient(ellipse at 90% 8%,rgba(20,211,199,.2),transparent 34%),linear-gradient(145deg,#17263B,#1B3FD8 115%); }
  .legal-index { position:static; }
}
@media (max-width:600px) {
  .hero { padding-top:24px; }
  .hero .hero-panel { border-radius:22px;padding:clamp(24px,6vw,32px); }
  .hero .hero-title { font-size:clamp(2.45rem,10.8vw,4rem);line-height:.99;letter-spacing:-.065em; }
  .hero .hero-lede { margin-top:17px;font-size:1rem;line-height:1.72; }
  .hero .hero-actions { display:flex;flex-direction:column;align-items:stretch; }
  .hero .hero-actions .btn { width:100%;justify-content:center; }
  .hero .chip-row { display:flex;flex-wrap:wrap;gap:8px;margin-top:25px; }
  .hero .chip { font-size:.73rem; }
  .hero .hero-art { margin-top:30px; }
  .hero--joblira .hero-title { font-size:clamp(2.3rem,10vw,3.5rem); }
  .hero--insights .hero-panel { min-height:0; }
  .insights-hero-art { min-height:210px; }
  .legal-hero__symbol { opacity:.72; }
  .legal-layout { gap:25px; }
  .legal-index { display:flex;flex-wrap:wrap;gap:9px; }
  .legal-index a { padding:8px 11px;border-radius:999px;background:#F0F4F8;font-size:.82rem; }
}
@media (prefers-reduced-motion:reduce) {
  .hero .hero-art__photo,.hero--about + .band .card,.hero--services + .band .card,
  .insight-card,.insight-card__image img,.legal-index a { transition:none!important; }
}


/* VGS inner-page visual system: each destination has its own atmosphere, with one coherent design language. */
.hero:not(.hero--home) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(34px, 5.4vw, 76px) clamp(34px, 5vw, 66px);
}
.hero:not(.hero--home)::before,
.hero:not(.hero--home)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero:not(.hero--home)::before {
  width: min(54vw, 720px);
  aspect-ratio: 1;
  right: -13%;
  top: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,211,199,.17), rgba(20,211,199,.045) 43%, transparent 70%);
}
.hero:not(.hero--home)::after {
  width: min(38vw, 480px);
  aspect-ratio: 1;
  left: -18%;
  bottom: -66%;
  border-radius: 50%;
  border: 1px solid rgba(27,63,216,.11);
  box-shadow: 0 0 0 34px rgba(27,63,216,.025), 0 0 0 68px rgba(20,211,199,.035);
}
.hero:not(.hero--home) .hero-panel {
  position: relative;
  border: 1px solid rgba(27,63,216,.09);
  border-radius: clamp(22px, 3vw, 38px);
  box-shadow: 0 24px 80px rgba(23,36,64,.055);
  overflow: hidden;
}
.hero:not(.hero--home) .hero-title {
  max-width: 15ch;
  font-size: clamp(2.8rem, 5.3vw, 5.35rem);
  line-height: .99;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.hero:not(.hero--home) .hero-title .em {
  color: var(--blue, #1B3FD8);
  background: linear-gradient(100deg, #1B3FD8 8%, #168eaf 58%, #0d9d95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
}
.hero:not(.hero--home) .hero-lede {
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.8;
  color: #4d5969;
}
.hero:not(.hero--home) .hero-actions { gap: 13px; margin-top: 28px; }
.hero:not(.hero--home) .hero-actions .btn { min-height: 52px; }
.hero:not(.hero--home) .eyebrow { letter-spacing: .14em; }
.hero:not(.hero--home) .hero-art {
  border-radius: 26px;
  box-shadow: 0 20px 54px rgba(21,37,69,.14);
}
.hero:not(.hero--home) .hero-art__photo { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.hero:not(.hero--home) .hero-art:hover .hero-art__photo { transform: scale(1.035); }

/* About: people, purpose and a calm blue wash. */
.hero--about { background: linear-gradient(135deg, #f5f8ff 0%, #f9fbfa 53%, #eafaf8 100%); }
.hero--about .hero-panel { background: linear-gradient(118deg, rgba(255,255,255,.97), rgba(247,251,255,.9)); }
.hero--about .hero-art { outline: 1px solid rgba(27,63,216,.13); outline-offset: 5px; }

/* Contact: cyan light and a clear invitation to act. */
.hero--contact { background: linear-gradient(135deg, #effbfa 0%, #f8fafb 48%, #edf1ff 100%); }
.hero--contact .hero-panel { background: linear-gradient(135deg, #ffffff 0%, #f6fbfc 100%); }
.hero--contact .hero-title .em { background-image: linear-gradient(100deg, #087f8c, #1B3FD8); }

/* Joblira: a confident, product-led blue stage. */
.hero--joblira { background: linear-gradient(125deg, #102b91 0%, #1B3FD8 52%, #087f8c 100%); }
.hero--joblira::before { background: radial-gradient(circle, rgba(20,211,199,.25), rgba(20,211,199,.04) 48%, transparent 70%); }
.hero--joblira::after { border-color: rgba(255,255,255,.15); box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(20,211,199,.045); }
.hero--joblira .hero-panel { background: linear-gradient(115deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border-color: rgba(255,255,255,.18); box-shadow: 0 28px 80px rgba(3,15,68,.22); }
.hero--joblira .hero-title, .hero--joblira .hero-lede, .hero--joblira .eyebrow { color: #fff; }
.hero--joblira .hero-title .em { background-image: linear-gradient(100deg, #b6fff4, #ffffff 80%); }
.hero--joblira .hero-lede { color: rgba(255,255,255,.83); }
.hero--joblira .card { color: #202b40; }

/* Products: editorial white, vivid blue and product imagery. */
.hero--products { background: linear-gradient(135deg, #f4f7ff 0%, #fbfbf8 58%, #e8f8f7 100%); }
.hero--products .hero-panel { background: rgba(255,255,255,.83); }
.hero--products .hero-art { transform: rotate(.5deg); }

/* Services: technical cyan-grey gradient with a precise, engineered feel. */
.hero--services { background: linear-gradient(135deg, #eafaf9 0%, #f7f9fb 48%, #eef1ff 100%); }
.hero--services .hero-panel { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,252,.92)); }
.hero--services .hero-art { border: 1px solid rgba(20,211,199,.24); }

/* Insights: editorial field-notes treatment and a quiet grid. */
.hero--insights { background: linear-gradient(135deg, #f5f7ff 0%, #faf9f5 55%, #eaf9f7 100%); }
.hero--insights .hero-panel {
  min-height: 390px;
  background:
    linear-gradient(rgba(27,63,216,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,63,216,.035) 1px, transparent 1px),
    rgba(255,255,255,.88);
  background-size: 34px 34px, 34px 34px, auto;
}
.hero--insights .hero-title { max-width: 12ch; }
.insights-hero-art { filter: drop-shadow(0 20px 35px rgba(27,63,216,.09)); }
.insights-note { border: 1px solid rgba(27,63,216,.12); box-shadow: 0 14px 35px rgba(27,63,216,.08); backdrop-filter: blur(12px); }

/* Careers: optimistic warmth with a creative studio palette. */
.hero--careers { background: linear-gradient(135deg, #f4f8ff 0%, #f9f8f3 50%, #e7faf6 100%); }
.hero--careers .hero-panel { background: rgba(255,255,255,.84); }
.careers-art { filter: drop-shadow(0 18px 34px rgba(27,63,216,.09)); }
.careers-art__card { box-shadow: 0 18px 40px rgba(23,36,64,.12); }

/* Legal pages: composed, readable and visually distinct without distracting from the copy. */
.hero--privacy { background: linear-gradient(135deg, #eafaf7 0%, #f8fafb 53%, #eef2ff 100%); }
.hero--terms { background: linear-gradient(135deg, #eef2ff 0%, #fbfaf7 56%, #e8f8f7 100%); }
.hero--privacy .hero-panel, .hero--terms .hero-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 36px; background: rgba(255,255,255,.88); }
.hero--privacy .hero-panel > .eyebrow, .hero--terms .hero-panel > .eyebrow,
.hero--privacy .hero-panel > .hero-title, .hero--terms .hero-panel > .hero-title,
.hero--privacy .hero-panel > .hero-lede, .hero--terms .hero-panel > .hero-lede { grid-column: 1; }
.hero--privacy .legal-hero__symbol, .hero--terms .legal-hero__symbol { grid-column: 2; grid-row: 1 / span 3; width: clamp(108px, 15vw, 180px); color: #1B3FD8; padding: 12px; border-radius: 30px; background: linear-gradient(145deg, rgba(20,211,199,.12), rgba(27,63,216,.06)); }
.hero--terms .legal-hero__symbol { color: #087f8c; background: linear-gradient(145deg, rgba(27,63,216,.09), rgba(20,211,199,.12)); }
.hero--privacy .hero-title, .hero--terms .hero-title { max-width: 13ch; }

/* Mobile layouts are deliberately spacious and vertically composed, never desktop layouts squeezed down. */
@media (max-width: 760px) {
  .hero:not(.hero--home) { padding-block: 22px 34px; }
  .hero:not(.hero--home) > .shell { padding-inline: clamp(18px, 5vw, 26px); }
  .hero:not(.hero--home) .hero-panel { border-radius: 24px; padding: clamp(25px, 6vw, 36px); }
  .hero:not(.hero--home) .hero-title { max-width: 12ch; font-size: clamp(2.75rem, 10vw, 4.25rem); line-height: 1.01; letter-spacing: -.06em; }
  .hero:not(.hero--home) .hero-lede { font-size: 1rem; line-height: 1.75; margin-top: 18px; }
  .hero:not(.hero--home) .hero-actions { display: flex; flex-direction: column; align-items: stretch; margin-top: 25px; gap: 12px; }
  .hero:not(.hero--home) .hero-actions .btn { width: 100%; justify-content: center; min-height: 54px; }
  .hero:not(.hero--home) .chip-row { gap: 8px; }
  .hero:not(.hero--home) .hero-art { margin-top: 26px; border-radius: 20px; }
  .hero--privacy .hero-panel, .hero--terms .hero-panel { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .hero--privacy .hero-panel > .eyebrow, .hero--terms .hero-panel > .eyebrow,
  .hero--privacy .hero-panel > .hero-title, .hero--terms .hero-panel > .hero-title,
  .hero--privacy .hero-panel > .hero-lede, .hero--terms .hero-panel > .hero-lede { grid-column: 1; }
  .hero--privacy .legal-hero__symbol, .hero--terms .legal-hero__symbol { grid-column: 1; grid-row: auto; width: 88px; margin-top: 10px; border-radius: 20px; }
  .hero--insights .hero-panel { min-height: 0; }
  .insights-hero-art { min-height: 180px; margin-top: 25px; }
}
@media (max-width: 420px) {
  .hero:not(.hero--home) .hero-panel { padding: 24px 20px; }
  .hero:not(.hero--home) .hero-title { font-size: clamp(2.45rem, 10.7vw, 3rem); }
  .hero:not(.hero--home)::before { width: 100vw; right: -40%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero:not(.hero--home) .hero-art__photo { transition: none; }
}

/* PAGE-BY-PAGE ART DIRECTION: distinct visual identities, shared VGS design system */
:root{--vgs-cyan-wash:#e7fbf9;--vgs-silver-wash:#edf1f5;--vgs-ink:#17212f}
main#main>.hero{position:relative;isolation:isolate;overflow:clip}
main#main>.hero::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 12%,rgba(20,211,199,.17),transparent 34%),linear-gradient(125deg,rgba(237,241,245,.74),rgba(231,251,249,.54) 52%,rgba(255,255,255,.82))}
main#main>.hero .hero-panel{position:relative;overflow:hidden;border:1px solid rgba(27,63,216,.09);box-shadow:0 22px 65px rgba(21,38,64,.055)}
main#main>.hero .hero-title{text-wrap:balance;letter-spacing:-.045em}
main#main>.hero .hero-title .em{color:#1b3fd8;background:linear-gradient(95deg,#1b3fd8 0%,#087eac 55%,#0b8e84 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
main#main>.hero .hero-lede{max-width:57ch}
main#main>.hero .hero-art__photo{filter:saturate(.84) contrast(1.02)}
main#main>.hero .hero-art__glass{border:1px solid rgba(255,255,255,.68);box-shadow:0 18px 50px rgba(17,32,58,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
main#main>.hero .hero-art__orb{background:linear-gradient(135deg,rgba(20,211,199,.8),rgba(27,63,216,.55));filter:blur(1px)}
main#main>.hero .hero-actions .btn{min-height:48px}

/* About: editorial, people-first */
.hero--about::before{background:radial-gradient(ellipse at 83% 22%,rgba(20,211,199,.2),transparent 32%),radial-gradient(ellipse at 12% 90%,rgba(27,63,216,.08),transparent 35%),linear-gradient(120deg,#f5f8fb,#eaf9f8 58%,#f9fbfd)!important}
.hero--about .hero-panel{border-radius:28px}.hero--about .hero-art__photo{clip-path:inset(0 round 24px)}
.hero--about+.band .section-head{max-width:820px}.hero--about+.band .section-illust{filter:drop-shadow(0 18px 30px rgba(27,63,216,.07))}

/* Contact: welcoming, action-led */
.hero--contact::before{background:radial-gradient(ellipse at 88% 16%,rgba(20,211,199,.22),transparent 30%),linear-gradient(130deg,#f7f8fa,#eaf7f7 54%,#f2f4f7)!important}
.hero--contact .hero-panel{border-radius:30px 30px 12px 30px}
#reach .card,#reach .contact-card,#reach form{border-color:rgba(27,63,216,.12);box-shadow:0 16px 42px rgba(22,38,61,.055)}
#next .step,#next .process-step{transition:transform .25s ease,box-shadow .25s ease}
#next .step:hover,#next .process-step:hover{transform:translateY(-4px)}

/* Joblira: bright, product-led identity */
.hero--joblira::before{background:radial-gradient(ellipse at 78% 18%,rgba(20,211,199,.23),transparent 30%),linear-gradient(rgba(27,63,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,63,216,.035) 1px,transparent 1px),linear-gradient(125deg,#f3f7ff,#e8faf8 68%,#f8fafc)!important;background-size:auto,32px 32px,32px 32px,auto}
.hero--joblira .hero-panel{border-radius:28px}
#earner-journey,#client-journey{position:relative}
#earner-journey::before,#client-journey::before{content:"";display:block;width:72px;height:5px;border-radius:9px;margin:0 0 22px;background:linear-gradient(90deg,#1b3fd8,#14d3c7)}
#principles .card,#principles .principle-card{border:1px solid rgba(27,63,216,.11);box-shadow:0 14px 38px rgba(21,38,64,.045)}

/* Products: portfolio / product-studio treatment */
.hero--products::before{background:radial-gradient(ellipse at 82% 18%,rgba(20,211,199,.18),transparent 32%),radial-gradient(ellipse at 9% 90%,rgba(27,63,216,.09),transparent 31%),linear-gradient(130deg,#f6f8fb,#eaf8f8 60%,#f7f8fb)!important}
.hero--products .hero-panel{border-radius:28px 28px 28px 10px}
#joblira .card,#joblira .product-card,#joblira .portfolio-card{transition:transform .28s ease,box-shadow .28s ease}
#joblira .card:hover,#joblira .product-card:hover,#joblira .portfolio-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(21,38,64,.1)}

/* Services: structured, technology-forward */
.hero--services::before{background:radial-gradient(ellipse at 85% 18%,rgba(20,211,199,.21),transparent 29%),linear-gradient(135deg,#edf3fb,#e9f9f7 57%,#f8fafc)!important}
.hero--services .hero-panel{border-radius:14px 30px 30px 30px}
#practices .service-card,#practices .card,#practices .practice-card{border:1px solid rgba(27,63,216,.1);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,251,252,.96));box-shadow:0 12px 35px rgba(23,39,62,.045);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
#practices .service-card:hover,#practices .card:hover,#practices .practice-card:hover{transform:translateY(-5px);border-color:rgba(20,211,199,.65);box-shadow:0 22px 46px rgba(23,39,62,.09)}
#automation .card,#automation .engagement-card{background:linear-gradient(145deg,#fff,#f1f9fa)}

/* Insights: editorial masthead and readable article cards */
.hero--insights::before{background:radial-gradient(ellipse at 84% 15%,rgba(20,211,199,.23),transparent 29%),radial-gradient(ellipse at 12% 92%,rgba(27,63,216,.08),transparent 34%),linear-gradient(125deg,#f8f7f3,#e9f8f7 60%,#f1f4f7)!important}
.hero--insights .hero-panel{border-radius:28px}
.insights-hero-art{position:relative;border-radius:24px;background:radial-gradient(circle at 75% 20%,rgba(20,211,199,.55),transparent 28%),linear-gradient(135deg,#dfe8f4,#effbf8 60%,#e8edf4);min-height:clamp(190px,27vw,330px);overflow:hidden}
.insights-hero-art::before,.insights-hero-art::after{content:"";position:absolute;border:1px solid rgba(27,63,216,.2);border-radius:50%;width:260px;height:260px;right:7%;top:50%;transform:translateY(-50%)}
.insights-hero-art::after{width:190px;height:190px;right:calc(7% + 35px);border-color:rgba(20,211,199,.75)}
.insight-card{overflow:hidden;border:1px solid rgba(27,63,216,.1);border-radius:20px;background:linear-gradient(155deg,#fff,#f8fbfc);box-shadow:0 15px 42px rgba(22,38,61,.055);transition:transform .25s ease,box-shadow .25s ease}
.insight-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(22,38,61,.1)}
.insight-card__body{padding:clamp(22px,3vw,34px)}.insight-card__body h2{ text-wrap:balance;letter-spacing:-.025em}
.insight-meta{display:inline-flex;align-items:center;gap:8px;color:#1b3fd8;font-size:.76rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.insight-meta::before{content:"";width:7px;height:7px;border-radius:50%;background:#14bfb5}

/* Careers: human, optimistic */
.hero--careers::before{background:radial-gradient(ellipse at 84% 14%,rgba(20,211,199,.22),transparent 30%),linear-gradient(135deg,#f4f7fb,#e8f8f6 58%,#f7f8fa)!important}
.hero--careers .hero-panel{border-radius:30px 12px 30px 30px}
#working-here .careers-status{border:1px solid rgba(27,63,216,.13);border-radius:24px;background:linear-gradient(120deg,#fff,#eefaf9);box-shadow:0 18px 46px rgba(22,38,61,.06)}
#working-here .careers-status__mark{background:linear-gradient(135deg,#1b3fd8,#14bfb5);color:#fff;box-shadow:0 10px 24px rgba(27,63,216,.2)}

/* Legal pages: quiet, reading-focused */
.hero--privacy::before{background:radial-gradient(ellipse at 85% 20%,rgba(20,211,199,.2),transparent 29%),linear-gradient(130deg,#f4f7fb,#e8f8f6 58%,#f8fafb)!important}
.hero--terms::before{background:radial-gradient(ellipse at 85% 20%,rgba(27,63,216,.12),transparent 29%),linear-gradient(130deg,#f7f7f5,#eaf2f9 58%,#f2fbfa)!important}
.hero--privacy .legal-hero,.hero--terms .legal-hero{border-radius:28px;min-height:250px}
.legal-hero__symbol{color:#1b3fd8;background:radial-gradient(circle,rgba(20,211,199,.18),rgba(27,63,216,.04) 68%,transparent 69%);border-radius:50%}
.legal-layout{align-items:start}
.legal-index{border:1px solid rgba(27,63,216,.1);border-radius:18px;padding:20px;background:linear-gradient(155deg,#fff,#f3fafb)}
.legal-index a{text-decoration-thickness:1px;text-underline-offset:4px}
.legal-copy{max-width:76ch;font-size:1rem;line-height:1.82}
.legal-copy section{padding:0 0 25px;margin:0 0 25px;border-bottom:1px solid rgba(27,63,216,.1);scroll-margin-top:100px}
.legal-copy section:last-child{border-bottom:0}.legal-copy h2{letter-spacing:-.025em;text-wrap:balance}

/* Shared finish and mobile-first rhythm across all interior pages */
main#main>.band:not(.hero){position:relative}
main#main>.band:not(.hero) .section-head h2{text-wrap:balance}
main#main>.band:not(.hero) .section-head .lede{max-width:62ch}
main#main>.band:not(.hero) .btn{transition:transform .2s ease,box-shadow .2s ease}
main#main>.band:not(.hero) .btn:hover{transform:translateY(-2px)}
@media(min-width:1000px){main#main>.hero .hero-panel{padding-block:clamp(44px,6vw,82px)}}
@media(max-width:760px){
 main#main>.hero{overflow:hidden}
 main#main>.hero .hero-panel{border-radius:22px;box-shadow:0 12px 34px rgba(21,38,64,.055)}
 main#main>.hero .hero-title{font-size:clamp(2.35rem,10vw,4rem);line-height:.99;letter-spacing:-.05em;max-width:13ch}
 main#main>.hero .hero-lede{font-size:1.02rem;line-height:1.7}
 main#main>.hero .hero-actions{gap:10px}
 main#main>.hero .hero-actions .btn{width:100%;justify-content:center}
 .insights-hero-art{min-height:180px;border-radius:18px}
 .insights-hero-art::before{width:190px;height:190px;right:3%}
 .insights-hero-art::after{width:135px;height:135px;right:calc(3% + 27px)}
 .legal-layout{display:block}.legal-index{margin-bottom:28px}
 .legal-index a{display:inline-block;margin:8px 10px 0 0}
 .legal-copy{font-size:.97rem;line-height:1.78}
 #working-here .careers-status{padding:22px}
}
@media(prefers-reduced-motion:reduce){
 .insight-card,#joblira .card,#joblira .product-card,#joblira .portfolio-card,#practices .service-card,#practices .card,#practices .practice-card,#next .step,#next .process-step{transition:none!important}
 .insight-card:hover,#joblira .card:hover,#joblira .product-card:hover,#joblira .portfolio-card:hover,#practices .service-card:hover,#practices .card:hover,#practices .practice-card:hover,#next .step:hover,#next .process-step:hover{transform:none!important}
}

/* Careers hero illustration: an abstract, people-and-ideas motif built in CSS. */
.hero--careers .hero-panel::after{
 content:"";
 position:absolute;
 z-index:0;
 pointer-events:none;
 width:clamp(170px,23vw,310px);
 aspect-ratio:1;
 right:clamp(18px,5vw,72px);
 top:50%;
 transform:translateY(-50%);
 border-radius:46% 54% 58% 42% / 44% 43% 57% 56%;
 border:1px solid rgba(27,63,216,.16);
 background:
  radial-gradient(circle at 50% 50%,rgba(20,211,199,.26) 0 9%,transparent 9.5%),
  radial-gradient(circle at 35% 36%,rgba(27,63,216,.16) 0 7%,transparent 7.5%),
  radial-gradient(circle at 68% 64%,rgba(20,211,199,.25) 0 12%,transparent 12.5%),
  radial-gradient(circle at 65% 28%,rgba(27,63,216,.13) 0 5%,transparent 5.5%),
  linear-gradient(135deg,rgba(255,255,255,.15),rgba(20,211,199,.12));
 box-shadow:inset 0 0 0 18px rgba(255,255,255,.18),0 24px 60px rgba(27,63,216,.08);
}
.hero--careers .hero-panel::before{
 content:"";
 position:absolute;
 z-index:0;
 pointer-events:none;
 width:clamp(130px,17vw,220px);
 aspect-ratio:1;
 right:clamp(42px,8vw,110px);
 top:50%;
 transform:translateY(-50%) rotate(35deg);
 border:1px solid rgba(20,211,199,.55);
 border-radius:38% 62% 45% 55%;
}
@media(max-width:760px){
 .hero--careers .hero-panel::after{width:140px;right:-38px;top:auto;bottom:14px;transform:none;opacity:.52}
 .hero--careers .hero-panel::before{width:105px;right:-15px;top:auto;bottom:31px;transform:rotate(35deg);opacity:.55}
}


/* Service detail navigation: visible, keyboard-accessible submenus */
.nav-dropdown{position:relative;display:flex;align-items:center;height:100%}
.nav-link--parent{display:inline-flex;align-items:center;gap:7px}
.nav-chevron{font-size:1rem;line-height:1;transition:transform .2s ease}
.nav-dropdown:hover .nav-chevron,.nav-dropdown:focus-within .nav-chevron{transform:rotate(180deg)}
.nav-submenu{position:absolute;top:calc(100% - 2px);left:-18px;z-index:120;display:grid;gap:3px;width:290px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 20px 48px rgba(23,26,32,.15);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-submenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;color:var(--ink-2);font-size:.9rem;line-height:1.35}
.nav-submenu a:hover,.nav-submenu a:focus-visible{background:var(--brand-050);color:var(--brand)}
.nav-submenu .nav-submenu__overview{font-weight:700;color:var(--brand);border-bottom:1px solid var(--line-soft);border-radius:7px;margin-bottom:3px}
.mobile-nav-group{border-bottom:1px solid var(--line-soft)}
.mobile-links>.mobile-nav-group>a{border-bottom:0}
.mobile-submenu{display:grid;grid-template-columns:1fr;gap:1px;padding:0 0 12px 14px}
.mobile-submenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;color:var(--muted);font-size:.92rem;border-left:2px solid rgba(27,63,216,.16)}
.mobile-submenu a:hover,.mobile-submenu a:focus-visible{color:var(--brand);background:rgba(27,63,216,.045)}
@media(max-width:760px){.nav-submenu{display:none}}
@media(prefers-reduced-motion:reduce){.nav-chevron,.nav-submenu{transition:none}}


/* ==========================================================================
   PAGE ART DIRECTION — every interior page has its own visual grammar.
   Shared brand tokens; deliberately different compositions, not cloned heroes.
   ========================================================================== */

/* ABOUT: editorial, people-first, asymmetric story rhythm */
.page-about .hero--about .hero-panel{padding-top:clamp(42px,6vw,84px)}
.page-about .hero-art--about{border-radius:48% 48% 18px 18px;overflow:hidden}
.page-about #story .section-head{max-width:760px;margin-left:0}
.page-about #story .grid{align-items:stretch}
.page-about #story .card:nth-child(odd){transform:translateY(18px)}
.page-about .hero-art--about .hero-art__glass--top{left:auto;right:18px}
.page-about .hero-art--about .hero-art__glass--bottom{left:18px;right:auto}

/* CONTACT: conversion-first, image on one side, form gets a distinct focal panel */
.page-contact .hero--contact .hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);column-gap:clamp(28px,5vw,72px);align-items:center}
.page-contact .hero--contact .hero-panel>.eyebrow,.page-contact .hero--contact .hero-panel>h1,.page-contact .hero--contact .hero-panel>.lede,.page-contact .hero--contact .hero-panel>.actions,.page-contact .hero--contact .hero-panel>.chip-row{grid-column:1}
.page-contact .hero-art--contact{grid-column:2;grid-row:1 / span 5;align-self:stretch;min-height:360px;border-radius:12px 100px 12px 12px}
.page-contact #form{scroll-margin-top:100px}
.page-contact #form form,.page-contact #form .form{background:#fff;border:1px solid var(--line-soft);padding:clamp(22px,4vw,42px);border-radius:22px;box-shadow:0 20px 60px rgba(23,26,32,.07)}
.page-contact #next{border-top:1px solid var(--line-soft)}
@media(max-width:760px){.page-contact .hero--contact .hero-panel{display:flex;flex-direction:column;align-items:stretch}.page-contact .hero-art--contact{width:100%;min-height:240px;border-radius:18px}}

/* JOBLIRA: product launch page, dark product stage and crisp UI-led sections */
.page-joblira .hero--joblira .hero-panel{background:#202633;border-radius:28px;overflow:hidden;position:relative}
.page-joblira .hero--joblira .hero-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(20,211,199,.12)),radial-gradient(circle at 82% 14%,rgba(27,63,216,.35),transparent 34%);pointer-events:none}
.page-joblira .hero--joblira .hero-panel>*{position:relative}
.page-joblira .hero--joblira .hero-title,.page-joblira .hero--joblira .lede{color:#fff}
.page-joblira .hero--joblira .hero-title .em{color:#78F4E7}
.page-joblira #earner-journey{background:#202633;color:#fff}
.page-joblira #earner-journey .lede,.page-joblira #earner-journey .card-text{color:#D6DCE6}
.page-joblira #earner-journey .card{background:#2B3444;border-color:rgba(255,255,255,.12)}

/* PRODUCTS: portfolio gallery, high-image ratio, no generic service-card look */
.page-products .hero-art--products{border-radius:8px 8px 72px 8px}
.page-products #joblira{background:linear-gradient(125deg,#EAF8F5,#F5F7FF);border-radius:28px}
.page-products #joblira .card{box-shadow:0 24px 64px rgba(23,26,32,.08)}
.page-products .grid .card:nth-child(2){transform:translateY(24px)}
@media(max-width:760px){.page-products .grid .card:nth-child(2){transform:none}}

/* SERVICES DIRECTORY: structured index, numbered service cards */
.page-services #practices .grid.grid-3:not(:first-of-type){counter-reset:service-card}
.page-services #practices .grid.grid-3>a.card{border-radius:8px 22px 8px 8px;border-top:3px solid var(--brand);box-shadow:none}
.page-services #practices .grid.grid-3>a.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(23,26,32,.08)}
.page-services #automation{background:#202633;color:#fff}
.page-services #automation .lede,.page-services #automation .card-text,.page-services #automation .fact-row dt{color:#D7DCE5}
.page-services #automation .card{background:#2B3444;border-color:rgba(255,255,255,.12)}
.page-services #automation .chip{background:rgba(20,211,199,.13);color:#9DF8EF}

/* INSIGHTS: magazine/editorial treatment, big issue label and image-led article rhythm */
.page-insights .hero--insights .hero-panel{min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.82fr);align-items:center;column-gap:40px}
.page-insights .hero--insights .hero-panel>.eyebrow,.page-insights .hero--insights .hero-panel>h1,.page-insights .hero--insights .hero-panel>.lede,.page-insights .hero--insights .hero-panel>.actions{grid-column:1}
.page-insights .insights-hero-art{grid-column:2;grid-row:1 / span 4;min-height:400px}
.page-insights .insight-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px}
.page-insights .insight-card:first-child{grid-row:span 2}
.page-insights .insight-card:first-child .insight-card__image{min-height:320px}
.page-insights .insight-card{border-radius:4px 22px 4px 4px}
@media(max-width:760px){.page-insights .hero--insights .hero-panel{display:flex;flex-direction:column;align-items:stretch;min-height:0}.page-insights .insights-hero-art{min-height:270px}.page-insights .insight-grid{grid-template-columns:1fr}.page-insights .insight-card:first-child{grid-row:auto}}

/* CAREERS: geometric studio art, wide manifesto and values as open panels */
.page-careers .hero--careers .hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.8fr);gap:24px 48px;align-items:center}
.page-careers .hero--careers .hero-panel>.eyebrow,.page-careers .hero--careers .hero-panel>h1,.page-careers .hero--careers .hero-panel>p,.page-careers .hero--careers .hero-panel>.actions{grid-column:1}
.page-careers .careers-art{grid-column:2;grid-row:1 / span 4;min-height:360px}
.page-careers #working-here .card{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:28px 4px}
.page-careers #working-here .card:hover{transform:translateY(-3px)}
@media(max-width:760px){.page-careers .hero--careers .hero-panel{display:flex;flex-direction:column;align-items:stretch}.page-careers .careers-art{min-height:250px;width:100%}}

/* LEGAL PAGES: separate identities while retaining accessible long-form reading */
.page-privacy .hero--privacy .legal-hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:20px 48px;background:linear-gradient(115deg,#E9F8F4,#FAF8F2 68%);border-left:5px solid var(--teal)}
.page-privacy .legal-hero__symbol{grid-column:2;grid-row:1 / span 3;color:#087E79}
.page-privacy .legal-layout{grid-template-columns:230px minmax(0,760px);gap:clamp(28px,6vw,88px)}
.page-privacy .legal-index{position:sticky;top:110px;align-self:start;border-top:3px solid var(--teal);padding-top:18px}
.page-privacy .legal-copy section{padding:24px 0;border-bottom:1px solid var(--line-soft)}
.page-terms .hero--terms .legal-hero{display:flex;align-items:center;gap:40px;background:#202633;color:#fff;border-radius:4px 28px 4px 4px}
.page-terms .hero--terms .legal-hero .lede{color:#D7DCE5}
.page-terms .hero--terms .legal-hero .eyebrow{color:#8DF3E8}
.page-terms .legal-hero__symbol{flex:0 0 160px;color:#8DF3E8}
.page-terms .legal-layout{grid-template-columns:minmax(0,760px) 230px;gap:clamp(28px,6vw,88px)}
.page-terms .legal-index{grid-column:2;grid-row:1;position:sticky;top:110px;align-self:start;border-top:3px solid var(--brand);padding-top:18px}
.page-terms .legal-copy{grid-column:1;grid-row:1}
.page-terms .legal-copy section{padding:22px 0}
@media(max-width:760px){.page-privacy .hero--privacy .legal-hero{grid-template-columns:1fr}.page-privacy .legal-hero__symbol{grid-column:1;grid-row:auto;width:100px}.page-privacy .legal-layout,.page-terms .legal-layout{display:flex;flex-direction:column}.page-terms .hero--terms .legal-hero{flex-direction:column;align-items:flex-start}.page-terms .legal-hero__symbol{width:110px;flex-basis:auto}.page-terms .legal-index{order:0;position:static}.page-terms .legal-copy{order:1}}

/* SERVICE DETAIL PAGES: distinct page-specific compositions and illustration systems */
.page-product-development .detail-hero{background:#F0F4FF}
.page-product-development .detail-hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
.page-product-development .detail-art{background:#fff;color:var(--ink);border:1px solid #D9E1F5;border-radius:18px;min-height:380px}
.page-product-development .detail-art:before{width:74%;height:54%;top:42px;border-radius:12px;border:1px solid #C6D2F4;box-shadow:none;background:linear-gradient(#F4F6FC 0 38px,#fff 38px)}
.page-product-development .detail-art:after{inset:62px 22px 95px;background:repeating-linear-gradient(0deg,transparent 0 24px,#E6EBF7 25px 26px),linear-gradient(90deg,#E9EEFC 0 30%,transparent 30%);opacity:.8}
.page-product-development .detail-art__shape{width:56%;height:72px;top:116px;left:53%;border-radius:8px;transform:rotate(3deg);background:linear-gradient(110deg,#1B3FD8,#14D3C7);border:0}
.page-product-development .detail-art__shape:after{display:none}
.page-product-development .detail-art__index{color:var(--brand)}
.page-product-development .detail-art__caption{color:var(--ink)}
.page-product-development .detail-art__caption small{color:var(--brand)}
.page-product-development .detail-sections{grid-template-columns:1fr}
.page-product-development .detail-section{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:18px;border-radius:0;border:0;border-top:1px solid var(--line);box-shadow:none;padding:28px 0;background:transparent}
.page-product-development .detail-section__no{grid-row:span 2;padding-top:8px}
.page-product-development .detail-section h3{margin:0 0 10px}
.page-product-development .detail-deliverables{background:#202633;color:#fff;border-radius:8px}
.page-product-development .detail-deliverables .card-text{color:#D7DCE5}

/* AI: dark laboratory, luminous network illustration, staggered evidence cards */
.page-ai-solutions .detail-hero{background:#171D2A;color:#fff}
.page-ai-solutions .detail-hero:after{border-color:rgba(20,211,199,.25);box-shadow:0 0 0 34px rgba(20,211,199,.04),0 0 0 78px rgba(27,63,216,.08)}
.page-ai-solutions .detail-hero h1 em{color:#70F0E3}
.page-ai-solutions .detail-hero__lede{color:#D4DCE8}
.page-ai-solutions .detail-breadcrumb{color:#BBC5D4}
.page-ai-solutions .detail-breadcrumb a{color:#70F0E3}
.page-ai-solutions .detail-art{background:radial-gradient(circle at 50% 40%,#334C73,#1B2231 65%);border:1px solid rgba(112,240,227,.24);border-radius:50% 50% 20px 20px;min-height:390px}
.page-ai-solutions .detail-art:before{width:180px;height:180px;top:62px;border:1px solid #70F0E3;box-shadow:0 0 0 22px rgba(112,240,227,.05),0 0 0 54px rgba(112,240,227,.035)}
.page-ai-solutions .detail-art:after{inset:0;background:radial-gradient(circle at 20% 32%,#70F0E3 0 3px,transparent 4px),radial-gradient(circle at 80% 35%,#70F0E3 0 3px,transparent 4px),radial-gradient(circle at 29% 72%,#70F0E3 0 3px,transparent 4px),radial-gradient(circle at 76% 70%,#70F0E3 0 3px,transparent 4px),linear-gradient(0deg,rgba(15,20,30,.92),transparent 72%)}
.page-ai-solutions .detail-art__shape{border-radius:50%;height:100px;width:100px;top:104px;background:rgba(112,240,227,.12);border:1px solid #70F0E3;transform:translateX(-50%)}
.page-ai-solutions .detail-art__shape:after{inset:16px;border-radius:50%;border-color:#70F0E3}
.page-ai-solutions .detail-art__index{color:#70F0E3}
.page-ai-solutions .detail-sections{grid-template-columns:1.15fr .85fr}
.page-ai-solutions .detail-section{border-radius:4px 22px 4px 4px;border-color:#DCE5F3}
.page-ai-solutions .detail-section:nth-child(2),.page-ai-solutions .detail-section:nth-child(4){transform:translateY(24px)}
.page-ai-solutions .detail-deliverables{background:#EAF0FC}
@media(max-width:760px){.page-ai-solutions .detail-sections{grid-template-columns:1fr}.page-ai-solutions .detail-section:nth-child(2),.page-ai-solutions .detail-section:nth-child(4){transform:none}}

/* AUTOMATION: process-flow visual, wide hero, horizontal operational stages */
.page-automation .detail-hero{background:#DFF7F2}
.page-automation .detail-hero:after{right:4%;top:16%;border-radius:18px;transform:rotate(22deg);border-color:rgba(8,126,121,.2);box-shadow:0 0 0 24px rgba(8,126,121,.04),0 0 0 58px rgba(8,126,121,.03)}
.page-automation .detail-hero__grid{grid-template-columns:1fr}
.page-automation .detail-art{min-height:190px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:none;border:1px solid #B9E6DE}
.page-automation .detail-art:before{top:50%;left:8%;transform:translateY(-50%);width:84%;height:3px;border:0;border-radius:0;background:linear-gradient(90deg,#1B3FD8,#14D3C7);box-shadow:none}
.page-automation .detail-art:after{inset:0;background:radial-gradient(circle at 12% 50%,#1B3FD8 0 9px,#fff 10px 15px,transparent 16px),radial-gradient(circle at 38% 50%,#14D3C7 0 9px,#fff 10px 15px,transparent 16px),radial-gradient(circle at 64% 50%,#1B3FD8 0 9px,#fff 10px 15px,transparent 16px),radial-gradient(circle at 89% 50%,#14D3C7 0 9px,#fff 10px 15px,transparent 16px)}
.page-automation .detail-art__shape{display:none}
.page-automation .detail-art__index{top:16px;left:20px;color:var(--brand)}
.page-automation .detail-art__caption{position:absolute;left:20px;bottom:16px;color:var(--ink)}
.page-automation .detail-art__caption small{color:#087E79}
.page-automation .detail-sections{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #C9D8D6;border-bottom:1px solid #C9D8D6}
.page-automation .detail-section{border:0;border-radius:0;border-right:1px solid #C9D8D6;box-shadow:none;background:transparent;padding:24px 18px}
.page-automation .detail-section:last-child{border-right:0}
.page-automation .detail-section__no{color:#087E79}
.page-automation .detail-deliverables{background:#202633;color:#fff}
.page-automation .detail-deliverables .card-text{color:#D7DCE5}
@media(max-width:760px){.page-automation .detail-sections{grid-template-columns:1fr}.page-automation .detail-section{border-right:0;border-bottom:1px solid #C9D8D6;padding:24px 0}.page-automation .detail-section:last-child{border-bottom:0}}

/* CREATIVE BRAND: expressive editorial typography and portfolio-board layout */
.page-creative-brand .detail-hero{background:#F8F1E8}
.page-creative-brand .detail-hero h1{font-family:var(--font-serif);font-weight:400;letter-spacing:-.04em;line-height:.98}
.page-creative-brand .detail-hero h1 em{color:#087E79}
.page-creative-brand .detail-hero__grid{grid-template-columns:1fr}
.page-creative-brand .detail-art{min-height:230px;background:#F1E9DD;color:#202633;border-radius:0;box-shadow:none}
.page-creative-brand .detail-art:before{width:30%;height:170px;left:18%;top:28px;transform:rotate(-10deg);border-radius:2px;background:#1B3FD8;border:0;box-shadow:90px 30px 0 -10px #14D3C7,170px -10px 0 -20px #202633}
.page-creative-brand .detail-art:after{inset:0;background:linear-gradient(90deg,transparent 0 48%,rgba(248,241,232,.65) 48% 49%,transparent 49%)}
.page-creative-brand .detail-art__shape{display:none}
.page-creative-brand .detail-art__index{color:#202633}
.page-creative-brand .detail-art__caption{margin-left:auto;max-width:250px;color:#202633}
.page-creative-brand .detail-art__caption small{color:#087E79}
.page-creative-brand .detail-sections{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.page-creative-brand .detail-section{background:transparent;box-shadow:none;border:0;border-top:1px solid #D6C9B8;border-radius:0;padding:30px 0}
.page-creative-brand .detail-section:nth-child(odd){margin-top:42px}
.page-creative-brand .detail-section h3{font-family:var(--font-serif);font-size:clamp(1.7rem,2.7vw,2.5rem);font-weight:400}
.page-creative-brand .detail-deliverables{background:#202633;color:#fff;border-radius:0 32px 0 0}
.page-creative-brand .detail-deliverables .card-text{color:#D7DCE5}
@media(max-width:760px){.page-creative-brand .detail-sections{grid-template-columns:1fr}.page-creative-brand .detail-section:nth-child(odd){margin-top:0}}

/* ADVISORY: quiet consulting report, indexed left rail and decision matrix */
.page-advisory .detail-hero{background:#F2F0E9}
.page-advisory .detail-hero__grid{grid-template-columns:minmax(0,1fr) 210px;align-items:start}
.page-advisory .detail-art{min-height:270px;border-radius:4px;background:#fff;color:var(--ink);border-left:4px solid var(--brand);box-shadow:none}
.page-advisory .detail-art:before{width:130px;height:130px;top:48px;border:2px solid var(--brand);border-radius:50%;box-shadow:inset 0 0 0 12px #fff,inset 0 0 0 13px #14D3C7,0 0 0 20px rgba(27,63,216,.06)}
.page-advisory .detail-art:after{inset:0;background:linear-gradient(0deg,rgba(255,255,255,.97),transparent 60%)}
.page-advisory .detail-art__shape{width:58px;height:58px;top:85px;border-radius:50%;background:#14D3C7;border:0;transform:translateX(-50%)}
.page-advisory .detail-art__shape:after{display:none}
.page-advisory .detail-art__index{color:var(--brand)}
.page-advisory .detail-art__caption{color:var(--ink)}
.page-advisory .detail-art__caption small{color:var(--brand)}
.page-advisory .detail-sections{grid-template-columns:1fr;gap:0}
.page-advisory .detail-section{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px;border:0;border-top:1px solid #D8D4C9;border-radius:0;box-shadow:none;background:transparent;padding:28px 0}
.page-advisory .detail-section__no{grid-row:span 2}
.page-advisory .detail-section h3{margin:0 0 10px}
.page-advisory .detail-deliverables{background:#E8E6DE;border-radius:4px}
@media(max-width:760px){.page-advisory .detail-hero__grid{grid-template-columns:1fr}.page-advisory .detail-art{min-height:220px}.page-advisory .detail-section{grid-template-columns:1fr;gap:12px}}

/* LEARNING: workshop board, numbered modules and a visibly progressive pathway */
.page-learning .detail-hero{background:linear-gradient(140deg,#E5F7F1,#FAF8F2 65%)}
.page-learning .detail-hero__grid{grid-template-columns:minmax(0,1fr) minmax(260px,.75fr)}
.page-learning .detail-art{min-height:360px;background:#fff;color:var(--ink);border:2px solid #B6E4D8;border-radius:12px;box-shadow:8px 8px 0 #B6E4D8}
.page-learning .detail-art:before{top:52px;left:12%;transform:none;width:76%;height:170px;border:0;border-radius:8px;background:linear-gradient(90deg,#1B3FD8 0 8px,transparent 8px),repeating-linear-gradient(0deg,#F4F8F7 0 35px,#DDEBE7 36px 37px);box-shadow:none}
.page-learning .detail-art:after{inset:0;background:radial-gradient(circle at 29% 36%,#14D3C7 0 5px,transparent 6px),radial-gradient(circle at 49% 51%,#1B3FD8 0 5px,transparent 6px),radial-gradient(circle at 70% 31%,#14D3C7 0 5px,transparent 6px),linear-gradient(0deg,rgba(255,255,255,.98),transparent 72%)}
.page-learning .detail-art__shape{top:90px;left:47%;width:24%;height:65px;background:#1B3FD8;border:0;border-radius:6px;transform:rotate(7deg)}
.page-learning .detail-art__shape:after{inset:12px;border:1px solid rgba(255,255,255,.7);border-radius:3px}
.page-learning .detail-art__index{color:#087E79}
.page-learning .detail-art__caption{color:var(--ink)}
.page-learning .detail-art__caption small{color:#087E79}
.page-learning .detail-sections{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.page-learning .detail-section{border:0;border-radius:4px 4px 22px 4px;box-shadow:none;background:#fff;padding:28px;border-bottom:3px solid #14D3C7}
.page-learning .detail-section__no{display:inline-flex;width:max-content;padding:7px 10px;border-radius:4px;background:#E5F7F1;color:#087E79}
.page-learning .detail-section h3{margin-top:18px}
.page-learning .detail-deliverables{background:#DDEFE9;border-radius:12px}
@media(max-width:760px){.page-learning .detail-hero__grid{grid-template-columns:1fr}.page-learning .detail-art{min-height:280px}.page-learning .detail-sections{grid-template-columns:1fr}}

/* Product-page responsive guardrails */
@media(max-width:760px){
 .page-product-development .detail-section{grid-template-columns:1fr;gap:10px}
 .page-product-development .detail-art{min-height:280px}
 .page-contact .hero-art--contact{grid-column:auto;grid-row:auto}
}


/* HOMEPAGE EXTENSION — outcome storytelling, gentle colour rhythm and motion */
.home-hero__typed{display:inline;color:var(--brand);position:relative}
.home-hero__cursor{display:inline-block;width:3px;height:.82em;margin-left:5px;vertical-align:-.02em;background:var(--teal);animation:homeCursorBlink .85s steps(2,start) infinite}
@keyframes homeCursorBlink{to{visibility:hidden}}
.home-outcomes{position:relative;overflow:hidden;background:linear-gradient(180deg,#F4F8FF 0%,#FFFFFF 78%);padding-block:clamp(76px,10vw,132px)}
.home-outcomes:before{content:"";position:absolute;width:420px;height:420px;right:-180px;top:5%;border-radius:50%;background:radial-gradient(circle,rgba(20,211,199,.13),rgba(20,211,199,0) 68%);pointer-events:none}
.home-outcomes__head{max-width:760px;margin-bottom:clamp(32px,5vw,58px);position:relative}
.home-outcomes__head .lede{max-width:620px}
.home-outcomes__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;align-items:stretch;position:relative}
.home-outcome{min-width:0;position:relative;overflow:hidden;border:1px solid #E0E7F3;background:rgba(255,255,255,.88);border-radius:18px 18px 5px 18px;display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(31,51,89,.035);transition:transform .35s ease,box-shadow .35s ease}
.home-outcome:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(31,51,89,.09)}
.home-outcome--large{background:linear-gradient(150deg,#FFFFFF 18%,#EDF3FF);border-color:#D7E1F7}
.home-outcome__number{position:absolute;z-index:2;top:17px;left:19px;font:600 .76rem/1 var(--font-mono,monospace);letter-spacing:.08em;color:var(--brand)}
.home-outcome__art{height:220px;position:relative;overflow:hidden;background:#EAF0FC;display:flex;align-items:center;justify-content:center}
.home-outcome--large .home-outcome__art{height:260px}
.home-outcome__art b{position:relative;z-index:2;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.06em;color:#1C2B48}
.home-outcome__art i{position:absolute;display:block}
.home-outcome__art--clarity{background:linear-gradient(135deg,#E6EEFF,#F7FAFF)}
.home-outcome__art--clarity i{width:44%;height:56%;border:1px solid #C7D5F7;border-radius:9px;background:rgba(255,255,255,.72);box-shadow:0 12px 28px rgba(27,63,216,.06)}
.home-outcome__art--clarity i:nth-child(1){transform:translate(-28px,10px) rotate(-9deg)}
.home-outcome__art--clarity i:nth-child(2){transform:translate(5px,-5px) rotate(3deg)}
.home-outcome__art--clarity i:nth-child(3){transform:translate(34px,12px) rotate(10deg);background:linear-gradient(140deg,rgba(20,211,199,.3),rgba(255,255,255,.85))}
.home-outcome__art--flow{background:linear-gradient(140deg,#E4F8F4,#F5FBFA)}
.home-outcome__art--flow:before{content:"";position:absolute;left:17%;right:17%;height:2px;background:linear-gradient(90deg,#1B3FD8,#14D3C7)}
.home-outcome__art--flow i{width:42px;height:42px;border-radius:13px;background:#fff;border:1px solid #BDE8E1;box-shadow:0 8px 18px rgba(8,126,121,.08)}
.home-outcome__art--flow i:nth-child(1){left:12%;top:calc(50% - 21px)}
.home-outcome__art--flow i:nth-child(2){left:calc(50% - 21px);top:calc(50% - 21px);background:#D7F8F1;border-color:#83D9CC}
.home-outcome__art--flow i:nth-child(3){right:12%;top:calc(50% - 21px)}
.home-outcome__art--growth{background:linear-gradient(145deg,#F3F0FF,#F9F8FF)}
.home-outcome__art--growth i{bottom:34px;width:16%;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#14D3C7,#1B3FD8)}
.home-outcome__art--growth i:nth-child(1){left:22%;height:34%}
.home-outcome__art--growth i:nth-child(2){left:42%;height:51%}
.home-outcome__art--growth i:nth-child(3){left:62%;height:72%}
.home-outcome__body{padding:23px 24px 28px}
.home-outcome__body h3{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.035em;margin:0 0 9px}
.home-outcome__body p{margin:0;color:var(--muted);line-height:1.7;font-size:.96rem}
.home-partner{position:relative;overflow:hidden;background:linear-gradient(118deg,#F2F7FF 0%,#F8FBFA 53%,#F0FAF8 100%);padding-block:clamp(72px,9vw,120px)}
.home-partner:after{content:"";position:absolute;left:-150px;bottom:-260px;width:480px;height:480px;border-radius:50%;border:1px solid rgba(27,63,216,.1);box-shadow:0 0 0 32px rgba(27,63,216,.025),0 0 0 70px rgba(20,211,199,.035);pointer-events:none}
.home-partner__panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:clamp(36px,7vw,100px);padding:clamp(28px,5vw,68px);border:1px solid rgba(211,224,241,.9);border-radius:24px;background:rgba(255,255,255,.8);box-shadow:0 25px 70px rgba(37,58,94,.055);backdrop-filter:blur(8px)}
.home-partner__side{display:flex;flex-direction:column;align-items:flex-start}
.home-partner__mark{width:160px;height:160px;margin:38px 0 24px;position:relative;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#1B3FD8,#142A91);color:#fff;box-shadow:0 20px 42px rgba(27,63,216,.17)}
.home-partner__mark span{font-size:5rem;line-height:1;font-weight:800;letter-spacing:-.1em;margin-right:.1em}
.home-partner__mark i{position:absolute;width:13px;height:13px;border-radius:50%;background:#14D3C7}
.home-partner__mark i:nth-of-type(1){right:10px;top:29px}
.home-partner__mark i:nth-of-type(2){right:0;top:57px;width:7px;height:7px}
.home-partner__mark i:nth-of-type(3){right:22px;top:8px;width:6px;height:6px}
.home-partner__side>p{max-width:280px;color:var(--muted);font-size:1.04rem;line-height:1.75}
.home-partner__content>.lede{max-width:650px}
.home-partner__principles{margin:32px 0 28px;border-top:1px solid var(--line-soft)}
.home-partner__principles>div{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.home-partner__principles>div>span{font:600 .78rem/1.7 var(--font-mono,monospace);color:var(--brand)}
.home-partner__principles h3{font-size:1rem;margin:0 0 4px}
.home-partner__principles p{grid-column:2;margin:0;color:var(--muted);font-size:.93rem;line-height:1.65}
@media(max-width:900px){.home-outcomes__grid{grid-template-columns:1fr 1fr}.home-outcome--large{grid-column:1/-1}.home-outcome--large .home-outcome__art{height:220px}.home-partner__panel{grid-template-columns:1fr 1.5fr;gap:28px}.home-partner__mark{width:120px;height:120px}.home-partner__mark span{font-size:4rem}}
@media(max-width:640px){.home-outcomes__grid{grid-template-columns:1fr;gap:14px}.home-outcome--large{grid-column:auto}.home-outcome__art,.home-outcome--large .home-outcome__art{height:190px}.home-outcome__body{padding:21px}.home-partner__panel{grid-template-columns:1fr;padding:25px 22px;gap:18px;border-radius:18px}.home-partner__mark{width:88px;height:88px;margin:24px 0 16px}.home-partner__mark span{font-size:3rem}.home-partner__side>p{max-width:100%}.home-partner__principles{margin-top:24px}}
/* Make the existing scroll reveals feel intentional without forcing parallax. */
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal:not(.is-visible){opacity:0;transform:translateY(22px)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.home-service-grid .reveal:nth-child(2),.home-process__grid .reveal:nth-child(2){transition-delay:.08s}
.home-service-grid .reveal:nth-child(3),.home-process__grid .reveal:nth-child(3){transition-delay:.16s}
.home-service-grid .reveal:nth-child(4),.home-process__grid .reveal:nth-child(4){transition-delay:.24s}
.home-service-grid .reveal:nth-child(5),.home-process__grid .reveal:nth-child(5){transition-delay:.32s}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.home-hero__cursor{animation:none}.reveal,.home-outcome{transition:none!important}.reveal:not(.is-visible){opacity:1;transform:none}}


/* Keep the mobile service links collapsed until requested. */
.mobile-nav-toggle{width:100%;display:flex;align-items:center;gap:12px;padding:15px 0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:1.05rem;text-align:left;cursor:pointer}
.mobile-nav-toggle>span:first-child{flex:1}
.mobile-nav-chevron{font-size:1.1rem;line-height:1;color:var(--muted);transition:transform .2s ease}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron{transform:rotate(180deg)}
.mobile-submenu[hidden]{display:none}
.mobile-submenu:not([hidden]){display:grid;grid-template-columns:1fr;gap:1px;padding:0 0 12px 14px;animation:mobile-submenu-in .18s ease both}
@keyframes mobile-submenu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:761px){.mobile-nav-toggle,.mobile-submenu{display:none!important}}
@media(prefers-reduced-motion:reduce){.mobile-nav-chevron,.mobile-submenu:not([hidden]){transition:none;animation:none}}

/* Joblira product showcase */
.page-joblira .joblira-showcase{position:relative;overflow:hidden;background:#fff;color:#111;padding-top:0}
.page-joblira .joblira-showcase__intro{background:#e7f5f4;text-align:center;padding:clamp(3.4rem,8vw,7rem) 1.25rem clamp(2.5rem,5vw,4.5rem)}
.page-joblira .joblira-showcase__intro h1{font-size:clamp(3.4rem,9.5vw,8rem);line-height:.96;letter-spacing:-.075em;font-weight:800;margin:1rem 0 1.25rem}
.page-joblira .joblira-showcase__intro h1 span{color:#079b8c}
.page-joblira .joblira-showcase__intro p{max-width:650px;margin:0 auto;color:#50565b;font-size:clamp(1.05rem,2.2vw,1.45rem);line-height:1.45}
.page-joblira .joblira-showcase__intro strong{display:block;max-width:800px;margin:2.5rem auto 0;font-size:clamp(1.9rem,5vw,3.25rem);line-height:1.12;letter-spacing:-.045em;color:#079b8c}
.page-joblira .joblira-showcase__intro em{font-style:normal;color:#e0522c}
.page-joblira .joblira-showcase__visuals{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,4rem);align-items:start;padding-top:clamp(2.5rem,7vw,6rem);padding-bottom:clamp(4rem,8vw,7rem)}
.page-joblira .joblira-device{margin:0;position:relative;min-width:0}
.page-joblira .joblira-device:before{content:"";position:absolute;z-index:0;width:100%;aspect-ratio:1;border-radius:50%;top:12%;left:0;background:radial-gradient(circle,#d8f3ee 0%,#edf9f7 58%,rgba(255,255,255,0) 72%)}
.page-joblira .joblira-device img{position:relative;z-index:1;display:block;width:100%;height:auto;object-fit:contain;border-radius:1.25rem}
.page-joblira .joblira-device--front{max-width:540px;justify-self:end}
.page-joblira .joblira-device--angle{max-width:500px;margin-top:clamp(2rem,10vw,8rem);justify-self:start}
.page-joblira .joblira-device figcaption{position:relative;z-index:2;display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-size:.95rem;font-weight:650;color:#3b444a}
.page-joblira .joblira-device figcaption span{display:grid;place-items:center;width:2rem;height:2rem;flex:none;border-radius:50%;background:#e4f5f2;color:#078f83;font-size:.75rem}
.page-joblira .joblira-showcase__note{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);display:flex;align-items:center;gap:.65rem;white-space:nowrap;padding:.8rem 1.15rem;border:1px solid #dce8e6;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 8px 30px rgba(16,66,61,.07);font-size:.85rem;font-weight:650;color:#34464a}
.page-joblira .joblira-showcase__dot{width:.55rem;height:.55rem;border-radius:50%;background:#08a08e}
.page-joblira .joblira-showcase__footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1.25rem,calc((100vw - 1180px)/2));background:#079b8c;color:#fff;font-weight:750}
.page-joblira .joblira-showcase__footer span:last-child{font-style:italic;text-align:right}
.page-joblira .joblira-intro-band{background:#f8fbfa}
.page-joblira .joblira-intro-band__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.page-joblira .joblira-intro-band__inner .h1{max-width:520px}
.page-joblira .joblira-intro-band__inner .lede{font-size:1.1rem}
@media(max-width:760px){
 .page-joblira .joblira-showcase__intro{padding:3rem 1.1rem 2.6rem}
 .page-joblira .joblira-showcase__intro h1{font-size:clamp(3.1rem,15vw,5.6rem)}
 .page-joblira .joblira-showcase__intro strong{margin-top:1.8rem}
 .page-joblira .joblira-showcase__visuals{grid-template-columns:1fr;gap:2.5rem;padding-top:2rem;padding-bottom:5rem}
 .page-joblira .joblira-device--front,.page-joblira .joblira-device--angle{width:min(100%,520px);justify-self:center;margin:0 auto}
 .page-joblira .joblira-device--angle{width:min(92%,460px)}
 .page-joblira .joblira-showcase__note{bottom:1.25rem;font-size:.72rem;padding:.7rem .85rem}
 .page-joblira .joblira-showcase__footer{font-size:.78rem;align-items:flex-start}
 .page-joblira .joblira-showcase__footer span:last-child{max-width:54%}
 .page-joblira .joblira-intro-band__inner{grid-template-columns:1fr;gap:1rem}
}
@media(prefers-reduced-motion:reduce){.page-joblira .joblira-device{scroll-behavior:auto}}