/* ==========================================================================
   Sylvesa Infra Pvt. Ltd. — Design System
   Dark, engineered, premium. Teal (technology) + Blue (structure).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink-900: #05080f;
  --ink-850: #070b14;
  --ink-800: #0b1220;
  --ink-750: #0f172a;
  --ink-700: #141f36;

  --line:        rgba(148, 178, 220, .14);
  --line-strong: rgba(148, 178, 220, .28);

  --text:        #e8eefc;
  --text-soft:   #a9b8d4;
  --text-dim:    #7b8aa8;

  /* Brand blue sampled from the corporate logo (#0C53AC), with lighter
     tints for use on dark grounds. */
  --brand:      #0c53ac;
  --brand-600:  #1364c9;
  --brand-400:  #4b93e8;
  --brand-300:  #7db4f2;

  /* Raw channels of the accent, so rgba() tints track the theme. */
  --brand-rgb: 75, 147, 232;

  /* Legacy aliases — kept so older rules keep resolving to brand colours. */
  --teal:   var(--brand-400);
  --teal-2: var(--brand-300);
  --blue:   var(--brand-400);
  --blue-2: var(--brand-300);

  /* Accent family — supporting hues chosen to sit beside the brand blue
     rather than compete with it. Each has a text tone and a wash tone. */
  --c-blue:   #4b93e8;   --c-blue-soft:   rgba(75, 147, 232, .16);
  --c-sky:    #38b6e8;   --c-sky-soft:    rgba(56, 182, 232, .15);
  --c-indigo: #8098ef;   --c-indigo-soft: rgba(128, 152, 239, .16);
  --c-teal:   #2fbfae;   --c-teal-soft:   rgba(47, 191, 174, .15);
  --c-amber:  #efb251;   --c-amber-soft:  rgba(239, 178, 81, .16);
  --c-rose:   #ee7f97;   --c-rose-soft:   rgba(238, 127, 151, .16);

  /* Existing markup still uses .theme-violet / .theme-lime; map those onto
     the new family so every section stays inside the brand's blue range. */
  --c-violet: var(--c-indigo);  --c-violet-soft: var(--c-indigo-soft);
  --c-lime:   var(--c-sky);     --c-lime-soft:   var(--c-sky-soft);

  /* Per-context accent; components read these so a section can retint itself. */
  --accent:      var(--c-blue);
  --accent-soft: var(--c-blue-soft);

  --grad-brand: linear-gradient(120deg, var(--brand-600) 0%, var(--c-sky) 100%);
  --grad-text:  linear-gradient(120deg, #8fc2ff 0%, #a9d4f7 55%, #c3c9ff 100%);
  --grad-card:  linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 4px 18px rgba(2, 6, 18, .34);
  --shadow:    0 18px 48px rgba(2, 6, 18, .5);
  --shadow-lg: 0 34px 90px rgba(2, 6, 18, .62);
  --glow-teal: 0 0 0 1px rgba(var(--brand-rgb), .28), 0 18px 46px rgba(var(--brand-rgb), .16);

  --font-display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;

  /* Header height — the mobile nav panel offsets itself by this. */
  --header-h: 84px;

  --container: 1200px;
  --gutter: clamp(1.15rem, 3.2vw, 2rem);
  --section-y: clamp(2.75rem, 5vw, 4.5rem);

  --ease: cubic-bezier(.22, .68, .32, 1);
}

:root[data-theme='light'] {
  color-scheme: light;
  --ink-900: #f7fafc;
  --ink-850: #eef4f8;
  --ink-800: #ffffff;
  --ink-750: #e6edf5;
  --ink-700: #d8e3ed;
  --line: rgba(16, 52, 92, .13);
  --line-strong: rgba(16, 52, 92, .23);
  --text: #0e2038;
  --text-soft: #3d556f;
  --text-dim: #62768c;
  --brand:     #0c53ac;
  --brand-600: #0a4794;
  --brand-400: #2a72cd;
  --brand-300: #5b9ae5;
  --brand-rgb: 12, 83, 172;
  --teal:   var(--brand);
  --teal-2: var(--brand-600);
  --blue:   var(--brand);
  --blue-2: var(--brand-600);
  --grad-brand: linear-gradient(120deg, #0c53ac 0%, #1f86c4 100%);
  --grad-text: linear-gradient(120deg, #0c53ac 0%, #0b7ea8 62%, #3f52ad 100%);
  --grad-card: linear-gradient(160deg, rgba(255,255,255,.98), rgba(239,245,249,.9));
  --shadow-sm: 0 4px 18px rgba(37, 62, 82, .08);
  --shadow: 0 18px 48px rgba(37, 62, 82, .13);
  --shadow-lg: 0 34px 90px rgba(37, 62, 82, .18);
  --glow-teal: 0 0 0 1px rgba(11, 143, 128, .22), 0 18px 46px rgba(11, 143, 128, .12);

  /* Deeper accents so colour reads against white, with stronger washes
     — the pale tints that worked on dark are invisible here. */
  --c-blue:   #0c53ac;   --c-blue-soft:   rgba(12, 83, 172, .13);
  --c-sky:    #0b7ea8;   --c-sky-soft:    rgba(11, 126, 168, .14);
  --c-indigo: #3f52ad;   --c-indigo-soft: rgba(63, 82, 173, .13);
  --c-teal:   #0e8579;   --c-teal-soft:   rgba(14, 133, 121, .14);
  --c-amber:  #9c6205;   --c-amber-soft:  rgba(156, 98, 5, .16);
  --c-rose:   #c23c5e;   --c-rose-soft:   rgba(194, 60, 94, .13);

  --c-violet: var(--c-indigo);  --c-violet-soft: var(--c-indigo-soft);
  --c-lime:   var(--c-sky);     --c-lime-soft:   var(--c-sky-soft);

  --accent:      var(--c-blue);
  --accent-soft: var(--c-blue-soft);
}

:root[data-theme='dark'] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: clamp(.97rem, .35vw + .88rem, 1.06rem);
  line-height: 1.72;
  color: var(--text-soft);
  background: var(--ink-900);
  /* belt-and-braces: nothing may introduce a horizontal scrollbar */
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}

/* Long unbroken strings (emails, URLs) must never widen the page */
p, li, a, .tag, .stat-label, .info-item { overflow-wrap: break-word; }

body.nav-open { overflow: hidden; }

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

.media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  box-shadow: var(--shadow);
}
.media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 50%, rgba(var(--brand-rgb), .12));
  pointer-events: none;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

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

