/* ============================================================
   ASPIC CORPORATE FINANCE — Master stylesheet
   Monochrome tessellation brand · Oxblood #5C1A1E CTA-only accent
   ~95% of every surface is monochrome (L18)
   WCAG 2.2 AA contrast throughout (L14)
   ============================================================ */

/* ─── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* Monochrome palette */
  --aspic-graphite:      #1C1F23;
  --aspic-graphite-warm: #15181C;
  --aspic-steel:         #6B7785;
  --aspic-steel-light:   #A8B0BA;
  --aspic-ice:           #F4F6F8;
  --aspic-white:         #FFFFFF;

  /* Single accent — used ONLY on CTAs, active nav, link hovers */
  --aspic-accent:        #5C1A1E;
  --aspic-accent-hover:  #7A2227;
  --aspic-accent-muted:  #F2E4E5;
  --aspic-accent-light:  #C77B7F;   /* lighter oxblood for use on DARK surfaces (visible) */

  /* Dashboard status tokens */
  --aspic-approval:      #2D6A4F;
  --aspic-warning:       #A45A1A;
  --aspic-error:         #7A1F1F;

  /* Type scale */
  --font-display:  'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:     'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  /* Sizing */
  --container:     1280px;
  --gutter:        24px;
  --radius:        8px;
  --radius-lg:     14px;

  /* Elevation */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 6px 24px rgba(0,0,0,0.08);
  --shadow-lg:     0 24px 48px rgba(0,0,0,0.12);

  /* Motion */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      150ms;
  --dur-mid:       320ms;
  --dur-slow:      560ms;

  /* Theme surfaces — LIGHT (default for public site) */
  --bg-page:       var(--aspic-white);
  --bg-surface:    var(--aspic-ice);
  --bg-card:       var(--aspic-white);
  --text-primary:  var(--aspic-graphite);
  --text-secondary:var(--aspic-steel);
  --border:        rgba(28,31,35,0.08);
  --border-strong: rgba(28,31,35,0.16);
  --accent-text:   var(--aspic-accent);  /* true oxblood on light */
}

/* Dashboard/Admin dark-mode-first: applied via body.theme-dark class */
.theme-dark, body.theme-dark {
  --bg-page:       var(--aspic-graphite-warm);
  --bg-surface:    var(--aspic-graphite);
  --bg-card:       #232732;
  --text-primary:  var(--aspic-ice);
  --text-secondary:var(--aspic-steel-light);
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --accent-text:   var(--aspic-accent-light);  /* visible oxblood on dark */
}

/* Also toggle via prefers-color-scheme for dashboard when class isn't forced */
@media (prefers-color-scheme: dark) {
  body:not(.theme-light):not(.public-page) {
    --bg-page:       var(--aspic-graphite-warm);
    --bg-surface:    var(--aspic-graphite);
    --bg-card:       #232732;
    --text-primary:  var(--aspic-ice);
    --text-secondary:var(--aspic-steel-light);
    --border:        rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.18);
  }
}

/* ─── SELF-HOSTED FONTS (L15) ─────────────────────────────── */
/* v3.9.2: woff2 files not shipped in this build; rely on local() lookup + system-ui fallback. */
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 500 700;
  font-display: swap;
  font-style: normal;
  src: local('Space Grotesk');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400 600;
  font-display: swap;
  font-style: normal;
  src: local('IBM Plex Sans');
}

/* ─── RESET / BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--text-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--aspic-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--aspic-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--text-primary); }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem); line-height: 1.1; }
h3 { font-size: 1.5rem; line-height: 1.2; }
h4 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }
small, .small { font-size: 0.875rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.skip { position: absolute; left: -9999px; top: auto; }
.skip:focus { position: fixed; left: 16px; top: 16px; z-index: 9999; background: var(--aspic-graphite); color: var(--aspic-ice); padding: 12px 20px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section   { padding: 64px 0; }
.section-sm { padding: 32px 0; }
.section-lg { padding: 96px 0; }

/* ─── HEADER / NAV (audience-led — L19) ───────────────────── */
.utility-bar {
  background: var(--aspic-graphite);
  color: var(--aspic-ice);
  font-size: 0.8125rem;
  padding: 8px 0;
}
.utility-bar a { color: var(--aspic-ice); }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.utility-right { display: flex; gap: 20px; align-items: center; }
.utility-right .lang-select { background: var(--aspic-white); color: var(--aspic-accent); border: 1px solid var(--aspic-accent); padding: 4px 10px; border-radius: 3px; font: inherit; font-weight: 600; cursor: pointer; }
.utility-right .lang-select option { color: var(--aspic-graphite); background: var(--aspic-white); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--aspic-white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-fast);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
/* v3.9.3g (Petra issue 1b): white header ribbon reduced ~20%.
   Height is set by the BRAND LOCKUP (logo 57px vs text block ~56px), not by the
   padding alone — so the logo and the three text lines are scaled together with
   the padding. Was 16 + 56 + 16 = 88px; now 11 + 48 + 11 = 70px (about -20%). */
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 11px; padding-bottom: 11px; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 46px; height: 46px; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--aspic-graphite); letter-spacing: 0.02em; line-height: 1.1; }
.brand-name small { display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; color: var(--aspic-steel); text-transform: uppercase; margin-top: 3px; }
.brand-motto { display: block; font-size: 0.64rem; font-weight: 500; font-style: italic; letter-spacing: 0.04em; color: var(--aspic-accent); margin-top: 2px; font-family: var(--font-display); }

