/* =========================================================
   LEDGERLINE DESIGN SYSTEM
   Built for a US tax & accounting outsourcing brand.
   Signature motif: the "ledger rule" — a hairline with tick
   marks and tabular numerals, borrowed from a physical
   accounting ledger. Used structurally (section dividers,
   stat rows, running totals) — never as decoration.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Color — derived from the Tax Easy Hub logo (navy #0D305A + teal #0A9A90) */
  --ink:        #0E1526;   /* primary dark ground */
  --ink-soft:   #16203A;   /* elevated dark panels */
  --ink-line:   rgba(247,245,240,.14);
  --paper:      #F8FAFB;   /* primary light ground */
  --paper-dim:  #EEF2F4;   /* secondary light ground */
  --rule:       #DCE3E8;   /* hairline on paper */
  --slate:      #3F4E5C;   /* body text on paper */
  --slate-soft: #74838F;   /* muted text */
  --white:      #FFFFFF;
  --navy-brand: #0D305A;   /* exact logo navy — 2nd depth color in dual-tone gradients */
  --teal:       #0A9A90;   /* exact logo teal — decorative everywhere; text/fill only on DARK grounds */
  --teal-deep:  #076B64;   /* text / white-text button fills on LIGHT grounds (AA-safe) */
  --teal-soft:  #8FD9D1;   /* soft tint — badges, particle canvas */
  --teal-light: #4FC3B8;   /* icon glyphs on tinted dark backgrounds */
  --green:      #1E7A56;   /* positive figures */

  /* Type */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Inter', -apple-system, Segoe UI, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --container: 1240px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(14,21,38,.04), 0 12px 32px -16px rgba(14,21,38,.18);
  --shadow-lift: 0 24px 48px -20px rgba(14,21,38,.28);
  --ease: cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  opacity: 0;
  animation: bodyFallbackShow 0s .6s forwards; /* safety net: visible within .6s even if JS never runs */
}
body.loaded{ opacity:1; transition: opacity .45s var(--ease); }
@keyframes bodyFallbackShow{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ body{ opacity:1; animation:none; } }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2.6rem, 4.6vw, 4.4rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3vw, 2.7rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; }
.lead{ font-size: 1.2rem; color: var(--slate-soft); font-weight: 400; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section{ padding: 108px 0; }
@media (max-width: 768px){ section{ padding: 72px 0; } }

.on-ink{ background: var(--ink); color: rgba(247,245,240,.82); }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{ color: var(--paper); }
.on-dim{ background: var(--paper-dim); }

/* Tabular numerals wherever figures appear */
.figure, .stat-num, .ledger-total{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- Eyebrow / ledger label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep);
  margin-bottom: 1.1em;
}
.eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--teal-deep); }
.on-ink .eyebrow{ color: var(--teal); }
.on-ink .eyebrow::before{ background: var(--teal); }

/* ---------- The Ledger Rule (signature divider) ---------- */
.ledger-rule{
  position: relative;
  height: 1px;
  background: var(--rule);
  margin: 0 0 3rem;
  overflow: visible;
}
.on-ink .ledger-rule{ background: var(--ink-line); }
.ledger-rule::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 28px);
  color: var(--rule);
  opacity:.9;
}
.on-ink .ledger-rule::after{ color: var(--ink-line); }
.ledger-rule .tick{
  position:absolute; top:-3px; width:1px; height:7px; background: var(--teal);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: .95em 1.7em;
  font-size: .95rem; font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn-primary{ background: var(--teal-deep); color:#fff; box-shadow: 0 10px 24px -10px rgba(7,107,100,.55); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(7,107,100,.6); }
.btn-ghost{ background: transparent; border-color: rgba(247,245,240,.35); color: inherit; }
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal); }
.btn-line{ background:transparent; border-color: var(--rule); color: var(--ink); }
.btn-line:hover{ border-color: var(--teal-deep); color: var(--teal-deep); }
.btn-sm{ padding: .7em 1.3em; font-size: .85rem; }
.btn-block{ width:100%; }

/* ---------- Nav CTA button — the navbar's visual focal point ---------- */
.btn-nav{
  background: linear-gradient(135deg, var(--teal-deep), var(--teal) 130%);
  color:#fff; border:0; padding: .8em 1.5em;
  box-shadow: 0 10px 26px -10px rgba(10,154,144,.55), 0 2px 10px -2px rgba(14,21,38,.25);
}
.btn-nav i{ transition: transform .3s var(--ease); font-size:.85em; }
.btn-nav:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(10,154,144,.62), 0 4px 14px -2px rgba(14,21,38,.3); }
.btn-nav:hover i{ transform: translateX(4px); }
.btn-nav::before{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .65s var(--ease); pointer-events:none;
}
.btn-nav:hover::before{ left:130%; }

/* Ripple */
.btn{ position: relative; overflow: hidden; }
.btn .ripple{
  position:absolute; border-radius:50%; transform: scale(0);
  background: rgba(255,255,255,.5); animation: ripple .6s var(--ease);
  pointer-events:none;
}
.btn-line .ripple, .btn-ghost .ripple{ background: rgba(10,154,144,.18); }
@keyframes ripple{ to{ transform: scale(3); opacity:0; } }

/* ---------- Navbar: floating glassmorphism shell ---------- */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 16px 16px 0;
  transition: padding .5s var(--ease);
  pointer-events: none;
}
.site-nav.is-scrolled{ padding-top: 10px; }
.site-nav .nav-inner{ pointer-events:auto; }

