:root{
  --navy-900:#03071A;
  --navy-850:#050B20;
  --navy-800:#070D24;
  --navy-700:#0C1533;
  --navy-600:#17265C;
  --navy-500:#243A86;
  --panel:#0A1233;
  --panel-2:#101A44;
  --glass:rgba(164,196,255,.07);
  --glass-2:rgba(120,150,215,.022);
  --glass-strong:rgba(170,202,255,.11);
  --glass-border:rgba(206,224,255,.26);
  --glass-hi:rgba(255,255,255,.34);
  --blur:blur(22px) saturate(180%);
  --line:rgba(212,175,95,.30);
  --line-soft:rgba(255,255,255,.12);
  --gold-1:#F1DCA0;
  --gold-2:#D4AF62;
  --gold-3:#B5842F;
  --gold-grad:linear-gradient(120deg,#F7E9BE 0%,#E0C074 42%,#C49A45 100%);
  --ink:#EEF2FB;
  --ink-soft:#C6D0E6;
  --muted:#93A2C2;
  --white:#FFFFFF;
  --maxw:1200px;
  --radius:22px;
  --radius-sm:16px;
  --radius-pill:999px;
  --shadow:0 26px 64px rgba(0,0,0,.5);
  --glow:0 0 0 1px rgba(212,175,95,.22),0 24px 60px rgba(6,16,44,.6);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  font-family:var(--sans);
  background:
    radial-gradient(1200px 780px at 86% -10%, rgba(40,80,180,.30), transparent 60%),
    radial-gradient(1000px 680px at -8% 106%, rgba(26,54,132,.22), transparent 58%),
    linear-gradient(180deg,#080F2A 0%,#050A1D 46%,#03071A 100%);
  background-attachment:scroll;
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:.5px}
p{color:var(--ink-soft)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.gold{color:var(--gold-2)}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.eyebrow{font-family:var(--sans);font-size:12.5px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-2);font-weight:500;display:inline-block}
.divider-mark{width:70px;height:1px;background:var(--gold-grad);margin:18px auto;position:relative}
.divider-mark::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--gold-2);transform:translate(-50%,-50%) rotate(45deg)}
.divider-mark.left{margin:18px 0}
.divider-mark.left::after{left:22px}

section{position:relative}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.section-head{max-width:720px;margin:0 auto 56px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head h2{font-size:clamp(30px,4vw,48px);margin-top:14px}
.section-head p{margin-top:16px;font-size:17px;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;padding:16px 34px;border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;transition:.3s cubic-bezier(.2,.7,.2,1);min-height:48px}
.btn-gold{background:var(--gold-grad);color:#20160A;box-shadow:0 10px 30px rgba(201,162,75,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(201,162,75,.42)}
.btn-ghost{border-color:rgba(212,175,95,.55);color:var(--gold-1);background:rgba(255,255,255,.045);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(201,162,75,.10);border-color:var(--gold-2)}
.btn-light{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-light:hover{background:rgba(255,255,255,.08)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.35s ease;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,18,46,.72);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.brand .logo-img{height:50px;width:auto;flex-shrink:0;transition:.35s}
.site-header.scrolled .brand .logo-img{height:44px}
.site-footer .brand .logo-img{height:60px}
.brand .bname{font-family:var(--serif);font-size:24px;letter-spacing:3px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{display:flex;align-items:center;gap:6px;padding:12px 14px;font-size:13.5px;letter-spacing:.6px;color:var(--ink-soft);transition:.25s;font-weight:400}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--gold-1)}
.nav-links .caret{font-size:9px;opacity:.7;margin-top:2px}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:rgba(9,20,52,.62);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border:1px solid var(--glass-border);border-radius:18px;padding:12px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;box-shadow:var(--shadow)}
.nav-links>li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 14px;font-size:13.5px;color:var(--ink-soft);border-radius:7px;letter-spacing:.3px}
.dropdown a:hover{background:rgba(201,162,75,.12);color:var(--gold-1)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:12px 22px;font-size:12px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:2px;background:var(--gold-1);transition:.3s}

/* Luxury 3D Hero & Theme Extensions */
:root {
  --gold-grad-3d: linear-gradient(180deg, #FFFFFF 0%, #FFF2B2 25%, #E6C46A 60%, #9E7418 100%);
  --gold-metallic: linear-gradient(135deg, #FBF0CC 0%, #E3C16F 40%, #B8892D 75%, #F0D488 100%);
}

.gold-text-3d {
  background: var(--gold-grad-3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.85));
}

/* Left Vertical Gold Piping & Top Trim */
.hero-left-piping {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28px;
  width: 12px;
  pointer-events: none;
  z-index: 15;
}
.hero-left-piping::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(212,175,55,0.8) 0%, rgba(212,175,55,0.4) 50%, rgba(212,175,55,0.9) 100%);
  box-shadow: 0 0 10px rgba(212,175,55,0.6);
}
.hero-left-piping::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 1px;
  background: rgba(212,175,55,0.3);
}

.hero-corner-trim {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 16;
}
.hero-corner-trim::before {
  content: "";
  position: absolute;
  top: 60px;
  left: -20px;
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.8), transparent);
  transform: rotate(-35deg);
}

/* ===== Page banner (interior page hero) =====
   Base layout for the banner used on every interior page. The artwork is a true
   background layer behind the copy. These are base rules only: the responsive
   overrides further down the sheet still take precedence. */
.page-banner{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-900);min-height:580px;display:flex;align-items:center}
.page-banner>.container{position:relative;z-index:2;width:100%}
.page-banner .inner{padding:184px 0 92px;max-width:840px}
.page-banner h1{font-size:clamp(36px,4.6vw,58px);margin-top:10px;letter-spacing:1.6px}
.page-banner p{margin-top:16px;font-size:18px;color:var(--ink-soft);max-width:660px}

/* Shared hero / banner background layer */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,7,26,.94) 0%,rgba(3,7,26,.80) 40%,rgba(3,7,26,.44) 72%,rgba(3,7,26,.62) 100%),
    linear-gradient(180deg,rgba(3,7,26,.55) 0%,rgba(3,7,26,0) 34%,rgba(3,7,26,.74) 100%)}

/* Breadcrumb */
.breadcrumb{font-family:var(--sans);font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--gold-2);transition:color .25s ease}
.breadcrumb a:hover{color:var(--gold-1)}

/* Hero Section Base */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #020514;
  padding: 100px 20px 80px;
}

.hero-bg-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(24, 60, 150, 0.35), transparent 70%),
    radial-gradient(800px 500px at 85% 50%, rgba(30, 80, 200, 0.30), transparent 65%),
    radial-gradient(600px 400px at 15% 70%, rgba(15, 35, 90, 0.40), transparent 60%),
    linear-gradient(180deg, #020514 0%, #050B24 50%, #020514 100%);
}

.hero-content-center {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Top Eyebrow Accent */
.hero-eyebrow-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
.hero-company-profile {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #D4AF37;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(212,175,55,0.35);
}
.hero-eyebrow-pill {
  width: 64px;
  height: 3px;
  background: var(--gold-metallic);
  border-radius: 4px;
  margin-top: 8px;
  box-shadow: 0 0 12px rgba(212,175,55,0.7);
}

/* 3D Infinity Logo Emblem */
.hero-logo-emblem {
  width: 264px;
  max-width: 75vw;
  height: auto;
  margin: 0 auto 16px;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.85)) drop-shadow(0 0 30px rgba(212,175,55,0.45));
  animation: logoFloat 6s ease-in-out infinite alternate;
}
@keyframes logoFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

/* Main Brand Title */
.hero h1.gold-text-3d {
  font-family: "Cinzel", "Cormorant Garamond", serif;
  font-size: clamp(48px, 7.2vw, 96px);
  font-weight: 700;
  letter-spacing: 14px;
  line-height: 1.05;
  margin: 12px 0 14px;
  text-indent: 14px;
  text-transform: uppercase;
}