/* v3.9.3h (Petra issue 1b) — MEASURED LIVE: the white ribbon's height is set by
   the NAV, not the brand lockup. The <ul> carries the browser default 1em
   top/bottom margin (16px each), so nav = 16 + 48 + 16 = 80px, which is what
   made the container 102px. Shrinking the logo alone could never fix it.
   Now: nav = 12 + 44 + 12 = 68px -> container = 11 + 68 + 11 = 90px (was 112px). */
.nav-primary { display: flex; align-items: center; gap: 4px; margin: 12px 0; }
.nav-primary > li { position: relative; list-style: none; margin: 0; }
.nav-primary > li > a {
  padding: 10px 14px;   /* v3.9.3h: 48px -> 44px link height (Petra issue 1b) */
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--aspic-graphite);
  display: inline-block;
  position: relative;
}
.nav-primary > li > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  background: var(--aspic-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-primary > li:hover > a::after,
.nav-primary > li.is-active > a::after { transform: scaleX(1); }

/* Mega-menu per audience */
.mega-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 640px;
  background: var(--aspic-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: none;
  z-index: 200;
}
.nav-primary > li:hover .mega-menu,
.nav-primary > li:focus-within .mega-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mega-menu h5 { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aspic-steel); margin-bottom: 8px; }
.mega-menu a { display: block; padding: 8px 10px; border-radius: 4px; font-weight: 500; }
.mega-menu a:hover { background: var(--aspic-ice); color: var(--aspic-accent); }
.mega-menu-cta { grid-column: 1 / -1; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn-link { font-weight: 500; font-size: 0.9rem; padding: 8px 14px; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--aspic-accent); color: var(--aspic-white); }
.btn-primary:hover { background: var(--aspic-accent-hover); color: var(--aspic-white); transform: translateY(-1px); }
.btn-secondary { background: var(--aspic-graphite); color: var(--aspic-white); }
.btn-secondary:hover { background: #2A3038; color: var(--aspic-white); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--aspic-ice); color: var(--aspic-accent); border-color: var(--aspic-accent); }
.btn-link { background: transparent; color: var(--text-primary); padding: 8px 0; border: 0; }
.btn-link:hover { color: var(--aspic-accent); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }

/* ─── HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 96px 0 128px;
  background: var(--aspic-graphite);
  color: var(--aspic-ice);
  overflow: hidden;
  isolation: isolate;
}

.hero h1 { color: var(--aspic-ice); max-width: 720px; }
.hero .lede { max-width: 620px; font-size: 1.15rem; color: rgba(244,246,248,0.85); margin-bottom: 32px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-stats .stat { font-family: var(--font-display); }
.hero-stats .stat b { display: block; font-size: 2.25rem; font-weight: 700; color: var(--aspic-ice); }
.hero-stats .stat span { font-size: 0.85rem; color: var(--aspic-steel-light); text-transform: uppercase; letter-spacing: 0.08em; }

/* ─── AUDIENCE TILES ──────────────────────────────────────── */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.audience-tile {
  position: relative;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-mid), border-color var(--dur-fast);
}
.audience-tile:hover { transform: translateY(-2px); border-color: var(--aspic-accent); }
.audience-tile picture { display: block; margin: -32px -32px 24px; }
.audience-tile img { width: 100%; height: 240px; object-fit: cover; }
.audience-tile h3 { margin-bottom: 8px; }
.audience-tile p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 16px; }
.audience-tile .btn-link::after { content: ' →'; }

