.html-page-header{
	scroll-behavior: smooth; font-size: max(100%, min(0.8334vw, 1.5vh)); -webkit-text-size-adjust: 100%;
}

.html-wrapper{
  /* brand palette */
  --navy:    #091734;
  --navy2:   #13254a;
  --cr:      #af2026;
  --cr2:     #8f2b2f;
  --blue:    #68738f;
  --blue2:   #565f79;
  --blue-lt: #dfe2ea;

  /* neutrals */
  --ivory:   #ffffff;
  --cream:   #f2f2f2;
  --sand:    #e4e5e8;
  --white:   #ffffff;

  --text:    #1a1c22;
  --text2:   #565a63;
  --muted:   #6b6f78;   /* 4.9:1 on white */
  --kicker:  #5b6788;   /* eyebrow labels on light surfaces, 5:1+ */

  --line:    rgba(9,23,52,0.10);
  --line-2:  rgba(9,23,52,0.16);
  --line-w:  rgba(255,255,255,0.14);

  --f:       'Inter', system-ui, sans-serif;

  /* paragraph type scale */
  --text-xl: 1.25rem;  --lh-xl: 1.875rem;
  --text-lg: 1.125rem;  --lh-lg: 1.75rem;
  --text-md: 1rem;  --lh-md: 1.5rem;
  --text-sm: 0.875rem;  --lh-sm: 1.25rem;
  --text-xs: 0.75rem;  --lh-xs: 1.125rem;

  /* headline scale (tracking -2%) */
  --h-2xl: 4.5rem; --lh-h2xl: 5.625rem;
  --h-xl:  3.75rem; --lh-hxl:  4.5rem;
  --h-lg:  3rem; --lh-hlg:  3.75rem;
  --h-md:  2.25rem; --lh-hmd:  2.75rem;
  --h-sm:  1.875rem; --lh-hsm:  2.375rem;
  --h-xs:  1.5rem; --lh-hxs:  2rem;
  --h-track: -0.02em;

  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo out — reveals, load choreography */
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --ring:    0 0 0 0.1875rem rgba(175,32,38,0.35);

  /* elevation scale */
  --shadow-sm: 0 1px 2px rgba(9,23,52,0.06), 0 1px 1px rgba(9,23,52,0.04);
  --shadow-md: 0 0.25rem 0.5rem -0.125rem rgba(9,23,52,0.08), 0 0.75rem 1.5rem -0.5rem rgba(9,23,52,0.10);
  --shadow-lg: 0 0.5rem 1rem -0.25rem rgba(9,23,52,0.10), 0 1.75rem 3.5rem -1rem rgba(9,23,52,0.22);
  --maxw:    77.5rem;
  --pad:     clamp(1.5rem, 6vw, 6rem);
}

/* fluid root size: 16px up to 1920px wide, then scales with the viewport
   (≈32px at 3840x2160 / 4K, ≈43px at 5120x2880 / 5K) so every rem-based size follows;
   capped by viewport height (1.5vh) so ultrawide screens don't blow the hero past the fold */

