/* ═══════════════════════════════════════════════════════════════
   AfriAsante — ULTIMATE design layer (26 Oct 2026)
   Loaded AFTER style.css and access.css. Pure restyle: no markup that
   forms, logins, payments or admin depend on is touched here.
   Idea: "panels over a living world". Deep aubergine void, a fixed
   particle field, ruled spec-sheet sections, champagne-gold data accent,
   the brand's leaf-shaped corners (28px 6px 28px 6px) everywhere.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --void:        #12060d;
  --void-2:      #1a0a12;
  --panel-dark:  #1c0b14;
  --panel-dark2: #26101c;
  --line:        rgba(255,255,255,.16);
  --line-ink:    rgba(139,10,60,.14);
  --ink:         #f6f1ef;
  --mono:        ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --leaf:        28px 6px 28px 6px;
  --leaf-sm:     14px 4px 14px 4px;
  --ease:        cubic-bezier(.2,.8,.2,1);
  --gut:         clamp(12px, 2.4vw, 32px);
  --gap:         clamp(40px, 7vw, 120px);
}

/* ── Global polish (every public page) ───────────────────────── */
::selection { background: var(--gold); color: #1b0a12; }
html { scroll-padding-top: 90px; }

.af-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; }
.af-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--primary), var(--gold), var(--gold-light)); box-shadow: 0 0 12px rgba(201,151,58,.7); }

#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; }
body.af-home #world { display: block; }

/* Top bar → instrument readout */
.topbar { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; background: #0d0509; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; z-index: 1030; }
.topbar a:hover { color: var(--gold-light); }

/* Navbar → frosted glass with the real logo */
#mainNav {
  background: rgba(250,247,245,.80);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--line-ink);
  box-shadow: 0 8px 30px rgba(18,6,13,.08);
  padding: .55rem 0;
  z-index: 1030;
}
#mainNav.scrolled { padding: .3rem 0; background: rgba(250,247,245,.92); box-shadow: 0 10px 40px rgba(18,6,13,.16); }
.navbar-brand { display: inline-flex; align-items: center; }
.brand-logo { height: 68px; width: auto; display: block; transition: height .3s var(--ease), transform .4s var(--ease); }
#mainNav.scrolled .brand-logo { height: 52px; }
.navbar-brand:hover .brand-logo { transform: scale(1.04) rotate(-1deg); }
.nav-link::after { background: linear-gradient(90deg, var(--primary), var(--gold)); height: 2px; border-radius: 2px; }

/* Buttons: shine sweep + magnetic ready */
.btn-primary-brand, .btn-outline-brand, .btn-gold { position: relative; overflow: hidden; isolation: isolate; will-change: transform; }
.btn-primary-brand::after, .btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: transform .7s var(--ease);
}
.btn-primary-brand:hover::after, .btn-gold:hover::after { transform: translateX(120%) skewX(-18deg); }
.btn-primary-brand { background: linear-gradient(135deg, var(--primary-light), var(--primary) 55%, var(--primary-dark)); }
.btn-on-dark { color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
.btn-on-dark:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: #1b0a12 !important; }


/* ── Cards get a cursor-lit edge (all public pages) ──────────── */
.talent-card, .campaign-card, .testimonial-card, .team-card, .service-card {
  position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
  border-radius: var(--leaf-sm) !important;
}
.talent-card::after, .campaign-card::after, .testimonial-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201,151,58,.20), transparent 45%);
}
.talent-card:hover::after, .campaign-card:hover::after, .testimonial-card:hover::after { opacity: 1; }
.talent-card:hover, .campaign-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(139,10,60,.28); }
.talent-card-img img, .campaign-card-img img { transition: transform 1.1s var(--ease), filter .6s; }
.talent-card:hover .talent-card-img img { transform: scale(1.08); }

/* Reveal: stagger via --i, softer + longer than before */
.fade-up { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); transform: translateY(42px); }
.fade-up.visible { transform: none; }