ul { list-style: none; padding: 0; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.16;
  letter-spacing: -.022em;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 4.15rem); font-weight: 800; letter-spacing: -.034em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.95rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.13rem, 1.3vw, 1.32rem); }

p { text-wrap: pretty; }

::selection { background: rgba(var(--brand-rgb), .3); color: #fff; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .8rem 1.2rem;
  background: var(--teal);
  color: #ffffff;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }

.section-alt {
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(79, 141, 250, .09), transparent 70%),
    var(--ink-850);
  border-block: 1px solid var(--line);
}

/* ---- Per-section accent themes -------------------------------------------
   Add .theme-<hue> to a section and everything inside it (eyebrow, icon tile,
   tags, links, hover glow) retints. This is what stops the page reading as
   one teal repeated a dozen times. */
.theme-blue   { --accent: var(--c-blue);   --accent-soft: var(--c-blue-soft);   }
.theme-sky    { --accent: var(--c-sky);    --accent-soft: var(--c-sky-soft);    }
.theme-indigo { --accent: var(--c-indigo); --accent-soft: var(--c-indigo-soft); }
.theme-teal   { --accent: var(--c-teal);   --accent-soft: var(--c-teal-soft);   }
.theme-amber  { --accent: var(--c-amber);  --accent-soft: var(--c-amber-soft);  }
.theme-rose   { --accent: var(--c-rose);   --accent-soft: var(--c-rose-soft);   }
/* Legacy class names still used in some templates. */
.theme-violet { --accent: var(--c-indigo); --accent-soft: var(--c-indigo-soft); }
.theme-lime   { --accent: var(--c-sky);    --accent-soft: var(--c-sky-soft);    }

/* A soft wash of the section's own hue, so consecutive bands differ. */
.section-tint { background: linear-gradient(180deg, var(--accent-soft), transparent 62%); }

/* Give each card in a stagger grid its own hue, cycling through the family.
   Purely presentational, so nth-child is the right tool. */
.grid-rainbow > *:nth-child(6n + 1) { --accent: var(--c-blue);   --accent-soft: var(--c-blue-soft);   }
.grid-rainbow > *:nth-child(6n + 2) { --accent: var(--c-sky);    --accent-soft: var(--c-sky-soft);    }
.grid-rainbow > *:nth-child(6n + 3) { --accent: var(--c-indigo); --accent-soft: var(--c-indigo-soft); }
.grid-rainbow > *:nth-child(6n + 4) { --accent: var(--c-teal);   --accent-soft: var(--c-teal-soft);   }
.grid-rainbow > *:nth-child(6n + 5) { --accent: var(--c-amber);  --accent-soft: var(--c-amber-soft);  }
.grid-rainbow > *:nth-child(6n + 6) { --accent: var(--c-rose);   --accent-soft: var(--c-rose-soft);   }

/* Homepage alternates use contextual photography under a dark veil — the
   image stays visible while text sits on a consistently dark ground, in
   BOTH themes (these bands are deliberately dark even in light mode). */
.page-home .section-alt {
  --section-image: url('../images/integrated-workspace.png');
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(6, 10, 18, .82), rgba(6, 10, 18, .88)),
    var(--section-image) center / cover no-repeat;
}
.page-home #pillars { --section-image: url('../images/modular-furniture.png'); }
.page-home #sectors { --section-image: url('../images/allied-engineering.png'); }
:root[data-theme='dark'] .page-home .section-alt {
  background:
    linear-gradient(rgba(4, 7, 13, .87), rgba(4, 7, 13, .92)),
    var(--section-image) center / cover no-repeat;
}
.page-home .section-alt::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(800px 400px at 12% 0%, rgba(var(--brand-rgb), .11), transparent 66%),
    radial-gradient(800px 420px at 88% 100%, rgba(79, 141, 250, .12), transparent 68%);
  pointer-events: none;
}

/* These bands are dark in every theme, so their contents must use the dark
   palette even while the rest of the light-mode page stays light. */
.page-home .section-alt {
  --text: #eef3fb;
  --text-soft: #b7c5dc;
  --text-dim: #8d9db6;
  --line: rgba(170, 195, 230, .18);
  --line-strong: rgba(170, 195, 230, .3);
  --ink-800: #0d1524;
  --ink-850: #0a111e;
  /* Opaque enough that the photo behind never competes with body copy. */
  --grad-card: linear-gradient(160deg, rgba(12, 20, 34, .93), rgba(9, 15, 27, .9));
  color: var(--text-soft);
}
.page-home .section-alt h2,
.page-home .section-alt h3 { color: var(--text); }

/* Use the brighter dark-mode accent tones for legibility on the dark veil. */
.page-home .section-alt {
  --brand-rgb: 106, 168, 255;
  --c-blue:   #6aa8ff;   --c-blue-soft:   rgba(106, 168, 255, .17);
  --c-sky:    #58cbf0;   --c-sky-soft:    rgba(88, 203, 240, .17);
  --c-indigo: #9aabf5;   --c-indigo-soft: rgba(154, 171, 245, .18);
  --c-teal:   #4bd6c4;   --c-teal-soft:   rgba(75, 214, 196, .17);
  --c-amber:  #ffc46b;   --c-amber-soft:  rgba(255, 196, 107, .18);
  --c-rose:   #ff8fa6;   --c-rose-soft:   rgba(255, 143, 166, .18);
  --c-violet: var(--c-indigo);  --c-violet-soft: var(--c-indigo-soft);
  --c-lime:   var(--c-sky);     --c-lime-soft:   var(--c-sky-soft);
}