body .html-wrapper {
  font-family: var(--f);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 400;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* selection */
::selection { background: var(--navy); color: #fff; }

/* ─── reusable atoms ─── */
.w { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.kicker {
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--kicker);
  display: inline-flex; align-items: center;
}
.kicker.center { justify-content: center; }
.col-ico { font-size: 1rem; }
.kicker.dim { color: #aab4cc; }
.section.dark .kicker, .hero .kicker { color: #aab4cc; }

h1, h2, h3 { font-weight: 300; letter-spacing: var(--h-track); color: var(--navy); }
h1 strong, h2 strong, h3 strong { font-weight: 500; }
em { font-style: italic; }

/* Headline lg (48/60) — section titles */
h2 {
  font-size: clamp(2rem, 3.6vw, var(--h-lg));
  line-height: 1.2;
}
h2.on-dark { color: var(--white); }

.html-wrapper .section { padding: clamp(4.5rem, 11vw, 8.25rem) var(--pad); }
.html-wrapper .section.cream { background: var(--cream); }
.html-wrapper .section.dark  { background: var(--navy); color: rgba(255,255,255,0.6); }

/* buttons */
.html-wrapper .btn {
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  padding: 0 1.875rem; height: 3.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
  border: 0.0625rem solid transparent; position: relative; white-space: nowrap;
}
.html-wrapper .btn:hover { transform: translateY(-0.125rem); }
.html-wrapper .btn-navy { background: var(--navy); color: #fff; }
.html-wrapper .btn-navy:hover { background: var(--navy2); }
.html-wrapper .btn-cr { background: var(--cr); color: #fff; }
.html-wrapper .btn-cr:hover { background: var(--cr2); }
.html-wrapper .btn-outline { border-color: var(--line-2); color: var(--navy); background: transparent; }
.html-wrapper .btn-outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.html-wrapper .btn-outline-w { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); }
.html-wrapper .btn-outline-w:hover { border-color: #fff; background: rgba(255,255,255,0.06); color: #fff; }

/* text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; color: var(--navy);
  padding-bottom: 0.375rem; border-bottom: 0.0625rem solid var(--line-2);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tlink .arr { transition: transform .35s var(--ease); }
.tlink:hover { color: var(--cr); border-color: var(--cr); }
.tlink:hover .arr { transform: translateX(0.375rem); }
.tlink.light { color: #fff; border-color: rgba(255,255,255,0.25); }
.tlink.light:hover { color: #fff; border-color: #fff; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(1.875rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-2.625rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-r { opacity: 0; transform: translateX(2.625rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }
.reveal.d1, .reveal-l.d1, .reveal-r.d1 { transition-delay: .1s; }
.reveal.d2, .reveal-l.d2, .reveal-r.d2 { transition-delay: .2s; }
.reveal.d3, .reveal-l.d3, .reveal-r.d3 { transition-delay: .3s; }

/* image curtain-wipe reveal — cover panel slides away (keeps element visible to IntersectionObserver) */
.img-reveal { position: relative; }
.img-reveal::after {
  content: ''; position: absolute; inset: 0; z-index: 4; background: var(--navy);
  transform: translateX(0); transition: transform 1.15s var(--ease); pointer-events: none;
}
.img-reveal.in::after { transform: translateX(101%); }
/* slow zoom of the inner surface once revealed */
.img-zoom { transform: scale(1.12); transition: transform 2.4s var(--ease); }
.in .img-zoom, .img-zoom.in { transform: scale(1); }

/* floating hero glow */
.hero-glow {
  position: absolute; z-index: 1; top: -10%; right: 4%;
  width: 60vw; height: 60vw; max-width: 51.25rem; max-height: 51.25rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(104,115,143,0.28) 0%, rgba(104,115,143,0) 62%);
  filter: blur(0.625rem);
  animation: floatGlow 16s var(--ease-io) infinite;
}
@keyframes floatGlow {
  0%,100% { transform: translate(0,0) scale(1); opacity: .9; }
  50%     { transform: translate(-3%, 4%) scale(1.08); opacity: 1; }
}

/* button shine sweep */
.btn { overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* animated count numbers avoid layout shift */
.count { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; transition: none; }
  .faq-list .faq-item, .faq-ans { opacity: 1; transform: none; transition: none; }
  .img-reveal::after { display: none; }
  .img-zoom { transform: none; }
  .hero-glow, .btn::after { animation: none; }
  html { scroll-behavior: auto; }
}
/* ══════════ HERO ══════════ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: 8.25rem var(--pad) 5.5rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: -16% 0 0; z-index: 0; will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  background-size: cover; background-position: center;
}
.hero-bg--stone { background-image: url('../assets/images/hero-stone-house.jpg'); }
/* navy tint over the photo */
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 12%, rgba(27,51,88,0.30) 0%, rgba(9,23,52,0.74) 55%, rgba(6,17,32,0.92) 100%);
}
/* left-side gradient for text legibility */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,17,32,0.94) 0%, rgba(6,17,32,0.62) 46%, rgba(6,17,32,0.18) 100%);
}
.hero-inner { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.hero-l-in { max-width: 45rem; }

.hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 6vw, var(--h-2xl));
  line-height: 1.1; letter-spacing: var(--h-track);
  font-weight: 200;
  margin: 1.625rem 0 1.375rem;
}
.hero h1 strong { font-weight: 500; }
.hero h1 em { font-style: italic; font-weight: 300; color: #aab4cc; }

.hero-sub {
  font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 400;
  color: rgba(255,255,255,0.72); max-width: 35rem; margin-bottom: 2.75rem;
}

/* proof strip */
.proof-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 0.0625rem solid rgba(255,255,255,0.14);
  margin: 0 0 2.75rem; max-width: 40rem;
}
.proof-item { flex: 1; min-width: 7.5rem; padding: 1.5rem 1.625rem 1.5rem 0; }
.proof-val {
  display: block; font-size: 2.125rem; font-weight: 300; letter-spacing: -0.02em;
  color: #fff; line-height: 1; margin-bottom: 0.5rem;
}
.proof-val span { color: var(--cr); font-weight: 400; }
.proof-lbl {
  font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.hero-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* ask tooltip */
.ask-wrap { position: relative; display: inline-flex; }
.ask-tooltip {
  position: absolute; top: calc(100% + 0.875rem); left: 0; width: 18.75rem;
  background: rgba(8,17,32,0.96); backdrop-filter: blur(0.5rem);
  border: 0.0625rem solid rgba(255,255,255,0.12); border-top: 0.125rem solid var(--cr);
  padding: 1.375rem 1.5rem; opacity: 0; pointer-events: none;
  transform: translateY(0.5rem); transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 50;
}
.ask-wrap:hover .ask-tooltip, .ask-wrap:focus-within .ask-tooltip { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ask-tooltip-title {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin-bottom: 0.875rem;
}
.ask-tooltip-list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.ask-tooltip-list li {
  font-size: var(--text-md); line-height: var(--lh-md); color: rgba(255,255,255,0.62);
  display: flex; align-items: flex-start; gap: 0.625rem;
}
.ask-tooltip-list li::before {
  content: ''; flex-shrink: 0; width: 0.25rem; height: 0.25rem; background: var(--cr);
  border-radius: 50%; margin-top: 0.4375rem;
}

/* ══════════ INTENT SPLIT ══════════ */
.intent { background: var(--cream); }
.intent-head { padding: clamp(4.5rem,10vw,7.5rem) var(--pad) clamp(2.5rem,6vw,4rem); max-width: var(--maxw); margin: 0 auto; }
.intent-head h2 { margin-top: 1.25rem; max-width: 48.75rem; }
.intent-in {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: var(--maxw); margin: 0 auto; gap: 0.0625rem; background: var(--line);
}
.icol { position: relative; overflow: hidden; padding: clamp(2.5rem,5vw,4.5rem) clamp(2rem,4vw,4rem) clamp(3.25rem,6vw,5rem); }
.icol-sell { background: var(--navy); }
.icol-buy  { background: var(--ivory); }
.icol-ghost {
  position: absolute; right: -0.5rem; bottom: -2.125rem; font-size: clamp(7.5rem,16vw,12.5rem);
  font-weight: 600; letter-spacing: -0.05em; line-height: 1; pointer-events: none; user-select: none;
}
.icol-sell .icol-ghost { color: rgba(255,255,255,0.035); }
.icol-buy  .icol-ghost { color: rgba(12,28,54,0.04); }
.icol-buy::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.1875rem; background: var(--cr); }

.col-tag {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 1.625rem; display: inline-flex; align-items: center; gap: 0.625rem;
}
.icol-sell .col-tag { color: rgba(255,255,255,0.5); }
.icol-buy  .col-tag { color: var(--cr); }
.col-head { font-size: clamp(1.5rem, 2.4vw, var(--h-sm)); line-height: 1.27; letter-spacing: var(--h-track); font-weight: 300; margin-bottom: 1.125rem; }
.icol-sell .col-head { color: #fff; }
.icol-buy  .col-head { color: var(--navy); }
.col-body { font-size: var(--text-md); line-height: var(--lh-md); font-weight: 400; margin-bottom: 2.125rem; max-width: 27.5rem; }
.icol-sell .col-body { color: rgba(255,255,255,0.6); }
.icol-buy  .col-body { color: var(--text2); }
.col-features { list-style: none; margin-bottom: 2.625rem; display: grid; gap: 0.875rem; }
.col-features li {
  font-size: var(--text-md); line-height: var(--lh-md); display: flex; align-items: center; gap: 0.875rem;
  padding-bottom: 0.875rem; border-bottom: 0.0625rem solid;
}
.icol-sell .col-features li { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.08); }
.icol-buy  .col-features li { color: var(--text); border-color: var(--line); }
.feat-num { font-size: var(--text-sm); letter-spacing: 0.1em; font-weight: 500; opacity: 0.55; min-width: 1.375rem; }
.icol-sell .feat-num { color: var(--cr); opacity: 1; }
.icol-buy  .feat-num { color: var(--blue); opacity: 1; }

/* ══════════ FEATURED PROPERTY ══════════ */
.prop-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.prop-frame { position: relative; }
.prop-card { position: relative; overflow: hidden; background: var(--sand); border: 0.0625rem solid var(--line); }
.prop-img { padding-top: 118%; position: relative; overflow: hidden;
  background: linear-gradient(155deg, #e4e5e8 0%, #cfd2d9 60%, #b9bdc7 100%); }
.prop-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.prop-badge {
  position: absolute; top: 1.375rem; left: 1.375rem; z-index: 2;
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--cr); color: #fff; padding: 0.5rem 1rem;
}
.prop-meta {
  position: absolute; left: 1.375rem; right: 1.375rem; bottom: 1.375rem; z-index: 2;
  background: rgba(12,28,54,0.9); backdrop-filter: blur(0.5rem);
  padding: 1.25rem 1.375rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.prop-price { font-size: 1.5rem; font-weight: 400; color: #fff; letter-spacing: -0.01em; }
.prop-addr { font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.prop-copy h2 { margin: 1.375rem 0 1.25rem; }
.prop-copy-body { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 400; color: var(--text2); margin-bottom: 2.25rem; }
.prop-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* ══════════ AUTHORITY ══════════ */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,7vw,6rem); align-items: center; }
.auth-copy h2 { margin: 1.375rem 0 1.625rem; }
.auth-body { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 400; color: var(--text2); margin-bottom: 2.125rem; }
.auth-quote {
  position: relative; padding: 0.5rem 0 0.5rem 1.75rem; border-left: 0.125rem solid var(--cr);
  font-size: clamp(1.1875rem,1.8vw,1.4375rem); font-weight: 300; font-style: italic;
  color: var(--navy); line-height: 1.5;
}
.auth-quote cite {
  display: block; font-size: var(--text-sm); font-style: normal; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 1rem;
}
.auth-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.0625rem; background: var(--line); border: 0.0625rem solid var(--line); }
.astat { background: var(--ivory); padding: clamp(1.75rem,3vw,2.5rem) clamp(1.375rem,2.4vw,2rem); transition: background .4s var(--ease); }
.astat:hover { background: var(--white); }
.astat-v { display: block; font-size: clamp(2.125rem,3.4vw,2.875rem); font-weight: 300; letter-spacing: -0.03em; color: var(--navy); line-height: 1; margin-bottom: 0.75rem; }
.astat-v span { color: var(--cr); }
.astat-v-text { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.astat-l { font-size: var(--text-sm); color: var(--text2); font-weight: 400; line-height: 1.45; }

/* ══════════ PROCESS ══════════ */
.proc-head { max-width: 40rem; }
.proc-head h2 { margin: 1.25rem 0 1.125rem; }
.proc-head p { color: rgba(255,255,255,0.55); font-size: var(--text-md); line-height: var(--lh-md); font-weight: 400; }
.proc-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.125rem; margin-top: clamp(3rem,6vw,4.5rem); }
.pstep {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.035);
  border: 0.0625rem solid rgba(255,255,255,0.08);
  padding: clamp(1.875rem,3vw,2.5rem) clamp(1.5rem,2.4vw,2rem) clamp(1.75rem,3vw,2.25rem);
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.pstep::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.125rem;
  background: #8a97ba; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.pstep:hover { transform: translateY(-0.375rem); background: rgba(255,255,255,0.06); border-color: rgba(138,151,186,0.45); }
.pstep:hover::before { transform: scaleX(1); }
.pstep-n {
  display: block; font-size: 2.75rem; font-weight: 200; letter-spacing: -0.03em;
  color: rgba(255,255,255,0.16); line-height: 1; margin-bottom: 1.625rem;
  transition: color .45s var(--ease);
}
.pstep:hover .pstep-n { color: #8a97ba; }
.pstep-title { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 0.875rem; }
.pstep-body { font-size: var(--text-md); line-height: var(--lh-md); font-weight: 300; color: rgba(255,255,255,0.55); }

/* ══════════ TESTIMONIAL ══════════ */
.testi { text-align: center; }
.testi-carousel { position: relative; max-width: 64rem; margin: 2.125rem auto 0; }
.testi-viewport { overflow: hidden; }
.testi-track { display: flex; transform: translateX(calc(var(--slide, 0) * -100%)); transition: transform .7s var(--ease); }
.testi-slide { flex: 0 0 100%; margin: 0; padding: 0 clamp(0.5rem,3vw,2rem); }
.testi-mark { font-size: 4rem; line-height: 0.5; color: #8a97ba; font-weight: 500; display: block; margin-bottom: 0.5rem; height: 1.875rem; }
.testi-q { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; font-style: italic; color: var(--navy); margin-bottom: 1.75rem; }
.testi-by { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); }
.testi-dots { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; }
.testi-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--line-2); transition: background .3s var(--ease), transform .3s var(--ease); }
.testi-dot { position: relative; }
.testi-dot::before { content: ''; position: absolute; inset: -0.875rem; }
.testi-dot:hover { background: var(--blue); }
.testi-dot.is-active { background: #8a97ba; transform: scale(1.35); }

/* ══════════ FAQ ══════════ */
.faq-light { max-width: 60rem; margin: 0 auto; }
.faq-light h2 { margin: 1.25rem 0 0.75rem; font-size: clamp(1.625rem, 5vw, 2.75rem); text-wrap: balance; max-width: none; }
.faq-intro { font-size: var(--text-md); line-height: var(--lh-md); font-weight: 400; color: var(--text2); margin-bottom: 3rem; }
.faq-list {
  list-style: none; background: var(--white);
  border: 0.0625rem solid var(--line); box-shadow: 0 1.5rem 3.75rem -2.125rem rgba(9,23,52,0.30);
  padding: 0.25rem clamp(1.5rem,3vw,2.75rem);
}
.faq-list .faq-item { opacity: 0; transform: translateY(1rem); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.faq-list.in .faq-item { opacity: 1; transform: none; }
.faq-list.in .faq-item:nth-child(1) { transition-delay: .12s; }
.faq-list.in .faq-item:nth-child(2) { transition-delay: .22s; }
.faq-list.in .faq-item:nth-child(3) { transition-delay: .32s; }
.faq-item { border-bottom: 0.0625rem solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-btn {
  width: 100%; background: none; border: none; padding: 1.625rem 0; text-align: left;
  font-family: var(--f); font-size: clamp(1rem,1.5vw,1.1875rem); font-weight: 400; color: var(--navy);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  line-height: 1.4; transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.faq-btn:hover { color: var(--cr); padding-left: 0.375rem; }
.faq-ico { flex-shrink: 0; width: 1.5rem; height: 1.5rem; position: relative; }
.faq-ico::before, .faq-ico::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--muted); transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq-ico::before { width: 1rem; height: 0.09375rem; }
.faq-ico::after { width: 0.09375rem; height: 1rem; }
.faq-item.open .faq-ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-item.open .faq-ico::before { background: var(--cr); }
.faq-ans-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.faq-item.open .faq-ans-wrap { grid-template-rows: 1fr; }
.faq-ans { font-size: var(--text-md); line-height: var(--lh-md); font-weight: 400; color: var(--text2); min-height: 0; overflow: hidden; max-width: 42.5rem; opacity: 0; transform: translateY(-0.375rem); transition: opacity .4s var(--ease) .06s, transform .4s var(--ease) .06s; }
.faq-item.open .faq-ans { opacity: 1; transform: none; }

/* ══════════ BLOG ══════════ */
.blog-single { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem,6vw,4.5rem); align-items: center; margin-top: 2.5rem; }
.blog-img { padding-top: 62%; position: relative; overflow: hidden; border: 0.0625rem solid var(--line);
  background: linear-gradient(155deg, #e4e5e8, #bcc0c9); }
.blog-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-cat { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kicker); margin-bottom: 1rem; }
.blog-title { font-size: clamp(1.5rem, 2.4vw, var(--h-sm)); line-height: 1.27; letter-spacing: var(--h-track); font-weight: 300; color: var(--navy); margin-bottom: 1rem; }
.blog-excerpt { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 400; color: var(--text2); margin-bottom: 1.875rem; }

/* ══════════ CTA ══════════ */
.cta-in { max-width: 45rem; margin: 0 auto; text-align: center; }
.cta-in h2 { color: #fff; margin: 1.125rem 0 1.25rem; }
.cta-in p { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 400; color: rgba(255,255,255,0.55); margin-bottom: 2.625rem; }
.cta-btns { display: flex; gap: 0.875rem; justify-content: center; flex-wrap: wrap; }
.cta-meta { margin-top: 2.25rem; font-size: var(--text-md); line-height: var(--lh-md); color: rgba(255,255,255,0.62); letter-spacing: 0.06em; }

/* ══════════ FOOTER ══════════ */
footer { background: #071019; padding: clamp(4rem,8vw,6rem) var(--pad) 2.5rem; border-top: 0.0625rem solid rgba(255,255,255,0.06); }
.foot-g { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); margin-bottom: 3.5rem; }
.foot-logo-img { height: 3.125rem; width: auto; display: block; margin-bottom: 1.5rem; }
.foot-logo .wm { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.005em; color: #fff; display: block; margin-bottom: 0.5rem; }
.foot-logo .wm b { font-weight: 400; color: #93a3c6; }
.foot-logo .sub { font-size: var(--text-sm); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; }
.foot-desc { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 400; color: rgba(255,255,255,0.65); max-width: 16.25rem; margin-bottom: 1.25rem; }
.foot-cnt { font-size: var(--text-sm); line-height: var(--lh-sm); color: rgba(255,255,255,0.65); margin-bottom: 0.3125rem; }
.foot-cnt a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .25s var(--ease); }
.foot-cnt a:hover { color: #fff; }
.foot-col-h { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 1.375rem; }
.foot-ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.foot-ul a { font-size: var(--text-sm); line-height: var(--lh-sm); color: rgba(255,255,255,0.68); text-decoration: none; transition: color .25s var(--ease); }
.foot-ul a:hover { color: #fff; padding-left: 0.25rem; }
.foot-text { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 400; color: rgba(255,255,255,0.65); }
.foot-bottom { max-width: var(--maxw); margin: 0 auto; padding-top: 1.875rem; border-top: 0.0625rem solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; align-items: center; gap: 1.125rem; flex-wrap: wrap; }
.foot-legal { font-size: var(--text-sm); color: rgba(255,255,255,0.55); letter-spacing: 0.03em; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1024px) {
  .prop-split, .auth-grid, .blog-single { grid-template-columns: minmax(0, 1fr); }
  .prop-frame { max-width: 28.75rem; }
  .proc-steps { grid-template-columns: 1fr 1fr; }
  .foot-g { grid-template-columns: 1fr 1fr; }
  .nw { height: 5.5rem; }
  nav.solid .nw { height: 4.5rem; }
}
@media (max-width: 820px) {
  .intent-in { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; padding-top: 7.5rem; }
}
@media (max-width: 560px) {
  .nw { height: 4.5rem; }
  nav.solid .nw { height: 4rem; }
  .logo-img { height: 2.25rem; }
  nav.solid .logo-img { height: 2rem; }
  .nav-btn { padding: 0.625rem 1rem; }
  .hero { padding-top: 6.5rem; padding-bottom: 3.5rem; }
  .hero-sub { margin-bottom: 2rem; }
  .proof-val { font-size: 1.75rem; }
  .testi-q { font-size: 1.125rem; }
  body { font-size: 1rem; }
  .proc-steps { grid-template-columns: minmax(0, 1fr); }
  .auth-stats { grid-template-columns: 1fr 1fr; }
  .foot-g { grid-template-columns: minmax(0, 1fr); }
  .proof-item { min-width: 45%; }
  .btn { width: 100%; }
  .hero-ctas, .prop-ctas, .cta-btns { width: 100%; }
  .ask-wrap { width: 100%; }
  .ask-tooltip { width: 100%; }
}

.faq-ans::after { content: ''; display: block; height: 1.75rem; }

/* ══════════ CURATION LAYER — focus, depth, load choreography, micro-feedback ══════════ */

/* typography polish */
.html-wrapper h1,.html-wrapper  h2, .col-head, .blog-title, .testi-q { text-wrap: balance; }
.html-wrapper p, .faq-ans { text-wrap: pretty; }

/* skip link */
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 400;
  background: var(--white); color: var(--navy); padding: 0.75rem 1.25rem;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-decoration: none;
  box-shadow: var(--shadow-lg); transform: translateY(-200%); transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* focus — visible, on-brand, readable on light and dark surfaces */
.html-wrapper a:focus-visible, .html-wrapper button:focus-visible {
  outline: 0.125rem solid var(--cr); outline-offset: 0.25rem; border-radius: 0.0625rem;
}
.hero a:focus-visible, .section.dark a:focus-visible, .icol-sell a:focus-visible{
  outline-color: #fff;
}
.faq-btn:focus-visible { outline-offset: -0.125rem; }
.testi-dot:focus-visible { outline-offset: 0.1875rem; }

/* depth */
.prop-card { box-shadow: var(--shadow-lg); }
.auth-stats { box-shadow: var(--shadow-sm); }
.btn-cr:hover, .btn-navy:hover { box-shadow: var(--shadow-md); }
.btn-outline:hover { box-shadow: var(--shadow-sm); }

/* buttons: distinct trigger states (rest → hover → pressed) + magnetic pull */
.html-wrapper .btn { translate: var(--mx, 0) var(--my, 0); }
.html-wrapper .btn:active { transform: translateY(0) scale(0.98); transition-duration: .1s; }
.html-wrapper .nav-btn:active { transform: scale(0.97); }
.tlink:active .arr { transform: translateX(3px); }
.faq-btn:active { transform: scale(0.995); }
.testi-dot:active { transform: scale(1.1); }
.ask-wrap:hover .ask-tooltip { transition-delay: .12s; }

/* hero load choreography: structure → headline → sub → proof → CTAs → nav */
@keyframes riseIn { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-bg { animation: fadeIn 1.4s var(--ease-out) both; }
.hero .reveal.in { animation: riseIn 1.1s var(--ease-out) both; }
.hero h1.reveal.in { animation-delay: .2s; }
.hero .hero-sub.reveal.in { animation-delay: .4s; }
.hero .proof-strip.reveal.in { animation-delay: .55s; }
.hero .hero-ctas.reveal.in { animation-delay: .7s; }

/* reveals use the expo-out curve for a softer landing */
.reveal, .reveal-l, .reveal-r { transition-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero .reveal.in, nav { animation: none; }
  .html-wrapper .btn { translate: none; }
  .faq-ans-wrap { transition: none; }
}
@media (hover: none) {
  .html-wrapper .btn { translate: none; }
}

/* ══════════ RESPONSIVE HARDENING ══════════ */

/* reveal transforms (±42px) must never create horizontal scroll */
main { overflow-x: clip; }

/* short desktop / landscape-tablet viewports: keep the hero CTAs above the fold */
@media (min-width: 821px) and (max-height: 820px) {
  .hero { padding-top: 7rem; padding-bottom: 3.5rem; }
  .hero h1 { font-size: clamp(2.75rem, 8vh, 4rem); margin: 1rem 0 1rem; }
  .hero-sub { margin-bottom: 1.5rem; }
  .proof-strip { margin-bottom: 1.5rem; }
  .proof-item { padding-block: 1rem; }
}

/* touch targets ≥ 44px on tablet & mobile (hit area grows, visuals stay) */
@media (max-width: 1024px) {
  .logo { min-height: 2.75rem; }
  .tlink { position: relative; }
  .tlink::before { content: ''; position: absolute; inset: -0.75rem -0.5rem; }
  .foot-ul { gap: 0; }
  .foot-ul a, .foot-cnt a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* long button labels wrap instead of forcing the layout wider */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; height: auto; min-height: 3.5rem; padding-block: 0.875rem; line-height: 1.3; }
}

/* ══════════ HERO — 4K / 5K: same layout, content scaled up to fill the screen ══════════
   Only 16:9 / 16:10 / 4:3 screens: the factor is sized so headline → CTAs still fit
   within one viewport height (ultrawide is handled by the height-capped root size). */
@media (min-width: 2200px) and (max-aspect-ratio: 2/1) {
  .hero-l-in { zoom: 1.18; }
}

/* ══════════ TESTIMONIALS — long quotes & adaptive height ══════════ */
.testi-viewport { height: var(--testi-h, auto); transition: height .5s var(--ease-out); }
.testi-track { align-items: flex-start; }
@media (max-width: 560px) {
  .testi-dots { flex-wrap: wrap; gap: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .testi-viewport { transition: none; } }

/* scoped reset — restores what the standalone build assumed */
.html-wrapper *,
.html-wrapper *::before,
.html-wrapper *::after { box-sizing: border-box; }

/* neutralize theme blockquote styles */
.html-wrapper blockquote.testi-slide {
  margin: 0; border: 0; background: none; max-width: none; quotes: none;
}
.html-wrapper blockquote.testi-slide::before,
.html-wrapper blockquote.testi-slide::after { content: none; }