/* Tagline 1 */
.hero-tagline-main {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 300;
  letter-spacing: 3px;
  color: #F8EAAC;
  margin-bottom: 22px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

/* Diamond Divider */
.diamond-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 280px;
  margin: 20px auto 24px;
}
.diamond-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.75), transparent);
}
.diamond-divider .diamond-node {
  width: 7px;
  height: 7px;
  background: #D4AF37;
  transform: rotate(45deg);
  box-shadow: 0 0 10px #D4AF37;
}

/* Subtitle 2 */
.hero-pillars {
  font-family: var(--sans);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 400;
  letter-spacing: 7px;
  color: #E2EEFF;
  opacity: 0.95;
  margin-bottom: 32px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-actions-center {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Left Floating Glass Card */
.hero-glass-card-left {
  position: absolute;
  left: 45px;
  bottom: 75px;
  width: 175px;
  padding: 26px 18px 20px;
  background: linear-gradient(120deg, rgba(164,196,255,.075), rgba(120,150,215,.025));
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(2,6,20,.26), inset 0 1px 1px rgba(255,255,255,0.25);
  text-align: center;
  z-index: 10;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.hero-glass-card-left:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.7);
}
.hero-glass-card-left .card-icon {
  width: 36px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}
.hero-glass-card-left .card-text {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #D4AF37;
  line-height: 1.65;
  font-weight: 500;
}
.hero-glass-card-left .card-line {
  width: 32px;
  height: 1px;
  background: rgba(212, 175, 55, 0.5);
  margin: 16px auto 0;
}

/* Right 3D Ribbon Sculpture */
.hero-ribbon-right {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  height: 90%;
  max-height: 860px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(-15px 25px 45px rgba(0,0,0,0.75));
}
.hero-ribbon-right img {
  height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
}

/* Bottom Glass Dock */
.hero-glass-dock {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(340px, 48vw, 620px);
  height: 52px;
  background: rgba(8, 20, 52, 0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  clip-path: polygon(4% 0%, 96% 0%, 100% 100%, 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 -12px 35px rgba(0,0,0,0.55);
}
.dock-light-spot {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: #FFF5D0;
  box-shadow: 0 0 16px 4px rgba(212, 175, 55, 0.9);
  border-radius: 50%;
}
.dock-content {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #D4AF37;
}
.dock-content .dock-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7), transparent);
}

/* Media queries for hero responsiveness */
@media (max-width: 1024px) {
  .hero-glass-card-left {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 30px auto 0;
    width: 220px;
  }
  .hero-ribbon-right {
    opacity: 0.35;
    right: -100px;
    height: 70%;
  }
}
@media (max-width: 680px) {
  .hero-left-piping, .hero-corner-trim { display: none; }
  .hero-ribbon-right { display: none; }
  .hero-glass-dock { width: 90%; }
}

/* Backgrounds */
.bg-navy{background:transparent}
.bg-deep{background:linear-gradient(180deg,rgba(2,5,20,.74),rgba(5,11,36,.64)),url("horizon8-ribbon-3d.jpg") center/cover no-repeat}
.bg-panel{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.bg-alt{background:linear-gradient(180deg,rgba(18,34,82,.34),rgba(10,20,52,.20)),url("horizon8-ribbon-3d.jpg") center/cover no-repeat}
.bg-deep,.bg-panel,.bg-alt{position:relative;overflow:hidden}
.bg-deep::before{content:"";position:absolute;left:-70px;top:50%;transform:translateY(-50%);width:300px;height:132px;background:url("logo-infinity.png") no-repeat center/contain;opacity:.10;pointer-events:none;z-index:1;-webkit-mask-image:radial-gradient(68% 68% at 50% 50%,#000 32%,transparent 100%);mask-image:radial-gradient(68% 68% at 50% 50%,#000 32%,transparent 100%)}
.bg-panel::before{content:"";position:absolute;right:-60px;top:40px;width:340px;height:150px;background:url("logo-infinity.png") no-repeat center/contain;opacity:.09;pointer-events:none;z-index:1;-webkit-mask-image:radial-gradient(68% 68% at 50% 50%,#000 32%,transparent 100%);mask-image:radial-gradient(68% 68% at 50% 50%,#000 32%,transparent 100%)}
.bg-alt::before{content:"";position:absolute;inset:0;background:url("motif-lines.svg") repeat-x left top/180px 100%;opacity:.05;pointer-events:none}
.section>.container{position:relative;z-index:2}
.bg-deep::after,.bg-panel::after,.bg-alt::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 52% at 16% 20%,rgba(36,58,134,.50),transparent 70%),radial-gradient(46% 46% at 84% 76%,rgba(181,132,47,.13),transparent 72%),radial-gradient(40% 42% at 62% 8%,rgba(26,44,108,.44),transparent 70%)}
.hairline-top{border-top:1px solid var(--line-soft)}

/* Cards grid */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:linear-gradient(120deg,rgba(164,196,255,.075),rgba(120,150,215,.025));border:1px solid rgba(212,175,95,.32);border-radius:var(--radius);padding:36px 32px;transition:.45s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden;backdrop-filter:blur(8px) saturate(135%);-webkit-backdrop-filter:blur(8px) saturate(135%);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px rgba(2,6,20,.28)}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold-grad);opacity:.5;transition:.4s;z-index:3}
.card::after{content:"";position:absolute;left:-45%;top:-120%;width:70%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:rotate(18deg);pointer-events:none;transition:.75s cubic-bezier(.2,.7,.2,1)}
.card:hover{border-color:rgba(212,175,95,.45);transform:translateY(-8px);box-shadow:var(--glow),inset 0 1px 0 var(--glass-hi)}
.card:hover::before{opacity:1}
.card:hover::after{left:115%}
.card .num{font-family:var(--serif);font-size:15px;color:var(--gold-2);letter-spacing:2px}
.card .ic{width:64px;height:64px;border-radius:50%;border:1px solid rgba(212,175,95,.5);background:radial-gradient(circle at 50% 38%,rgba(212,175,95,.2),rgba(212,175,95,.03));box-shadow:0 0 0 6px rgba(212,175,95,.05),inset 0 0 14px rgba(212,175,95,.14);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--gold-1)}
.card .ic svg{width:26px;height:26px}
.card h3{font-size:23px;margin-bottom:12px;letter-spacing:.4px}
.card p{font-size:15px;color:var(--muted)}
.card ul{list-style:none;margin-top:16px}
.card ul li{font-size:14px;color:var(--ink-soft);padding:6px 0 6px 20px;position:relative}
.card ul li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;background:var(--gold-2);transform:rotate(45deg)}
.card .card-link{margin-top:20px;display:inline-flex;gap:8px;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-1)}
.card .card-link:hover{gap:14px}

/* Feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:4/3}
.split .media img{width:100%;height:100%;object-fit:cover;display:block}
.split .media.logo-media{background:#121826;display:flex;align-items:center;justify-content:center;border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 50px rgba(2,6,20,.45)}
.split .media.logo-media img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;display:block}
.split h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:20px}
.split p{margin-bottom:16px}
.badge-8{position:absolute;right:20px;bottom:20px;width:70px;opacity:.9}

/* Values / stats */
.stat{padding:32px;text-align:center;border:1px solid var(--glass-border);border-radius:var(--radius);background:linear-gradient(160deg,var(--glass),var(--glass-2));backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 40px rgba(2,6,20,.45);transition:.4s cubic-bezier(.2,.7,.2,1)}
.stat:hover{transform:translateY(-5px);border-color:rgba(212,175,95,.4)}
.stat .big{font-variant-numeric:tabular-nums}
.stat .big{font-family:var(--serif);font-size:46px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* Approach steps */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.step{text-align:center;padding:28px 14px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:linear-gradient(160deg,var(--glass),var(--glass-2));backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--glass-hi);transition:.3s}
.step:hover{border-color:var(--line);background:rgba(201,162,75,.05)}
.step .n{font-family:var(--serif);font-size:30px;color:var(--gold-2)}
.step .s{font-size:14px;letter-spacing:1px;margin-top:6px;color:var(--ink)}
.arrow-flow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px;color:var(--gold-1);font-size:13px;letter-spacing:2px;text-transform:uppercase}