.section-head { max-width: 62ch; margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: .7rem; font-size: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .95rem .42rem .7rem;
  margin-bottom: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow .icon { width: 15px; height: 15px; }

.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { font-size: clamp(1.02rem, 1.1vw, 1.16rem); color: var(--text-soft); }

/* --------------------------------------------------------------------------
   4. Background atmosphere
   -------------------------------------------------------------------------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(148, 178, 220, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 178, 220, .055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(760px 460px at 12% -6%,  rgba(var(--brand-rgb), .17), transparent 62%),
    radial-gradient(820px 520px at 88% 4%,   rgba(79, 141, 250, .17), transparent 64%),
    radial-gradient(700px 700px at 50% 108%, rgba(124, 92, 255, .10), transparent 66%);
  pointer-events: none;
}
:root[data-theme='light'] .bg-grid {
  opacity: .52;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 88%);
}
:root[data-theme='light'] .bg-glow {
  background:
    radial-gradient(760px 460px at 12% -6%, rgba(20, 184, 166, .12), transparent 62%),
    radial-gradient(820px 520px at 88% 4%, rgba(59, 130, 246, .12), transparent 64%);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: .78rem;
  --btn-px: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.008em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}

.btn .icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn-lg { --btn-py: .95rem; --btn-px: 1.85rem; font-size: 1rem; }

.btn-primary {
  background: var(--grad-brand);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(var(--brand-rgb), .26);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(var(--brand-rgb), .38);
}

.btn-ghost {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-rgb), .5);
  background: rgba(var(--brand-rgb), .09);
  color: #fff;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--accent);
}
.btn-link .icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn-link:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(7, 11, 20, .82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

:root[data-theme='light'] .site-header.is-stuck {
  background: rgba(247, 250, 252, .88);
  box-shadow: 0 10px 30px rgba(37, 62, 82, .08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

/* Brand logo — two files, one per background. The dark-ink version is used
   on light surfaces; the white-ink version on dark ones. */
.brand { display: inline-flex; align-items: center; }

.brand-logo {
  width: auto;
  height: 34px;
  max-width: min(56vw, 260px);
  object-fit: contain;
}

/* Header: pick the variant that suits the current theme. */
.site-header .brand-logo-light { display: none; }
:root[data-theme='dark'] .site-header .brand-logo-dark  { display: none; }
:root[data-theme='dark'] .site-header .brand-logo-light { display: block; }

.site-footer .brand-logo { height: 32px; }

.site-nav { display: flex; align-items: center; gap: 2rem; }

.site-nav ul { display: flex; align-items: center; gap: .35rem; }

.site-nav ul a {
  position: relative;
  display: block;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.site-nav ul a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .18rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: translateX(-50%);
  transition: width .3s var(--ease);
}
.site-nav ul a:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.site-nav ul a.is-active { color: var(--text); }
.site-nav ul a.is-active::after { width: 44%; }

/* --------------------------------------------------------------------------
   6b. Services submenu (desktop dropdown / mobile accordion)
   -------------------------------------------------------------------------- */
.has-submenu { position: relative; }

.submenu-row { display: flex; align-items: center; }

.submenu-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -.35rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.submenu-toggle svg { width: 15px; height: 15px; }
.has-submenu:hover .submenu-toggle,
.has-submenu.is-open .submenu-toggle { color: var(--text); }
.has-submenu.is-open .submenu-toggle { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 120;
  display: grid !important;
  gap: .15rem;
  width: max-content;
  min-width: 268px;
  max-width: 320px;
  padding: .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-800);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
}

/* Bridge the gap so the pointer can travel from trigger to panel. */
.submenu::before {
  content: '';
  position: absolute;
  inset: -.6rem 0 auto;
  height: .6rem;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.submenu li { width: 100%; }

.site-nav .submenu a {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  white-space: normal;
}
.site-nav .submenu a::after { display: none; }
.site-nav .submenu a:hover,
.site-nav .submenu a:focus-visible { background: var(--accent-soft); }
.site-nav .submenu a.is-active { background: var(--accent-soft); }
.site-nav .submenu a.is-active .submenu-ico { background: var(--accent); color: #fff; }

.submenu-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  margin-top: .1rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.submenu-ico .icon { width: 16px; height: 16px; }

.submenu-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.submenu-text strong {
  font-family: var(--font-display);
  font-size: .89rem;
  font-weight: 600;
  color: var(--text);
}
.submenu-text small { font-size: .76rem; color: var(--text-dim); }

.nav-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle-close { display: none; }
body.nav-open .nav-toggle-open { display: none; }
body.nav-open .nav-toggle-close { display: block; }

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.theme-toggle:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb), .55); color: var(--teal-2); }
.theme-icon, .theme-icon .icon { width: 20px; height: 20px; }
.theme-icon-sun { display: none; }
:root[data-theme='dark'] .theme-icon-moon { display: none; }
:root[data-theme='dark'] .theme-icon-sun { display: block; }
:root[data-theme='light'] .theme-toggle { background: #fff; box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(calc(100svh - 78px), 660px);
  display: grid;
  align-items: center;
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3rem, 5.5vw, 4.75rem);
  overflow: hidden;
  isolation: isolate;
}
.hero,
.page-hero-has-image {
  --ink-900: #05080f;
  --text: #f2f7ff;
  --text-soft: #c6d3e3;
  --text-dim: #96a9bf;
  --teal: #4b93e8;
  --teal-2: #7db4f2;
  --brand-rgb: 75, 147, 232;
}

.hero-grid {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy, .hero-visual { pointer-events: auto; }

.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .line { display: block; }

.hero-sub {
  max-width: 54ch;
  font-size: clamp(1.03rem, 1.15vw, 1.19rem);
  line-height: 1.68;
  margin-bottom: 1.1rem;
}

.hero-tagline {
  display: inline-block;
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--teal-2);
  letter-spacing: -.01em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 2.75rem;
}

.hero-marks {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.7rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero-marks li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .87rem;
  color: var(--text-dim);
}
.hero-marks .icon { width: 16px; height: 16px; color: var(--teal); flex: none; }

/* Hero visual — layered "integration" diagram */
.hero-visual { position: relative; }
.hero-slider { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.hero-slider::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, .96) 0%, rgba(5, 8, 15, .78) 43%, rgba(5, 8, 15, .38) 72%, rgba(5, 8, 15, .52) 100%),
    linear-gradient(0deg, rgba(5, 8, 15, .9) 0%, transparent 34%, rgba(5, 8, 15, .25) 100%);
  pointer-events: none;
}
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity .75s var(--ease), transform 1.1s var(--ease); transform: scale(1.035); }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.05) brightness(.74); }
.hero-slider-nav {
  position: absolute;
  z-index: 3;
  left: 50%;
  right: auto;
  bottom: 1.35rem;
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.hero-slider-arrow, .hero-slider-dots button { pointer-events: auto; border: 0; cursor: pointer; }
.hero-slider-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(5, 8, 15, .78);
  color: var(--text);
  backdrop-filter: blur(10px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-slider-arrow:hover { background: var(--teal); color: var(--ink-900); transform: scale(1.06); }
.hero-slider-dots { display: flex; gap: .45rem; padding: .45rem .6rem; border-radius: 999px; background: rgba(5, 8, 15, .72); backdrop-filter: blur(10px); }
.hero-slider-dots button { width: 7px; height: 7px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.42); transition: width .3s var(--ease), background .3s var(--ease); }
.hero-slider-dots button.is-active { width: 23px; background: var(--teal); }

.hero-panel {
  position: relative;
  width: min(92%, 470px);
  margin: 0 auto;
  padding: 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, rgba(7, 11, 20, .94), rgba(11, 18, 32, .88));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-panel::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto;
  height: 70%;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .22), transparent);
  pointer-events: none;
}

