/* ===========================================================================
   AC Accounting Solutions — public site
   Dark premium + gold, taken from the logo (#3A4145 charcoal / #C89211 gold).
   =========================================================================== */

:root {
  /* palette */
  --ink:        #1C2124;
  --ink-2:      #23282B;
  --charcoal:   #3A4145;
  --charcoal-2: #454D52;
  --gold:       #C89211;
  --gold-lt:    #E8BE55;
  --gold-soft:  #F0D48A;
  --gold-dk:    #8F6708;
  --cream:      #F6F2E9;

  --text:       rgba(246, 242, 233, .93);
  --text-dim:   rgba(246, 242, 233, .66);
  --text-faint: rgba(246, 242, 233, .42);
  --line:       rgba(200, 146, 17, .18);
  --line-soft:  rgba(246, 242, 233, .09);
  --glass:      rgba(255, 255, 255, .045);
  --glass-2:    rgba(255, 255, 255, .07);

  /* type */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* rhythm */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 11px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .25);
  --shadow: 0 18px 44px -14px rgba(0, 0, 0, .6);
  --shadow-gold: 0 18px 50px -18px rgba(200, 146, 17, .45);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  /* Belt-and-suspenders with body's overflow-x below: on iOS Safari, ANY
     horizontal overflow anywhere on the page lets the whole viewport pan
     sideways, and `position: fixed` elements pan right along with it — which
     is exactly what was cutting off the right edge of the chat panel (close
     button, send button) on a real iPhone even though the panel's own CSS
     was sized correctly. Locking horizontal scroll at the root, not just on
     body, closes that off regardless of which element caused the overflow. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0125rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

/* Fixed ambience layer: gold aurora + fine grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 42rem at 12% -8%, rgba(200, 146, 17, .16), transparent 62%),
    radial-gradient(46rem 38rem at 92% 8%, rgba(58, 65, 69, .85), transparent 60%),
    radial-gradient(52rem 40rem at 78% 92%, rgba(200, 146, 17, .09), transparent 65%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

img, svg { max-width: 100%; display: block; }

a { color: var(--gold-lt); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold-soft); }

::selection { background: rgba(200, 146, 17, .32); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); }
h2 { font-size: clamp(2rem, 4.1vw, 3.05rem); }
h3 { font-size: clamp(1.22rem, 2vw, 1.5rem); line-height: 1.24; }
h4 { font-size: 1.06rem; line-height: 1.35; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.gold-text {
  background: linear-gradient(104deg, var(--gold-soft) 0%, var(--gold) 42%, var(--gold-lt) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lead {
  font-size: clamp(1.06rem, 1.65vw, 1.22rem);
  color: var(--text-dim);
  line-height: 1.66;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .745rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 1.15rem;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow--center::before { display: none; }

/* --------------------------------------------------------------- structure */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: var(--wrap-narrow); }

section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: calc(var(--section-y) * .62) 0; }

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}

.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(clamp(17rem, 42%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* ----------------------------------------------------------------- buttons */
.btn {
  --btn-bg: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #1A1D1F;
  font-family: var(--font-body);
  font-size: .945rem;
  font-weight: 700;
  letter-spacing: .005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-gold);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), filter .3s;
  white-space: nowrap;
}

/* travelling shine */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .78s var(--ease);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -16px rgba(200, 146, 17, .62);
}
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(-1px) scale(.985); }

.btn--ghost {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: var(--glass-2);
  border-color: rgba(200, 146, 17, .45);
  color: var(--gold-soft);
  box-shadow: var(--shadow-sm);
}

.btn--sm { padding: .62rem 1.15rem; font-size: .86rem; }
.btn--lg { padding: 1.08rem 2.05rem; font-size: 1.01rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  font-weight: 600;
  font-size: .93rem;
  color: var(--gold-lt);
}
.link-arrow svg { transition: transform .35s var(--ease); width: 17px; height: 17px; }
.link-arrow:hover svg { transform: translateX(5px); }

/* ------------------------------------------------------------------ header */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt), var(--gold-soft));
  z-index: 200;
  pointer-events: none;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;
  transition: background .45s var(--ease), backdrop-filter .45s, box-shadow .45s,
              border-color .45s, padding .45s var(--ease);
  border-bottom: 1px solid transparent;
  padding: .85rem 0;
}

