/* ============================================================
   EQURO — Website kit stylesheet
   Built on the brand tokens documented in Equro_Brand_Guidelines.docx
   (colors and base type scale are taken 1:1 from the original site's
   assets/css/styles.css so this remains a drop-in upgrade, not a
   different visual language).
============================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");

:root{
  --navy:#00182d;
  --navy-deep:#00111f;
  --navy-soft:#062d48;
  --gold:#caa35a;
  --gold-light:#d4a24f;
  --ink:#061829;
  --muted:#50657a;
  --line:#dbe3ea;
  --bg:#f7f9fb;
  --eyebrow-on-white:#bd8b3c;
  --icon-gray:#8793a0;
  --on-navy-body:#dce7ef;
  --on-navy-muted:#b6c7d7;

  --page-max:1180px;
  --content-max:1030px;

  --radius-card:8px;
  --radius-btn:4px;

  --shadow-card:0 18px 42px rgba(4,24,43,.16);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

/* Focus visibility — accessible by default, invisible for mouse users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--navy);
  color:#fff;
  padding:12px 18px;
  z-index:2000;
  border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* =========================================
   HEADER / NAV
========================================= */

.topbar{
  height:64px;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;
  top:0;
  z-index:1000;
}

.nav{
  max-width:var(--page-max);
  height:64px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.nav .logo{ display:flex; align-items:center; }
.nav .logo img{ height:26px; width:auto; }

.menu{
  display:flex;
  align-items:center;
  gap:26px;
}

.menu a{
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.01em;
  opacity:.92;
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:opacity .15s ease, border-color .15s ease;
  white-space:nowrap;
}
/* Plain nav links only: a gold hover on .btn links (e.g. "Request a Demo", gold background) made the text
   disappear. Buttons keep their own .btn:hover / .btn.ghost:hover styles, and the language menu's items
   (role="menuitemradio") their .lang-menu a:hover style. */
.menu a:not(.btn):not([role="menuitemradio"]):hover{ opacity:1; color:var(--gold-light); }
.menu a.btn:hover{ opacity:1; }
.menu a[aria-current="page"]{
  opacity:1;
  border-bottom-color:var(--gold);
}

.lang-switch{ position:relative; }
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:0;
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  opacity:.85;
  cursor:pointer;
  padding:6px 2px;
}
.lang-toggle:hover{ opacity:1; color:var(--gold-light); }
.lang-toggle svg{ width:16px; height:16px; }
.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:#fff;
  border-radius:8px;
  box-shadow:0 16px 30px rgba(0,0,0,.22);
  padding:6px;
  min-width:130px;
  z-index:1100;
}
.lang-menu a{
  display:flex;
  text-decoration:none;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:transparent;
  border:0;
  border-radius:6px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  text-align:left;
  padding:9px 10px;
  cursor:pointer;
  /* These are links inside .menu, so undo the generic .menu a look (they used to be <button>s). */
  opacity:1;
  letter-spacing:normal;
}
/* Higher specificity than the responsive ".menu a" rules (smaller font ≤1100px, full-width rows with a
   divider on mobile), which would otherwise restyle the language items too. */
.menu .lang-menu a{ font-size:13px; padding:9px 10px; border-bottom:0; }
.lang-menu a:hover{ background:var(--bg); }
.lang-menu a[aria-checked="true"]{ color:var(--gold-light); background:var(--bg); }
.lang-menu a[aria-checked="true"]::after{ content:"\2713"; font-weight:900; }

/* "Solutions" dropdown — same open/close pattern as the language
   switcher above (button + absolutely-positioned panel), reused here
   for a group of nav links instead of a group of language options. */
.nav-drop{ position:relative; }
.nav-drop-toggle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:0;
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.01em;
  opacity:.92;
  padding:6px 0;
  border-bottom:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.nav-drop-toggle:hover{ opacity:1; color:var(--gold-light); }