/* Timeline */
.timeline{max-width:760px;margin:0 auto;position:relative}
.timeline::before{content:"";position:absolute;left:120px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:14px 0 30px;position:relative}
.tl-item .yr{font-family:var(--serif);font-size:22px;color:var(--gold-2);text-align:right}
.tl-item .body{padding-left:26px;position:relative}
.tl-item .body::before{content:"";position:absolute;left:-6px;top:8px;width:11px;height:11px;background:var(--gold-2);border-radius:50%;box-shadow:0 0 0 4px rgba(201,162,75,.15)}
.tl-item h4{font-family:var(--sans);font-size:17px;color:var(--ink);letter-spacing:.5px}

/* Team */
.team-card{background:linear-gradient(160deg,var(--glass),var(--glass-2));border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;transition:.45s cubic-bezier(.2,.7,.2,1);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 44px rgba(2,6,20,.5)}
.team-card:hover{border-color:var(--line);transform:translateY(-8px);box-shadow:var(--glow)}
.team-card .ph{aspect-ratio:4/5;background:linear-gradient(160deg,var(--navy-600),var(--navy-800));display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.team-card .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;transition:.6s cubic-bezier(.2,.7,.2,1)}
.team-card:hover .ph img{transform:scale(1.05)}
.team-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(3,7,26,.55) 100%);pointer-events:none}
.team-card .ph .mono{font-family:var(--serif);font-size:64px;color:rgba(201,162,75,.5)}
.team-card .info{padding:26px}
.team-card .info .role{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-2);margin:4px 0 12px}
.team-card .info h3{font-size:22px}
.team-card .info p{font-size:14px;color:var(--muted);margin-top:10px}

/* Insights */
.post{background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;transition:.4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.post:hover{border-color:var(--line);transform:translateY(-8px);box-shadow:var(--glow)}
.post .thumb{aspect-ratio:16/10;position:relative;overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.post:hover .thumb img{transform:scale(1.06)}
.post .cat{position:absolute;top:14px;left:14px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;background:rgba(7,18,46,.72);border:1px solid var(--line);color:var(--gold-1);padding:6px 14px;border-radius:40px;backdrop-filter:blur(6px)}
.post .pbody{padding:24px;flex:1;display:flex;flex-direction:column}
.post .pbody .meta{font-size:12px;color:var(--muted);letter-spacing:1px}
.post .pbody h3{font-size:20px;margin:10px 0 12px;line-height:1.25}
.post .pbody p{font-size:14px;color:var(--muted)}
.post .pbody .rd{margin-top:auto;padding-top:16px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-1)}

/* Industries marquee */
.marquee{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite;will-change:transform}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;gap:16px;padding-right:16px}
.mq-item{display:inline-flex;align-items:center;gap:13px;white-space:nowrap;padding:19px 34px;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:linear-gradient(120deg,rgba(164,196,255,.075),rgba(120,150,215,.025));box-shadow:inset 0 1px 0 var(--glass-hi);font-size:13.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink)}
.mq-item .d{color:var(--gold-2);font-size:16px;letter-spacing:0;line-height:1}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.mq-set{flex-wrap:wrap;justify-content:center;padding-right:0}.mq-set[aria-hidden="true"]{display:none}}

.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.chip{font-size:12.5px;letter-spacing:1px;padding:9px 18px;border:1px solid var(--line-soft);border-radius:40px;color:var(--ink-soft);cursor:pointer;transition:.25s}
.chip:hover,.chip.active{background:var(--gold-grad);color:#20160A;border-color:transparent}

/* Bookstore */
.book{background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;transition:.4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.book:hover{border-color:var(--line);transform:translateY(-8px);box-shadow:var(--glow)}
.book .cover{aspect-ratio:3/4;position:relative;display:flex;align-items:center;justify-content:center;padding:26px 22px;text-align:center;background:radial-gradient(120% 80% at 22% 6%,rgba(255,255,255,.055),transparent 62%),linear-gradient(160deg,var(--navy-600),var(--navy-850));perspective:1000px;overflow:hidden}
.book .cover::after{content:"";position:absolute;left:14%;right:14%;bottom:6%;height:14px;border-radius:50%;background:radial-gradient(50% 100% at 50% 50%,rgba(0,0,0,.62),transparent 72%);filter:blur(3px);pointer-events:none}
/* 3D book mockup */
.bk{position:relative;width:72%;aspect-ratio:5/7;border-radius:3px 9px 9px 3px;background:linear-gradient(150deg,#17244F 0%,#0B1330 55%,#070C22 100%);border:1px solid rgba(212,175,95,.26);box-shadow:0 26px 46px rgba(2,5,18,.62),inset 0 1px 0 rgba(255,255,255,.10);transform:rotateY(-15deg) rotateX(3deg);transition:transform .55s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:24px 15px 34px;text-align:center;z-index:1}
.book:hover .bk{transform:rotateY(-6deg) rotateX(1deg)}
.bk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(255,255,255,.10) 55%,rgba(0,0,0,.40))}
.bk::after{content:"";position:absolute;right:-7px;top:9px;bottom:9px;width:7px;border-radius:0 4px 4px 0;background:repeating-linear-gradient(180deg,#EFE9DB 0 2px,#CDC5B2 2px 4px)}
.bk .sheen{position:absolute;inset:0;border-radius:3px 9px 9px 3px;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.11) 47%,transparent 61%);pointer-events:none}
.bk .inf{font-size:23px;line-height:1;color:var(--gold-2);opacity:.92}
.bk .t{font-family:var(--serif);font-size:clamp(14px,1.4vw,20px);line-height:1.16;letter-spacing:1.3px;text-transform:uppercase;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk .rule{width:38px;height:1px;background:var(--gold-grad);opacity:.85}
.bk .au{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft)}
.bk .imp{position:absolute;bottom:13px;left:0;right:0;font-size:8px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.40)}
@media(prefers-reduced-motion:reduce){.bk{transform:none}}
.book .bb{padding:22px;display:flex;flex-direction:column;gap:6px}
.book .bb .au{font-size:12.5px;color:var(--muted);letter-spacing:1px}
.book .bb h3{font-size:19px}
.book .bb .row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.book .bb .price{font-family:var(--serif);font-size:22px;color:var(--gold-1)}
.tag-format{display:inline-block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-soft);border-radius:8px;padding:4px 10px;margin-top:6px}

/* Events */
.event{display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:center;background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--glass-border);border-radius:var(--radius);padding:28px 32px;transition:.4s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.event:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--glow)}
.event .date{text-align:center;border-right:1px solid var(--line-soft);padding-right:24px}
.event .date .d{font-family:var(--serif);font-size:40px;color:var(--gold-1);line-height:1}
.event .date .m{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.event .ebody h3{font-size:22px;margin-bottom:6px}
.event .ebody .em{font-size:13px;color:var(--muted);letter-spacing:.5px;display:flex;gap:18px;flex-wrap:wrap}
.event .ebody .etype{display:inline-block;margin-top:10px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-1);border:1px solid var(--line);padding:5px 14px;border-radius:40px}

