/* =====================================================================
   JPW & Consultants — Design System
   "Bold dark + gold premium"  |  hand-authored, GHL-portable
   ===================================================================== */

:root{
  /* Ink scale (near-black charcoals) */
  --ink-900:#08090B;
  --ink-850:#0B0D10;
  --ink-800:#101319;
  --ink-700:#161A22;
  --ink-600:#1D222C;
  --ink-line:#2A303C;

  /* Gold scale */
  --gold:#C9A227;          /* primary */
  --gold-bright:#E4C76B;   /* hover / highlights */
  --gold-soft:#EAD9A0;     /* champagne text accent */
  --gold-deep:#8A7320;     /* logo-matched deep gold */

  /* Text */
  --text:#F5F2EA;          /* warm white */
  --text-muted:#AEB3BD;    /* cool grey */
  --text-dim:#7E8593;

  /* Surfaces / glass */
  --card:#13171F;
  --card-2:#171C26;
  --glass:rgba(20,24,32,.72);

  --radius:16px;
  --radius-lg:24px;
  --maxw:1200px;
  --shadow-gold:0 10px 40px -12px rgba(201,162,39,.45);
  --shadow-deep:0 24px 60px -20px rgba(0,0,0,.7);

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--gold); color:var(--ink-900)}

/* Ambient gold glows on the page background */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 80% -5%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(50vw 50vh at 0% 30%, rgba(201,162,39,.06), transparent 55%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(201,162,39,.05), transparent 60%);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; margin:0 0 .5em}
.display{font-size:clamp(2.5rem,6vw,4.6rem); font-weight:600; line-height:1.02; letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.serif-italic{font-style:italic; font-optical-sizing:auto}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.1rem,1.7vw,1.32rem); color:var(--text-muted); line-height:1.7}
.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
}
.eyebrow::before{content:""; width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.text-gold{color:var(--gold)}
.text-muted{color:var(--text-muted)}
.gold-grad{
  background:linear-gradient(100deg,var(--gold-soft),var(--gold) 45%,var(--gold-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.container-wide{max-width:1340px}
section{position:relative}
.section{padding:clamp(72px,10vw,140px) 0}
.section-sm{padding:clamp(56px,7vw,90px) 0}
.center{text-align:center}
.mx-auto{margin-left:auto; margin-right:auto}
.maxw-2xl{max-width:720px}
.maxw-3xl{max-width:860px}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--ink-line),transparent); border:0; margin:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:16px 30px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  min-height:52px; line-height:1;
}
.btn svg{width:18px; height:18px; transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{
  background:linear-gradient(100deg,var(--gold-bright),var(--gold));
  color:#1a1406; box-shadow:var(--shadow-gold);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 50px -12px rgba(201,162,39,.7)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--ink-line)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px)}
.btn-dark{background:var(--ink-700); color:var(--text); border-color:var(--ink-line)}
.btn-dark:hover{border-color:var(--gold); color:var(--gold-soft); transform:translateY(-3px)}
.btn-lg{padding:19px 38px; font-size:1.05rem; min-height:60px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
  border-bottom:1px solid transparent; padding:18px 0;
}
.site-header.scrolled{
  background:var(--glass); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--ink-line); padding:10px 0;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:13px; flex-shrink:0}
.brand img{width:72px; height:72px; transition:width .35s,height .35s; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.site-header.scrolled .brand img{width:58px; height:58px}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:.01em}
.brand-text span{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:3px}

.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-links > li{position:relative}
.nav-links > li > a, .nav-trigger{
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:10px;
  font-size:.95rem; font-weight:500; color:var(--text-muted); cursor:pointer;
  background:none; border:0; font-family:inherit; transition:color .2s, background .2s;
}
.nav-links > li > a:hover, .nav-trigger:hover, .nav-links > li.active > a{color:var(--text); background:rgba(255,255,255,.04)}
.nav-trigger svg{width:13px; height:13px; transition:transform .25s; opacity:.7}
.has-dd:hover .nav-trigger svg{transform:rotate(180deg)}

/* Dropdowns */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:280px; background:var(--card-2); border:1px solid var(--ink-line);
  border-radius:16px; padding:10px; box-shadow:var(--shadow-deep);
  opacity:0; visibility:hidden; transition:opacity .22s, transform .22s; z-index:120;
}
/* Invisible bridge spans the 10px gap so the dropdown survives the mouse trip down */
.dropdown::before{content:""; position:absolute; top:-14px; left:0; right:0; height:16px}
/* Open on hover, on keyboard focus, and on click (.open set by JS) */
.has-dd:hover .dropdown,
.has-dd:focus-within .dropdown,
.has-dd.open .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto}
.dropdown{pointer-events:none}
.has-dd.open .nav-trigger svg{transform:rotate(180deg)}
.has-dd.open .nav-trigger{color:var(--text); background:rgba(255,255,255,.04)}
.dropdown a{
  display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:10px;
  color:var(--text); transition:background .18s, color .18s;
}
.dropdown a:hover{background:rgba(201,162,39,.10)}
.dropdown a b{font-weight:600; font-size:.95rem}
.dropdown a small{color:var(--text-dim); font-size:.8rem; line-height:1.4}
.nav-cta{display:flex; align-items:center; gap:10px; flex-shrink:0}
.nav-phone{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--text); font-size:.95rem; padding:8px 12px}
.nav-phone svg{width:16px;height:16px;color:var(--gold)}
.nav-phone:hover{color:var(--gold)}

