/* ==========================================================================
   ISU Design System  ·  Executive Heritage Digital
   --------------------------------------------------------------------------
   Token layer per DESIGN.md. Framework-free, RTL-first, written with CSS
   logical properties so the same sheet serves an LTR locale unchanged.

   Heritage (geometric lattice, gold) meets technological precision (teal
   depth, clean type). The hexagon from the ISU logo is the recurring motif.

   SHAPE SYSTEM (DESIGN.md, Rounded Level 2):
     controls: buttons, inputs .. 8px
     containers, cards, masks ... 16px
     pills ...................... status tags and chips ONLY
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Primary — teal. Navigation, deep grounds, core calls to action. */
  --primary:              #00484a;
  --on-primary:           #ffffff;
  --primary-container:    #1c6163;
  --on-primary-container: #9adadb;
  --surface-tint:         #25686a;
  --primary-fixed:        #aeeef0;
  --primary-fixed-dim:    #92d2d3;
  --inverse-primary:      #92d2d3;

  /* Secondary — gold. Highlights, active states, conversion points. */
  --secondary:              #795900;
  --on-secondary:           #ffffff;
  --secondary-container:    #ffc641;
  --on-secondary-container: #715300;
  --secondary-fixed:        #ffdfa0;
  --secondary-fixed-dim:    #f6be39;
  --on-secondary-fixed-variant: #5c4300;

  /* Surfaces — off-white with cool teal-blue tinting for layering. */
  --surface:                    #f9f9ff;
  --surface-dim:                #d0daf0;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f0f3ff;
  --surface-container:          #e7eeff;
  --surface-container-high:     #dee8ff;
  --surface-container-highest:  #d9e3f9;
  --on-surface:                 #121c2c;
  --on-surface-variant:         #3f4849;
  --inverse-surface:            #273141;
  --inverse-on-surface:         #ebf1ff;
  --outline:                    #6f7979;
  --outline-variant:            #bfc8c8;

  --error:           #ba1a1a;
  --on-error:        #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* ======================================================================
     SEMANTIC ALIASES — LIGHT GROUND, DARK CHROME
     Three constraints had to hold at once: the logo is white so it needs a
     dark bar to live on; the client rejected a plain white page; and an
     accounting audience should not be reading long service lists off a dark
     field. So the page is light and layered, while the header, the footer and
     the closing bands stay deep teal. Every value is contrast-checked against
     the surface it actually sits on.
     ====================================================================== */

  /* Grounds — tinted, never plain white. */
  --bg:            #f2f6f7;   /* page ground: cool paper, not #fff */
  --bg-sunken:     #e6eef0;   /* alternating band */
  --surface:       #ffffff;   /* cards lift off the ground by being pure white */
  --surface-2:     #eef4f5;   /* hovered / raised */
  --surface-brand: #dfeeee;   /* icon chips, tinted wells */

  --brand:         #0f5f63;   /* 6.8:1 on --bg */
  --brand-deep:    #08282c;   /* nav, footer, closing bands */
  --brand-soft:    #dfeeee;
  --brand-solid:   #0f5f63;   /* 7.3:1 with white */

  --accent:        #ffc641;
  --accent-ink:    #2a1f00;   /* on gold: 11.2:1 */
  --accent-text:   #8a6508;   /* gold as TEXT on light: 4.9:1 */

  --text:          #0d1f22;   /* 15.8:1 on --bg */
  --text-2:        #3d5457;   /* 7.4:1  */
  --text-3:        #556d70;   /* 5.0:1  */
  --text-invert:   #ffffff;

  --line:          #d3e0e2;
  --line-strong:   #b6c9cc;

  --danger:        #b3261e;
  --danger-soft:   #fceceb;

  /* Kept for components still addressing the old ramp by name. */
  --teal-900: #061a1d;
  --teal-800: var(--brand-deep);
  --teal-700: #0c4448;
  --teal-600: var(--brand);
  --teal-500: #17787d;
  --teal-400: #3f9ea3;
  --teal-300: #8fc9cb;
  --teal-100: #cfe6e7;
  --teal-50:  var(--brand-soft);
  --gold-700: var(--accent-text);
  --gold-600: #c9900e;
  --gold-500: var(--accent);
  --gold-300: #ffdfa0;
  --gold-100: #fff3d6;
  --ink-900:  var(--text);
  --ink-700:  var(--text-2);
  --ink-500:  var(--text-3);

  /* Ambient shadows, tinted to the brand hue rather than pure black. */
  --shadow-1: 0 1px 2px rgba(8, 40, 44, .05), 0 1px 3px rgba(8, 40, 44, .04);
  --shadow-2: 0 4px 20px rgba(8, 40, 44, .07), 0 2px 6px rgba(8, 40, 44, .05);
  --shadow-3: 0 20px 50px rgba(8, 40, 44, .12), 0 6px 16px rgba(8, 40, 44, .07);
  --edge:     inset 0 1px 0 rgba(255, 255, 255, .8);

  /* Shape (DESIGN.md) */
  --r-control: .5rem;
  --r-container: 1rem;
  --r-pill: 9999px;

  /* Spacing (DESIGN.md: 8px baseline, 1280px container, 24px gutter) */
  --gut: clamp(1rem, 3vw, 1.5rem);
  --shell: 1280px;
  --sec-y: clamp(3.5rem, 7vw, 5rem);
  --nav-h: 76px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .3s;

  --lattice: rgba(15, 95, 99, .07);

  color-scheme: light only;
}

/* ----------------------------------------------------------------- 2. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  /* Arabic needs more leading than Latin: diacritics sit above, descenders below */
  line-height: 1.9;
  font-weight: 400;
  /* Arabic letterforms are cursive and connected — tracking corrupts them. */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-inline-size: 100%; block-size: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

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

::selection { background: var(--gold-500); color: var(--ink-900); }

/* Latin fragments inside Arabic copy: isolate the bidi run so punctuation and
   digits do not jump to the wrong side of the sentence. */
.lat {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ------------------------------------------------------------ 3. TYPOGRAPHY */

/* DESIGN.md pairs Be Vietnam Pro (display) with IBM Plex Sans (body) and
   JetBrains Mono (labels), and calls for a geometric Arabic face of matching
   weight. Cairo carries the Arabic headlines; Be Vietnam Pro handles the Latin
   inside them; IBM Plex Sans Arabic covers body in both scripts. */
.d1, .d2, .d3, .h4 {
  font-family: "Cairo", "Be Vietnam Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.35; /* Arabic display type still needs headroom */
  letter-spacing: 0;
  color: var(--text);
  text-wrap: balance;
}

/* Technical labels and metadata, reinforcing the ERP character. Latin only:
   mono faces have no Arabic, so Arabic labels stay in the body face. */
.label-caps {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Figures line up in columns wherever they are compared. */
.stat__n, .plan__price b, .marquee__item .lat { font-variant-numeric: tabular-nums; }

.d1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem); line-height: 1.28; font-weight: 700; }
.d2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem); }
.d3 { font-size: clamp(1.3rem, 1.05rem + 1.05vw, 1.75rem); }
.h4 { font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); line-height: 1.6; }

.lede {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem);
  line-height: 1.85;
  color: var(--text-2);
  max-inline-size: 62ch;
}

.body   { color: var(--text-2); max-inline-size: 68ch; }
.muted  { color: var(--text-3); }
.small  { font-size: .875rem; line-height: 1.8; }

/* Section eyebrow. Arabic has no uppercase, so the label is set apart by
   weight, colour and a leading rule rather than by tracking. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent-text);
  margin-block-end: .9rem;
}
.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 2px;
  background: var(--gold-500);
  border-radius: 2px;
  flex: none;
}

.on-dark { color: rgba(255, 255, 255, .78); }
.on-dark .d1, .on-dark .d2, .on-dark .d3, .on-dark .h4 { color: #fff; }
.on-dark .lede, .on-dark .body { color: rgba(255, 255, 255, .8); }
.on-dark .eyebrow { color: var(--gold-300); }
.on-dark .eyebrow::before { background: var(--gold-500); }

/* --------------------------------------------------------------- 4. LAYOUT */

.shell {
  inline-size: min(100% - (var(--gut) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--sec-y); }
.section--sunken { background: var(--bg-sunken); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* Soft brand wash. A whisper of teal behind white content, not a saturated
   field: the page stays light the whole way down and the photography keeps
   its own colour instead of being tinted into the brand. */
.block-wash {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
}
.block-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 92% -10%, rgba(146, 210, 211, .13), transparent 62%),
    radial-gradient(55% 50% at 2% 108%, rgba(255, 198, 65, .10), transparent 60%);
  pointer-events: none;
}

.sec-head { max-inline-size: 58ch; margin-block-end: clamp(2rem, 4vw, 3.25rem); }

/* --------------------------------------------------------------- 5. BUTTONS */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-block-size: 48px;
  padding-inline: 1.5rem;
  padding-block: .55rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: .975rem;
  line-height: 1.4;
  /* CTA labels stay on one line at desktop. */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              transform .12s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }

/* DESIGN.md — Secondary: gold ground, dark teal label. For "get a quote" and
   "contact us". Contrast 11.2:1. */
.btn--primary {
  --btn-bg: var(--secondary-container);
  --btn-fg: var(--accent-ink);
  box-shadow: var(--shadow-2);
}
.btn--primary:hover { --btn-bg: var(--secondary-fixed-dim); }

/* DESIGN.md — Primary: teal ground, white label. On hover the ground darkens
   and a 2px gold rule appears along the bottom edge. Contrast 11.4:1. */
.btn--solid {
  --btn-bg: var(--brand-solid);
  --btn-fg: #ffffff;
  border-block-end: 2px solid transparent;
}
.btn--solid:hover {
  --btn-bg: var(--surface-tint);
  border-block-end-color: var(--secondary-container);
}

/* Outline on light: never relies on the page background for legibility. */
/* DESIGN.md — Ghost: clear ground, teal border. Tertiary actions. */
.btn--line { --btn-fg: var(--brand); --btn-bd: color-mix(in srgb, var(--brand) 48%, transparent); }
.btn--line:hover { --btn-bg: var(--brand-soft); --btn-bd: var(--brand); }

/* Outline on the deep-teal block: white label on #06282c is 15.4:1. */
.btn--onbrand { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .42); }
.btn--onbrand:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: rgba(255, 255, 255, .7); }

.btn--wide { inline-size: 100%; }
.btn .ico { inline-size: 20px; block-size: 20px; flex: none; }
/* Directional glyphs mirror with the writing direction. */
.btn .ico--dir { transform: scaleX(-1); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: background-color .01ms; }
}

/* ---------------------------------------------------------------- 6. BADGES */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid transparent;
}
.badge--gold { background: var(--gold-100); color: var(--gold-700); }
.badge--onbrand { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .22); }
.badge .ico { inline-size: 15px; block-size: 15px; }

/* --------------------------------------------------------------- 7. NAVBAR */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: rgba(11, 42, 46, .78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-block-end: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav[data-stuck="true"] { border-block-end-color: var(--line); box-shadow: var(--shadow-1); }

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__in {
  block-size: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { block-size: 38px; inline-size: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-inline-start: auto;
}
.nav__link {
  padding: .5rem .7rem;
  border-radius: var(--r-control);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--brand); font-weight: 600; }

.nav__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.icon-btn {
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .ico { inline-size: 20px; block-size: 20px; }

.nav__burger { display: none; }

/* Condense at the point the single-line rule would break, not at a guess. */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__cta { display: none; }
  /* The auto margin that pushes the bar's end group to the far edge lives on
     .nav__links, which is hidden here. Without moving it onto .nav__actions the
     burger collapses back against the logo instead of holding the far edge. */
  .nav__actions { margin-inline-start: auto; }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  padding: var(--gut);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
}
/* `visibility` is deliberately NOT transitioned. Animating it ties whether the
   menu can be used to whether a transition finishes; the flip stays instant and
   only opacity and transform animate. */
@media (prefers-reduced-motion: no-preference) {
  .drawer { transition: opacity .28s var(--ease), transform .28s var(--ease); }
}
.drawer[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.5rem; }
.drawer__top img { block-size: 36px; inline-size: auto; }
.drawer a.nav__link { font-size: 1.125rem; padding-block: .85rem; border-block-end: 1px solid var(--line); border-radius: 0; }
.drawer .btn { margin-block-start: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

/* ------------------------------------------------------------------ 8. HERO */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem); }

/* A single word of the headline carries the gold, drawn as a soft underline
   rather than a colour swap so the sentence stays one readable block. */
.mark {
  position: relative;
  color: var(--brand);
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  inset-inline: -.1em;
  inset-block-end: .04em;
  block-size: .32em;
  background: var(--gold-500);
  opacity: .32;
  border-radius: 3px;
  z-index: -1;
}
.d1 .mark, .d2 .mark { isolation: isolate; }

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

.hero__copy { max-inline-size: 34rem; }
.hero .d1 { margin-block-end: 1.1rem; }
.hero__sub { margin-block-end: 2rem; max-inline-size: 46ch; }
.hero .btn-row { gap: .85rem; }

/* Photography is shown as photography: no duotone, no colour filter. The only
   treatment is a hairline and the shared container radius, so the client's own
   images read exactly as shot. */
.figure {
  position: relative;
  border-radius: var(--r-container);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.figure--contain { background: var(--surface); }
.figure--contain img { object-fit: contain; padding: clamp(1rem, 3vw, 2rem); }
.figure--plain { border: 0; background: transparent; }

.hero__media { position: relative; }
.hero__media .figure { aspect-ratio: 4 / 3.1; box-shadow: var(--shadow-3); }

/* Floating credential card: real, verifiable content — not a mock product UI. */
.hero__card {
  position: absolute;
  inset-block-end: -1.25rem;
  inset-inline-start: -1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-3);
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  max-inline-size: 17rem;
}
.hero__card .ring {
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  flex: none;
}
.hero__card .ring .ico { inline-size: 22px; block-size: 22px; }
.hero__card strong { display: block; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.hero__card span { font-size: .8125rem; color: var(--text-3); line-height: 1.5; }

@media (max-width: 560px) {
  .hero__card { position: static; margin-block-start: 1rem; max-inline-size: none; inset: auto; }
}

/* ----------------------------------------------------- 9. CREDENTIALS BAND */

.creds {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  overflow: hidden;
}
@media (min-width: 760px) { .creds { grid-template-columns: repeat(3, 1fr); } }

.cred {
  background: var(--surface);
  padding: 1.5rem clamp(1.15rem, 2.5vw, 1.75rem);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cred__ico {
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  flex: none;
}
.cred__ico .ico { inline-size: 22px; block-size: 22px; }
.cred__ico img { inline-size: 22px; block-size: 22px; }
.cred h3 { font-size: .9375rem; font-weight: 600; margin-block-end: .2rem; line-height: 1.6; }
.cred p { font-size: .8125rem; color: var(--text-3); line-height: 1.7; }

/* ------------------------------------------------------------- 10. BENTO */

/* Exactly five cells for five capabilities. No filler tiles. */
/* Four capabilities, four cells, arranged 4+2 / 2+4 so the row rhythm shifts
   instead of repeating a symmetrical strip. */
.bento { display: grid; gap: 1rem; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
  .bento > :nth-child(1) { grid-column: span 4; }
  .bento > :nth-child(2) { grid-column: span 2; }
  .bento > :nth-child(3) { grid-column: span 2; }
  .bento > :nth-child(4) { grid-column: span 4; }
}

.tile {
  box-shadow: var(--edge);
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-block-size: 200px;
}
.tile h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; }
.tile p { font-size: .9375rem; color: var(--text-2); line-height: 1.8; }
.tile__ico {
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  margin-block-end: .35rem;
}
.tile__ico .ico { inline-size: 22px; block-size: 22px; }

/* Cell variant A: the client's own flat illustration sits alongside the copy
   rather than behind it, so nothing is laid over artwork that already has its
   own composition. */
.tile--art { flex-direction: row; align-items: center; gap: 1.5rem; }
.tile--art .tile__body { flex: 1 1 auto; min-inline-size: 0; }
.tile__art { flex: 0 0 clamp(96px, 22%, 168px); }
.tile__art img { inline-size: 100%; block-size: auto; }
@media (max-width: 560px) {
  .tile--art { flex-direction: column; align-items: flex-start; }
  .tile__art { flex: none; inline-size: 120px; }
}

/* Cell variant B: brand gradient ground, used once. */
.tile--brand {
  background: linear-gradient(155deg, var(--teal-600), var(--teal-800));
  border-color: transparent;
  color: #fff;
}
.tile--brand h3 { color: #fff; }
.tile--brand p { color: rgba(255, 255, 255, .84); }
.tile--brand .tile__ico { background: rgba(255, 255, 255, .16); color: #fff; }

/* Cell variant C: fine hex pattern echoing the logo mark. */
.tile--pattern { background: var(--surface-2); }
.tile--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
}

/* --------------------------------------------------------------- 11. TABS */

.tabs__list {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-block-end: .5rem;
  margin-block-end: 1.75rem;
  border-block-end: 1px solid var(--line);
  scrollbar-width: thin;
}
.tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-control);
  padding: .65rem 1.1rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text-3);
  white-space: nowrap;
  cursor: pointer;
  flex: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab[aria-selected="true"] { background: var(--brand); color: var(--text-invert); }

.tabs__panel { display: none; }
.tabs__panel[data-active="true"] { display: block; }

.modlist {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .modlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .modlist { grid-template-columns: repeat(3, 1fr); } }