/* Forms */
.form-wrap{background:linear-gradient(180deg,var(--glass-strong),var(--glass-2));border:1px solid var(--glass-border);border-radius:var(--radius);padding:44px;backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);box-shadow:var(--glow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-1)}
.field input,.field select,.field textarea{background:rgba(8,20,52,.55);border:1px solid var(--glass-border);border-radius:14px;padding:15px 18px;color:var(--ink);font-family:var(--sans);font-size:15px;transition:.25s;backdrop-filter:blur(6px)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
.field textarea{min-height:130px;resize:vertical}
.interest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.check{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.035);border:1px solid var(--glass-border);border-radius:14px;padding:13px 16px;cursor:pointer;font-size:13.5px;color:var(--ink-soft);transition:.25s}
.check:hover{border-color:var(--line)}
.check input{accent-color:var(--gold-2);width:16px;height:16px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:8px}
.form-success{display:none;background:rgba(70,161,113,.12);border:1px solid rgba(70,161,113,.5);color:#bfe6cf;padding:16px 18px;border-radius:8px;margin-top:16px;font-size:14px}
.form-success.show{display:block}

/* CTA band */
.cta-band{background:linear-gradient(120deg,rgba(5,11,32,.88),rgba(12,21,51,.80)),url("bg-gradient.jpeg") center/cover no-repeat;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(52%,430px);height:270px;background:url("motif-logo-infinity.png") no-repeat center/contain;opacity:.07;pointer-events:none}
.cta-band .inner{padding:80px 0;text-align:center;position:relative;z-index:2}
.cta-band h2{font-size:clamp(30px,4vw,46px)}
.cta-band p{max-width:560px;margin:16px auto 30px;color:var(--ink-soft)}
.cta-8{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:260px;opacity:.16;z-index:1;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 28%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 28%,transparent 100%)}

/* Info list (contact) */
.info-line{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.info-line .ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold-1);flex-shrink:0}
.info-line .ic svg{width:18px;height:18px}
.info-line .lbl{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.info-line .val{font-size:16px;color:var(--ink)}

/* Footer */
.site-footer{background:var(--navy-900);border-top:1px solid var(--line);padding:72px 0 30px;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.site-footer .brand .bname{font-size:22px}
.site-footer p{font-size:14px;color:var(--muted);margin-top:18px;max-width:300px}
.footer-col h4{font-family:var(--sans);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-1);margin-bottom:18px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:11px}
.footer-col ul li a{font-size:14px;color:var(--ink-soft);transition:.2s}
.footer-col ul li a:hover{color:var(--gold-1);padding-left:4px}
.newsletter input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:14px 18px;color:var(--ink);margin:12px 0;font-family:var(--sans)}
.newsletter input:focus{outline:none;border-color:var(--gold-2)}
.newsletter .btn{width:100%;justify-content:center}
.footer-bottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.footer-bottom p{margin:0;font-size:13px}
.footer-contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13.5px;color:var(--ink-soft)}
.footer-contact a{color:var(--ink-soft);transition:.25s;border-bottom:1px solid transparent}
.footer-contact a:hover{color:var(--gold-1);border-bottom-color:rgba(212,175,95,.5)}
.footer-contact .sep{color:rgba(255,255,255,.22)}
.footer-contact .li b{color:var(--gold-2);font-weight:500}

/* WhatsApp float */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:900;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:.3s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* reveal */
.reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Mobile: expandable footer sections */
@media(max-width:760px){
  .footer-grid{gap:0}
  .footer-col:not(.newsletter) h4{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09);-webkit-user-select:none;user-select:none}
  .footer-col:not(.newsletter) h4::after{content:"+";font-family:var(--sans);font-size:19px;line-height:1;color:var(--gold-2);transition:transform .25s ease}
  .footer-col:not(.newsletter).open h4::after{content:"\2212"}
  .footer-col:not(.newsletter) ul{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease,padding .25s ease}
  .footer-col:not(.newsletter).open ul{max-height:560px;opacity:1;padding:16px 0 8px}
  .site-footer .newsletter{margin-top:28px}
}

/* Phase badge */
.phase-tag{display:inline-block;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-1);border:1px solid var(--line);border-radius:40px;padding:5px 14px;margin-left:10px;vertical-align:middle;background:rgba(212,175,95,.06)}