/* Mobile */
.burger{display:none; background:none; border:1px solid var(--ink-line); border-radius:10px; width:46px;height:46px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:2px; background:var(--text); position:relative; transition:.3s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); transition:.3s}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0; transform:rotate(45deg)}
body.menu-open .burger span::after{top:0; transform:rotate(-45deg)}
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(420px,90vw); background:var(--ink-850);
  border-left:1px solid var(--ink-line); z-index:99; transform:translateX(100%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1); padding:96px 26px 40px; overflow-y:auto;
}
body.menu-open .mobile-menu{transform:translateX(0)}
.mobile-menu a{display:block; padding:14px 0; font-size:1.1rem; border-bottom:1px solid var(--ink-700); color:var(--text)}
.mobile-menu .mm-group{font-family:var(--font-display); color:var(--gold); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin:22px 0 4px; border:0}
.mobile-menu .mm-sub{padding-left:14px; font-size:1rem; color:var(--text-muted)}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:.3s; z-index:98; backdrop-filter:blur(2px)}
body.menu-open .overlay{opacity:1; visibility:visible}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
/* The source clip is PORTRAIT (9:16). Forcing object-fit:cover into a wide hero
   scaled it ~2.4x and cut people's heads off. Contain + right alignment shows the
   whole frame and reads as an intentional split composition. */
.hero-media{background:var(--ink-900)}
.hero-media video,.hero-media img{width:100%; height:100%; object-fit:contain; object-position:100% 50%}
@media (max-width:900px){
  .hero-media video,.hero-media img{object-position:50% 0%}
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,9,11,.30) 0%, rgba(8,9,11,.55) 60%, var(--ink-900) 100%),
    linear-gradient(100deg, var(--ink-900) 0%, rgba(8,9,11,.92) 38%, rgba(8,9,11,.55) 62%, rgba(8,9,11,.25) 100%);
}
.hero-inner{position:relative; z-index:2; padding-top:120px; padding-bottom:60px; width:100%}
.hero h1{max-width:16ch}
.hero .lead{max-width:54ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero-trust{display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:30px 56px; margin-top:52px; padding-top:32px; border-top:1px solid var(--ink-line)}
.hero-trust .t{display:flex; flex-direction:column; align-items:flex-start}
/* Number: big, gradient gold. NOTE: the counter <span> lives inside this <b>,
   so it must inherit — the label rule below is scoped with > to avoid hitting it. */
.hero-trust .t b{
  font-family:var(--font-display); font-weight:600; line-height:.95;
  font-size:clamp(2.6rem,4.4vw,3.6rem); letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--gold-soft),var(--gold) 48%,var(--gold-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums; display:block;
}
.hero-trust .t b span{font:inherit; color:inherit; letter-spacing:inherit; margin:0; background:none}
.hero-trust .t > span{font-size:.86rem; color:var(--text-muted); letter-spacing:.04em; margin-top:10px; max-width:22ch; line-height:1.45}
/* Hidden: it collided with the hero stats row. Kept for markup compatibility. */
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:var(--text-dim); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; flex-direction:column; align-items:center; gap:10px; display:none}
.scroll-cue .line{width:1px; height:42px; background:linear-gradient(var(--gold),transparent); animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ---------- Page hero (interior) ---------- */
.page-hero{position:relative; padding:170px 0 70px; overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60vw 50vh at 80% 0%, rgba(201,162,39,.12), transparent 60%); }
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:.82rem; color:var(--text-dim); margin-bottom:18px; flex-wrap:wrap}
.breadcrumb a:hover{color:var(--gold)} .breadcrumb .sep{opacity:.5}
.page-hero h1{max-width:18ch}

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

.card{
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--ink-line); border-radius:var(--radius-lg);
  padding:30px; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(201,162,39,.4),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; pointer-events:none}
.card:hover{transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow-deep)}
.card:hover::after{opacity:1}

/* Service card with media */
.svc-card{padding:0}
.svc-card .svc-media{height:210px; overflow:hidden; position:relative}
.svc-card .svc-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.svc-card:hover .svc-media img{transform:scale(1.06)}
.svc-card .svc-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,var(--card) 100%)}
.svc-card .svc-body{padding:26px 30px 32px}
.svc-card .svc-body h3{margin-bottom:.4em}
.svc-link{display:inline-flex; align-items:center; gap:8px; color:var(--gold); font-weight:600; font-size:.95rem; margin-top:14px}
.svc-link svg{width:16px;height:16px; transition:transform .25s}
.svc-card:hover .svc-link svg{transform:translateX(5px)}

/* Icon feature */
.feature{padding:30px}
.feat-ico{width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,rgba(201,162,39,.18),rgba(201,162,39,.04)); border:1px solid rgba(201,162,39,.25); margin-bottom:20px}
.feat-ico svg{width:26px; height:26px; color:var(--gold)}

/* Checklist */
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.checklist li{display:flex; gap:14px; align-items:flex-start; color:var(--text)}
.checklist li::before{content:""; flex-shrink:0; margin-top:3px; width:22px; height:22px; border-radius:50%;
  background:rgba(201,162,39,.14); border:1px solid rgba(201,162,39,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px}
.checklist.two{grid-template-columns:1fr 1fr}

/* Stats band */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
/* The counter <span> lives INSIDE this <b>, so the label rule must be scoped with
   ">" or it also matches the number and shrinks it to label size. */
.stat b{display:block; font-family:var(--font-display); font-weight:600; line-height:.95;
  font-size:clamp(2.6rem,4.6vw,3.6rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--gold-soft),var(--gold) 48%,var(--gold-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat b span{font:inherit; color:inherit; letter-spacing:inherit; margin:0; display:inline; background:none}
.stat > span{display:block; color:var(--text-muted); font-size:.92rem; margin-top:10px; letter-spacing:.03em}

/* Split / about */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,80px); align-items:center}
.media-frame{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--ink-line)}
/* height:auto (NOT 100%): this frame has no fixed height, so height:100% resolved
   to 0 before the image loaded — which also starved the IntersectionObserver. */
.media-frame img{width:100%; height:auto; display:block; object-fit:cover}
.media-frame.tilt{box-shadow:var(--shadow-deep)}
.badge-float{position:absolute; bottom:20px; left:20px; right:20px; background:var(--glass); backdrop-filter:blur(10px);
  border:1px solid var(--ink-line); border-radius:14px; padding:16px 20px; display:flex; align-items:center; gap:14px}
.badge-float img{width:48px; height:48px}
.badge-float b{font-family:var(--font-display); color:var(--gold-soft)} .badge-float span{font-size:.85rem; color:var(--text-muted)}