.mod {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.05rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.7;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.mod:hover { border-color: var(--brand); transform: translateY(-2px); }
.mod .ico { inline-size: 20px; block-size: 20px; color: var(--brand); flex: none; margin-block-start: .25rem; }

@media (prefers-reduced-motion: reduce) { .mod:hover { transform: none; } }

/* -------------------------------------------------------- 12. STICKY SPLIT */

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .split { grid-template-columns: .85fr 1.15fr; align-items: start; } }

.split__sticky { position: static; }
@media (min-width: 960px) {
  .split__sticky { position: sticky; inset-block-start: calc(var(--nav-h) + 2.5rem); }
}
.split__sticky .figure { aspect-ratio: 4 / 3; margin-block-start: 1.75rem; }

.steps { display: grid; gap: 1rem; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  padding: 1.4rem 1.5rem;
}
.step h3 { font-size: 1rem; font-weight: 600; margin-block-end: .4rem; line-height: 1.6; }
.step p { font-size: .9rem; color: var(--text-2); line-height: 1.8; }
.step__ico { color: var(--brand); margin-block-end: .8rem; }
.step__ico .ico { inline-size: 24px; block-size: 24px; }

/* ---------------------------------------------------------------- 13. STATS */

.stats { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { background: var(--bg); padding: clamp(1.75rem, 3.5vw, 2.5rem) 1.25rem; text-align: center; }
.stat__n {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__l { font-size: .9375rem; color: var(--text-2); line-height: 1.7; margin-block-start: .35rem; display: block; }

/* -------------------------------------------------------------- 14. PRICING */

.plans { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  box-shadow: var(--edge);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-3);
  position: relative;
}
@media (min-width: 1040px) { .plan--featured { transform: translateY(-14px); } }

.plan__tag { position: absolute; inset-block-start: -.85rem; inset-inline-start: clamp(1.5rem, 3vw, 2rem); }
.plan__name { font-size: 1.125rem; font-weight: 600; line-height: 1.6; }
.plan__price { display: flex; align-items: baseline; gap: .4rem; margin-block: .85rem 1.15rem; flex-wrap: wrap; }
.plan__price b { font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.plan__price span { font-size: .9375rem; color: var(--text-3); }
.plan__note {
  font-size: .8125rem;
  color: var(--accent-text);
  font-weight: 600;
  background: var(--gold-100);
  border-radius: var(--r-pill);
  padding: .25rem .75rem;
  display: inline-block;
  margin-block-end: 1.25rem;
}

.plan__feats { display: grid; gap: .1rem; margin-block-end: 1.5rem; }
.plan__feats li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; line-height: 1.8; padding-block: .3rem; }
.plan__feats .ico { inline-size: 19px; block-size: 19px; color: var(--brand); flex: none; margin-block-start: .3rem; }
.plan .btn { margin-block-start: auto; }

/* --------------------------------------------------------- 15. FEATURE LIST */

.checks { display: grid; gap: .85rem; }
@media (min-width: 620px) { .checks { grid-template-columns: repeat(2, 1fr); } }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.8; color: var(--text-2); }
.check .ico { inline-size: 21px; block-size: 21px; color: var(--brand); flex: none; margin-block-start: .3rem; }
.on-dark .check { color: rgba(255, 255, 255, .84); }
.on-dark .check .ico { color: var(--gold-500); }

/* ------------------------------------------------------- 15b. TRUST CHIPS */

.trust { display: flex; flex-wrap: wrap; gap: .75rem; }
.trust li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: var(--shadow-1);
}
.trust .ico { inline-size: 20px; block-size: 20px; color: var(--brand); flex: none; }

/* --------------------------------------------- 15c. BORDERED FEATURE GRID */

/* Six items separated by hairlines instead of six identical card boxes:
   the grid gap itself carries the rule, so only one line sits between cells. */
.featgrid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  overflow: hidden;
}
@media (min-width: 640px) { .featgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .featgrid { grid-template-columns: repeat(3, 1fr); } }

.feat { background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem); }
.feat__ico { color: var(--brand); margin-block-end: .9rem; }
.feat__ico .ico { inline-size: 26px; block-size: 26px; }
.feat h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; margin-block-end: .45rem; }
.feat p { font-size: .9375rem; color: var(--text-2); line-height: 1.85; }

/* ------------------------------------------------------------- 15d. QUOTE */

.quote {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) { .quote { grid-template-columns: 1fr 1fr; } }
.quote__text {
  font-size: clamp(1.2rem, 1.02rem + .8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--text);
  border-inline-start: 3px solid var(--gold-500);
  padding-inline-start: 1.25rem;
}
.quote__by { margin-block-start: 1rem; font-size: .9rem; color: var(--text-3); }

/* --------------------------------------------------------- 15e. ITEM ROWS */

/* Four offerings as divided rows, not a fourth grid of identical cards. */
.itemrows { display: grid; gap: 0; }
@media (min-width: 860px) { .itemrows { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); } }

.itemrow {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-block: 1.6rem;
  border-block-start: 1px solid var(--line);
}
.itemrow__ico {
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  flex: none;
}
.itemrow__ico .ico { inline-size: 22px; block-size: 22px; }
.itemrow h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; margin-block-end: .35rem; }
.itemrow p { font-size: .9375rem; color: var(--text-2); line-height: 1.85; }

/* ---------------------------------------------------------------- 16. FORM */

.form { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.field label { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.6; }
.field .req { color: var(--danger); font-weight: 400; }

.field input, .field select, .field textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  color: var(--text);
  line-height: 1.7;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-block-size: 130px; resize: vertical; }
.field select {
  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='%238aa4a4' 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: left .9rem center;
  background-size: 18px;
  padding-inline-start: 2.6rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);
}
.field__help { font-size: .8125rem; color: var(--text-3); line-height: 1.6; }
.field__err { font-size: .8125rem; color: var(--danger); font-weight: 500; line-height: 1.6; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--danger); }
.field[data-invalid="true"] .field__err { display: block; }

/* The form panel sits on a light surface even inside the brand block, so every
   label, placeholder and focus ring keeps its audited contrast ratio. */
.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow-3);
  color: var(--text);
}

.form-status { font-size: .9rem; line-height: 1.7; border-radius: var(--r-control); padding: .8rem 1rem; display: none; }
.form-status[data-state="ok"] { display: block; background: var(--brand-soft); color: var(--brand); }
.form-status[data-state="err"] { display: block; background: var(--danger-soft); color: var(--danger); }

/* Submit button spinner: shape matches the button, not a generic overlay. */
.btn[data-busy="true"] { pointer-events: none; opacity: .75; }
.btn[data-busy="true"] .btn__label { visibility: hidden; }
.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  inline-size: 19px;
  block-size: 19px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--r-pill);
  animation: spin .7s linear infinite;
}
.btn { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-busy="true"]::after { animation-duration: 2s; }
}

/* --------------------------------------------------------------- 17. FOOTER */