/* ─── PRODUCT CARDS ───────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-mid), box-shadow var(--dur-mid);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.product-card picture { display: block; }
.product-card picture img { width: 100%; height: 200px; object-fit: cover; }
.product-card-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
.product-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.product-card p { color: var(--text-secondary); font-size: 0.9rem; flex-grow: 1; }
.product-card .btn-link::after { content: ' →'; }

/* ─── SECTIONS ────────────────────────────────────────────── */
.section-heading { text-align: center; margin-bottom: 48px; }
.section-heading small {
  display: block; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--aspic-accent); font-weight: 600;
  margin-bottom: 12px;
}
.section-heading h2 { max-width: 780px; margin: 0 auto; }
.section-heading p { max-width: 640px; margin: 16px auto 0; color: var(--text-secondary); }

.section-dark { background: var(--aspic-graphite); color: var(--aspic-ice); }
/* v3.9.3d (Petra issue 2b): the public site runs the LIGHT theme, so --accent-text
   resolves to the DARK oxblood. Inside dark bands that would be oxblood-on-dark and
   unreadable, so flip --accent-text to the light oxblood for any dark surface. Any
   accent-coloured text inside these sections is then automatically legible. */
.section-dark, .site-footer, .hero-slide { --accent-text: var(--aspic-accent-light); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--aspic-ice); }
.section-dark p { color: rgba(244,246,248,0.85); }
.section-alt { background: var(--bg-surface); }

/* ─── TRUST / CREDIT-BROKER STATEMENT (L20) ──────────────── */
.credit-broker-statement {
  background: rgba(92,26,30,0.06);
  border-left: 3px solid var(--aspic-accent);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.9rem;
}
.rep-apr {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 16px 0;
}
.rep-apr strong { color: var(--text-primary); }

/* Crypto FCA risk warning (L22) */
.fca-crypto-warning {
  background: rgba(122,31,31,0.08);
  border: 1px solid var(--aspic-accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}
.fca-crypto-warning h4 { color: var(--aspic-accent); margin-bottom: 8px; font-size: 1rem; }
.fca-crypto-warning a { color: var(--aspic-accent); text-decoration: underline; }

/* ─── BREADCRUMBS ─────────────────────────────────────────── */
.crumbs { padding: 16px 0; font-size: 0.85rem; color: var(--text-secondary); }
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--aspic-accent); }
.crumbs .sep { margin: 0 8px; opacity: 0.4; }
.crumbs [aria-current="page"] { color: var(--text-primary); font-weight: 500; }

/* ─── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--aspic-graphite);
  color: var(--aspic-ice);
  padding: 64px 0 24px;
}
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; margin-bottom: 40px; }
.site-footer h5 { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aspic-steel-light); margin-bottom: 16px; }
.site-footer a { color: rgba(244,246,248,0.72); font-size: 0.9rem; }
.site-footer a:hover { color: var(--aspic-white); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-legal { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 0.8rem; color: var(--aspic-steel-light); }
.footer-legal p { margin: 0; }
.footer-brand p { color: rgba(244,246,248,0.7); font-size: 0.9rem; margin-top: 12px; }

/* ─── FORMS ───────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; color: var(--text-primary); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color var(--dur-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--aspic-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--aspic-accent-muted);
}
.form-group .hint { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
.form-group.error input { border-color: var(--aspic-error); }
.form-error { color: var(--aspic-error); font-size: 0.85rem; margin-top: 4px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ─── ALERTS ──────────────────────────────────────────────── */
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 20px; border: 1px solid; }
.alert-success { background: rgba(45,106,79,0.08); border-color: var(--aspic-approval); color: #1F4A38; }
.alert-warning { background: rgba(164,90,26,0.08); border-color: var(--aspic-warning); color: #6E3D12; }
.alert-error   { background: rgba(122,31,31,0.08); border-color: var(--aspic-error); color: var(--aspic-error); }
.alert-info    { background: rgba(107,119,133,0.08); border-color: var(--aspic-steel); color: var(--aspic-steel); }
body.theme-dark .alert-success { color: #7CC5A0; }
body.theme-dark .alert-error   { color: #E58C8C; }

/* ─── CHIP / BADGE ────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.chip-accent { background: var(--aspic-accent-muted); color: var(--aspic-accent); border-color: transparent; }
.chip-success { background: rgba(45,106,79,0.12); color: var(--aspic-approval); border-color: transparent; }
.chip-warning { background: rgba(164,90,26,0.12); color: var(--aspic-warning); border-color: transparent; }
.chip-error { background: rgba(122,31,31,0.12); color: var(--aspic-error); border-color: transparent; }

/* ─── UTILITIES ───────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flex   { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2  { gap: 16px; } .gap-3 { gap: 24px; } .gap-4 { gap: 32px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.text-center { text-align: center; }
.text-muted  { color: var(--text-secondary); }
.text-accent { color: var(--aspic-accent); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { padding: 64px 0 96px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .audience-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-primary { display: none; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}

/* ─── MOBILE NAV TOGGLE ───────────────────────────────────── */
.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; color: var(--text-primary); cursor: pointer; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-primary.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--aspic-white);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--border);
    gap: 4px;
  }
  .nav-primary.is-open > li { width: 100%; }
  .nav-primary.is-open > li > a { display: block; padding: 12px 16px; }
  .mega-menu { position: static; box-shadow: none; padding: 8px 16px 16px; min-width: 0; grid-template-columns: 1fr; }
}