/* Preloader with the logo */
#preloader { background: radial-gradient(circle at 50% 40%, #2a0b1a, #0d0509 70%); transition: opacity .7s ease, visibility .7s; }
#preloader.hidden { visibility: hidden; }
.preloader-logo { text-align: center; animation: logoIn 1s var(--ease) both; }
.preloader-logo img { width: min(190px, 46vw); height: auto; filter: drop-shadow(0 10px 40px rgba(192,24,90,.45)); }
.preloader-bar { width: 150px; height: 2px; background: rgba(255,255,255,.12); margin: 1.4rem auto 0; overflow: hidden; border-radius: 2px; }
.preloader-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--primary), var(--gold)); animation: barRun 1.1s ease-in-out infinite; }
@keyframes barRun { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes logoIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* ── Footer: the designed close ──────────────────────────────── */
.site-footer { position: relative; z-index: 1; background: linear-gradient(180deg, #14070e, #0d0509); border-top: 1px solid var(--line); overflow: hidden; }
.footer-logo { width: 150px; height: auto; background: #faf7f5; padding: .7rem .9rem; border-radius: var(--leaf-sm); box-shadow: 0 10px 34px rgba(0,0,0,.4); }
.footer-heading { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--gold); }
.footer-links a { position: relative; display: inline-block; transition: color .3s, transform .3s var(--ease); }
.footer-links a:hover { transform: translateX(6px); }
.footer-mark { font-family: var(--ff-utility); line-height: .78; text-align: center; user-select: none; padding: 1rem 0 0; margin-top: -1rem; }
.footer-mark span { display: block; font-size: clamp(4rem, 17.5vw, 17rem); letter-spacing: .02em; color: transparent;
  -webkit-text-stroke: 1px rgba(201,151,58,.35); background: linear-gradient(180deg, rgba(201,151,58,.30), rgba(139,10,60,.05) 75%); -webkit-background-clip: text; background-clip: text; }
.footer-bottom { position: relative; z-index: 2; background: rgba(13,5,9,.8); font-family: var(--mono); font-size: .74rem; }

/* ═══════════════ HOME: the world + floating panels ═══════════════ */
body.af-home { background: var(--void); }
body.af-home main#main { position: relative; z-index: 1; }

/* Hero */
.af-home .hero {
  z-index: 1; min-height: calc(100svh - 120px); padding: 5rem 0 6rem;
  background: linear-gradient(135deg, rgba(13,5,9,.55) 0%, rgba(42,11,26,.55) 55%, rgba(94,7,41,.72) 100%);
  border-bottom: 1px solid var(--line);
}
.af-home .hero::before { opacity: .2; animation: heroSlab 14s ease-in-out infinite alternate; }
@keyframes heroSlab { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55; }
.hero-orb-a { width: 520px; height: 520px; right: 8%; top: -10%; background: radial-gradient(circle, rgba(192,24,90,.65), transparent 70%); animation: float 11s ease-in-out infinite; }
.hero-orb-b { width: 420px; height: 420px; left: -6%; bottom: -14%; background: radial-gradient(circle, rgba(201,151,58,.35), transparent 70%); animation: float 14s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translate3d(0, -34px, 0) scale(1.08); } }

.hero-eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .3em; display: inline-flex; align-items: center; gap: .8rem; }
.hero-eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--gold); }
.hero-title { font-size: clamp(3rem, 6.6vw, 5.9rem); line-height: .98; letter-spacing: -.02em; }
.hero-title .stroke { -webkit-text-stroke: 2px #fff; }
.af-js .hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.af-js .hero-title .w > span { display: inline-block; transform: translateY(110%); animation: wordUp 1s var(--ease) forwards; animation-delay: calc(var(--wi) * 90ms + 700ms); }
@keyframes wordUp { to { transform: none; } }
.hero-sub { max-width: 520px; }
.hero-stat-num { text-shadow: 0 0 30px rgba(201,151,58,.35); }
.af-home .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); gap: 0 2rem; max-width: 520px; border-top: 1px solid var(--line); margin-top: 2.6rem; }
.hero-stats > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.hero-stat-num { font-size: 2.1rem; }

.hero-img-wrap { perspective: 1200px; }
.hero-img-frame {
  position: relative; border-radius: var(--leaf); transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px var(--line);
}
.hero-badge { border-radius: var(--leaf-sm); animation: float 7s ease-in-out infinite; z-index: 5; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,.92); }