.foot { background: var(--teal-900); color: rgba(255, 255, 255, .74); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot a { color: rgba(255, 255, 255, .74); transition: color .2s var(--ease); }
.foot a:hover { color: #fff; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot__logo img { block-size: 46px; inline-size: auto; margin-block-end: 1.1rem; }
.foot h4 { color: #fff; font-size: .9375rem; font-weight: 600; margin-block-end: 1rem; line-height: 1.6; }
.foot li { margin-block-end: .55rem; font-size: .9rem; line-height: 1.8; }
.foot__bar {
  margin-block-start: 2.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
}

.contact-line { display: flex; align-items: center; gap: .6rem; }
.contact-line .ico { inline-size: 18px; block-size: 18px; flex: none; opacity: .75; }

/* ------------------------------------------------------- 18. FLOATING CTA */

.whatsapp {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 35;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--teal-600);
  color: #fff;
  box-shadow: var(--shadow-3);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.whatsapp:hover { background: var(--teal-700); transform: translateY(-2px); }
.whatsapp .ico { inline-size: 26px; block-size: 26px; }
@media (prefers-reduced-motion: reduce) { .whatsapp:hover { transform: none; } }

/* ------------------------------------------------------------- 19. REVEALS */

/* Motivated motion only: content enters in reading order so the eye lands on
   the headline before the supporting detail. Everything collapses to static
   under reduced-motion, and to visible immediately if JS never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal][data-shown="true"] { opacity: 1; transform: none; }
}

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- 21. HERO SLIDER */

/* Slides are stacked in one grid cell so the track is always as tall as the
   tallest slide and nothing jumps as they rotate. */
.slider { position: relative; }
.slider__track { display: grid; }
.slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}
.slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .slide { transition: opacity .34s var(--ease), transform .34s var(--ease); }
  /* Each element inside the active slide arrives just after the slide itself. */
  .slide[data-active="true"] > * { animation: slideIn .42s var(--ease) backwards; }
  .slide[data-active="true"] > :nth-child(1) { animation-delay: .03s; }
  .slide[data-active="true"] > :nth-child(2) { animation-delay: .08s; }
  .slide[data-active="true"] > :nth-child(3) { animation-delay: .13s; }
  .slide[data-active="true"] > :nth-child(4) { animation-delay: .18s; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.slider__ui {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-block-start: 2.25rem;
  /* Dots only. Prev/next chrome was dropped: it crowded the phone layout and
     duplicated controls the slider already has (swipe, arrow keys, dots). */
  justify-content: flex-start;
}
.slider__dots { display: flex; gap: .5rem; }
/* The visible bar is 5px, but the button itself is 24px tall so it meets the
   minimum touch-target size. The bar is drawn by ::before, the autoplay timer
   by ::after; the button box stays transparent. */
.dot {
  inline-size: 30px;
  block-size: 24px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: inline-size .3s var(--ease);
}
.dot::before {
  content: "";
  display: block;
  block-size: 5px;
  inline-size: 100%;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color .3s var(--ease);
}
.dot[aria-selected="true"] { inline-size: 52px; }
.dot[aria-selected="true"]::before { background: var(--teal-100); }
/* The fill doubles as the autoplay timer, so the wait is visible. */
.dot[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 9.5px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 5px;
  border-radius: var(--r-pill);
  background: var(--brand);
  transform-origin: inline-start;
  transform: scaleX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .slider[data-playing="true"] .dot[aria-selected="true"]::after {
    animation: dotFill var(--slide-dur, 6500ms) linear forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot[aria-selected="true"]::after { transform: scaleX(1); }
}
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* -------------------------------------------------------- 22. LOGO BAND */

.logos {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  justify-items: center;
}
@media (min-width: 700px) { .logos { grid-template-columns: repeat(3, 1fr); } }

.logos figure { text-align: center; margin: 0; }
.logos__plate {
  display: grid;
  place-items: center;
  min-block-size: clamp(88px, 11vw, 116px);
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  background: #ffffff;
  border-radius: var(--r-container);
  box-shadow: var(--shadow-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.logos figure:hover .logos__plate {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}
@media (prefers-reduced-motion: reduce) {
  .logos figure:hover .logos__plate { transform: none; }
}
.logos img {
  block-size: clamp(46px, 6vw, 64px);
  inline-size: auto;
  margin-inline: auto;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.logos figure:hover img { transform: scale(1.03); }
.logos figcaption {
  margin-block-start: .9rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) { .logos figure:hover img { transform: none; } }

/* ---------------------------------------------------------- 23. MARQUEE */

/* One marquee on the page. The track is duplicated once and translated by
   exactly -50%, which is what makes the loop seamless. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; inline-size: max-content; gap: 0; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 42s linear infinite; }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(50%); } }

.marquee__group { display: flex; gap: 0; flex: none; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-inline: 1.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.marquee__item .ico { inline-size: 18px; block-size: 18px; color: var(--gold-500); flex: none; }

/* ------------------------------------------------------ 24. DEPARTMENTS */

/* Five departments side by side, each headed by its own accent rule. The
   colours are categorical: they identify a department, they are not decoration,
   and they are the only place on the page that leaves the teal/gold pair. */
.depts { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 620px)  { .depts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .depts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px) { .depts { grid-template-columns: repeat(5, 1fr); } }

.dept__rule {
  block-size: 4px;
  inline-size: 100%;
  border-radius: var(--r-pill);
  background: var(--dept, var(--brand));
  margin-block-end: 1rem;
}
.dept h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  margin-block-end: 1rem;
  color: var(--text);
}
.dept li {
  position: relative;
  padding-inline-start: 1.1rem;
  padding-block: .42rem;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--text-2);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.dept li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .95em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--dept, var(--brand));
}
.dept li:hover { color: var(--text); transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .dept li:hover { transform: none; } }

/* ------------------------------------------------ 25. SCROLL PROGRESS BAR */

.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 50;
  background: transparent;
  pointer-events: none;
}
.progress__fill {
  block-size: 100%;
  inline-size: 100%;
  transform-origin: inline-start;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), var(--gold-500));
}
/* Driven by the browser's own scroll timeline where supported, so there is no
   scroll handler and no JS on the main thread. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress__fill {
      animation: growX linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes growX { to { transform: scaleX(1); } }

/* ------------------------------------------------- 26. HOVER REFINEMENTS */

.tile, .step, .plan, .feat, .cred {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.tile:hover, .step:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-3);
}
.feat:hover { background: var(--surface-2); }
/* The icon shifts to gold as the card lifts. */
.tile:hover .tile__ico, .step:hover .step__ico, .feat:hover .feat__ico { color: var(--on-secondary-container); }
.tile:hover .tile__ico { background: var(--gold-100); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.plan--featured:hover { transform: translateY(-18px); }

@media (prefers-reduced-motion: reduce) {
  .tile:hover, .step:hover, .plan:hover { transform: none; }
  .plan--featured:hover { transform: translateY(-14px); }
}

/* Counters keep a fixed glyph width so the layout does not shudder while the
   digits run up. */
.stat__n { font-variant-numeric: tabular-nums; }

/* ====================================================================== 27
   MOBILE
   Phones get a tighter vertical rhythm, a reachable action bar pinned to the
   bottom of the screen, and the twenty-five modules folded into collapsible
   departments so the page stops being a wall of list items.
   ====================================================================== */

@media (max-width: 767px) {
  :root {
    --sec-y: 3.25rem;
    --nav-h: 62px;
  }

  .section--tight { padding-block: 2.5rem; }
  .sec-head { margin-block-end: 1.75rem; }

  /* The hero must reach its buttons fast on a phone. Everything that is not
     the promise, the proof point and the action is dropped: the credential
     chips repeat the logo band directly below, so they earn nothing here. */
  .hero { padding-block: 1.5rem 2.25rem; }
  .hero--cine {
    min-block-size: auto;
    padding-block: 2rem 1.75rem;
  }
  .hero__proof { display: none; }
  .hero__watermark { inline-size: 132px; opacity: .07; inset-block-end: 2%; }
  .hero .badge { font-size: .75rem; padding: .25rem .65rem; }
  .hero .d1 { margin-block-end: .8rem; }
  .hero__sub { margin-block-end: 1.35rem; font-size: 1rem; line-height: 1.75; }
  .hide-sm { display: none; }
  /* One thumb-width row of full-bleed actions, primary first. */
  .hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .hero .btn { inline-size: 100%; padding-inline: .6rem; font-size: .9rem; }
  .slider__ui { margin-block-start: 1.15rem; }
  .hero__grid { gap: 1.75rem; }
  .hero__sub { margin-block-end: 1.5rem; }
  .hero__media .figure { aspect-ratio: 16 / 11; }
  .hero .btn-row { gap: .6rem; }
  .hero .btn { flex: 1 1 auto; padding-inline: 1rem; }

  .nav__logo img { block-size: 32px; }

  /* Slider controls sit centred and finger-sized. */
  .slider__ui { justify-content: center; margin-block-start: 1.5rem; gap: .6rem; }

  .logos { gap: 2rem; }
  .marquee__item { font-size: .95rem; padding-inline: 1.1rem; }
  @media (prefers-reduced-motion: no-preference) {
    .marquee__track { animation-duration: 26s; }
  }

  .tile { min-block-size: 0; }
  .stat { padding-block: 1.5rem; }
  .quote__text { padding-inline-start: 1rem; }

  /* Footer links are the densest tap area on the page; give each one a full
     44px of height so neighbouring links cannot be hit by mistake. */
  .foot li { margin-block-end: 0; }
  .foot li a,
  .foot li.contact-line { min-block-size: 44px; display: flex; align-items: center; gap: .6rem; }
  .foot__bar { gap: .5rem 1rem; }

  /* Same rule for the contact cards: the phone, mail and WhatsApp links there
     are the primary conversion path on a phone. */
  .cred h3 a, .cred p a, .contact-line a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Clear the sticky action bar. The clearance lives inside the footer so the
     dark ground runs all the way behind the bar; putting it on <body> left a
     strip of the near-white page background showing under the footer. */
  .foot { padding-block-end: calc(1.25rem + 72px); }
}

/* ---- collapsible departments (phone + tablet) --------------------------- */

.dept > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
  padding-block: .35rem;
}
.dept > summary::-webkit-details-marker { display: none; }
.dept > summary h3 { margin: 0; flex: 1 1 auto; }
.dept__chev {
  inline-size: 20px;
  block-size: 20px;
  color: var(--text-3);
  flex: none;
  transition: transform .25s var(--ease);
}
.dept[open] > summary .dept__chev { transform: rotate(180deg); }

@media (min-width: 1140px) {
  /* Desktop shows all five columns open, so the control disappears. */
  .dept > summary { cursor: default; pointer-events: none; padding-block: 0; }
  .dept__chev { display: none; }
}

@media (max-width: 1139px) {
  .dept {
    border: 1px solid var(--line);
    border-radius: var(--r-container);
    padding: 1rem 1.15rem;
    background: var(--surface);
  }
  .dept .dept__rule { inline-size: 34px; margin-block-end: 0; }
  .dept > summary { padding-block: .25rem; }
  .dept[open] > ul { margin-block-start: .75rem; }
}

