/* ============================================================
   RUNEX GROUP LLC — "clinical blue & green" v5
   Healthcare-solutions holding company. Institutional, calm,
   expensive — a B2B operator that also takes card payments.

   The reskin brief, in one line: blue for trust and strength,
   green for health and wealth, on light ground. Nothing about
   this site should feel dark or ominous at the moment somebody
   is asked to type a card number.

   The whole system is derived from the group's own mark: a glossy
   X running deep blue → emerald → bright aqua. Those three stops
   are the palette; everything else is a tint, a shade, or a
   hairline of them.

   Type is Garet (CDN Fonts) — the face the sister site vitora.life
   uses. Garet ships exactly two weights: Book (300) and Heavy (850),
   and no italic. So the hierarchy is built from that extreme pair:
   display set large and LIGHT with tight tracking, structure set
   small and HEAVY. The old italic-serif accent word is replaced by
   the accent word in Heavy, filled with the brand gradient.
   ============================================================ */

@import url('https://fonts.cdnfonts.com/css/garet');

:root{
  /* ---- light grounds: cool paper, never white-hot, never grey ---- */
  --paper:#F4F8FB;
  --paper-2:#E9F1F7;
  --paper-3:#DDE9F3;
  --surface:#FFFFFF;

  /* ---- deep blues: the "dark" tone. Footer, CTA band, dark cards ---- */
  --navy:#0B2E4F;
  --navy-deep:#062338;
  --navy-mid:#123F68;

  /* ---- accents, straight off the mark ---- */
  --blue:#0E6BA8;        /* primary accent — 5.4:1 on paper */
  --blue-deep:#014B82;   /* logo blue — 8.6:1 on paper */
  --blue-lift:#3E90C8;   /* only on navy */
  --green:#1E9E6A;       /* health/positive — graphics + large type */
  --green-deep:#117B53;  /* the same green, safe as small text */
  --aqua:#03C2D6;        /* logo aqua — graphics only on light */
  --aqua-deep:#0A7383;   /* aqua that survives as text */
  --mint:#A8F6D1;        /* logo mint — reads on navy, never on paper */

  /* ---- ink ramp on paper ---- */
  --ink:#082337;         /* headings                 15.0:1 */
  --ink-2:#2E4C64;       /* body                      8.2:1 */
  --ink-3:#4F6E87;       /* secondary body            5.1:1 */
  --ink-4:#55738C;       /* legal / footnote          4.7:1 */

  /* ---- ink ramp on navy ---- */
  --on-dark:#EAF3FA;     /* 12.5:1 */
  --on-dark-2:#B7D2E6;   /*  9.0:1 */
  --on-dark-3:#89AECB;   /*  6.0:1 */

  /* ---- hairlines: navy at low alpha, so rules stay in the family ---- */
  --line:rgba(11,46,79,.13);
  --line-2:rgba(11,46,79,.24);
  --line-soft:rgba(11,46,79,.07);
  --line-inv:rgba(200,228,246,.15);
  --line-inv-2:rgba(200,228,246,.28);

  /* ---- the one signature gradient, echoing the mark ----
     --grad     : decorative fills (rules, glows, edges)
     --grad-ink : the text-safe variant — every stop clears AA on paper */
  --grad:linear-gradient(112deg,#014B82 0%,#0E6BA8 24%,#1E9E6A 62%,#03C2D6 100%);
  --grad-ink:linear-gradient(96deg,#014B82 0%,#0E6BA8 34%,#12856F 68%,#0A7383 100%);

  /* ---- type ---- */
  --sans:"Garet",-apple-system,Helvetica,sans-serif;
  --body:"Garet","Archivo",-apple-system,Helvetica,sans-serif;
  --mono:"Garet",-apple-system,Helvetica,sans-serif;
  /* Garet has two real weights and nothing between them */
  --w-book:300;
  --w-heavy:850;

  --wrap:1240px;
  --r:3px;
  --ease:cubic-bezier(.2,.7,.25,1);

  /* one reusable paper-tooth tile */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  /* ---- legacy aliases ------------------------------------------------
     Older markup (and a handful of inline styles) still names the
     black-and-gold tokens. They are remapped, not deleted, so every
     stray reference lands somewhere correct in the new system. ---- */
  --black:var(--paper);
  --black-2:var(--surface);
  --black-3:var(--paper-2);
  --panel:var(--paper-2);
  --gold:var(--blue);
  --gold-hi:var(--blue-deep);
  --gold-lo:var(--navy-mid);
  --cold:var(--blue);
  --steel:var(--ink-3);
  --cream:var(--ink);
  --ink-soft:var(--ink-2);
  --ink-faint:var(--ink-3);
  --ink-ghost:var(--ink-4);
  --font-serif:var(--sans);
  --font-sans:var(--sans);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-weight:var(--w-book);background:var(--paper);color:var(--ink-2);
  line-height:1.72;font-size:16.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;position:relative}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* a whisper of tooth over the whole page so the paper never reads dead-flat */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:180px;opacity:.03;mix-blend-mode:multiply}
body>*{position:relative;z-index:2}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
section{padding:132px 0;position:relative}

/* ---------- type ----------
   Display is Book (300) at size; structure is Heavy (850) at scale.
   Anything asking for 600/700 in this sheet resolves to Heavy. */
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:var(--w-book);
  line-height:1.06;letter-spacing:-.028em}