.site-header.is-stuck {
  background: rgba(28, 33, 36, .82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 34px -18px rgba(0, 0, 0, .8);
  padding: .45rem 0;
}

.site-header.is-hidden { transform: translateY(-105%); }

.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
  color: var(--text);
}
.brand:hover { color: var(--text); }
/* Logo carries the full company name + tagline on its own (see logo.svg) —
   the adjacent text was dropped as redundant, so the mark runs bigger here
   to fill that space instead of shrinking the header. */
.brand img { height: 68px; width: auto; transition: height .45s var(--ease); }
.is-stuck .brand img { height: 52px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
}

.nav-link {
  position: relative;
  display: block;
  padding: .55rem .82rem;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: .925rem;
  font-weight: 500;
  transition: color .28s, background .28s;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--text); background: var(--glass); }
.nav-link.is-active { color: var(--gold-lt); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: .18rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
}

/* services dropdown */
.has-menu { position: relative; }
.nav-caret { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.has-menu:hover .nav-caret, .has-menu.is-open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 21rem;
  padding: .6rem;
  border-radius: var(--radius);
  background: rgba(35, 40, 43, .96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .34s var(--ease), visibility .3s;
  list-style: none;
  margin: 0;
}
.has-menu:hover .dropdown,
.has-menu:focus-within .dropdown,
.has-menu.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown-item {
  display: block;
  padding: .68rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background .24s, transform .24s var(--ease);
}
.dropdown-item:hover { background: var(--glass-2); transform: translateX(3px); color: var(--text); }
.dropdown-item strong { display: block; font-size: .935rem; font-weight: 600; }
.dropdown-item span { font-size: .8rem; color: var(--text-faint); line-height: 1.45; display: block; }

.dropdown-foot {
  margin-top: .3rem;
  padding: .62rem .8rem;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem;
}

.nav-actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .48rem .82rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: .81rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: all .28s var(--ease);
}
.lang-switch:hover { border-color: var(--gold); color: var(--gold-lt); background: var(--glass); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 19px; height: 1.7px;
  background: var(--text);
  border-radius: 2px;
  position: relative;
  transition: transform .34s var(--ease), background .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px; height: 1.7px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .34s var(--ease), top .24s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgba(24, 28, 31, .97);
  backdrop-filter: blur(24px);
  padding: 6.5rem 1.5rem 2.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; }

.mobile-nav a {
  display: block;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
}
body.nav-open .mobile-nav a {
  animation: navIn .5s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.mobile-nav a.is-sub {
  font-family: var(--font-body);
  font-size: 1.02rem;
  padding-left: 1.1rem;
  color: var(--text-dim);
}
@keyframes navIn { to { opacity: 1; transform: none; } }

.mobile-nav-foot { margin-top: 2rem; display: grid; gap: .8rem; }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(100svh, 60rem);
  display: flex;
  align-items: center;
  padding: 9rem 0 5rem;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  will-change: transform;
}
.hero-orb--1 {
  width: 40rem; height: 40rem;
  top: -14rem; right: -10rem;
  background: radial-gradient(circle, rgba(200, 146, 17, .34), transparent 68%);
  animation: drift 22s ease-in-out infinite alternate;
}
.hero-orb--2 {
  width: 30rem; height: 30rem;
  bottom: -12rem; left: -8rem;
  background: radial-gradient(circle, rgba(232, 190, 85, .18), transparent 66%);
  animation: drift 28s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3.5rem, 3rem, 0) scale(1.13); }
}

/* faint ledger grid behind the hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246, 242, 233, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 242, 233, .034) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 62% at 40% 42%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 40% 42%, #000 20%, transparent 76%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .48rem 1rem .48rem .62rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.6rem;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-lt);
  box-shadow: 0 0 0 0 rgba(232, 190, 85, .75);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(232, 190, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 190, 85, 0); }
}

.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }

.hero-sub { max-width: 33rem; margin-bottom: 2.1rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.hero-trust {
  margin-top: 2.3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  font-size: .855rem;
  color: var(--text-faint);
}
.hero-trust-item { display: inline-flex; align-items: center; gap: .5rem; }
.hero-trust-item svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

/* floating glass stack on the right */
.hero-visual { position: relative; }

.hero-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
  border: 1px solid rgba(246, 242, 233, .11);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.hero-card--main { padding: 1.7rem; }