.site-nav .nav-inner{
  position:relative; max-width: 1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap: 18px;
  padding: 14px 22px;
  background: rgba(14,21,38,.4);
  backdrop-filter: blur(var(--nav-blur, 14px)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--nav-blur, 14px)) saturate(1.4);
  border: 1px solid rgba(247,245,240,.14);
  border-radius: 999px;
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-nav .nav-inner::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 32%);
}
.site-nav.is-scrolled .nav-inner{
  background: rgba(248,250,251,.82);
  border-color: rgba(220,227,232,.85);
  box-shadow: 0 16px 36px -20px rgba(14,21,38,.25), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------- Logo: glow + shine sweep ---------- */
.brand{ display:flex; align-items:center; position:relative; overflow:hidden; border-radius:8px; padding:2px; flex-shrink:0; }
.brand .logo-mark{
  height: 30px; width:auto; display:block;
  filter: brightness(0) invert(1);
  transition: filter .35s var(--ease), transform .4s var(--ease);
}
.site-nav.is-scrolled .brand .logo-mark{ filter:none; }
.brand:hover .logo-mark{ transform: scale(1.06); filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(10,154,144,.65)); }
.site-nav.is-scrolled .brand:hover .logo-mark{ filter: drop-shadow(0 0 10px rgba(10,154,144,.45)); }
.brand::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events:none;
}
.brand:hover::after{ left:150%; }

/* ---------- Nav links + sliding hover pill ---------- */
.nav-links{ display:flex; align-items:center; gap: 0; position:relative; flex-shrink:0; }
.nav-pill{
  position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px;
  background: rgba(10,154,144,.16); opacity:0; pointer-events:none; z-index:0;
}
.site-nav.is-scrolled .nav-pill{ background: rgba(7,107,100,.1); }
.nav-links > li{ position: relative; z-index:1; }
.nav-links > li > a{
  display:flex; align-items:center; gap:.32em; position:relative; white-space:nowrap;
  padding: 10px 12px; font-size:.87rem; font-weight:500;
  color: rgba(247,245,240,.86); border-radius: 999px; transition: color .25s;
}
.site-nav.is-scrolled .nav-links > li > a{ color: var(--slate); }
.nav-links > li > a:hover{ color: var(--teal); }
.site-nav.is-scrolled .nav-links > li > a:hover{ color: var(--teal-deep); }
.nav-links > li > a i.chev{ font-size:.65em; transition: transform .3s var(--ease); }
.nav-links > li.mega-open > a{ color: var(--teal); }
.site-nav.is-scrolled .nav-links > li.mega-open > a{ color: var(--teal-deep); }
.nav-links > li.mega-open > a i.chev{ transform: rotate(180deg); }