h1{font-size:clamp(2.9rem,6.6vw,5.5rem);line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem);letter-spacing:-.032em;text-wrap:balance}
h3{font-size:1.3rem;font-weight:var(--w-heavy);letter-spacing:-.008em;line-height:1.26}
h4{font-weight:var(--w-heavy)}

/* Garet has no italic — emphasis is carried by weight and colour instead */
em,.italic{font-style:normal;font-weight:var(--w-heavy);color:var(--blue-deep)}
.gold{color:var(--blue-deep);font-weight:var(--w-heavy)}

/* THE accent word: heavy, filled with the mark's own gradient.
   Colour first, gradient only where background-clip:text is supported,
   so the word is never invisible. */
.gold-i{font-style:normal;font-weight:var(--w-heavy);color:var(--blue-deep);
  letter-spacing:-.042em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-i{background-image:var(--grad-ink);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
}
strong{color:var(--ink);font-weight:var(--w-heavy)}

/* recurring accent: tracked caps behind a short gradient dash */
.label{font-family:var(--sans);font-size:.68rem;letter-spacing:.3em;font-weight:var(--w-heavy);
  text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:15px;
  margin-bottom:28px}
.label::before{content:"";width:34px;height:2px;background:var(--grad);border-radius:2px;flex:none}
.label.center{justify-content:center}

.lead{font-size:clamp(1.06rem,1.4vw,1.24rem);line-height:1.7;color:var(--ink-2);max-width:62ch}
.lead strong{color:var(--ink);font-weight:var(--w-heavy)}
.sub{font-size:.95rem;line-height:1.78;color:var(--ink-3)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(244,248,251,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  transition:background .35s var(--ease)}
/* the one brand echo in the chrome: a chromatic hairline under the bar */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grad);opacity:.5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:90px}
.brand{display:flex;align-items:center;gap:14px}
/* the mark is a transparent PNG — no plate, no ring, no radius behind it */
.brand-mark{width:42px;height:42px;flex:none;object-fit:contain;
  filter:drop-shadow(0 3px 9px rgba(1,75,130,.2))}
.brand-name{font-family:var(--sans);font-size:1.3rem;font-weight:var(--w-heavy);letter-spacing:-.02em;
  color:var(--ink);line-height:1}
.brand-name small{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.4em;
  color:var(--blue);margin-top:7px;font-weight:var(--w-heavy);text-transform:uppercase}

.nav-links{display:flex;align-items:center;gap:36px}
/* :not(.btn) matters — otherwise this outranks .btn and the nav CTA loses
   its weight and colour to the plain-link treatment */
.nav-links a:not(.btn){font-size:.88rem;color:var(--ink-2);transition:color .25s;font-weight:var(--w-book);
  letter-spacing:0;position:relative}
.nav-links a:not(.btn):hover,.nav-links a.active:not(.btn){color:var(--blue-deep)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:24px;height:2px;border-radius:2px;background:var(--navy);transition:.3s var(--ease)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 32px;font-size:.72rem;letter-spacing:.16em;font-weight:var(--w-heavy);text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--blue-deep);transition:all .32s var(--ease);white-space:nowrap;
  background:var(--surface);border-radius:var(--r);position:relative;overflow:hidden}
.btn:hover{background:var(--paper-2);border-color:rgba(14,107,168,.5);color:var(--blue-deep);
  box-shadow:0 10px 24px -16px rgba(1,75,130,.5)}