.hero-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.hero-card-title { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.hero-card-pill {
  font-size: .72rem;
  font-weight: 700;
  padding: .26rem .6rem;
  border-radius: 999px;
  background: rgba(200, 146, 17, .16);
  color: var(--gold-soft);
  border: 1px solid rgba(200, 146, 17, .3);
}

.hero-rows { display: grid; gap: .82rem; }
.hero-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hero-row-label { font-size: .885rem; color: var(--text-dim); }
.hero-row-value { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; }
.hero-row-value.is-gold { color: var(--gold-lt); }

.hero-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(246, 242, 233, .085);
  overflow: hidden;
  margin-top: .3rem;
}
.hero-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  width: 0;
  transition: width 1.5s var(--ease-out);
}
.is-inview .hero-bar > i { width: var(--w, 70%); }

.hero-float {
  position: absolute;
  padding: .85rem 1.05rem;
  border-radius: var(--radius);
  background: rgba(35, 40, 43, .9);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .85rem;
  will-change: transform;
}
.hero-float svg { width: 19px; height: 19px; color: var(--gold-lt); flex-shrink: 0; }
.hero-float--a { top: -1.6rem; left: -1.4rem; animation: bob 5.5s ease-in-out infinite; }
.hero-float--b { bottom: -1.5rem; right: -1.1rem; animation: bob 6.8s ease-in-out infinite .8s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

.scroll-hint {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-hint i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint i::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--gold-soft);
  animation: scrollDown 2.1s var(--ease) infinite;
}
@keyframes scrollDown {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}

/* --------------------------------------------------------------- marquee */
.marquee {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 1.1rem 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .16);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.marquee-item::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------- stats */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  padding: 2.1rem 1.5rem;
  background: rgba(35, 40, 43, .55);
  text-align: center;
  transition: background .4s var(--ease);
}
.stat:hover { background: rgba(200, 146, 17, .07); }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(160deg, var(--gold-soft), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stat-label {
  margin-top: .6rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ----------------------------------------------------------------- cards */
.card {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .016));
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .45s, box-shadow .5s var(--ease);
  isolation: isolate;
}

/* cursor-following gold glow */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 0%),
    rgba(200, 146, 17, .17),
    transparent 62%
  );
}
.card:hover { transform: translateY(-6px); border-color: rgba(200, 146, 17, .34); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }

.card-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(200, 146, 17, .22), rgba(200, 146, 17, .06));
  border: 1px solid rgba(200, 146, 17, .28);
  color: var(--gold-lt);
  margin-bottom: 1.2rem;
  transition: transform .5s var(--ease), background .4s;
}
.card-icon svg { width: 25px; height: 25px; }
.card:hover .card-icon { transform: scale(1.07) rotate(-4deg); background: linear-gradient(145deg, rgba(200, 146, 17, .32), rgba(200, 146, 17, .1)); }

.card h3 { margin-bottom: .55rem; }
.card p { color: var(--text-dim); font-size: .945rem; margin-bottom: 0; }
.card-foot { margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }

.card-index {
  position: absolute;
  top: 1.1rem; right: 1.3rem;
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(246, 242, 233, .045);
  pointer-events: none;
}

/* service card with item list */
.svc-card { display: flex; flex-direction: column; }
.svc-items { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .58rem; }
.svc-items li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--text-dim);
}
.svc-items svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: .28rem; }
.svc-card .card-foot { margin-top: auto; }

/* ---------------------------------------------------------------- process */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 27px; top: 1.6rem; bottom: 1.6rem;
  width: 2px;
  background: var(--line-soft);
}
.timeline::after {
  content: '';
  position: absolute;
  left: 27px; top: 1.6rem;
  width: 2px;
  height: var(--fill, 0%);
  background: linear-gradient(180deg, var(--gold-lt), var(--gold-dk));
  transition: height .5s linear;
  box-shadow: 0 0 14px rgba(200, 146, 17, .6);
}

.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
  align-items: start;
}
.tl-dot {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--text-faint);
  z-index: 1;
  transition: all .5s var(--ease);
}
.tl-step.is-inview .tl-dot {
  border-color: var(--gold);
  color: var(--gold-lt);
  background: linear-gradient(145deg, rgba(200, 146, 17, .2), var(--ink-2));
  box-shadow: 0 0 0 5px rgba(200, 146, 17, .1);
}
.tl-body h3 { margin-bottom: .4rem; }
.tl-body p { color: var(--text-dim); margin: 0; font-size: .95rem; }