/* ---------- Mega menu: premium glass panel ---------- */
.mega{
  position:absolute; top: calc(100% + 14px); left:50%;
  transform: translateX(-50%) translateY(10px) scale(.97);
  width: min(620px, 88vw);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  box-shadow: 0 34px 64px -22px rgba(14,21,38,.4), inset 0 1px 0 rgba(255,255,255,.7);
  padding: 24px;
  display:grid; grid-template-columns: 1.6fr 1fr; gap:22px;
  opacity:0; visibility:hidden; filter: blur(6px); pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease), visibility .3s;
}
.mega::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.mega.mega-end{ left:auto; right:-24px; transform: translateX(0) translateY(10px) scale(.97); }
.mega.mega-sm{ grid-template-columns: 1.3fr 1fr; width:min(480px, 88vw); }
.nav-links > li.mega-open .mega{
  opacity:1; visibility:visible; filter: blur(0); pointer-events:auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-links > li.mega-open .mega.mega-end{ transform: translateX(0) translateY(0) scale(1); }

.mega-links-label{
  display:block; font-family: var(--f-mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase;
  color: var(--slate-soft); margin:2px 0 10px 2px;
}
.mega-links{ display:flex; flex-direction:column; gap:4px; }
.mega-card{
  display:flex; align-items:center; gap:14px; padding: 11px 14px; border-radius:14px; color: var(--ink);
  opacity:0; transform: translateY(8px);
  transition: background .25s var(--ease), transform .25s var(--ease), opacity .35s var(--ease) .1s;
}
.nav-links > li.mega-open .mega-card{ opacity:1; transform:none; }
.mega-card:hover{ background: rgba(10,154,144,.08); transform: translateX(3px); }
.mega-icon{
  width:40px; height:40px; border-radius:11px; background: var(--paper-dim); color: var(--teal-deep);
  display:grid; place-items:center; font-size:1.02rem; flex-shrink:0;
  transition: background .25s, color .25s, transform .35s var(--ease);
}
.mega-card:hover .mega-icon{ background: var(--teal-deep); color:#fff; transform: scale(1.08) rotate(-5deg); }
.mega-text{ min-width:0; }
.mega-card-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mega-text strong{ display:block; font-size:.9rem; font-weight:600; }
.mega-text span{ display:block; font-size:.77rem; color: var(--slate-soft); margin-top:1px; }
.mega-badge{
  font-style:normal; font-family: var(--f-mono); font-size:.56rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; padding:2.5px 7px; border-radius:20px; line-height:1.5; flex-shrink:0; white-space:nowrap;
}
.mega-badge-solid{ background: linear-gradient(120deg, var(--teal), var(--teal-deep)); color:#fff; }
.mega-badge-outline{ background: rgba(10,154,144,.1); color: var(--teal-deep); border:1px solid rgba(10,154,144,.25); padding:1.5px 7px; }

.mega-links-tip{
  display:flex; align-items:flex-start; gap:10px; margin-top:8px; padding:12px 13px;
  border-radius:14px; background: rgba(10,154,144,.06); border:1px dashed rgba(10,154,144,.28);
  color: var(--slate-soft); font-size:.75rem; line-height:1.45;
}
.mega-links-tip i{ color: var(--teal-deep); font-size:.85rem; margin-top:1px; flex-shrink:0; }
.mega-links-tip strong{ color: var(--ink); font-weight:700; }

.mega-feature{
  position:relative; overflow:hidden; border-radius:16px; padding:24px 22px;
  background: linear-gradient(160deg, var(--ink), var(--teal-deep) 140%);
  display:flex; flex-direction:column; justify-content:flex-end; min-height:210px;
}
.mega-feature::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 85% 0%, rgba(10,154,144,.35), transparent 65%); pointer-events:none; }
.mega-feature::after{
  content:""; position:absolute; top:-30%; right:-20%; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(10,154,144,.5), transparent 70%); filter: blur(18px);
  opacity:.6; pointer-events:none; animation: megaGlowDrift 7s ease-in-out infinite;
}
@keyframes megaGlowDrift{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-10px, 12px) scale(1.12); }
}
.mega-highlights{ position:relative; z-index:1; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(247,245,240,.14); }
.mega-highlights-label{
  display:block; font-family: var(--f-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(247,245,240,.5); margin-bottom:9px;
}
.mega-highlights ul{ display:flex; flex-direction:column; gap:7px; }
.mega-highlights li{ display:flex; align-items:center; gap:9px; font-size:.77rem; color: rgba(247,245,240,.88); }
.mega-highlights li i{
  width:19px; height:19px; border-radius:6px; background: rgba(10,154,144,.24); color: var(--teal-soft);
  display:grid; place-items:center; font-size:.6rem; flex-shrink:0;
}
.mega-feature-icon{ position:relative; z-index:1; width:44px; height:44px; border-radius:13px; background: rgba(10,154,144,.2); color: var(--teal); display:grid; place-items:center; font-size:1.15rem; margin-bottom:14px; }
.mega-feature h4{ position:relative; z-index:1; color: var(--paper); font-size:1.02rem; margin:0 0 .35em; }
.mega-feature p{ position:relative; z-index:1; color: rgba(247,245,240,.65); font-size:.8rem; margin:0 0 1.1em; }
.mega-feature-cta{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5em; font-size:.83rem; font-weight:600; color: var(--teal-soft); }
.mega-feature-cta i{ transition: transform .3s var(--ease); }
.mega-feature-cta:hover i{ transform: translateX(4px); }

.nav-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-cta .btn-nav{ padding:.72em 1.25em; font-size:.85rem; white-space:nowrap; }
.nav-toggle{
  display:none; background:none; border:0; color: var(--paper); font-size:1.3rem; cursor:pointer;
  width:40px; height:40px; border-radius:50%; transition: background .25s, color .25s;
}
.nav-toggle:hover{ background: rgba(10,154,144,.14); color: var(--teal); }
.site-nav.is-scrolled .nav-toggle{ color: var(--ink); }
.site-nav.is-scrolled .nav-toggle:hover{ color: var(--teal-deep); }

@media (max-width: 1100px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
  .nav-cta .btn-nav{ display:none; }
}

/* ---------- Mobile drawer: frosted glass, staggered reveal, smooth accordion ---------- */
.mobile-drawer{
  position: fixed; inset:0; z-index: 1100;
  background: rgba(14,21,38,.94);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  transform: translateX(100%); transition: transform .5s var(--ease);
  overflow-y:auto; padding: 26px 24px 60px;
}
.mobile-drawer.open{ transform: translateX(0); }
.mobile-drawer .close-drawer{
  background:none; border:0; color:var(--paper); font-size:1.5rem; float:right;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  transition: background .25s, transform .3s var(--ease);
}
.mobile-drawer .close-drawer:hover{ background: rgba(10,154,144,.16); transform: rotate(90deg); }
.mobile-drawer ul{ margin-top: 56px; clear:both; }
.mobile-drawer > ul > li{
  border-bottom:1px solid var(--ink-line);
  opacity:0; transform: translateX(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mobile-drawer.open > ul > li{ opacity:1; transform:none; }
.mobile-drawer.open > ul > li:nth-child(1){ transition-delay:.08s; }
.mobile-drawer.open > ul > li:nth-child(2){ transition-delay:.13s; }
.mobile-drawer.open > ul > li:nth-child(3){ transition-delay:.18s; }
.mobile-drawer.open > ul > li:nth-child(4){ transition-delay:.23s; }
.mobile-drawer.open > ul > li:nth-child(5){ transition-delay:.28s; }
.mobile-drawer.open > ul > li:nth-child(6){ transition-delay:.33s; }
.mobile-drawer.open > ul > li:nth-child(7){ transition-delay:.38s; }
.mobile-drawer > ul > li > a{ display:flex; justify-content:space-between; align-items:center; padding: 16px 4px; color: var(--paper); font-family: var(--f-display); font-size:1.2rem; transition: color .25s; }
.mobile-drawer > ul > li > a i{ transition: transform .35s var(--ease), color .25s; font-size:.75em; color: rgba(247,245,240,.4); }
.mobile-drawer > ul > li.open > a{ color: var(--teal-soft); }
.mobile-drawer > ul > li.open > a i{ transform: rotate(180deg); color: var(--teal); }
.mobile-drawer .sub{ max-height:0; overflow:hidden; padding: 0 4px; transition: max-height .45s var(--ease), padding .3s var(--ease); }
.mobile-drawer li.open .sub{ max-height: 480px; padding: 4px 4px 16px 8px; }
.mobile-drawer .sub a{
  display:flex; align-items:center; gap:12px; padding: 9px 6px; color: rgba(247,245,240,.7); font-size:.92rem;
  border-radius:10px; transition: background .2s, color .2s, padding-left .2s;
}
.mobile-drawer .sub a i{ width:18px; text-align:center; color: var(--teal); font-size:.85em; flex-shrink:0; }
.mobile-drawer .sub a:hover{ background: rgba(10,154,144,.12); color: var(--paper); padding-left:10px; }

/* ---------- Hero ---------- */
.hero{
  position: relative; background: var(--ink) url("../images/hero-bg.jpg") center/cover no-repeat; color: var(--paper);
  padding: 190px 0 120px; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,21,38,.94), rgba(14,21,38,.9) 55%, rgba(14,21,38,.97)),
    radial-gradient(60% 50% at 82% 12%, rgba(10,154,144,.35), transparent 60%),
    radial-gradient(45% 40% at 8% 90%, rgba(13,48,90,.4), transparent 60%);
  pointer-events:none;
}
.hero-grid{ position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 40%, transparent 90%);
}
.hero-row{ position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center; }
@media (max-width: 992px){ .hero-row{ grid-template-columns: 1fr; } }
.hero h1{ color: var(--paper); }
.hero h1 em{ font-style: italic; color: var(--teal); }
.hero .lead{ max-width: 46ch; color: rgba(247,245,240,.72); }
.hero-actions{ display:flex; gap: 16px; margin-top: 2.2rem; flex-wrap:wrap; }
/* ---------- Hero stats: premium glass cards (same glassmorphism
   language as .float-card) instead of plain inline text ---------- */