.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero-panel-head h3 { font-size: .97rem; letter-spacing: -.012em; }
.hero-panel-head span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-2);
  font-family: var(--font-display);
  font-weight: 600;
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(var(--brand-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); }
}

.layer-stack { display: grid; gap: .7rem; position: relative; }

.layer {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(9, 15, 28, .6);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.layer:hover {
  transform: translateX(6px);
  border-color: rgba(var(--brand-rgb), .42);
  background: rgba(var(--brand-rgb), .07);
}
.layer-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  background: rgba(var(--brand-rgb), .11);
  border: 1px solid rgba(var(--brand-rgb), .22);
  color: var(--teal-2);
}
.layer-ico .icon { width: 20px; height: 20px; }
.layer-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: .93rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.012em;
}
.layer-body small { font-size: .79rem; color: var(--text-dim); }

.hero-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--text-dim);
}
.hero-panel-foot b {
  font-family: var(--font-display);
  color: var(--teal-2);
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   8. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(1.85rem, 3.2vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero-has-image {
  min-height: clamp(330px, 39vw, 500px);
  display: grid;
  align-items: end;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, .97) 0%, rgba(5, 8, 15, .84) 45%, rgba(5, 8, 15, .28) 100%),
    linear-gradient(0deg, var(--ink-900), transparent 55%),
    var(--page-hero-image) center / cover no-repeat;
}
.page-hero-has-image .page-hero-inner { max-width: 65ch; z-index: 1; }
.page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: min(900px, 90%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(79, 141, 250, .17), transparent);
  pointer-events: none;
}
.page-hero-inner { position: relative; max-width: 70ch; }
.page-hero h1 { font-size: clamp(2.05rem, 4.4vw, 3.35rem); margin-bottom: 1.05rem; }
.page-hero p { font-size: clamp(1rem, 1.05vw, 1.13rem); }

.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.35rem;
  font-size: .82rem;
  color: var(--text-dim);
}
.crumbs a:hover { color: var(--teal-2); }
.crumbs span { opacity: .55; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(.85rem, 1.4vw, 1.2rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.15rem, 1.7vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* Coloured top edge — the cheapest way to make a row of cards read as
   distinct objects rather than one flat sheet. */
.card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  opacity: .85;
  transition: opacity .4s var(--ease), height .4s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: var(--shadow);
}
.card:hover::before { opacity: 1; }
.card:hover::after { height: 5px; opacity: 1; }

.card > * { position: relative; }

.card h3 { letter-spacing: -.018em; }
.card p { font-size: .94rem; line-height: 1.68; }

/* Solid accent fill — a pale tint disappears against a white card. */
.card-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card-ico .icon { width: 25px; height: 25px; }
.card:hover .card-ico {
  transform: scale(1.07) rotate(-4deg);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 45%, transparent);
}

.card-no {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}

/* Numbered / bordered variant */
.card-line {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--teal), transparent) 1 / 0 0 0 2px;
}

/* Tag chips */
.tags { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .3rem; }
.tag {
  padding: .28rem .68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-dim);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover .tag {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}
.stat {
  padding: clamp(1.5rem, 2.3vw, 2.1rem);
  background: var(--ink-850);
  transition: background .35s var(--ease);
}
/* Each stat takes its own hue so the band reads as four distinct figures. */
.stats-band > .stat:nth-child(4n + 1) { --accent: var(--c-blue);   --accent-soft: var(--c-blue-soft);   }
.stats-band > .stat:nth-child(4n + 2) { --accent: var(--c-sky);   --accent-soft: var(--c-sky-soft);   }
.stats-band > .stat:nth-child(4n + 3) { --accent: var(--c-indigo);  --accent-soft: var(--c-indigo-soft);  }
.stats-band > .stat:nth-child(4n + 4) { --accent: var(--c-teal); --accent-soft: var(--c-teal-soft); }

.stat { border-top: 3px solid var(--accent); }
.stat:hover { background: var(--accent-soft); }

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.95rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}
.stat-label {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.012em;
}
.stat-sub { font-size: .82rem; color: var(--text-dim); margin-top: .18rem; }

/* --------------------------------------------------------------------------
   11. Pillars (services)
   -------------------------------------------------------------------------- */
.pillar {
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.pillar:last-of-type { border-bottom: 0; }

.pillar-head {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.pillar-photo { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
.pillar-photo img { transition: transform .8s var(--ease); }
.pillar:hover .pillar-photo img { transform: scale(1.025); }

.process-photo { aspect-ratio: 4 / 3; margin-bottom: 1.75rem; }

.pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.pillar-badge .card-ico { width: 46px; height: 46px; border-radius: 13px; }
.pillar-badge .card-ico .icon { width: 23px; height: 23px; }
.pillar-badge span {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-2);
}
.pillar-head h2 { margin-bottom: .55rem; }
.pillar-head .headline {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   12. Process timeline
   -------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), rgba(79, 141, 250, .5), transparent);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.15rem;
  padding-block: .8rem;
}
.tl-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: var(--accent-soft);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--accent);
  box-shadow: 0 0 0 6px rgba(5, 8, 15, .85);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.tl-item:hover .tl-dot {
  transform: scale(1.06);
  background: rgba(var(--brand-rgb), .14);
  box-shadow: 0 0 0 6px rgba(5, 8, 15, .85), var(--glow-teal);
}
.tl-body { padding-top: .35rem; }
.tl-body h3 { margin-bottom: .4rem; }
.tl-body p { font-size: .95rem; max-width: 62ch; }