/* ─── v3.3: CONSENT CHECKBOX ALIGNMENT ─── */
.consent-check {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-radius: 6px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    transition: background 0.15s ease;
}
.consent-check:hover {
    background: rgba(92, 26, 30, 0.04) !important;
}
.consent-check input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 3px 0 0 0 !important;
    accent-color: var(--aspic-accent) !important;
    cursor: pointer !important;
}
.consent-check .consent-text {
    flex: 1 1 auto !important;
    color: var(--text-primary) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}
.form-group .consent-check + .hint {
    margin-left: 34px !important;
    margin-top: 4px !important;
    font-size: 0.8rem !important;
}

/* ─── GOOGLE TRANSLATE WIDGET — oxblood, visible on dark utility bar ─── */
.lang-select-wrap { display: inline-flex; align-items: center; }
.lang-select-wrap .goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.lang-select-wrap .goog-te-gadget .goog-te-combo {
    background: var(--aspic-white) !important;
    color: var(--aspic-accent) !important;
    border: 1px solid var(--aspic-accent) !important;
    border-radius: 3px !important;
    padding: 4px 10px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    cursor: pointer;
}
.lang-select-wrap .goog-te-combo option { color: var(--aspic-graphite) !important; background: var(--aspic-white) !important; font-weight: 400; }
/* Hide Google's injected top banner + body offset */
.goog-te-banner-frame { display: none !important; }
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
/* Hide "Powered by Google" and the little icon */
.goog-te-gadget-icon { display: none !important; }
.goog-logo-link, .goog-te-gadget span { display: none !important; }

/* ─── HUB PAGES (sectors/insights/about/regions/trust/calculators index) ─── */
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.hub-card { display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out); }
.hub-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--aspic-accent); text-decoration:none; }
.hub-card-img { aspect-ratio:3/2; overflow:hidden; background:var(--bg-surface); }
.hub-card-img picture, .hub-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); }
.hub-card:hover .hub-card-img img { transform:scale(1.05); }
.hub-card-body { padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; position:relative; }
.hub-card-body h3 { margin:0 0 8px; font-family:var(--font-display); font-size:1.15rem; }
.hub-card-body p { margin:0; color:var(--text-secondary); font-size:0.92rem; line-height:1.55; flex:1; }
.hub-card-arrow { margin-top:16px; color:var(--aspic-accent); font-weight:700; font-size:1.1rem; transition:transform var(--dur-mid) var(--ease-out); }
.hub-card:hover .hub-card-arrow { transform:translateX(4px); }
body.theme-dark .hub-card-arrow, body:not(.theme-light) .hub-card-arrow { color:var(--accent-text); }