.hero-trust{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 3.2rem; }
.hero-trust div{
  font-family: var(--f-mono); font-size:.72rem; color: rgba(247,245,240,.55); letter-spacing:.03em; line-height:1.35;
  background: rgba(22,32,58,.5); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--ink-line); border-radius: 14px; padding: 16px 14px;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.hero-trust div:hover{ transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 20px 40px -18px rgba(10,154,144,.35); }
.hero-trust strong{ display:block; font-family: var(--f-display); font-size:1.35rem; color: var(--paper); font-style:normal; margin-bottom:4px; }
@media (max-width: 640px){ .hero-trust{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Ledger panel — hero signature element */
.ledger-panel{
  background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-lift);
}
.ledger-panel .lp-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 18px; }
.ledger-panel .lp-head span{ font-family: var(--f-mono); font-size:.72rem; letter-spacing:.1em; color: rgba(247,245,240,.5); text-transform:uppercase; }
.lp-row{ display:flex; justify-content:space-between; align-items:center; padding: 13px 0; border-top: 1px dashed var(--ink-line); opacity:0; transform: translateY(8px); animation: lpIn .6s var(--ease) forwards; }
.lp-row:nth-child(2){ animation-delay:.15s; } .lp-row:nth-child(3){ animation-delay:.3s; } .lp-row:nth-child(4){ animation-delay:.45s; } .lp-row:nth-child(5){ animation-delay:.6s; }
@keyframes lpIn{ to{ opacity:1; transform:none; } }
.lp-row .lbl{ display:flex; align-items:center; gap:10px; font-size:.9rem; color: rgba(247,245,240,.8); }
.lp-row .lbl i{ width: 30px; height:30px; border-radius:8px; display:grid; place-items:center; background: rgba(10,154,144,.18); color: var(--teal-light); font-size:.85rem; }
.lp-row .val{ font-family: var(--f-mono); font-size:.95rem; color: var(--teal-soft); }
.lp-total{ display:flex; justify-content:space-between; margin-top:14px; padding-top:16px; border-top:1px solid var(--ink-line); }
.lp-total span:first-child{ font-family: var(--f-display); font-size:1rem; color: var(--paper); }
.lp-total .ledger-total{ font-size:1.3rem; color: var(--teal); }