/* ------------------------------------------------- 28. STICKY ACTION BAR */

/* Phone-only. The two things a visitor actually wants from an ERP vendor are a
   call and a price, so both stay within thumb reach at all times. */
.actionbar { display: none; }

@media (max-width: 767px) {
  .actionbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .5rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-block-start: 1px solid var(--line);
  }
  .actionbar .btn { min-block-size: 46px; padding-inline: .75rem; font-size: .9375rem; }
  .actionbar__icon {
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--r-control);
    display: grid;
    place-items: center;
    background: var(--teal-600);
    color: #fff;
  }
  .actionbar__icon .ico { inline-size: 22px; block-size: 22px; }
  /* The floating bubble would collide with the bar. */
  .whatsapp { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .actionbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ================================================== 29. HERITAGE MOTIFS
   Two decorative devices, both derived from the brand rather than applied to
   it: a geometric lattice built from three gradients at 60-degree offsets
   (seamless by construction, no image request), and the logo's hexagon used
   as a watermark. Both are inert: fixed size, no repaint on scroll.
   ====================================================================== */

.lattice {
  position: relative;
  isolation: isolate;
  /* Decorative children (the watermark) are absolutely positioned and hang
     past the edge on purpose. Without clipping here they extend the document's
     scroll height and leave a blank strip under the footer. */
  overflow: hidden;
}
.lattice > * { position: relative; z-index: 1; }
.lattice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,  var(--lattice) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(120deg, var(--lattice) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,   var(--lattice) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 10%, transparent 72%);
}