/* Corner ticks over the hero slideshow */
.hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hud .tick, .hud-tick { position: absolute; width: 18px; height: 18px; border: 0 solid var(--gold); }
.tick.tl, .hud-tick.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.tick.tr, .hud-tick.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.tick.bl, .hud-tick.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.tick.br, .hud-tick.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

/* Ticker */
.af-ticker-wrap { position: relative; z-index: 1; overflow: hidden; padding: 34px 0 10px; margin-top: -34px; }
.af-ticker { position: relative; overflow: hidden; background: var(--primary); border-block: 1px solid rgba(255,255,255,.22); transform: rotate(-.6deg) scale(1.03); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.af-ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.af-ticker:hover .af-ticker-track { animation-play-state: paused; }
.af-ticker-set { display: flex; align-items: center; flex-shrink: 0; }
.af-ticker-set span { font-family: var(--ff-utility); font-size: 1.55rem; letter-spacing: .14em; color: #fff; padding: .7rem 1.6rem; text-transform: uppercase; white-space: nowrap; }
.af-ticker-set i { color: var(--gold-light); font-size: 1rem; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Panels */
.af-home .af-panel {
  position: relative; z-index: 1;
  width: min(1380px, calc(100% - var(--gut) * 2)); margin: var(--gap) auto; padding: clamp(3rem, 7vw, 6.5rem) 0;
  border: 1px solid var(--line); border-radius: var(--leaf); overflow: hidden;
}
.af-home .af-light { background: var(--off-white); color: var(--dark); }
.af-home .af-rose  { background: var(--light-rose); }
.af-home .af-dark  { background: radial-gradient(900px 500px at 85% -10%, rgba(192,24,90,.22), transparent 60%), linear-gradient(180deg, var(--panel-dark2), var(--panel-dark)); color: var(--ink); }
.af-dark .section-title { color: #fff; }
.af-dark .section-title span { color: var(--gold); }
.af-dark .text-muted, .af-dark p { color: rgba(255,255,255,.72) !important; }
.af-dark .campaign-card { color: var(--dark); }
.af-dark .campaign-card p, .af-dark .campaign-card .campaign-summary { color: var(--muted) !important; }
.af-dark .campaign-card .campaign-title a { color: var(--primary-dark); }
.af-dark .campaign-card .campaign-type { color: var(--primary); }
.af-dark .campaign-card .campaign-view { color: var(--primary); }
.af-light .section-title, .af-rose .section-title { letter-spacing: -.01em; }

/* Section header: left title, right blurb (ruled) */
.af-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.6rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line-ink); }
.af-dark .af-head { border-color: var(--line); }
.af-head .section-title { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); }
.af-head p { max-width: 380px; margin: 0; font-size: .95rem; color: var(--muted); }
.af-head-link { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; font-weight: 600; }
.af-dark .af-head-link { color: var(--gold); }
.af-head-link i { transition: transform .3s var(--ease); display: inline-block; }
.af-head-link:hover i { transform: translateX(6px); }

/* About */
.about-photo { position: relative; }
.about-photo img { width: 100%; height: 520px; object-fit: cover; border-radius: var(--leaf); box-shadow: var(--shadow-lg); display: block; }
.about-badge { position: absolute; bottom: -22px; right: -18px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: var(--leaf-sm); padding: 1.4rem 1.5rem; max-width: 210px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.2); }
.about-badge-num { font-family: var(--ff-utility); font-size: 2.8rem; line-height: 1; color: var(--gold-light); }
.about-badge-txt { font-size: .8rem; opacity: .85; margin-top: .3rem; }
.about-photo .hud-tick { border-color: var(--gold-light); width: 26px; height: 26px; }
.feature-block { margin-bottom: .5rem; padding: .9rem; border: 1px solid transparent; border-radius: var(--leaf-sm); transition: background .35s, border-color .35s, transform .4s var(--ease); }
.feature-block:hover { background: #fff; border-color: var(--line-ink); transform: translateX(6px); }
.feature-block-icon { border-radius: 12px 3px 12px 3px; transition: background .3s, color .3s, transform .5s var(--ease); }
.feature-block:hover .feature-block-icon { background: var(--primary); color: #fff; transform: rotate(-8deg) scale(1.06); }

/* Services ledger */
.services-panel, .campaigns-panel { --spot-x: 50%; --spot-y: 0%; }
.services-panel::before, .campaigns-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(520px circle at var(--spot-x) var(--spot-y), rgba(201,151,58,.13), transparent 60%); transition: opacity .4s; }
.services-panel .container, .campaigns-panel .container { position: relative; z-index: 1; }
.svc-ledger { border-top: 1px solid var(--line); }
.svc-row {
  position: relative; display: grid; grid-template-columns: 64px 56px minmax(180px, 1fr) minmax(220px, 1.6fr) 48px; align-items: center; gap: 1.2rem;
  padding: 1.5rem .8rem; border-bottom: 1px solid var(--line); color: #fff; overflow: hidden;
  transition: padding .5s var(--ease), color .3s;
}
.svc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--primary), rgba(192,24,90,.15)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.svc-row:hover { color: #fff; padding-left: 1.6rem; }
.svc-row:hover::before { transform: scaleX(1); }
.svc-no { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--gold); }
.svc-icon { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.25rem; color: var(--gold-light); border: 1px solid var(--line); border-radius: 12px 3px 12px 3px; transition: background .3s, color .3s, transform .5s var(--ease); }
.svc-row:hover .svc-icon { background: var(--gold); color: #1b0a12; transform: rotate(-10deg) scale(1.08); border-color: var(--gold); }
.svc-name { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.15; }
.svc-desc { font-size: .9rem; color: rgba(255,255,255,.66); line-height: 1.65; }
.svc-row:hover .svc-desc { color: rgba(255,255,255,.92); }
.svc-go { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); transition: all .4s var(--ease); }
.svc-row:hover .svc-go { background: #fff; color: var(--primary); transform: rotate(45deg); border-color: #fff; }
.svc-row.fade-up { transform: translateY(24px); }
.svc-row.fade-up.visible { transform: none; }

/* Stats strip as a glowing instrument panel */
.af-home .stats-strip { background: linear-gradient(135deg, var(--primary-dark), var(--primary) 60%, #a3124b); border-color: rgba(255,255,255,.25); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.af-home .stats-strip::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.stats-strip .container { position: relative; }
.stat-number { font-size: clamp(3rem, 7vw, 5.4rem); text-shadow: 0 0 40px rgba(240,213,160,.35); font-variant-numeric: tabular-nums; }
.stat-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--gold-light); }
.stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,.18); }