/* ---------- Stats strip ---------- */
.stats-strip{ padding: 0; }
.stats-row{ display:grid; grid-template-columns: repeat(4,1fr); border:1px solid var(--rule); border-radius: var(--radius-lg); overflow:hidden; background: var(--white); box-shadow: var(--shadow-card); margin-top:-70px; position:relative; z-index:5; }
@media (max-width: 860px){ .stats-row{ grid-template-columns: repeat(2,1fr); } }
.stat-cell{ padding: 34px 22px; text-align:center; border-left: 1px solid var(--rule); }
.stat-cell:first-child{ border-left:0; }
.stat-num{ font-size: 2.3rem; color: var(--ink); font-weight:600; }
.stat-num .suffix{ color: var(--teal-deep); }
.stat-label{ font-size:.83rem; color: var(--slate-soft); margin-top:.4em; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 992px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 32px 28px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  position: relative;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.card .icon{ width: 48px; height:48px; border-radius:12px; display:grid; place-items:center; background: var(--paper-dim); color: var(--teal); font-size:1.15rem; margin-bottom: 20px; }
.card h3{ margin-bottom:.4em; }
.card p{ color: var(--slate-soft); font-size:.94rem; margin-bottom:.6em; }
.card .card-link{ font-size:.85rem; font-weight:600; color: var(--teal-deep); display:inline-flex; align-items:center; gap:.4em; }
.card .card-link i{ transition: transform .3s var(--ease); }
.card:hover .card-link i{ transform: translateX(4px); }
.card .num-mark{ position:absolute; top:24px; right:28px; font-family: var(--f-mono); font-size:.75rem; color: var(--rule); }

.card-dark{ background: var(--ink-soft); border-color: var(--ink-line); }
.card-dark h3{ color: var(--paper); }
.card-dark p{ color: rgba(247,245,240,.62); }

/* ---------- Process (only used where order is real) ---------- */
.process-track{ position:relative; }
.process-track .rail{ position:absolute; top:26px; left:0; right:0; height:1px; background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 20px); }
@media (max-width:860px){ .process-track .rail{ display:none; } }
.process-step{ position:relative; z-index:1; }
.process-step .step-idx{ font-family: var(--f-mono); font-size:.85rem; width:52px; height:52px; border-radius:50%; background: var(--ink); color: var(--teal); display:grid; place-items:center; margin-bottom: 20px; }

/* ---------- Testimonials ---------- */
.testi-card{ background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg); padding: 34px; }
.testi-card p{ font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); font-weight:400; }
.testi-who{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.testi-who img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testi-who strong{ display:block; font-size:.9rem; color:var(--ink); }
.testi-who span{ font-size:.78rem; color: var(--slate-soft); }

/* ---------- FAQ accordion ---------- */
.acc-item{ border-bottom: 1px solid var(--rule); }
.acc-q{ width:100%; text-align:left; background:none; border:0; padding: 22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; font-family: var(--f-display); font-size:1.05rem; color: var(--ink); }
.acc-q i{ transition: transform .35s var(--ease); color: var(--teal); flex-shrink:0; }
.acc-item.open .acc-q i{ transform: rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.acc-a p{ padding-bottom: 22px; color: var(--slate-soft); margin:0; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 64px 56px; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(50% 90% at 90% 10%, rgba(10,154,144,.22), transparent 60%); }
.cta-band .row{ position:relative; display:flex; justify-content:space-between; align-items:center; gap: 30px; flex-wrap:wrap; }
.cta-band h2{ color: var(--paper); margin-bottom:.2em; }
.cta-band p{ color: rgba(247,245,240,.65); margin:0; }

/* ---------- Footer ---------- */
/* Full footer design system lives in footer.css (loaded on every page
   right after this file) — the premium redesign owns far more surface
   (top CTA, 6-column grid, contact bar, bottom bar) than belongs here. */

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; background: linear-gradient(90deg, var(--navy-brand), var(--teal)); z-index:1200; width:0%; }

/* ---------- Sidebar (service pages) ---------- */
.svc-layout{ display:grid; grid-template-columns: 2.2fr 1fr; gap: 50px; align-items:start; }
@media (max-width: 900px){ .svc-layout{ grid-template-columns:1fr; } }
.svc-sidebar{ position: sticky; top: 110px; display:flex; flex-direction:column; gap:18px; }
.svc-sidebar .side-card{ background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg); padding:22px; }
.svc-sidebar .side-card h4{ font-size:.95rem; color:var(--ink); margin-bottom:12px; }
.svc-sidebar .side-links a{ display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--rule); font-size:.88rem; color: var(--slate); }
.svc-sidebar .side-links a:first-child{ border-top:0; }
.svc-sidebar .side-links a:hover{ color: var(--teal-deep); }

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 1140;
  width: 46px; height:46px; border-radius:50%; background: var(--ink); color: var(--paper); border:1px solid var(--ink-line);
  display:grid; place-items:center; font-size:1rem; cursor:pointer; box-shadow: var(--shadow-lift);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--teal); color: var(--ink); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position: fixed; left:24px; right:24px; bottom:24px; z-index: 1300; max-width: 620px; margin: 0 auto;
  background: var(--ink); color: rgba(247,245,240,.82); border:1px solid var(--ink-line); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-lift);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between;
  transform: translateY(140%); transition: transform .5s var(--ease);
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner p{ margin:0; font-size:.85rem; flex:1; min-width:220px; }
.cookie-banner a{ color: var(--teal-soft); text-decoration: underline; }
.cookie-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.cookie-actions a{ font-size:.82rem; white-space:nowrap; }

/* ---------- Active nav indicator: gradient underline + soft glow ---------- */
.nav-links > li.active > a{ position:relative; color: var(--teal); font-weight:600; }
.site-nav.is-scrolled .nav-links > li.active > a{ color: var(--teal-deep); }
.nav-links > li.active > a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:3px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--navy-brand), var(--teal));
  box-shadow: 0 0 10px rgba(10,154,144,.65);
}
.site-nav.is-scrolled .nav-links > li.active > a::after{ box-shadow: 0 0 8px rgba(7,107,100,.4); }

/* ---------- Magnetic button utility ---------- */
.magnetic{ will-change: transform; }