/* The hexagon mark, oversized and faint, anchoring a section corner. */
.watermark {
  position: absolute;
  z-index: 0;
  inline-size: clamp(220px, 34vw, 460px);
  block-size: auto;
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
.watermark--start { inset-inline-start: -6%; inset-block-end: -14%; }
.watermark--end   { inset-inline-end: -5%;  inset-block-start: -12%; }

/* ==================================================== 30. CINEMATIC HERO
   A full-bleed Riyadh landmark behind the brand scrim, the lattice, and the
   hexagon watermark. The photograph carries the Saudi identity; the scrim
   guarantees the headline's contrast no matter which slide is showing.
   ====================================================================== */

.hero--cine {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-deep);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  min-block-size: clamp(540px, 76vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Chrome that sits above every slide: scrim, lattice, watermark. */
.hero__chrome {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Deepest at the reading edge (right, in RTL) so the type always holds. */
  background:
    linear-gradient(to left, rgba(0, 39, 42, .95) 0%, rgba(0, 54, 58, .82) 42%, rgba(0, 54, 58, .45) 100%),
    linear-gradient(to top, rgba(0, 39, 42, .9), transparent 55%);
}
.hero__chrome::after {
  content: "";
  position: absolute;
  inset: 0;
  --lattice: rgba(255, 255, 255, .07);
  background-image:
    repeating-linear-gradient(60deg,  var(--lattice) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(120deg, var(--lattice) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(to left, #000 0%, transparent 68%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 68%);
}
.hero__watermark {
  position: absolute;
  z-index: 2;
  inset-inline-end: 4%;
  inset-block-end: 6%;
  inline-size: clamp(150px, 20vw, 300px);
  opacity: .1;
  pointer-events: none;
}

/* Each slide brings its own photograph; the pair cross-fades together. */
.hero--cine .slide__bg { position: absolute; inset: 0; z-index: 0; }
.hero--cine .slide__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  /* A slow push-in that runs only while the slide is showing. */
  .hero--cine .slide[data-active="true"] .slide__bg img { animation: kenBurns 9s var(--ease) forwards; }
}
@keyframes kenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero--cine .slider__track { position: absolute; inset: 0; z-index: 0; }
.hero--cine .slide { grid-area: 1 / 1; }
.hero--cine .slide__inner { position: relative; z-index: 3; }
.hero--cine .hero__copy { max-inline-size: 40rem; }
.hero--cine .d1 { color: #fff; }
.hero--cine .lede { color: rgba(255, 255, 255, .86); }
.hero--cine .badge {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* On the photograph, the gold underline becomes a solid highlight. */
.hero--cine .mark { color: var(--secondary-container); }
.hero--cine .mark::after { background: var(--secondary-container); opacity: .22; }
/* Ghost button needs its own treatment over a photograph. */
.hero--cine .btn--line { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); }
.hero--cine .btn--line:hover { --btn-bg: rgba(255, 255, 255, .14); --btn-bd: #fff; }

.hero--cine .slider__ui { position: relative; z-index: 3; }
.hero--cine .dot::before { background: rgba(255, 255, 255, .32); }
.hero--cine .dot[aria-selected="true"]::before { background: rgba(255, 255, 255, .32); }
.hero--cine .dot[aria-selected="true"]::after { background: var(--secondary-container); }

/* The floating credential card overlaps the hero's lower edge. */
.hero__proof {
  position: relative;
  z-index: 3;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
}
.hero__proof .ico { inline-size: 18px; block-size: 18px; color: var(--secondary-container); flex: none; }

@media (prefers-reduced-transparency: reduce) {
  .hero__proof li, .hero--cine .badge { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 39, 42, .8); }
}

@media (max-width: 767px) {
  .hero--cine { min-block-size: 0; padding-block: 2rem 2.25rem; }
  .hero__watermark { inline-size: 130px; opacity: .08; }
  .hero__proof { gap: .5rem; }
  .hero__proof li { font-size: .82rem; padding: .5rem .75rem; }
}

/* ====================================================== 31. DARK SHOWCASE
   The page was uniformly light, which is why it read as a reskin. These
   sections are the spine: deep teal grounds carrying a Riyadh landmark, glass
   panels and gold. Light and dark now alternate down the page.
   ====================================================================== */

.dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-deep);
  color: #fff;
  --lattice: rgba(255, 255, 255, .07);
}
.dark > * { position: relative; z-index: 2; }
.dark .d1, .dark .d2, .dark .d3, .dark .h4 { color: #fff; }
.dark .lede, .dark .body { color: rgba(255, 255, 255, .82); }
.dark .eyebrow { color: var(--secondary-container); }
.dark .eyebrow::before { background: var(--secondary-container); }
.dark .mark { color: var(--secondary-container); }
.dark .mark::after { background: var(--secondary-container); opacity: .2; }
.dark .small, .dark .muted { color: rgba(255, 255, 255, .7); }
/* The pull-quote inherits the light-ground ink by default; on a dark section
   that lands at 1.08:1, so it is restated here. */
.dark .quote__text { color: #fff; border-inline-start-color: var(--secondary-container); }
.dark .quote__by { color: rgba(255, 255, 255, .72); }
.dark .cred { background: transparent; }
.dark .creds { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .16); }
.dark .cred h3 { color: #fff; }
.dark .cred p { color: rgba(255, 255, 255, .74); }
.dark .cred__ico { background: rgba(255, 255, 255, .12); color: var(--secondary-container); }
.dark .check { color: rgba(255, 255, 255, .84); }
.dark .check .ico { color: var(--secondary-container); }

/* Landmark photograph, held far back behind the scrim. */
.dark__bg { position: absolute; inset: 0; z-index: 0; }
.dark__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.dark__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(0, 39, 42, .97) 12%, rgba(0, 54, 58, .88) 55%, rgba(0, 54, 58, .72) 100%),
    linear-gradient(to bottom, rgba(0, 39, 42, .85), transparent 40%, rgba(0, 39, 42, .9));
}
.dark__lattice {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg,  var(--lattice) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(120deg, var(--lattice) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(90% 80% at 85% 10%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(90% 80% at 85% 10%, #000, transparent 75%);
}

/* A gold glow that tracks the pointer. Purely decorative, pointer-events off,
   and it simply never appears on touch devices or under reduced motion. */
.dark__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 198, 65, .16),
    transparent 70%
  );
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dark:hover .dark__glow { opacity: 1; }
}

/* Liquid-glass panels, only ever on a dark ground where they read. */
.glass {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-container);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 48px rgba(0, 0, 0, .3);
  padding: clamp(1.4rem, 3vw, 2rem);
  color: #fff;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.glass:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); }
.glass h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; margin-block-end: .45rem; color: #fff; }
.glass p { font-size: .9375rem; line-height: 1.85; color: rgba(255, 255, 255, .8); }
.glass .feat__ico, .glass .tile__ico { color: var(--secondary-container); }
.glass .tile__ico { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(0, 39, 42, .92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.glassgrid { display: grid; gap: 1rem; }
@media (min-width: 700px)  { .glassgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .glassgrid { grid-template-columns: repeat(3, 1fr); } }

/* Buttons over a dark ground. */
.dark .btn--line { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); }
.dark .btn--line:hover { --btn-bg: rgba(255, 255, 255, .14); --btn-bd: #fff; }
.dark .stat { background: transparent; }
.dark .stat__n { color: var(--secondary-container); }
.dark .stat__l { color: rgba(255, 255, 255, .78); }
.dark .stats { background: rgba(255, 255, 255, .14); border-block-color: rgba(255, 255, 255, .14); }

/* ==================================================== 32. KINETIC HEADLINES
   Words rise out of a clipped line, in reading order. Split at runtime so the
   markup stays plain text; inline elements are lifted whole so `.lat` bidi
   isolation and the gold `.mark` survive the split.
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js .kin { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block-end: .12em; }
  .js .kin > i {
    display: inline-block;
    font-style: inherit;
    transform: translateY(105%);
    opacity: 0;
  }
  .js [data-shown="true"] .kin > i,
  .js .kin[data-shown="true"] > i {
    transform: none;
    opacity: 1;
    transition: transform .62s cubic-bezier(.2, .8, .2, 1), opacity .5s linear;
    transition-delay: calc(var(--i, 0) * 55ms);
  }
}

/* ======================================================== 33. POINTER TILT
   Cards tip toward the cursor. Driven by two custom properties written from a
   throttled pointermove handler, so nothing re-lays-out on the main thread.
   Disabled entirely on touch and under reduced motion.
   ====================================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tilt {
    transform:
      perspective(900px)
      rotateX(calc(var(--ty, 0) * -5deg))
      rotateY(calc(var(--tx, 0) * 5deg))
      translateZ(0);
    transition: transform .35s var(--ease);
    will-change: transform;
  }
  .tilt:hover { transition-duration: .1s; }
  /* Tilt replaces the lift on these cards so the two do not fight. */
  .tilt:hover, .tile.tilt:hover, .step.tilt:hover { box-shadow: var(--shadow-3); }
}

/* ==================================================== 34. MAGNETIC BUTTONS */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn.magnet {
    transform: translate(calc(var(--mgx, 0) * 1px), calc(var(--mgy, 0) * 1px));
    transition: transform .35s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
  }
  .btn.magnet:hover { transition-duration: .08s; }
}

/* ================================================= 35. HERO DEPTH (PARALLAX)
   The photograph drifts slower than the copy as the hero leaves the screen.
   Runs on the browser's own scroll timeline where supported: no scroll
   handler, no JavaScript, nothing on the main thread.
   ====================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--cine .slide__bg img {
      animation: heroDrift linear both;
      animation-timeline: view();
      animation-range: contain 0% exit 100%;
    }
    .hero__watermark {
      animation: markDrift linear both;
      animation-timeline: view();
      animation-range: contain 0% exit 100%;
    }
  }
}
@keyframes heroDrift { to { transform: translateY(14%) scale(1.1); } }
@keyframes markDrift { to { transform: translateY(-40px) rotate(9deg); } }

/* ================================================== 36. HEXAGON DIVIDER
   The logo's hexagon marking the seam between two grounds. */

.seam {
  position: relative;
  block-size: 0;
  z-index: 3;
}
.seam__mark {
  position: absolute;
  inset-block-start: -28px;
  inset-inline-start: 50%;
  translate: 50% 0;
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-container);
  background: var(--secondary-container);
  color: #00272a;
  box-shadow: var(--shadow-2);
}
.seam__mark .ico { inline-size: 26px; block-size: 26px; }

/* ====================================================================== 29
   PRELOADER
   Shown once per session while the fonts and hero image settle. It is opt-out
   by construction: the markup carries no styles of its own, so if the CSS or
   the JS fails to load the visitor simply never sees it.
   ====================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--brand-deep);
  transition: opacity .5s var(--ease), visibility .5s;
}
.preloader[data-done="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Escape hatch. A full-screen curtain that depends on JavaScript to lift is a
   trap, so CSS lifts it on its own after 2.8s no matter what happens. The JS
   normally beats this by a wide margin; this only ever fires if it did not run.
   Deliberately outside any media query: it must apply in every motion setting. */
.preloader { animation: preloaderOut .5s var(--ease) 2.8s forwards; }
@keyframes preloaderOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.preloader__inner {
  position: relative;
  inline-size: 132px;
  block-size: 132px;
  display: grid;
  place-items: center;
}
.preloader__inner img {
  inline-size: 62px;
  block-size: auto;
  opacity: .96;
}
.preloader__ring {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.preloader__ring polygon {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 312;
  stroke-dashoffset: 312;
}

@media (prefers-reduced-motion: no-preference) {
  /* The hexagon draws itself once: it is the logo's own outline, so the wait
     reads as the brand assembling rather than as a generic spinner. */
  .preloader__ring polygon { animation: hexDraw 1.15s var(--ease) forwards; }
  .preloader__inner img { animation: markIn .7s var(--ease) .28s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__ring polygon { stroke-dashoffset: 0; opacity: .55; }
}

@keyframes hexDraw {
  from { stroke-dashoffset: 312; }
  to   { stroke-dashoffset: 0; }
}
@keyframes markIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: .96; transform: none; }
}

/* Nothing scrolls behind the curtain. */
body[data-loading="true"] { overflow: hidden; }

/* ====================================================================== 30
   MOTION REFINEMENTS
   Event-driven, not perpetual. The only loops on the page are the marquee and
   the hero's slow drift; everything below fires on hover, focus, or entry.
   ====================================================================== */

/* Slow drift on the active hero photograph. Gives the still image a sense of
   depth without asking the visitor to look at anything moving. */
@media (prefers-reduced-motion: no-preference) {
  .hero--cine .slide[data-active="true"] .slide__bg img {
    animation: heroDrift 16s ease-out forwards;
  }
}
@keyframes heroDrift {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}

/* A light sweeps across the primary CTA on hover. Signals "this is the action"
   without moving the button and shifting the layout. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after,
  .btn--primary:focus-visible::after { animation: sheen .75s var(--ease); }
}
@keyframes sheen {
  from { inset-inline-start: -60%; opacity: 0; }
  25%  { opacity: 1; }
  to   { inset-inline-start: 120%; opacity: 0; }
}

/* Card icons answer the hover instead of the whole card shouting. */
.tile__ico, .feat__ico, .step__ico, .itemrow__ico, .cred__ico {
  transition: transform .32s var(--ease), background-color .32s var(--ease);
}
.tile:hover .tile__ico,
.feat:hover .feat__ico,
.step:hover .step__ico,
.itemrow:hover .itemrow__ico,
.cred:hover .cred__ico { transform: translateY(-3px) rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .tile:hover .tile__ico, .feat:hover .feat__ico, .step:hover .step__ico,
  .itemrow:hover .itemrow__ico, .cred:hover .cred__ico { transform: none; }
}

/* Photographs wipe open along the reading direction rather than just fading. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .figure img,
  .js .figure[data-reveal] img { clip-path: inset(0 0 0 100%); transition: clip-path .8s var(--ease); }
  .js [data-reveal][data-shown="true"] .figure img,
  .js .figure[data-reveal][data-shown="true"] img { clip-path: inset(0 0 0 0); }
}

/* The gold underline draws under the highlighted word as the line arrives. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .mark::after,
  .js .mark::after { transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease) .25s; }
  .js [data-shown="true"] .mark::after,
  .js .slide[data-active="true"] .mark::after { transform: scaleX(1); }
}

/* Department lists arrive item by item, in reading order. */
@media (prefers-reduced-motion: no-preference) {
  .js .dept[data-shown="true"] li { animation: itemIn .45s var(--ease) backwards; }
  .js .dept[data-shown="true"] li:nth-child(1) { animation-delay: .04s; }
  .js .dept[data-shown="true"] li:nth-child(2) { animation-delay: .10s; }
  .js .dept[data-shown="true"] li:nth-child(3) { animation-delay: .16s; }
  .js .dept[data-shown="true"] li:nth-child(4) { animation-delay: .22s; }
  .js .dept[data-shown="true"] li:nth-child(5) { animation-delay: .28s; }
}
@keyframes itemIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- 20. UTILITIES */

.stack > * + * { margin-block-start: var(--s, 1rem); }
.center { text-align: center; margin-inline: auto; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--r-control);
  font-weight: 600;
}
.skip:focus { inset-block-start: 1rem; }

.divider { block-size: 1px; background: var(--line); border: 0; }

/* Print: strip motion and brand blocks, keep the content readable. */
@media print {
  .nav, .whatsapp, .drawer { display: none !important; }
  .block-brand { background: #fff !important; color: #000 !important; }
  .block-brand::before { display: none; }
}


/* ====================================================================== 31
   PHONE OVERRIDES (last in the cascade)
   These intentionally sit at the end of the file: several hero rules are
   declared further down than the main mobile block, and at equal specificity
   source order decides. Keeping them here means the phone layout wins without
   resorting to !important.
   ====================================================================== */

@media (max-width: 767px) {
  /* The credential chips repeat the logo band immediately below the hero. */
  .hero__proof { display: none; }

  .hero--cine {
    min-block-size: auto;
    padding-block: 2rem 1.75rem;
  }
  .hero__watermark { inline-size: 128px; opacity: .07; inset-block-end: 2%; }

  /* Stacked full-width actions: one line each, both inside thumb reach. */
  .hero .btn-row { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hero .btn { inline-size: 100%; font-size: .95rem; }
}

/* ====================================================================== 32
   NEW PAGE FURNITURE
   Components introduced with the six service pages, the standards portal and
   the business-solutions page.
   ====================================================================== */

/* ---- navigation submenu ------------------------------------------------ */

/* Anchored to its own trigger so the panel reads as belonging to it. Kept to a
   single narrow column on purpose: a two-column panel is wide enough that, with
   the trigger sitting mid-bar, it hangs off the viewport edge on narrower
   desktops. Narrow and attached beats wide and floating. */
.nav__has-sub { position: relative; }

.nav__link--sub {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.ico--chev {
  inline-size: 15px;
  block-size: 15px;
  transition: transform .25s var(--ease);
}
[aria-expanded="true"] .ico--chev { transform: rotate(180deg); }

.submenu {
  position: absolute;
  inset-block-start: calc(100% + .55rem);
  inset-inline-start: 0;
  z-index: 45;
  inline-size: min(94vw, 25rem);
  padding: .5rem;
  display: grid;
  gap: .12rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-3), var(--edge);
}
/* [hidden] is honoured, so no JS means no floating panel stuck open. */
.submenu[hidden] { display: none; }

.submenu__link {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .7rem .8rem;
  border-radius: var(--r-control);
  transition: background-color .2s var(--ease);
}
.submenu__link:hover,
.submenu__link:focus-visible { background: var(--surface-2); }
.submenu__link .ico {
  inline-size: 20px;
  block-size: 20px;
  color: var(--brand);
  flex: none;
  margin-block-start: .2rem;
}
.submenu__link strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.submenu__link em {
  display: block;
  font-style: normal;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* ---- breadcrumbs ------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--text-3);
  margin-block-end: 1.1rem;
}
.crumbs a { color: var(--text-2); transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--brand); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ---- numbered implementation stages ------------------------------------ */

/* The numbers are real sequence, not decoration: these five steps happen in
   this order, so the reader needs the order. */
.stages { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
          border-radius: var(--r-container); overflow: hidden; }
@media (min-width: 720px)  { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stages { grid-template-columns: repeat(5, 1fr); } }

.stage {
  background: var(--surface);
  padding: clamp(1.35rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background-color .28s var(--ease);
}
.stage:hover { background: var(--surface-2); }
.stage__n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--accent-text);
}
.stage h3 { font-size: 1rem; font-weight: 600; line-height: 1.6; margin-block-end: .35rem; }
.stage p  { font-size: .9rem; color: var(--text-2); line-height: 1.8; }

/* ---- outcome banner ---------------------------------------------------- */

.outcome {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--gold-500) 34%, transparent);
  border-radius: var(--r-container);
  background: linear-gradient(120deg,
              color-mix(in srgb, var(--gold-500) 10%, transparent),
              transparent 62%);
  box-shadow: var(--edge);
}
.outcome__ico {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--gold-500) 18%, transparent);
  color: var(--accent-text);
  flex: none;
}
.outcome__ico .ico { inline-size: 24px; block-size: 24px; }
.outcome__text {
  font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem);
  font-weight: 500;
  line-height: 1.8;
  color: var(--text);
  margin-block-start: .3rem;
  max-inline-size: 62ch;
}