/* Testimonials */
.tcard{display:flex; flex-direction:column; gap:18px; height:100%}
.tcard .quote-mark{font-family:var(--font-display); font-size:3rem; line-height:.5; color:var(--gold); opacity:.5; height:24px}
.tcard p{color:var(--text); font-size:1.02rem; flex:1}
.tcard .who{display:flex; align-items:center; gap:14px; border-top:1px solid var(--ink-line); padding-top:16px}
.tcard .who img{width:46px; height:46px; border-radius:10px; object-fit:contain; background:#fff; padding:4px}
.tcard .who b{display:block; font-size:.95rem} .tcard .who span{font-size:.82rem; color:var(--text-dim)}
.stars{display:flex; gap:3px; color:var(--gold)} .stars svg{width:16px;height:16px}

/* Marquee (carriers) */
.marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:56px; width:max-content; align-items:center; animation:scroll 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
/* Real logos on white chips. The previous "brightness(0) invert(1)" filter turned
   any logo with a white background into a solid white rectangle. */
.marquee .m-chip{background:#fff; border-radius:12px; padding:12px 18px; display:flex; align-items:center;
  justify-content:center; min-width:150px; height:74px; box-shadow:0 6px 22px -10px rgba(0,0,0,.8);
  opacity:.92; transition:transform .3s, opacity .3s}
.marquee .m-chip:hover{opacity:1; transform:translateY(-3px)}
.marquee img{max-height:44px; width:auto; max-width:120px; object-fit:contain}
@keyframes scroll{to{transform:translateX(calc(-50% - 28px))}}

/* Carrier grid (logos on chips) */
.logo-chip{background:#fff; border-radius:14px; padding:18px; display:flex; align-items:center; justify-content:center; min-height:96px; border:1px solid var(--ink-line); transition:transform .3s, box-shadow .3s}
.logo-chip:hover{transform:translateY(-4px); box-shadow:var(--shadow-deep)}
.logo-chip img{max-height:54px; width:auto; object-fit:contain}

/* CTA band */
.cta-band{position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(48px,7vw,80px); text-align:center;
  background:linear-gradient(135deg,var(--ink-700),var(--ink-800)); border:1px solid var(--ink-line)}
.cta-band::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(50% 120% at 50% 0%, rgba(201,162,39,.18), transparent 60%)}
.cta-band > *{position:relative; z-index:1}

/* Accordion (FAQ) */
.acc{border:1px solid var(--ink-line); border-radius:14px; margin-bottom:14px; overflow:hidden; background:var(--card)}
.acc summary{list-style:none; cursor:pointer; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-display); font-size:1.12rem; font-weight:600}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{flex-shrink:0; width:26px; height:26px; position:relative; transition:transform .3s}
.acc summary .pm::before,.acc summary .pm::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--gold)}
.acc summary .pm::before{width:14px; height:2px} .acc summary .pm::after{width:2px; height:14px; transition:transform .3s}
.acc[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.acc .acc-body{padding:0 26px 24px; color:var(--text-muted); animation:fade .3s ease}
@keyframes fade{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* Forms */
.form-card{background:var(--card-2); border:1px solid var(--ink-line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,44px)}
.field{margin-bottom:18px}
.field label{display:block; font-size:.85rem; font-weight:600; color:var(--text-muted); margin-bottom:8px; letter-spacing:.02em}
.field input,.field select,.field textarea{
  width:100%; background:var(--ink-850); border:1px solid var(--ink-line); border-radius:12px;
  padding:14px 16px; color:var(--text); font-family:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.field textarea{min-height:130px; resize:vertical}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.embed-slot{border:1px dashed var(--ink-line); border-radius:14px; padding:30px; text-align:center; color:var(--text-dim); background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.012) 12px,rgba(255,255,255,.012) 24px)}
.embed-slot b{color:var(--gold-soft); font-family:var(--font-display)}

/* Info rows (contact) */
.info-row{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--ink-700)}
.info-row .ico{width:44px;height:44px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.25)}
.info-row .ico svg{width:20px;height:20px;color:var(--gold)}
.info-row b{display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); margin-bottom:3px; font-family:var(--font-body); font-weight:600}
.info-row a,.info-row span{color:var(--text); font-size:1.05rem}
.info-row a:hover{color:var(--gold)}

/* Prose (legal / blog) */
.prose{max-width:760px; color:var(--text-muted)}
.prose h2{color:var(--text); margin-top:1.6em} .prose h3{color:var(--text); margin-top:1.4em}
.prose p,.prose li{font-size:1.05rem; line-height:1.8}
.prose ul{padding-left:1.2em} .prose li{margin-bottom:.5em}
.prose a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.prose strong{color:var(--text)}

/* Pills / tags */
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid var(--ink-line); background:var(--card); font-size:.88rem; color:var(--text-muted); font-weight:500}
.pill svg{width:15px;height:15px;color:var(--gold)}
.pill-grid{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-850); border-top:1px solid var(--ink-line); padding-top:72px; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px}
.footer-brand .brand{margin-bottom:18px}
.footer-brand p{color:var(--text-muted); font-size:.95rem; max-width:34ch}
.footer-social{display:flex; gap:12px; margin-top:20px}
.footer-social a{width:42px;height:42px; border-radius:11px; border:1px solid var(--ink-line); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:.25s}
.footer-social a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px)}
.footer-social svg{width:18px;height:18px}
.footer-col h4{font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:18px}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.footer-col a{color:var(--text-muted); font-size:.95rem; transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-assoc{display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding:28px 0; border-top:1px solid var(--ink-700); border-bottom:1px solid var(--ink-700)}
.footer-assoc img{height:38px; width:auto; object-fit:contain; opacity:.7; filter:grayscale(.2); transition:.25s; background:rgba(255,255,255,.92); border-radius:6px; padding:4px}
.footer-assoc img:hover{opacity:1}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:26px 0 34px; flex-wrap:wrap; color:var(--text-dim); font-size:.85rem}
.footer-bottom a:hover{color:var(--gold)}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav-links,.nav-phone{display:none}
  .burger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr; gap:40px}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .cols-3,.cols-2,.cols-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr; gap:30px 16px}
  .field-row{grid-template-columns:1fr}
  .checklist.two{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-trust{grid-template-columns:1fr 1fr; gap:24px 20px}
  .hero-trust .t b{font-size:clamp(2.1rem,9vw,2.7rem)}
  .hero-trust .t > span{font-size:.8rem; max-width:18ch}
  .nav-cta .btn:not(.always){display:none}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .marquee-track{animation:none; flex-wrap:wrap; justify-content:center}
}