/* ---------- WhatsApp float ---------- */
.wa-float{
  position: fixed; left: 26px; bottom: 26px; z-index: 1150;
  width: 60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; font-size:1.6rem; box-shadow: 0 12px 28px -8px rgba(37,211,102,.6);
}
.wa-float::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; animation: pulse 2.2s infinite; z-index:-1; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.6;} 100%{ transform:scale(1.9); opacity:0; } }

/* ---------- Chatbot: premium AI-assistant widget ----------
   Glassmorphism panel, gradient-accent header, avatar-led message
   rows, animated typing/summary/success states, and a footer that
   swaps between the text-input row and post-completion actions.
   Kept in main.css (not a dedicated file) since the widget partial
   loads on every page and main.css is already the universal include. */

/* ---- Launcher: gradient FAB with a breathing glow + icon crossfade ---- */
.chat-launcher{
  position: fixed; right: 26px; bottom: 100px; z-index: 1150;
  width: 60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal-deep) 130%); color:#fff;
  display:grid; place-items:center; isolation:isolate;
  box-shadow: 0 12px 28px -8px rgba(7,107,100,.55);
  animation: chatLauncherBreathe 3.6s ease-in-out infinite;
  transition: transform .3s var(--ease);
}
.chat-launcher:hover{ transform: scale(1.07); }
@keyframes chatLauncherBreathe{
  0%,100%{ box-shadow: 0 12px 28px -8px rgba(7,107,100,.55), 0 0 0 0 rgba(10,154,144,.35); }
  50%{ box-shadow: 0 12px 28px -8px rgba(7,107,100,.55), 0 0 0 9px rgba(10,154,144,0); }
}
.chat-launcher .cl-ring{
  position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(10,154,144,.5);
  opacity:0; animation: clRingPulse 2.6s ease-out infinite; z-index:-1;
}
@keyframes clRingPulse{ 0%{ opacity:.55; transform:scale(1); } 100%{ opacity:0; transform:scale(1.5); } }
.chat-launcher .cl-icon{ position:absolute; inset:0; display:grid; place-items:center; font-size:1.35rem; transition: opacity .3s var(--ease), transform .35s var(--ease); }
.chat-launcher .cl-icon-close{ opacity:0; transform: scale(.5) rotate(-90deg); }
.chat-launcher[aria-expanded="true"] .cl-icon-open{ opacity:0; transform: scale(.5) rotate(90deg); }
.chat-launcher[aria-expanded="true"] .cl-icon-close{ opacity:1; transform:none; }

/* ---- Window shell: glass panel + gradient top accent ---- */
.chat-window{
  position: fixed; right: 26px; bottom: 172px; z-index:1150; width: 384px; max-width: calc(100vw - 32px);
  height: 560px; max-height: min(680px, 76vh); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  display:flex; flex-direction:column; overflow:hidden;
  background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transform: translateY(20px) scale(.96); opacity:0; pointer-events:none;
  transition: transform .38s var(--ease), opacity .32s var(--ease);
  border: 1px solid rgba(255,255,255,.6);
}
.chat-window::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background: linear-gradient(90deg, var(--navy-brand), var(--teal));
}
.chat-window.open{ transform:none; opacity:1; pointer-events:auto; }

/* ---- Header ---- */
.chat-head{
  position:relative; flex-shrink:0; background: linear-gradient(135deg, var(--ink), var(--navy-brand) 150%); color: var(--paper);
  padding: 16px 16px 16px 14px; display:flex; align-items:center; gap:12px;
}
.chat-head-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:1.02rem; color:#fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal)); box-shadow: 0 0 0 3px rgba(10,154,144,.22);
}
.chat-head-info{ flex:1; min-width:0; }
.chat-head-info strong{ display:block; font-family: var(--f-display); font-size:1rem; line-height:1.2; }
.chat-status{ display:flex; align-items:center; gap:6px; font-size:.74rem; color: rgba(247,245,240,.62); margin-top:2px; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:#3DDC97; box-shadow: 0 0 0 0 rgba(61,220,151,.6); animation: statusDotPulse 2s infinite; flex-shrink:0; }
@keyframes statusDotPulse{ 0%{ box-shadow: 0 0 0 0 rgba(61,220,151,.55); } 70%{ box-shadow: 0 0 0 6px rgba(61,220,151,0); } 100%{ box-shadow: 0 0 0 0 rgba(61,220,151,0); } }
.chat-head button{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color: var(--paper); width:30px; height:30px;
  border-radius:50%; font-size:.85rem; cursor:pointer; flex-shrink:0; display:grid; place-items:center;
  transition: background .25s, transform .25s var(--ease);
}
.chat-head button:hover{ background: rgba(255,255,255,.18); transform: scale(1.07); }

/* ---- Body: message list with a faint dot-grid texture ---- */
.chat-body{
  flex:1; overflow-y:auto; padding: 18px 16px; display:flex; flex-direction:column; gap:12px;
  background:
    radial-gradient(rgba(13,48,90,.05) 1px, transparent 1px) 0 0/16px 16px,
    var(--paper-dim);
  scroll-behavior:smooth;
}
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background: rgba(10,154,144,.3); border-radius:999px; }
.chat-body::-webkit-scrollbar-track{ background:transparent; }