/* ---- footer now carries four columns ----------------------------------- */

@media (min-width: 760px)  { .foot__grid { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 1040px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1.2fr 1fr; } }

/* ---- phone ------------------------------------------------------------- */

@media (max-width: 767px) {
  .crumbs { margin-block-end: .8rem; }
  .stage { padding: 1.15rem 1.25rem; }
  .outcome { flex-direction: column; gap: .9rem; }
  .drawer .nav__link--child {
    font-size: .9375rem;
    padding-inline-start: 1.1rem;
    color: var(--text-2);
  }
}

/* ====================================================================== 33
   HEADER REWORK
   The bar had no sense of place: every link looked identical whatever page you
   were on, and the only affordance on the services item was a chevron. Now the
   current page is marked, the parent lights up for any of its children, and
   the whole row has room to breathe.
   ====================================================================== */

.nav__in { gap: clamp(.75rem, 2vw, 1.75rem); }
.nav__links { gap: .15rem; }

.nav__link {
  position: relative;
  padding: .6rem .85rem;
  border-radius: var(--r-control);
  line-height: 1.6;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* The marker is a rule under the label, drawn from the centre out. It sits in
   the padding so it never shifts the text, and it is scaleX-animated so the
   nav does not reflow as you move across it. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: .85rem;
  inset-block-end: .18rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(.55); }

/* Current page, and the parent of the current page. */
.nav__link[aria-current="page"],
.nav__has-sub[data-active="true"] > .nav__link {
  color: var(--text);
  font-weight: 600;
}
.nav__link[aria-current="page"]::after,
.nav__has-sub[data-active="true"] > .nav__link::after { transform: scaleX(1); }

.nav__has-sub[data-active="true"] > .nav__link { background: var(--surface-brand); }

/* The trigger reads as a control, not as a stray word with a chevron. */
.nav__link--sub { color: var(--text-2); }
.nav__link--sub:hover,
.nav__link--sub[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }

/* Submenu: a real menu surface, wide enough for two columns on a big screen. */
.submenu {
  inline-size: min(90vw, 26rem);
  padding: .6rem;
  gap: .15rem;
  max-inline-size: calc(100vw - 2rem);
}
/* The overview link is set apart from the six service pages below it. */
.submenu__link:first-child {
  background: var(--surface-brand);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  margin-block-end: .3rem;
}
.submenu__link[aria-current="page"] {
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--gold-500);
}

/* The primary action should look like the primary action. */
.nav__cta { padding-inline: 1.15rem; }

/* Drawer: the active page is marked here too. */
.drawer .nav__link[aria-current="page"] {
  color: var(--text);
  background: var(--surface-brand);
  box-shadow: inset 2px 0 0 var(--gold-500);
}
.drawer .nav__link::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__link::after { transition: none; }
}

/* ====================================================================== 34
   PLAN COMPARISON TABLE
   Eighty feature rows across three plans. Shown as a real <table> so screen
   readers get row and column association for free, with each module collapsed
   behind its own control: the whole matrix open at once is unreadable.
   ====================================================================== */

.ptable {
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  background: var(--surface);
  box-shadow: var(--shadow-2), var(--edge);
  overflow: hidden;
}
/* Wide content scrolls inside its own box, never the page body. */
.ptable__scroll { overflow-x: auto; }
.ptable__t {
  inline-size: 100%;
  min-inline-size: 34rem;
  border-collapse: collapse;
  text-align: start;
}

.ptable__col,
.ptable__feat { padding: 1rem .85rem; vertical-align: middle; }

.ptable__col {
  inline-size: 21%;
  text-align: center;
  border-inline-start: 1px solid var(--line);
  background: var(--surface-2);
  position: relative;
}
.ptable__col--featured { background: var(--surface-brand); }

/* Centred without a transform: translateX is not writing-direction aware, so
   pairing it with inset-inline-start pushes the badge off to one side in RTL.
   Auto margins inside a zeroed inline inset centre correctly either way. */
.ptable__tag {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
}
.ptable__name  { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.6; color: var(--text); margin-block-start: 1.4rem; }
.ptable__price { display: block; margin-block-start: .3rem; }
.ptable__price b { font-size: 1.35rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ptable__count { display: block; font-size: .75rem; color: var(--text-3); margin-block-start: .2rem; }

thead .ptable__feat { font-size: .8125rem; color: var(--text-3); font-weight: 500; }

/* ---- module rows (the accordion triggers) ------------------------------ */

.ptable__modrow th { padding: 0; }
.ptable__modbtn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1rem;
  border: 0;
  border-block-start: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  text-align: start;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.ptable__modbtn:hover { background: var(--surface-brand); }
.ptable__modbtn > .ico:first-child { inline-size: 20px; block-size: 20px; color: var(--brand); flex: none; }
.ptable__modname { flex: 1 1 auto; }
.ptable__modcount {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .06em;
  flex: none;
}
.ptable__modbtn .ico--chev { color: var(--text-3); flex: none; }

/* ---- feature rows ------------------------------------------------------ */

.ptable__row th,
.ptable__row td { border-block-start: 1px solid var(--line); }
.ptable__row .ptable__feat {
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--text-2);
}
.ptable__cell {
  text-align: center;
  padding: .6rem .5rem;
  border-inline-start: 1px solid var(--line);
}
.ptable__cell .ico { inline-size: 19px; block-size: 19px; margin-inline: auto; }
.ptable__cell[data-on="true"]  .ico { color: var(--brand); }
/* The cross is deliberately quiet: an absent feature should not shout louder
   than a present one. */