/* Responsive */
@media(max-width:1024px){
  .nav-links,.nav-cta .btn{display:none}
  .hamburger{display:flex}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .section{padding:64px 0}
  .container{padding:0 20px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .form-grid,.interest-grid{grid-template-columns:1fr}
  .timeline::before{left:66px}
  .tl-item{grid-template-columns:66px 1fr;gap:16px}
  .tl-item .yr{font-size:17px}
  .event{grid-template-columns:1fr;text-align:center}
  .event .date{border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 16px}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .form-wrap{padding:26px}
}

/* Mobile menu panel */
.mobile-menu{position:fixed;top:74px;right:14px;left:auto;width:min(342px,calc(100vw - 28px));max-height:calc(100vh - 104px);max-height:calc(100svh - 104px);z-index:1200;background:rgba(9,20,52,.9);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 26px 60px rgba(2,6,20,.6),inset 0 1px 0 var(--glass-hi);padding:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top right;transition:opacity .2s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
.mm-inner{display:block}
.mm-inner>*+*{border-top:1px solid rgba(255,255,255,.055)}
.mm-link,.mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 14px;font-family:inherit;font-size:14.5px;letter-spacing:.4px;color:var(--ink);background:none;border:0;border-radius:12px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mm-link.active,.mm-group.open>.mm-head{color:var(--gold-1)}
.mm-link:active,.mm-head:active{background:rgba(201,162,75,.1)}
.mm-ico{position:relative;width:11px;height:11px;flex:0 0 11px}
.mm-ico::before,.mm-ico::after{content:"";position:absolute;background:var(--gold-2);border-radius:2px;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.mm-ico::before{left:0;top:5px;width:11px;height:1.6px}
.mm-ico::after{left:4.7px;top:0;width:1.6px;height:11px}
.mm-group.open .mm-ico::after{transform:scaleY(0);opacity:0}
.mm-sub{max-height:0;overflow:hidden;opacity:0;transition:max-height .34s cubic-bezier(.2,.7,.2,1),opacity .24s ease}
.mm-group.open>.mm-sub,.mm-group.open .mm-sub{max-height:600px;opacity:1}
.mm-sub a{display:block;position:relative;padding:9px 14px 9px 28px;font-size:12.9px;line-height:1.35;letter-spacing:.25px;color:var(--ink-soft);border-radius:10px}
.mm-sub a::before{content:"";position:absolute;left:14px;top:16px;width:5px;height:1px;background:var(--gold-2);opacity:.65}
.mm-sub a:active{background:rgba(201,162,75,.12);color:var(--gold-1)}
.mm-sub a:last-child{margin-bottom:6px}
.mm-cta{display:flex;align-items:center;justify-content:center;margin:8px 4px 4px;padding:14px 16px;border-radius:14px;background:var(--gold-grad);color:#0A1024;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 24px rgba(212,175,95,.22)}
.mm-cta:active{transform:translateY(1px)}
.hamburger span:nth-child(1),.hamburger span:nth-child(3){transform-origin:center}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Heading treatment (two-tone gold to white) */
.section-head h2,.split h2,.cta-band h2{background:linear-gradient(100deg,var(--gold-1) 0%,#FFFFFF 46%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.page-banner h1{background:linear-gradient(100deg,var(--gold-1) 0%,#FFFFFF 42%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}


/* Why Horizon8 video panel */
.split .media.logo-media{padding:0}
.split .media.logo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0;background:#0B1226}

/* WhatsApp button */
.wa-float{right:26px;bottom:26px;width:60px;height:60px;background:linear-gradient(145deg,#2BE375 0%,#22C765 45%,#128C7E 100%);border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 28px rgba(18,140,126,.44),0 3px 10px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.38);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.wa-float::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(43,227,117,.5);animation:waPulse 3s ease-out infinite;pointer-events:none}
.wa-float:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 38px rgba(18,140,126,.52),0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.44)}
.wa-float:active{transform:translateY(-1px) scale(1.02)}
.wa-float:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
.wa-float svg{width:33px;height:33px;fill:#fff;position:relative;filter:drop-shadow(0 1px 1.5px rgba(0,40,30,.3))}
@keyframes waPulse{0%{transform:scale(.94);opacity:.7}70%{transform:scale(1.2);opacity:0}100%{transform:scale(1.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none;opacity:.35}}
@media(max-width:760px){.wa-float{width:54px;height:54px;right:16px;bottom:16px}.wa-float svg{width:30px;height:30px}}


/* Trusted-by strip on small screens */
@media(max-width:680px){
  .hero-proof{display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%;margin-top:26px;padding:14px 18px;border-radius:var(--radius-sm)}
  .hero-proof .lbl{font-size:10px;letter-spacing:2.2px}
  .hero-proof .names{gap:6px 13px;font-size:12.4px;line-height:1.4}
}
@media(max-width:520px){
  .hero-proof .names{flex-direction:column;align-items:flex-start;gap:7px}
  .hero-proof .nm+.nm::before{display:none}
  .hero-proof .nm{padding-left:12px}
  .hero-proof .nm::before{content:"";position:absolute;left:0;top:50%;width:5px;height:1px;margin-top:0;border-radius:0;background:var(--gold-2);opacity:.7}
}


/* Mobile alignment: let grid/flex children shrink below content width */
.split>*{min-width:0}
.grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.form-grid>*,.interest-grid>*{min-width:0}
.field{min-width:0}
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0}
.field select{text-overflow:ellipsis}
.form-wrap{max-width:100%}
.page-banner>.container,.hero>.container,.section>.container{min-width:0}
.breadcrumb{overflow-wrap:break-word}
.order-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.order-row>span:last-child{text-align:right;min-width:0}

/* Trusted-by band (moved out of the hero) */
.trust-band{padding:46px 0;background:var(--navy-850);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust-band .container{display:flex;justify-content:center}
.trust-band .hero-proof{margin-top:0}
@media(max-width:680px){
  .trust-band{padding:30px 0}
  .trust-band .hero-proof{width:100%;margin-top:0}
}

/* Long headings on small screens */
@media(max-width:680px){
  .page-banner h1{font-size:clamp(28px,7.4vw,40px);letter-spacing:1.4px;overflow-wrap:break-word}
  .page-banner{min-height:420px}
  .page-banner .inner{padding:132px 0 48px}
  .page-banner p{font-size:16px}
  .hero h1{overflow-wrap:break-word}
}

/* ===== Page-end lock: page ends at the footer, never white below ===== */
/* body's background propagates to the browser canvas; the shorthand above sets
   only gradient IMAGES, leaving the colour layer transparent -> white canvas in
   the overscroll area. Declaring the colour separately keeps propagation (and
   therefore the existing gradient sizing) exactly as-is. */
body{background-color:var(--navy-900)}
html{background-color:var(--navy-900);overscroll-behavior-y:none}
body{overscroll-behavior-y:none}
body>*:last-child{margin-bottom:0}
.site-footer{margin-bottom:0;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}

/* ===== Hero infinity on mobile =====
   The desktop scrim is a 90deg gradient built for a wide hero: text on the
   left, image breathing on the right. On a phone that opaque left stop covers
   the whole width, so the infinity never showed. On small screens we swap to a
   vertical low opacity NAVY BLUE scrim and let the mark read across the full width. */
@media(max-width:1024px){
  .hero:not(.page-banner) .hero-bg img{opacity:.9;object-position:center 42%}
  .hero:not(.page-banner) .hero-bg::after{background:linear-gradient(180deg,rgba(4,9,26,.60) 0%,rgba(4,9,26,.46) 42%,rgba(4,9,26,.56) 74%,rgba(4,9,26,.72) 100%)}
}
@media(max-width:680px){
  /* show the whole mark instead of a 3.9x centre crop, softly faded into the
     navy at top and bottom so there is no hard seam */
  .hero:not(.page-banner) .hero-bg{display:flex;align-items:center;justify-content:center}
  .hero:not(.page-banner) .hero-bg img{width:100%;height:auto;max-height:100%;object-fit:contain;opacity:.95;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 16%,#000 84%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 16%,#000 84%,rgba(0,0,0,0) 100%)}
  .hero:not(.page-banner) .hero-bg::after{background:linear-gradient(180deg,rgba(4,9,26,.58) 0%,rgba(4,9,26,.44) 40%,rgba(4,9,26,.56) 72%,rgba(4,9,26,.74) 100%)}
  .hero:not(.page-banner) .hero-inner{padding:108px 0 56px}
}
@media(max-width:680px) and (prefers-reduced-transparency:reduce){
  .hero:not(.page-banner) .hero-bg::after{background:linear-gradient(180deg,rgba(4,9,26,.72) 0%,rgba(4,9,26,.62) 45%,rgba(4,9,26,.80) 100%)}
}

/* ===== Infinity touch in the mobile menu ===== */
.mm-inner{position:relative}
.mm-inner::after{content:"";display:block;height:52px;margin:10px 4px 2px;
  border-top:1px solid rgba(255,255,255,.055);
  background:url(motif-logo-infinity.png) no-repeat center 16px;background-size:104px auto;opacity:.26}

/* ===== Hero video (homepage) =====
   The hero background is now the infinity light loop. It mirrors the old
   hero-infinity.jpeg behaviour exactly: full-bleed cover crop on desktop,
   full mark contained and mask-faded on phones so nothing is cut off. */
.hero-bg-video{background:var(--navy-900)}
.hero-bg video{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85;display:block;border:0;background:var(--navy-900);pointer-events:none}
.hero-bg video::-webkit-media-controls{display:none!important}

@media(max-width:1024px){
  .hero:not(.page-banner) .hero-bg video{opacity:.9;object-position:center 42%}
}
@media(max-width:680px){
  /* A 16:9 loop inside a tall phone hero cannot cover without a 4x centre crop,
     so the whole mark is shown, scaled up and anchored to the lower half where
     there is no copy, then faded into the navy at the top so there is no seam. */
  .hero:not(.page-banner) .hero-bg{display:block}
  .hero:not(.page-banner) .hero-bg video{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:150%;max-width:none;height:auto;max-height:76%;flex:none;object-fit:contain;opacity:1;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 26%,#000 88%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 26%,#000 88%,rgba(0,0,0,0) 100%)}
  /* the shared mobile scrim was tuned for a still; lighten the lower half so the
     glow of the loop is not washed out, keeping the copy zone dark for contrast */
  .hero:not(.page-banner) .hero-bg-video::after{background:linear-gradient(180deg,rgba(4,9,26,.66) 0%,rgba(4,9,26,.5) 38%,rgba(4,9,26,.4) 70%,rgba(4,9,26,.5) 100%)}
  .hero:not(.page-banner) .hero-inner{padding:104px 0 52px}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg video{opacity:.85}
}


/* =========================================================
   INSPO IMPLEMENTATION — 3 new components, Horizon8 tokens
   1. .svc-row   — numbered horizontal service rows (services.html)
   2. .roster    — selectable team roster + feature portrait (team.html)
   3. .agenda    — date/time/event/focus schedule (events.html)
   ========================================================= */

/* ---------- 1. Service division rows ---------- */
.svc-list{display:flex;flex-direction:column;gap:20px}
.svc-row{
  display:grid;
  grid-template-columns:104px 5px 64px 1fr;
  grid-template-areas:"idx bar ic body";
  gap:0 26px;align-items:start;
  background:linear-gradient(160deg,var(--glass) 0%,var(--glass-2) 55%,rgba(255,255,255,.02) 100%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:32px 34px;position:relative;overflow:hidden;scroll-margin-top:110px;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.06),0 18px 44px rgba(2,6,20,.5);
  transition:.45s cubic-bezier(.2,.7,.2,1)
}
.svc-row::after{content:"";position:absolute;left:-45%;top:-120%;width:70%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);transform:rotate(18deg);pointer-events:none;transition:.75s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover{transform:translateY(-6px);border-color:rgba(212,175,95,.45);box-shadow:var(--glow),inset 0 1px 0 var(--glass-hi)}
.svc-row:hover::after{left:115%}

.svc-idx{grid-area:idx;text-align:center;padding-top:2px}
.svc-idx .lbl{display:block;font-size:10px;letter-spacing:2.6px;text-transform:uppercase;color:var(--muted)}
.svc-idx .n{display:block;font-family:var(--serif);font-size:56px;line-height:1;margin-top:2px;font-variant-numeric:tabular-nums;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.svc-bar{grid-area:bar;align-self:stretch;min-height:104px;border-radius:var(--radius-pill);background:var(--gold-grad);box-shadow:0 0 20px rgba(212,175,95,.34),inset 0 1px 0 rgba(255,255,255,.45)}

.svc-ic{grid-area:ic;width:64px;height:64px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(212,175,95,.5);
  background:radial-gradient(circle at 50% 38%,rgba(212,175,95,.2),rgba(212,175,95,.03));
  box-shadow:0 0 0 6px rgba(212,175,95,.05),inset 0 0 14px rgba(212,175,95,.14);
  display:flex;align-items:center;justify-content:center;color:var(--gold-1)}
.svc-ic svg{width:28px;height:28px}

.svc-body{grid-area:body;min-width:0}
.svc-body h3{font-size:24px;letter-spacing:.4px;margin-bottom:4px}
.svc-body .svc-lead{font-size:15px;color:var(--muted);margin-top:10px;max-width:62ch}
.svc-body .svc-for{font-size:13px;color:var(--muted);margin-top:10px}
.svc-body .svc-for b{color:var(--gold-1);font-weight:500}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none}
.svc-tags li{font-size:11.5px;letter-spacing:.9px;color:var(--ink-soft);border:1px solid var(--line-soft);border-radius:var(--radius-pill);padding:6px 14px;background:rgba(255,255,255,.03);transition:.25s}
.svc-row:hover .svc-tags li{border-color:rgba(212,175,95,.28)}
.svc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.svc-actions .btn{padding:13px 26px;font-size:12px}

@media(max-width:1024px){
  .svc-row{grid-template-columns:84px 5px 56px 1fr;gap:0 20px;padding:28px 26px}
  .svc-idx .n{font-size:44px}
  .svc-ic{width:56px;height:56px}
  .svc-ic svg{width:24px;height:24px}
}
@media(max-width:680px){
  .svc-row{grid-template-columns:64px 4px 1fr;grid-template-areas:"idx bar ic" "body body body";gap:18px 16px;padding:24px 22px}
  .svc-bar{min-height:56px}
  .svc-idx{text-align:left}
  .svc-idx .n{font-size:38px}
  .svc-ic{width:52px;height:52px;justify-self:end}
  .svc-body h3{font-size:21px}
  .svc-actions .btn{width:100%;justify-content:center}
}

/* ---------- 2. Team roster ---------- */
.roster{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center}
.roster>*{min-width:0}
.rost-list{display:flex;flex-direction:column;gap:10px;margin-top:30px;list-style:none}
.rost-item{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;width:100%;text-align:left;
  padding:14px 18px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;
  font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:.35s cubic-bezier(.2,.7,.2,1)}
.rost-item .av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:1px solid var(--line-soft);background:linear-gradient(160deg,var(--navy-600),var(--navy-800));transition:.35s}
.rost-item .av img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) brightness(1.12);opacity:.74;transition:.35s}
.rost-item>span:last-child{display:block;min-width:0}
.rost-item .nm{display:block;font-size:13.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink);line-height:1.25;transition:.3s}
.rost-item .rl{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.3}
.rost-item:hover{background:rgba(255,255,255,.035);border-color:var(--line-soft)}
.rost-item:hover .av img{opacity:.85}
.rost-item:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.rost-item[aria-selected="true"]{
  background:linear-gradient(120deg,var(--glass-strong),var(--glass-2));
  border-color:var(--glass-border);transform:translateX(8px);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 38px rgba(2,6,20,.45)}
.rost-item[aria-selected="true"] .av{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(212,175,95,.16)}
.rost-item[aria-selected="true"] .av img{filter:none;opacity:1}
.rost-item[aria-selected="true"] .nm{color:var(--gold-1)}

.rost-media{position:relative;padding-right:46px}
.rost-feature{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--glass-border);background:linear-gradient(160deg,var(--navy-600),var(--navy-850));
  box-shadow:inset 0 1px 0 var(--glass-hi),0 26px 62px rgba(2,6,20,.58)}
.rost-feature img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:opacity .32s ease,transform 6s ease}
.rost-feature::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,7,26,0) 14%,rgba(3,7,26,.34) 34%,rgba(3,7,26,.78) 50%,rgba(3,7,26,.94) 62%,rgba(3,7,26,.985) 76%,rgba(3,7,26,1) 100%)}
.rost-feature.is-swapping img{opacity:0}
.rost-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 32px 30px;text-shadow:0 1px 12px rgba(3,7,26,.7)}
.rost-cap .k{font-size:10.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--gold-2)}
.rost-cap h3{font-size:clamp(23px,2.6vw,31px);margin-top:9px;letter-spacing:.6px}
.rost-cap .rl{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink-soft);margin-top:7px}
.rost-cap p{font-size:14.5px;color:var(--ink-soft);margin-top:14px;max-width:46ch}
.rost-cap .btn{margin-top:20px;padding:13px 26px;font-size:11.5px}
.rost-vlabel{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:10.5px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl}
.rost-vlabel::after{content:"";width:1px;height:52px;background:var(--gold-grad);opacity:.8}

