/* ============================================================
   NEW LEAF FINANCIAL SOLUTIONS — Design System
   Palette derived from the client's existing brand colours.
   Built by Andritha Online.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* Brand — taken from the client's live site */
  --ink:        #121212;   /* their dominant dark */
  --ink-2:      #191b1b;
  --ink-3:      #232626;
  --brand:      #29d9c2;   /* their teal — brand colour */
  --brand-dk:   #1eb8a4;
  --brand-soft: rgba(41,217,194,.12);
  --cta:        #e44993;   /* their pink — CTAs ONLY */
  --cta-dk:     #c8367b;
  --blue:       #227bc3;   /* supporting tint, used sparingly */
  --blue-soft:  rgba(34,123,195,.10);

  /* Neutrals */
  --surface:    #f5f5f5;   /* their off-white */
  --paper:      #fbfbfb;
  --white:      #ffffff;
  --text:       #111827;
  --muted:      #5b6472;
  --muted-2:    #7c8694;
  --line:       #e4e7eb;
  --line-dk:    rgba(255,255,255,.12);

  /* Semantic */
  --ok:         #16a34a;
  --warn:       #f59e0b;
  --danger:     #dc2626;

  /* Layout */
  --nav-h:      74px;
  --container:  1200px;
  --r:          10px;
  --r-sm:       6px;
  --shadow:     0 4px 24px rgba(18,18,18,.08);
  --shadow-lg:  0 18px 50px rgba(18,18,18,.16);

  /* Type */
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--f-body);
  font-size:1rem;              /* 16px floor */
  line-height:1.65;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;           /* belt-and-braces; nothing should animate on X */
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none }
input,textarea,select{ font-family:inherit; font-size:1rem }
svg{ display:block }

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--text) }
h1{ font-size:clamp(2.1rem, 5.2vw, 4rem) }
h2{ font-size:clamp(1.75rem, 3.6vw, 2.85rem) }
h3{ font-size:clamp(1.15rem, 1.8vw, 1.45rem) }
h4{ font-size:1.05rem }
p{ max-width:65ch }
.lead{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--muted); line-height:1.75 }

