/* ================================================================
   ADAM GROUP WEBSITE — MASTER STYLESHEET
   ----------------------------------------------------------------
   Design system: "Specification sheet" — the visual language of an
   engineering drawing set (title blocks, sheet index, dimension
   lines, revision marks) applied to a modern B2B marketing site.

   Colour system (do not alter — denotes each service pillar):
     Amber      --amber      = ADAM Talent
     Blueprint  --blueprint  = ADAM Engineering
     Teal       --teal       = ADAM Sourcing & Manufacturing

   TABLE OF CONTENTS
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout utilities
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Stats strip
   9.  Section scaffolding
   10. Pillar theming
   11. Service & capability cards
   12. Sector tags
   13. Split CTA / process flow
   14. Presence / locations
   15. Proof / testimonials
   16. Contact / form
   17. Footer
   18. Reveal & motion
   19. Responsive
   20. Page hero (sub-pages)
   21. 3D hover / motion layer
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
   :root {
    /* ---- Glassy, lighter futuristic theme ---- */
    --ink:            #0B1220;
    --ink-soft:       #48546E;
    --steel:          #6B7690;
    --line:           rgba(30, 60, 130, 0.14);
    --line-soft:      rgba(30, 60, 130, 0.07);
    --paper:          #F2F5FC;
    --paper-dark:     #05070F;
    /* Glass surfaces — kept mostly opaque so copy sitting on them stays
       legible on any background (dark hero bands included). A small
       amount of translucency (~10-15%) is retained purely for the
       frosted-edge effect; it is no longer relied on for the base
       readability of the surface itself. */
    --surface:        rgba(255, 255, 255, 0.96);
    --surface-tint:   rgba(255, 255, 255, 0.92);
  
    /* Colours for dark "electric" bands (hero / cta / footer) */
    --ink-on-dark:      #F3F6FC;
    --ink-soft-on-dark: rgba(255,255,255,0.72);
    --steel-on-dark:    rgba(255,255,255,0.45);
    --line-on-dark:     rgba(255,255,255,0.14);
    --line-soft-on-dark:rgba(255,255,255,0.07);
  
    /* Service colour-coding — deepened slightly for contrast on a light glass surface */
    --blueprint:      #2F6FEA;   /* ADAM Engineering — electric blue */
    --blueprint-600:  #4C8DFF;
    --blueprint-deep: #0A1230;
    --blueprint-tint: rgba(47, 111, 234, 0.12);
  
    --amber:          #EE7A1F;   /* ADAM Talent — amber */
    --amber-tint:     rgba(238, 122, 31, 0.12);
    --teal:           #0E9488;   /* ADAM Sourcing & Manufacturing — teal */
    --teal-tint:      rgba(14, 148, 136, 0.12);
  
    --violet:         #8654F0;   /* extra accent for futuristic gradients */
  
    --cyan:           #16B7CE;   /* reserved for AI / Industry 4.0 badges & tags */
    --cyan-tint:      rgba(22, 183, 206, 0.14);
  
    --accent:         var(--blueprint);
    --accent-tint:    var(--blueprint-tint);
  
    --f-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --f-body:    'Inter', 'Segoe UI', sans-serif;
    --f-mono:    'IBM Plex Mono', 'Courier New', monospace;
  
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;
    --sp-9: 6.5rem;
  
    --radius-sm: 8px;
    --radius-md: 14px;
  
    --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.08);
    --shadow-md: 0 8px 30px -8px rgba(47, 111, 234, 0.25);
    --shadow-lg: 0 30px 70px -20px rgba(47, 111, 234, 0.28);
    --glow-accent: 0 0 0 1px rgba(255,255,255,0.5), 0 0 40px -6px var(--accent);
  
    --max: 1200px;
    --dur: 0.5s;
  }
  
  /* ----------------------------------------------------------------
     1b. DARK "ELECTRIC" BANDS
     Hero, page headers, the CTA band and the footer keep the original
     dark, glowing look; glass cards (index-card, service-card, etc.)
     float on top of them as frosted panels. Everything else in the
     body runs on the lighter paper tone above.
     ---------------------------------------------------------------- */
  .hero, .page-hero, .cta-band, .site-footer {
    --paper: var(--paper-dark);
    --ink: var(--ink-on-dark);
    --ink-soft: var(--ink-soft-on-dark);
    --steel: var(--steel-on-dark);
    --line: var(--line-on-dark);
    --line-soft: var(--line-soft-on-dark);
    background: var(--paper-dark);
    color: var(--ink-on-dark);
  }
  .hero .lede, .page-hero .lede, .cta-band .lede { color: var(--ink-soft-on-dark); }
  
  
  /* ----------------------------------------------------------------
     2. RESET & BASE
     ---------------------------------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(700px 500px at 8% -5%, rgba(47,111,234,0.16), transparent 60%),
      radial-gradient(680px 520px at 96% 8%, rgba(134,84,240,0.13), transparent 60%),
      radial-gradient(620px 480px at 40% 100%, rgba(14,148,136,0.10), transparent 60%),
      var(--paper);
    animation: meshdrift 22s ease-in-out infinite alternate;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(20,30,60,0.045) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.6;
  }
  @keyframes meshdrift {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(12deg) brightness(1.02); }
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; margin: 0; padding: 0; }
  button { font-family: inherit; cursor: pointer; }
  input, textarea, select { font-family: inherit; font-size: 1rem; }
  
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--blueprint);
    outline-offset: 3px;
  }
  
  .grid-bg {
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 55%, transparent 100%);
  }
  
  /* ----------------------------------------------------------------
     3. TYPOGRAPHY
     ---------------------------------------------------------------- */
  h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  p { margin: 0; }
  
  .eyebrow {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
  }
  .eyebrow::before {
    content: "";
    width: 22px;
    height: 1.5px;
    background: currentColor;
    display: inline-block;
  }
  
  .h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
  .h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
  .h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
  .h4 { font-size: 1.05rem; }
  
  .lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 46ch;
  }
  .body-text { color: var(--ink-soft); line-height: 1.7; }
  .mono-tag {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
  }
  
  /* ----------------------------------------------------------------
     4. LAYOUT UTILITIES
     ---------------------------------------------------------------- */
  .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
  }
  .section { padding: var(--sp-9) 0; position: relative; }
  .section--tight { padding: var(--sp-7) 0; }
  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-6);
    margin-bottom: var(--sp-7);
    flex-wrap: wrap;
  }
  .section-head .h2 { margin-top: var(--sp-3); max-width: 26ch; }
  
  .grid { display: grid; gap: var(--sp-6); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  
  .divider {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
  }
  
  /* ----------------------------------------------------------------
     5. BUTTONS & LINKS
     ---------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85em 1.5em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--amber), var(--violet) 120%);
    color: #0A0A12;
    box-shadow: 0 0 24px -6px var(--amber), var(--shadow-sm);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 34px -4px var(--amber), var(--shadow-md); }
  .btn-ghost {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(6px);
    border-color: var(--line);
    color: var(--ink);
  }
  .btn-ghost:hover { border-color: var(--blueprint); color: var(--blueprint-600); box-shadow: 0 0 20px -8px var(--blueprint); }
  .btn-on-dark {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
    color: #fff;
  }
  .btn-on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
  .btn-arrow { transition: transform 0.2s ease; }
  .btn:hover .btn-arrow { transform: translateX(3px); }
  
  .text-link {
    font-family: var(--f-mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1.5px solid var(--accent);
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--accent);
    transition: gap 0.2s ease;
  }
  .text-link:hover { gap: 0.8em; }
  
  /* ----------------------------------------------------------------
     6. HEADER / NAVIGATION
     ---------------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.3s ease, background 0.3s ease;
  }
  .site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--blueprint), var(--violet), var(--teal), transparent);
    opacity: 0.7;
  }
  .site-header.is-scrolled { box-shadow: 0 10px 40px -12px rgba(47,111,234,0.18); }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
  }
  .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  
  /* Logo image — replaces the old CSS "dot" mark */
  .nav__logo-img {
    height: 40px;
    width: auto;
    display: block;
  }
  .nav__logo-img--footer {
    height: 40px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
    box-sizing: content-box;
  }
  
  .nav__logo small {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--steel);
    margin-top: 2px;
  }
  
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
  .nav__links a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-soft);
    position: relative;
    padding: 0.4rem 0;
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--blueprint);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .nav__links a:hover { color: var(--ink); }
  .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
  .nav__links a.is-active { color: var(--ink); }
  
  .nav__right { display: flex; align-items: center; gap: var(--sp-5); }
  .nav__phone {
    font-family: var(--f-mono);
    font-size: 0.82rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 0.5em;
    transition: color 0.2s ease;
  }
  .nav__phone:hover { color: var(--teal); }
  
  .nav__toggle {
    display: none;
    background: none;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    width: 42px; height: 42px;
    align-items: center;
    justify-content: center;
  }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
    content: "";
    display: block;
    width: 18px; height: 1.5px;
    background: var(--ink);
    position: relative;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav__toggle span::before { position: absolute; top: -6px; }
  .nav__toggle span::after { position: absolute; top: 6px; }
  .nav__toggle.is-open span { background: transparent; }
  .nav__toggle.is-open span::before { transform: rotate(45deg) translate(4px, 4px); background: var(--ink); }
  .nav__toggle.is-open span::after { transform: rotate(-45deg) translate(4px, -4px); background: var(--ink); }
  
  /* ----------------------------------------------------------------
     6b. AI / INDUSTRY 4.0 BADGES
     ---------------------------------------------------------------- */
  .badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0; }
  .badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.45em 0.9em;
    border-radius: 999px;
    color: #eafcff;
    background: linear-gradient(135deg, rgba(22,183,206,0.35), rgba(22,183,206,0.08));
    border: 1px solid rgba(22,183,206,0.55);
    box-shadow: 0 0 18px -6px var(--cyan), inset 0 0 12px rgba(22,183,206,0.15);
    backdrop-filter: blur(3px);
  }
  .badge-ai::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px var(--cyan);
  }
  .badge-ai--sm {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    font-size: 0.6rem;
    padding: 0.3em 0.7em;
  }
  .service-card--ai { position: relative; }
  
  /* On light surfaces, darken badge text slightly for contrast */
  .section .badge-ai, .section--alt .badge-ai {
    color: #073a41;
    background: linear-gradient(135deg, rgba(22,183,206,0.22), rgba(22,183,206,0.06));
  }
  
  /* ----------------------------------------------------------------
     7. HERO
     ---------------------------------------------------------------- */
  .hero {
    padding: var(--sp-8) 0 var(--sp-9);
    position: relative;
    overflow: hidden;
  }
  .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-8);
    align-items: center;
  }
  .hero__eyebrow { margin-bottom: var(--sp-5); }
  .hero__title { margin-bottom: var(--sp-5); }
  .hero__title .accent-word { color: var(--blueprint); }
  .hero__title {
    background: linear-gradient(100deg, #fff 20%, var(--blueprint-600) 55%, var(--violet) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(76,141,255,0.25));
  }
  .hero__sub { margin-bottom: var(--sp-6); }
  .hero__ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
  .hero__proof {
    margin-top: var(--sp-7);
    display: flex;
    gap: var(--sp-7);
    flex-wrap: wrap;
  }
  .hero__proof-item { display: flex; flex-direction: column; }
  .hero__proof-item b {
    font-family: var(--f-display);
    font-size: 1.7rem;
    color: var(--ink);
    font-weight: 700;
  }
  .hero__proof-item span {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--steel);
  }
  
  /* ----------------------------------------------------------------
     7b. GLASS SURFACE — shared, subtle 3D-glass treatment
     Applied to floating panels (index-card, service-card, presence,
     proof, sector tags, forms, footer chips) so the whole site reads
     as one coherent frosted-glass language, echoing the ADAM logo's
     glossy blue, rounded, reflective aesthetic — without the sheen
     overpowering the copy sitting on top of it.
  
     Each of these panels also pins its own text-colour variables to
     the light-mode values. Several of these cards (the homepage
     service index in particular) sit inside dark "electric" bands
     (.hero, .cta-band) that redefine --ink/--steel to near-white for
     the surrounding copy — pinning the values here stops that
     override leaking into the card and washing out its own text.
     ---------------------------------------------------------------- */
  .index-card,
  .service-card,
  .presence-card,
  .proof-card,
  .contact-form,
  .split-cta__panel,
  .flow-step__num,
  .sector-tag {
    position: relative;
    --ink: #0B1220;
    --ink-soft: #48546E;
    --steel: #6B7690;
    --line: rgba(30, 60, 130, 0.14);
    --line-soft: rgba(30, 60, 130, 0.07);
  }
  .index-card::before,
  .service-card::before,
  .presence-card::before,
  .proof-card::before,
  .contact-form::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 22%, rgba(255,255,255,0) 45%);
    opacity: 0.35;
    pointer-events: none;
  }
  
  .index-card {
    background: var(--surface);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.6);
    overflow: hidden;
    color: var(--ink);
  }
  .index-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--line);
    background: var(--blueprint-deep);
  }
  .index-card__head .mono-tag { color: rgba(255,255,255,0.55); }
  .index-card__head strong {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: #fff;
  }
  table.index-table { width: 100%; border-collapse: collapse; }
  .index-table thead th {
    text-align: left;
    font-family: var(--f-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
    padding: var(--sp-4) var(--sp-6) var(--sp-2);
    font-weight: 500;
  }
  .index-table tbody tr {
    border-top: 1px solid var(--line-soft);
    transition: background 0.2s ease;
  }
  .index-table tbody tr:hover { background: var(--surface-tint); }
  .index-table td {
    padding: var(--sp-4) var(--sp-6);
    vertical-align: middle;
  }
  .index-table td:first-child { width: 64px; }
  .index-swatch {
    width: 12px; height: 12px;
    border-radius: 2px;
    display: inline-block;
  }
  .index-table .sheet-no {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    color: var(--steel);
  }
  .index-table .sys-name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .index-table .sys-scope {
    font-size: 0.85rem;
    color: var(--ink-soft);
  }
  .index-table .sys-arrow {
    text-align: right;
    color: var(--steel);
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .index-table tr:hover .sys-arrow { transform: translateX(4px); color: var(--ink); }
  .index-card__foot {
    padding: var(--sp-4) var(--sp-6);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  
  /* ----------------------------------------------------------------
     8. STATS STRIP
     ---------------------------------------------------------------- */
  .stats-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .stat {
    padding: var(--sp-6) var(--sp-5);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .stat:first-child { border-left: none; }
  .stat__value {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--blueprint);
    display: flex;
    align-items: baseline;
    gap: 2px;
  }
  .stat__label {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--steel);
  }
  
  /* ----------------------------------------------------------------
     9. SECTION SCAFFOLDING
     ---------------------------------------------------------------- */
  .section--alt { background: var(--surface); }
  .section-tag-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .sheet-no-badge {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--steel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0.25em 0.9em;
  }
  
  /* ----------------------------------------------------------------
     10. PILLAR THEMING
     Each pillar block sets --accent / --accent-tint locally so all
     child components (eyebrow, cards, links, badges) re-theme
     automatically. This is the service colour-coding system:
       data-accent="amber"      -> ADAM Talent
       data-accent="blueprint"  -> ADAM Engineering
       data-accent="teal"       -> ADAM Sourcing
     ---------------------------------------------------------------- */
  .pillar[data-accent="amber"] { --accent: var(--amber); --accent-tint: var(--amber-tint); }
  .pillar[data-accent="blueprint"] { --accent: var(--blueprint); --accent-tint: var(--blueprint-tint); }
  .pillar[data-accent="teal"] { --accent: var(--teal); --accent-tint: var(--teal-tint); }
  
  .pillar { padding: var(--sp-9) 0; position: relative; }
  .pillar__intro {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-8);
    align-items: start;
  }
  .pillar__intro .h2 { margin-top: var(--sp-4); margin-bottom: var(--sp-5); }
  .pillar__number {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--accent);
    background: var(--accent-tint);
    display: inline-block;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-4);
  }
  .pillar__meta {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .pillar__meta-row { display: flex; justify-content: space-between; gap: var(--sp-4); }
  .pillar__meta-row dt { font-family: var(--f-mono); font-size: 0.72rem; color: var(--steel); text-transform: uppercase; letter-spacing: 0.06em; }
  .pillar__meta-row dd { margin: 0; font-size: 0.9rem; font-weight: 500; text-align: right; }
  
  /* ----------------------------------------------------------------
     11. SERVICE & CAPABILITY CARDS
     ---------------------------------------------------------------- */
  .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
  .service-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .service-card {
    background: var(--surface);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: var(--sp-6);
    position: relative;
    transition: background 0.25s ease;
  }
  .service-card:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent), 0 0 30px -8px var(--accent); }
  .service-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-5); }
  .service-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-tint);
    color: var(--accent);
  }
  .service-card__icon svg { width: 22px; height: 22px; }
  .service-card__index { font-family: var(--f-mono); font-size: 0.7rem; color: var(--line); font-weight: 500; }
  .service-card__title { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; margin-bottom: var(--sp-2); }
  .service-card__desc { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }
  
  .reg-mark { position: absolute; width: 12px; height: 12px; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
  .reg-mark::before, .reg-mark::after { content: ""; position: absolute; background: var(--accent); }
  .reg-mark::before { width: 100%; height: 1.5px; top: 0; left: 0; }
  .reg-mark::after { width: 1.5px; height: 100%; top: 0; left: 0; }
  .reg-mark.tl { top: 10px; left: 10px; }
  .reg-mark.br { bottom: 10px; right: 10px; transform: rotate(180deg); }
  .service-card:hover .reg-mark { opacity: 1; }
  
  /* ----------------------------------------------------------------
     12. SECTOR TAGS
     ---------------------------------------------------------------- */
  .sector-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .sector-tag {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    padding: 0.55em 1em;
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--ink-soft);
    background: var(--surface);
    backdrop-filter: blur(3px);
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .sector-tag:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 16px -6px var(--accent); }
  
  /* ----------------------------------------------------------------
     13. SPLIT CTA + PROCESS FLOW
     ---------------------------------------------------------------- */
  .split-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
  .split-cta__panel {
    background: var(--surface);
    backdrop-filter: blur(3px);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .split-cta__panel .mono-tag { color: var(--accent); }
  .split-cta__panel h4 { font-size: 1.15rem; }
  .split-cta__panel p { font-size: 0.88rem; color: var(--ink-soft); flex-grow: 1; }
  
  .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); position: relative; }
  .flow::before { content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 1px; background: var(--line); z-index: 0; }
  .flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
  .flow-step__num {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--surface);
    backdrop-filter: blur(3px);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    box-shadow: 0 0 20px -8px var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .flow-step__num svg { width: 22px; height: 22px; }
  .flow-step h5 { font-family: var(--f-display); font-size: 0.98rem; font-weight: 600; }
  .flow-step p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.55; }
  
  /* ----------------------------------------------------------------
     14. PRESENCE / LOCATIONS
     ---------------------------------------------------------------- */
  .presence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .presence-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    background: var(--surface);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .presence-card:hover { box-shadow: 0 0 30px -10px var(--blueprint), var(--shadow-lg); border-color: var(--blueprint); }
  .presence-card__flag { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--steel); margin-bottom: var(--sp-3); }
  .presence-card h4 { font-size: 1.2rem; margin-bottom: var(--sp-3); }
  .presence-card dl { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .presence-card dt { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel); margin-bottom: 2px; }
  .presence-card dd { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--ink-soft); }
  .presence-card .pillar-dots { display: flex; gap: 6px; margin-top: var(--sp-4); }
  .presence-card .pillar-dots span { width: 8px; height: 8px; border-radius: 2px; }
  
  /* ----------------------------------------------------------------
     15. PROOF / TESTIMONIALS
     ---------------------------------------------------------------- */
  .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .proof-card {
    background: var(--surface);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .proof-card__stars { display: flex; gap: 3px; color: var(--amber); }
  .proof-card__stars svg { width: 14px; height: 14px; }
  .proof-card__quote { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.65; flex-grow: 1; font-style: italic; }
  .proof-card__who { font-size: 0.82rem; border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); }
  .proof-card__who b { display: block; color: var(--ink); font-weight: 600; }
  .proof-card__who span { color: var(--steel); font-family: var(--f-mono); font-size: 0.72rem; }
  .proof-note {
    margin-top: var(--sp-5);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--steel);
    border-left: 2px solid var(--line);
    padding-left: var(--sp-4);
  }
  
  /* ----------------------------------------------------------------
     16. CONTACT / FORM
     ---------------------------------------------------------------- */
  .cta-band {
    background: var(--blueprint-deep);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .cta-band .eyebrow { color: var(--amber); }
  .cta-band .h2 { color: #fff; }
  .cta-band .lede { color: rgba(255,255,255,0.7); }
  .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-8); align-items: start; }
  .contact-info-list { display: flex; flex-direction: column; gap: var(--sp-6); margin-top: var(--sp-7); }
  .contact-info-item { display: flex; gap: var(--sp-4); }
  .contact-info-item .ic { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--amber); }
  .contact-info-item dt { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); margin-bottom: 3px; }
  .contact-info-item dd { margin: 0; font-size: 0.95rem; color: var(--ink); }
  
  .contact-form {
    background: var(--surface);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--sp-7);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-4); }
  .form-field label {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--steel);
  }
  .form-field input, .form-field select, .form-field textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.75em 0.9em;
    background: rgba(255,255,255,0.85);
    color: var(--ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: var(--blueprint);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(47,111,234,0.18);
  }
  .form-field textarea { resize: vertical; min-height: 100px; }
  .form-note { font-size: 0.78rem; color: var(--steel); margin-top: var(--sp-3); }
  .form-success, .form-error {
    display: none;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: var(--sp-4);
  }
  .form-success {
    background: var(--teal-tint);
    border: 1px solid var(--teal);
    color: var(--ink);
  }
  .form-error {
    background: var(--amber-tint);
    border: 1px solid var(--amber);
    color: var(--ink);
  }
  .form-success.is-visible, .form-error.is-visible { display: block; }
  .btn[disabled] { opacity: 0.65; cursor: not-allowed; pointer-events: none; }
  .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  
  /* ----------------------------------------------------------------
     17. FOOTER
     ---------------------------------------------------------------- */
  .site-footer {
    background: linear-gradient(180deg, rgba(10,14,28,0.6), rgba(4,6,14,0.95)), var(--paper);
    color: rgba(255,255,255,0.85);
    padding: var(--sp-8) 0 var(--sp-6);
    border-top: 1px solid var(--line);
    position: relative;
  }
  .site-footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), var(--violet), var(--blueprint), transparent);
    opacity: 0.6;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1fr;
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .nav__logo { color: #fff; }
  .footer-brand p { margin-top: var(--sp-4); font-size: 0.88rem; color: rgba(255,255,255,0.55); max-width: 32ch; line-height: 1.6; }
  .footer-col h5 {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0 0 var(--sp-4);
  }
  .footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
  .footer-col a { font-size: 0.88rem; color: rgba(255,255,255,0.75); transition: color 0.2s ease; }
  .footer-col a:hover { color: #fff; }
  .footer-social { display: flex; gap: 0.6rem; margin-top: var(--sp-4); flex-wrap: wrap; }
  .footer-social a {
    width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .footer-social a:hover { border-color: var(--teal); background: rgba(14,148,136,0.12); box-shadow: 0 0 16px -4px var(--teal); transform: translateY(-3px); }
  .footer-social svg { width: 15px; height: 15px; color: #fff; }
  .footer-contact-links { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--sp-4); }
  .footer-contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    transition: color 0.2s ease;
  }
  .footer-contact-links a:hover { color: var(--teal); }
  .footer-contact-links svg { width: 15px; height: 15px; flex-shrink: 0; }
  .footer-bottom {
    padding-top: var(--sp-5);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
  }
  
  /* ----------------------------------------------------------------
     18. REVEAL & MOTION
     ---------------------------------------------------------------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
  .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
  .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; }
  .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
  
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-stagger > *, .btn, .service-card, .nav__links a::after { transition: none !important; opacity: 1 !important; transform: none !important; }
  }
  
  /* ----------------------------------------------------------------
     19. RESPONSIVE
     ---------------------------------------------------------------- */
  @media (max-width: 980px) {
    .wrap { padding: 0 var(--sp-5); }
    .nav__links, .nav__phone { display: none; }
    .nav__toggle { display: flex; }
    .nav.is-open .nav__links {
      display: flex;
      position: absolute;
      top: 76px; left: 0; right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      flex-direction: column;
      align-items: flex-start;
      padding: var(--sp-5);
      gap: var(--sp-4);
    }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__panel { order: -1; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3) { border-left: none; }
    .stat:nth-child(1), .stat:nth-child(3) { border-left: none; }
    .stat:nth-child(2n) { border-left: 1px solid var(--line); }
    .pillar__intro { grid-template-columns: 1fr; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .flow { grid-template-columns: 1fr; gap: var(--sp-6); }
    .flow::before { display: none; }
    .nav__right .btn-primary { display: none; }
    .split-cta { grid-template-columns: 1fr; }
    .presence-grid { grid-template-columns: 1fr; }
    .proof-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (max-width: 620px) {
    .wrap { padding: 0 var(--sp-4); }
    .section { padding: var(--sp-7) 0; }
    .pillar { padding: var(--sp-7) 0; }
    .service-grid, .service-grid--4, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
    .section-head { align-items: flex-start; }
    .index-table td, .index-table thead th { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .contact-form { padding: var(--sp-5); }
    .nav__logo-img { height: 32px; }
  }
  
  /* ================================================================
     20. PAGE HERO (sub-pages) — accent-aware banner
     ================================================================ */
  .page-hero {
    padding: var(--sp-9) 0 var(--sp-7);
    position: relative;
    overflow: hidden;
  }
  .page-hero[data-accent="amber"]      { --accent: var(--amber);     --accent-tint: var(--amber-tint); }
  .page-hero[data-accent="blueprint"]  { --accent: var(--blueprint); --accent-tint: var(--blueprint-tint); }
  .page-hero[data-accent="teal"]       { --accent: var(--teal);      --accent-tint: var(--teal-tint); }
  .page-hero::before {
    content: "";
    position: absolute;
    top: -30%; right: -10%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--accent-tint) 0%, transparent 70%);
    opacity: 0.9;
    z-index: 0;
    animation: floaty 9s ease-in-out infinite;
  }
  .page-hero .wrap { position: relative; z-index: 1; }
  .page-hero__inner { max-width: 760px; }
  .page-hero__inner .eyebrow { color: var(--accent); }
  .page-hero__title { margin-top: 0.9rem; }
  .page-hero__sub { margin-top: 1rem; }
  
  @keyframes floaty {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-24px, 24px) scale(1.06); }
  }
  
  .section-divider { height: 1px; background: var(--line); margin: 0 auto; max-width: var(--max); }
  
  /* Section accent context so pillar pages tint their sector tags/cta to match */
  [data-accent="amber"]      { --accent: var(--amber);     --accent-tint: var(--amber-tint); }
  [data-accent="blueprint"]  { --accent: var(--blueprint); --accent-tint: var(--blueprint-tint); }
  [data-accent="teal"]       { --accent: var(--teal);      --accent-tint: var(--teal-tint); }
  
  /* ================================================================
     21. 3D HOVER / MOTION LAYER
     ---------------------------------------------------------------- */
  
  /* Perspective context wherever tilt cards live */
  .service-grid, .presence-grid, .proof-grid, .grid-4, .index-card, .flow-step, .split-cta__panel {
    perspective: 1200px;
  }
  
  /* Service cards: real 3D tilt + lift + glow, driven by --rx/--ry set via JS,
     with a graceful CSS-only fallback if JS hasn't attached yet */
  .service-card {
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(.2,.8,.25,1), box-shadow 0.35s ease, background 0.25s ease;
    will-change: transform;
  }
  .service-card:hover {
    transform: perspective(1200px) rotateX(var(--ry, -4deg)) rotateY(var(--rx, 4deg)) translateY(-6px) translateZ(10px);
    box-shadow: var(--shadow-lg);
    z-index: 2;
  }
  .service-card__icon {
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.3s ease, color 0.3s ease;
  }
  .service-card:hover .service-card__icon {
    transform: translateZ(24px) rotate(-6deg) scale(1.12);
    background: var(--accent);
    color: #fff;
  }
  .service-card__title, .service-card__desc, .service-card__index { transition: transform 0.4s ease; }
  .service-card:hover .service-card__title { transform: translateZ(14px); }
  .service-card:hover .service-card__desc  { transform: translateZ(8px); }
  
  /* Presence / location cards */
  .presence-card {
    transition: transform 0.4s cubic-bezier(.2,.8,.25,1), box-shadow 0.4s ease;
    transform-style: preserve-3d;
  }
  .presence-card:hover {
    transform: translateY(-8px) rotateX(3deg) scale(1.015);
    box-shadow: var(--shadow-lg);
  }
  
  /* Testimonial / proof cards */
  .proof-card {
    transition: transform 0.4s cubic-bezier(.2,.8,.25,1), box-shadow 0.4s ease;
  }
  .proof-card:hover {
    transform: translateY(-8px) rotateZ(-0.4deg) scale(1.02);
    box-shadow: var(--shadow-lg);
  }
  
  /* Values grid (grid-4 on about/home) */
  .grid-4 > div { transition: transform 0.35s cubic-bezier(.2,.8,.25,1); }
  .grid-4 > div:hover { transform: translateY(-6px) scale(1.03); }
  .grid-4 > div:hover .service-card__icon,
  .grid-4 .service-card__icon { transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.3s ease, color 0.3s ease; }
  .grid-4 > div:hover .service-card__icon { transform: translateZ(0) rotate(8deg) scale(1.15); background: var(--accent); color: #fff; }
  
  .grid-3 > div { transition: transform 0.35s cubic-bezier(.2,.8,.25,1); }
  .grid-3 > div:hover { transform: translateY(-6px) scale(1.03); }
  .grid-3 > div:hover .service-card__icon { transform: translateZ(0) rotate(8deg) scale(1.15); background: var(--accent); color: #fff; }
  
  /* Flow steps (sourcing page) */
  .flow-step__num { transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; }
  .flow-step:hover .flow-step__num { transform: translateY(-4px) rotate(-8deg) scale(1.1); box-shadow: var(--shadow-md); }
  
  /* Split CTA panels */
  .split-cta__panel { transition: transform 0.35s ease, box-shadow 0.35s ease; }
  .split-cta__panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); z-index: 1; }
  
  /* Buttons: lift + arrow nudge already partly there — deepen it */
  .btn { transition: transform 0.25s cubic-bezier(.2,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease; }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(14,61,140,0.45); }
  .btn-ghost:hover { transform: translateY(-3px); }
  
  /* Logo: subtle 3D pop on hover */
  .nav__logo-img { transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
  .nav__logo:hover .nav__logo-img { transform: scale(1.06) rotate(-2deg); }
  
  /* Index card (home service index) — gentle float-tilt */
  .index-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
  }
  .index-card:hover { transform: rotateX(2deg) rotateY(-2deg) translateY(-4px); box-shadow: var(--shadow-lg); }
  .sys-arrow { transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
  tr:hover .sys-arrow { transform: translateX(6px); }
  
  /* Sector tags: small 3D pop */
  .sector-tag { transition: border-color 0.2s ease, color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; }
  .sector-tag:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
  
  .page-hero--slim { padding: var(--sp-5) 0; }
  .page-hero--slim::before { display: none; }
  .page-hero--slim .eyebrow { color: var(--accent); }
  
  @media (max-width: 860px) {
    .page-hero { padding: var(--sp-7) 0 var(--sp-6); }
    .page-hero::before { display: none; }
  }
  
  /* ================================================================
     22. FORM SELECT ARROW (light glass fields need a visible chevron)
     ================================================================ */
  .form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348546E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
    background-size: 16px;
    padding-right: 2.4em;
  }