/* Founder */
.af-home .founder-section { padding: clamp(3rem, 7vw, 6.5rem) 0; }
.founder-photo { border-radius: var(--leaf); position: relative; }
.founder-photo::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.5); border-radius: calc(var(--leaf-sm)); pointer-events: none; }

/* Testimonials */
.testimonial-card { border-top-width: 0 !important; border-left: 3px solid var(--gold) !important; background: #fff; }
.testimonial-mark { color: var(--primary); opacity: .9; }

/* How it works: the rail that fills with gold as you scroll */
.rail { position: relative; padding-left: 4.2rem; --p: 0; }
.rail::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--border); border-radius: 2px; }
.rail::after { content: ""; position: absolute; left: 23px; top: 24px; width: 2px; height: calc((100% - 48px) * var(--p)); background: linear-gradient(180deg, var(--gold), var(--primary)); border-radius: 2px; box-shadow: 0 0 14px rgba(201,151,58,.8); }
.rail .process-step { padding-bottom: 2.4rem; opacity: .45; transition: opacity .5s; }
.rail .process-step:last-child { padding-bottom: 0; }
.rail .process-step::after { display: none !important; }
.rail .process-step.is-active { opacity: 1; }
.rail .process-num { position: absolute; left: -4.2rem; top: 0; background: #fff; color: var(--primary); border: 2px solid var(--border); font-size: 1.3rem; transition: all .5s var(--ease); z-index: 2; }
.rail .process-step.is-active .process-num { background: var(--primary); color: #fff; border-color: var(--gold); box-shadow: 0 0 0 6px rgba(201,151,58,.22); transform: scale(1.08); }
.rail .process-text { padding-left: 0; }
.rail .process-text h5 { font-size: 1.2rem; }

/* CTA */
.af-home .cta-banner { background: radial-gradient(800px 420px at 20% 0%, rgba(192,24,90,.35), transparent 60%), linear-gradient(135deg, #14070e, #2a0b1a); padding: clamp(4rem, 9vw, 8rem) 0; text-align: center; }
.cta-banner .section-title { font-size: clamp(2.2rem, 6vw, 4.6rem); }

/* ═══════════════ BRAND WALL ═══════════════ */
.af-home .brandwall { overflow: visible; z-index: 6; background: linear-gradient(180deg, var(--panel-dark2), var(--panel-dark)); color: var(--ink); margin-top: var(--gap); padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.bw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; }
.bw-title { font-family: var(--ff-display); font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; color: #fff; margin: 0; }
.bw-title span { color: var(--gold); }
.bw-hint { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: rgba(255,255,255,.55); max-width: 300px; margin: 0; text-align: right; }
.bw-hint i { color: var(--gold); margin-right: .3rem; }
.bw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--leaf-sm) 0 0 0; position: relative; }
.bw-item { position: relative; background: var(--panel-dark); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bw-tile { position: relative; width: 100%; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.2rem; background: transparent; border: 0; color: #fff; cursor: pointer; overflow: hidden; transition: background .4s var(--ease); }
.bw-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(192,24,90,.55), transparent 70%); opacity: 0; transition: opacity .5s; }
.bw-item.open .bw-tile, .bw-tile:hover, .bw-tile:focus-visible { background: rgba(255,255,255,.04); }
.bw-item.open .bw-tile::before, .bw-tile:hover::before, .bw-tile:focus-visible::before { opacity: 1; }
.bw-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.bw-no { position: absolute; top: 12px; left: 14px; font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.bw-count { position: absolute; bottom: 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(6px); transition: all .4s var(--ease); }
.bw-tile:hover .bw-count, .bw-item.open .bw-count { opacity: 1; transform: none; }
.bw-tick { position: absolute; width: 16px; height: 16px; border: 0 solid var(--gold); opacity: 0; transition: all .4s var(--ease); }
.bw-tick.tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; transform: translate(6px, 6px); }
.bw-tick.tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; transform: translate(-6px, 6px); }
.bw-tick.bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; transform: translate(6px, -6px); }
.bw-tick.br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; transform: translate(-6px, -6px); }
.bw-tile:hover .bw-tick, .bw-item.open .bw-tick, .bw-tile:focus-visible .bw-tick { opacity: 1; transform: none; }
.bw-icon { position: relative; flex: none; display: block; line-height: 0; border-radius: 20px 5px 20px 5px; overflow: hidden;
  background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(201,151,58,.35); transition: transform .6s var(--ease), box-shadow .4s; }