.nav-drop-toggle svg{ width:13px; height:13px; transition:transform .15s ease; }
.nav-drop.open .nav-drop-toggle svg{ transform:rotate(180deg); }
.nav-drop[data-active="true"] .nav-drop-toggle{ opacity:1; border-bottom-color:var(--gold); }
.nav-drop-menu{
  display:none;
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border-radius:10px;
  box-shadow:0 16px 30px rgba(0,0,0,.22);
  padding:8px;
  min-width:230px;
  z-index:1100;
}
.nav-drop.open .nav-drop-menu{ display:block; }
.nav-drop-menu a{
  display:block;
  padding:10px 12px;
  border-radius:6px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.nav-drop-menu a:hover{ background:var(--bg); color:var(--navy); }
.nav-drop-menu a[aria-current="page"]{ color:var(--gold-light); background:var(--bg); }

.menu a .ext-icon{ width:12px; height:12px; margin-left:4px; opacity:.7; vertical-align:-1px; }

.hamb{
  display:none;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px;
  width:40px;
  height:36px;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
}

/* =========================================
   BUTTONS
========================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--gold);
  color:var(--ink);
  border:0;
  border-radius:var(--radius-btn);
  padding:13px 22px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{ background:var(--gold-light); }
.btn:active{ transform:translateY(1px); }

.btn.small{ padding:9px 16px; font-size:11px; }

.btn.ghost{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
}
.btn.ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

.btn.ghost-dark{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink);
}
.btn.ghost-dark:hover{ background:var(--bg); }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold);
  font-weight:900;
  font-size:13px;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .15s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* =========================================
   GLOBAL LAYOUT
========================================= */

.wrap{ width:100%; max-width:var(--content-max); margin:0 auto; }
.wrap-wide{ width:100%; max-width:var(--page-max); margin:0 auto; padding:0 24px; }
.center{ text-align:center; }

.section{ padding:72px 24px; }
.section.tight{ padding:48px 24px; }
.section.alt{ background:var(--bg); }
.section.navy{ background:var(--navy); color:#fff; }

.eyebrow{
  display:block;
  margin:0 0 14px;
  color:var(--eyebrow-on-white);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
}
.eyebrow.left{ text-align:left; }
.navy .eyebrow, .hero .eyebrow{ color:var(--gold-light); }

h1,h2,h3,h4,p{ margin-top:0; }

.section h2{
  margin:0 auto 18px;
  max-width:780px;
  color:var(--ink);
  font-size:38px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.03em;
}
.navy h2{ color:#fff; }
h2.left{ margin-left:0; text-align:left; }

.lead{
  max-width:640px;
  margin:0 auto 36px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}
.lead.left{ margin-left:0; text-align:left; }
.navy .lead{ color:var(--on-navy-body); }
.lead a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.navy .lead a{ color:inherit; }

.portal-shot{
  margin:0 0 16px;
}
.portal-shot img{
  display:block;
  width:100%;
  max-width:var(--content-max);
  border-radius:var(--radius-card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.portal-shot figcaption{
  margin-top:14px;
  max-width:640px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.split-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:28px;
}
.split-cols h3{
  font-size:17px;
  margin:0 0 12px;
}
.split-cols .lead{
  margin-bottom:16px;
}
.split-cols .lead:last-child{
  margin-bottom:0;
}

.breadcrumb{
  font-size:12px;
  color:var(--on-navy-muted);
  margin-bottom:18px;
}
.breadcrumb a{ color:var(--on-navy-muted); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ margin:0 8px; opacity:.6; }

/* =========================================
   HERO — PHOTO VARIANT (home + pages with real photography)
========================================= */

.hero{
  position:relative;
  min-height:520px;
  background:var(--navy);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero.home{ min-height:600px; }

.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center right;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(0,17,31,.97) 0%,
    rgba(0,24,45,.90) 38%,
    rgba(0,24,45,.55) 66%,
    rgba(0,24,45,.10) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--page-max);
  margin:0 auto;
  padding:64px 24px;
}
.hero h1{
  max-width:660px;
  margin:0 0 20px;
  color:#fff;
  font-size:54px;
  line-height:1.0;
  font-weight:900;
  letter-spacing:-.04em;
}
.hero.home h1{ font-size:58px; line-height:.98; }
.hero p{
  max-width:480px;
  margin:0 0 26px;
  color:var(--on-navy-body);
  font-size:15px;
  line-height:1.6;
}
.hero .btnrow{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-list{ margin:22px 0 30px; display:flex; flex-direction:column; gap:10px; }
.hero-list li{
  display:flex; align-items:center; gap:10px;
  color:var(--on-navy-body);
  font-size:14px;
  font-weight:700;
}
.hero-list li svg{ width:16px; height:16px; color:var(--gold-light); flex-shrink:0; }

/* =========================================
   HERO — SPLIT VARIANT (pages whose source photo has its own baked-in
   headline: text and image live in separate boxes so our copy can never
   overlap the photo's own text, at any viewport width)
========================================= */

.hero-split{
  background:var(--navy);
  overflow:hidden;
}
.hero-split-inner{
  display:flex;
  align-items:stretch;
  max-width:var(--page-max);
  margin:0 auto;
}
.hero-split-text{
  flex:0 0 44%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 24px 64px 24px;
}
.hero-split-text h1{
  max-width:480px;
  margin:0 0 20px;
  color:#fff;
  font-size:44px;
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.035em;
}
.hero-split-text p{
  max-width:440px;
  margin:0 0 24px;
  color:var(--on-navy-body);
  font-size:15px;
  line-height:1.6;
}
.hero-split-media{
  flex:1;
  position:relative;
  min-height:420px;
}
.hero-split-media picture{
  position:absolute;
  inset:36px 24px 36px 0;
  display:block;
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.hero-split-media img{
  width:100%; height:100%;
  object-fit:cover;
}

@media(max-width:1100px){
  .hero-split-inner{ flex-direction:column; }
  .hero-split-text{ flex:none; padding:52px 24px 28px; }
  .hero-split-text h1{ max-width:600px; }
  .hero-split-media{ min-height:320px; padding:0 24px 52px; }
  .hero-split-media picture{ inset:0 24px 52px; }
}
@media(max-width:560px){
  .hero-split-text{ padding:44px 20px 24px; }
  .hero-split-text h1{ font-size:34px; }
  .hero-split-media{ min-height:220px; padding:0 20px 40px; }
  .hero-split-media picture{ inset:0 20px 40px; }
}

/* =========================================
   HERO — GRAPHIC VARIANT (pages without dedicated photography)
========================================= */

.hero-graphic{
  position:relative;
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 100%);
  overflow:hidden;
}
.hero-graphic-inner{
  position:relative; z-index:2;
  max-width:var(--page-max);
  margin:0 auto;
  padding:76px 24px 84px;
}
.hero-graphic h1{
  max-width:700px;
  margin:0 0 18px;
  color:#fff;
  font-size:46px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.035em;
}
.hero-graphic p{
  max-width:560px;
  margin:0 0 8px;
  color:var(--on-navy-body);
  font-size:15px;
  line-height:1.6;
}
.hero-mark{
  position:absolute;
  right:-60px; top:50%; transform:translateY(-50%);
  width:420px; height:420px;
  opacity:.10;
  pointer-events:none;
}
.hero-mark img{ width:100%; height:100%; object-fit:contain; }

/* =========================================
   STATS / KPI BAND
========================================= */

.stats{
  background:var(--navy);
  color:#fff;
}
.stats-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:0 24px 32px;
  max-width:var(--page-max);
  margin:0 auto;
}
.stat{
  padding:26px 30px 0;
  border-left:1px solid rgba(255,255,255,.14);
}
.stat:first-child{ border-left:0; }
.stat svg{ width:20px; height:20px; color:var(--gold-light); stroke-width:1.8; margin-bottom:12px; }
.stat b{
  display:block; margin-bottom:6px;
  color:#fff; font-size:26px; font-weight:900; letter-spacing:-.025em;
}
.stat span{ display:block; color:var(--on-navy-muted); font-size:11.5px; line-height:1.35; }

/* =========================================
   ICON / FEATURE CARDS
========================================= */

.iconcards{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin:36px auto 0;
}
.iconcards.five{ grid-template-columns:repeat(5,1fr); }
.iconcards.three{ grid-template-columns:repeat(3,1fr); }
.iconcards.two{ grid-template-columns:repeat(2,1fr); }

.icard{
  min-height:170px;
  padding:28px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  text-align:center;
  transition:box-shadow .18s ease, transform .18s ease;
}
.icard:hover{ box-shadow:var(--shadow-card); transform:translateY(-2px); }

.icard .ico-circle{
  width:44px; height:44px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.icard svg{ width:22px; height:22px; color:var(--navy); stroke-width:1.8; }

.icard h3{
  margin:0 0 10px;
  color:var(--ink);
  font-size:14px; line-height:1.2; font-weight:900; letter-spacing:-.02em;
}
.icard p{ margin:0; color:var(--muted); font-size:12px; line-height:1.5; }

/* left-aligned variant for detail pages */
.iconcards.left .icard{ text-align:left; }
.iconcards.left .icard .ico-circle{ margin:0 0 16px; }

/* =========================================
   SOLUTION / LINK CARDS (photo)
========================================= */

.solutions{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.scard{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  display:block;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--navy);
  box-shadow:var(--shadow-card);
}
.scard img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.scard:hover img{ transform:scale(1.04); }
.scard-overlay{
  position:absolute; inset:0;
  /* Solid (not translucent) navy behind the text zone, same as the
     original baked-in card designs — a fully opaque backdrop there
     keeps the text crisp against a flat color instead of blending with
     whatever photo detail sits underneath, then fades out to reveal the
     photo on the right. */
  background:linear-gradient(90deg, rgba(0,17,31,1) 0%, rgba(0,17,31,1) 40%, rgba(0,24,45,.75) 58%, rgba(0,24,45,.15) 100%);
}
.scard-content{
  position:absolute; inset:0;
  z-index:2;
  padding:30px 28px;
  display:flex; flex-direction:column; justify-content:flex-start;
  text-align:left;
  max-width:62%;
}
.scard-content h3{
  color:#fff; font-size:24px; font-weight:900; line-height:1.15; letter-spacing:-.03em; margin:0 0 12px;
  text-align:left;
}
.scard-content p{ color:rgba(255,255,255,.88); font-size:13px; line-height:1.5; margin:0; text-align:left; }
.scard-content .link-arrow{ font-size:13px; margin-top:auto; padding-top:16px; }

/* =========================================
   LOGO STRIP
========================================= */

.logos{ padding:30px 0 48px; background:#fff; overflow:hidden; }
.logos .eyebrow{ margin-bottom:26px; }
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* One continuous, non-wrapping line — with 10 real customer names this
   no longer fits a single row at most widths, and wrapping orphaned the
   last name or two on their own line. The list is duplicated back-to-back
   in the markup and scrolled by exactly 50% in a loop, so the seam is
   invisible; a soft edge mask hides the wrap point further. Decorative
   only (aria-hidden) — see the "sr-only" list right above it for the
   accessible version. */
.logos-track{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  width:max-content;
  gap:48px;
  padding:0 24px;
  color:#09233a;
  animation:logo-scroll 32s linear infinite;
}
.logos-track:hover .logo-row{ animation-play-state:paused; }
.logo-row b{ font-size:21px; font-weight:900; letter-spacing:-.025em; opacity:.55; white-space:nowrap; flex-shrink:0; }
@keyframes logo-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - 24px)); }
}
@media (prefers-reduced-motion: reduce){
  .logo-row{ animation:none; }
  .logos-track{ overflow-x:auto; }
}

/* =========================================
   MARKET / SPLIT PANEL (navy gradient)
========================================= */

.market{
  padding:64px 24px 0;
  background:linear-gradient(100deg, var(--navy), var(--navy-soft));
  color:#fff;
}
.market-inner{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:70px;
  align-items:center;
  padding-bottom:52px;
}
.market .eyebrow{ color:var(--gold-light); text-align:left; }
.market h2{ margin:0 0 18px; color:#fff; font-size:38px; line-height:1.05; font-weight:900; letter-spacing:-.04em; }
.market p{ max-width:500px; margin:0 0 24px; color:var(--on-navy-body); font-size:14px; line-height:1.65; }

.vps{
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-card);
  padding:34px;
  background:rgba(255,255,255,.035);
}
.vps h3{ margin:0 0 14px; color:#fff; font-size:21px; line-height:1.2; font-weight:900; letter-spacing:-.025em; }
.vps p{ color:var(--on-navy-body); margin:0 0 18px; }

/* =========================================
   QUOTE
========================================= */

.quote-block{
  max-width:var(--content-max);
  margin:0 auto;
  padding:8px 0;
}
.quote-mark{ font-family:Georgia, serif; font-size:72px; color:var(--gold-light); opacity:.5; line-height:1; margin-bottom:4px; }
.quote-block p.quote-text{
  font-size:24px; line-height:1.4; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; max-width:760px; margin:0 0 20px;
}
.quote-attrib{ font-size:13px; color:var(--muted); font-weight:700; }
.quote-attrib b{ color:var(--ink); }
/* Centered variant: used where the quote sits in a center-aligned section
   (e.g. a client-story widget) so the text block itself is centered on the
   page, not just the text within it. */
.quote-block.centered{ display:flex; flex-direction:column; align-items:center; }
.quote-block.centered p.quote-text{ margin-left:auto; margin-right:auto; text-align:center; }

/* =========================================
   TABLE (general meetings, data)
========================================= */

.tablebox{ max-width:var(--page-max); margin:0 auto; padding:0 24px; }
.tabletabs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:22px;
}
.tabletabs span{
  padding:10px 16px;
  font-size:12px; font-weight:700;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:default;
}
.tabletabs span.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

table.datatable{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
table.datatable thead th{
  background:var(--navy);
  color:#fff;
  text-align:left;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:900;
  padding:14px 18px;
}
table.datatable tbody td{
  padding:16px 18px;
  font-size:13.5px;
  color:var(--ink);
  border-top:1px solid var(--line);
}
table.datatable tbody tr:nth-child(even){ background:var(--bg); }
.status-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.status-pill.ongoing{ background:#e4f3ea; color:#1d7a46; }
.status-pill.upcoming{ background:var(--bg); color:var(--muted); }

.gm-cta{
  max-width:var(--page-max);
  margin:40px auto 0;
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.gm-cta div b{ display:block; font-size:16px; color:var(--ink); margin-bottom:4px; }
.gm-cta div p{ font-size:13px; color:var(--muted); margin:0; }

/* General Meetings & Corporate Actions — three independent sections
   (Equro's own app, Euronext VPS meetings, Euronext VPS corporate
   actions), matching the real live-site layout rather than one shared
   tabbed table. */
.gm-section{ margin-bottom:48px; }
.gm-section:last-child{ margin-bottom:0; }
.gm-section-head{ margin-bottom:18px; }
.gm-section-head .eyebrow{ margin-bottom:6px; }
.gm-section-head h2{ margin:0 0 8px; font-size:24px; }
.gm-section-head p{ font-size:14px; color:var(--muted); max-width:620px; }
.gm-section-equro{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.gm-section-equro .gm-section-head{ margin-bottom:0; flex:1 1 380px; }
.gm-code-form{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.gm-code-form .field{ margin-bottom:0; min-width:220px; }
.gm-code-form .btn{ flex-shrink:0; }
.form-note.gm-code-error{
  flex-basis:100%;
  margin:8px 0 0;
  color:#b3261e;
}
.table-empty{
  padding:28px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  color:var(--muted);
  font-size:13.5px;
  text-align:center;
}

/* =========================================
   INSIGHTS / ARTICLES
========================================= */

.tabs{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:36px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.tabs .tab-btn{
  padding:8px 14px;
  font-size:12.5px; font-weight:700;
  color:var(--muted);
  background:none;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  font-family:inherit;
  line-height:1.4;
}
.tabs .tab-btn:hover{ color:var(--navy); border-color:var(--line); }
.tabs .tab-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.tabs .tab-btn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.tabs .search{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  color:var(--muted); font-size:12.5px;
}
.tabs.no-cats .search{ margin-left:0; }
.tabs .search input[type="search"]{
  border:none; background:none; font:inherit; color:inherit;
  padding:6px 2px; min-width:180px;
}
.tabs .search input[type="search"]:focus{ outline:none; color:var(--navy); }
.tabs .search input[type="search"]::placeholder{ color:var(--muted); }
#insightsNoResults{ margin-top:26px; }

.articles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.article-card{ display:block; }
.article-card .thumb{
  aspect-ratio:16/10;
  border-radius:var(--radius-card);
  overflow:hidden;
  margin-bottom:16px;
  background:var(--bg);
}
.article-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.article-card small{
  display:block; margin-bottom:8px;
  color:var(--eyebrow-on-white); font-weight:900; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.article-card h3{ font-size:16px; font-weight:900; color:var(--ink); margin:0 0 8px; line-height:1.3; letter-spacing:-.01em; }
.article-card p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 10px; }
.article-card .meta{ font-size:11.5px; color:var(--icon-gray); }

/* =========================================
   INSIGHTS ARTICLE DETAIL PAGE
========================================= */
.article-hero .article-subtitle{ font-size:17px; margin:-8px 0 16px; }
.article-hero .article-meta{ font-size:13px; opacity:.85; margin-top:-4px; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800; font-size:13px; color:var(--navy);
  text-decoration:none; margin:36px 0 28px;
}
.back-link:hover{ color:var(--gold-light); }
.article-hero-media{
  aspect-ratio:16/7;
  border-radius:var(--radius-card);
  overflow:hidden;
  margin-bottom:36px;
  background:var(--bg);
}
.article-hero-media img{ width:100%; height:100%; object-fit:cover; }
.article-body{
  max-width:760px;
  margin:0 auto;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
}
.article-body p{ margin:0 0 20px; }
.article-body h2{ font-size:24px; margin:36px 0 16px; letter-spacing:-.01em; }
.article-body h3{ font-size:19px; margin:28px 0 12px; }
/* The sitewide `ul{list-style:none}` reset (near the top of this file) is
   meant for nav/footer/feature lists that use their own icon or layout
   instead of a marker — it isn't meant to apply to genuine reading content.
   Real Umbraco article bodies can contain actual bulleted/numbered lists
   (confirmed 14 Aug 2026, e.g. a real article's "key criteria" list), so
   those need their markers explicitly restored here. */
.article-body ul{ list-style:disc; margin:0 0 20px 22px; padding-left:4px; }
.article-body ol{ list-style:decimal; margin:0 0 20px 22px; padding-left:4px; }
.article-body li{ margin-bottom:8px; }
.article-body li > ul, .article-body li > ol{ margin-top:8px; }
.article-body a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.article-body img{ max-width:100%; border-radius:var(--radius-card); margin:8px 0 24px; }
.article-body blockquote{
  border-left:3px solid var(--gold);
  margin:24px 0; padding:4px 0 4px 20px;
  color:var(--muted); font-style:italic;
}

/* =========================================
   FORM (contact)
========================================= */

.formgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 24px;
}
.formgrid .info h2{ text-align:left; margin-left:0; }
.formgrid .info p.lead{ text-align:left; margin-left:0; }

.info-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 0;
  border-top:1px solid var(--line);
}
.info-row:first-of-type{ border-top:0; }
.info-row svg{ width:20px; height:20px; color:var(--navy); flex-shrink:0; margin-top:2px; }
.info-row b{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:3px; }
.info-row span, .info-row a{ font-size:13px; color:var(--muted); }

form.contact-form{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:34px;
}
.field{ margin-bottom:18px; }
.field label{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:700; color:var(--ink);
}
.field input, .field select, .field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13.5px;
  font-family:inherit;
  color:var(--ink);
  background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,24,45,.08);
}
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:11.5px; color:var(--muted); margin-top:14px; }
.form-success{
  display:none;
  background:#e4f3ea; color:#1d7a46;
  border-radius:6px; padding:14px 16px;
  font-size:13px; font-weight:700;
  margin-bottom:18px;
}
.form-success.show{ display:block; }
.form-error{
  background:#fbe9e7; color:#b3261e;
  border-radius:6px; padding:12px 14px;
  font-size:13px; font-weight:700;
  margin:0 0 16px;
}
.form-error[hidden]{ display:none; }
/* Contact form honeypot — off-screen rather than display:none, which some bots detect. */
.hp-field{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
form.contact-form{ position:relative; }
.contact-form .btn[disabled]{ opacity:.6; cursor:wait; }

/* =========================================
   TEAM / VALUES (about)
========================================= */

.values-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  max-width:var(--content-max);
  margin:0 auto;
}
.value-item{
  display:flex; gap:18px;
  padding:26px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
}
.value-item .num{ font-size:26px; font-weight:900; color:var(--gold); flex-shrink:0; }
.value-item h3{ font-size:15px; font-weight:900; color:var(--ink); margin:0 0 6px; }
.value-item p{ font-size:13px; color:var(--muted); line-height:1.55; margin:0; }

.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:var(--content-max);
  margin:36px auto 0;
  text-align:left;
}
.team-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.team-card summary{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  cursor:pointer;
  list-style:none;
}
.team-card summary::-webkit-details-marker{ display:none; }
.team-avatar{
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  background:var(--bg);
  flex-shrink:0;
}
.team-card summary > div{ flex:1; min-width:0; }
.team-card b{ display:block; font-size:13.5px; color:var(--ink); }
.team-card span{ font-size:12px; color:var(--muted); line-height:1.4; }
.team-chevron{ width:16px; height:16px; color:var(--muted); flex-shrink:0; transition:transform .15s ease; }
.team-card[open] .team-chevron{ transform:rotate(180deg); }
.team-more{ padding:0 18px 20px; }
.team-more p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 12px; }
.team-more .link-arrow{ font-size:12.5px; }
.team-more .link-arrow svg:first-child{ width:16px; height:16px; }

/* =========================================
   FAQ (accordion, native <details>/<summary>)
========================================= */

.faq{ max-width:760px; margin:36px auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 4px;
  font-size:14.5px;
  font-weight:800;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:22px;
  font-weight:400;
  color:var(--gold);
  flex-shrink:0;
  line-height:1;
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ font-size:13.5px; color:var(--muted); line-height:1.65; padding:0 4px 20px; margin:0; }

/* =========================================
   DOCUMENT LIBRARY
========================================= */

.doc-groups{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 40px;
  max-width:var(--content-max);
  margin:0 auto;
}
.doc-group h3{
  font-size:14.5px; font-weight:900; color:var(--ink);
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.doc-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 0;
  font-size:13.5px;
  font-weight:700;
  color:var(--navy);
  border-bottom:1px solid var(--line);
}
.doc-group a.doc-link:last-child{ border-bottom:0; }
.doc-link svg{ width:16px; height:16px; flex-shrink:0; color:var(--gold); }
.doc-link:hover{ color:var(--gold-light); }

/* =========================================
   FOOTER
========================================= */

footer{
  margin-top:0;
  padding:56px 24px 24px;
  background:var(--navy);
  color:var(--on-navy-body);
}
.footgrid{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr repeat(5,1fr);
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
footer .flogo{ display:block; margin-bottom:16px; }
footer .flogo img{ height:24px; width:auto; }
.footgrid > div > p{ font-size:12.5px; line-height:1.7; color:var(--on-navy-muted); margin:0; }
footer h4{ margin:0 0 14px; color:#fff; font-size:12.5px; font-weight:900; letter-spacing:.02em; }
footer a{
  display:block; margin:0 0 12px;
  color:var(--on-navy-muted);
  font-size:12.5px; line-height:1.5;
}
footer a:hover{ color:#fff; }

.copy{
  max-width:var(--content-max);
  margin:20px auto 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  color:var(--on-navy-muted);
  font-size:12px;
}
.copy a{ color:var(--on-navy-muted); }
.copy a:hover{ color:#fff; }
.legal-links{
  display:flex; align-items:center;
  white-space:nowrap; flex-shrink:0;
}
.legal-links a + a{ position:relative; margin-left:22px; }
.legal-links a + a::before{
  content:"";
  position:absolute; left:-13px; top:50%; transform:translateY(-50%);
  width:3px; height:3px; border-radius:50%;
  background:var(--on-navy-muted);
}

/* =========================================
   SCROLL REVEAL (subtle, respects reduced motion)
========================================= */

[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){
  :root{ --content-max:920px; }
  .menu{ gap:14px; }
  .menu a, .nav-drop-toggle{ font-size:11.5px; }
  .hero h1{ font-size:44px; }
  .iconcards.five{ grid-template-columns:repeat(2,1fr); }
  .footgrid{ grid-template-columns:repeat(3,1fr); }
  .articles{ grid-template-columns:repeat(2,1fr); }
  .formgrid{ grid-template-columns:1fr; gap:40px; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:860px){
  .stats-inner{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:0; }
  .iconcards, .iconcards.five, .iconcards.three, .solutions{ grid-template-columns:1fr; }
  .market-inner{ grid-template-columns:1fr; gap:34px; }
  .values-grid{ grid-template-columns:1fr; }
  .articles{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .doc-groups{ grid-template-columns:1fr; gap:4px; }
  .split-cols{ grid-template-columns:1fr; gap:28px; }
}

/* Nav collapses to the hamburger menu a bit earlier than the other
   768px breakpoint below (980px vs 768px) — with Insights, the Login
   button and the language switcher added alongside the original six
   links, the one-row desktop nav gets uncomfortably tight well before
   768px on real displays. */
@media(max-width:980px){
  .menu{
    display:none;
    position:absolute;
    top:64px; left:0; right:0;
    background:var(--navy);
    flex-direction:column;
    align-items:flex-start;
    padding:18px 24px 26px;
    gap:4px;
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 16px 30px rgba(0,0,0,.25);
  }
  .menu.open{ display:flex; }
  .menu a{ width:100%; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .menu a[aria-current="page"]{ border-bottom-color:rgba(255,255,255,.08); }
  .menu .btn{ margin-top:10px; width:100%; }
  .hamb{ display:flex; }

  /* "Solutions" dropdown collapses inline (expands in place) rather than
     flying out, same treatment as the language switcher below. */
  .menu .nav-drop{ width:100%; }
  .menu .nav-drop-toggle{
    width:100%; justify-content:space-between; padding:12px 0; opacity:1;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .menu .nav-drop[data-active="true"] .nav-drop-toggle{ border-bottom-color:rgba(255,255,255,.08); }
  .menu .nav-drop-menu{
    position:static;
    left:auto;
    transform:none;
    box-shadow:none;
    background:rgba(255,255,255,.06);
    display:none;
    margin:4px 0 6px;
    width:100%;
    min-width:0;
    padding:4px;
  }
  .menu .nav-drop.open .nav-drop-menu{ display:block; }
  .menu .nav-drop-menu a{ color:#fff; padding:10px 10px; }
  .menu .nav-drop-menu a:hover{ background:rgba(255,255,255,.1); color:#fff; }
  .menu .nav-drop-menu a[aria-current="page"]{ background:rgba(255,255,255,.1); color:var(--gold-light); }

  .menu .lang-switch{ width:100%; margin-top:10px; }
  .menu .lang-toggle{ width:100%; justify-content:space-between; padding:10px 0; opacity:1; }
  .menu .lang-menu{
    position:static;
    box-shadow:none;
    background:rgba(255,255,255,.06);
    margin-top:4px;
    width:100%;
    min-width:0;
  }
  .menu .lang-menu a{ color:#fff; }
  .menu .lang-menu a:hover{ background:rgba(255,255,255,.1); }
  .menu .lang-menu a[aria-checked="true"]{ background:rgba(255,255,255,.1); color:var(--gold-light); }
}

@media(max-width:768px){
  .hero{ min-height:auto; }
  .hero-inner{ padding:52px 24px; }
  .hero h1{ font-size:34px; }
  .hero-graphic-inner{ padding:56px 24px 64px; }
  .hero-graphic h1{ font-size:32px; }
  .hero-mark{ display:none; }

  .footgrid{ grid-template-columns:1fr 1fr; }
  .copy{ justify-content:center; text-align:center; }
}

@media(max-width:560px){
  .section{ padding:52px 20px; }
  .hero h1{ font-size:29px; }
  .section h2, .market h2{ font-size:27px; }
  .stats-inner, .footgrid{ grid-template-columns:1fr; }
  .stat{ border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .stat:first-child{ border-top:0; }
  .quote-block p.quote-text{ font-size:19px; }
}