/* -------------------------------------------------------------- why / bento */
.bento { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.bento .card:first-child { grid-column: span 2; }
@media (max-width: 720px) { .bento .card:first-child { grid-column: span 1; } }

/* ------------------------------------------------------------ testimonials */
.quote-card {
  padding: 1.9rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014));
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease), border-color .4s;
}
.quote-card:hover { transform: translateY(-5px); border-color: rgba(200, 146, 17, .3); }
.quote-mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .7;
  color: var(--gold);
  opacity: .38;
  margin-bottom: .5rem;
}
.quote-card blockquote {
  margin: 0 0 1.4rem;
  font-size: 1.005rem;
  line-height: 1.68;
  color: var(--text);
}
.quote-who { margin-top: auto; display: flex; align-items: center; gap: .82rem; }
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(200, 146, 17, .3), rgba(200, 146, 17, .08));
  border: 1px solid rgba(200, 146, 17, .3);
  font-size: .84rem;
  font-weight: 700;
  color: var(--gold-soft);
  flex-shrink: 0;
}
.quote-name { font-weight: 600; font-size: .93rem; }
.quote-role { font-size: .8rem; color: var(--text-faint); }
.stars { display: flex; gap: 2px; margin-bottom: .9rem; }
.stars svg { width: 15px; height: 15px; color: var(--gold-lt); }

/* -------------------------------------------------------------------- FAQ */
.faq-list { display: grid; gap: .7rem; }
.faq-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .028);
  overflow: hidden;
  transition: border-color .35s, background .35s;
}
.faq-item[open] { border-color: rgba(200, 146, 17, .3); background: rgba(200, 146, 17, .045); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  transition: color .3s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--gold-soft); }
.faq-item[open] .faq-q { color: var(--gold-lt); }

.faq-icon {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform .38s var(--ease), opacity .3s;
}
.faq-icon::before { top: 9.2px; left: 2px; width: 16px; height: 1.7px; }
.faq-icon::after  { left: 9.2px; top: 2px; height: 16px; width: 1.7px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }

.faq-a { padding: 0 1.35rem 1.3rem; color: var(--text-dim); font-size: .95rem; }
.faq-item[open] .faq-a { animation: faqIn .42s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- CTA band */
.cta-band {
  position: relative;
  padding: clamp(3rem, 6vw, 4.6rem);
  border-radius: clamp(var(--radius-lg), 3vw, 34px);
  background:
    radial-gradient(38rem 22rem at 82% 12%, rgba(200, 146, 17, .22), transparent 65%),
    linear-gradient(140deg, var(--charcoal), var(--ink-2) 70%);
  border: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246, 242, 233, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 242, 233, .03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { max-width: 30ch; margin-inline: auto; }
.cta-band .lead { max-width: 46ch; margin-inline: auto; margin-bottom: 2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; align-items: center; }
.cta-or { font-size: .9rem; color: var(--text-faint); }

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; gap: 1.05rem; }
.form-row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { display: block; }
.field-label {
  display: block;
  margin-bottom: .48rem;
  font-size: .845rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .015em;
}
.field-label .req { color: var(--gold); }
.field-label .opt { color: var(--text-faint); font-weight: 400; text-transform: lowercase; }

.input, .textarea, .select {
  width: 100%;
  padding: .88rem 1.05rem;
  border-radius: 13px;
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: inherit;
  font-size: .96rem;
  transition: border-color .3s, background .3s, box-shadow .3s;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 0, 0, .34);
  box-shadow: 0 0 0 4px rgba(200, 146, 17, .12);
}
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23C89211' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.7rem;
  cursor: pointer;
}
.select option { background: var(--charcoal); color: var(--text); }