.ptable__cell[data-on="false"] .ico { color: var(--text-3); opacity: .5; }
.ptable__cell.ptable__col--featured { background: color-mix(in srgb, var(--surface-brand) 55%, transparent); }

tfoot .ptable__cell { padding: 1rem .75rem; border-block-start: 1px solid var(--line); }
tfoot .btn { inline-size: 100%; }

@media (max-width: 700px) {
  .ptable__t { min-inline-size: 30rem; font-size: .875rem; }
  .ptable__col, .ptable__feat { padding: .7rem .5rem; }
  .ptable__price b { font-size: 1.1rem; }
  .ptable__modbtn { padding: .8rem .75rem; font-size: .875rem; }
  .ptable__modcount { display: none; }
}

/* ====================================================================== 35
   CREDIT LINE
   ====================================================================== */

.foot__credit {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255, 255, 255, .62);
}
.foot__credit strong {
  color: rgba(255, 255, 255, .88);
  font-weight: 600;
}
.foot__credit a {
  color: var(--gold-500);
  font-weight: 600;
  border-block-end: 1px solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__credit a:hover { color: #fff; border-block-end-color: #fff; }

/* ====================================================================== 36
   DARK CHROME ON A LIGHT PAGE
   The header and footer stay deep teal because the logo is white and needs a
   ground to sit on. Everything between them is light. Declared last so it wins
   over the earlier light-ground rules without !important.
   ====================================================================== */

.nav {
  background: rgba(8, 40, 44, .92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
}
.nav[data-stuck="true"] {
  background: rgba(8, 40, 44, .97);
  border-block-end-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 30px rgba(8, 40, 44, .22);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--brand-deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__link { color: rgba(255, 255, 255, .76); }
.nav__link:hover,
.nav__link--sub:hover,
.nav__link--sub[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .1); }
.nav__link[aria-current="page"],
.nav__has-sub[data-active="true"] > .nav__link { color: #fff; }
.nav__has-sub[data-active="true"] > .nav__link { background: rgba(255, 255, 255, .12); }
.nav__link--sub { color: rgba(255, 255, 255, .76); }

.icon-btn { border-color: rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .82); }
.icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* The nav CTA has to hold its own against a dark bar. */
.nav__cta { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); box-shadow: none; }
.nav__cta:hover { --btn-bg: #ffd469; }

/* The submenu drops onto the light page, so it stays a light surface. */
.submenu { background: var(--surface); border-color: var(--line); }

/* Drawer covers the whole screen: dark, matching the bar it came from. */
.drawer { background: var(--brand-deep); }
.drawer .nav__link { color: rgba(255, 255, 255, .82); border-block-end-color: rgba(255, 255, 255, .1); }
.drawer .nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.drawer .nav__link[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 2px 0 0 var(--gold-500);
}
.drawer .nav__link--child { color: rgba(255, 255, 255, .64); }

/* ---- the hero is now part of the light page ---------------------------- */

.hero--cine {
  background: var(--bg);
  min-block-size: auto;
  padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(3rem, 6vw, 4.5rem);
}
/* The full-bleed photograph and its scrim belonged to the dark treatment. */
.hero--cine .slide__bg,
.hero--cine .hero__chrome { display: none; }
.hero--cine .hero__watermark { opacity: .05; }

.hero--cine .d1,
.hero--cine .d2 { color: var(--text); }
.hero--cine .lede { color: var(--text-2); }
.hero--cine .badge { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.hero--cine .btn--line { --btn-fg: var(--brand); --btn-bd: color-mix(in srgb, var(--brand) 45%, transparent); }
.hero--cine .btn--line:hover { --btn-bg: var(--brand-soft); --btn-bd: var(--brand); }

.hero__proof li {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  box-shadow: var(--shadow-1);
}
.hero__proof li .ico { color: var(--brand); }

/* Each slide shows its photograph in the media column instead of behind the
   type, so nothing needs a scrim and the copy keeps full contrast. */
.slide__inner { display: block; }
.hero--cine .slide { padding: 0; }

/* ---- footer keeps the dark ground -------------------------------------- */

.foot { background: var(--brand-deep); }

/* ---- brand tile still reads on the light page -------------------------- */

.tile--brand {
  background: linear-gradient(155deg, var(--brand), var(--teal-800));
  color: #fff;
}

/* ---- partner marks no longer need a plate on a light page -------------- */

.logos__plate {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.logos figure:hover .logos__plate { box-shadow: var(--shadow-2); }

/* ====================================================================== 37
   SPLIT HERO
   The photograph moved out from behind the type into its own column. Nothing
   needs a scrim any more, so the headline keeps full contrast against the
   light ground and the images read as photographs rather than as wallpaper.
   ====================================================================== */

.hero--split { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem); }
.hero--split .hero__grid { align-items: center; }
@media (min-width: 900px) {
  .hero--split .hero__grid { grid-template-columns: 1.02fr .98fr; }
}

/* The three slides stack in one grid cell, so the frame never resizes. */
.hero--split .slider__track {
  aspect-ratio: 4 / 3.05;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.hero--split .slide { grid-area: 1 / 1; block-size: 100%; }
.hero--split .slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.hero--split .slider__ui { justify-content: center; margin-block-start: 1.15rem; }

.hero__proof {
  margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
  gap: .6rem;
}
.hero__proof li {
  padding: .55rem .9rem;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 500;
  gap: .45rem;
}
.hero__proof li .ico { inline-size: 16px; block-size: 16px; }

/* The watermark belonged to the dark hero. */
.hero--split .hero__watermark { display: none; }

@media (max-width: 767px) {
  .hero--split { padding-block: 1.75rem 2.25rem; }
  .hero--split .slider__track { aspect-ratio: 16 / 11; }
  .hero--split .hero__grid { gap: 1.5rem; }
}

/* ====================================================================== 38
   SERVICE PAGE FURNITURE
   The service pages were a hero, one grid and a dead end. They now open with a
   fact strip, give the first item room to breathe, and hand the reader
   somewhere to go next instead of stopping.
   ====================================================================== */

/* ---- quick facts ------------------------------------------------------- */

.facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact {
  background: var(--surface);
  padding: 1.35rem 1.25rem;
  text-align: center;
}
.fact__n {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.fact__l {
  display: block;
  margin-block-start: .3rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--text-3);
}

/* ---- give the grid a rhythm instead of N identical boxes --------------- */

/* The first cell spans two columns, so the eye has an entry point rather than
   meeting a wall of equal tiles. Applied only where there are enough cells for
   it to read as intentional. */
@media (min-width: 1000px) {
  .featgrid--rhythm > .feat:first-child { grid-column: span 2; }
  .featgrid--rhythm > .feat:first-child h3 { font-size: 1.2rem; }
  .featgrid--rhythm > .feat:first-child .feat__ico .ico { inline-size: 30px; block-size: 30px; }
}

/* ---- cross-links ------------------------------------------------------- */

.morelinks { display: grid; gap: .75rem; }
@media (min-width: 640px)  { .morelinks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .morelinks { grid-template-columns: repeat(3, 1fr); } }

.morelink {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.morelink:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: var(--shadow-2);
}
.morelink__ico {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  flex: none;
}
.morelink__ico .ico { inline-size: 20px; block-size: 20px; }
.morelink__t {
  flex: 1 1 auto;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
}
.morelink__go {
  inline-size: 18px;
  block-size: 18px;
  color: var(--text-3);
  flex: none;
  transition: transform .28s var(--ease), color .28s var(--ease);
}
.morelink:hover .morelink__go { color: var(--brand); transform: scaleX(-1) translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .morelink:hover { transform: none; }
  .morelink:hover .morelink__go { transform: scaleX(-1); }
}

/* ---- closing band ------------------------------------------------------ */

/* Deep teal, matching the header and footer, so the page closes on the same
   note it opened on. */
.ctaband {
  background: var(--brand-deep);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 130% at 92% 0%, rgba(255, 198, 65, .16), transparent 60%),
    radial-gradient(60% 120% at 4% 100%, rgba(63, 158, 163, .22), transparent 62%);
  pointer-events: none;
}
.ctaband__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.ctaband h2 { color: #fff; }
.ctaband p { color: rgba(255, 255, 255, .82); margin-block-start: .4rem; line-height: 1.8; }
.ctaband .btn--onbrand { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .42); }
.ctaband .btn--onbrand:hover { --btn-bg: rgba(255, 255, 255, .14); --btn-bd: #fff; }

@media (max-width: 767px) {
  .ctaband__in { flex-direction: column; align-items: flex-start; gap: 1.15rem; }
  .ctaband .btn-row { inline-size: 100%; }
  .ctaband .btn { flex: 1 1 auto; }
  .fact { padding: 1.1rem .9rem; }
  .fact__n { font-size: 1.35rem; }
}