/* =====================================================================
   POLISH LAYER  — preloader, progress, glow, sticky CTA, 404, a11y
   ===================================================================== */

/* Skip link (accessibility) */
.skip-link{position:fixed; top:-60px; left:16px; z-index:1000; background:var(--gold); color:#1a1406;
  padding:12px 20px; border-radius:0 0 12px 12px; font-weight:700; transition:top .25s}
.skip-link:focus{top:0; outline:3px solid #fff}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

/* Scroll progress bar */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--gold-bright)); box-shadow:0 0 12px rgba(201,162,39,.6);
  transition:width .1s linear}

/* Preloader */
/* pointer-events:none is CRITICAL — this is a full-screen z-index:900 overlay.
   Its visibility fades via a transition, and any stalled/throttled transition left
   it hit-testable, silently swallowing every click on the page (nav dropdowns
   included). Decorative overlays must never intercept input. */
.preloader{position:fixed; inset:0; z-index:900; background:var(--ink-900); display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:26px; transition:opacity .6s ease, visibility .6s; pointer-events:none}
.preloader.done{opacity:0; visibility:hidden}
.preloader .ring{position:relative; width:96px; height:96px}
.preloader .ring img{position:absolute; inset:0; margin:auto; width:58px; height:58px; animation:pl-pulse 1.8s ease-in-out infinite}
.preloader .ring svg{width:96px; height:96px; transform:rotate(-90deg)}
.preloader .ring circle{fill:none; stroke:var(--ink-line); stroke-width:3}
.preloader .ring .arc{stroke:var(--gold); stroke-linecap:round; stroke-dasharray:60 200; animation:pl-spin 1.1s linear infinite}
.preloader span{font-family:var(--font-display); letter-spacing:.3em; text-transform:uppercase; font-size:.72rem; color:var(--text-dim)}
@keyframes pl-spin{to{stroke-dashoffset:-260}}
@keyframes pl-pulse{0%,100%{opacity:.65; transform:scale(.96)}50%{opacity:1; transform:scale(1.02)}}

/* Card cursor spotlight */
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(201,162,39,.12), transparent 62%);
  opacity:0; transition:opacity .35s}
.card:hover::before{opacity:1}
.card > *{position:relative; z-index:1}

/* Shimmer sweep on primary buttons */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); transition:none}
.btn-primary:hover::after{animation:sweep .9s ease}
@keyframes sweep{to{left:140%}}

/* Animated gold underline accent for headings */
.ul-gold{position:relative; display:inline-block}
.ul-gold::after{content:""; position:absolute; left:0; bottom:-10px; height:3px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:3px; transition:width 1s cubic-bezier(.2,.8,.2,1) .3s}
.reveal.in .ul-gold::after, .ul-gold.in::after{width:64px}

/* Floating hero rating card */
.hero-float{position:absolute; right:6%; bottom:18%; z-index:3; background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--ink-line); border-radius:18px; padding:18px 22px; box-shadow:var(--shadow-deep); max-width:230px;
  animation:floaty 6s ease-in-out infinite}
.hero-float .stars{margin-bottom:8px}
.hero-float b{font-family:var(--font-display); font-size:1.05rem; display:block}
.hero-float span{font-size:.82rem; color:var(--text-muted)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:1024px){.hero-float{display:none}}

/* Back to top */
.to-top{position:fixed; right:22px; bottom:22px; z-index:80; width:50px; height:50px; border-radius:50%;
  background:var(--gold); color:#1a1406; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-gold); opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:.3s}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--gold-bright); transform:translateY(-3px)}
.to-top svg{width:20px; height:20px}
@media (max-width:760px){.to-top{bottom:84px; right:16px; width:46px; height:46px}}

/* Sticky mobile CTA bar */
.mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:85; display:none; gap:10px; padding:10px 12px;
  background:var(--glass); backdrop-filter:blur(14px); border-top:1px solid var(--ink-line)}
.mobile-cta a{flex:1; min-height:48px}
@media (max-width:760px){.mobile-cta{display:flex}}
@media (max-width:760px){.site-footer{padding-bottom:80px}}

/* Marquee row for testimonials (home) */
.tmarquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tmarquee-track{display:flex; gap:24px; width:max-content; animation:scroll 60s linear infinite}
.tmarquee:hover .tmarquee-track{animation-play-state:paused}
.tmarquee .tcard{width:380px; max-width:80vw}
@media (prefers-reduced-motion:reduce){.tmarquee-track{animation:none; flex-wrap:wrap; justify-content:center}}

/* 404 */
.err-wrap{min-height:72vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:140px 20px 80px}
.err-wrap .big{font-family:var(--font-display); font-size:clamp(6rem,20vw,12rem); line-height:.9; margin:0}

/* Section top hairline accent */
.accent-top{position:relative}
.accent-top::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* Preloader safety: auto-fade even if JS never runs */
.preloader{animation:pl-auto .6s ease 3s forwards}
@keyframes pl-auto{to{opacity:0; visibility:hidden}}

/* =====================================================================
   GRAPHICS UPGRADE LAYER — texture, mesh gradients, refined details
   ===================================================================== */