.eyebrow{
  display:inline-block; font-family:var(--f-body); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dk);
  margin-bottom:.5rem;
}
.eyebrow.on-dark{ color:var(--brand) }
.accent{ color:var(--brand-dk) }
.on-dark .accent, .dark .accent{ color:var(--brand) }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem }
section{ padding:4.5rem 0 }
.sec-surface{ background:var(--surface) }
.sec-dark{ background:var(--ink); color:#e8ebee }
.sec-dark h2,.sec-dark h3,.sec-dark h4{ color:#fff }
.sec-dark p{ color:#aeb6c0 }
.sec-dark .lead{ color:#b7bfc9 }

.section-head{ max-width:720px; margin-bottom:2.5rem }
.section-head.center{ margin-inline:auto; text-align:center }
.section-head.center p{ margin-inline:auto }
.section-head p{ margin-top:.85rem }

.grid{ display:grid; gap:1.5rem }
.g-2{ grid-template-columns:repeat(2,1fr) }
.g-3{ grid-template-columns:repeat(3,1fr) }
.g-4{ grid-template-columns:repeat(4,1fr) }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center }
.split .copy{ max-width:600px }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.85rem 1.9rem;
  font-family:var(--f-body); font-size:.98rem; font-weight:700;
  border-radius:var(--r-sm); transition:all .2s ease; text-align:center;
  border:2px solid transparent;
}
.btn-primary{ background:var(--cta); color:#fff }
.btn-primary:hover{ background:var(--cta-dk); transform:translateY(-2px); box-shadow:0 8px 22px rgba(228,73,147,.32) }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55) }
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff }
.btn-brand{ background:var(--brand); color:#06302b }
.btn-brand:hover{ background:var(--brand-dk); transform:translateY(-2px) }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--line) }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand-dk) }
.btn-wa{ background:#25D366; color:#fff }
.btn-wa:hover{ background:#1eb958; transform:translateY(-2px) }
.btn-sm{ min-height:44px; padding:.6rem 1.2rem; font-size:.9rem }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  background:var(--ink); border-bottom:1px solid rgba(255,255,255,.07);
  transition:box-shadow .25s ease;
}
.nav.scrolled{ box-shadow:0 6px 26px rgba(0,0,0,.35) }
.nav-in{
  height:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:#fff }
.brand-mark{ width:36px; height:36px; flex:none }
.brand-txt{ font-family:var(--f-display); font-weight:800; font-size:1.06rem; line-height:1.05; letter-spacing:-.01em }
.brand-txt small{ display:block; font-family:var(--f-body); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-top:2px }

.nav-links{ display:flex; justify-content:flex-end; align-items:center; gap:2rem }
.nav-links a{
  font-size:.92rem; font-weight:600; color:#cfd5dc; position:relative; padding:.4rem 0;
  transition:color .2s ease;
}
.nav-links a:hover,.nav-links a.active{ color:#fff }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--brand); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:.75rem }
.nav-tel{ font-size:.9rem; font-weight:700; color:#fff; white-space:nowrap }
.nav-tel span{ color:var(--brand) }

.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
}
.burger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; position:relative; transition:all .25s ease }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px; transition:all .25s ease;
}
.burger span::before{ top:-7px } .burger span::after{ top:7px }
.burger.open span{ background:transparent }
.burger.open span::before{ top:0; transform:rotate(45deg) }
.burger.open span::after{ top:0; transform:rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:890; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  padding-top:var(--nav-h);
}
.mobile-menu.open{ opacity:1; visibility:visible }
.mobile-menu a{ font-family:var(--f-display); font-size:1.6rem; font-weight:700; color:#fff; padding:.7rem 1rem }
.mobile-menu a.active{ color:var(--brand) }
.mobile-menu .btn{ margin-top:1.2rem }
.mm-contact{ margin-top:1.6rem; text-align:center; font-size:.95rem; color:#98a1ac; line-height:2 }
.mm-contact a{ font-size:1rem; color:#cfd5dc; display:block }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 3rem) 0 3.5rem; overflow:hidden; background:var(--ink);
}
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 35% }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.86) 45%, rgba(18,18,18,.72) 100%);
}
.hero-in{ position:relative; z-index:2; width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center }
.hero h1{ color:#fff; margin-bottom:1.1rem }
.hero h1 em{ font-style:normal; color:var(--brand) }
.hero .lead{ color:#c3cad3; max-width:34rem; margin-bottom:1.9rem }
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem;
  padding:.45rem 1rem; border-radius:999px;
  background:var(--brand-soft); border:1px solid rgba(41,217,194,.3);
  font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--brand);
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand) }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:1.75rem; margin-top:2.4rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.13);
}
.hero-trust .t{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:#b4bcc6 }
.hero-trust svg{ width:18px; height:18px; flex:none; color:var(--brand) }
.scroll-hint{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.scroll-hint svg{ width:16px; height:16px; animation:bob 2s ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }

/* Hero "debt → freedom" curve */
.curve-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:1.6rem 1.5rem 1.3rem; backdrop-filter:blur(6px);
}
.curve-card h3{ color:#fff; font-size:1.02rem; margin-bottom:.2rem }
.curve-card .sub{ font-size:.82rem; color:#9aa3ae; margin-bottom:1rem }
.curve-svg{ width:100%; height:auto }
.curve-legend{ display:flex; justify-content:space-between; margin-top:.7rem; font-size:.74rem; color:#8c95a0 }
.curve-legend b{ display:block; font-size:.95rem; margin-top:.15rem }
.curve-legend .a b{ color:#ff6b6b } .curve-legend .b b{ color:var(--brand) }

/* ---------- TRUST BAR ---------- */
.trustbar{ background:var(--ink-2); padding:1.6rem 0; border-top:1px solid rgba(255,255,255,.07) }
.trustbar .in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center }
.trustbar .n{ font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; color:var(--brand); line-height:1 }
.trustbar .l{ font-size:.8rem; color:#9aa3ae; margin-top:.4rem; letter-spacing:.04em }

/* ---------- CARDS ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:1.8rem 1.6rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent }
.card .ico{
  width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-dk); margin-bottom:1.1rem; flex:none;
}
.card .ico svg{ width:24px; height:24px }
.card h3{ margin-bottom:.55rem }
.card p{ color:var(--muted); font-size:.95rem; flex:1 }
.card .more{
  margin-top:1.1rem; font-size:.88rem; font-weight:700; color:var(--brand-dk);
  display:inline-flex; align-items:center; gap:.4rem;
}
.card .more svg{ width:15px; height:15px; transition:transform .2s ease }
.card:hover .more svg{ transform:translateX(3px) }
.sec-dark .card{ background:var(--ink-3); border-color:rgba(255,255,255,.09) }
.sec-dark .card p{ color:#a6aeb8 }
.sec-dark .card .ico{ background:rgba(41,217,194,.14); color:var(--brand) }

/* ---------- CHECK LIST ---------- */
.checks{ display:grid; gap:.85rem; margin:1.5rem 0 }
.checks li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.97rem }
.checks svg{ width:20px; height:20px; flex:none; color:var(--brand-dk); margin-top:2px }
.sec-dark .checks svg{ color:var(--brand) }
.checks b{ font-weight:700 }

/* ---------- MEDIA PANEL ---------- */
.media{ border-radius:var(--r); overflow:hidden; position:relative }
.media img{ width:100%; height:500px; object-fit:cover }
.media.tall img{ height:560px }
.media-tag{
  position:absolute; left:1.1rem; bottom:1.1rem; background:rgba(18,18,18,.86);
  color:#fff; padding:.55rem 1rem; border-radius:var(--r-sm); font-size:.82rem; font-weight:600;
  backdrop-filter:blur(4px);
}
.media-tag b{ color:var(--brand) }

/* ---------- JOURNEY / STEPS ---------- */
.journey{ position:relative; display:grid; gap:1.1rem }
.journey::before{
  content:''; position:absolute; left:23px; top:26px; bottom:26px; width:2px;
  background:rgba(255,255,255,.12);
}
.jline{
  position:absolute; left:23px; top:26px; width:2px; background:var(--brand);
  height:0; border-radius:2px; z-index:1;
}
.step{ display:grid; grid-template-columns:48px 1fr; gap:1.1rem; align-items:start; position:relative; z-index:2 }
.step .num{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-3); border:2px solid rgba(255,255,255,.16);
  font-family:var(--f-display); font-weight:800; font-size:1.05rem; color:#fff; flex:none;
  transition:all .3s ease;
}
.step.on .num{ background:var(--brand); border-color:var(--brand); color:#06302b }
.step .body{ padding-top:.35rem }
.step h3{ font-size:1.1rem; margin-bottom:.3rem }
.step p{ font-size:.94rem }

/* ---------- CALCULATOR ---------- */
.calc{
  background:var(--ink); border-radius:14px; padding:2rem; color:#fff;
  border:1px solid rgba(255,255,255,.1);
}
.calc h3{ color:#fff; margin-bottom:.3rem }
.calc .hint{ font-size:.85rem; color:#8f98a3; margin-bottom:1.6rem }
.field{ margin-bottom:1.5rem }
.field label{ display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; font-weight:600; color:#c3cad3; margin-bottom:.6rem }
.field .val{ font-family:var(--f-display); font-size:1.25rem; font-weight:800; color:var(--brand) }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px;
  background:rgba(255,255,255,.15); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--brand); border:3px solid var(--ink); cursor:pointer;
  box-shadow:0 2px 10px rgba(41,217,194,.5);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--brand);
  border:3px solid var(--ink); cursor:pointer;
}
.calc-out{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.8rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12);
}
.calc-out .o{ background:rgba(255,255,255,.05); border-radius:var(--r-sm); padding:1.1rem }
.calc-out .k{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#8f98a3 }
.calc-out .v{ font-family:var(--f-display); font-size:1.7rem; font-weight:800; color:#fff; margin-top:.3rem; line-height:1.1 }
.calc-out .v.good{ color:var(--brand) }
.calc-note{ font-size:.76rem; color:#767f8a; margin-top:1.1rem; line-height:1.6 }

/* ---------- GAUGE ---------- */
.gauge-wrap{ text-align:center }
.gauge{ width:100%; max-width:320px; margin-inline:auto }
.gauge-val{ font-family:var(--f-display); font-size:2.6rem; font-weight:800; color:var(--brand) }
.gauge-lab{ font-size:.85rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase }

/* ---------- REVIEWS ---------- */
.review{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.5rem;
  display:flex; flex-direction:column;
}
.stars{ display:flex; gap:2px; margin-bottom:.9rem }
.stars svg{ width:17px; height:17px; color:#f5a623 }
.review q{ font-style:italic; color:var(--text); font-size:.97rem; line-height:1.7; flex:1; quotes:none }
.reviewer{ display:flex; align-items:center; gap:.75rem; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line) }
.avatar{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--brand-soft); color:var(--brand-dk); font-weight:800; font-size:.95rem;
}
.reviewer .who{ font-weight:700; font-size:.92rem }
.reviewer .where{ font-size:.8rem; color:var(--muted-2) }
.rev-src{ font-size:.78rem; color:var(--muted-2); margin-top:.9rem }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.8rem; max-width:820px }
.acc{ border:1px solid var(--line); border-radius:var(--r); background:var(--white); overflow:hidden }
.acc-h{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; text-align:left; font-weight:700; font-size:1rem; color:var(--text);
  min-height:56px;
}
.acc-h:hover{ color:var(--brand-dk) }
.acc-h .chev{ width:18px; height:18px; flex:none; transition:transform .25s ease; color:var(--muted) }
.acc.open .acc-h .chev{ transform:rotate(180deg); color:var(--brand-dk) }
.acc-b{ max-height:0; overflow:hidden; transition:max-height .3s ease }
.acc.open .acc-b{ max-height:600px }
.acc-b p{ padding:0 1.4rem 1.3rem; color:var(--muted); font-size:.95rem }

/* ---------- CTA BANNER ---------- */
.cta-band{ background:var(--ink); color:#fff; padding:4rem 0; position:relative; overflow:hidden }
.cta-band::before{
  content:''; position:absolute; top:-40%; right:-8%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(41,217,194,.16), transparent 68%);
}
.cta-band .in{ position:relative; z-index:2; text-align:center; max-width:740px; margin-inline:auto }
.cta-band h2{ color:#fff; margin-bottom:.9rem }
.cta-band p{ color:#b0b8c2; margin:0 auto 1.8rem }
.cta-band .btn-row{ justify-content:center }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding:calc(var(--nav-h) + 4rem) 0 3.5rem;
}
.page-hero-bg{ position:absolute; inset:0; z-index:0; opacity:.28 }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover }
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(18,18,18,.92), rgba(18,18,18,.74));
}
.page-hero .in{ position:relative; z-index:2; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem }
.page-hero h1{ color:#fff; margin-bottom:.8rem }
.page-hero p{ color:#b8c0ca; max-width:56ch }
.crumb{ font-size:.83rem; color:#8f98a3; margin-bottom:1rem }
.crumb a:hover{ color:var(--brand) }
.crumb span{ color:var(--brand) }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:start }
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:2rem }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.f{ margin-bottom:1.1rem }
.f label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:.4rem; color:var(--text) }
.f label .req{ color:var(--cta) }
.f input,.f select,.f textarea{
  width:100%; padding:.8rem .95rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); color:var(--text); transition:border-color .2s ease, box-shadow .2s ease;
  min-height:48px;
}
.f textarea{ min-height:120px; resize:vertical }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.f .err{ font-size:.8rem; color:var(--danger); margin-top:.3rem; display:none }
.f.invalid input,.f.invalid select,.f.invalid textarea{ border-color:var(--danger) }
.f.invalid .err{ display:block }
.form-note{ font-size:.8rem; color:var(--muted-2); margin-top:.9rem; line-height:1.6 }

.info-panel{ background:var(--ink); color:#fff; border-radius:var(--r); padding:2rem }
.info-panel h3{ color:#fff; margin-bottom:1.4rem }
.info-row{ display:flex; gap:.9rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.1) }
.info-row:last-of-type{ border-bottom:none }
.info-row .i{ width:38px; height:38px; border-radius:var(--r-sm); background:rgba(41,217,194,.14);
  display:grid; place-items:center; color:var(--brand); flex:none }
.info-row .i svg{ width:18px; height:18px }
.info-row .k{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#8f98a3 }
.info-row .v{ font-weight:600; font-size:.98rem; color:#fff; margin-top:.15rem }
.info-row .v:hover{ color:var(--brand) }
.info-row .v small{ display:block; font-weight:400; font-size:.85rem; color:#98a1ac; margin-top:.15rem }

.branch{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem }
.branch h4{ font-family:var(--f-body); font-weight:800; font-size:.95rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-dk); margin-bottom:.5rem }
.branch p{ font-size:.9rem; color:var(--muted) }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:#9aa3ae; padding:3.5rem 0 0; font-size:.92rem }
.footer h4{ color:#fff; font-family:var(--f-body); font-weight:800; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem }
.f-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem }
.footer a:hover{ color:var(--brand) }
.footer li{ margin-bottom:.6rem }
.f-brand p{ margin:1rem 0 1.3rem; font-size:.9rem; line-height:1.75; max-width:34ch }
.f-social{ display:flex; gap:.6rem }
.f-social a{
  width:38px; height:38px; border-radius:var(--r-sm); background:rgba(255,255,255,.07);
  display:grid; place-items:center; color:#c3cad3; transition:all .2s ease;
}
.f-social a:hover{ background:var(--brand); color:var(--ink) }
.f-social svg{ width:17px; height:17px }
.f-bottom{
  margin-top:3rem; padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem;
}
.f-legal{ font-size:.78rem; line-height:1.7; color:#6f7883; margin-top:1.2rem; max-width:70ch }
.f-by{ color:#6f7883 }
.f-by a{ color:var(--brand) }

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:880;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 6px 22px rgba(37,211,102,.44);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.07) }
.wa-float svg{ width:30px; height:30px; color:#fff }

/* ---------- AI CONCIERGE ---------- */
.leaf-btn{
  position:fixed; right:18px; bottom:88px; z-index:880;
  display:flex; align-items:center; gap:.55rem; padding:.7rem 1.1rem .7rem .75rem;
  background:var(--ink); color:#fff; border-radius:999px; border:1px solid rgba(41,217,194,.4);
  box-shadow:0 6px 24px rgba(0,0,0,.3); font-size:.88rem; font-weight:700;
  transition:transform .2s ease;
}
.leaf-btn:hover{ transform:translateY(-2px) }
.leaf-btn .av{ width:30px; height:30px; border-radius:50%; background:var(--brand);
  display:grid; place-items:center; flex:none }
.leaf-btn .av svg{ width:17px; height:17px; color:#06302b }
.leaf-btn .pulse{ width:8px; height:8px; border-radius:50%; background:var(--brand); animation:pulse 2s infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.leaf-panel{
  position:fixed; right:18px; bottom:88px; z-index:895; width:380px; max-width:calc(100vw - 36px);
  height:min(560px, calc(100vh - 140px)); background:var(--white); border-radius:14px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.leaf-panel.open{ opacity:1; visibility:visible; transform:translateY(0) }
.leaf-head{ background:var(--ink); color:#fff; padding:1rem 1.1rem; display:flex; align-items:center; gap:.75rem }
.leaf-head .av{ width:38px; height:38px; border-radius:50%; background:var(--brand); display:grid; place-items:center; flex:none }
.leaf-head .av svg{ width:20px; height:20px; color:#06302b }
.leaf-head .nm{ font-weight:700; font-size:.98rem; line-height:1.2 }
.leaf-head .st{ font-size:.76rem; color:var(--brand); display:flex; align-items:center; gap:.35rem }
.leaf-head .st::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--brand) }
.leaf-x{ margin-left:auto; width:44px; height:44px; display:grid; place-items:center; color:#98a1ac; border-radius:var(--r-sm) }
.leaf-x:hover{ color:#fff; background:rgba(255,255,255,.08) }
.leaf-x svg{ width:18px; height:18px }

.leaf-body{ flex:1; overflow-y:auto; padding:1.1rem; background:var(--surface); display:flex; flex-direction:column; gap:.8rem }
.msg{ max-width:85%; padding:.75rem .95rem; border-radius:12px; font-size:.93rem; line-height:1.6 }
.msg.bot{ background:var(--white); border:1px solid var(--line); border-bottom-left-radius:3px; align-self:flex-start }
.msg.me{ background:var(--ink); color:#fff; border-bottom-right-radius:3px; align-self:flex-end }
.msg.bot strong{ color:var(--brand-dk) }
.typing{ display:flex; gap:4px; padding:.85rem 1rem; background:var(--white); border:1px solid var(--line);
  border-radius:12px; border-bottom-left-radius:3px; align-self:flex-start; width:fit-content }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); animation:dot 1.3s infinite }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes dot{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

.leaf-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem .6rem; background:var(--surface) }
.chip{
  padding:.45rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--white);
  font-size:.8rem; font-weight:600; color:var(--text); transition:all .2s ease;
}
.chip:hover{ border-color:var(--brand); color:var(--brand-dk) }
.leaf-foot{ display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--line); background:var(--white) }
.leaf-foot input{ flex:1; border:1px solid var(--line); border-radius:999px; padding:.7rem 1rem; min-height:44px }
.leaf-foot input:focus{ outline:none; border-color:var(--brand) }
.leaf-send{ width:44px; height:44px; border-radius:50%; background:var(--cta); display:grid; place-items:center; flex:none }
.leaf-send:hover{ background:var(--cta-dk) }
.leaf-send svg{ width:18px; height:18px; color:#fff }
.leaf-disc{ font-size:.68rem; color:var(--muted-2); text-align:center; padding:0 .8rem .6rem; background:var(--white) }

/* ---------- MOTION (FAIL-OPEN) ----------
   .rv is VISIBLE by default. It is only hidden once JS has confirmed
   GSAP loaded AND reduced-motion is off, by adding .motion to <html>.
   If the animation layer fails, the page still renders 100%.        */
html.motion .rv{ opacity:0 }
@media (prefers-reduced-motion:reduce){
  html.motion .rv{ opacity:1 !important; transform:none !important }
  .scroll-hint svg{ animation:none }
}

/* ---------- READABILITY FLOOR ----------
   Legal text, helper text and disclaimers still have to be readable by
   someone stressed about money on a phone. Nothing that carries a sentence
   drops below 13.5px anywhere on the site. Micro-labels (uppercase keys,
   tags, table headers) stay small by design — they are labels, not prose. */
.calc-note,
.form-note,
.f-legal,
.rev-src,
.leaf-disc,
.info-row .v small,
.gauge-lab{ font-size:.85rem; line-height:1.65 }
.leaf-disc{ font-size:.82rem }
/* Validation errors are read by someone who has just failed to send an enquiry.
   They are the last text you want too small to read. */
.f .err{ font-size:.85rem; font-weight:600 }
@media (max-width:768px){
  .calc-note,
  .form-note,
  .f-legal,
  .rev-src,
  .info-row .v small{ font-size:.875rem }
}

/* ---------- UTIL ---------- */
.center{ text-align:center }
.mt-0{ margin-top:0 } .mt-1{ margin-top:1rem } .mt-2{ margin-top:2rem }
.mb-1{ margin-bottom:1rem } .mb-2{ margin-bottom:2rem }
.hide{ display:none !important }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pill{
  display:inline-block; padding:.3rem .75rem; border-radius:999px; font-size:.82rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.pill-brand{ background:var(--brand-soft); color:var(--brand-dk) }
.pill-blue{ background:var(--blue-soft); color:var(--blue) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem }
  .split{ grid-template-columns:1fr; gap:2.5rem }
  .g-4{ grid-template-columns:repeat(2,1fr) }
  .f-grid{ grid-template-columns:1fr 1fr; gap:2rem }
  .contact-grid{ grid-template-columns:1fr }
  .media img,.media.tall img{ height:400px }
}

@media (max-width:860px){
  .nav-links,.nav-tel{ display:none }
  .burger{ display:flex }
  .nav-in{ grid-template-columns:auto 1fr }
  .nav-cta{ justify-content:flex-end }
  .nav-cta .btn{ display:none }
  .g-3{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:768px){
  section{ padding:3.25rem 0 }
  .container,.hero-in,.page-hero .in{ padding-inline:1.25rem }
  .section-head{ margin-bottom:2rem }
  .hero{ min-height:82vh; padding:calc(var(--nav-h) + 2rem) 0 2.5rem }
  .hero-trust{ gap:1rem 1.4rem; margin-top:1.8rem; padding-top:1.2rem }
  .hero-trust .t{ font-size:.84rem }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr }
  .trustbar .in{ grid-template-columns:repeat(2,1fr); gap:1.25rem }
  .f-row{ grid-template-columns:1fr }
  .f-grid{ grid-template-columns:1fr; gap:2rem }
  .calc-out{ grid-template-columns:1fr }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column }
  .btn-row .btn{ width:100% }
  .nav-cta .btn{ width:auto }
  .card{ padding:1.5rem 1.35rem }
  .form-card,.info-panel,.calc{ padding:1.5rem }
  .media img,.media.tall img{ height:300px }
  .f-bottom{ flex-direction:column; gap:.6rem }
  .leaf-panel{ right:10px; left:10px; width:auto; max-width:none; bottom:80px;
    height:min(70vh, calc(100vh - 160px)) }
  .leaf-btn{ bottom:84px; right:14px; padding:.6rem .9rem .6rem .65rem; font-size:.84rem }
  .wa-float{ right:14px; bottom:14px; width:54px; height:54px }
  .journey::before,.jline{ left:19px }
  .step{ grid-template-columns:40px 1fr; gap:.9rem }
  .step .num{ width:40px; height:40px; font-size:.95rem }
}

@media (max-width:480px){
  .hero-badge{ font-size:.75rem; padding:.4rem .85rem }
  .curve-card{ padding:1.25rem 1.1rem 1rem }
  .trustbar .in{ gap:1rem }
  .leaf-btn span.lbl{ display:none }
}

/* ---------- PRINT ---------- */
@media print{
  .nav,.wa-float,.leaf-btn,.leaf-panel,.mobile-menu,.scroll-hint{ display:none !important }
  .rv{ opacity:1 !important; transform:none !important }
  body{ color:#000 }
}