.msg-row{ display:flex; align-items:flex-end; gap:8px; max-width:100%; animation: msgIn .38s var(--ease) both; }
.msg-row.user{ justify-content:flex-end; }
@keyframes msgIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.msg-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:.72rem; color:#fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
}
.msg{ max-width: 78%; padding: 11px 14px; border-radius: 16px; font-size:.87rem; line-height:1.48; box-shadow: 0 1px 2px rgba(14,21,38,.04); }
.msg.bot{ background: var(--white); border:1px solid var(--rule); border-bottom-left-radius:5px; color: var(--slate); }
.msg.user{ background: linear-gradient(135deg, var(--teal-deep), var(--teal)); color:#fff; border-bottom-right-radius:5px; }

.typing{ display:flex; gap:4px; align-items:center; padding: 13px 15px; background:var(--white); border:1px solid var(--rule); border-radius:16px; border-bottom-left-radius:5px; }
.typing span{ width:6px; height:6px; border-radius:50%; background: var(--teal-deep); opacity:.35; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; transform: translateY(0); } 40%{ opacity:1; transform: translateY(-2px); } }

/* ---- Quick-reply chips ---- */
.chat-options{ display:flex; flex-wrap:wrap; gap:8px; padding: 0 2px 0 34px; animation: msgIn .38s var(--ease) both; }
.chat-options button{
  border:1px solid var(--rule); background: var(--white); border-radius:999px; padding:8px 15px; font-size:.8rem; font-weight:500;
  color: var(--slate); cursor:pointer; transition: border-color .25s, color .25s, transform .2s var(--ease), background .25s, box-shadow .25s;
}
.chat-options button:hover{ border-color: var(--teal-deep); color: var(--teal-deep); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(7,107,100,.4); }
.chat-options button.opt-other{ border-style:dashed; color: var(--slate-soft); }
.chat-options button.opt-other:hover{ border-style:dashed; }
.chat-options.answered button{ opacity:.45; pointer-events:none; transform:none; box-shadow:none; }
.chat-options.answered button.chosen{ opacity:1; border-color: var(--teal-deep); color: var(--teal-deep); background: rgba(10,154,144,.08); }

/* ---- Recap / summary card ---- */
.chat-summary-card{
  max-width:88%; margin-left:34px; background: var(--white); border:1px solid var(--rule); border-radius:16px;
  padding: 14px 16px; box-shadow: 0 1px 2px rgba(14,21,38,.04); animation: msgIn .38s var(--ease) both;
}
.csc-title{ font-family: var(--f-display); font-size:.86rem; color: var(--ink); margin-bottom:8px; }
.csc-row{
  display:flex; align-items:baseline; gap:8px; font-size:.8rem; padding:4px 0; color: var(--slate);
  opacity:0; transform: translateX(-6px); animation: cscRowIn .4s var(--ease) forwards;
}
@keyframes cscRowIn{ to{ opacity:1; transform:none; } }
.csc-row i{ color: var(--teal-deep); font-size:.78rem; flex-shrink:0; }
.csc-row .csc-label{ color: var(--slate-soft); flex-shrink:0; }
.csc-row .csc-val{ font-weight:600; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Success card ---- */
.chat-success{
  text-align:center; padding: 16px 10px 6px; margin: 4px auto 0; max-width:92%;
  animation: msgIn .45s var(--ease) both;
}
.chat-success-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; color:#fff; font-size:1.35rem;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal)); animation: chatSuccessPop .5s var(--ease);
}
@keyframes chatSuccessPop{ from{ transform: scale(0); opacity:0; } to{ transform: scale(1); opacity:1; } }
.chat-success h4{ font-family: var(--f-display); font-size:1.05rem; margin:0 0 8px; color: var(--ink); }
.chat-success p{ font-size:.85rem; color: var(--slate-soft); line-height:1.55; margin:0; }

/* ---- Input row ---- */
.chat-input{ flex-shrink:0; display:flex; gap:9px; padding: 13px 14px; border-top:1px solid var(--rule); background: rgba(255,255,255,.9); }
.chat-input[hidden]{ display:none !important; }
.chat-input input{
  flex:1; min-width:0; border:1px solid var(--rule); background: var(--paper-dim); border-radius: 999px; padding: 11px 16px;
  font-family: var(--f-body); font-size:.87rem; color: var(--ink); transition: border-color .25s, box-shadow .25s, background .25s;
}
.chat-input input:focus{ outline:none; border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 3px rgba(10,154,144,.15); }
.chat-input input:disabled{ opacity:.55; cursor:not-allowed; }
.chat-input button{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; border:0; cursor:pointer; color:#fff; font-size:.92rem;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal-deep)); box-shadow: 0 8px 18px -8px rgba(7,107,100,.55);
  display:grid; place-items:center; transition: transform .25s var(--ease), box-shadow .25s, opacity .25s;
}
.chat-input button:hover:not(:disabled){ transform: scale(1.08) rotate(6deg); }
.chat-input button:active:not(:disabled){ transform: scale(.94); }
.chat-input button:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }

/* ---- Post-completion footer actions ---- */
.chat-footer-actions{ flex-shrink:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; border-top:1px solid var(--rule); background: rgba(255,255,255,.9); }
.chat-footer-actions[hidden]{ display:none !important; }
.cfa-btn{
  display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 10px; border-radius:12px;
  font-size:.78rem; font-weight:600; text-align:center; cursor:pointer; border:1px solid var(--rule); background: var(--white); color: var(--ink);
  transition: transform .2s var(--ease), border-color .25s, color .25s, box-shadow .25s, background .25s;
}
.cfa-btn i{ font-size:.82rem; }
.cfa-btn:hover{ transform: translateY(-2px); border-color: var(--teal-deep); color: var(--teal-deep); box-shadow: 0 10px 20px -12px rgba(7,107,100,.4); }
.cfa-btn.cfa-primary{ grid-column: 1 / -1; background: linear-gradient(135deg, var(--navy-brand), var(--teal-deep)); color:#fff; border-color:transparent; }
.cfa-btn.cfa-primary:hover{ color:#fff; transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 26px -12px rgba(7,107,100,.55); }
.cfa-btn.cfa-ghost{ background:none; color: var(--slate-soft); }

/* ---- Mobile: near-fullscreen takeover ----
   z-index raised above .cookie-banner (1300) — on a small screen a
   modal-like, focused conversation should take priority over the
   cookie notice rather than have the notice clip its bottom edge. */
@media (max-width: 560px){
  .chat-window{
    right:10px; left:10px; top:10px; bottom:10px; width:auto; max-width:none; height:auto; max-height:none;
    z-index:1310; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chat-launcher{ right:18px; bottom:88px; width:56px; height:56px; }
  .chat-footer-actions{ grid-template-columns:1fr 1fr; }
}

/* ---------- Shared: country select + time zone widgets ----------
   Used by every form with a Country field (Contact, Book Consultation,
   Technical Support, Schedule a Meeting — see assets/js/country-select.js).
   The trigger input itself is intentionally NOT styled here — each page
   lets it inherit that page's own input style (.fl-field input on
   Contact/Book Consultation/Technical Support, .country-search-input
   on Schedule a Meeting) so the field matches its surrounding form. */
.country-dropdown{
  position:absolute; left:0; right:0; top: calc(100% + 6px); z-index:20; max-height:260px; overflow-y:auto;
  background: var(--white); border:1px solid var(--rule); border-radius:12px; box-shadow: var(--shadow-lift); padding:6px;
}
.country-option{
  padding:9px 14px; border-radius:8px; font-size:.87rem; color: var(--ink); cursor:pointer; transition: background .15s, color .15s;
}
.country-option:hover, .country-option.active{ background: rgba(10,154,144,.1); color: var(--teal-deep); }
.country-option-empty{ color: var(--slate-soft); cursor:default; }
.country-option-empty:hover{ background:none; color: var(--slate-soft); }
.tz-detect-note{ font-size:.78rem; color: var(--slate-soft); margin:9px 0 0; }
.tz-toggle-btn{
  display:inline-flex; align-items:center; margin-top:8px; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(10,154,144,.35); background: rgba(10,154,144,.08); color: var(--teal-deep);
  font-family: var(--f-body); font-size:.78rem; font-weight:600; cursor:pointer; transition: background .2s, border-color .2s;
}
.tz-toggle-btn:hover{ background: rgba(10,154,144,.16); border-color: var(--teal-deep); }
.tz-toggle-btn[hidden]{ display:none !important; }

/* Dual time display (Your Time vs Tax Easy Hub Time) — used by Book
   Consultation and Schedule a Meeting, anywhere a client picks/sees an
   appointment time and needs both zones shown side by side. */
.dual-time-display{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding:16px 18px;
  background: var(--paper-dim); border:1px solid var(--rule); border-radius:12px;
}
.dual-time-display[hidden]{ display:none !important; }
.dtd-col{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.dtd-col:last-child{ text-align:right; }
.dtd-label{ font-size:.72rem; color: var(--slate-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtd-time{ font-family: var(--f-mono); font-size:1.02rem; font-weight:600; color: var(--ink); }
.dtd-divider{ color: var(--teal-deep); font-size:.9rem; flex-shrink:0; }

/* Confirmation-panel time tiles (Country / Your Time / Tax Easy Hub
   Time) — used on Book Consultation's and Schedule a Meeting's success
   panels. */
.confirm-time-display{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:600px; margin:0 auto 26px;
}
.ctd-col{
  flex:1 1 130px; background: var(--paper-dim); border:1px solid var(--rule); border-radius:12px; padding:14px 12px;
  display:flex; flex-direction:column; gap:5px;
}
.ctd-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color: var(--slate-soft); }
.ctd-value{ font-family: var(--f-mono); font-size:.92rem; font-weight:600; color: var(--ink); word-break: break-word; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-row{ padding: 150px 0 20px; background: var(--ink); }
.breadcrumb-row .bc{ display:flex; gap:8px; font-size:.82rem; color: rgba(247,245,240,.55); font-family: var(--f-mono); }
.breadcrumb-row .bc a:hover{ color: var(--teal); }
.page-hero{ background: var(--ink); color: var(--paper); padding: 30px 0 90px; }
.page-hero h1{ color: var(--paper); }
.page-hero .eyebrow{ color: var(--teal); }
.page-hero .eyebrow::before{ background: var(--teal); }
.page-hero .lead{ color: rgba(247,245,240,.68); }

/* ---------- utils ---------- */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.small{ font-size:.85rem; color: var(--slate-soft); }
.divider-sm{ width:60px; height:2px; background: var(--teal); margin: 18px 0 0; }
.chip{ display:inline-block; padding:6px 14px; border-radius:999px; background: var(--paper-dim); font-size:.78rem; color: var(--slate); border:1px solid var(--rule); }