.checkbox-row { display: flex; align-items: flex-start; gap: .68rem; font-size: .89rem; color: var(--text-dim); }
.checkbox-row input {
  appearance: none;
  width: 19px; height: 19px;
  flex-shrink: 0;
  margin-top: .12rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
  position: relative;
  transition: all .25s;
}
.checkbox-row input:checked { background: var(--gold); border-color: var(--gold); }
.checkbox-row input:checked::after {
  content: '';
  position: absolute;
  left: 5.6px; top: 2.4px;
  width: 5px; height: 9.5px;
  border: solid #1A1D1F;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-note { font-size: .82rem; color: var(--text-faint); }

.alert {
  padding: .95rem 1.15rem;
  border-radius: 13px;
  font-size: .92rem;
  display: flex;
  align-items: flex-start;
  gap: .68rem;
  border: 1px solid;
  animation: faqIn .4s var(--ease-out);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .15rem; }
.alert--ok { background: rgba(52, 168, 105, .12); border-color: rgba(52, 168, 105, .4); color: #86e0ab; }
.alert--err { background: rgba(220, 78, 65, .12); border-color: rgba(220, 78, 65, .4); color: #f0a49c; }

.btn[aria-busy='true'] { pointer-events: none; opacity: .72; }
.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(26, 29, 31, .3);
  border-top-color: #1A1D1F;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ contact info */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
@media (max-width: 940px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-panel {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018));
  border: 1px solid var(--line-soft);
}

.info-list { display: grid; gap: .3rem; list-style: none; padding: 0; margin: 0; }
.info-item {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding: .9rem;
  border-radius: 14px;
  transition: background .3s;
}
.info-item:hover { background: var(--glass); }
.info-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(200, 146, 17, .13);
  border: 1px solid rgba(200, 146, 17, .24);
  color: var(--gold-lt);
  flex-shrink: 0;
}
.info-ico svg { width: 18px; height: 18px; }
.info-k { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.info-v { font-weight: 600; font-size: .96rem; word-break: break-word; }
.info-v a { color: var(--text); }
.info-v a:hover { color: var(--gold-lt); }

.map-frame {
  margin-top: 1.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  aspect-ratio: 16 / 10;
  filter: grayscale(.35) contrast(1.05);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------- resources */
.res-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014));
  border: 1px solid var(--line-soft);
  transition: transform .48s var(--ease), border-color .4s;
  color: var(--text);
}
.res-card:hover { transform: translateY(-5px); border-color: rgba(200, 146, 17, .34); color: var(--text); }
.res-meta { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .8rem; }
.res-card h3 { font-size: 1.24rem; margin-bottom: .5rem; }
.res-card p { color: var(--text-dim); font-size: .92rem; }
.res-card .link-arrow { margin-top: auto; padding-top: 1.2rem; }

.tag {
  display: inline-block;
  padding: .2rem .58rem;
  border-radius: 6px;
  background: rgba(200, 146, 17, .13);
  border: 1px solid rgba(200, 146, 17, .22);
  color: var(--gold-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* long-form markdown body */
.prose { max-width: 44rem; font-size: 1.045rem; line-height: 1.78; }
.prose h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-top: 0; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.4em; padding-top: 1.1em; border-top: 1px solid var(--line-soft); }
.prose h3 { font-size: 1.26rem; margin-top: 2em; color: var(--gold-soft); }
.prose p, .prose li { color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .5rem; margin: 0 0 1.3em; }
.prose li::marker { color: var(--gold); }
.prose blockquote {
  margin: 1.8em 0;
  padding: .3em 0 .3em 1.3em;
  border-left: 2px solid var(--gold);
  color: var(--text);
  font-style: italic;
}
.prose code {
  background: rgba(0, 0, 0, .34);
  padding: .16em .42em;
  border-radius: 5px;
  font-size: .88em;
  color: var(--gold-soft);
}
.prose pre {
  background: rgba(0, 0, 0, .38);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .94rem; }
.prose th, .prose td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.prose th { color: var(--gold-soft); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.prose a { border-bottom: 1px solid rgba(200, 146, 17, .4); }
.prose hr { border: 0; height: 1px; background: var(--line-soft); margin: 2.4em 0; }

/* --------------------------------------------------------------- page head */
.page-hero {
  padding: 11rem 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -20rem; left: 50%;
  transform: translateX(-50%);
  width: 60rem; height: 40rem;
  background: radial-gradient(ellipse, rgba(200, 146, 17, .17), transparent 66%);
  filter: blur(48px);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { max-width: 24ch; }
.page-hero .lead { max-width: 52ch; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .83rem;
  color: var(--text-faint);
  margin-bottom: 1.4rem;
}
.breadcrumbs a { color: var(--text-faint); }
.breadcrumbs a:hover { color: var(--gold-lt); }
.breadcrumbs span { opacity: .5; }

/* -------------------------------------------------------- service detail */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}
@media (max-width: 980px) {
  /* minmax(0, 1fr), not a bare 1fr: a plain 1fr track still has an implicit
     min-width of "auto" (its content's natural width), so a child that
     doesn't want to shrink — a long link row inside .aside-card, here — can
     silently blow the column past the viewport's edge on mobile. */
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
}

.aside-card {
  position: sticky;
  top: 6.5rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
  border: 1px solid var(--line-soft);
}
.aside-card h4 { color: var(--gold-soft); font-family: var(--font-body); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1rem; }
.aside-links { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .2rem; }
.aside-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .68rem .8rem;
  border-radius: 11px;
  color: var(--text-dim);
  font-size: .92rem;
  transition: all .28s var(--ease);
}
.aside-links a:hover { background: var(--glass); color: var(--gold-lt); transform: translateX(3px); }

.item-block {
  padding: 1.75rem 0;
  border-top: 1px solid var(--line-soft);
}
.item-block:first-of-type { border-top: 0; padding-top: 0; }
.item-block h3 { display: flex; align-items: center; gap: .7rem; }
.item-block h3 .num {
  font-size: .8rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--gold);
  background: rgba(200, 146, 17, .13);
  border: 1px solid rgba(200, 146, 17, .25);
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.check-list { list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: .55rem; }
.check-list li { display: flex; gap: .68rem; align-items: flex-start; font-size: .935rem; color: var(--text-dim); }
.check-list svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: .26rem; }