/* Film-grain noise overlay for depth (very subtle) */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Animated mesh aurora — drop into any section via .aurora */
.aurora{position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; filter:blur(60px); opacity:.5}
.aurora span{position:absolute; border-radius:50%; mix-blend-mode:screen; animation:drift 18s ease-in-out infinite}
.aurora .a1{width:42vw; height:42vw; left:-6%; top:-10%; background:radial-gradient(circle,rgba(201,162,39,.5),transparent 65%)}
.aurora .a2{width:36vw; height:36vw; right:-8%; top:10%; background:radial-gradient(circle,rgba(234,217,160,.35),transparent 65%); animation-delay:-6s}
.aurora .a3{width:30vw; height:30vw; left:30%; bottom:-12%; background:radial-gradient(circle,rgba(138,115,32,.45),transparent 65%); animation-delay:-12s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,4%) scale(1.08)}66%{transform:translate(-5%,-3%) scale(.95)}}
.has-aurora{position:relative; overflow:hidden}
.has-aurora > .container{position:relative; z-index:1}

/* Dotted grid texture for section backgrounds */
.grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px; -webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent); mask:radial-gradient(70% 60% at 50% 40%,#000,transparent)}

/* Gradient hairline divider (richer than flat) */
.divider-grad{height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,rgba(201,162,39,.5),transparent)}

/* Animated gradient border for the CTA band */
.cta-band{position:relative}
.cta-band::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:linear-gradient(120deg,rgba(201,162,39,.7),transparent 30%,transparent 70%,rgba(234,217,160,.6));
  background-size:300% 300%; animation:borderflow 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
@keyframes borderflow{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* Image clip reveal (GSAP/observer toggles .in) */
/* Reveal must never be able to permanently hide content. Uses a mask-style clip that
   is removed by JS; if JS never runs, the @media/noscript + .in fallbacks show it. */
.clip-reveal{clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.clip-reveal.in{clip-path:inset(0 0 0% 0)}
@media (prefers-reduced-motion:reduce){.clip-reveal{clip-path:none}}

/* Glow ring around media frames */
.media-frame::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.18); border-radius:var(--radius-lg)}
.media-frame{box-shadow:var(--shadow-deep), 0 0 80px -30px rgba(201,162,39,.5)}

/* Number/step chips with gradient */
.step-num{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px;
  font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--gold-soft);
  background:linear-gradient(140deg,rgba(201,162,39,.18),rgba(201,162,39,.03)); border:1px solid rgba(201,162,39,.28); margin-bottom:16px}

/* Refined feature icon: gradient + glow on hover */
.card:hover .feat-ico{box-shadow:0 0 30px -8px rgba(201,162,39,.6); border-color:rgba(201,162,39,.5)}
.feat-ico{transition:box-shadow .35s, border-color .35s}

/* Eyebrow centered helper keeps line */
.eyebrow.center-eb::after{content:""; width:28px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}

/* Section heading gradient hover sheen on links */
.svc-link{position:relative}

/* Pretty scrollbar (desktop) */
@media (pointer:fine){
  *{scrollbar-width:thin; scrollbar-color:var(--gold-deep) var(--ink-850)}
  ::-webkit-scrollbar{width:11px; height:11px}
  ::-webkit-scrollbar-track{background:var(--ink-850)}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-deep),var(--gold)); border-radius:10px; border:3px solid var(--ink-850)}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold)}
}

/* Stat cards refinement */
.stat{padding:24px 16px; border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); border:1px solid transparent; transition:border-color .3s, background .3s}
.stat:hover{border-color:var(--ink-line); background:var(--card)}

/* Article / prose enrichment */
.article-hero{padding:160px 0 40px; position:relative}
.article-meta{display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--text-dim); font-size:.9rem; margin-top:16px}
.article-meta .pill{font-size:.8rem}
.prose.article p:first-of-type::first-letter{font-family:var(--font-display); font-size:3.4rem; float:left; line-height:.8; padding:6px 12px 0 0; color:var(--gold)}
.prose blockquote{border-left:3px solid var(--gold); margin:1.6em 0; padding:.4em 0 .4em 24px; font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--text)}
.toc{background:var(--card); border:1px solid var(--ink-line); border-radius:16px; padding:22px 26px; margin:0 0 30px}
.toc b{display:block; font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px}
.toc a{display:block; padding:6px 0; color:var(--text-muted); border-bottom:1px solid var(--ink-700)}
.toc a:hover{color:var(--gold)}

/* Glossary */
.glossary-term{scroll-margin-top:120px}
.alpha-nav{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px}
.alpha-nav a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--ink-line); color:var(--text-muted); font-weight:600; transition:.2s}
.alpha-nav a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}

/* Instant-reveal escape hatch: when animations cannot run (background tab, or a
   watchdog fired) we must not wait on a transition that is frozen at opacity:0. */
.reveal.no-anim,.clip-reveal.no-anim{transition:none !important}
.clip-reveal.no-anim{clip-path:none !important}

/* ---------- Interior page hero: optional media column ---------- */
.ph-inner{display:block}
.ph-split .ph-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.ph-copy .lead{max-width:52ch}
.ph-media .media-frame{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--ink-line);
  box-shadow:var(--shadow-deep), 0 0 90px -34px rgba(201,162,39,.55)}
.ph-media img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover}
.page-hero.ph-split{padding-bottom:clamp(40px,6vw,72px)}
@media (max-width:900px){
  .ph-split .ph-inner{grid-template-columns:1fr; gap:30px}
  .ph-media{order:-1}
  .ph-media img{aspect-ratio:16/9}
}

/* =====================================================================
   LIGHT / BEIGE SECTIONS  — alternating rhythm so the site isn't all black.
   Implemented by re-declaring the theme tokens inside .sec-light, so every
   existing component (cards, forms, buttons, accordions) adapts automatically.
   ===================================================================== */