/* ─── HERO CAROUSEL (v3.5) — 5 slides, accessible, premium ─── */
.hero-carousel { position:relative; background:var(--aspic-graphite); overflow:hidden; isolation:isolate; }
.hero-track { position:relative; min-height:700px; }
.hero-slide {
    position:absolute; inset:0; display:flex; align-items:center;
    background-size:cover; background-position:center;
    opacity:0; visibility:hidden;
    transition:opacity 900ms var(--ease-out);
    /* ⚠ v3.9.3h (Petra issue 1a) — THESE NUMBERS ARE MEASURED LIVE, NOT ESTIMATED.
       .hero-statsbar is position:absolute; bottom:0 with a near-opaque dark
       gradient, and it paints OVER the slide (both sit at z-index:1, statsbar
       later in the DOM), so no z-index on the buttons can lift them out of it.
       Raising the slide above the statsbar instead hides the statsbar's own
       text. The ONLY fix is geometric: bottom padding > statsbar height, and
       the content box must fit the TALLEST slide.

       MEASURED OFF THE LIVE DOM (v3.9.3h):
         tallest slide content (slide 1: 3-line h1 + 3-line lede + CTAs) = 401px
         .hero-statsbar height, one row, desktop                        = 199px
         .hero-statsbar becomes TWO rows at max-width:720px            ~ 300px

         desktop  content box = 700 − 40 − 240 = 420px >= 401px          ✓
                  CTA clearance = 240 − 199 = 41px                        ✓
         <=1024px min-height 720, padding 36px 0 240px
         <=720px  min-height 820, padding 24px 0 310px (two-row statsbar)

       ⚠ DO NOT REUSE THE SUPERSEDED v3.9.3g ESTIMATES — content 347px and
       statsbar 108px were both WRONG. They produced 180px bottom padding,
       which is SMALLER than the statsbar itself, and that is exactly why the
       "CTAs are in the shadows" complaint kept coming back across v3.9.3b–g.
       If you change the hero copy, RE-MEASURE all three numbers in the live
       DOM together. Do not estimate them. */
    padding:40px 0 240px;
}
/* Keep the kicker line ("Since 2000 · Manchester") from ever being clipped. */
.hero-slide .hero-kicker { display:inline-block; margin-bottom:12px; }
.hero-slide.is-active { opacity:1; visibility:visible; z-index:1; }
/* dark overlay for text legibility (WCAG contrast)
   v3.9.2: previous diagonal gradient faded to 35% opacity in bottom-right,
   right where the CTA buttons sit — buttons disappeared into the image.
   Uniform vertical gradient keeps consistent contrast for all content. */
.hero-slide::after {
    content:''; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(21,24,28,0.85) 0%, rgba(21,24,28,0.75) 60%, rgba(21,24,28,0.85) 100%);
}
.hero-slide .container { position:relative; z-index:3; }
/* v3.9.3b (Petra hero fix, FINAL): a stronger left-anchored scrim so the text
   column + CTAs always sit on a dark enough backing regardless of the image. */
.hero-slide .container::before {
    content:''; position:absolute; left:-40px; top:-40px; bottom:-40px; width:min(760px, 82%);
    z-index:-1; pointer-events:none;
    background:linear-gradient(90deg, rgba(10,11,13,0.82) 0%, rgba(10,11,13,0.72) 55%, rgba(10,11,13,0) 100%);
}
.hero-kicker { display:inline-block; font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--aspic-steel-light); margin-bottom:16px; font-family:var(--font-display); font-weight:600; }
.hero-slide h1 { color:#fff; max-width:720px; margin:0 0 20px; }
.hero-slide .lede { max-width:600px; font-size:1.15rem; color:rgba(255,255,255,0.9); margin-bottom:32px; }
.hero-slide .hero-actions { display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:4; }
/* v3.9.3b (Petra hero fix, FINAL): FORCE solid high-contrast CTAs. The inline
   styles on each slide made the primary dark-oxblood-on-dark and the secondary
   fully transparent — both vanished into the image. These !important rules make
   the primary a bright solid red and the secondary a solid white button, both
   with a heavy shadow, so they pop on every slide. */
.hero-slide .hero-actions .btn-primary {
    background:#B22633 !important;      /* brightened oxblood so it pops on dark */
    color:#ffffff !important;
    border:none !important;
    font-weight:700 !important;
    box-shadow:0 8px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.14) !important;
}
.hero-slide .hero-actions .btn-primary:hover { background:#8E1D28 !important; }
.hero-slide .hero-actions .btn-secondary {
    background:#ffffff !important;
    color:#15181C !important;
    border:2px solid #ffffff !important;
    font-weight:700 !important;
    box-shadow:0 8px 28px rgba(0,0,0,0.55) !important;
}
.hero-slide .hero-actions .btn-secondary:hover { background:#E9ECEF !important; color:#0A0B0D !important; }
.hero-slide.is-active .hero-actions a { pointer-events:auto; }

/* arrows */
.hero-arrow {
    position:absolute; top:calc(50% - 40px); transform:translateY(-50%); z-index:3;
    width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
    background:rgba(21,24,28,0.4); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
    transition:background var(--dur-fast), border-color var(--dur-fast);
}
.hero-arrow:hover { background:var(--aspic-accent); border-color:var(--aspic-accent); }
.hero-prev { left:24px; }
.hero-next { right:24px; }

/* controls: dots (play/pause removed per v3.7 request) — pointer-events:none so buttons in hero remain clickable through empty space */
.hero-controls { position:absolute; bottom:96px; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:20px; pointer-events:none; }
.hero-dots { display:flex; gap:10px; pointer-events:auto; }
.hero-dot { width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,0.4); cursor:pointer; padding:0; transition:background var(--dur-fast), width var(--dur-fast); }
.hero-dot.is-active { background:var(--aspic-accent-light); width:28px; border-radius:5px; }
.hero-playpause { display:none !important; } /* removed per v3.7 */

/* stats bar pinned to bottom of the carousel — no line, no seam, no click-swallow */
.hero-statsbar { position:absolute; bottom:0; left:0; right:0; z-index:1; padding:32px 0 24px; background:linear-gradient(to top, rgba(21,24,28,0.98) 60%, rgba(21,24,28,0.6) 85%, transparent 100%); pointer-events:none; }
.hero-statsbar .hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:0; border:0; }
.hero-statsbar .stat { font-family:var(--font-display); }
.hero-statsbar .stat b { display:block; font-size:2rem; font-weight:700; color:#fff; }
.hero-statsbar .stat span { font-size:0.8rem; color:var(--aspic-steel-light); text-transform:uppercase; letter-spacing:0.08em; }

@media (max-width:720px) {
    .hero-track { min-height:820px; }   /* v3.9.3h: aligned with the measured two-row statsbar */
    .hero-arrow { display:none; }
    .hero-statsbar .hero-stats { grid-template-columns:repeat(2,1fr); gap:16px; }
    .hero-controls { bottom:150px; }
}
/* Accessibility: honour reduced-motion — no auto-advance, instant slide change */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition:none; }
}