.bw-icon .bw-logo { display: block; height: 76px; width: auto; max-width: 140px; min-width: 56px; object-fit: contain; }
@media (max-width: 575.98px) { .bw-icon .bw-logo { height: 62px; max-width: 108px; } }
.bw-tile:hover .bw-icon, .bw-item.open .bw-icon { transform: rotate(-4deg) scale(1.08); box-shadow: 0 0 0 1px var(--gold), 0 14px 34px rgba(0,0,0,.5); }
.bw-mono { position: relative; width: 74px; height: 74px; display: grid; place-items: center; font-family: var(--ff-utility); font-size: 2.1rem; letter-spacing: .06em; color: var(--gold-light);
  border: 1px solid rgba(201,151,58,.5); border-radius: 22px 5px 22px 5px; background: linear-gradient(135deg, rgba(139,10,60,.5), rgba(201,151,58,.12)); transition: transform .6s var(--ease), background .4s, color .4s; }
.bw-tile:hover .bw-mono, .bw-item.open .bw-mono { transform: rotate(-6deg) scale(1.1); background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; }
.bw-name { position: relative; font-family: var(--ff-utility); font-size: 1.15rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); text-align: center; line-height: 1.1; }
.bw-item.has-logo .bw-name { font-size: .95rem; opacity: .85; }