/* --------------------------------------------------------------------------
   13. Split / feature blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.checklist { display: grid; gap: .9rem; margin-top: 1.75rem; }
.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .95rem;
}
.checklist .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}
.checklist strong { color: var(--text); font-family: var(--font-display); font-weight: 600; }

.quote-panel {
  padding: clamp(1.75rem, 3vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  box-shadow: var(--shadow);
}
.quote-panel .mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: .8;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote-panel blockquote {
  margin: 1rem 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -.02em;
  color: var(--text);
}
.quote-panel cite {
  font-style: normal;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  --ink-900: #05080f;
  --ink-850: #070b14;
  --ink-800: #0b1220;
  --line: rgba(148, 178, 220, .14);
  --line-strong: rgba(148, 178, 220, .28);
  --text: #e8eefc;
  --text-soft: #a9b8d4;
  --text-dim: #7b8aa8;
  --teal: #4b93e8;
  --teal-2: #7db4f2;
  --brand-rgb: 75, 147, 232;
  position: relative;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(var(--brand-rgb), .13), transparent 66%),
    radial-gradient(900px 420px at 82% 100%, rgba(79, 141, 250, .13), transparent 66%),
    var(--ink-850);
}
.cta-band-inner {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.cta-band h2 { font-size: clamp(1.6rem, 2.7vw, 2.35rem); margin-bottom: .8rem; }
.cta-band p { font-size: 1rem; }
.cta-band-actions { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
.cta-band-actions .btn { width: 100%; }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.contact-grid > *, .form-card, .field { min-width: 0; }

.form-card {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  box-shadow: var(--shadow);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field label {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
}
.field label .req { color: var(--teal); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(5, 9, 18, .68);
  color: var(--text);
  font-size: .94rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 138px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #5d6d8a; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(var(--brand-rgb), .55);
  background: rgba(5, 9, 18, .92);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12);
}

.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='%237b8aa8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field select option { background: var(--ink-800); color: var(--text); }

:root[data-theme='light'] .field input,
:root[data-theme='light'] .field select,
:root[data-theme='light'] .field textarea {
  background: rgba(255, 255, 255, .88);
}
:root[data-theme='light'] .field input:focus,
:root[data-theme='light'] .field select:focus,
:root[data-theme='light'] .field textarea:focus {
  background: #fff;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: rgba(248, 113, 113, .65); }
.field.has-error .ck.ck-editor__main > .ck-editor__editable { border-color: rgba(248, 113, 113, .65); }

/* CKEditor inherits the site's typography while retaining high-contrast editing UI. */
.field .ck.ck-editor { width: 100%; min-width: 0; max-width: 100%; color: #172033; font-family: var(--font-body); }
.field .ck.ck-toolbar {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: #f3f6fa;
}
.field .ck.ck-editor__main > .ck-editor__editable {
  min-height: 180px;
  max-height: 420px;
  border-color: var(--line-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: #fff;
  color: #172033;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  box-shadow: none;
}
.field .ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: rgba(var(--brand-rgb), .7);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12);
}

.field-error {
  font-size: .8rem;
  color: #fca5a5;
}

.form-note { font-size: .82rem; color: var(--text-dim); margin-top: 1rem; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: .92rem;
}
.alert .icon { width: 20px; height: 20px; flex: none; margin-top: .18rem; }
.alert-success {
  border-color: rgba(var(--brand-rgb), .4);
  background: rgba(var(--brand-rgb), .1);
  color: #b6f5e7;
}
.alert-error {
  border-color: rgba(248, 113, 113, .42);
  background: rgba(248, 113, 113, .1);
  color: #fecaca;
}
.alert strong { display: block; color: #fff; font-family: var(--font-display); margin-bottom: .12rem; }
:root[data-theme='light'] .alert strong { color: var(--text); }

.info-card {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  margin-bottom: 1.15rem;
}
.info-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .95rem;
  align-items: start;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
}
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.info-item:first-of-type { padding-top: 0; }
.info-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(var(--brand-rgb), .22);
  background: rgba(var(--brand-rgb), .1);
  color: var(--teal-2);
}
.info-ico .icon { width: 20px; height: 20px; }
.info-item h4 {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .22rem;
}
.info-item p, .info-item a { font-size: .95rem; color: var(--text); line-height: 1.55; }
.info-item a:hover { color: var(--teal-2); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  --ink-900: #05080f;
  --ink-850: #070b14;
  --ink-800: #0b1220;
  --line: rgba(148, 178, 220, .14);
  --line-strong: rgba(148, 178, 220, .28);
  --text: #e8eefc;
  --text-soft: #a9b8d4;
  --text-dim: #7b8aa8;
  --teal: #4b93e8;
  --teal-2: #7db4f2;
  --brand-rgb: 75, 147, 232;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  background: var(--ink-900);
  padding-top: clamp(2.25rem, 3.5vw, 3rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-bottom: clamp(1.75rem, 2.8vw, 2.4rem);
}

.footer-brand .brand { margin-bottom: 1.15rem; }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-2);
  margin-bottom: .7rem;
  font-size: .95rem;
}
.footer-note { font-size: .88rem; color: var(--text-dim); max-width: 42ch; }

.footer-col h3 {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: .62rem; }
.footer-col a { font-size: .92rem; transition: color .25s var(--ease), padding-left .25s var(--ease); }
.footer-col a:hover { color: var(--teal-2); padding-left: 4px; }

/* Icon-led footer link lists — icon stays put, wrapped text hangs aligned */
.footer-links a {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: .6rem;
  align-items: start;
  padding-left: 0;
}
.footer-links a .icon {
  width: 17px;
  height: 17px;
  flex: none;
  /* nudge onto the first line's optical centre */
  margin-top: .18rem;
  color: var(--text-dim);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.footer-links a:hover { padding-left: 0; }
.footer-links a:hover .icon { color: var(--teal); transform: translateX(3px); }
.footer-links a span { transition: transform .25s var(--ease); }
.footer-links a:hover span { transform: translateX(3px); }

.footer-contact-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .7rem;
  align-items: start;
  margin-bottom: .9rem;
  font-size: .9rem;
}
.footer-contact-item .icon { width: 18px; height: 18px; color: var(--teal); margin-top: .22rem; }
.footer-contact-item a:hover { color: var(--teal-2); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   17. Back-to-top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(11, 18, 32, .9);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              visibility .35s var(--ease), border-color .3s var(--ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--teal); }
:root[data-theme='light'] .to-top { background: rgba(255, 255, 255, .92); }
:root[data-theme='light'] .tl-dot { box-shadow: 0 0 0 6px rgba(247, 250, 252, .92); }
:root[data-theme='light'] .tl-item:hover .tl-dot { box-shadow: 0 0 0 6px rgba(247, 250, 252, .92), var(--glow-teal); }