@media(max-width:1024px){
  .roster{grid-template-columns:1fr;gap:40px}
  .rost-media{padding-right:0;max-width:520px}
  .rost-vlabel{display:none}
  .rost-item[aria-selected="true"]{transform:none}
}
@media(max-width:680px){
  .rost-media{max-width:none}
  .rost-feature{aspect-ratio:4/4.6}
  .rost-cap{padding:26px 22px 24px}
  .rost-cap .btn{width:100%;justify-content:center}
  .rost-item{padding:12px 14px;gap:14px;grid-template-columns:48px 1fr}
  .rost-item .av{width:48px;height:48px}
  .rost-item .nm{font-size:12.5px;letter-spacing:1.8px}
}
@media(prefers-reduced-motion:reduce){
  .rost-feature img{transition:none}
  .rost-item{transition:none}
}

/* ---------- 3. Events agenda ---------- */
.agenda{display:flex;flex-direction:column;gap:14px}
.ag-head{display:grid;grid-template-columns:120px 1fr;align-items:center;padding:16px 10px;
  border:1px solid var(--glass-border);border-radius:var(--radius-pill);
  background:linear-gradient(120deg,var(--glass),var(--glass-2));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.ag-head .hd{padding-left:14px;font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold-1)}
.ag-head .ag-line{padding:0 27px}
.ag-head .ag-line span{font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold-1)}

.ag-row{display:grid;grid-template-columns:120px 1fr;align-items:center;padding:10px;
  border:1px solid var(--glass-border);border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(164,196,255,.055),var(--glass-2));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:.4s cubic-bezier(.2,.7,.2,1)}