.callout {
  margin-top: 1.6rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
  background: rgba(200, 146, 17, .07);
  border: 1px solid rgba(200, 146, 17, .22);
  border-left: 3px solid var(--gold);
  font-size: .95rem;
}
.callout strong { color: var(--gold-soft); }

/* ----------------------------------------------------------------- footer */
.site-footer {
  margin-top: var(--section-y);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .42));
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 86px; margin-bottom: 1.15rem; }
.footer-brand p { color: var(--text-faint); font-size: .9rem; max-width: 30ch; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: .76rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .58rem; }
.footer-col a, .footer-col span { color: var(--text-faint); font-size: .9rem; }
.footer-col a:hover { color: var(--gold-lt); }

.socials { display: flex; gap: .55rem; margin-top: 1.3rem; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  transition: all .3s var(--ease);
}
.socials a:hover { background: rgba(200, 146, 17, .16); border-color: var(--gold); color: var(--gold-lt); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--text-faint);
}
.footer-legal { font-size: .78rem; color: rgba(246, 242, 233, .3); max-width: 62ch; margin-top: 1rem; line-height: 1.6; }

/* ------------------------------------------------------------ chat widget */
.chat-launcher {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 160;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.25rem .8rem .85rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  color: #1A1D1F;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 40px -10px rgba(200, 146, 17, .65);
  transition: transform .4s var(--ease), box-shadow .4s, opacity .3s;
}
.chat-launcher:hover { transform: translateY(-3px) scale(1.02); }
.chat-launcher svg { width: 21px; height: 21px; }
.chat-launcher.is-hidden { opacity: 0; visibility: hidden; transform: scale(.85); }
.chat-launcher .badge-dot {
  position: absolute;
  top: 6px; right: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #34A869;
  border: 2px solid var(--ink);
}

/* Docked side panel, not a floating card. This replaces an earlier design
   that floated in the bottom-right corner with margins on every side — which
   meant its size depended on getting 100vw/100vh/100svh/100dvh math exactly
   right across browsers, and every one of those units had its own mobile
   quirks (see git history for the parade of bugs that came from it: cut-off
   buttons, dead space above the header, cramped composer...).
   Docking flush to the edge sidesteps the whole problem: `top:0; right:0;
   bottom:0` with no explicit height needs no viewport unit and no JS at all
   — the browser computes the exact on-screen height itself, correctly, on
   every device, every time. Width still needs a value, but getting *that*
   slightly wrong on a phone (where it naturally resolves to ~100%) only
   risks a sliver of imprecision on the unanchored left edge — never the
   close/send controls on the right, which stay pinned exactly on-screen via
   `right: 0`. */