/* Popover */
.bw-pop { position: absolute; z-index: 40; top: calc(100% - 10px); left: 50%; width: min(330px, 86vw); transform: translate(-50%, 10px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none;
  background: #fff; color: var(--dark); border-radius: var(--leaf-sm); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(201,151,58,.5); overflow: hidden; transition: opacity .28s ease, transform .45s var(--ease), visibility .28s; }
.bw-pop[hidden] { display: block; }
.bw-pop.up { top: auto; bottom: calc(100% - 10px); }
.bw-item.open .bw-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--pop-x, -50%), 0) scale(1); }
.bw-pop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--gold)); z-index: 2; }
.bw-pop-cover img { width: 100%; height: 120px; object-fit: cover; display: block; }
.bw-pop-body { padding: 1.3rem 1.4rem 1.4rem; }
.bw-pop-kicker { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.bw-pop-title { font-family: var(--ff-display); font-weight: 900; font-size: 1.5rem; color: var(--primary); margin: 0 0 .5rem; }
.bw-pop-text { font-size: .85rem; line-height: 1.6; color: var(--muted) !important; margin: 0 0 .8rem; }
.bw-pop-list { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--border); }
.bw-pop-list a { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .84rem; font-weight: 600; color: var(--dark); transition: color .2s, padding .3s var(--ease); }
.bw-pop-list a:hover { color: var(--primary); padding-left: .35rem; }
.bw-pop-list a i { color: var(--primary); font-size: .8rem; }
.bw-pop-list a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-pop-list em { flex-shrink: 0; white-space: nowrap; margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bw-pop-cta { display: inline-flex; align-items: center; gap: .5rem; width: 100%; justify-content: center; padding: .7rem 1rem; border-radius: 50px; font-weight: 600; font-size: .85rem; background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); color: #fff !important; transition: transform .3s var(--ease), box-shadow .3s; }
.bw-pop-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(139,10,60,.45); }
.bw-pop-cta i { transition: transform .3s var(--ease); }
.bw-pop-cta:hover i { transform: translateX(4px); }
.bw-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.bw-foot b { color: var(--gold); }
.bw-foot a { color: var(--gold); }
.bw-backdrop { position: fixed; inset: 0; z-index: 1999; background: rgba(8,2,5,.6); opacity: 0; visibility: hidden; transition: opacity .3s; }
.bw-backdrop.on { opacity: 1; visibility: visible; }

