/* =========================================================
   Gulecha CPA — Homepage v2 (modern)
   Loaded after styles.css on index.html only.
   ========================================================= */

body.home {
  --serif: "Inter Tight", "Inter", system-ui, sans-serif;  /* display face */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #0A1510;
  --ink-2: #3A4741;
  --paper: #F7F8F5;
  --grad: linear-gradient(100deg, #2FBF7A 0%, #8FE3B8 55%, #D6F5E4 100%);
  --grad-dark: linear-gradient(100deg, #00874C 0%, #1FA968 60%, #2FBF7A 100%);
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: -.005em;
  background: var(--paper);
}

/* ---------- type system ---------- */
.home .display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.home .display em { font-style: normal; font-weight: 600; color: var(--green); }
.home .on-dark .display em, .home .display.on-dark em, .home .dark .display em {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home .h2 { font-size: 60px; }
.home .eyebrow { font-size: 12.5px; letter-spacing: .16em; font-weight: 600; }
.home .eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.home .section-head.center .eyebrow::after { display: none; }
.home .lead { font-size: 19px; color: var(--ink-2); }
.home .section { padding: 130px 0; }
.home .dark { background: #06140E; color: rgba(255,255,255,.78); }
.home .dark .h2, .home .dark h3 { color: #fff; }
.home .dark .lead { color: rgba(255,255,255,.7); }
.home .btn { font-weight: 600; letter-spacing: -.005em; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(47,191,122,.2); animation: pulse 2s infinite; }

/* ---------- header (transparent over hero) ---------- */
.home .header { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; transition: background .35s, border-color .35s, box-shadow .35s; }
.home .header .wrap { width: auto; max-width: none; padding: 0 56px; height: 88px; }
.home .header .nav > li > a { color: rgba(255,255,255,.92); font-weight: 500; font-size: 15.5px; }
.home .header .nav > li:hover > a { background: rgba(255,255,255,.12); color: #fff; }
.home .header .nav-cta .portal-link { color: #fff; font-weight: 500; }
.home .header .nav-cta .portal-link .icon { color: var(--leaf); }
.home .brand { position: relative; display: block; height: 54px; }
.home .brand img { height: 54px; transition: opacity .35s; }
.home .brand .logo-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.home .header.scrolled { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(18px); border-bottom-color: rgba(10,21,16,.08); box-shadow: 0 10px 30px -20px rgba(0,0,0,.3); }
.home .header.scrolled .logo-light { opacity: 0; }
.home .header.scrolled .logo-dark { opacity: 1; }
.home .header.scrolled .nav > li > a, .home .header.scrolled .nav-cta .portal-link { color: var(--ink); }
.home .header.scrolled .nav > li:hover > a { background: var(--mint); color: var(--green-700); }
.home .header.scrolled .nav-cta .portal-link .icon { color: var(--green); }
.home .menu { color: var(--ink); }

/* ---------- HERO (full width, animated) ---------- */
.hx { position: relative; height: 100vh; min-height: 760px; overflow: hidden; color: #fff; background: #04100A; isolation: isolate; }
.hx-slides { position: absolute; inset: 0; z-index: -3; }
.hx-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.hx-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); will-change: transform; }
.hx-slide.active { opacity: 1; }
.hx-slide.active img { animation: kenburns 8.5s linear forwards; }
.hx-slide:nth-child(even).active img { animation-name: kenburns2; }
@keyframes kenburns { from { transform: scale(1.16) translate3d(1.5%, 1%, 0); } to { transform: scale(1.02) translate3d(-1%, -.5%, 0); } }
@keyframes kenburns2 { from { transform: scale(1.02) translate3d(-1.5%, 0, 0); } to { transform: scale(1.15) translate3d(1%, -1%, 0); } }

.hx-shade { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(3,14,9,.92) 0%, rgba(3,14,9,.72) 38%, rgba(3,14,9,.25) 68%, rgba(3,14,9,.35) 100%),
  linear-gradient(0deg, rgba(3,14,9,.85) 0%, rgba(3,14,9,0) 38%),
  linear-gradient(180deg, rgba(3,14,9,.55) 0%, rgba(3,14,9,0) 22%); }
.hx-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 25% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 25% 45%, #000 0%, transparent 75%);
  animation: gridMove 30s linear infinite; }
@keyframes gridMove { to { background-position: 88px 88px, 88px 88px; } }
.hx-aurora { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; mix-blend-mode: screen; }
.hx-aurora.a1 { width: 620px; height: 620px; left: -160px; top: 10%; background: radial-gradient(circle, rgba(0,135,76,.9), transparent 65%); animation: float1 16s ease-in-out infinite alternate; }
.hx-aurora.a2 { width: 520px; height: 520px; left: 30%; bottom: -220px; background: radial-gradient(circle, rgba(47,191,122,.6), transparent 65%); animation: float2 20s ease-in-out infinite alternate; }
@keyframes float1 { to { transform: translate(140px, 80px) scale(1.15); } }
@keyframes float2 { to { transform: translate(-120px, -90px) scale(.9); } }
.hx-grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

.hx-inner { position: relative; height: 100%; padding: 0 56px; display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 70px; align-items: center; max-width: 1680px; margin: 0 auto; }
.hx-copy { padding-top: 40px; }
.hx h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(72px, 6.4vw, 112px); line-height: .98; letter-spacing: -.045em; color: #fff; margin: 30px 0 30px; max-width: 980px; }
.hx h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.hx h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hx h1 .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.hx.ready h1 .w > span { transform: none; }

.rotator { display: flex; align-items: center; gap: 14px; font-size: 22px; color: rgba(255,255,255,.82); font-weight: 400; letter-spacing: -.01em; }
.rotator .rot-wrap { position: relative; display: inline-block; height: 1.4em; overflow: hidden; min-width: 420px; }
.rotator .rot { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 600; color: #fff; transform: translateY(110%); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s; }
.rotator .rot.on { transform: none; opacity: 1; }
.rotator .rot.off { transform: translateY(-110%); opacity: 0; }
.rotator .rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--grad); border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform .9s .25s cubic-bezier(.2,.8,.2,1); }
.rotator .rot.on::after { transform: scaleX(1); }

.hx-actions { display: flex; gap: 14px; margin-top: 46px; }
.hx .btn-primary { height: 60px; font-size: 16.5px; padding-left: 30px; }
.hx .btn-primary .arrow { width: 42px; height: 42px; }
.hx .btn-glass { height: 60px; padding: 0 30px; }
.hx-proof { display: flex; gap: 36px; margin-top: 56px; }
.hx-proof div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); }
.hx-proof b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.hx-proof span { font-size: 14px; color: rgba(255,255,255,.65); }

/* fade-up for hero pieces */
.hx .fx { opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.hx.ready .fx { opacity: 1; transform: none; }
.hx.ready .fx.d1 { transition-delay: .55s; } .hx.ready .fx.d2 { transition-delay: .75s; } .hx.ready .fx.d3 { transition-delay: .95s; } .hx.ready .fx.d4 { transition-delay: 1.15s; } .hx.ready .fx.d5 { transition-delay: 1.35s; }

/* hero glass card */
.hx-card { position: relative; border-radius: 28px; padding: 30px; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.hx-card .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--leaf); }
.hx-card .live { display: inline-flex; gap: 8px; align-items: center; letter-spacing: .02em; text-transform: none; font-weight: 500; color: rgba(255,255,255,.75); font-size: 12.5px; }
.hx-card .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); animation: pulse 2s infinite; }
.hx-card .big { display: flex; align-items: flex-end; gap: 14px; margin: 18px 0 6px; }
.hx-card .big b { font-family: var(--serif); font-weight: 600; font-size: 76px; line-height: .9; letter-spacing: -.05em; color: #fff; }
.hx-card .big span { font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.78); padding-bottom: 6px; }
.hx-chart { margin: 18px -6px 6px; height: 120px; position: relative; }
.hx-chart svg { width: 100%; height: 100%; overflow: visible; }
.hx-chart .ln { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s 1.2s cubic-bezier(.4,0,.2,1); }
.hx-chart .ln.a { stroke: rgba(255,255,255,.4); stroke-dasharray: 6 7; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s 1s; }
.hx-chart .ln.b { stroke: url(#hxg); }
.hx-chart .area { fill: url(#hxa); opacity: 0; transition: opacity 1.2s 2.4s; }
.hx.ready .hx-chart .ln.b { stroke-dashoffset: 0; }
.hx.ready .hx-chart .ln.a, .hx.ready .hx-chart .area { opacity: 1; }
.hx-chart .tag { position: absolute; right: 0; top: 4px; font-size: 11.5px; font-weight: 600; color: #06140E; background: var(--leaf); padding: 4px 10px; border-radius: 99px; opacity: 0; transform: translateY(6px); transition: all .6s 3s; }
.hx.ready .hx-chart .tag { opacity: 1; transform: none; }
.hx-chart .legend2 { position: absolute; left: 6px; bottom: -6px; display: flex; gap: 16px; font-size: 11.5px; color: rgba(255,255,255,.6); }
.hx-chart .legend2 span { display: inline-flex; align-items: center; gap: 6px; }
.hx-chart .legend2 i { width: 14px; height: 2px; display: inline-block; border-radius: 2px; }
.hx-card ul { margin-top: 22px; }
.hx-card li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14.5px; color: rgba(255,255,255,.9); opacity: 0; transform: translateX(10px); transition: all .6s cubic-bezier(.2,.8,.2,1); }
.hx-card li.in { opacity: 1; transform: none; }
.hx-card li .tk { width: 22px; height: 22px; border-radius: 7px; background: rgba(47,191,122,.2); color: var(--leaf); display: grid; place-items: center; flex: none; }
.hx-card li .tk .icon { width: 13px; height: 13px; stroke-width: 3; }
.hx-card li em { margin-left: auto; font-style: normal; font-size: 12px; color: rgba(255,255,255,.55); }

/* slide indicator */
.hx-foot { position: absolute; left: 56px; right: 56px; bottom: 34px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; }
.hx-loc { display: flex; gap: 14px; align-items: center; color: rgba(255,255,255,.8); font-size: 14px; }
.hx-loc .icon { width: 16px; height: 16px; color: var(--leaf); }
.hx-loc b { color: #fff; font-weight: 600; }
.hx-loc .lbl { position: relative; height: 22px; overflow: hidden; min-width: 240px; }
.hx-loc .lbl span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s; }
.hx-bars { display: flex; gap: 8px; }
.hx-bars button { width: 56px; height: 3px; border: 0; padding: 0; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; position: relative; cursor: pointer; }
.hx-bars button::before { content: ""; position: absolute; inset: -10px 0; }
.hx-bars button i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
.hx-bars button.active i { animation: barfill 7s linear forwards; }
.hx-bars button.done i { width: 100%; }
@keyframes barfill { to { width: 100%; } }
.hx-scroll { display: flex; align-items: center; gap: 12px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hx-scroll .mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; position: relative; }
.hx-scroll .mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ---------- marquee band ---------- */
.band { background: var(--green); color: #fff; overflow: hidden; height: 74px; display: flex; align-items: center; position: relative; }
.band-track { display: flex; white-space: nowrap; animation: marquee 45s linear infinite; }
.band-track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.band-track span::after { content: ""; width: 22px; height: 22px; background: url("../img/logo-mark-light.svg") center / contain no-repeat; opacity: .9; filter: brightness(10); }
.band-track span.alt { color: rgba(255,255,255,.55); }

/* ---------- intro statement (scroll scrub) ---------- */
.statement { font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: 1.14; letter-spacing: -.035em; color: var(--ink); max-width: 1120px; }
.statement .sw { opacity: .14; transition: opacity .25s linear; }
.statement .sw.lit { opacity: 1; }
.statement .sw.hl.lit { color: var(--green); }
.intro2 { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.intro2 .side { padding-top: 14px; }
.bento-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; margin-top: 90px; }
.bs { border-radius: 24px; padding: 30px; background: #fff; border: 1px solid var(--line); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .4s var(--ease), box-shadow .4s; }
.bs:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.bs b { font-family: var(--serif); font-weight: 600; font-size: 64px; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.bs b small { font-size: 34px; color: var(--green); letter-spacing: 0; }

.bs .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--mint); color: var(--green); display: grid; place-items: center; }
.bs.g { background: var(--green); border: 0; color: #fff; position: relative; overflow: hidden; }
.bs.g::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; background: url("../img/logo-mark-light.svg") center / contain no-repeat; opacity: .14; }
.bs.g b { color: #fff; } .bs.g b small { color: #CFF5E1; }
.bs.g .ic { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- who we serve: expanding panels ---------- */
.xp { display: flex; gap: 14px; height: 600px; }
.xp-item { position: relative; flex: 1; border-radius: 28px; overflow: hidden; cursor: pointer; isolation: isolate; transition: flex 1s cubic-bezier(.2,.8,.2,1); color: #fff; }
.xp-item.active { flex: 3.4; cursor: default; }
.xp-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1s; filter: saturate(.7) brightness(.8); }
.xp-item.active img { transform: scale(1.04); filter: none; }
.xp-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,14,9,.15) 0%, rgba(3,14,9,.35) 40%, rgba(3,14,9,.94) 100%); }
.xp-num { position: absolute; top: 26px; left: 28px; font-size: 13px; font-weight: 600; letter-spacing: .1em; padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.xp-plus { position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); display: grid; place-items: center; transition: transform .5s, background .3s; }
.xp-item.active .xp-plus { transform: rotate(45deg); background: var(--green); }
.xp-body { position: absolute; left: 30px; right: 30px; bottom: 30px; }
.xp-body h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; font-size: 28px; line-height: 1.08; color: #fff; transition: font-size .6s; }
.xp-item.active .xp-body h3 { font-size: 44px; }
.xp-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.xp-item.active .xp-more { max-height: 320px; opacity: 1; transition-delay: .25s; }
.xp-more p { font-size: 16.5px; color: rgba(255,255,255,.85); margin-top: 14px; max-width: 560px; }
.xp-more ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; max-width: 640px; }
.xp-more li { font-size: 13.5px; padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.xp-more .link-arrow { color: #fff; margin-top: 24px; }

/* ---------- services bento (dark) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; gap: 16px; }
.bx { position: relative; border-radius: 26px; padding: 30px; overflow: hidden; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; isolation: isolate; transition: border-color .4s, transform .4s var(--ease); --mx: 50%; --my: 50%; }
.bx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(47,191,122,.18), transparent 45%); opacity: 0; transition: opacity .4s; }
.bx:hover { border-color: rgba(47,191,122,.4); transform: translateY(-4px); }
.bx:hover::before { opacity: 1; }
.bx .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(47,191,122,.12); color: var(--leaf); border: 1px solid rgba(47,191,122,.25); }
.bx .ic .icon { width: 22px; height: 22px; }
.bx h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; font-size: 24px; line-height: 1.15; color: #fff; margin-top: auto; }
.bx p { font-size: 15px; color: rgba(255,255,255,.62); margin-top: 10px; line-height: 1.55; }
.bx .go { position: absolute; top: 26px; right: 26px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: #fff; transition: all .4s var(--ease); }
.bx .go .icon { width: 16px; height: 16px; }
.bx:hover .go { background: var(--leaf); border-color: var(--leaf); color: #06140E; transform: rotate(-45deg); }
.bx.s3 { grid-column: span 3; } .bx.s4 { grid-column: span 4; } .bx.s6 { grid-column: span 6; }
.bx.r2 { grid-row: span 2; }
.bx.feat { background: linear-gradient(160deg, #0B3B26 0%, #06140E 70%); border-color: rgba(47,191,122,.3); padding: 40px; }
.bx.feat .flag { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #06140E; background: var(--leaf); padding: 7px 13px; border-radius: 99px; }
.bx.feat h3 { font-size: 46px; margin-top: 28px; letter-spacing: -.04em; }
.bx.feat p { font-size: 17px; max-width: 460px; }
.bx.feat .bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: auto; }
.bx.feat .bars i { flex: 1; border-radius: 8px 8px 3px 3px; background: rgba(255,255,255,.1); height: 10%; transition: height 1.4s cubic-bezier(.2,.8,.2,1); }
.bx.feat .bars i.p { background: linear-gradient(180deg, var(--leaf), #127A49); }
.bx.feat .feat-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.bx.feat .feat-foot small { font-size: 13px; color: rgba(255,255,255,.55); }
.bx.feat .link-arrow { color: var(--leaf); }

/* ---------- now vs march (toggle) ---------- */
.nm { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
.switch { display: inline-flex; position: relative; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); margin-top: 36px; box-shadow: var(--shadow-sm); }
.switch button { position: relative; z-index: 1; border: 0; background: transparent; padding: 14px 26px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--muted); transition: color .4s; }
.switch button.on { color: #fff; }
.switch .knob { position: absolute; top: 6px; bottom: 6px; left: 6px; border-radius: 999px; background: var(--ink); transition: all .55s cubic-bezier(.2,.8,.2,1); }
.switch.now .knob { background: var(--green); }
.nm-card { position: relative; border-radius: 30px; padding: 44px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 520px; overflow: hidden; transition: background .6s, border-color .6s; }
.nm-card.now { background: #06140E; border-color: #06140E; }
.nm-card::after { content: ""; position: absolute; right: -140px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(47,191,122,.4), transparent 70%); opacity: 0; transition: opacity .6s; }
.nm-card.now::after { opacity: 1; }
.nm-state { position: absolute; inset: 44px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.nm-state.on { opacity: 1; transform: none; pointer-events: auto; position: relative; inset: auto; }
.nm-state .tag { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #A4452F; }
.nm-card.now .nm-state .tag { color: var(--leaf); }
.nm-state h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; font-size: 34px; line-height: 1.12; margin: 14px 0 26px; color: var(--ink); }
.nm-card.now h3 { color: #fff; }
.nm-state li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.nm-card.now li { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.86); }
.nm-state .mk { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: #F6E6E1; color: #A4452F; }
.nm-card.now .mk { background: rgba(47,191,122,.18); color: var(--leaf); }
.nm-state .mk .icon { width: 14px; height: 14px; stroke-width: 3; }
.nm-meter { margin-top: 30px; }
.nm-meter .row { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.nm-card.now .nm-meter .row { color: rgba(255,255,255,.7); }
.nm-meter .track { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.nm-card.now .nm-meter .track { background: rgba(255,255,255,.1); }
.nm-meter .fill { height: 100%; border-radius: 99px; width: 12%; background: #C9776A; transition: width 1.2s cubic-bezier(.2,.8,.2,1), background .6s; }
.nm-card.now .nm-meter .fill { width: 92%; background: var(--grad); }
.home .year-bar { margin-top: 34px; border-radius: 22px; padding: 28px 30px 24px; }
.home .year-bar-head h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: 20px; }

/* ---------- process with drawn line ---------- */
.home .process::before { background: var(--line-2); height: 2px; top: 33px; }
.home .process::after { content: ""; position: absolute; top: 33px; left: 40px; right: 40px; height: 2px; background: var(--green); transform-origin: left; transform: scaleX(var(--p, 0)); }
.home .step .n { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -.02em; background: var(--paper); }
.home .step.lit .n { background: var(--green); color: #fff; border-color: var(--green); }
.home .step h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }

/* ---------- family office parallax band ---------- */
.fo { position: relative; height: 760px; overflow: hidden; color: #fff; isolation: isolate; display: flex; align-items: center; }
.fo > img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; z-index: -2; will-change: transform; }
.fo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,14,9,.9) 0%, rgba(3,14,9,.55) 50%, rgba(3,14,9,.1) 100%); }
.fo-card { width: 640px; padding: 50px; border-radius: 30px; background: rgba(6,20,14,.45); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(20px); }
.fo-card h2 { color: #fff; font-size: 52px; margin: 18px 0 18px; }
.fo-card p { color: rgba(255,255,255,.8); font-size: 17.5px; }
.fo-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 30px 0 36px; }
.fo-card li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: rgba(255,255,255,.9); }
.fo-card li .icon { width: 17px; height: 17px; color: var(--leaf); stroke-width: 2.6; }

/* ---------- advisor split refinements ---------- */
.home .video-card { border-radius: 30px; }
.home .quote-block { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -.02em; font-size: 25px; border-left-color: var(--leaf); }
.home .signature .avatar { font-family: var(--serif); font-weight: 600; }
.meet .quote-block { margin-top: 0; }

/* ---------- community bento ---------- */
.cm { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(270px, auto); gap: 16px; }
.cm-photo { grid-column: span 5; grid-row: span 2; border-radius: 28px; position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; }
.cm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cm-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,14,9,0) 35%, rgba(3,14,9,.9)); }
.cm-photo h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; font-size: 38px; line-height: 1.08; color: #fff; margin-top: 12px; }
.cm-card { grid-column: span 7; border-radius: 28px; padding: 36px 40px; background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 64px 1fr; gap: 26px; align-items: start; transition: transform .4s var(--ease), box-shadow .4s; }
.cm-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.cm-card .ic { width: 64px; height: 64px; border-radius: 18px; background: var(--mint); color: var(--green); display: grid; place-items: center; }
.cm-card .ic .icon { width: 28px; height: 28px; }
.cm-card .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--green); }
.cm-card h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; font-size: 28px; line-height: 1.15; margin: 8px 0 10px; color: var(--ink); }
.cm-card p { color: var(--muted); font-size: 16px; }
.cm-split { grid-column: span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cm-split .cm-card { grid-column: auto; grid-template-columns: 1fr; gap: 18px; padding: 32px; }
.cm-split .cm-card.dk { background: #06140E; border-color: #06140E; }
.cm-split .cm-card.dk h4 { color: #fff; } .cm-split .cm-card.dk p { color: rgba(255,255,255,.7); } .cm-split .cm-card.dk .k { color: var(--leaf); }
.cm-split .cm-card.dk .ic { background: rgba(47,191,122,.15); color: var(--leaf); }

/* ---------- testimonials ---------- */
.home .testi { border-radius: 26px; }
.home .testi blockquote { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; }
.home .testi.big { background: #06140E; }

/* ---------- locations with map ---------- */
.lx { display: grid; grid-template-columns: 520px 1fr; gap: 80px; align-items: center; }
.map-wrap { position: relative; border-radius: 32px; padding: 34px 20px 20px; background: radial-gradient(ellipse at 40% 40%, rgba(47,191,122,.12), transparent 70%), rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); }
.map-wrap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); pointer-events: none; }
.wc-map { width: 100%; height: auto; display: block; position: relative; }
.wc-map .st { fill: rgba(47,191,122,.08); stroke: rgba(47,191,122,.55); stroke-width: 1.2; stroke-linejoin: round; transition: fill .4s, stroke .4s; }
.wc-map .st.hot { fill: rgba(47,191,122,.26); stroke: var(--leaf); }
.wc-map .st-label { fill: rgba(255,255,255,.22); font: 700 22px var(--serif); letter-spacing: .1em; }
.wc-map .dot { fill: var(--leaf); }
.wc-map .pin.small .dot { fill: rgba(143,227,184,.85); }
.wc-map .pin.hq .dot { fill: #fff; stroke: var(--leaf); stroke-width: 3; }
.wc-map .pulse { fill: none; stroke: var(--leaf); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pinPulse 2.6s ease-out infinite; }
.wc-map .pin:nth-child(odd) .pulse { animation-delay: 1.3s; }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
.wc-map .pin-label { fill: #fff; font: 600 13px var(--sans); paint-order: stroke; stroke: rgba(3,14,9,.85); stroke-width: 4px; }
.wc-map .pin-label.hq { font-size: 15px; }
.lx-list { display: grid; gap: 12px; }
.lx-state { border-radius: 22px; padding: 24px 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: background .3s, border-color .3s, transform .4s var(--ease); cursor: default; }
.lx-state:hover, .lx-state.hot { background: rgba(47,191,122,.1); border-color: rgba(47,191,122,.45); transform: translateX(6px); }
.lx-state .hd { display: flex; align-items: center; justify-content: space-between; }
.lx-state .hd b { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: 24px; color: #fff; }
.lx-state .hd em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--leaf); border: 1px solid rgba(47,191,122,.45); padding: 4px 10px; border-radius: 99px; }
.lx-state .cities { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; }
.lx-state .cities b { color: #fff; font-weight: 600; }

/* ---------- resources ---------- */
.home .res { border-radius: 26px; }
.home .res h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }

/* ---------- FAQ ---------- */
.home .faq summary { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: 21px; }

/* ---------- final CTA (full width, animated gradient) ---------- */
.fcta { position: relative; overflow: hidden; background: #06140E; color: #fff; padding: 150px 0; text-align: center; isolation: isolate; }
.fcta .blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; opacity: .7; }
.fcta .b1 { width: 700px; height: 700px; left: -200px; top: -300px; background: radial-gradient(circle, #00874C, transparent 65%); animation: float1 14s ease-in-out infinite alternate; }
.fcta .b2 { width: 600px; height: 600px; right: -150px; bottom: -300px; background: radial-gradient(circle, #2FBF7A, transparent 65%); animation: float2 18s ease-in-out infinite alternate; }
.fcta .mark { position: absolute; left: 50%; top: 50%; width: 900px; transform: translate(-50%, -50%); opacity: .04; z-index: -1; }
.fcta h2 { font-size: 92px; color: #fff; max-width: 1100px; margin: 26px auto 26px; line-height: .98; }
.fcta p { font-size: 20px; color: rgba(255,255,255,.75); }
.fcta .acts { display: flex; justify-content: center; gap: 14px; margin-top: 46px; }
.fcta .btn-primary { height: 62px; font-size: 17px; padding-left: 32px; }
.fcta .btn-primary .arrow { width: 44px; height: 44px; }
.fcta .btn-glass { height: 62px; padding: 0 30px; }
.fcta .count { display: inline-flex; gap: 10px; align-items: baseline; font-family: var(--serif); font-weight: 600; }
.fcta .count b { font-size: 26px; color: var(--leaf); }
.home .footer { margin-top: 0; }
.home .footer .f-brand img { height: 96px; }

/* reveal tuned */
.home .reveal { transform: translateY(40px); transition-duration: 1.1s; }
.home .reveal.in { transform: none; }

/* back-to-back dark sections share one gap instead of doubling it */
.section.dark + .section.dark { padding-top: 0; }

/* ---------- v2 fixes ---------- */
.hx h1 { font-size: clamp(64px, 5.5vw, 98px); letter-spacing: -.038em; }
.home .display { letter-spacing: -.035em; }
.bs b small { font-size: 34px; }
.bs .lb { display: block; margin-top: 12px; font-size: 15px; color: var(--muted); }
.bs.g .lb { color: rgba(255,255,255,.82); }
.home .year-bar-head > span { font-size: 14px; color: var(--muted); }
.home .year-bar-head h4 span { font: inherit; color: inherit; }
.home .process::before, .home .process::after { left: 34px; right: calc((100% - 60px) / 4 - 34px); }
.hx-card .top > span:first-child { color: #8FE3B8; }
.fcta .count { font-family: var(--sans); font-weight: 500; font-size: 14px; }
.fcta .count b { font-family: var(--serif); font-size: 18px; }
/* collapsed panels: vertical title */
.xp-item:not(.active) .xp-body { left: 26px; right: auto; bottom: 30px; }
.xp-item:not(.active) .xp-body h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 30px; white-space: nowrap; }
.xp-item:not(.active) .xp-body h3 br { display: none; }

/* ---------- top utility bar over the hero ---------- */
.home .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 49; background: rgba(3,14,9,.55); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.1); }
.home .topbar .wrap { width: auto; max-width: none; padding: 0 56px; }
.home .header { top: 42px; transition: top .35s, background .35s, border-color .35s, box-shadow .35s; }
.home .header.scrolled { top: 0; }
.home .testi.big blockquote { font-size: 23px; line-height: 1.45; }
.home .testi blockquote { font-size: 19px; }

/* =========================================================
   Inner pages (About, service pages, Contact) on the v2 design
   body class="home inner"
   ========================================================= */
.home .header .nav > li > a.active { color: var(--leaf); }
.home .header.scrolled .nav > li > a.active { color: var(--green); }

/* full-width page banner (reuses .hx layers) */
.hx.ph { height: auto; min-height: 700px; display: flex; align-items: flex-end; }
.hx.ph .hx-inner { height: auto; width: 100%; padding: 190px 56px 110px; align-items: end; }
.hx.ph.solo .hx-inner { grid-template-columns: 1fr; }
.hx.ph h1 { font-size: clamp(60px, 5vw, 86px); max-width: 960px; margin: 26px 0 26px; }
.hx.ph h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-lead { font-size: 20px; line-height: 1.65; color: rgba(255,255,255,.82); max-width: 680px; }
.hx.ph .hx-actions { margin-top: 38px; }
.hx.ph .crumbs { display: inline-flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); font-size: 13.5px; }
.hx.ph .crumbs b { color: #fff; font-weight: 600; }
.ph-facts { animation: none; padding: 30px 32px; }
.ph-facts dl { margin: 0; }
.ph-facts dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #8FE3B8; }
.ph-facts dd { margin: 6px 0 0; color: #fff; font-size: 15.5px; line-height: 1.5; }
.ph-facts div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }

/* modern type for inner-page components */
.home .bg-cream { background: #EEF3EF; }
.home.inner .section { padding: 120px 0; }
.home .mvv .card h3, .home .founder h2, .home .why h3, .home .member h3, .home .give h3,
.home .inc h3, .home .tab-panel h3, .home .q h3, .home .dl-item h4, .home .rel h4,
.home .action h3, .home .office-card h3, .home .form-card h2, .home .booking .side h2,
.home .loc .st b, .home .rm-head b, .home .cal-fallback b, .home .google-strip b {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.03em;
}
.home .founder h2 { font-size: 56px; }
.home .q .ql b { font-family: var(--serif); font-weight: 600; letter-spacing: -.04em; }
.home .portrait .mono { font-family: var(--serif); font-weight: 600; letter-spacing: -.05em; }
.home .member .ph { font-family: var(--serif); font-weight: 600; letter-spacing: -.04em; }
.home .dl-item .n { font-family: var(--serif); font-weight: 600; }

/* rounder, softer cards */
.home .mvv .card, .home .why-grid, .home .member, .home .give, .home .inc, .home .q,
.home .dl-item, .home .rel, .home .action, .home .form-card, .home .office-card,
.home .map-card, .home .cal-frame, .home .tab-panel, .home .roadmap-mock, .home .loc { border-radius: 26px; }
.home .mvv .card, .home .give, .home .inc, .home .rel, .home .q { transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.home .mvv .card:hover, .home .give:hover, .home .q:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.home .mvv .card.dark, .home .give.hl, .home .member.join, .home .q.q4, .home .office-card { background: #06140E; }
.home .portrait { background: linear-gradient(160deg, #0B3B26, #06140E); border-radius: 30px; }
.home .tabs { border-radius: 999px; }
.home .tab.active { background: var(--ink); }
.home .action { border-radius: 26px; }
.home .action .ico { border-radius: 16px; }

/* contact: action cards overlap the full-width banner */
.home.inner .action-cards { margin-top: -110px; }
.hx.ph.contact .hx-inner { padding-bottom: 190px; }

/* ---------- short laptop screens (e.g. 1280×720, 1366×768) ---------- */
.hx:not(.ph) .hx-inner { padding-top: 130px; padding-bottom: 96px; }
@media (max-height: 820px) {
  .hx:not(.ph) { min-height: 720px; }
  .hx:not(.ph) .hx-inner { padding-top: 136px; padding-bottom: 84px; gap: 56px; }
  .hx h1 { font-size: 66px; margin: 20px 0 22px; }
  .rotator { font-size: 20px; }
  .hx-actions { margin-top: 30px; }
  .hx .btn-primary, .hx .btn-glass { height: 54px; }
  .hx-proof { margin-top: 34px; }
  .hx-proof b { font-size: 26px; }
  .hx-card { padding: 24px 26px; }
  .hx-card .big b { font-size: 60px; }
  .hx-chart { height: 84px; margin-top: 10px; }
  .hx-card ul { margin-top: 14px; }
  .hx-card li { padding: 8px 0; font-size: 14px; }
  .hx-foot { bottom: 22px; }
  .hx.ph .hx-inner { padding-top: 170px; padding-bottom: 80px; }
  .hx.ph { min-height: 640px; }
}

/* ---------- no divider line under the transparent header ---------- */
.home .header, .home .header:not(.scrolled) { border-bottom: 0; }
.home .topbar { border-bottom: 0; }

/* ---------- city band: all names and icons in solid white ---------- */
.band-track span, .band-track span.alt { color: #fff; }
.band-track span::after { filter: brightness(0) invert(1); opacity: 1; }

/* ---------- office hours: open / closed status in the top bar ---------- */
.hours-top { display: inline-flex; align-items: center; gap: 8px; }
.hours-status { display: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 2px 9px; border-radius: 99px; margin-left: 4px; }
.hours-status.open, .hours-status.closed { display: inline-flex; align-items: center; gap: 6px; }
.hours-status.open { background: rgba(47,191,122,.18); color: #8FE3B8; }
.hours-status.open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
.hours-status.closed { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

/* ---------- process timeline: self-playing animation (replaces scroll tracking) ---------- */
.home .process::before, .home .process::after { top: 33px; }
.home .process::after { transform: scaleX(0); transition: none; }
.home .process.run::after { animation: drawLine 2.7s .25s cubic-bezier(.45,0,.25,1) forwards; }
.home .process.done::after { transform: scaleX(1); }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.home .process .step.reveal { transform: none; }          /* keep circles on the line while fading in */
.home .step .n { transition: background .45s, color .45s, border-color .45s, box-shadow .6s; }
.home .step.lit .n { background: var(--green); color: #fff; border-color: var(--green); animation: stepPop .6s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 0 8px rgba(0,135,76,.12); }
@keyframes stepPop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.home .step h3, .home .step p { transition: color .45s; }
.home .step:not(.lit) h3 { color: var(--muted); }

/* ---------- mega menus: same layout for Services, Who We Serve and Resources ---------- */
.menu.mega .menu-feature { grid-column: 3; grid-row: 1 / span 4; }
.menu.mega.mega-4 { width: 760px; grid-template-columns: 1fr 1fr 240px; }
.menu.mega.mega-4 .menu-feature { grid-row: 1 / span 2; min-height: 230px; }
.menu.mega.mega-4 { left: 50%; transform: translate(-50%, 8px); }
.nav > li:hover .menu.mega.mega-4 { transform: translate(-50%, 0); }

/* ---------- header and top bar share the hero's content width ---------- */
.home .header .wrap, .home .topbar .wrap { max-width: 1680px; margin: 0 auto; box-sizing: border-box; }

/* ---------- top bar always stays on one line ---------- */
.topbar a, .topbar span { white-space: nowrap; }
.topbar .wrap { gap: 24px; }
@media (max-width: 1599px) { .topbar .group:last-child > span:first-child { display: none; } }