.chat-panel {
  /* The generic `section { padding: var(--section-y) 0; }` rule further up
     this file (meant for ordinary page sections) was silently applying to
     this element too — it's a <section> tag in the HTML — adding up to
     8.5rem (136px) of padding above AND below the flex content on wide
     screens. That's likely the real reason the chat felt cramped through
     several earlier "fixes": those all corrected the outer panel's size,
     but never reset this inherited padding squeezing its actual content.
     Resetting it explicitly here (a class beats a bare tag selector) is the
     real fix. */
  padding: 0;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 161;
  width: min(26rem, 100vw);
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: rgba(24, 28, 31, .98);
  backdrop-filter: blur(22px);
  border-left: 1px solid var(--line);
  box-shadow: -28px 0 70px -24px rgba(0, 0, 0, .8);
  transform: translateX(100%);
  visibility: hidden;
  /* transition-property/duration/easing are declared exactly once, here,
     and never redeclared on .is-open below — only transition-delay changes.
     Redeclaring the whole `transition` shorthand on both the open and
     closed rules (so the visibility delay could differ) measurably delayed
     the *start* of the slide-in by ~500ms in testing: changing which
     transition list applies in the same style pass that also changes
     `transform` is an ambiguous case across browsers. Isolating the delay
     to its own property sidesteps that entirely. */
  transition: transform .42s var(--ease), visibility 0s linear .42s;
}
.chat-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(135deg, rgba(200, 146, 17, .13), transparent);
  flex-shrink: 0;
}
.chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--gold-lt), var(--gold-dk));
  color: #1A1D1F;
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
}
.chat-title { font-weight: 700; font-size: .96rem; line-height: 1.2; }
.chat-status { font-size: .76rem; color: var(--text-faint); display: flex; align-items: center; gap: .35rem; }
.chat-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #34A869; }
.chat-head-actions { margin-left: auto; display: flex; gap: .3rem; }
.chat-icon-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.chat-icon-btn:hover { background: var(--glass-2); color: var(--text); }
.chat-icon-btn svg { width: 17px; height: 17px; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 146, 17, .35) transparent;
}
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(200, 146, 17, .3); border-radius: 3px; }

.msg { max-width: 86%; animation: msgIn .42s var(--ease-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.msg-bubble {
  padding: .8rem 1rem;
  border-radius: 16px;
  font-size: .925rem;
  line-height: 1.62;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg--bot { align-self: flex-start; }
.msg--bot .msg-bubble {
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 5px;
}
.msg--user { align-self: flex-end; }
.msg--user .msg-bubble {
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: #1A1D1F;
  font-weight: 500;
  border-bottom-right-radius: 5px;
}
.msg-bubble strong { font-weight: 700; }
.msg-bubble ul { margin: .5em 0; padding-left: 1.15rem; }
.msg-sources { margin-top: .45rem; font-size: .74rem; color: var(--text-faint); padding-left: .2rem; }

.typing { display: flex; gap: 4px; padding: .95rem 1rem; }
.typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: typing 1.3s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .38; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.chat-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 .2rem; }
.chat-chip {
  padding: .48rem .82rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-family: inherit;
  font-size: .81rem;
  cursor: pointer;
  transition: all .28s var(--ease);
  text-align: left;
}
.chat-chip:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(200, 146, 17, .09); }

.chat-foot { padding: .8rem; border-top: 1px solid var(--line-soft); flex-shrink: 0; }
.chat-turnstile { display: flex; justify-content: center; margin-bottom: .6rem; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.chat-input {
  flex: 1;
  padding: .85rem .95rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: inherit;
  font-size: .94rem;
  resize: none;
  min-height: 3rem;
  max-height: 9rem;
  line-height: 1.5;
}
.chat-input:focus { outline: none; border-color: var(--gold); }
.chat-send {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold-dk));
  color: #1A1D1F;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), opacity .25s;
}
.chat-send:hover { transform: scale(1.06); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.chat-send svg { width: 18px; height: 18px; }
.chat-disclaimer { margin-top: .55rem; font-size: .7rem; color: rgba(246, 242, 233, .32); text-align: center; line-height: 1.45; }

.voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-bottom: .6rem;
  padding: .62rem;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--gold-soft);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .28s var(--ease);
}
/* chat.js hides this with the `hidden` attribute when Retell AI isn't
   configured, but `.voice-btn { display: flex }` above outranks the browser's
   default `[hidden] { display: none }` UA rule (a class beats an attribute
   selector), so the button stayed visible no matter what. Force it back off. */