/* Phone: popover becomes a bottom sheet */
@media (max-width: 767.98px) {
  .bw-pop { position: fixed; z-index: 2001; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 82vh; overflow-y: auto; border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .bw-item.open .bw-pop, .bw-pop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .bw-head, .af-head { flex-direction: column; align-items: flex-start; }
  .bw-hint { text-align: left; }
  .bw-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-row { grid-template-columns: 44px 1fr 40px; gap: .8rem; }
  .svc-icon, .svc-desc { display: none; }
  .svc-name { grid-column: 2; }
  .svc-row:hover { padding-left: .8rem; }
  .brand-logo { height: 44px; }
  .stat-item + .stat-item { border-left: 0; }
  .rail { padding-left: 3.6rem; }
  .rail .process-num { left: -3.6rem; }
  .about-photo img { height: 380px; }
  .about-badge { right: 8px; }
}
@media (max-width: 991.98px) {
  .af-home .hero { padding: 4rem 0 5rem; }
  .af-ticker { transform: none; }
  .af-ticker-wrap { margin-top: 0; padding-top: 0; }
}

/* Respect people who prefer calm */
@media (prefers-reduced-motion: reduce) {
  .af-ticker-track, .hero-orb, .hero-badge, .af-home .hero::before { animation: none !important; }
  .af-js .hero-title .w > span { transform: none; animation: none; }
  .hero-img-frame { transform: none !important; }
}

/* Phones: Bootstrap's g-5 gutter (3rem) is wider than the container padding and pushed pages 12px sideways */
@media (max-width: 767.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }

/* ═══ Inner pages: the same "instrument" header ═══ */
.page-hero { background: radial-gradient(700px 360px at 85% 0%, rgba(192,24,90,.38), transparent 62%), linear-gradient(135deg, #0d0509 0%, var(--primary-dark) 100%); border-bottom: 1px solid rgba(201,151,58,.35); }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(201,151,58,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(201,151,58,.07) 1px, transparent 1px); background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); animation: gridDrift 24s linear infinite; }
@keyframes gridDrift { to { background-position: 56px 56px; } }
.page-hero h1 { font-weight: 900; letter-spacing: -.02em; font-size: clamp(2.2rem, 5vw, 4rem); animation: heroIn 1s var(--ease) both; }
.page-hero p { animation: heroIn 1s .15s var(--ease) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.breadcrumb { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb-item, .breadcrumb-item a { font-size: .72rem; }
.section-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; display: inline-flex; align-items: center; gap: .6rem; }
.section-label::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.text-center .section-label { justify-content: center; }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,151,58,.18); }
@media (prefers-reduced-motion: reduce) { .page-hero::before, .page-hero h1, .page-hero p { animation: none !important; } }

@media (max-width: 767.98px) { .bw-item:last-child:nth-child(odd) { grid-column: 1 / -1; } }


/* ═══════════════ HERO SLIDESHOW (admin: Site Settings > Hero slideshow) ═══════════════ */
.hero-slider { position: relative; height: clamp(420px, 46vw, 600px); background: #1a0a12; isolation: isolate; }
.sl-track { position: absolute; inset: 0; }
.sl { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.sl.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }

/* photo slides */
.hero-slider .sl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slider .sl-img.fill { transform: scale(1.06); transition: transform 7s ease-out; }
.hero-slider .sl.is-active .sl-img.fill { transform: none; }
.hero-slider .sl-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(26px) saturate(1.25) brightness(.5); }
.hero-slider .sl-img.whole { inset: 62px 0 auto 0; height: calc(70% - 62px); object-fit: contain; transform: none; }
.sl-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 5rem 1.6rem 4.7rem; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(13,5,9,.8) 55%, rgba(13,5,9,.92)); }
.sl-photo.fit-whole .sl-cap { background: linear-gradient(180deg, transparent, rgba(13,5,9,.5)); }
.sl-tag { display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); padding: .22rem .6rem; border: 1px solid rgba(240,213,160,.55); border-radius: 3px; background: rgba(13,5,9,.45); }
.sl-title { font-family: var(--ff-display); font-weight: 900; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.08; letter-spacing: -.01em; }
.sl-text-line { font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 38ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .35rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #fff !important; padding-bottom: .2rem; border-bottom: 1px solid var(--gold); transition: color .25s, gap .35s var(--ease); }
.sl-link:hover { color: var(--gold-light) !important; gap: .8rem; }

/* text slides */
.sl-text { display: flex; align-items: center; padding: 4.6rem 2.2rem 5.6rem; color: #fff; }
.sl-text-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 30rem; }
.sl-big { font-family: var(--ff-display); font-weight: 900; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.02em; }
.sl-big span { color: var(--gold-light); }
.sl-text .sl-text-line { font-size: 1rem; max-width: 34ch; }
.sl-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.sl-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%); }
.sl-art i { position: absolute; border: 1px solid rgba(255,255,255,.28); border-radius: 46% 6% 46% 6%; animation: slDrift 16s ease-in-out infinite alternate; }
.sl-art i:nth-child(1) { width: 62%; aspect-ratio: 1; right: -18%; top: -10%; }
.sl-art i:nth-child(2) { width: 42%; aspect-ratio: 1; right: 6%; bottom: -14%; border-color: rgba(240,213,160,.5); animation-delay: -5s; animation-direction: alternate-reverse; }
.sl-art i:nth-child(3) { width: 14%; aspect-ratio: 1; right: 30%; top: 22%; background: rgba(240,213,160,.18); border: 0; animation-delay: -9s; }
@keyframes slDrift { to { transform: translate3d(-14px, 18px, 0) rotate(8deg); } }
.th-rose   { background: radial-gradient(120% 90% at 100% 0%, #c0185a 0%, transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(201,151,58,.38), transparent 60%), linear-gradient(145deg, #5e0729, #8b0a3c 60%, #3a0620); }
.th-night  { background: radial-gradient(90% 70% at 90% 0%, rgba(192,24,90,.5), transparent 60%), linear-gradient(160deg, #26101c, #0d0509); }
.th-aurora { background: radial-gradient(70% 60% at 15% 20%, rgba(224,50,120,.7), transparent 60%), radial-gradient(70% 60% at 90% 85%, rgba(201,151,58,.6), transparent 60%), linear-gradient(135deg, #2a0b1a, #5e0729); }
.th-gold   { background: radial-gradient(100% 80% at 0% 0%, #f6e2b3, transparent 55%), linear-gradient(145deg, #d9a845, #b07d24 55%, #7a4f12); color: #240a17; }
.th-gold .sl-tag { color: #240a17; border-color: rgba(36,10,23,.55); background: rgba(255,255,255,.35); }
.th-gold .sl-big span { color: #5e0729; }
.th-gold .sl-text-line { color: rgba(36,10,23,.85); }
.th-gold .sl-link { color: #240a17 !important; border-color: #240a17; }
.th-gold .sl-art i { border-color: rgba(36,10,23,.3); }
.th-gold .sl-art::before { background-image: linear-gradient(rgba(36,10,23,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(36,10,23,.08) 1px, transparent 1px); }

/* content arrives with a short stagger when a slide becomes active */
.sl.is-active .sl-cap > *, .sl.is-active .sl-text-body > * { animation: slUp .8s var(--ease) both; }
.sl.is-active .sl-cap > :nth-child(2), .sl.is-active .sl-text-body > :nth-child(2) { animation-delay: .1s; }
.sl.is-active .sl-cap > :nth-child(3), .sl.is-active .sl-text-body > :nth-child(3) { animation-delay: .2s; }
.sl.is-active .sl-cap > :nth-child(4), .sl.is-active .sl-text-body > :nth-child(4) { animation-delay: .3s; }
@keyframes slUp { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* controls: two faint arrows, middle left / right of the image */
.sl-arrow { position: absolute; top: 50%; z-index: 7; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(13,5,9,.22); color: rgba(255,255,255,.75); font-size: 1rem; cursor: pointer; opacity: .55; -webkit-tap-highlight-color: transparent;
  transition: opacity .25s, background .25s, color .25s, transform .25s var(--ease); }
.sl-prev { left: 12px; } .sl-next { right: 12px; }
.hero-slider:hover .sl-arrow { opacity: .9; }
.sl-arrow:hover { background: rgba(13,5,9,.55); color: #fff; opacity: 1; }
.sl-arrow:active { transform: scale(.92); }
.sl-arrow:focus-visible, .sl-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .hero-slider { height: 470px; }
}
@media (max-width: 575.98px) {
  .hero-slider { height: 480px; }
  .sl-cap { padding: 4rem 1.2rem 6rem; }
  .sl-text { padding: 4.2rem 1.4rem 6rem; }
  .sl-arrow { width: 36px; height: 36px; margin-top: -18px; font-size: .9rem; }
  .sl-prev { left: 8px; } .sl-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl, .hero-slider .sl-img.fill { transition-duration: .01s !important; transform: none !important; }
  .sl.is-active .sl-cap > *, .sl.is-active .sl-text-body > *, .sl-art i { animation: none !important; }
}

/* ═══════════════ HOME HEADINGS: larger, higher contrast ═══════════════ */
.af-home .section-title { font-size: clamp(2.5rem, 5.2vw, 4.2rem); line-height: 1.06; letter-spacing: -.015em; }
.af-home .af-head .section-title, .bw-title { font-size: clamp(2.7rem, 5.8vw, 4.7rem); }
.af-home .cta-banner .section-title { font-size: clamp(2.6rem, 6.4vw, 5rem); }
.af-light .section-title, .af-rose .section-title { color: #240a17; }
.af-light .section-title span, .af-rose .section-title span { color: #B01550; }
.af-dark .section-title, .bw-title, .cta-banner .section-title { color: #fff; }
.af-dark .section-title span, .bw-title span, .cta-banner .section-title span { color: #E8B94F; }