.sec-light{
  --text:#14171D;
  --text-muted:#4E5563;
  --text-dim:#727A88;
  --card:#FFFFFF;
  --card-2:#FCFAF5;
  --ink-line:#E3DBCA;
  --ink-600:#EFE8DA;
  --ink-700:#F1EADC;
  --ink-800:#F6F1E6;
  --ink-850:#FAF6EE;
  --ink-900:#F4EFE3;
  --glass:rgba(255,255,255,.75);
  --shadow-deep:0 22px 50px -24px rgba(60,50,20,.35);
  --shadow-gold:0 10px 34px -12px rgba(160,128,30,.45);
  background:linear-gradient(180deg,#F7F3EA 0%,#F1EBDC 100%) !important;
  border-block:1px solid #E7DFCD !important;
  color:var(--text);
}
.sec-light h1,.sec-light h2,.sec-light h3,.sec-light h4{color:#101319}
.sec-light p,.sec-light li{color:var(--text-muted)}
.sec-light .lead{color:#3F4652}
.sec-light .text-muted{color:var(--text-muted)}
/* Gold must darken on light backgrounds or it fails contrast */
.sec-light .eyebrow{color:#7A6416}
.sec-light .eyebrow::before,.sec-light .eyebrow::after{background:linear-gradient(90deg,transparent,#A88A22)}
.sec-light .gold-grad{background:linear-gradient(100deg,#8A7320,#B08F22 45%,#7A6416);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sec-light .svc-link,.sec-light .text-gold{color:#7A6416}
.sec-light .stat b,.sec-light .hero-trust .t b{
  background:linear-gradient(100deg,#8A7320,#B08F22 48%,#7A6416);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sec-light .step-num{color:#7A6416; background:linear-gradient(140deg,rgba(160,128,30,.16),rgba(160,128,30,.04)); border-color:rgba(160,128,30,.32)}
.sec-light .feat-ico{background:linear-gradient(140deg,rgba(160,128,30,.16),rgba(160,128,30,.05)); border-color:rgba(160,128,30,.3)}
.sec-light .feat-ico svg{color:#8A7320}
.sec-light .pill{background:#fff; border-color:var(--ink-line); color:#3F4652}
.sec-light .pill svg{color:#8A7320}
.sec-light .card{background:linear-gradient(180deg,#FFFFFF,#FBF7EF); border-color:var(--ink-line); box-shadow:0 2px 10px -6px rgba(60,50,20,.25)}
.sec-light .card:hover{box-shadow:var(--shadow-deep)}
.sec-light .card::after{background:linear-gradient(140deg,rgba(160,128,30,.55),transparent 40%)}
.sec-light .card::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(160,128,30,.10), transparent 62%)}
.sec-light .btn-ghost{color:#20242C; border-color:#D9CFB9}
.sec-light .btn-ghost:hover{border-color:#8A7320; color:#7A6416}
.sec-light .btn-dark{background:#20242C; color:#F5F2EA; border-color:#20242C}
.sec-light .btn-dark:hover{background:#14171D; color:#EAD9A0; border-color:#14171D}
.sec-light .checklist li{color:#252A33}
.sec-light .acc{background:#fff; border-color:var(--ink-line)}
.sec-light .acc summary{color:#101319}
.sec-light .acc .acc-body{color:var(--text-muted)}
.sec-light .form-card{background:#fff; border-color:var(--ink-line); box-shadow:var(--shadow-deep)}
.sec-light .field label{color:#3F4652}
.sec-light .field input,.sec-light .field select,.sec-light .field textarea{background:#FBF8F2; border-color:#DED5C1; color:#14171D}
.sec-light .field input::placeholder,.sec-light .field textarea::placeholder{color:#8A909B}
.sec-light .embed-slot{border-color:#D9CFB9; color:#6B7280}
.sec-light .embed-slot b{color:#7A6416}
.sec-light .info-row{border-bottom-color:#E7DFCD}
.sec-light .info-row a,.sec-light .info-row span{color:#20242C}
.sec-light .info-row a:hover{color:#7A6416}
.sec-light .prose a{color:#7A6416}
.sec-light .prose strong{color:#14171D}
.sec-light .prose blockquote{border-left-color:#A88A22; color:#20242C}
.sec-light .toc{background:#fff; border-color:var(--ink-line)}
.sec-light .toc a{color:var(--text-muted); border-bottom-color:#EFE8DA}
.sec-light .toc a:hover{color:#7A6416}
.sec-light .tcard .who img{background:#F4EFE3}
.sec-light .stars{color:#B08F22}
.sec-light .alpha-nav a{border-color:var(--ink-line); color:#4E5563}
.sec-light .alpha-nav a:hover{border-color:#8A7320; color:#7A6416}
.sec-light .logo-chip{border-color:var(--ink-line); box-shadow:0 2px 10px -6px rgba(60,50,20,.3)}
.sec-light .marquee .m-chip{box-shadow:0 4px 16px -10px rgba(60,50,20,.5); border:1px solid #EDE5D5}
.sec-light .divider-grad{background:linear-gradient(90deg,transparent,#C9A227,transparent)}
.sec-light .media-frame{border-color:var(--ink-line); box-shadow:var(--shadow-deep)}
.sec-light .badge-float{background:rgba(255,255,255,.86); border-color:var(--ink-line)}
.sec-light .badge-float b{color:#7A6416} .sec-light .badge-float span{color:var(--text-muted)}
/* CTA band sits inside a light section: keep it dark for punch/contrast */
.sec-light .cta-band{background:linear-gradient(135deg,#171C26,#0D1015) !important; border-color:#2A303C}
.sec-light .cta-band h2{color:transparent}
.sec-light .cta-band .lead{color:#C3C8D2}
.sec-light .cta-band .eyebrow{color:#E4C76B}
.sec-light .cta-band .eyebrow::before,.sec-light .cta-band .eyebrow::after{background:linear-gradient(90deg,transparent,#C9A227)}
.sec-light .cta-band .btn-ghost{color:#F5F2EA; border-color:#3A4250}
.sec-light .cta-band .btn-ghost:hover{border-color:#C9A227; color:#EAD9A0}

/* ---------- Footer contact strip + attribution ---------- */
.footer-contact{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 0; border-top:1px solid var(--ink-700)}
.fc-item{display:flex; align-items:center; gap:13px; color:var(--text)}
.fc-item .fc-ico{flex-shrink:0; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,rgba(201,162,39,.18),rgba(201,162,39,.04)); border:1px solid rgba(201,162,39,.28); transition:.25s}
.fc-item .fc-ico svg{width:19px; height:19px; color:var(--gold)}
a.fc-item:hover .fc-ico{border-color:var(--gold); box-shadow:0 0 22px -6px rgba(201,162,39,.7); transform:translateY(-2px)}
a.fc-item:hover{color:var(--gold-soft)}
.fc-item > span:last-child{display:flex; flex-direction:column; font-size:.95rem; line-height:1.35}
.fc-item b{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--text-dim); font-weight:600; margin-bottom:3px}
@media (max-width:900px){.footer-contact{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-contact{grid-template-columns:1fr}}

/* Powered by Launch Automation — glowing link */
.powered{color:var(--text-dim)}
.la-glow{
  font-weight:700; color:#F3E4AE; position:relative; padding:0 2px;
  background:linear-gradient(100deg,#EAD9A0,#E4C76B 40%,#C9A227);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(228,199,107,.55));
  animation:laPulse 3.2s ease-in-out infinite;
}
.la-glow:hover{filter:drop-shadow(0 0 14px rgba(228,199,107,.95)); text-decoration:underline; text-underline-offset:3px}
@keyframes laPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(228,199,107,.45))}
  50%{filter:drop-shadow(0 0 13px rgba(228,199,107,.9))}
}
@media (prefers-reduced-motion:reduce){.la-glow{animation:none}}

/* Keep the floating back-to-top button from sitting on the attribution text */
.footer-bottom{padding-right:84px}
@media (max-width:760px){.footer-bottom{padding-right:0}}

/* Association badges: proper white chips instead of washed-out tiles */
.footer-assoc{gap:14px}
.footer-assoc img{height:52px; padding:8px 14px; background:#fff; border-radius:10px; opacity:1;
  filter:none; box-shadow:0 4px 16px -10px rgba(0,0,0,.9); transition:transform .25s}
.footer-assoc img:hover{transform:translateY(-3px)}

/* Top-level nav labels stay on a single line */
.nav-links > li > a, .nav-trigger{white-space:nowrap}

/* "Why JPW" — top-align the copy column so the heading doesn't float in dead
   space next to the taller card grid, and give the supporting photo room. */
.split.split-top{align-items:start}
.why-copy{display:flex; flex-direction:column; align-items:flex-start}
.why-copy h2{margin-bottom:.35em}
.why-copy .lead{margin-bottom:26px}
.why-copy .btn{margin-bottom:30px}
.why-media{width:100%; border-radius:var(--radius-lg); overflow:hidden}
.why-media img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover}
@media (max-width:1024px){.why-media{margin-bottom:8px}}

/* Give the "Why JPW" card grid more room so headings don't wrap awkwardly */
.split.split-top{grid-template-columns:.92fr 1.08fr}
.split.split-top .feature{padding:26px 24px}
.split.split-top .feature h3{font-size:1.22rem; text-wrap:balance}
.split.split-top .feature p{font-size:.97rem}
@media (max-width:1024px){.split.split-top{grid-template-columns:1fr}}

/* =====================================================================
   UNIVERSAL COUNTER STYLING
   Any element carrying [data-count] renders large + gold + tabular, no matter
   which container it sits in. Declared last and with !important so a container
   rule (e.g. ".stat span" / ".hero-trust .t span") can never shrink the number
   again — this was the root cause of stat bars rendering at label size.
   ===================================================================== */
[data-count]{
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-size:clamp(2.6rem,4.6vw,3.6rem) !important;
  line-height:.95 !important;
  letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums;
  display:inline-block !important;
  margin:0 !important;
  background:linear-gradient(100deg,var(--gold-soft),var(--gold) 48%,var(--gold-bright));
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important;
}
.sec-light [data-count]{background:linear-gradient(100deg,#8A7320,#B08F22 48%,#7A6416)}
/* Keep the number's own wrapper from adding conflicting sizing */
.stat b,.hero-trust .t b{font-size:inherit}
@media (max-width:760px){[data-count]{font-size:clamp(2.1rem,9vw,2.7rem) !important}}

/* =====================================================================
   ANIMATED PROCESS FLOW ("How it works")
   Connector line draws left→right, number chips pop in sequence, and a gold
   pulse travels the line. All transform/opacity only, and fully disabled
   under prefers-reduced-motion.
   ===================================================================== */
.flow{position:relative}
.flow::before{
  content:""; position:absolute; top:27px; left:8%; right:8%; height:2px; z-index:0;
  background:linear-gradient(90deg,rgba(201,162,39,.15),var(--gold) 35%,var(--gold) 65%,rgba(201,162,39,.15));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.7s cubic-bezier(.65,0,.35,1) .15s;
}
.flow.in::before{transform:scaleX(1)}
.flow::after{
  content:""; position:absolute; top:23px; left:8%; width:10px; height:10px; border-radius:50%; z-index:1;
  background:var(--gold-bright); box-shadow:0 0 16px 5px rgba(228,199,107,.75); opacity:0;
}
.flow.in::after{animation:flowPulse 4s cubic-bezier(.45,0,.55,1) 1.6s infinite}
@keyframes flowPulse{
  0%{left:8%; opacity:0; transform:scale(.6)}
  12%{opacity:1; transform:scale(1)}
  88%{opacity:1; transform:scale(1)}
  100%{left:92%; opacity:0; transform:scale(.6)}
}
.flow-step{position:relative; z-index:2}
.flow-step .step-num{
  position:relative; z-index:2; background:linear-gradient(140deg,#1B2029,#12161D);
  transition:transform .55s cubic-bezier(.2,.9,.2,1), box-shadow .55s, border-color .55s;
}
.flow-step.in .step-num{animation:stepPop .7s cubic-bezier(.2,.9,.2,1) both}
.flow-step.d1.in .step-num{animation-delay:.15s}
.flow-step.d2.in .step-num{animation-delay:.45s}
.flow-step.d3.in .step-num{animation-delay:.75s}
.flow-step.d4.in .step-num{animation-delay:1.05s}
@keyframes stepPop{
  0%{transform:scale(.7); box-shadow:0 0 0 0 rgba(201,162,39,0)}
  55%{transform:scale(1.12); box-shadow:0 0 34px -4px rgba(201,162,39,.85); border-color:var(--gold)}
  100%{transform:scale(1); box-shadow:0 0 18px -8px rgba(201,162,39,.5)}
}
.flow-step:hover .step-num{transform:translateY(-4px); box-shadow:0 0 30px -6px rgba(201,162,39,.8); border-color:var(--gold)}
.sec-light .flow-step .step-num{background:linear-gradient(140deg,#FFFDF8,#F3ECDC)}
.sec-light .flow::before{background:linear-gradient(90deg,rgba(138,115,32,.2),#A88A22 35%,#A88A22 65%,rgba(138,115,32,.2))}
@media (max-width:760px){.flow::before,.flow::after{display:none}}
@media (prefers-reduced-motion:reduce){
  .flow::before{transform:scaleX(1); transition:none}
  .flow::after{display:none}
  .flow-step.in .step-num{animation:none}
}

/* Footer link icons */
.footer-col a{display:flex; align-items:center; gap:10px}
.footer-col .fl-ico{flex-shrink:0; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:rgba(201,162,39,.10); border:1px solid rgba(201,162,39,.22); transition:.25s}
.footer-col .fl-ico svg{width:14px; height:14px; color:var(--gold); transition:.25s}
.footer-col a:hover .fl-ico{background:rgba(201,162,39,.22); border-color:var(--gold); transform:translateX(2px)}
.footer-col a:hover .fl-ico svg{color:var(--gold-bright)}

/* Breadcrumb + label chip removed from interior heroes — rebalance the spacing */
.breadcrumb{display:none !important}
.page-hero{padding:190px 0 76px}
.page-hero.ph-split{padding-bottom:clamp(48px,6vw,80px)}
.article-hero{padding:190px 0 36px}
@media (max-width:900px){.page-hero{padding:150px 0 56px} .article-hero{padding:150px 0 28px}}

/* ---- Dropdown reliability hardening ----
   Panels are 280px wide while the triggers sit ~90px apart, so neighbouring
   panels overlap. If one is click-opened while another is merely hovered, the
   later one in DOM order painted on top and swallowed the click. Fix: the open
   panel always wins, and hover-opening is suppressed while a panel is open. */
.has-dd.open .dropdown{z-index:140}
.nav-links:has(.has-dd.open) .has-dd:not(.open) .dropdown{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
/* A panel that is not visible must never be hit-testable */
.dropdown[aria-hidden="true"]{pointer-events:none}

/* Carrier enrollment portal cards */
.portal-grid{gap:20px}
.portal-card{display:flex; gap:20px; align-items:flex-start; padding:26px}
.portal-logo{flex-shrink:0; background:#fff; border-radius:12px; padding:12px 14px; width:120px; height:64px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px -10px rgba(0,0,0,.8)}
.portal-logo img{max-height:38px; max-width:96px; width:auto; object-fit:contain}
.portal-body{flex:1; min-width:0}
.portal-kicker{display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:6px}
.portal-card h3{font-size:1.2rem; margin:0 0 6px}
.portal-card p{font-size:.95rem; margin:0 0 10px}
.sec-light .portal-kicker{color:#7A6416}
@media (max-width:560px){.portal-card{flex-direction:column} .portal-logo{width:auto}}

/* =====================================================================
   FINAL POLISH PASS
   ===================================================================== */

/* Portal cards: gold sweep + logo lift on hover */
.portal-card{overflow:hidden; position:relative}
.portal-card .portal-logo{transition:transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s}
.portal-card:hover .portal-logo{transform:translateY(-3px) scale(1.03); box-shadow:0 10px 26px -12px rgba(201,162,39,.9)}
.portal-card:hover .portal-kicker{letter-spacing:.19em}
.portal-kicker{transition:letter-spacing .35s}

/* Link underline sweep for inline prose links */
.prose a{background-image:linear-gradient(var(--gold),var(--gold)); background-size:0% 1px;
  background-repeat:no-repeat; background-position:0 100%; text-decoration:none;
  transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.prose a:hover{background-size:100% 1px}

/* Accordion chevron + row polish */
.acc{transition:border-color .3s, background .3s}
.acc:hover{border-color:rgba(201,162,39,.45)}
.acc[open]{border-color:rgba(201,162,39,.55)}

/* Buttons: crisper focus ring for keyboard users */
.btn:focus-visible{outline:3px solid var(--gold-bright); outline-offset:3px}

/* Header hides on scroll-down, returns on scroll-up (more screen for content) */
.site-header{will-change:transform}
.site-header.nav-hidden{transform:translateY(-104%)}

/* ---------- Mobile refinements ---------- */
@media (max-width:760px){
  .section{padding:clamp(56px,9vw,88px) 0}
  .container{padding:0 18px}
  h2{font-size:clamp(1.75rem,7vw,2.25rem)}
  .lead{font-size:1.02rem}
  .display{font-size:clamp(2.1rem,9.5vw,3rem)}
  .hero-inner{padding-top:104px; padding-bottom:40px}
  .hero{min-height:auto}
  .btn{width:100%; justify-content:center}
  .hero-cta{flex-direction:column; width:100%}
  .hero-cta .btn{width:100%}
  .cta-band .hero-cta .btn{width:100%}
  .card{padding:24px}
  .portal-card{padding:22px}
  .footer-bottom{gap:10px}
  .ph-copy .lead{max-width:none}
  /* tap targets */
  .footer-col a, .dropdown a, .mobile-menu a{min-height:44px}
}
@media (max-width:400px){
  .brand-text b{font-size:1.08rem}
  .brand img{width:56px; height:56px}
}

/* Respect reduced motion across every added effect */
@media (prefers-reduced-motion:reduce){
  .portal-card:hover .portal-logo{transform:none}
  .la-glow{animation:none}
  .site-header.nav-hidden{transform:none}
  .prose a{background-size:100% 1px}
}