.voice-btn[hidden] { display: none; }
.voice-btn:hover { background: rgba(200, 146, 17, .12); border-color: var(--gold); }
.voice-btn svg { width: 16px; height: 16px; }
.voice-btn.is-live { background: rgba(220, 78, 65, .14); border-color: rgba(220, 78, 65, .5); color: #f0a49c; }
.voice-btn.is-live svg { animation: pulse2 1.4s ease-in-out infinite; }
@keyframes pulse2 { 50% { opacity: .45; } }

/* ---------------------------------------------------------------- reveals */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s var(--ease-out) var(--reveal-delay, 0ms),
    transform .9s var(--ease-out) var(--reveal-delay, 0ms),
    filter .8s var(--ease-out) var(--reveal-delay, 0ms);
  filter: blur(5px);
  will-change: opacity, transform;
}
[data-reveal].is-inview { opacity: 1; transform: none; filter: blur(0); }

[data-reveal='left']  { transform: translateX(-34px); }
[data-reveal='right'] { transform: translateX(34px); }
[data-reveal='scale'] { transform: scale(.94); }
[data-reveal='mask']  { transform: translateY(105%); filter: none; opacity: 1; }
[data-reveal='mask'].is-inview { transform: none; }

/* headline words that rise into place */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.75em) rotate(2.5deg);
  transition: opacity .78s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: calc(var(--w-i, 0) * 62ms);
}
.is-inview .split-word { opacity: 1; transform: none; }

/* -------------------------------------------------------------- 404 / 500 */
.error-page {
  min-height: 74svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 9rem 0 4rem;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 13rem);
  line-height: .84;
  font-weight: 600;
  background: linear-gradient(160deg, var(--gold-soft), rgba(200, 146, 17, .18));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: .35em;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { max-width: 32rem; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero { min-height: auto; padding-top: 8rem; }
  .scroll-hint { display: none; }
}

/* .nav-actions never wraps (flex-shrink: 0 on purpose, see its rule above),
   so once the lang switch + "Book a consultation" text + hamburger no longer
   fit next to the logo, the CTA button silently paints past the right edge
   of the screen instead of wrapping — invisible in document.scrollWidth
   since the header is `position: fixed`, but very visible to an actual
   phone user. Measured the real numbers: overflow starts under ~420px,
   which covers most current phones (390–428px). The mobile drawer already
   repeats this same CTA as a full-width button, so hiding the cramped
   top-bar copy here costs nothing. */
@media (max-width: 480px) {
  .nav-cta { display: none; }
}

@media (max-width: 640px) {
  :root { --radius-lg: 20px; }
  body { font-size: .98rem; }
  .brand img { height: 56px; }
  .hero-float { display: none; }
  .chat-launcher span { display: none; }
  .chat-launcher { padding: .95rem; }
  .lang-switch span { display: none; }
  .timeline::before, .timeline::after { left: 21px; }
  .tl-step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .tl-dot { width: 44px; height: 44px; font-size: 1.05rem; }
}

/* On a phone in landscape (or any very short window) the header, voice button,
   input and disclaimer alone can eat most of the available height. Shrink
   every fixed-size chrome piece so the message list keeps real estate. */
@media (max-height: 460px) {
  .chat-head { padding: .5rem .9rem; }
  .chat-avatar { width: 30px; height: 30px; font-size: .78rem; }
  .chat-title { font-size: .84rem; }
  .chat-status { font-size: .68rem; }
  .chat-body { padding: .7rem 1.1rem; gap: .55rem; }
  .voice-btn { padding: .4rem; margin-bottom: .4rem; font-size: .78rem; }
  .chat-foot { padding: .5rem .8rem; }
  .chat-input { min-height: 2.2rem; padding: .5rem .8rem; }
  .chat-send { width: 34px; height: 34px; }
  .chat-disclaimer { margin-top: .3rem; font-size: .62rem; }
}

/* -------------------------------------------------------- accessibility */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], .split-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-orb, .marquee-track { animation: none !important; }
}

@media print {
  .site-header, .chat-launcher, .chat-panel, .scroll-progress, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}