/* ─── DROPDOWN READABILITY (v3.6) — every <select> readable, incl. currency ─── */
select, .form-group select, .filter select, form select {
    background-color: var(--bg-card, #1C1F23) !important;
    color: var(--text-primary, #F4F6F8) !important;
    border: 1px solid var(--border-strong, rgba(255,255,255,0.18));
    border-radius: 6px;
    padding: 9px 12px;
    font: inherit;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A8B0BA' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 34px;
}
select option, .form-group select option {
    background-color: #1C1F23 !important;
    color: #F4F6F8 !important;
}
/* On light/white surfaces (e.g. contact form on white bg) invert */
.on-light select, .light-form select, body.theme-light select {
    background-color: #FFFFFF !important;
    color: #1C1F23 !important;
    border-color: rgba(28,31,35,0.2);
}
.on-light select option, .light-form select option, body.theme-light select option {
    background-color: #FFFFFF !important;
    color: #1C1F23 !important;
}

/* ─── LANGUAGE WIDGET (v3.6) — searchable, readable, oxblood ─── */
.aspic-lang-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--aspic-accent); background:var(--aspic-white); color:var(--aspic-accent); border-radius:4px; cursor:pointer; font:inherit; font-weight:600; font-size:0.8rem; }
.aspic-lang-btn:hover { background:var(--aspic-accent); color:#fff; }
.aspic-lang-globe { font-size:0.9rem; }
.aspic-lang-label { white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.aspic-lang-caret { font-size:0.6rem; transition:transform 0.2s; }
.aspic-lang-btn.open .aspic-lang-caret { transform:rotate(180deg); }
.aspic-lang-dropdown { position:absolute; z-index:9999; width:280px; max-height:0; overflow:hidden; background:#1C1F23; border:1px solid rgba(255,255,255,0.14); border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,0.5); opacity:0; transition:opacity 0.15s; pointer-events:none; }
.aspic-lang-dropdown.open { max-height:380px; opacity:1; pointer-events:auto; }
.aspic-lang-search { width:100%; padding:12px 14px; border:none; border-bottom:1px solid rgba(255,255,255,0.1); background:#15181C; color:#fff; font:inherit; font-size:0.85rem; outline:none; }
.aspic-lang-list { max-height:320px; overflow-y:auto; }
.aspic-lang-option { padding:9px 16px; color:#F4F6F8; cursor:pointer; font-size:0.85rem; }
.aspic-lang-option:hover { background:rgba(199,123,127,0.15); }
.aspic-lang-option.active { color:var(--aspic-accent-light); font-weight:700; }
.aspic-lang-option.active::before { content:'✓ '; }

/* ─── PASSWORD FIELD + EYE TOGGLE (v3.6) ─── */
.pw-field { position:relative; display:flex; align-items:center; }
.pw-field input { flex:1; padding-right:42px; }
.pw-toggle { position:absolute; right:8px; background:none; border:none; cursor:pointer; font-size:1.1rem; line-height:1; padding:4px; opacity:0.7; }
.pw-toggle:hover { opacity:1; }

/* ─── CONTACT PAGE (v3.6) — form + image two-column ─── */
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:stretch; }
.contact-aside { display:flex; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } .contact-aside{ order:-1; } .contact-aside img{ min-height:220px !important; } }

/* ─── CONTENT DETAIL PAGES (v3.6) ─── */
.content-hero { padding:72px 0 56px; background:var(--aspic-graphite); background-size:cover; background-position:center; color:var(--aspic-ice); }
.content-hero.no-img { background:linear-gradient(110deg,var(--aspic-graphite-warm),var(--aspic-graphite)); }
.content-kicker { display:inline-block; font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--aspic-steel-light); margin-bottom:14px; font-family:var(--font-display); font-weight:600; }
.content-hero h1 { color:#fff; max-width:760px; }
.content-hero .lede { max-width:640px; color:rgba(244,246,248,0.9); font-size:1.2rem; margin-top:12px; }
.content-body { max-width:820px; }
.content-intro { font-size:1.15rem; line-height:1.75; color:var(--text-primary); margin-bottom:40px; }
.content-intro p { margin-bottom:18px; }
.content-points { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px; margin:0 0 48px; padding:28px 32px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.content-point { display:flex; gap:12px; align-items:flex-start; font-size:0.98rem; line-height:1.5; }
.content-point-mark { color:var(--aspic-accent); font-weight:700; flex-shrink:0; }
.content-section { margin-bottom:40px; }
.content-section h2 { font-family:var(--font-display); font-size:1.6rem; margin-bottom:16px; }
.content-section p { line-height:1.75; margin-bottom:16px; color:var(--text-secondary); }
.content-section ul, .content-section ol { margin:0 0 16px 20px; line-height:1.8; color:var(--text-secondary); }
.content-section li { margin-bottom:8px; }
.content-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin:16px 0 48px; }
.content-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; }
.content-card-meta { display:inline-block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--aspic-accent); font-weight:700; margin-bottom:10px; }
.content-card h3 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:10px; }
.content-card p { color:var(--text-secondary); line-height:1.6; font-size:0.95rem; margin:0; }
.content-faq { margin:16px 0 48px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; background:var(--bg-card); overflow:hidden; }
.faq-item summary { padding:18px 24px; cursor:pointer; font-weight:600; font-family:var(--font-display); font-size:1.05rem; list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:24px; color:var(--aspic-accent); font-size:1.4rem; line-height:1; }
.faq-item[open] summary::after { content:'−'; }
.faq-answer { padding:0 24px 20px; color:var(--text-secondary); line-height:1.7; }
.faq-answer p { margin-bottom:12px; }
.content-cta { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-top:56px; padding:36px 40px; background:var(--aspic-graphite-warm); border-radius:var(--radius-lg); flex-wrap:wrap; }
.content-cta h2 { color:#fff; margin:0; font-size:1.5rem; }
.content-cta p { color:var(--aspic-steel-light); margin:8px 0 0; }
@media (max-width:720px){ .content-points, .content-cards { grid-template-columns:1fr; } .content-cta { flex-direction:column; align-items:flex-start; } }

/* ─── TEAM PHOTO GRID (v3.6) ─── */
.team-photo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.team-photo-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); border:1px solid var(--border); }
@media (max-width:720px){ .team-photo-grid{ grid-template-columns:repeat(2,1fr); } }