.ag-row:hover{transform:translateY(-3px);border-color:rgba(212,175,95,.42);box-shadow:var(--glow),inset 0 1px 0 var(--glass-hi)}
.ag-date{text-align:center}
.ag-date .d{display:block;font-family:var(--serif);font-size:38px;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-date .m{display:block;font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.ag-panel{background:rgba(255,255,255,.045);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:20px 26px;display:flex;flex-direction:column;gap:13px}
.ag-line{display:grid;grid-template-columns:132px 1fr 216px;gap:24px;align-items:baseline;min-width:0}
.ag-line .t{font-size:14px;color:var(--gold-1);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.ag-line .e{font-size:15px;color:var(--ink);line-height:1.4}
.ag-line .f{font-size:13.5px;color:var(--muted);line-height:1.4}
.ag-line>*{min-width:0}
.ag-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;
  padding:20px 26px;border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(255,255,255,.028)}
.ag-foot p{font-size:13px;color:var(--muted);margin:0}

@media(max-width:900px){
  .ag-head{display:none}
  .ag-row{grid-template-columns:1fr;gap:12px;padding:14px}
  .ag-date{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;padding:2px 6px 0}
  .ag-date .d{font-size:30px}
  .ag-date .m{margin-top:0}
  .ag-panel{padding:18px 20px;gap:16px}
  .ag-line{grid-template-columns:1fr;gap:5px}
  .ag-line .t{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase}
  .ag-line+.ag-line{padding-top:15px;border-top:1px solid rgba(255,255,255,.07)}
}
@media(max-width:680px){
  .ag-foot{padding:18px 20px}
  .ag-foot .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   HOME — SERVICE DIVISION CARDS (icon tile + feature list + stat strip)
   ========================================================================== */
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dcard{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:linear-gradient(120deg,rgba(164,196,255,.075),rgba(120,150,215,.025));border:1px solid rgba(212,175,95,.32);
  border-radius:var(--radius);padding:30px 28px 24px;overflow:hidden;
  backdrop-filter:blur(8px) saturate(135%);-webkit-backdrop-filter:blur(8px) saturate(135%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px rgba(2,6,20,.28);transition:.4s cubic-bezier(.2,.7,.2,1)}
.dcard::after{content:"";position:absolute;right:-32%;top:-42%;width:78%;height:125%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(212,175,95,.17),transparent 70%);opacity:0;transition:.45s}
.dcard:hover,.dcard:focus-visible{transform:translateY(-8px);border-color:var(--line);box-shadow:var(--glow)}
.dcard:hover::after,.dcard:focus-visible::after{opacity:1}
.dcard-top{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.dcard-ic{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:var(--gold-grad);color:var(--navy-900);box-shadow:0 12px 26px rgba(212,175,95,.30)}
.dcard-ic svg{width:26px;height:26px}
.dcard .dnum{margin-left:auto;font-family:var(--serif);font-size:26px;line-height:1;color:rgba(241,220,160,.45)}
.dcard h3{font-size:20px;margin-top:20px;line-height:1.26;position:relative;z-index:1}
.dcard>p{font-size:14.5px;color:var(--ink-soft);margin-top:10px;position:relative;z-index:1}
.dfeat{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;position:relative;z-index:1}
.dfeat li{position:relative;padding-left:16px;font-size:13.5px;color:var(--muted);letter-spacing:.2px}
.dfeat li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold-grad)}
.dstats{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1}
.dstats>div{text-align:center}
.dstats .v{display:block;font-family:var(--serif);font-size:21px;line-height:1.1;color:var(--gold-1)}
.dstats .v.sm{font-family:var(--sans);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;padding-top:6px;color:var(--gold-2)}
.dstats .k{display:block;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:7px}
.dcard .dlink{margin-top:20px;font-size:12px;letter-spacing:1.9px;text-transform:uppercase;color:var(--gold-1);position:relative;z-index:1}
.dcard:hover .dlink{color:var(--gold-2)}
@media(max-width:1024px){.dcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.dcards{grid-template-columns:1fr}.dcard{padding:26px 22px 22px}}

/* ==========================================================================
   EVENTS — FEATURED ROWS restyled to match the agenda
   ========================================================================== */
.event{grid-template-columns:112px 1fr;gap:0;padding:10px;align-items:stretch}
.event .date{border-right:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.event .date .d{font-size:46px}
.event .epanel{background:rgba(255,255,255,.045);border:1px solid var(--line-soft);border-radius:16px;
  padding:22px 26px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.event .epanel .btn{white-space:nowrap}
@media(max-width:820px){
  .event{grid-template-columns:1fr;text-align:left}
  .event .date{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;border-bottom:0;padding:6px 14px 12px}
  .event .date .d{font-size:34px}
  .event .epanel{grid-template-columns:1fr;padding:20px}
  .event .epanel .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   PUBLISHING — BOOKSTORE HERO (New & Trending shelf)
   ========================================================================== */
.store{display:grid;grid-template-columns:.9fr 1fr .95fr;gap:34px;align-items:end;text-align:left}
.store-intro h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08}
.store-intro p{font-size:14.5px;color:var(--muted);margin-top:12px}
.store-tabs{display:inline-flex;gap:6px;padding:5px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);margin-top:22px}
.store-tabs button{font-family:inherit;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ink-soft);background:none;border:0;padding:11px 20px;border-radius:var(--radius-pill);cursor:pointer;transition:.3s}
.store-tabs button:hover{color:var(--gold-1)}
.store-tabs button[aria-pressed="true"]{background:var(--gold-grad);color:var(--navy-900)}
.store-search{position:relative;margin-top:20px;max-width:340px}
.store-search input{width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:14px 18px 14px 46px;outline:none;transition:.3s}
.store-search input::placeholder{color:var(--muted)}
.store-search input:focus{border-color:var(--line);box-shadow:0 0 0 3px rgba(212,175,95,.14)}
.store-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.store-hero{display:flex;justify-content:center;align-items:flex-end}
.store-hero .bk{width:74%;max-width:252px;transform:rotateY(-9deg) rotateX(2deg)}
.store-side{display:grid;gap:16px}
.sp{display:grid;grid-template-columns:20px 1fr;gap:10px}
.sp .vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;letter-spacing:2.8px;
  text-transform:uppercase;color:var(--muted);justify-self:center;align-self:center;white-space:nowrap}
.sp-card{background:linear-gradient(180deg,var(--glass-strong),var(--glass-2));border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:18px;text-align:center;box-shadow:inset 0 1px 0 var(--glass-hi)}
.sp-card .nm{display:block;font-family:var(--serif);font-size:17px;line-height:1.25;color:var(--ink)}
.sp-card .sub{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:7px}
.sp-card .avat{width:82px;height:82px;border-radius:50%;overflow:hidden;margin:14px auto 0;border:1px solid var(--line)}
.sp-card .avat img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.sp-card .mini{width:70px;margin:14px auto 0}
.sp-card .mini .bk{width:100%;transform:none;box-shadow:0 12px 22px rgba(2,5,18,.55)}
.player{margin-top:16px}
.player .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.16);position:relative}
.player .bar i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:3px;background:var(--gold-grad)}
.player .bar i::after{content:"";position:absolute;right:-4px;top:-3.5px;width:10px;height:10px;border-radius:50%;
  background:var(--gold-1);box-shadow:0 0 10px rgba(212,175,95,.6)}
.player .ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:15px;color:var(--ink-soft)}
.player .ctl svg{width:17px;height:17px}
.player .play{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-grad);color:var(--navy-900);flex:none}
.player .play svg{width:14px;height:14px}
.store-ledge{height:20px;margin-top:-10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(206,224,255,.22),rgba(206,224,255,.04));
  border:1px solid var(--line-soft);box-shadow:0 24px 44px rgba(2,6,20,.55)}
.store-empty{display:none;text-align:center;color:var(--muted);font-size:14px;margin-top:26px}
@media(max-width:1024px){
  .store{grid-template-columns:1fr 1fr;gap:28px}
  .store-side{grid-column:span 2;grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .store{grid-template-columns:1fr;gap:26px}
  .store-intro{text-align:center}
  .store-search{margin-left:auto;margin-right:auto}
  .store-side{grid-column:auto;grid-template-columns:1fr}
  .store-hero .bk{max-width:200px}
}

/* mini audiobook cover inside the side panel needs its own scaled-down type */
.sp-card .mini .bk{padding:11px 7px 15px;gap:5px;border-radius:2px 6px 6px 2px}
.sp-card .mini .bk .t{font-size:9.5px;letter-spacing:.4px;line-height:1.16}
.sp-card .mini .bk::before{width:6px}
.sp-card .mini .bk::after{right:-4px;width:4px;top:5px;bottom:5px}
.store-intro{padding-bottom:8px}

/* keep stat strips + links aligned across each row of division cards */
.dfeat{margin-bottom:6px}
.dstats{margin-top:auto}
.dstats>div{display:flex;flex-direction:column;justify-content:flex-end}

/* ---- STORE SAFETY + SCALE ----
   Hard caps so no icon or image can ever render at its natural size,
   and a slightly tighter scale for the hero at mid-size viewports. */
.store svg{width:17px;height:17px;flex:0 0 auto}
.store img{max-width:100%;height:auto;display:block}
.store-search svg{width:17px;height:17px}
.store-hero{max-width:100%;overflow:hidden}
.store-hero .bk{width:70%;max-width:220px}
.sp-card .avat{width:72px;height:72px;flex:0 0 auto}
.sp-card .avat img{width:100%;height:100%}
.sp-card .mini{width:64px}
.player svg{width:15px;height:15px}
.player .play svg{width:13px;height:13px}
@media(max-width:1120px){
  .store{grid-template-columns:1fr 1fr;gap:26px}
  .store-hero .bk{max-width:190px}
}

/* side panels: centre content so equal-height rows don't leave dead space */
@media(max-width:1120px){
  .sp-card{display:flex;flex-direction:column;justify-content:center;padding:20px 22px}
  .store-side{gap:14px}
}

/* ============================================================
   APPROACH — ALTERNATING STEP FLOW (centre spine + glow nodes)
   ============================================================ */
.sflow{position:relative;max-width:1040px;margin:0 auto;display:grid;gap:22px}
.sflow::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,rgba(212,175,95,0),var(--line) 7%,var(--line) 93%,rgba(212,175,95,0))}
.sflow-item{position:relative;display:grid;grid-template-columns:1fr 76px 1fr;align-items:center}
.sflow-node{grid-column:2;justify-self:center;width:46px;height:46px;border-radius:14px;
  background:var(--gold-grad);color:var(--navy-900);display:grid;place-items:center;
  font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.5px;
  box-shadow:0 0 0 7px var(--navy-900),0 0 26px rgba(212,175,95,.45),0 0 54px rgba(212,175,95,.22)}