.btn-solid{background:linear-gradient(180deg,#1279B9 0%,#0E6BA8 52%,#0A5789 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 14px 32px -16px rgba(1,75,130,.62)}
/* a single restrained sheen — the one authored micro-interaction on the CTA */
.btn-solid::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn-solid:hover{color:#fff;transform:translateY(-2px);
  background:linear-gradient(180deg,#1782C4 0%,#0F72B2 52%,#0A5789 100%);
  box-shadow:0 22px 46px -18px rgba(1,75,130,.72)}
.btn-solid:hover::after{left:130%}
.btn-sm{padding:12px 22px;font-size:.64rem}

/* ============================================================
   HERO — light ground, designed in CSS.
   The old dark photography and the warm clip are retired here:
   a warm dark frame under a pale veil only ever reads as mud.
   What replaces them is an aurora of the three brand stops, a
   blurred gradient blade echoing the X, and a fine measured grid.
   ============================================================ */
.hero{position:relative;min-height:93vh;min-height:93svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--paper)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4;
  background:var(--line)}

/* the retired media stays in the markup and out of the composition */
.hero video,.hero .hero-media{display:none}

.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(56% 46% at 80% 8%,rgba(3,194,214,.22),transparent 62%),
    radial-gradient(50% 44% at 96% 44%,rgba(30,158,106,.18),transparent 62%),
    radial-gradient(64% 58% at 6% 92%,rgba(14,107,168,.16),transparent 64%),
    linear-gradient(178deg,#FCFDFE 0%,#EFF6FB 44%,#E2EDF6 100%)}
/* the blade: a soft sweep of the mark's own gradient, upper right */
.hero-veil::before{content:"";position:absolute;right:-14%;top:-34%;width:min(720px,74vw);height:154%;
  background:var(--grad);opacity:.17;filter:blur(58px);transform:rotate(19deg);
  -webkit-mask-image:radial-gradient(58% 56% at 50% 50%,#000,transparent 74%);
  mask-image:radial-gradient(58% 56% at 50% 50%,#000,transparent 74%)}
/* measured grid — structure without decoration */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(78% 72% at 50% 38%,#000,transparent 78%);
  mask-image:radial-gradient(78% 72% at 50% 38%,#000,transparent 78%)}

.hero-in{position:relative;z-index:3;width:100%;padding-top:84px}
.hero .label{margin-bottom:30px}
.hero h1{max-width:17ch;margin-bottom:30px}
.hero .lead{max-width:54ch;margin-bottom:44px;font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--ink-2)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* short interior heroes: content bottom-aligned, calmer wash */
.hero-sub{min-height:60vh;min-height:60svh;align-items:flex-end}
.hero-sub .hero-in{padding-top:150px;padding-bottom:74px}
.hero-sub h1{font-size:clamp(2.3rem,4.8vw,3.9rem);max-width:20ch}
.hero-sub .hero-veil{background:
  radial-gradient(52% 62% at 84% 4%,rgba(3,194,214,.19),transparent 64%),
  radial-gradient(44% 58% at 98% 52%,rgba(30,158,106,.15),transparent 62%),
  linear-gradient(178deg,#FCFDFE 0%,#EFF6FB 52%,#E4EFF7 100%)}
.hero-sub .hero-veil::before{opacity:.13;width:min(560px,62vw);right:-16%}
.hero-sub .hero-lead{max-width:58ch;margin-top:26px;color:var(--ink-2)}

/* the four-discipline rail directly under the hero */
.hero-strip{border-bottom:1px solid var(--line);background:var(--surface);position:relative}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);padding:0;max-width:none}
.hs{background:var(--surface);padding:36px 40px;transition:background .35s var(--ease);
  position:relative;min-width:0}
.hs::before{content:"";position:absolute;top:0;left:40px;width:24px;height:2px;background:var(--grad);
  opacity:0;transition:opacity .35s var(--ease)}
.hs:hover{background:var(--paper)}
.hs:hover::before{opacity:1}
.hs b{display:block;font-family:var(--sans);font-size:1.05rem;font-weight:var(--w-heavy);
  color:var(--blue-deep);margin-bottom:9px;letter-spacing:-.015em}
.hs span{font-size:.84rem;color:var(--ink-3);line-height:1.6}

/* ---------- section head ---------- */
.sec-head{max-width:820px;margin-bottom:82px}
.sec-head h2{margin-bottom:24px}
.sec-head .lead{margin-top:22px}

/* ============================================================
   SPLIT — asymmetric text + framed media panel
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:92px;align-items:center}
.split.wide-text{grid-template-columns:1.25fr .75fr}
.split-media{position:relative;aspect-ratio:4/5;background:var(--paper-2);
  border:1px solid var(--line);overflow:hidden;min-width:0;border-radius:var(--r);
  box-shadow:0 34px 70px -50px rgba(6,35,56,.55)}
/* The supplied photography is warm and gold — a light shaft on stone, gold
   light-trails on a wet road. Washing it out to a high-key print killed the
   drama and left grey slabs, so it is duotoned instead: luminance from the
   photograph, hue from the brand gradient. The shaft and the trails survive,
   in blue and green. */
.split-media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.18) brightness(1.02)}
.split-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(152deg,#014B82 0%,#0E6BA8 38%,#1E9E6A 76%,#03C2D6 100%);
  mix-blend-mode:color;opacity:.92}
/* a touch of lift at the top so the panel sits on the page rather than in it */
.split-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 34%,rgba(6,35,56,.14))}

/* intentional framed panel — a ghosted brand mark, an inset frame, and a
   plate-style caption pinned bottom-left. Reads as art direction, not an empty box */
.media-placeholder{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(86% 66% at 30% 20%,rgba(3,194,214,.2),transparent 64%),
    radial-gradient(70% 70% at 90% 90%,rgba(30,158,106,.16),transparent 62%),
    linear-gradient(158deg,#FFFFFF 0%,#E4EFF7 78%)}
.media-placeholder::before{content:"";position:absolute;inset:0;
  background:var(--grain);background-size:170px;opacity:.045;mix-blend-mode:multiply}
.media-placeholder::after{content:"";position:absolute;inset:18px;border:1px solid var(--line)}
.media-placeholder .mp-mark{position:absolute;top:50%;left:50%;width:44%;max-width:190px;
  transform:translate(-50%,-56%);opacity:.2}
.media-placeholder .mp-cap{position:absolute;left:30px;bottom:28px;z-index:2;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-4);font-weight:var(--w-heavy);display:flex;align-items:center;gap:12px}
.media-placeholder .mp-cap::before{content:"";width:16px;height:2px;background:var(--grad)}

/* ============================================================
   FOUR PILLARS — specimen wall, hairline-separated, rich hover
   ============================================================ */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillar{background:var(--surface);padding:66px 56px 60px;position:relative;
  transition:background .45s var(--ease);overflow:hidden;min-width:0}
/* top rule that draws in on hover, in the mark's gradient */
.pillar::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
/* soft corner light on hover */
.pillar::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(130% 100% at 100% 0%,rgba(3,194,214,.11),transparent 58%)}
.pillar:hover{background:#FBFDFE}
.pillar:hover::before{opacity:1}
.pillar:hover::after{transform:scaleX(1)}
.pillar-n{font-family:var(--sans);font-size:.68rem;letter-spacing:.26em;color:var(--blue);
  font-weight:var(--w-heavy);text-transform:uppercase;display:inline-flex;align-items:center;gap:13px;
  margin-bottom:26px;position:relative}
.pillar-n::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.pillar h3{margin-bottom:16px;font-size:1.6rem;position:relative;color:var(--ink);letter-spacing:-.024em}
.pillar p{font-size:.96rem;line-height:1.78;color:var(--ink-3);max-width:47ch;position:relative}
.pillar ul{margin-top:28px;padding-top:26px;border-top:1px solid var(--line);position:relative}
.pillar li{font-size:.88rem;color:var(--ink-2);padding:9px 0 9px 24px;position:relative;line-height:1.55}
.pillar li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:2px;
  border-radius:2px;background:var(--green)}

/* ============================================================
   OPERATING COMPANIES — a prestige holdings listing
   ============================================================ */
.oc{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative}
.oc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 90% 10%,rgba(3,194,214,.11),transparent 62%)}
.oc-card{display:grid;grid-template-columns:auto 1fr auto;gap:52px;align-items:center;
  padding:54px 40px;border:1px solid var(--line);background:var(--surface);position:relative;
  border-radius:var(--r);transition:border-color .4s var(--ease),box-shadow .4s var(--ease);min-width:0;
  box-shadow:0 18px 40px -34px rgba(6,35,56,.5)}
.oc-card+.oc-card{margin-top:20px}
.oc-card:hover{border-color:rgba(14,107,168,.4);box-shadow:0 26px 54px -32px rgba(6,35,56,.42)}
/* Operating-company marks are supplied as finished medallions with their own
   ring — a wrapper border/padding here would double the circle. */
.oc-mark{width:78px;height:78px;object-fit:contain;flex:none;
  filter:drop-shadow(0 8px 20px rgba(6,35,56,.22))}
.oc-body{min-width:0}
.oc-body h3{margin-bottom:12px;font-size:1.5rem;color:var(--ink);letter-spacing:-.026em}
.oc-body p{font-size:.95rem;color:var(--ink-3);max-width:66ch;line-height:1.76}
.oc-body a{color:var(--blue);font-size:.88rem;font-weight:var(--w-heavy);transition:color .25s}
.oc-body a:hover{color:var(--blue-deep)}
.oc-tag{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-deep);border:1px solid rgba(30,158,106,.4);background:rgba(30,158,106,.09);
  padding:10px 17px;white-space:nowrap;font-weight:var(--w-heavy);
  border-radius:100px;align-self:center}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--surface);padding:54px 38px;transition:background .35s var(--ease);
  position:relative;min-width:0}