/* ─── CALCULATORS (v3.7) ────────────────────────────────────── */
.calc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:32px; margin-top:24px; }
.calc-form .form-group { margin-bottom:16px; }
.calc-results { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
.calc-result { display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,0.03); padding:16px; border-radius:8px; }
.calc-result-label { font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--aspic-steel-light); font-weight:600; }
.calc-result-value { font-family:var(--font-display); font-size:1.5rem; color:var(--text-primary); font-weight:700; }
@media (max-width:720px) {
    .calc-results { grid-template-columns:1fr; }
    .calc-card { padding:20px; }
}

/* ─── LEADERSHIP TEAM GRID (v3.9) ────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; margin:16px 0 32px; }
.team-card { margin:0; padding:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0E1013; transition:transform var(--dur-fast), border-color var(--dur-fast); }
.team-card:hover { transform:translateY(-2px); border-color:var(--aspic-accent); }
.team-card img {
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    object-position:center 30%;  /* v3.9.2: was 20%, heads were touching frame top on some portraits */
    display:block;
    background:#1C1F23;
}
.team-card figcaption {
    padding:16px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:6px;
    background:linear-gradient(to bottom, #15181C 0%, #0E1013 100%);
}
.team-card figcaption strong {
    color:#F4F6F8;   /* solid ice white — no CSS var fallback issue */
    font-size:1rem;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.2;
}
.team-card figcaption span {
    color:#A8B0BA;   /* solid steel-light — no CSS var fallback issue */
    font-size:0.8rem;
    letter-spacing:0.04em;
    line-height:1.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.9.3f — RESPONSIVE PASS (Petra issue 9)
   Phones, tablets, and large monitors. The site already had a few scattered
   breakpoints; this fills the gaps — notably the hero (which had fixed
   desktop padding), wide tables, and the leadership grid.
   ═══════════════════════════════════════════════════════════════════════ */

/* Issue 10: leadership is a deliberate 3-up / 3-down grid on desktop */
.team-grid-3 { grid-template-columns:repeat(3,1fr); }

/* Never let an image or embed force a horizontal scrollbar */
img, video, iframe, canvas, svg { max-width:100%; }
img { height:auto; }

/* ─── Large monitors: stop the content sprawling edge to edge ─── */
@media (min-width:1600px) {
    .container { max-width:1360px; }
}

/* ─── Tablets / small laptops ─── */
@media (max-width:1024px) {
    .team-grid-3 { grid-template-columns:repeat(2,1fr); }
    /* Same measured rule as desktop: box must fit the copy AND clear the statsbar. */
    .hero-track  { min-height:720px; }   /* v3.9.3h measured */
    .hero-slide  { padding:36px 0 240px; }
    .hero-slide h1 { font-size:clamp(1.9rem, 5vw, 2.6rem); }
    .hero-slide .lede { font-size:1.05rem; }
}

/* ─── Phones ─── */
@media (max-width:640px) {
    .team-grid-3 { grid-template-columns:1fr; }
    /* The stats bar becomes TWO rows below 720px, so the CTAs need MORE
       clearance here, not less. */
    /* Statsbar becomes TWO rows below 720px (~176px), so clearance grows. */
    .hero-track  { min-height:820px; }
    .hero-slide  { padding:24px 0 310px; }
    .hero-slide h1 { font-size:clamp(1.6rem, 7vw, 2.1rem); line-height:1.18; }
    .hero-slide .lede { font-size:0.98rem; margin-bottom:22px; }
    /* Full-width stacked CTAs are far easier to hit with a thumb */
    .hero-slide .hero-actions { width:100%; gap:10px; }
    .hero-slide .hero-actions .btn { width:100%; text-align:center; }
    /* The hero stat strip (25+ years / £4.2bn / ~90 / 40+) wraps instead of squashing */
    .hero-stats { flex-wrap:wrap; gap:16px 24px; }
    /* Any wide data table inside page content scrolls rather than breaking layout */
    .section table, .content-page table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    /* Stacked two-column groups */
    .grid-2 { grid-template-columns:1fr !important; }
}

/* ─── Very small phones ─── */
@media (max-width:380px) {
    .container { padding-left:16px; padding-right:16px; }
    .hero-slide h1 { font-size:1.45rem; }
}

/* v3.9.3g (Petra issue 1a) — the stats bar switches to TWO rows at max-width:720px
   (see the .hero-statsbar .hero-stats rule above), which nearly doubles its height
   to ~176px. The CTA clearance has to change at the SAME breakpoint, not at 640px,
   or viewports between 641–720px get zero margin and the buttons slide back under
   the shadow. This block is last in the file so it wins on specificity ties. */
@media (max-width:720px) {
    .hero-track { min-height:820px; }
    .hero-slide { padding:24px 0 310px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.9.3g — password eye toggle + click-to-reveal (Petra issues 7 & 8)
   The icons are inline SVG using currentColor, so they need a colour that
   works on BOTH the light public site and the dark admin/dashboard. Using
   the theme-aware text colour keeps them legible on either surface.
   ═══════════════════════════════════════════════════════════════════════ */
.pw-toggle {
    color: var(--text-secondary, #6B7785);
    display: inline-flex; align-items: center; justify-content: center;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--accent-text, #5C1A1E); opacity: 1; }
.pw-toggle svg { display: block; }
/* Readonly reveal inputs still get a pointer cursor on the button, not the field */
.pw-field input[readonly] { cursor: default; }

/* Masked secret + reveal + copy (admin credential displays) */
.pw-reveal { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: wrap; }
.pw-reveal strong { font-family: var(--font-mono, monospace); }