/* --------------------------------------------------------------------------
   18. Reveal animation
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .2s;  }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .28s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .44s; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 680px; }
  .hero-visual { width: min(100%, 560px); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .pillar-head { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band-actions { flex-direction: row; flex-wrap: wrap; }
  .cta-band-actions .btn { width: auto; }
}

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  /* backdrop-filter on the header would make it the containing block for the
     fixed nav panel below, collapsing it to the header's own height. Drop the
     filter at mobile widths so the menu can fill the viewport. */
  .site-header,
  .site-header.is-stuck {
    backdrop-filter: none;
    /* Opaque, since there is no blur to hide content scrolling underneath. */
    background: var(--ink-900);
  }
  :root[data-theme='light'] .site-header,
  :root[data-theme='light'] .site-header.is-stuck {
    backdrop-filter: none;
    background: #ffffff;
  }

  .site-nav {
    position: fixed;
    /* Sits directly below the header — keep in step with .header-inner. */
    inset: var(--header-h, 84px) 0 0;
    z-index: 99;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 1.75rem var(--gutter) 3rem;
    background: rgba(5, 8, 15, .97);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
    overflow-y: auto;
  }
  :root[data-theme='light'] .site-nav { background: rgba(247, 250, 252, .98); }
  body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }

  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav ul a {
    padding: 1rem .35rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.05rem;
  }
  .site-nav ul a::after { display: none; }
  .site-nav ul a.is-active { color: var(--teal-2); }
  .nav-cta { margin-top: 1.6rem; }

  /* Submenu becomes an inline accordion, opened only by the chevron so the
     parent link still navigates to the Services overview. */
  .submenu-row { justify-content: space-between; border-bottom: 1px solid var(--line); }
  .submenu-row > a { flex: 1; border-bottom: 0; }
  .submenu-toggle { width: 44px; height: 44px; margin-left: 0; }
  .submenu-toggle svg { width: 18px; height: 18px; }

  .submenu {
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease);
  }
  .submenu::before { display: none; }
  .has-submenu.is-open .submenu { grid-template-rows: 1fr; }

  /* The row wrapper is what actually collapses; children must not overflow. */
  .submenu > li { overflow: hidden; min-height: 0; }
  .has-submenu.is-open .submenu > li { overflow: visible; }

  /* Hover must not open the panel on touch — only the toggle does. */
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu { grid-template-rows: 0fr; }
  .has-submenu.is-open:hover .submenu,
  .has-submenu.is-open:focus-within .submenu { grid-template-rows: 1fr; }

  .site-nav .submenu a {
    padding: .8rem .35rem .8rem 1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: .98rem;
  }
  .submenu-text small { font-size: .8rem; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .pillar-photo { aspect-ratio: 16 / 8; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero { padding-block: 2.75rem 5rem; }
  .hero-grid { gap: 1.5rem; }
  .hero-panel { width: 100%; padding: 1.1rem; }
  .hero-slider-nav { bottom: .75rem; }
  .page-hero-has-image { min-height: 390px; background-position: 62% center; }
  .pillar-photo { aspect-ratio: 4 / 3; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }

  .hero-panel-foot { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .layer { align-items: flex-start; padding: .8rem; }
  .layer-body { min-width: 0; }
  .layer-body small { overflow-wrap: anywhere; }
  .hero-slider-arrow { width: 34px; height: 34px; }
  .form-card { padding: 1.25rem; }
  .field .ck.ck-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .field .ck.ck-editor__main > .ck-editor__editable { min-height: 155px; }
  .tl-item { grid-template-columns: 46px 1fr; gap: 1.1rem; }
  .tl-dot { width: 46px; height: 46px; font-size: .92rem; }
  .timeline::before { left: 22px; }
  .to-top { right: 1rem; bottom: 1rem; }

  /* ---- Touch targets ---------------------------------------------------
     Fingers need roughly 44px. These are comfortably tappable with a mouse
     but too small on a phone, so give them height on touch layouts only. */

  /* Footer link lists were ~35x23. */
  .footer-links a,
  .footer-col a {
    min-height: 44px;
    align-items: center;
    padding-block: .5rem;
  }
  .footer-contact-item a { display: inline-block; min-height: 32px; }

  /* Inline "view details" style links. */
  .btn-link { min-height: 44px; align-items: center; }

  /* Form controls: 31–33px tall is hard to hit accurately. */
  .field input,
  .field select,
  .field textarea { min-height: 46px; }
  .field textarea { min-height: 130px; }

  /* Breadcrumbs sit close together; give them room. */
  .crumbs { gap: .4rem; }
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .15rem;
  }
}

@media (max-width: 420px) {
  :root { --header-h: 70px; }
  .header-inner { min-height: 70px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-text em { display: none; }
  .hero h1 { font-size: clamp(2.1rem, 12vw, 3rem); }
  .hero-slider-dots { gap: .35rem; padding: .4rem .5rem; }
  .hero-slider-dots button.is-active { width: 18px; }

}

/* --------------------------------------------------------------------------
   20. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .site-footer, .to-top, .cta-band, .bg-grid, .bg-glow { display: none !important; }
  body { background: #fff; color: #111; }
  .card { border: 1px solid #ccc; }
}

/* ==========================================================================
   2026 brand-led redesign — drawn from the royal-blue Sylvesa wordmark
   ========================================================================== */
:root,
:root[data-theme='light'] {
  --teal: #0b5fbd;
  --teal-2: #2385e8;
  --brand-rgb: 11, 95, 189;
  --accent: #0b5fbd;
  --accent-soft: rgba(11, 95, 189, .09);
  --grad-brand: linear-gradient(135deg, #074f9f 0%, #1678dc 100%);
  --grad-text: linear-gradient(105deg, #0756aa 0%, #2189e9 72%);
  --body-bg: #f5f8fc;
  --ink-900: #071421;
  --ink-850: #0b1d31;
  --ink-800: #10253c;
  --text: #0a2036;
  --text-soft: #496075;
  --text-dim: #6f8294;
  --line: rgba(11, 70, 124, .12);
  --line-strong: rgba(11, 70, 124, .21);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 10px 28px rgba(23, 59, 91, .08);
  --shadow: 0 20px 54px rgba(23, 59, 91, .12);
}

body { background: var(--body-bg); }

.bg-grid {
  opacity: .32;
  background-size: 48px 48px;
  background-image:
    linear-gradient(rgba(11, 95, 189, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 95, 189, .075) 1px, transparent 1px);
}
.bg-glow { background: radial-gradient(900px 520px at 86% 0%, rgba(30, 130, 225, .13), transparent 68%); }

.site-header { background: rgba(255,255,255,.9); border-bottom-color: rgba(11,70,124,.1); backdrop-filter: blur(18px); }
.site-header.is-stuck,
:root[data-theme='light'] .site-header.is-stuck { background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(23,59,91,.07); }
.header-inner { min-height: 84px; }
.brand-logo { height: 40px; max-width: min(58vw, 285px); }
.site-nav ul a { color: #3c5267; }
.site-nav ul a:hover,
.site-nav ul a.is-active { color: #0756aa; background: rgba(11,95,189,.06); }
.theme-toggle { display: grid; }

.btn { border-radius: 8px; font-weight: 700; }
.btn-primary { background: #075eb9; box-shadow: 0 12px 26px rgba(7,94,185,.22); }
.btn-primary:hover { background: #064f9a; box-shadow: 0 16px 32px rgba(7,94,185,.28); }

.hero {
  min-height: min(calc(100svh - 84px), 760px);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.hero-slider::before {
  background:
    linear-gradient(90deg, rgba(4,16,29,.97) 0%, rgba(4,19,35,.91) 38%, rgba(4,19,35,.31) 68%, rgba(4,19,35,.18) 100%),
    linear-gradient(0deg, rgba(4,16,29,.68), transparent 48%);
}
.hero-slide img { filter: saturate(.92) contrast(1.02) brightness(.88); }
.hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(340px, .72fr); }
.hero-copy { max-width: 720px; }
.hero h1 { font-size: clamp(3.1rem, 6.1vw, 6.4rem); line-height: .94; letter-spacing: -.055em; }
.hero h1 .text-grad { background: none; color: #58a9f5; }
.hero-sub { max-width: 58ch; color: #d7e2ee; }
.hero-tagline { color: #70b9ff; }
.hero-panel { border-radius: 14px; border-color: rgba(116,184,247,.24); background: rgba(5,21,38,.9); }


.section { padding-block: clamp(4.5rem, 8vw, 8rem); }
.section-tint { background: #eef4fa; }
.section-head h2,
.split h2 { letter-spacing: -.045em; }
.eyebrow { padding: 0; border: 0; border-radius: 0; background: transparent; color: #075eb9; letter-spacing: .18em; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; }

.card { border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); border-color: rgba(11,70,124,.1); }
.card:hover { transform: translateY(-5px); border-color: rgba(11,95,189,.28); box-shadow: var(--shadow); }
.card-ico { border-radius: 8px; }
.stats-band { border-radius: 18px; background: #075eb9; box-shadow: 0 24px 60px rgba(7,94,185,.25); }
.stats-band .stat-value,
.stats-band .stat-label { color: #fff; }
.stats-band .stat-sub { color: rgba(255,255,255,.7); }

.page-home .section-alt { --section-image: url('../images/sylvesa-indian-workspace.png'); }
.page-home #pillars { --section-image: url('../images/sylvesa-indian-furniture.png'); }
.page-home #sectors { --section-image: url('../images/sylvesa-indian-execution.png'); }
.page-home .section-alt { background: linear-gradient(90deg, rgba(4,18,32,.95), rgba(4,18,32,.84)), var(--section-image) center / cover no-repeat; }

/* Light-theme contrast: photo bands remain dark, so their cards must not
   inherit the general white card surface while retaining white text. */
:root[data-theme='light'] .page-home .section-alt .card {
  background: rgba(8, 25, 42, .94);
  border-color: rgba(151, 193, 230, .22);
  box-shadow: 0 18px 46px rgba(0, 8, 18, .28);
}
:root[data-theme='light'] .page-home .section-alt .card h3,
:root[data-theme='light'] .page-home .section-alt .card .btn-link { color: #f4f8fd; }
:root[data-theme='light'] .page-home .section-alt .card p { color: #c3d1df; }
:root[data-theme='light'] .page-home .section-alt .tag {
  color: #dce9f5;
  background: rgba(88, 169, 245, .12);
  border-color: rgba(88, 169, 245, .24);
}

/* Pale day-mode surfaces use deliberately darker copy instead of relying on
   contextual accent variables inherited from earlier themed sections. */
:root[data-theme='light'] .section-tint,
:root[data-theme='light'] .section:not(.section-alt) {
  color: #40576c;
}
:root[data-theme='light'] .section-tint h2,
:root[data-theme='light'] .section-tint h3,
:root[data-theme='light'] .section:not(.section-alt) h2,
:root[data-theme='light'] .section:not(.section-alt) h3 { color: #0a2036; }
:root[data-theme='light'] .section-tint .lead,
:root[data-theme='light'] .section:not(.section-alt) .lead { color: #40576c; }
:root[data-theme='light'] .quote-panel {
  background: #0b3155;
  color: #eef6ff;
  border-color: rgba(11, 95, 189, .24);
}
:root[data-theme='light'] .quote-panel blockquote { color: #ffffff; }
:root[data-theme='light'] .quote-panel cite { color: #b9d9f7; }
:root[data-theme='light'] .btn-ghost {
  background: #ffffff;
  border-color: rgba(11, 70, 124, .24);
  color: #0a4380;
}
:root[data-theme='light'] .btn-ghost:hover {
  background: #e7f2fc;
  border-color: rgba(11, 95, 189, .48);
  color: #073b70;
}

/* Surface-aware day-mode text overrides. These intentionally sit after the
   section theme rules so inherited accent colours cannot reduce contrast. */
:root[data-theme='light'] .cta-band,
:root[data-theme='light'] .cta-band h2 { color: #ffffff; }
:root[data-theme='light'] .cta-band .eyebrow {
  color: #ffffff;
}
:root[data-theme='light'] .cta-band .eyebrow::before { background: #ffffff; }
:root[data-theme='light'] .cta-band p { color: #e2effb; }
:root[data-theme='light'] .cta-band .btn-ghost {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .48);
}
:root[data-theme='light'] .cta-band .btn-ghost:hover {
  color: #0756aa;
  background: #ffffff;
  border-color: #ffffff;
}
:root[data-theme='light'] .hero-marks li { color: #c7d7e7; }
:root[data-theme='light'] .hero-panel .layer-body,
:root[data-theme='light'] .hero-panel .layer-body strong { color: #f1f6fc; }
:root[data-theme='light'] .hero-panel .layer-body small { color: #afc2d5; }
:root[data-theme='light'] .section-tint .btn-link { color: #0756aa; }
:root[data-theme='light'] .page-home .section-alt .tag {
  color: #ffffff;
  font-weight: 600;
}
:root[data-theme='light'] .skip-link { background: #0756aa; color: #ffffff; }

/* Public-page day-mode contrast pass --------------------------------------- */
/* Image-backed page heroes are dark surfaces in both themes. */
:root[data-theme='light'] .page-hero-has-image,
:root[data-theme='light'] .page-hero-has-image h1,
:root[data-theme='light'] .page-hero-has-image .lead { color: #f2f7ff; }
:root[data-theme='light'] .page-hero-has-image .lead { color: #d4e1ee; }
:root[data-theme='light'] .page-hero-has-image .eyebrow { color: #8bc7ff; }
:root[data-theme='light'] .page-hero-has-image .breadcrumbs,
:root[data-theme='light'] .page-hero-has-image .breadcrumbs a,
:root[data-theme='light'] .page-hero-has-image .breadcrumbs span { color: #d2e0ed; }

/* Alternate bands outside the homepage also use a dark navy surface. */
:root[data-theme='light'] .section-alt {
  color: #c3d1df;
}
:root[data-theme='light'] .section-alt h2,
:root[data-theme='light'] .section-alt h3,
:root[data-theme='light'] .section-alt .lead { color: #f4f8fd; }
:root[data-theme='light'] .section-alt p { color: #c3d1df; }
:root[data-theme='light'] .section-alt .eyebrow { color: #82c2ff; }
:root[data-theme='light'] .section-alt .eyebrow::before { background: #82c2ff; }
:root[data-theme='light'] .section-alt .btn-link { color: #8bc7ff; }
:root[data-theme='light'] .section-alt .card {
  background: rgba(8, 25, 42, .94);
  border-color: rgba(151, 193, 230, .22);
}
:root[data-theme='light'] .section-alt .card h3 { color: #ffffff; }
:root[data-theme='light'] .section-alt .card p { color: #c3d1df; }

/* Small labels require a stronger tone than normal body copy. */
:root[data-theme='light'] .section-tint .tag,
:root[data-theme='light'] .section:not(.section-alt) .tag {
  color: #36536d;
  border-color: rgba(11, 70, 124, .2);
  background: rgba(11, 95, 189, .07);
  font-weight: 600;
}
:root[data-theme='light'] .pillar .headline,
:root[data-theme='light'] .form-note,
:root[data-theme='light'] .info-item h4 { color: #405a72; }
:root[data-theme='light'] .section-alt.pillar .headline { color: #c3d1df; }
:root[data-theme='light'] .pillar-label,
:root[data-theme='light'] .pillar-no { color: #0756aa; }
:root[data-theme='light'] .breadcrumbs,
:root[data-theme='light'] .breadcrumbs a,
:root[data-theme='light'] .breadcrumbs span { color: #536c83; }

.quote-panel { border-radius: 16px; }
.timeline::before { background: #c9def1; }
.tl-dot { background: #075eb9; color: #fff; }
.cta-band { background: #075eb9; }
.site-footer { background: #061727; }

@media (max-width: 900px) {
  .site-nav { inset-block-start: 84px; background: rgba(255,255,255,.98); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-slider::before { background: linear-gradient(90deg, rgba(4,16,29,.96), rgba(4,16,29,.7)); }
}

@media (max-width: 640px) {
  .hero { min-height: 680px; align-items: end; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .hero-slider-nav { display: none; }
  .brand-logo { height: 34px; }
}

/* Complete night-mode treatment for the brand-led redesign. */
:root[data-theme='dark'] {
  --body-bg: #06111d;
  --ink-900: #06111d;
  --ink-850: #091827;
  --ink-800: #0d2033;
  --text: #f1f6fc;
  --text-soft: #b5c5d5;
  --text-dim: #8398ab;
  --teal: #53a8f6;
  --teal-2: #82c2ff;
  --brand-rgb: 64, 151, 235;
  --accent: #64b0f7;
  --accent-soft: rgba(73, 160, 243, .14);
  --grad-brand: linear-gradient(135deg, #176fc6 0%, #43a4f5 100%);
  --grad-text: linear-gradient(105deg, #7dbfff 0%, #b4dcff 76%);
  --line: rgba(151, 193, 230, .13);
  --line-strong: rgba(151, 193, 230, .24);
  --shadow-sm: 0 10px 28px rgba(0, 5, 12, .25);
  --shadow: 0 20px 54px rgba(0, 5, 12, .4);
}

:root[data-theme='dark'] .bg-grid {
  opacity: .24;
  background-image:
    linear-gradient(rgba(98, 169, 235, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 169, 235, .09) 1px, transparent 1px);
}
:root[data-theme='dark'] .bg-glow {
  background: radial-gradient(900px 520px at 86% 0%, rgba(24, 116, 203, .2), transparent 68%);
}
:root[data-theme='dark'] .site-header,
:root[data-theme='dark'] .site-header.is-stuck {
  background: rgba(6, 17, 29, .92);
  border-bottom-color: rgba(151, 193, 230, .13);
  box-shadow: 0 10px 30px rgba(0, 5, 12, .2);
}
:root[data-theme='dark'] .site-nav ul a { color: #b6c6d6; }
:root[data-theme='dark'] .site-nav ul a:hover,
:root[data-theme='dark'] .site-nav ul a.is-active {
  color: #82c2ff;
  background: rgba(73, 160, 243, .1);
}
:root[data-theme='dark'] .theme-toggle {
  background: #0d2033;
  border-color: rgba(151, 193, 230, .22);
  box-shadow: none;
}
:root[data-theme='dark'] .section-tint { background: #091827; }
:root[data-theme='dark'] .eyebrow { color: #68b3f8; }
:root[data-theme='dark'] .card {
  background: #0d2033;
  border-color: rgba(151, 193, 230, .13);
}
:root[data-theme='dark'] .card:hover { border-color: rgba(100, 176, 247, .38); }
:root[data-theme='dark'] .timeline::before { background: #173650; }
:root[data-theme='dark'] .quote-panel { background: #0d2033; }
:root[data-theme='dark'] .submenu { background: #0d2033; }
:root[data-theme='dark'] .field input,
:root[data-theme='dark'] .field select,
:root[data-theme='dark'] .field textarea { background: #091827; }

@media (max-width: 900px) {
  :root[data-theme='dark'] .site-nav { background: rgba(6, 17, 29, .98); }
}