.sflow-card{grid-column:1;grid-row:1;text-align:right;padding:24px 28px;border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);background:linear-gradient(160deg,var(--glass),var(--glass-2));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.sflow-item.alt .sflow-card{grid-column:3;text-align:left}
.sflow-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--glow)}
.sflow-card h3{font-family:var(--sans);font-size:16px;letter-spacing:.4px;color:var(--ink);margin:0}
.sflow-card p{font-size:14px;line-height:1.65;color:var(--ink-soft);margin:9px 0 0}
@media(max-width:820px){
  .sflow{gap:16px}
  .sflow::before{left:23px}
  .sflow-item{grid-template-columns:46px 1fr;gap:18px}
  .sflow-node{grid-column:1;justify-self:start;width:40px;height:40px;font-size:15px;box-shadow:0 0 0 6px var(--navy-900),0 0 22px rgba(212,175,95,.4)}
  .sflow-card,.sflow-item.alt .sflow-card{grid-column:2;text-align:left;padding:20px 22px}
}

/* ==========================================================================
   IMAGE BLENDING - dissolve hard image edges + hero/section transition
   ========================================================================== */
.hero-ribbon-right img{
  -webkit-mask-image:radial-gradient(72% 68% at 52% 50%,#000 42%,rgba(0,0,0,.55) 70%,transparent 100%);
  mask-image:radial-gradient(72% 68% at 52% 50%,#000 42%,rgba(0,0,0,.55) 70%,transparent 100%);
}
.page-banner .hero-bg img{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.55) 82%,transparent 100%);
}
.page-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:210px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,7,26,0) 0%,rgba(3,7,26,.42) 45%,rgba(3,7,26,.80) 74%,rgba(3,7,26,.95) 90%,#03071A 100%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:230px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,7,26,0) 0%,rgba(3,7,26,.38) 42%,rgba(3,7,26,.78) 72%,rgba(3,7,26,.94) 89%,#03071A 100%);
}
.hero-glass-dock{z-index:6}

/* Section-side of the hero transition: an extra top background layer that
   starts at the exact colour the hero fades to, then dissolves into the
   section's own artwork. Declared as a background layer so it cannot be
   overridden by, or clobber, the ::before watermark. */
.page-banner + .bg-deep,
.hero + .bg-deep{
  background:
    linear-gradient(180deg,#03071A 0%,rgba(3,7,26,.92) 22%,rgba(3,7,26,.65) 48%,rgba(3,7,26,.28) 76%,rgba(3,7,26,0) 100%) left top/100% 260px no-repeat,
    linear-gradient(180deg,rgba(2,5,20,.74),rgba(5,11,36,.64)),
    url("horizon8-ribbon-3d.jpg") center/cover no-repeat;
}
.page-banner + .bg-alt,
.hero + .bg-alt{
  background:
    linear-gradient(180deg,#03071A 0%,rgba(3,7,26,.92) 22%,rgba(3,7,26,.65) 48%,rgba(3,7,26,.28) 76%,rgba(3,7,26,0) 100%) left top/100% 260px no-repeat,
    linear-gradient(180deg,rgba(18,34,82,.34),rgba(10,20,52,.20)),
    url("horizon8-ribbon-3d.jpg") center/cover no-repeat;
}
.page-banner + .bg-panel,
.hero + .bg-panel{
  background:
    linear-gradient(180deg,#03071A 0%,rgba(3,7,26,.92) 22%,rgba(3,7,26,.65) 48%,rgba(3,7,26,.28) 76%,rgba(3,7,26,0) 100%) left top/100% 260px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}

/* Section-side hero blend.
   Must explicitly reset opacity/transform/width/mask, because .bg-deep::before
   and .bg-panel::before already set those on this same pseudo-element and the
   cascade merges per-property. z-index:1 lifts it above .bg-deep::after (z:0),
   whose blue radial glow is what lightens the top of the section, while staying
   below .section>.container (z:2) so text is unaffected. */
.page-banner + .section::before,
.hero + .section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:auto;
  width:auto; height:230px;
  transform:none;
  opacity:1;
  z-index:1;
  pointer-events:none;
  -webkit-mask-image:none; mask-image:none;
  background:linear-gradient(180deg,
    #03071A 0%,
    rgba(3,7,26,.94) 18%,
    rgba(3,7,26,.70) 42%,
    rgba(3,7,26,.38) 66%,
    rgba(3,7,26,.14) 84%,
    rgba(3,7,26,0) 100%);
}

/* ==========================================================================
   GLASS SURFACES - make the backdrop genuinely readable through the panel.
   A 22px backdrop blur averages everything behind into a flat wash, which
   reads as opaque even when the fill is only 7% alpha. A light blur keeps the
   frosted feel while letting the artwork show.
   ========================================================================== */
.card,.dcard,.sflow-card,.svc-row,.rost-item,.event,.ag-row,.book,
.team-card,.post,.form-wrap,.sp-card,.scard,.stat-card,.tcard,.icard{
  backdrop-filter:blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(6px) saturate(140%) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 18px 40px rgba(2,6,20,.26);
  border-color:rgba(212,175,95,.22);
  transition:box-shadow .35s ease,border-color .35s ease,transform .35s ease;
}

/* Gold light only while hovering the card. */
.card:hover,.dcard:hover,.sflow-card:hover,.svc-row:hover,.rost-item:hover,
.event:hover,.ag-row:hover,.book:hover,.team-card:hover,.post:hover,
.form-wrap:hover,.sp-card:hover,.scard:hover,.stat-card:hover,.tcard:hover,.icard:hover{
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 30px rgba(212,175,95,.20),
    0 0 62px rgba(212,175,95,.09),
    0 18px 40px rgba(2,6,20,.30);
  border-color:rgba(212,175,95,.45);
}

.hero-glass-card-left:hover{
  box-shadow:
    0 0 30px rgba(212,175,95,.20),
    0 0 62px rgba(212,175,95,.09),
    0 18px 40px rgba(2,6,20,.30),
    inset 0 1px 1px rgba(255,255,255,.25);
  border-color:rgba(212,175,55,.55);
}

/* Official infinity mark used in the hero card and hero dock.
   The source art is 682x300 (aspect 2.27), so height follows from width. */
.hero-glass-card-left .card-icon{
  width:46px; height:auto; display:block; margin:0 auto 14px;
}
.dock-content .dock-inf{
  width:36px; height:auto; display:block; flex:0 0 auto;
}
@media(max-width:680px){
  .hero-glass-card-left .card-icon{width:38px}
  .dock-content .dock-inf{width:30px}
}