.stat:hover{background:#FBFDFE}
.stat b{display:block;font-family:var(--sans);font-size:clamp(2.6rem,4.2vw,3.7rem);
  font-weight:var(--w-heavy);color:var(--blue-deep);letter-spacing:-.05em;line-height:1;margin-bottom:16px}
.stat span{font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;
  color:var(--ink-3);line-height:1.62;display:block}

/* ============================================================
   CTA BAND — the one deep-blue band on the page. Light site, one
   deliberate anchor of depth before the footer, never a mood.
   ============================================================ */
.cta{position:relative;overflow:hidden;border:0;
  background:
    radial-gradient(70% 120% at 88% 6%,rgba(3,194,214,.24),transparent 60%),
    radial-gradient(58% 100% at 4% 96%,rgba(30,158,106,.2),transparent 62%),
    linear-gradient(158deg,#0B2E4F 0%,#062338 78%)}
.cta::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:var(--grain);background-size:170px;mix-blend-mode:overlay}
.cta .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:56px;flex-wrap:wrap}
.cta h2{max-width:16ch;font-size:clamp(2.1rem,3.8vw,3.2rem);color:#fff}
.cta p{margin-top:20px;max-width:48ch;color:var(--on-dark-2);font-size:1.04rem}
.cta .btn{flex:none}
.cta .btn-solid{background:var(--mint);color:var(--navy-deep);
  box-shadow:0 14px 30px -14px rgba(3,26,44,.7)}
.cta .btn-solid:hover{background:#C4FBE0;color:var(--navy-deep);
  box-shadow:0 20px 42px -14px rgba(3,26,44,.75)}
.cta .btn:not(.btn-solid){background:transparent;border-color:var(--line-inv-2);color:var(--on-dark)}
.cta .btn:not(.btn-solid):hover{background:rgba(200,228,246,.1);border-color:var(--mint);color:#fff}

/* ============================================================
   FORMS
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:11px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--sans);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:var(--w-heavy)}
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;
  font-family:inherit;font-weight:var(--w-book);font-size:.97rem;padding:15px 16px;background:var(--surface);
  border:1px solid var(--line-2);color:var(--ink);transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;border-radius:var(--r)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  background:var(--surface);box-shadow:0 0 0 3px rgba(14,107,168,.16)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4);opacity:1}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6BA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:15px;padding-right:46px}

.alert{padding:15px 18px;border:1px solid var(--line-2);font-size:.92rem;margin-bottom:24px;
  border-radius:var(--r);background:var(--surface);color:var(--ink-2)}
.alert-ok{border-color:rgba(30,158,106,.42);color:var(--green-deep);background:rgba(30,158,106,.08)}
.alert-err{border-color:rgba(180,35,24,.34);color:#B42318;background:rgba(180,35,24,.05)}

/* ---------- contact rows ---------- */
.info-list{border-top:1px solid var(--line)}
.info-row{display:grid;grid-template-columns:180px 1fr;gap:26px;padding:26px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.info-row b{font-family:var(--sans);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:var(--w-heavy)}
.info-row span,.info-row a{color:var(--ink);font-size:1rem}
.info-row a:hover{color:var(--blue)}

/* ============================================================
   FOOTER — the deep-blue base the whole page sits on
   ============================================================ */
footer{padding:92px 0 38px;background:var(--navy-deep);position:relative;color:var(--on-dark-3)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:70px;margin-bottom:64px}
/* the link columns are content-dependent — don't leave a hole where a
   third column used to be. Desktop only: the narrower breakpoints below
   already collapse the grid, and :has() would otherwise outrank them. */
@media(min-width:981px){
  .foot-grid:not(:has(> :nth-child(3))){grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
}
footer .brand-name{color:#fff}
footer .brand-name small{color:var(--mint)}
footer .brand-mark{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.foot-brand p{font-size:.9rem;color:var(--on-dark-3);max-width:46ch;margin-top:26px;line-height:1.8}
footer h4{font-family:var(--sans);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mint);margin-bottom:24px;font-weight:var(--w-heavy)}
.foot-links li{margin-bottom:14px}
.foot-links a{font-size:.91rem;color:var(--on-dark-3);transition:color .25s}
.foot-links a:hover{color:#fff}
.foot-legal{border-top:1px solid var(--line-inv);padding-top:32px;display:flex;
  justify-content:space-between;gap:26px;flex-wrap:wrap;font-size:.78rem;color:var(--on-dark-3)}

/* ============================================================
   REVEAL ON SCROLL (wired in main.js)
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn-solid::after{display:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .split{gap:60px}
  .cta .wrap{gap:40px}
}
/* between the tablet break and the burger the desktop nav has to fit
   a longer link set — tighten it rather than let the page scroll sideways */
@media(max-width:1000px){
  .nav .wrap{height:82px}
  .nav-links{gap:20px}
  .nav-links a:not(.btn){font-size:.84rem}
  .nav-links .btn-sm{padding:11px 16px;font-size:.6rem;letter-spacing:.12em}
  .brand-name{font-size:1.18rem}
}
@media(max-width:980px){
  section{padding:100px 0}
  .split,.split.wide-text{grid-template-columns:1fr;gap:52px}
  .split-media{aspect-ratio:16/10;max-width:560px}
  .pillars{grid-template-columns:1fr}
  .hero-strip .wrap{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:48px}
  .oc-card{grid-template-columns:auto 1fr;gap:32px 28px}
  .oc-tag{grid-column:2;justify-self:start}
  .sec-head{margin-bottom:60px}
}
@media(max-width:760px){
  .wrap{padding:0 22px}
  section{padding:82px 0}
  .nav .wrap{height:76px}
  /* the open menu is a mode, not a glass panel — solid, so nothing behind it
     shows through the links */
  .nav-links{position:fixed;inset:76px 0 auto 0;background:#F9FCFE;
    flex-direction:column;align-items:flex-start;gap:0;padding:12px 22px 30px;
    border-bottom:1px solid var(--line);box-shadow:0 24px 44px -28px rgba(6,35,56,.55);display:none}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:17px 0;width:100%;border-bottom:1px solid var(--line);font-size:1.02rem}
  /* full-width in the open menu, so it gets its full size back */
  .nav-links .btn{margin-top:22px;width:100%;padding:16px 22px;font-size:.7rem;letter-spacing:.16em}
  .nav-burger{display:flex}
  .hero{min-height:86vh;min-height:86svh}
  .hero-in{padding-top:60px}
  .hero-veil::before{opacity:.14;width:min(460px,92vw);right:-26%}
  .hero-sub .hero-in{padding-top:120px;padding-bottom:56px}
  .hero-strip .wrap{grid-template-columns:1fr}
  .hs{padding:26px 24px}
  .form-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:44px}
  .info-row{grid-template-columns:1fr;gap:8px}
  .pillar{padding:48px 30px 44px}
  .oc-card{grid-template-columns:1fr;gap:24px;padding:38px 26px;text-align:left}
  .oc-tag{grid-column:1;justify-self:start}
  .cta .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .stats{grid-template-columns:1fr}
  h1{font-size:clamp(2.4rem,10.5vw,3rem)}
}

[hidden]{display:none !important}

/* ---------- pillar → landing-page link ---------- */
.pillar-more{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:var(--w-heavy);color:var(--blue);transition:gap .3s var(--ease),color .3s}
.pillar-more:hover{gap:15px;color:var(--blue-deep)}

/* ============================================================
   v4 layouts — centered hero, capabilities index, nav dropdown
   ============================================================ */

/* ---------- centered hero (homepage) ---------- */
.hero.center .hero-in{text-align:center}
.hero.center .hero-in .label{justify-content:center}
.hero.center .hero-in h1{margin-left:auto;margin-right:auto;max-width:25ch;
  font-size:clamp(2.7rem,5.6vw,4.9rem);text-wrap:pretty}
.hero.center .hero-in .lead{margin-left:auto;margin-right:auto}
.hero.center .hero-in .hero-ctas{justify-content:center}
.hero.center .hero-veil{background:
  radial-gradient(46% 42% at 22% 12%,rgba(14,107,168,.18),transparent 64%),
  radial-gradient(50% 44% at 82% 10%,rgba(3,194,214,.22),transparent 62%),
  radial-gradient(56% 48% at 62% 100%,rgba(30,158,106,.17),transparent 62%),
  linear-gradient(178deg,#FCFEFF 0%,#EFF6FB 46%,#E1EDF6 100%)}
.hero.center .hero-veil::before{right:auto;left:50%;transform:translateX(-50%) rotate(19deg);
  width:min(940px,96vw);opacity:.15}

/* ---------- capabilities: image-free discipline index ---------- */
.cap-index{border-top:1px solid var(--line)}
.cap-row{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:60px 4px;
  border-bottom:1px solid var(--line);align-items:start;position:relative;
  transition:background .45s var(--ease),padding-left .45s var(--ease)}
.cap-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.cap-row:hover{background:linear-gradient(90deg,rgba(14,107,168,.06),transparent 68%);padding-left:26px}
.cap-row:hover::before{transform:scaleY(1)}
.cap-row .label{margin-bottom:16px}
.cap-row h2{font-size:clamp(1.7rem,2.8vw,2.4rem);margin-bottom:0}
.cap-row .lead{margin-bottom:24px}
.cap-go{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:var(--w-heavy);color:var(--blue);
  transition:gap .3s var(--ease),color .3s}
.cap-row:hover .cap-go{gap:18px;color:var(--blue-deep)}
@media(max-width:820px){.cap-row{grid-template-columns:1fr;gap:18px;padding:44px 0}
  .cap-row:hover{padding-left:16px}}

/* ---------- about: pull-quote replaces the empty frame ---------- */
.about-why{grid-template-columns:1.25fr .75fr;align-items:center;gap:72px}
.pullquote{position:relative;padding:6px 0 6px 34px}
.pullquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;
  background:var(--grad)}
.pullquote p{font-family:var(--sans);font-weight:var(--w-book);font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.28;letter-spacing:-.03em;color:var(--ink)}
@media(max-width:820px){.about-why{grid-template-columns:1fr;gap:34px}}

/* ---------- nav dropdown ---------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:7px}
.nav-caret{font-size:.5rem;opacity:.7;transition:transform .3s var(--ease),opacity .3s}
.nav-item:hover .nav-caret{opacity:1;transform:rotate(180deg)}
.nav-drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);
  min-width:240px;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 26px 54px -26px rgba(6,35,56,.42);
  opacity:0;visibility:hidden;pointer-events:none;transition:all .28s var(--ease);z-index:90}
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;
  pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop a{padding:13px 16px;font-size:.88rem;color:var(--ink-2);font-weight:var(--w-book);
  border-radius:2px;
  display:flex;align-items:center;justify-content:space-between;transition:background .2s,color .2s,padding .2s}
.nav-drop a::after{content:"→";opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;color:var(--blue)}
.nav-drop a:hover{background:rgba(14,107,168,.08);color:var(--blue-deep);padding-left:20px}
.nav-drop a:hover::after{opacity:1;transform:translateX(0)}

@media(max-width:760px){
  .nav-item{flex-direction:column;align-items:flex-start;width:100%}
  .nav-item>a{width:100%;padding:16px 0;border-bottom:1px solid var(--line)}
  .nav-drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    padding:4px 0 8px 18px;width:100%}
  .nav-drop a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-caret{display:none}
}

/* the injected Sign-in entry sits like the other nav links */
.nav-links a.nav-auth{font-size:.88rem;color:var(--blue-deep);font-weight:var(--w-heavy)}
.nav-links a.nav-auth:hover{color:var(--blue)}

/* ============================================================
   ATMOSPHERE — v5.1
   The reskin landed the palette but left long pale runs reading
   as blank paper. These are wash layers, not new components: a
   soft aurora of the brand stops behind alternating sections, a
   gradient edge on the structural bands, and the mark's gradient
   applied to the figures that carry the most weight.
   ============================================================ */

/* --- alternating section washes -------------------------------
   Every other section gets a large, very low-opacity bloom of the
   brand gradient, offset so no two neighbours bloom in the same
   corner. Sits under the content, never over it. */
section{isolation:isolate}
section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
section:nth-of-type(odd)::before{
  background:
    radial-gradient(1100px 620px at 88% 8%, rgba(3,194,214,.10), transparent 62%),
    radial-gradient(900px 560px at 4% 92%, rgba(30,158,106,.09), transparent 66%)}
section:nth-of-type(even)::before{
  background:
    radial-gradient(1000px 600px at 6% 6%, rgba(14,107,168,.10), transparent 62%),
    radial-gradient(900px 540px at 94% 88%, rgba(3,194,214,.08), transparent 66%)}

/* --- structural bands get a real ground + a chromatic edge ---- */
.stats{position:relative;
  background:linear-gradient(180deg,var(--surface),#EDF5FA);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 70px -58px rgba(6,35,56,.5)}
.stats::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);z-index:1}
.stat{background:transparent;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
/* the figures carry the mark's own gradient */
.stat b{background-image:var(--grad-ink);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;background-size:200% 100%;
  transition:background-position .6s var(--ease)}
.stat:hover b{background-position:100% 0}

/* --- discipline strip under the hero -------------------------- */
.hero-strip{background:linear-gradient(180deg,var(--surface),#EEF5FA)}
.hero-strip::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);opacity:.85}
.hs{background:transparent;transition:background .35s var(--ease)}
.hs:hover{background:rgba(255,255,255,.7)}

/* --- framed media: a chromatic edge so the panel is deliberate - */
.split-media{position:relative}
.split-media::after{border-radius:var(--r)}
.split-media{box-shadow:0 34px 70px -46px rgba(1,75,130,.55),
                       0 0 0 1px rgba(14,107,168,.14)}

/* --- nav: a whisper of tint + the gradient rule ---------------- */
.nav{background:linear-gradient(180deg,rgba(248,252,254,.92),rgba(240,247,251,.86))}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grad);opacity:.5}

/* --- pillars: a gradient hairline that draws in on hover ------- */
.pillar{position:relative;overflow:hidden}
.pillar::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.pillar:hover::after{transform:scaleX(1)}

/* --- CTA band: deepen and add movement ------------------------ */
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}

@media(prefers-reduced-motion:reduce){
  .stat b,.pillar::after{transition:none}
}

/* --- corrections to the atmosphere layer ---------------------- */

/* Each figure was sampling only the blue head of the gradient, so all four
   read the same. Walking the background across the row makes the set
   progress blue → green, which is the mark's own move. */
.stats .stat:nth-child(1) b{background-position:0% 0}
.stats .stat:nth-child(2) b{background-position:34% 0}
.stats .stat:nth-child(3) b{background-position:67% 0}
.stats .stat:nth-child(4) b{background-position:100% 0}
.stats .stat:hover b{background-position:50% 0}

/* The discipline strip read grey: the 1px grid gaps show the parent's
   background, and --line is a neutral. Tint the whole band instead. */
.hero-strip{background:linear-gradient(180deg,#F7FBFD,#E9F3F7)}
.hero-strip .wrap{background:transparent;gap:0}
.hs{background:transparent;
  border-left:1px solid rgba(14,107,168,.14)}
.hs:first-child{border-left:0}
.hs:hover{background:rgba(255,255,255,.62)}
.hs b{background-image:var(--grad-ink);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* ============================================================
   Nav breakpoint fix
   Between 761px and 1000px the desktop nav no longer fit, so the
   links wrapped into a stack while the burger stayed hidden — and
   the dropdown, still absolutely positioned, floated out of that
   stack invisibly. The menu now becomes the mobile panel at the
   width it actually stops fitting.

   The panel is anchored with top:100% rather than a hard-coded
   offset, so it lands correctly whatever height the bar is.
   ============================================================ */
@media(max-width:1000px){
  .nav-links{position:absolute;top:100%;left:0;right:0;bottom:auto;
    background:#F9FCFE;flex-direction:column;align-items:flex-start;gap:0;
    padding:12px 22px 30px;border-bottom:1px solid var(--line);
    box-shadow:0 24px 44px -28px rgba(6,35,56,.55);display:none}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:17px 0;width:100%;border-bottom:1px solid var(--line);
    font-size:1.02rem}
  .nav-links .btn{margin-top:22px;width:100%;padding:16px 22px;font-size:.7rem;letter-spacing:.16em}
  .nav-burger{display:flex}

  /* the submenu becomes an indented in-flow list, not a floating card */
  .nav-item{flex-direction:column;align-items:flex-start;width:100%}
  .nav-item>a{width:100%;padding:16px 0;border-bottom:1px solid var(--line)}
  .nav-drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding:2px 0 10px 18px;width:100%;min-width:0}
  .nav-drop a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-drop a::after{opacity:.55;transform:none}
  .nav-caret{display:none}
}

/* ============================================================
   HERO — the brand film is back
   The clip is now the blue/green glass X on a dark, smoke-lit
   ground, i.e. it IS the brand rather than fighting it. So the
   homepage hero goes back to a dark composition where the film
   can be the subject: video full-bleed, a tuned veil for legibility,
   type re-lit for the dark ground. Interior heroes stay light.
   ============================================================ */
.hero.center{background:#061A2C}
.hero.center video,.hero.center .hero-media{display:block;position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;z-index:0}

/* Veil: darkest behind the copy, clearest at the edges where the
   smoke and the reflection live, so the film still reads. */
.hero.center .hero-veil{
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(4,20,34,.80), rgba(4,20,34,.42) 62%, rgba(4,20,34,.30) 100%),
    linear-gradient(180deg, rgba(4,20,34,.62) 0%, rgba(4,20,34,.30) 38%, rgba(4,20,34,.78) 100%)}
.hero.center .hero-veil::before,.hero.center .hero-veil::after{display:none}

/* type re-lit for the dark ground */
.hero.center h1{color:#F2F9FD}
.hero.center .lead{color:rgba(220,238,250,.9)}
.hero.center .label{color:#7FE3D0}
.hero.center .label::before{background:linear-gradient(90deg,#3FA5E0,#4BE0A8)}
/* the accent word keeps the mark's gradient, brightened so it holds on dark */
.hero.center .gold-i{
  background-image:linear-gradient(96deg,#5AB6F0 0%,#4FD8E6 40%,#5CE6A8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#5AB6F0}
.hero.center .btn{border-color:rgba(190,225,245,.5);color:#EAF6FD;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background:rgba(255,255,255,.06)}
.hero.center .btn:hover{background:rgba(255,255,255,.16);border-color:#7FD6E8;color:#fff}
.hero.center .btn-solid{background:linear-gradient(100deg,#0E6BA8,#12856F 62%,#0A7383);
  border-color:transparent;color:#fff;
  box-shadow:0 18px 44px -18px rgba(3,194,214,.55)}
.hero.center .btn-solid:hover{background:linear-gradient(100deg,#1580C6,#16A085 62%,#0C8C9E);color:#fff}
.hero.center::after{background:linear-gradient(90deg,#014B82,#1E9E6A 58%,#03C2D6);height:2px;opacity:.9}

@media(prefers-reduced-motion:reduce){
  .hero.center video{display:none}
  .hero.center{background:#061A2C url("../img/hero-poster.jpg") center/cover}
}

/* The desktop open-state rule (.nav-item:hover .nav-drop) outranks the plain
   .nav-drop override in the mobile block, so hovering the submenu re-applied
   translateX(-50%) and slid the whole panel half a width off-screen — the
   links vanished and only their arrows stayed in view. Neutralise the
   positioned open-state, and the hover indent, inside the menu. */
@media(max-width:1000px){
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop{transform:none;position:static}
  .nav-drop a:hover{padding-left:0;background:transparent;color:var(--blue-deep)}
  .nav-drop a:hover::after{transform:none}
}