/* ============================================================
   VETRIVAAGAI CHIT FUNDS PRIVATE LIMITED
   Premium Design System  ·  Navy Blue + Gold
   assets/css/style.css
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Emerald scale */
  --em-950:#041F42;
  --em-900:#05306B;
  --em-800:#0B3D7A;
  --em-700:#285693;
  --em-600:#3566A0;
  --em-500:#4A7EBD;
  --em-300:#A6CBEE;
  --em-100:#D6E6FA;
  --em-50 :#ECF3FD;

  /* Champagne gold scale */
  --gd-700:#B8830A;
  --gd-600:#D69C12;
  --gd-500:#F2B51D;
  --gd-400:#F5C446;
  --gd-300:#F8D372;
  --gd-200:#FBE3A3;
  --gd-100:#FDF1D6;

  /* Neutrals */
  --ivory  :#ECF3FD;
  --paper  :#FFFFFF;
  --ink    :#1D273D;
  --ink-2  :#3A4560;
  --muted  :#64708C;
  --line   :#DCE7F7;
  --line-gd:rgba(242,181,29,.28);

  /* Effects */
  --grad-gold:linear-gradient(135deg,#F8D372 0%,#F2B51D 45%,#D69C12 100%);
  --grad-em  :linear-gradient(150deg,#285693 0%,#05306B 60%,#041F42 100%);
  --sh-sm:0 1px 2px rgba(5,48,107,.06),0 2px 8px rgba(5,48,107,.05);
  --sh-md:0 4px 12px rgba(5,48,107,.07),0 12px 32px rgba(5,48,107,.07);
  --sh-lg:0 8px 24px rgba(5,48,107,.09),0 28px 64px rgba(5,48,107,.11);
  --sh-gd:0 10px 30px rgba(214,156,18,.28);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  --wrap:1200px;
  --wrap-wide:1360px;

  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-tamil:"Noto Sans Tamil",var(--f-body);
  /* Numerals: all figures across the site */
  --f-num:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:88px;
}

/* ---------- 2. RESET & BASE ---------- */
*,*::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:16px;line-height:1.7;
  color:var(--ink-2);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gd-300);color:var(--em-900)}

h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);line-height:1.16;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4.15rem)}
h2{font-size:clamp(1.95rem,3.6vw,3rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.075rem;font-family:var(--f-body);font-weight:800;letter-spacing:.005em}
p{color:var(--ink-2)}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-wide{width:100%;max-width:var(--wrap-wide);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(64px,8vw,116px) 0}
.section-sm{padding:clamp(48px,5vw,72px) 0}
.section-dark{background:var(--grad-em);color:#D6E6FA;position:relative;overflow:hidden}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark p{color:rgba(214,230,250,.82)}
.section-tint{background:linear-gradient(180deg,var(--em-50) 0%,var(--ivory) 100%)}
.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}

/* Decorative glow for dark sections */
.section-dark::before{
  content:"";position:absolute;inset:auto -10% -55% 40%;
  width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,181,29,.20) 0%,transparent 66%);
  pointer-events:none;
}

/* ---------- 4. TYPE HELPERS ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.735rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gd-600);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad-gold);border-radius:2px}
.section-dark .eyebrow{color:var(--gd-300)}
.gold{color:var(--gd-600)}
.section-dark .gold{color:var(--gd-300)}
.gold-text{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lead{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--muted);max-width:62ch}
.section-dark .lead{color:rgba(208,225,248,.8)}
.head{max-width:720px;margin-bottom:52px}
.head.center{max-width:880px;margin-inline:auto;text-align:center}
.head.center .lead{max-width:66ch}
.rule{width:64px;height:3px;background:var(--grad-gold);border-radius:3px;margin-top:20px}
.head.center .rule{margin-inline:auto}
.ta{font-family:var(--f-tamil)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-bg:var(--grad-gold);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-pill);
  font-weight:800;font-size:.925rem;letter-spacing:.015em;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s,background-color .3s,border-color .3s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex-shrink:0;stroke-width:2.2}
.btn-gold{background:var(--btn-bg);color:var(--em-950);box-shadow:var(--sh-gd)}
.btn-gold::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.62) 50%,transparent 75%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(214,156,18,.4)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-em{background:var(--em-800);color:#fff;box-shadow:0 8px 24px rgba(11,61,122,.24)}
.btn-em:hover{background:var(--em-700);transform:translateY(-3px);box-shadow:0 16px 38px rgba(11,61,122,.3)}
.btn-ghost{border:1.5px solid var(--line-gd);color:var(--em-800)}
.btn-ghost:hover{border-color:var(--gd-500);background:var(--gd-100);transform:translateY(-2px)}
.section-dark .btn-ghost,.hero .btn-ghost,.cta .btn-ghost,
.split-media .btn-ghost,.drawer .btn-ghost{border-color:rgba(248,211,114,.5);color:var(--gd-200)}
.section-dark .btn-ghost:hover,.hero .btn-ghost:hover,
.cta .btn-ghost:hover,.drawer .btn-ghost:hover{background:rgba(242,181,29,.16);border-color:var(--gd-300);color:#fff}
.btn-sm{padding:11px 22px;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

/* ---------- 6. HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  /* Crisp branded glass: a bright, faintly warm pane so the navy wordmark
     reads at full strength, finished top and bottom with champagne rules. */
  background:
    linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(249,252,255,.90) 46%,rgba(233,241,253,.90) 100%);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid rgba(214,156,18,.20);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 14px rgba(5,48,107,.05);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
/* Champagne rule across the very top — the single detail that makes the
   header read as considered rather than default. */
.header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--em-800) 0%,var(--gd-600) 18%,var(--gd-300) 38%,
             var(--gd-500) 58%,var(--gd-600) 78%,var(--em-800) 100%);
  opacity:.92;
}
.header.scrolled{
  background:
    linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(247,251,255,.97) 50%,rgba(228,238,252,.97) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 24px rgba(5,48,107,.11);
  border-bottom-color:rgba(214,156,18,.34);
}
.header-inner{
  max-width:var(--wrap-wide);margin-inline:auto;padding:0 24px;
  height:var(--header-h);display:flex;align-items:center;gap:26px;
  transition:height .35s var(--ease);
}
.header.scrolled .header-inner{height:72px}

.brand{display:flex;align-items:center;gap:15px;margin-right:auto;flex-shrink:0;position:relative}
/* The mark is shown clean — no drop-shadow, no halo behind it, so the
   artwork reads exactly as drawn. */
.brand img{
  width:50px;height:50px;position:relative;z-index:2;
  filter:none;
  transition:width .35s var(--ease),height .35s var(--ease),transform .35s var(--ease);
}
.brand::before{content:none}
.brand:hover img{filter:none;transform:scale(1.04)}
.header.scrolled .brand img{width:42px;height:42px}

.brand-txt{display:flex;flex-direction:column;line-height:1;position:relative;z-index:2}

/* The wordmark: deep navy, heavy, tightly set. The gradient gives the
   letterforms a little depth; the solid colour above it is the fallback
   wherever background-clip:text is unavailable. */
.brand-name{
  font-family:var(--f-display);
  font-size:1.72rem;font-weight:800;
  letter-spacing:-.018em;
  color:#062A5B;
  background:linear-gradient(176deg,#12508F 0%,#083268 42%,#031A3E 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
  transition:font-size .35s var(--ease);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-name{-webkit-text-fill-color:currentColor;background:none;color:#062A5B}
}
.header.scrolled .brand-name{font-size:1.54rem}

/* Sub-line: gold, letterspaced, sitting square under the name — no rules
   or dashes, exactly as the brand artwork sets it. */
.brand-sub{
  font-size:.60rem;font-weight:800;letter-spacing:.185em;text-transform:uppercase;
  color:var(--gd-600);margin-top:7px;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.header.scrolled .brand-sub{font-size:.565rem}

/* The footer wordmark sits on navy — it needs the light treatment instead */
.f-brand .brand-name{
  background:linear-gradient(176deg,#FFFFFF 0%,#EAF2FD 55%,#C9DCF5 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(2,14,36,.55));
}
.f-brand .brand-sub{color:var(--gd-300);text-shadow:0 1px 2px rgba(2,14,36,.6)}

.nav{display:flex;align-items:center;gap:5px}
.nav a{
  position:relative;padding:10px 12px;border-radius:var(--r-sm);
  font-size:.85rem;font-weight:700;color:var(--ink-2);white-space:nowrap;
  transition:color .28s var(--ease),background-color .28s;
}
.nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:var(--grad-gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--em-800)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--em-800)}


/* Nav dropdown ("Why Chit Fund" \u2192 FAQs) */
.nav-item{position:relative}
.nav-item .nav-trig{display:inline-flex;align-items:center;gap:5px}
.nav-trig svg{width:11px;height:11px;flex-shrink:0;transition:transform .3s var(--ease)}
.nav-item:hover .nav-trig svg,
.nav-item.open .nav-trig svg{transform:rotate(180deg)}
html:not(.js) .nav-item:focus-within .nav-trig svg{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + 10px);left:0;min-width:200px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:8px;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:30;
}
/* Invisible bridge over the gap between trigger and panel — keeps the
   pointer inside .nav-item while travelling down to the menu. */
.nav-panel::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
}
.nav-item:hover .nav-panel,
.nav-item.open .nav-panel,
html:not(.js) .nav-item:focus-within .nav-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
/* Touch devices: hover is unreliable, so only the .open class shows the panel. */
@media (hover:none){
  .nav-item:hover .nav-panel{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
  .nav-item.open .nav-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
}
.nav-panel a{
  display:block;padding:11px 13px;border-radius:var(--r-sm);
  font-size:.85rem;font-weight:700;color:var(--ink-2);white-space:nowrap;
  transition:background-color .25s,color .25s;
}
.nav-panel a::after{content:none}
.nav-panel a:hover,.nav-panel a.active{background:var(--gd-100);color:var(--em-800)}

/* Mobile drawer sub-links */
.drawer .drawer-sub{padding-left:30px;font-size:.92rem;font-weight:600;opacity:.85}

.header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hdr-phone{
  display:flex;align-items:center;gap:9px;font-weight:800;font-size:.86rem;
  color:var(--em-800);padding:9px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-gd);transition:.3s var(--ease);
}
.hdr-phone:hover{background:var(--gd-100);border-color:var(--gd-400)}
.hdr-phone svg{width:15px;height:15px;color:var(--gd-600);flex-shrink:0}

.burger{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line);background:var(--paper);
}
.burger span{display:block;width:19px;height:2px;background:var(--em-800);border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:950;
  background:var(--grad-em);padding:96px 26px 40px;
  transform:translateX(105%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer a{
  padding:14px 16px;border-radius:var(--r-md);color:#D6E6FA;
  font-weight:700;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.07);
  transition:.3s var(--ease);
}
.drawer a:hover,.drawer a.active{background:rgba(242,181,29,.16);color:var(--gd-200)}
.drawer .btn{margin-top:22px}
.scrim{
  position:fixed;inset:0;z-index:940;background:rgba(4,31,66,.55);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.4s var(--ease);
}
.scrim.open{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* ---------- 7. HERO ---------- */
/* Split hero: the message sits on the left, the photograph is framed on the
   right. Both halves animate in on load. Swap assets/img/hero-cover.jpg to
   change the picture. */
.hero{
  position:relative;overflow:hidden;color:#fff;background:var(--grad-em);
  display:grid;align-items:center;
  min-height:min(80vh,880px);
  padding:calc(var(--header-h) + clamp(38px,7vh,84px)) 0 clamp(56px,8vh,96px);
}
/* Warm light pooling behind the copy, cool depth behind the photograph */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 76% at 10% 46%,rgba(242,181,29,.19) 0%,transparent 62%),
    radial-gradient(ellipse 72% 72% at 90% 6%,rgba(74,126,189,.30) 0%,transparent 62%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.26;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 86% 78% at 50% 45%,#000 18%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 86% 78% at 50% 45%,#000 18%,transparent 78%);
}

.hero-inner{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(36px,4.6vw,74px);
}

/* --- Left column: the message --- */
.hero-copy{position:relative;max-width:620px;margin:0;text-align:left}
.hero .eyebrow{justify-content:flex-start;color:#FCE3A0;
  text-shadow:0 1px 3px rgba(4,31,66,.55)}
.hero h1{
  color:#fff;margin-bottom:22px;
  text-shadow:0 2px 16px rgba(4,31,66,.42);
}
.hero h1 em{font-style:normal;display:block}
/* .gold-text is a clipped gradient, so an inherited text-shadow shows THROUGH
   the letters and muddies them — use a drop-shadow on the element instead. */
.hero h1 .gold-text{
  text-shadow:none;
  background:linear-gradient(135deg,#FDE9B4 0%,#F8D372 42%,#F0B41C 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 14px rgba(4,31,66,.42));
}
.hero-sub{
  font-size:clamp(1.04rem,1.5vw,1.2rem);color:rgba(233,241,253,.94);font-weight:500;
  max-width:53ch;margin:0 0 38px;
  text-shadow:0 1px 3px rgba(4,31,66,.5);
}
.hero-sub b{color:var(--gd-300);font-weight:800}
.hero .btn-row{justify-content:flex-start}

/* --- Right column: the framed photograph --- */
.hero-visual,.about-visual{
  position:relative;z-index:3;justify-self:end;width:100%;max-width:660px;
  animation:heroVisIn 1.15s var(--ease) .1s both;
}
/* offset gold outline, drawn behind and below-right of the frame */
.hero-visual::before,.about-visual::before{
  content:"";position:absolute;inset:24px -24px -24px 24px;
  border:1.5px solid rgba(248,211,114,.40);border-radius:var(--r-xl);
  pointer-events:none;
}
/* slow breathing glow so the panel sits in light, not on flat navy */
.hero-visual::after,.about-visual::after{
  content:"";position:absolute;inset:-16%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(242,181,29,.22) 0%,transparent 66%);
  animation:heroGlow 9s ease-in-out infinite;
}

.hero-frame,.about-frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(251,227,163,.34);
  box-shadow:0 28px 64px rgba(2,14,36,.48),0 6px 18px rgba(2,14,36,.30);
  animation:heroFloat 8s ease-in-out 1.3s infinite;
  will-change:transform;
}
.hero-frame img,.about-frame img{
  width:100%;aspect-ratio:3 / 2;object-fit:cover;object-position:50% 45%;
  animation:heroSettle 2.1s var(--ease) .15s both;
}
/* grounding wash at the foot of the picture */
.hero-frame::before,.about-frame::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(4,31,66,.34) 100%);
}
/* light sweeping across the glass */
.hero-frame::after,.about-frame::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.26) 48%,transparent 60%);
  transform:translateX(-130%);
  animation:heroSheen 7.5s var(--ease) 2s infinite;
}

/* floating fact card, overlapping the lower-left corner of the frame */
.hero-chip{
  position:absolute;left:-26px;bottom:-26px;z-index:4;
  display:flex;flex-direction:column;gap:3px;
  padding:15px 22px;border-radius:var(--r-md);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(242,181,29,.42);
  box-shadow:0 18px 44px rgba(2,14,36,.36);
  animation:heroChipIn .85s var(--ease) 1s both;
}
.hero-chip b{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:1.1rem;font-weight:800;color:var(--em-900);letter-spacing:-.01em;
  line-height:1.25;white-space:nowrap;
}
.hero-chip span{
  font-size:.665rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}

/* --- Hero motion --- */
@keyframes heroVisIn{from{opacity:0;transform:translateX(52px) scale(.95)}to{opacity:1;transform:none}}
@keyframes heroSettle{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes heroChipIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes heroGlow{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes heroSheen{0%{transform:translateX(-130%)}26%,100%{transform:translateX(130%)}}

.btn-xl{padding:18px 42px;font-size:1rem;letter-spacing:.01em}

/* Stat rows (used inside split panels) */
.hc-rows{display:flex;flex-direction:column;gap:2px}
.hc-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 0;border-bottom:1px dashed rgba(248,211,114,.2);
}
.hc-row:last-child{border:0}
.hc-row span{font-size:.855rem;color:rgba(202,222,247,.74)}
.hc-row b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:1.14rem;color:var(--gd-300);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.hc-foot{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(248,211,114,.2);
  display:flex;align-items:center;gap:10px;font-size:.79rem;color:rgba(202,222,247,.68);
}
.hc-foot svg{width:16px;height:16px;color:var(--gd-400);flex-shrink:0}

/* Page top offset (inner pages) — page hero removed */
.page-offset{height:var(--header-h)}
/* First section on an inner page sits close under the header —
   the full section padding left too big a gap once the trust strip went. */
.page-offset + .section{padding-top:clamp(26px,3vw,46px)}
.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;
}
.crumb{
  display:flex;justify-content:center;align-items:center;gap:9px;
  font-size:.755rem;font-weight:700;color:rgba(202,222,247,.6);margin-top:14px;
}
.crumb a:hover{color:var(--gd-300)}
.crumb span{color:var(--gd-400)}

/* ---------- 9. CARDS ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 28px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:var(--line-gd)}
.card:hover::before{transform:scaleX(1)}
.card h4{margin-bottom:10px;color:var(--em-800)}
.card p{font-size:.925rem;line-height:1.68}

.ic{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--em-50),var(--em-100));
  color:var(--em-700);margin-bottom:20px;flex-shrink:0;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.ic svg{width:26px;height:26px}
.ic > span{display:grid;place-items:center}
.ic > span > svg{width:100%;height:100%}
.card:hover .ic{background:var(--grad-gold);color:var(--em-950);transform:rotate(-6deg) scale(1.06)}
.ic-gold{background:linear-gradient(145deg,var(--gd-100),var(--gd-200));color:var(--gd-700)}
.section-dark .ic{background:rgba(242,181,29,.14);color:var(--gd-300);border:1px solid rgba(248,211,114,.2)}

/* Dark card */
.card-dark{
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(248,211,114,.18);box-shadow:none;
}
.card-dark:hover{border-color:rgba(248,211,114,.42);background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.04))}
.card-dark h4{color:#fff}
.card-dark p{color:rgba(208,225,248,.74)}

/* ---------- 10. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 22px;text-align:center;box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.stat:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.stat-ic{width:46px;height:46px;margin:0 auto 16px;color:var(--gd-600)}
.stat b{
  display:block;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:clamp(1.95rem,3.3vw,2.65rem);
  color:var(--em-800);line-height:1;margin-bottom:8px;font-weight:800;letter-spacing:-.02em;
}
.stat span{font-size:.775rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.section-dark .stat{background:rgba(255,255,255,.055);border-color:rgba(248,211,114,.18)}
.section-dark .stat b{color:var(--gd-300)}
.section-dark .stat span{color:rgba(202,222,247,.66)}
.section-dark .stat-ic{color:var(--gd-400)}

/* ---------- 11. PLAN CARDS ---------- */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  position:relative;
}
.plan:hover{transform:translateY(-9px);box-shadow:var(--sh-lg);border-color:var(--gd-400)}
.plan-top{
  background:linear-gradient(150deg,var(--em-700),var(--em-900));
  padding:26px 26px 22px;color:#fff;position:relative;overflow:hidden;
}
.plan-top::after{
  content:"";position:absolute;top:-52%;right:-24%;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,181,29,.26),transparent 68%);
}
.plan-code{
  display:inline-block;font-size:.635rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--em-950);background:var(--grad-gold);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:16px;
  position:relative;z-index:1;
}
.plan-val{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;
  position:relative;z-index:1;
}
.plan-val small{font-size:.95rem;font-weight:600;color:var(--gd-300);display:block;margin-top:8px;font-family:var(--f-body)}
.plan-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.plan-body ul{margin-bottom:22px;flex:1}
.plan-body li{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:.885rem;
}
.plan-body li:last-child{border:0}
.plan-body li span{color:var(--muted)}
.plan-body li b{color:var(--em-800);font-weight:800;white-space:nowrap}
.plan .btn{width:100%}
.plan.feat{border-color:var(--gd-500);box-shadow:var(--sh-md)}
.plan-tag{
  position:absolute;top:20px;right:20px;z-index:3;
  background:var(--grad-gold);color:var(--em-950);
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-pill);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

/* ---------- 12. TABLES ---------- */
.table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--sh-md);-webkit-overflow-scrolling:touch;
}
.tbl{min-width:680px;font-size:.885rem}
.tbl-dense{min-width:900px;font-size:.83rem}
.tbl thead th{
  background:linear-gradient(150deg,var(--em-700),var(--em-900));color:#fff;
  padding:15px 16px;text-align:left;font-weight:800;font-size:.715rem;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
  border-right:1px solid rgba(255,255,255,.08);vertical-align:middle;
}
.tbl-dense thead th,.tbl-dense tbody td{padding-inline:13px}
.tbl thead th:last-child{border-right:0}
.tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .25s}
.tbl tbody tr:nth-child(even){background:var(--em-50)}
.tbl tbody tr:hover{background:var(--gd-100)}
.tbl tbody td:first-child{font-weight:800;color:var(--em-800)}
.tbl .num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700}
.tbl .hl{color:var(--gd-700);font-weight:800}
.tbl-note{
  display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:20px 24px;
  background:var(--gd-100);border:1px solid var(--line-gd);border-radius:var(--r-md);
  font-size:.85rem;color:var(--ink-2);line-height:1.62;
}
.tbl-note svg{width:20px;height:20px;color:var(--gd-600);flex-shrink:0;margin-top:2px}
.scroll-hint{
  display:flex;font-size:.775rem;color:var(--muted);margin-bottom:12px;
  align-items:center;gap:8px;font-weight:700;
}
.scroll-hint svg{width:15px;height:15px}

/* ---------- 13. CHECK LIST ---------- */
.checks{display:grid;gap:15px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;line-height:1.62}
.check-ic{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background:var(--grad-gold);color:var(--em-950);display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(214,156,18,.32);
}
.check-ic svg{width:13px;height:13px;stroke-width:3.4}
.section-dark .checks li{color:rgba(213,229,250,.86)}

/* ---------- 14. SPLIT SECTION ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev .split-media{order:-1}
.split-media{
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:var(--grad-em);min-height:400px;display:grid;place-items:center;padding:44px;
  box-shadow:var(--sh-lg);
}
.split-media::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 25%,rgba(242,181,29,.22),transparent 60%);
}

/* ---------- 15. STEPS / FLOW ---------- */
.steps{display:grid;gap:0;counter-reset:s}
.step{
  display:grid;grid-template-columns:74px 1fr;gap:26px;
  padding:30px 0;border-bottom:1px solid var(--line);position:relative;
}
.step:last-child{border-bottom:0}
.step-n{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:1.38rem;font-weight:800;
  background:var(--grad-gold);color:var(--em-950);
  box-shadow:0 8px 22px rgba(214,156,18,.3);
}
.step-body h4{margin-bottom:8px;color:var(--em-800);font-size:1.13rem}
.step-body p{font-size:.94rem}
.section-dark .step{border-color:rgba(248,211,114,.16)}
.section-dark .step-body h4{color:var(--gd-200)}

/* Flow diagram */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
.flow-node{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px;text-align:center;position:relative;box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.flow-node:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.flow-node .ic{margin:0 auto 16px}
.flow-node h4{font-size:.97rem;margin-bottom:7px;color:var(--em-800)}
.flow-node p{font-size:.83rem;line-height:1.58}
.section-dark .flow-node{
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:rgba(248,211,114,.18);box-shadow:none;
}
.section-dark .flow-node:hover{border-color:rgba(248,211,114,.44);box-shadow:0 18px 44px rgba(4,31,66,.34)}
.section-dark .flow-node h4{color:#fff}
.section-dark .flow-node p{color:rgba(208,225,248,.74)}
.section-dark .flow-node:hover .ic{background:var(--grad-gold);color:var(--em-950);border-color:transparent}
.flow-node:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-13px;width:8px;height:8px;z-index:2;
  border-top:2px solid var(--gd-500);border-right:2px solid var(--gd-500);
  transform:translateY(-50%) rotate(45deg);
}

/* ---------- 16. USES GRID ---------- */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.use{
  display:block;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 20px;text-align:center;box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.use:hover{transform:translateY(-7px);box-shadow:var(--sh-md);border-color:var(--gd-400)}
.use .ic{margin:0 auto 15px;width:52px;height:52px}
.use:hover .ic{background:var(--grad-gold);color:var(--em-950)}
.use h4{font-size:.99rem;color:var(--em-800);margin-bottom:4px}
.use span{font-size:.79rem;color:var(--muted);font-family:var(--f-tamil)}
/* On a dark section these cards still read as light cards. .card-dark's own
   hover rule would swap in a translucent dark background and leave the navy
   label invisible — these keep the light surface in every state. */
.use.card-dark,
.use.card-dark:hover{background:var(--paper)}
.use.card-dark{border-color:var(--line)}
.use.card-dark:hover{border-color:var(--gd-400)}
.use.card-dark h4{color:var(--em-800)}
a.use:focus-visible{outline:3px solid var(--gd-400);outline-offset:3px}

#plans{scroll-margin-top:calc(var(--header-h) + 12px)}
/* "Showing plans for …" line under the plan filters */
.purpose-note{
  text-align:center;margin:-28px 0 34px;font-size:.88rem;color:var(--muted);
}
.purpose-note b{color:var(--em-800);font-weight:800}
.purpose-note a{
  color:var(--gd-700);font-weight:800;text-decoration:underline;
  text-underline-offset:3px;margin-left:8px;
}
.purpose-note a:hover{color:var(--em-800)}

/* ---------- 17. TESTIMONIALS ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 30px;box-shadow:var(--sh-sm);position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.quote:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.quote-mark{
  font-family:var(--f-display);font-size:4.4rem;line-height:.6;
  color:var(--gd-300);margin-bottom:12px;display:block;
}
.quote p{font-size:.945rem;line-height:1.76;font-style:italic;margin-bottom:24px;color:var(--ink-2)}
.quote-by{display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--line)}
.avatar{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--grad-em);color:var(--gd-300);
  font-family:var(--f-display);font-size:1.14rem;font-weight:700;
}
.quote-by b{display:block;font-size:.92rem;color:var(--em-800)}
.quote-by span{font-size:.775rem;color:var(--muted)}
.stars{display:flex;gap:2px;margin-bottom:16px}
.stars svg{width:15px;height:15px;color:var(--gd-500)}

/* ---------- 18. GALLERY ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gal-item{
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  aspect-ratio:4/3;background:var(--grad-em);
  display:grid;place-items:center;padding:32px;text-align:center;
  box-shadow:var(--sh-md);transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.gal-item::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 65% 30%,rgba(242,181,29,.2),transparent 62%);
  transition:opacity .45s;
}
.gal-item:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--sh-lg)}
.gal-inner{position:relative;z-index:2}
.gal-inner .ic{margin:0 auto 18px;background:rgba(242,181,29,.16);color:var(--gd-300);border:1px solid rgba(248,211,114,.24)}
.gal-inner h4{color:#fff;margin-bottom:6px}
.gal-inner p{color:rgba(202,222,247,.7);font-size:.85rem}
.gal-item.tall{aspect-ratio:4/5.4}
.gal-item.wide{grid-column:span 2;aspect-ratio:auto;min-height:280px}

/* ---------- 19. FORM ---------- */
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,46px);box-shadow:var(--sh-lg);
}
.field{margin-bottom:20px}
.field label{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--em-800);margin-bottom:9px;
}
.field label i{color:var(--gd-600);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-md);
  font:inherit;font-size:.93rem;color:var(--ink);background:var(--ivory);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),background .28s;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gd-500);background:var(--paper);
  box-shadow:0 0 0 4px rgba(242,181,29,.13);
}
.field input::placeholder,.field textarea::placeholder{color:#7C8AA6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7B74' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-msg{
  display:none;margin-top:18px;padding:16px 20px;border-radius:var(--r-md);
  background:var(--em-50);border:1px solid var(--em-300);color:var(--em-700);
  font-size:.9rem;font-weight:700;
}
.form-msg.show{display:flex;gap:11px;align-items:center;animation:fadeUp .5s var(--ease)}
.form-msg svg{width:19px;height:19px;flex-shrink:0}
.note-sm{font-size:.78rem;color:var(--muted);margin-top:14px;line-height:1.6}

/* ---------- 20. CONTACT INFO ---------- */
.cinfo{display:flex;flex-direction:column;gap:16px}
.cinfo-item{
  display:flex;gap:18px;align-items:flex-start;padding:22px 24px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.cinfo-item:hover{transform:translateX(5px);box-shadow:var(--sh-md);border-color:var(--line-gd)}
.cinfo-item .ic{width:48px;height:48px;margin:0}
.cinfo-item:hover .ic{background:var(--grad-gold);color:var(--em-950)}
.cinfo-item h4{font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gd-600);margin-bottom:7px}
.cinfo-item p,.cinfo-item a{font-size:.95rem;color:var(--ink-2);line-height:1.62;display:block}
.cinfo-item a:hover{color:var(--gd-700)}
.cinfo-item b{color:var(--em-800);font-weight:800}

/* ---------- 21. CTA BAND ---------- */
.cta{
  background:var(--grad-em);border-radius:var(--r-xl);
  padding:clamp(38px,5vw,62px);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:38px;flex-wrap:wrap;
  box-shadow:var(--sh-lg);
}
.cta::before{
  content:"";position:absolute;top:-58%;right:-8%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,181,29,.26),transparent 66%);
}
.cta > *{position:relative;z-index:2}
.cta h2{color:#fff;margin-bottom:11px;font-size:clamp(1.7rem,2.9vw,2.4rem)}
.cta p{color:rgba(211,228,249,.78);max-width:52ch}

/* ---------- 22. FOOTER ---------- */
.footer{background:var(--em-950);color:rgba(202,222,247,.66);padding-top:76px;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-gold);opacity:.45;
}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:44px;padding-bottom:56px}
.f-brand{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.f-brand img{width:48px;height:48px}
.f-brand .brand-name{color:#fff}
.f-brand .brand-sub{color:var(--gd-400)}
.f-about{font-size:.9rem;line-height:1.72;margin-bottom:24px;color:rgba(202,222,247,.62)}
.f-tag{
  display:inline-flex;gap:10px;align-items:center;font-family:var(--f-display);
  font-size:1.04rem;color:var(--gd-300);
}
.f-tag svg{width:17px;height:17px;color:var(--gd-400);flex-shrink:0}
.f-col h4{
  color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:22px;position:relative;padding-bottom:13px;
}
.f-col h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--grad-gold)}
.f-col li{margin-bottom:11px}
.f-col a,.f-col p{font-size:.895rem;color:rgba(202,222,247,.66);transition:color .28s var(--ease),padding-left .28s var(--ease)}
.f-col a:hover{color:var(--gd-300);padding-left:5px}
.f-contact li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px;font-size:.895rem;line-height:1.6}
.f-contact svg{width:16px;height:16px;color:var(--gd-400);flex-shrink:0;margin-top:4px}
.f-contact a{color:rgba(202,222,247,.72)}
.f-contact a:hover{color:var(--gd-300);padding-left:0}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(248,211,114,.17);
  color:rgba(202,222,247,.78);transition:.32s var(--ease);
}
.socials a:hover{background:var(--grad-gold);color:var(--em-950);border-color:transparent;transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.f-bar{
  border-top:1px solid rgba(255,255,255,.07);padding:24px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:.815rem;color:rgba(202,222,247,.5);
}
.f-bar-r{display:flex;gap:22px;align-items:center}
.f-bar-r span{color:var(--gd-400);font-weight:700}

/* ---------- 23. FLOATING ACTIONS ---------- */
.fabs{position:fixed;right:20px;bottom:20px;z-index:800;display:flex;flex-direction:column;gap:12px}
.fab{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--sh-lg);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.fab:hover{transform:translateY(-4px) scale(1.06)}
.fab svg{width:25px;height:25px}
.fab-wa{background:#1FA855;color:#fff}
.fab-call{background:var(--grad-gold);color:var(--em-950)}
.to-top{
  width:46px;height:46px;border-radius:50%;background:var(--em-800);color:var(--gd-300);
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.4s var(--ease);border:1px solid rgba(248,211,114,.24);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg{width:19px;height:19px}

/* ---------- 24. ANIMATIONS ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- 25. RESPONSIVE ---------- */
/* Between the full-width layout and the burger breakpoint the nav has to
   earn its space — tighten it rather than let the header overflow and
   clip the CTA. */
@media (max-width:1520px){
  .header-inner{gap:18px}
  .hdr-phone{display:none}
  .nav a{padding:10px 9px;font-size:.815rem}
  .nav a::after{left:9px;right:9px}
}
@media (max-width:1340px){
  .header-inner{gap:12px}
  .nav{gap:1px}
  .nav a{padding:9px 7px;font-size:.775rem}
  .nav a::after{left:7px;right:7px}
  .brand-name{font-size:1.40rem}
  .brand-sub{font-size:.545rem;letter-spacing:.16em}
  .brand img{width:44px;height:44px}
}
/* Below this the two columns stack: message first, photograph beneath it. */
@media (max-width:1080px){
  .hero{min-height:0;padding:calc(var(--header-h) + clamp(30px,5vh,58px)) 0 clamp(52px,7vh,78px)}
  .hero-inner{grid-template-columns:1fr;gap:clamp(34px,5vw,50px);justify-items:center}
  .hero-copy{max-width:700px;text-align:center;margin-inline:auto}
  .hero .eyebrow{justify-content:center}
  .hero-sub{margin-inline:auto}
  .hero .btn-row{justify-content:center}
  .hero-visual,.about-visual{justify-self:center;max-width:600px}
  .hero-visual::before,.about-visual::before{inset:16px -16px -16px 16px}
  .hero-chip{left:16px;bottom:16px;padding:12px 18px}
}
@media (max-width:1220px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-phone{display:none}
  .g-4,.stats,.flow,.uses{grid-template-columns:repeat(2,1fr)}
  .flow-node:not(:last-child)::after{display:none}
  .f-grid{grid-template-columns:1fr 1fr;gap:38px}
  .split{grid-template-columns:1fr;gap:40px}
  .split.rev .split-media{order:0}
  .g-3,.plans-grid,.quotes,.gal{grid-template-columns:repeat(2,1fr)}
  .gal-item.wide{grid-column:span 2}
}
@media (max-width:720px){
  :root{--header-h:74px}
  .g-2,.g-3,.g-4,.stats,.plans-grid,.quotes,.gal,.flow,.uses,.f-row{grid-template-columns:1fr}
  .gal-item.wide{grid-column:span 1}
  .f-grid{grid-template-columns:1fr;gap:34px}
  .brand-name{font-size:1.2rem}
  .brand-sub{font-size:.5rem;letter-spacing:.15em}
  .brand img{width:38px;height:38px}
  .hero{padding-top:calc(var(--header-h) + 34px)}
  .hero-frame img,.about-frame img{aspect-ratio:4 / 3}
  .hero-visual::before,.about-visual::before{inset:11px -11px -11px 11px}
  .hero-chip{left:12px;bottom:12px;padding:10px 15px}
  .hero-chip b{font-size:.96rem}
  .hero-chip span{font-size:.6rem;letter-spacing:.11em}
  /* the eyebrow's leading dash strands itself when the label wraps */
  .hero .eyebrow{justify-content:center;text-align:center;line-height:1.7}
  .hero .eyebrow::before{display:none}
  .btn-xl{padding:16px 32px;font-size:.93rem}
  /* Header: burger only — the drawer carries the CTA */
  .header-cta > .btn{display:none}
  .header-inner{gap:12px}
  .cta{flex-direction:column;text-align:center;align-items:center}
  .cta .btn-row{justify-content:center}
  .step{grid-template-columns:1fr;gap:16px}
  .f-bar{flex-direction:column;text-align:center}
  .section{padding:56px 0}
  .fabs{right:14px;bottom:14px}
  .fab{width:50px;height:50px}
}
@media (max-width:420px){
  .btn{padding:13px 22px;font-size:.87rem}
  .wrap,.wrap-wide{padding-inline:18px}
}

/* ---------- 26. PRINT ---------- */
@media print{
  .header,.drawer,.scrim,.fabs,.cta,.footer .socials{display:none!important}
  body{background:#fff}
  .hero-visual,.about-visual{display:none!important}
  .section-dark,.hero{background:#fff!important;color:#000!important}
  .section-dark h1,.section-dark h2,.hero h1{color:#000!important}
}

/* ============================================================
   27. CHIT CALCULATOR
   ============================================================ */

/* [hidden] must beat every display rule below it */
#calcApp [hidden],.section-tint [hidden]{display:none !important}

/* ---------- Tabs ---------- */
.calc-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;box-shadow:var(--sh-sm);margin-bottom:34px;
}
.calc-tab{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:18px 14px;border-radius:var(--r-md);font-weight:800;font-size:.9rem;
  color:var(--ink-2);transition:.3s var(--ease);position:relative;
}
.calc-tab > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.calc-tab small{font-size:.735rem;font-weight:600;color:var(--muted);line-height:1.4}
.calc-tab svg{width:24px;height:24px;color:var(--gd-600);transition:.3s var(--ease)}
.calc-tab:hover{background:var(--em-50)}
.calc-tab[aria-selected="true"]{background:var(--grad-em);color:#fff;box-shadow:0 10px 26px rgba(11,61,122,.26)}
.calc-tab[aria-selected="true"] svg{color:var(--gd-300)}
.calc-tab[aria-selected="true"] small{color:rgba(202,222,247,.72)}

.calc-panel{display:none;animation:fadeUp .45s var(--ease)}
.calc-panel.active{display:block}

/* ---------- Calculator shell ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
/* Grid children default to min-width:auto, which let a long label push the
   input panel wider than a phone screen. */
.calc-grid > *,.auc-grid > *{min-width:0}
.calc-inputs,.calc-output{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,38px);box-shadow:var(--sh-md);
}
.calc-output{
  background:var(--grad-em);border-color:transparent;color:#fff;
  position:relative;overflow:hidden;box-shadow:var(--sh-lg);
}
.calc-output::before{
  content:"";position:absolute;top:-46%;right:-18%;width:66%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,181,29,.22),transparent 66%);pointer-events:none;
}
.calc-output > *{position:relative;z-index:2}
.calc-title{
  font-family:var(--f-display);font-size:1.32rem;color:var(--em-800);
  margin-bottom:6px;font-weight:700;
}
.calc-output .calc-title{color:#fff}
.calc-sub{font-size:.855rem;color:var(--muted);margin-bottom:26px;line-height:1.6}
.calc-output .calc-sub{color:rgba(202,222,247,.7)}

/* ---------- Input rows ---------- */
.calc-field{margin-bottom:24px}
.calc-field:last-of-type{margin-bottom:0}
.calc-field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--em-800);margin-bottom:10px;
}
.calc-field label em{
  font-style:normal;font-size:.7rem;letter-spacing:0;text-transform:none;
  font-weight:600;color:var(--muted);
}
.calc-input{
  display:flex;align-items:center;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--ivory);overflow:hidden;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),background .28s;
}
.calc-input:focus-within{
  border-color:var(--gd-500);background:var(--paper);
  box-shadow:0 0 0 4px rgba(242,181,29,.13);
}
.calc-input .pfx{
  padding:0 4px 0 16px;font-family:var(--f-num);font-weight:800;color:var(--em-700);font-size:1.02rem;flex-shrink:0;
}
.calc-input .sfx{
  padding:0 16px;font-size:.8rem;font-weight:700;color:var(--muted);
  white-space:nowrap;flex-shrink:0;
}
.calc-input input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;outline:0;
  padding:14px 8px;font:inherit;font-family:var(--f-num);font-size:1.06rem;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-input input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* A long option label must not stretch the field past the screen */
.calc-input select{flex:1;min-width:0;width:100%;max-width:100%;text-overflow:ellipsis}
.calc-input.err{border-color:#C0453B;background:#FEF5F4}
.calc-input.err:focus-within{box-shadow:0 0 0 4px rgba(192,69,59,.12)}

.calc-err{
  display:none;font-size:.79rem;color:#A8382F;font-weight:700;margin-top:8px;
  align-items:flex-start;gap:7px;line-height:1.5;
}
.calc-err.show{display:flex}
.calc-err svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}

/* Range slider */
.calc-range{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;margin-top:16px;
  border-radius:var(--r-pill);background:var(--em-100);outline:0;cursor:pointer;
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--grad-gold);border:2px solid #fff;cursor:grab;
  box-shadow:0 3px 10px rgba(214,156,18,.42);transition:transform .2s var(--ease);
}
.calc-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.14)}
.calc-range::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#F2B51D;border:2px solid #fff;
  cursor:grab;box-shadow:0 3px 10px rgba(214,156,18,.42);
}
.range-ends{
  display:flex;justify-content:space-between;font-size:.71rem;color:var(--muted);
  font-weight:700;margin-top:7px;
}

/* Quick-pick chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--paper);font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:.775rem;font-weight:800;color:var(--ink-2);
  transition:.26s var(--ease);
}
.chip:hover{border-color:var(--gd-400);background:var(--gd-100);color:var(--em-800)}
.chip.on{background:var(--grad-em);color:#fff;border-color:transparent}

/* ---------- Result display ---------- */
.res-hero{
  border:1px solid rgba(248,211,114,.26);border-radius:var(--r-lg);
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  padding:26px 24px;margin-bottom:16px;
}
.res-hero.primary{
  background:var(--grad-gold);border-color:transparent;
  box-shadow:0 14px 34px rgba(214,156,18,.32);
}
.res-hero .res-label{
  font-size:.68rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gd-300);margin-bottom:10px;display:block;
}
.res-hero.primary .res-label{color:rgba(4,31,66,.62)}
.res-hero .res-value{
  font-family:var(--f-num);font-size:clamp(1.8rem,3.9vw,2.5rem);font-weight:800;
  color:#fff;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  transition:opacity .18s var(--ease);
}
.res-hero.primary .res-value{color:var(--em-950)}
.res-hero .res-note{
  font-size:.775rem;margin-top:9px;color:rgba(202,222,247,.68);line-height:1.55;
}
.res-hero.primary .res-note{color:rgba(4,31,66,.66);font-weight:600}
.res-value.flash{opacity:.35}

/* Working-out rows */
.res-work{
  border-top:1px solid rgba(248,211,114,.2);margin-top:22px;padding-top:20px;
}
.res-work h5{
  font-size:.68rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gd-300);margin-bottom:14px;
}
.res-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px dashed rgba(248,211,114,.18);font-size:.875rem;
}
.res-row:last-child{border-bottom:0}
.res-row span{color:rgba(202,222,247,.74)}
.res-row b{font-family:var(--f-num);color:#fff;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.res-row.minus b{color:#F0AFA8}
.res-row.total{
  border-top:1px solid rgba(248,211,114,.3);border-bottom:0;margin-top:8px;padding-top:16px;
}
.res-row.total span{color:#fff;font-weight:800}
.res-row.total b{color:var(--gd-300);font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:1.16rem;font-weight:800}

/* Empty / invalid state */
.res-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:44px 20px;color:rgba(202,222,247,.62);
}
.res-empty svg{width:42px;height:42px;color:var(--gd-400);margin-bottom:16px;opacity:.8}
.res-empty p{color:rgba(202,222,247,.62);font-size:.9rem;max-width:34ch}

/* ---------- Matched plans ---------- */
.match-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:24px;
}
.match-count{
  font-size:.775rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gd-700);background:var(--gd-100);border:1px solid var(--line-gd);
  padding:7px 15px;border-radius:var(--r-pill);
}
.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.match{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s;
  animation:fadeUp .45s var(--ease) backwards;
}
.match:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--gd-400)}
.match.best{border-color:var(--gd-500);box-shadow:var(--sh-md)}
.match.best::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-gold);
}
.match-tag{
  position:absolute;top:16px;right:16px;background:var(--grad-gold);color:var(--em-950);
  font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);
}
.match-code{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--em-700);background:var(--em-50);
  padding:5px 11px;border-radius:var(--r-pill);margin-bottom:14px;
}
.match-val{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:1.68rem;font-weight:800;color:var(--em-800);
  line-height:1.1;letter-spacing:-.02em;margin-bottom:4px;
}
.match-valsub{font-size:.73rem;color:var(--muted);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.match ul{margin-bottom:18px}
.match li{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px dashed var(--line);font-size:.845rem;
}
.match li:last-child{border-bottom:0}
.match li span{color:var(--muted)}
.match li b{color:var(--em-800);font-weight:800;white-space:nowrap}
.match .btn{width:100%}

.no-match{
  text-align:center;padding:52px 28px;background:var(--paper);
  border:1px dashed var(--line-gd);border-radius:var(--r-lg);
}
.no-match .ic{margin:0 auto 18px}
.no-match h4{color:var(--em-800);margin-bottom:8px}
.no-match p{font-size:.9rem;max-width:46ch;margin:0 auto 22px}

/* ---------- Auction breakdown ---------- */
.auc-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:30px;align-items:start}
.auc-out{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.auc-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px;box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.auc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.auc-card .res-label{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.auc-card .res-value{
  font-family:var(--f-num);font-size:1.56rem;font-weight:800;color:var(--em-800);
  line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.auc-card .res-note{font-size:.735rem;color:var(--muted);margin-top:7px;line-height:1.5}
.auc-card.gold{background:var(--grad-gold);border-color:transparent;box-shadow:var(--sh-gd)}
.auc-card.gold .res-label{color:rgba(4,31,66,.6)}
.auc-card.gold .res-value{color:var(--em-950)}
.auc-card.gold .res-note{color:rgba(4,31,66,.66);font-weight:600}
.auc-card.dark{background:var(--grad-em);border-color:transparent}
.auc-card.dark .res-label{color:var(--gd-300)}
.auc-card.dark .res-value{color:#fff}
.auc-card.dark .res-note{color:rgba(202,222,247,.68)}
.auc-card.span2{grid-column:span 2}

/* Waterfall bar */
.waterfall{margin-top:24px}
.wf-bar{
  display:flex;height:46px;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-sm);border:1px solid var(--line);
}
.wf-seg{
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
  color:#fff;transition:flex-basis .5s var(--ease);overflow:hidden;white-space:nowrap;
  min-width:0;
}
.wf-prize{background:linear-gradient(150deg,var(--em-600),var(--em-800))}
.wf-div{background:linear-gradient(150deg,#F5C446,#F2B51D);color:var(--em-950)}
.wf-com{background:linear-gradient(150deg,#B8830A,#8C6408)}
.wf-key{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
.wf-key span{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);font-weight:700}
.wf-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}

/* Projection toggle */
.proj-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 24px;background:var(--em-50);border:1px solid var(--line);
  border-radius:var(--r-lg);margin-top:32px;
}
.proj-toggle p{font-size:.85rem;margin:0}
.proj-body{display:none;margin-top:22px}
.proj-body.open{display:block;animation:fadeUp .45s var(--ease)}

/* ---------- FAQ ACCORDION ---------- */
.faq-cat{
  font-family:var(--f-display);font-size:1.3rem;color:var(--em-800);
  margin:48px 0 18px;
}
.faq-cat:first-of-type{margin-top:0}
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:840px;margin-inline:auto}
.faq-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.faq-item:hover{border-color:var(--line-gd)}
.faq-item[open]{border-color:var(--gd-400);box-shadow:var(--sh-md)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:19px 22px;font-family:var(--f-display);font-weight:700;font-size:1.02rem;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--gd-100);
  color:var(--gd-700);display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.faq-plus svg{width:14px;height:14px;stroke-width:2.4}
.faq-item[open] .faq-plus{background:var(--grad-gold);color:var(--em-950);transform:rotate(45deg)}
.faq-a{padding:0 22px 22px 22px;color:var(--ink-2);font-size:.95rem;line-height:1.74}
.section-dark .faq-item{background:rgba(255,255,255,.06);border-color:rgba(248,211,114,.18)}
.section-dark .faq-item summary{color:#fff}
.section-dark .faq-a{color:rgba(213,229,250,.8)}

/* ---------- CAREERS ---------- */
.role-tag{
  display:inline-flex;align-items:center;padding:5px 13px;border-radius:var(--r-pill);
  background:var(--gd-100);color:var(--gd-700);font-size:.68rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;
}
.role-card{display:flex;flex-direction:column;height:100%}
.role-card .checks{margin-bottom:22px;flex-grow:1}
.role-card .btn-row{margin-top:auto}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .calc-grid,.auc-grid{grid-template-columns:1fr}
  .match-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .calc-tabs{grid-template-columns:1fr;gap:6px;padding:8px}
  .calc-tab{flex-direction:row;justify-content:flex-start;text-align:left;gap:13px;padding:14px}
  .calc-tab svg{width:20px;height:20px}
  .match-grid,.auc-out{grid-template-columns:1fr}
  .auc-card.span2{grid-column:span 1}
  .wf-seg{font-size:.64rem}
}

/* ============================================================
   28. FOUNDER / LEADERSHIP
   ============================================================ */
.founder-sec{background:var(--paper)}
.founder{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(34px,5vw,72px);align-items:center;
}

/* --- Portrait --- */
.founder-media{position:relative}
.founder-frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:4/5;background:var(--grad-em);
  box-shadow:0 18px 44px rgba(5,48,107,.16),0 40px 90px rgba(5,48,107,.12);
  isolation:isolate;
}
.founder-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;position:relative;z-index:2;
}
/* Warm gold wash so the portrait sits inside the palette */
.founder-frame::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(4,31,66,.55) 0%,rgba(4,31,66,.12) 34%,transparent 62%);
}
/* Soft gold halo behind the portrait — no hard outline anywhere */
.founder-media::before{
  content:"";position:absolute;z-index:0;inset:auto -6% -7% -8%;height:72%;
  border-radius:var(--r-xl);
  background:radial-gradient(ellipse at 30% 100%,rgba(242,181,29,.26),transparent 68%);
  filter:blur(6px);
}

/* Placeholder shown until the real photograph is added */
.founder-ph{
  position:absolute;inset:0;z-index:2;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:28px;color:rgba(214,230,250,.7);
}
.founder-frame.no-photo img{display:none}
.founder-frame.no-photo .founder-ph{display:flex}
.founder-ph-mark{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:rgba(242,181,29,.14);color:var(--gd-300);
  font-family:var(--f-display);font-size:2.6rem;font-weight:700;line-height:1;
}
.founder-ph span{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}

/* Floating credential chip */
.founder-chip{
  position:absolute;z-index:4;right:-14px;bottom:26px;
  background:var(--paper);border-radius:var(--r-lg);
  padding:16px 22px;box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:13px;
}
.founder-chip svg{width:22px;height:22px;color:var(--gd-600);flex-shrink:0}
.founder-chip b{display:block;font-family:var(--f-display);font-size:1.16rem;color:var(--em-800);line-height:1.2}
.founder-chip small{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* --- Copy --- */
.founder-quote{
  position:relative;font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.22rem,2.1vw,1.62rem);line-height:1.62;color:var(--ink);
  margin:0 0 26px;padding-left:clamp(26px,3vw,38px);
}
.founder-quote::before{
  content:"\201C";position:absolute;left:-4px;top:-12px;
  font-family:var(--f-display);font-size:4.6rem;line-height:1;
  color:var(--gd-400);opacity:.5;
}
.founder-copy p{margin-bottom:18px}
.founder-sign{
  display:flex;align-items:center;gap:18px;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--line);
}
.founder-sign-name{font-family:var(--f-display);font-size:1.34rem;color:var(--ink);line-height:1.25}
.founder-sign-role{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gd-600);margin-top:6px;
}
.founder-sign img{width:56px;height:56px;flex-shrink:0;opacity:.9}

@media (max-width:980px){
  .founder{grid-template-columns:1fr;gap:44px}
  .founder-media{max-width:420px;margin-inline:auto;width:100%}
  .founder-chip{right:0}
}
@media (max-width:520px){
  .founder-chip{position:static;margin-top:16px;justify-content:center}
}

/* ============================================================
   29. APPLICATION FORM (Careers)
   ============================================================ */
.apply-shell{
  max-width:880px;margin-inline:auto;background:var(--paper);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  padding:clamp(26px,4vw,48px);
}
.apply-head{text-align:center;margin-bottom:clamp(26px,3vw,36px)}
.apply-head h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:10px}
.apply-head p{color:var(--muted);font-size:.95rem;max-width:52ch;margin-inline:auto}

/* Step ribbon */
.apply-steps{
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-bottom:clamp(24px,3vw,34px);
}
.apply-step{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.73rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
.apply-step i{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--ivory);color:var(--muted);font-style:normal;font-size:.72rem;
  box-shadow:inset 0 0 0 1px var(--line);
}
.apply-step.on{color:var(--em-800)}
.apply-step.on i{background:var(--grad-gold);color:var(--em-950);box-shadow:var(--sh-gd)}
.apply-steps .apply-sep{width:26px;height:2px;background:var(--line);border-radius:2px}

/* Role-type chooser */
.apply-pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px}
.apply-opt{position:relative;display:flex}
.apply-opt input{position:absolute;opacity:0;width:0;height:0}
.apply-opt label{
  display:flex;gap:15px;align-items:flex-start;cursor:pointer;
  flex:1;padding:20px 22px;border-radius:var(--r-lg);background:var(--ivory);
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.apply-opt label:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--gd-400)}
.apply-opt input:checked + label{
  background:var(--gd-100);box-shadow:inset 0 0 0 2px var(--gd-500),var(--sh-md);
}
.apply-opt input:focus-visible + label{outline:3px solid rgba(242,181,29,.45);outline-offset:3px}
.apply-opt .ao-ic{
  width:42px;height:42px;border-radius:var(--r-md);flex-shrink:0;
  display:grid;place-items:center;background:var(--paper);color:var(--em-800);
  box-shadow:var(--sh-sm);transition:background .3s,color .3s;
}
.apply-opt .ao-ic svg{width:21px;height:21px}
.apply-opt input:checked + label .ao-ic{background:var(--grad-gold);color:var(--em-950)}
.apply-opt b{display:block;font-family:var(--f-display);font-size:1.12rem;color:var(--ink);line-height:1.3}
.apply-opt small{display:block;font-size:.82rem;color:var(--muted);margin-top:5px;line-height:1.55}

/* Field grid */
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.apply-grid .field.full{grid-column:1 / -1}
.field small.hint{display:block;font-size:.75rem;color:var(--muted);margin-top:7px;font-weight:500}
.field .err{
  display:none;font-size:.76rem;font-weight:700;color:#B4232A;margin-top:7px;
}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{
  border-color:#E08A8E;background:#FEF6F6;
}

/* Consent + submit */
.apply-consent{
  display:flex;gap:12px;align-items:flex-start;margin:6px 0 24px;
  font-size:.86rem;color:var(--ink-2);line-height:1.6;
}
.apply-consent input{
  width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--gd-600);cursor:pointer;
}
.apply-submit{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.apply-submit .btn{flex-shrink:0}
.apply-note{font-size:.79rem;color:var(--muted);line-height:1.6}

/* Success panel */
.apply-done{
  display:none;text-align:center;padding:clamp(20px,3vw,34px) 0;
}
.apply-done.show{display:block;animation:fadeUp .5s var(--ease)}
.apply-done .ad-ic{
  width:72px;height:72px;border-radius:50%;margin:0 auto 20px;
  display:grid;place-items:center;background:var(--grad-gold);color:var(--em-950);
  box-shadow:var(--sh-gd);
}
.apply-done .ad-ic svg{width:32px;height:32px}
.apply-done h3{margin-bottom:10px}
.apply-done p{color:var(--muted);max-width:46ch;margin:0 auto 22px}

@media (max-width:720px){
  .apply-pick{grid-template-columns:1fr}
  .apply-grid{grid-template-columns:1fr}
  .apply-steps .apply-sep{display:none}
  .apply-steps{gap:14px}
}

/* ============================================================
   30. MASCOT
   ============================================================ */
.mascot-fig{margin:0;display:flex;align-items:flex-end;justify-content:center}
.mascot-fig picture{display:block;height:100%;line-height:0}
.mascot-img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 18px rgba(4,31,66,.22))}

/* --- Friendly lead-in band (Careers, Calculator) --- */
.mascot-band{
  margin-bottom:clamp(24px,3.4vw,40px);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;
  gap:clamp(18px,3vw,38px);
  background:linear-gradient(120deg,var(--ivory) 0%,var(--gd-100) 100%);
  border-radius:var(--r-xl);padding:0 clamp(22px,3.4vw,42px);
  position:relative;overflow:hidden;box-shadow:var(--sh-sm);
}
.mascot-band::before{
  content:"";position:absolute;top:-46%;right:-6%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,181,29,.22),transparent 68%);
}
.mascot-band > *{position:relative;z-index:2}
.mascot-band .mascot-fig{align-self:end;height:clamp(166px,19.5vw,228px)}
.mascot-band .mascot-img{filter:drop-shadow(0 8px 14px rgba(4,31,66,.16))}
.mascot-band .mb-copy{padding:clamp(26px,3.4vw,40px) 0}
.mascot-band .mb-copy h3{font-size:clamp(1.2rem,2.1vw,1.6rem);margin-bottom:10px}
.mascot-band .mb-copy p{color:var(--ink-2);font-size:.96rem;line-height:1.7;margin:0;max-width:56ch}
.mascot-band .mb-copy p + p{margin-top:10px}
.mascot-band .mb-name{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gd-700);
}
.mascot-band .mb-name svg{width:14px;height:14px}

/* Dark variant, for use on navy sections */
.mascot-band.on-dark{
  background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(248,211,114,.2);
}
.mascot-band.on-dark .mb-copy h3{color:#fff}
.mascot-band.on-dark .mb-copy p{color:rgba(211,228,249,.8)}
.mascot-band.on-dark .mb-name{color:var(--gd-300)}

/* --- Mascot inside the home CTA band --- */
.cta.cta-mascot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  padding-bottom:0;gap:clamp(20px,3vw,48px);
}
.cta.cta-mascot .cta-copy{padding-bottom:clamp(38px,5vw,62px)}
.cta.cta-mascot .cta-copy .btn-row{margin-top:26px}
.cta.cta-mascot .mascot-fig{
  align-self:end;height:clamp(206px,26vw,332px);
}
.cta.cta-mascot .mascot-img{filter:drop-shadow(0 6px 16px rgba(0,0,0,.36))}

@media (max-width:900px){
  .mascot-band{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:26px}
  .mascot-band .mb-copy{padding-top:0}
  .mascot-band .mb-copy p{margin-inline:auto}
  .mascot-band .mascot-fig{align-self:center;height:clamp(150px,33vw,196px)}
  .cta.cta-mascot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  .cta.cta-mascot .cta-copy{padding-bottom:8px}
  .cta.cta-mascot .cta-copy .btn-row{justify-content:center}
  .cta.cta-mascot .cta-copy p{margin-inline:auto}
  .cta.cta-mascot .mascot-fig{align-self:center;height:clamp(180px,45vw,244px)}
}

/* ============================================================
   33. IMAGERY & ATMOSPHERE
   ------------------------------------------------------------
   A continuous, page-wide backdrop plus per-section artwork.

   Three layers, in order:
     1. body::before  — a fixed canvas that covers the whole scroll,
                        so no part of any page is ever plain.
     2. .has-bg::before / ::after — the section's own artwork and the
                        scrim that keeps every word on top of it legible.
     3. body::after   — one shared film-grain pass over everything.

   All artwork lives in assets/img/bg/. Every rule states a .jpg first
   and an image-set() with the .webp second, so modern browsers take the
   smaller file and older ones still get a picture.
   ============================================================ */

/* ---------- 33.1 The page-wide canvas ---------- */
body{background:var(--ivory)}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:url("../img/bg/canvas-light.jpg");
  background-image:image-set(url("../img/bg/canvas-light.webp") type("image/webp"),
                             url("../img/bg/canvas-light.jpg") type("image/jpeg"));
  background-position:center center;background-size:cover;background-repeat:no-repeat;
}
/* Shared grain. Vector artwork without it reads as flat clipart; one small
   turbulence tile over the whole page gives every surface the same texture. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:640px){body::after{opacity:.04}}

/* ---------- 33.2 Section artwork ---------- */
.has-bg{position:relative;overflow:hidden;isolation:isolate}
.has-bg > .wrap,
.has-bg > .wrap-wide{position:relative;z-index:3}
.has-bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
}
.has-bg::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Denser at the top and bottom edges so neighbouring sections melt into
     one another instead of meeting at a hard seam. */
  background:linear-gradient(180deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.66) 12%,
    rgba(255,255,255,.60) 50%,
    rgba(255,255,255,.68) 88%,
    rgba(236,243,253,.84) 100%);
}
/* Tinted sections keep their cooler cast, so the page rhythm survives */
.has-bg.section-tint{background:none}
.has-bg.section-tint::after{
  background:linear-gradient(180deg,
    rgba(236,243,253,.86) 0%,
    rgba(230,239,252,.72) 12%,
    rgba(224,236,251,.66) 50%,
    rgba(229,238,252,.74) 88%,
    rgba(236,243,253,.87) 100%);
}
/* Dark sections: the artwork is already navy, so the scrim only has to
   deepen it enough for white type and gold accents to sing. */
.has-bg.section-dark::after{
  background:linear-gradient(180deg,
    rgba(4,31,66,.88) 0%,
    rgba(5,44,96,.62) 15%,
    rgba(5,40,88,.54) 50%,
    rgba(4,34,74,.64) 85%,
    rgba(4,31,66,.88) 100%);
}
.has-bg.section-dark::before{opacity:.95}

/* Secondary body copy sits directly on the artwork in a few places —
   darken it a step so it never softens against the texture. */
.has-bg .lead{color:var(--ink-2)}
.has-bg.section-dark .lead{color:rgba(214,230,250,.86)}
.has-bg .purpose-note{color:var(--ink-2)}
.has-bg .scroll-hint{color:var(--ink-2)}
/* The eyebrow is 12px uppercase, which is exactly the size that suffers
   first on a textured ground. Deepening it to an antique gold takes it
   past WCAG AA while the bright champagne dash beside it keeps the
   sparkle — the label reads as the same brand mark, just legibly. */
.has-bg .eyebrow{color:#8C6209}
.has-bg.section-dark .eyebrow{color:var(--gd-300)}

/* Cards lift a little further off a textured ground than off flat ivory */
.has-bg .card,
.has-bg .stat,
.has-bg .use,
.has-bg .quote,
.has-bg .plan,
.has-bg .form-card,
.has-bg .table-wrap,
.has-bg .apply-shell{box-shadow:var(--sh-md)}
.has-bg .card:hover,
.has-bg .use:hover,
.has-bg .quote:hover,
.has-bg .plan:hover{box-shadow:var(--sh-lg)}

/* ---------- 33.3 The artwork map ---------- */
.bg-trust::before{background-image:url("../img/bg/sec-trust.jpg");
  background-image:image-set(url("../img/bg/sec-trust.webp") type("image/webp"),url("../img/bg/sec-trust.jpg") type("image/jpeg"))}
.bg-plans::before{background-image:url("../img/bg/sec-plans.jpg");
  background-image:image-set(url("../img/bg/sec-plans.webp") type("image/webp"),url("../img/bg/sec-plans.jpg") type("image/jpeg"))}
.bg-growth::before{background-image:url("../img/bg/sec-growth.jpg");
  background-image:image-set(url("../img/bg/sec-growth.webp") type("image/webp"),url("../img/bg/sec-growth.jpg") type("image/jpeg"))}
.bg-family::before{background-image:url("../img/bg/sec-family.jpg");
  background-image:image-set(url("../img/bg/sec-family.webp") type("image/webp"),url("../img/bg/sec-family.jpg") type("image/jpeg"))}
.bg-voices::before{background-image:url("../img/bg/sec-voices.jpg");
  background-image:image-set(url("../img/bg/sec-voices.webp") type("image/webp"),url("../img/bg/sec-voices.jpg") type("image/jpeg"))}
.bg-ledger::before{background-image:url("../img/bg/sec-ledger.jpg");
  background-image:image-set(url("../img/bg/sec-ledger.webp") type("image/webp"),url("../img/bg/sec-ledger.jpg") type("image/jpeg"))}
.bg-faq::before{background-image:url("../img/bg/sec-faq.jpg");
  background-image:image-set(url("../img/bg/sec-faq.webp") type("image/webp"),url("../img/bg/sec-faq.jpg") type("image/jpeg"))}
.bg-journey::before{background-image:url("../img/bg/sec-journey.jpg");
  background-image:image-set(url("../img/bg/sec-journey.webp") type("image/webp"),url("../img/bg/sec-journey.jpg") type("image/jpeg"))}
.bg-contact::before{background-image:url("../img/bg/sec-contact.jpg");
  background-image:image-set(url("../img/bg/sec-contact.webp") type("image/webp"),url("../img/bg/sec-contact.jpg") type("image/jpeg"))}
.bg-heritage::before{background-image:url("../img/bg/sec-heritage.jpg");
  background-image:image-set(url("../img/bg/sec-heritage.webp") type("image/webp"),url("../img/bg/sec-heritage.jpg") type("image/jpeg"))}
.bg-compass::before{background-image:url("../img/bg/sec-compass.jpg");
  background-image:image-set(url("../img/bg/sec-compass.webp") type("image/webp"),url("../img/bg/sec-compass.jpg") type("image/jpeg"))}
.bg-table::before{background-image:url("../img/bg/sec-table.jpg");
  background-image:image-set(url("../img/bg/sec-table.webp") type("image/webp"),url("../img/bg/sec-table.jpg") type("image/jpeg"))}
/* The career artwork is the one place the people are meant to be seen, not
   just felt — so its scrim stays heavy where the headings sit and thins out
   lower down, over the figures. */
.bg-career::after,.bg-hire::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.72) 12%,
    rgba(255,255,255,.56) 40%,
    rgba(255,255,255,.46) 72%,
    rgba(236,243,253,.80) 100%);
}
.bg-interview::after{
  background:linear-gradient(180deg,
    rgba(4,31,66,.88) 0%,
    rgba(5,44,96,.60) 15%,
    rgba(5,40,88,.46) 50%,
    rgba(4,34,74,.52) 85%,
    rgba(4,31,66,.86) 100%);
}
/* Career: candidates in professional dress, the hiring desk, the interview */
.bg-career::before{background-image:url("../img/bg/sec-career.jpg");
  background-image:image-set(url("../img/bg/sec-career.webp") type("image/webp"),url("../img/bg/sec-career.jpg") type("image/jpeg"))}
.bg-hire::before{background-image:url("../img/bg/sec-hire.jpg");
  background-image:image-set(url("../img/bg/sec-hire.webp") type("image/webp"),url("../img/bg/sec-hire.jpg") type("image/jpeg"))}
.bg-interview::before{background-image:url("../img/bg/dark-interview.jpg");
  background-image:image-set(url("../img/bg/dark-interview.webp") type("image/webp"),url("../img/bg/dark-interview.jpg") type("image/jpeg"))}
.bg-auction::before{background-image:url("../img/bg/dark-auction.jpg");
  background-image:image-set(url("../img/bg/dark-auction.webp") type("image/webp"),url("../img/bg/dark-auction.jpg") type("image/jpeg"))}
.bg-branch::before{background-image:url("../img/bg/dark-branch.jpg");
  background-image:image-set(url("../img/bg/dark-branch.webp") type("image/webp"),url("../img/bg/dark-branch.jpg") type("image/jpeg"))}
.bg-uses::before{background-image:url("../img/bg/dark-uses.jpg");
  background-image:image-set(url("../img/bg/dark-uses.webp") type("image/webp"),url("../img/bg/dark-uses.jpg") type("image/jpeg"))}
.bg-math::before{background-image:url("../img/bg/dark-math.jpg");
  background-image:image-set(url("../img/bg/dark-math.webp") type("image/webp"),url("../img/bg/dark-math.jpg") type("image/jpeg"))}
.bg-apply::before{background-image:url("../img/bg/dark-apply.jpg");
  background-image:image-set(url("../img/bg/dark-apply.webp") type("image/webp"),url("../img/bg/dark-apply.jpg") type("image/jpeg"))}

/* ---------- 33.4 CTA band ---------- */
.cta{isolation:isolate}
.cta::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  background-image:url("../img/bg/cta-band.jpg");
  background-image:image-set(url("../img/bg/cta-band.webp") type("image/webp"),
                             url("../img/bg/cta-band.jpg") type("image/jpeg"));
  background-position:center right;background-size:cover;
  opacity:.92;
}
.cta::before{z-index:1}

/* ---------- 33.5 Footer ---------- */
.footer{isolation:isolate}
.footer::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../img/bg/footer.jpg");
  background-image:image-set(url("../img/bg/footer.webp") type("image/webp"),
                             url("../img/bg/footer.jpg") type("image/jpeg"));
  background-position:center bottom;background-size:cover;background-repeat:no-repeat;
  opacity:.85;
}
.footer > *{position:relative;z-index:2}
.footer::before{z-index:3}

/* ---------- 33.6 Gallery tiles ---------- */
.gal-item{isolation:isolate}
.gal-item .gal-img{
  position:absolute;inset:0;z-index:0;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  transition:transform .8s var(--ease);
}
.gal-item:hover .gal-img{transform:scale(1.07)}
/* The caption sits at the foot of the tile, so the wash only has to
   deepen the lower third — the picture stays open above it. */
.gal-item{place-items:end start;text-align:left;padding:26px 26px 24px}
.gal-item::before{
  z-index:1;
  background:linear-gradient(180deg,
    rgba(4,31,66,.14) 0%,
    rgba(4,31,66,.02) 26%,
    rgba(3,24,54,.44) 58%,
    rgba(3,20,46,.82) 84%,
    rgba(2,17,40,.92) 100%);
}
.gal-inner .ic{margin:0 0 12px;width:44px;height:44px;border-radius:13px}
.gal-inner .ic svg{width:21px;height:21px}
.gal-item.wide .gal-inner{max-width:72%}
.gal-item:hover::before{opacity:.88}
.gal-inner{z-index:2}
.gal-inner h4{text-shadow:0 1px 3px rgba(4,31,66,.85),0 2px 12px rgba(4,31,66,.6)}
.gal-inner p{color:rgba(219,233,251,.9);text-shadow:0 1px 3px rgba(4,31,66,.8)}

.gi-office{background-image:url("../img/1st.png")}
.gi-karur{background-image:url("../img/2nd.png")}
.gi-auction{background-image:url("../img/3rd.png")}
.gi-meeting{background-image:url("../img/4th.png")}
.gi-handover{background-image:url("../img/5th.png")}
.gi-milestone{background-image:url("../img/6th.png")}
.gi-team{background-image:url("../img/7th.png")}

/* These photographs carry their own headline and icons, so the tile shows
   the picture alone — no dark wash and no overlaid caption on top of it.
   The tiles follow the pictures' own 3:2 shape so nothing is cropped, and
   the last one is centred in its row. */
.gal-item{
  aspect-ratio:3 / 2;padding:0;
  /* golden frame: navy fills the padding box, the champagne gradient
     lives on the border box and drifts round the edge */
  border:2.5px solid transparent;
  background:
    linear-gradient(155deg,#062C5E 0%,#041F42 100%) padding-box,
    linear-gradient(115deg,#B8830A 0%,#F2B51D 16%,#FFF3D2 28%,#F2B51D 40%,
                    #B8830A 56%,#F2B51D 74%,#FFF3D2 86%,#B8830A 100%) border-box;
  background-size:auto,300% 100%;
  background-position:0 0,0% 50%;
  animation:goldEdge 7s linear infinite;
}
@keyframes goldEdge{
  from{background-position:0 0,0% 50%}
  to  {background-position:0 0,100% 50%}
}
/* a gold ring blooms out of the frame on hover */
.gal-item::after{
  content:"";position:absolute;inset:-3px;z-index:3;pointer-events:none;
  border-radius:calc(var(--r-lg) + 3px);
  box-shadow:0 0 0 0 rgba(242,181,29,0);
  transition:box-shadow .45s var(--ease);
}
.gal-item:hover::after{box-shadow:0 0 0 5px rgba(242,181,29,.22),0 0 34px rgba(242,181,29,.34)}
.gal-item::before{display:none}
.gal-item .gal-inner{display:none}

/* Seven pictures, no stub row: three across, then two rows of two wider
   tiles — the grid fills edge to edge with no empty cells. */
.gal{grid-template-columns:repeat(6,1fr)}
.gal-item{grid-column:span 2}
.gal-item:nth-child(n+4){grid-column:span 3}
@media (max-width:1220px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal-item,.gal-item:nth-child(n+4){grid-column:span 1}
}
@media (max-width:720px){
  .gal{grid-template-columns:1fr}
}

/* ---------- 33.7 Split media panels ---------- */
.split-media{isolation:isolate}
.split-media > *{position:relative;z-index:2}
.split-media.sm-bg::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-position:center center;background-size:cover;
  opacity:.9;
}
.split-media::before{z-index:1}
.sm-heritage::after{background-image:url("../img/bg/dark-branch.jpg");
  background-image:image-set(url("../img/bg/dark-branch.webp") type("image/webp"),url("../img/bg/dark-branch.jpg") type("image/jpeg"))}
.sm-auction::after{background-image:url("../img/bg/dark-auction.jpg");
  background-image:image-set(url("../img/bg/dark-auction.webp") type("image/webp"),url("../img/bg/dark-auction.jpg") type("image/jpeg"))}
.sm-uses::after{background-image:url("../img/bg/dark-uses.jpg");
  background-image:image-set(url("../img/bg/dark-uses.webp") type("image/webp"),url("../img/bg/dark-uses.jpg") type("image/jpeg"))}

/* ---------- 33.8 Reduced motion / print ---------- */
@media print{
  body::before,body::after,.has-bg::before,.has-bg::after,
  .cta::after,.footer::after,.gal-item .gal-img{display:none!important}
}


/* ============================================================
   34. ABOUT — INTRO PANEL
   ------------------------------------------------------------
   The opening panel of about.html carries the same navy-and-gold
   ground as the home hero: message on the left, photograph framed
   and animated on the right.
   ============================================================ */
.section.about-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--grad-em);
  /* run the navy up behind the fixed header, exactly as the home hero does */
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(34px,5vw,74px));
  padding-bottom:clamp(58px,7vw,98px);
}
/* warm light on the copy side, cool depth behind the photograph */
.section.about-hero::before{
  content:"";position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;
  z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 76% at 10% 46%,rgba(242,181,29,.19) 0%,transparent 62%),
    radial-gradient(ellipse 72% 72% at 90% 6%,rgba(74,126,189,.30) 0%,transparent 62%);
}
.section.about-hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.26;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 86% 78% at 50% 45%,#000 18%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 86% 78% at 50% 45%,#000 18%,transparent 78%);
}
.about-hero > .wrap,
.about-hero > .wrap-wide{position:relative;z-index:3}
.about-hero .split{gap:clamp(38px,4.6vw,72px);align-items:center}
.about-copy{max-width:600px}
.about-copy h2{color:#fff;text-shadow:0 2px 16px rgba(4,31,66,.42)}
.about-copy .gold-text{filter:drop-shadow(0 3px 14px rgba(4,31,66,.42))}
.about-copy .lead{color:rgba(233,241,253,.94)}
.about-copy p{color:rgba(214,230,250,.86)}
.about-hero .eyebrow{color:#FCE3A0;text-shadow:0 1px 3px rgba(4,31,66,.55)}

@media (max-width:1080px){
  .about-hero .split{justify-items:center}
  .about-copy{max-width:700px;text-align:center;margin-inline:auto}
  .about-hero .eyebrow{justify-content:center}
  .about-hero .rule{margin-inline:auto}
  .about-copy .lead{margin-inline:auto}
  .about-hero .btn-row{justify-content:center}
}

/* Plans intro: same panel, but the artwork is a bright illustration —
   soften the grounding wash so its cream ground is not muddied. */
.plans-hero .about-frame::before{
  background:linear-gradient(180deg,transparent 64%,rgba(4,31,66,.15) 100%);
}
.plans-hero .about-frame{border-color:rgba(251,227,163,.46)}
.plans-hero .about-copy{max-width:640px}
/* the intro panel now carries the page heading, so the card grid
   below it starts closer to the filter row */
#plans{padding-top:clamp(40px,5vw,66px)}

/* --- Calculator intro panel --- */
/* CALCULATOR.png is 16:9, so the frame follows the picture rather than
   cropping it, and the grounding wash stays light on its pale ground. */
/* trim the empty left third so the calculator itself fills the frame */
.calc-hero .about-frame img{aspect-ratio:3 / 2;object-position:72% 50%}
.calc-hero .about-frame::before{
  background:linear-gradient(180deg,transparent 64%,rgba(4,31,66,.15) 100%);
}
.calc-hero .about-frame{border-color:rgba(251,227,163,.46)}
.calc-hero .about-copy{max-width:620px}
/* Vetri stands beside his own sign-off line */
.calc-buddy{display:flex;align-items:center;gap:15px}
.calc-buddy .mascot-img{height:104px;width:auto;filter:drop-shadow(0 10px 18px rgba(2,14,36,.42))}
.calc-buddy .mb-name{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gd-300);
}
.calc-buddy .mb-name svg{width:14px;height:14px}
/* the intro panel now opens the page, so the calculator starts closer */
#calcApp{padding-top:clamp(44px,5vw,72px)}
@media (max-width:1080px){
  .calc-buddy{justify-content:center}
}
@media (max-width:720px){
  .calc-hero .about-frame img{aspect-ratio:4 / 3;object-position:74% 50%}
  .calc-buddy .mascot-img{height:82px}
}

/* ---------- 35. GOLD FACT PANEL (How It Works intro) ---------- */
/* Champagne panel with black figures, sitting on the navy intro ground. */
.gold-card{
  position:relative;justify-self:end;width:100%;max-width:620px;min-height:440px;
  display:grid;place-items:center;padding:clamp(32px,4vw,52px);
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,#FDE9B4 0%,#F5C446 46%,#DFA40F 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 28px 64px rgba(2,14,36,.46),0 6px 18px rgba(2,14,36,.28);
  animation:heroVisIn 1.15s var(--ease) .1s both,
            heroFloat 8s ease-in-out 1.4s infinite;
  will-change:transform;
}
/* light catching the top-left corner */
.gold-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 72% 62% at 20% 10%,rgba(255,255,255,.55) 0%,transparent 64%);
}
/* the same sheen sweep the photo frames use */
.gold-card::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.42) 48%,transparent 60%);
  transform:translateX(-130%);
  animation:heroSheen 7.5s var(--ease) 2s infinite;
}
.gold-card-inner{position:relative;z-index:2;width:100%;max-width:380px}
.gold-card .hc-row{border-bottom:1px dashed rgba(12,20,36,.26)}
.gold-card .hc-row:last-child{border:0}
.gold-card .hc-row span{color:rgba(12,20,36,.78);font-weight:600}
.gold-card .hc-row b{color:#0B1220}
.gold-card .gold-card-note{
  margin-top:22px;text-align:center;font-size:.8rem;font-weight:600;
  color:rgba(12,20,36,.68);
}
@media (max-width:1080px){
  .gold-card{justify-self:center;max-width:560px;min-height:0}
}
@media print{.gold-card{display:none!important}}

/* ============================================================
   36. WCF PAGES — Why Chit Fund + FAQs
   ------------------------------------------------------------
   Both pages sit on assets/img/WCF.png: the fixed page canvas and
   every section share the one picture, and the light components
   used on them get their dark counterparts here.
   ============================================================ */
body.page-wcf{background:var(--em-950)}
body.page-wcf::before{background-image:url("../img/WCF.png")}
/* One continuous picture for the whole page: the sections stay
   transparent and the fixed canvas above shows through them, so the
   artwork never re-scales or repeats from section to section. */
.section-dark.bg-wcf{background:transparent}
.section-dark.bg-wcf::before{display:none}
/* just enough wash to keep white type crisp over the photograph */
.has-bg.section-dark.bg-wcf::after{
  background:linear-gradient(180deg,
    rgba(4,31,66,.58) 0%,
    rgba(4,31,66,.40) 18%,
    rgba(4,31,66,.36) 50%,
    rgba(4,31,66,.42) 84%,
    rgba(4,31,66,.58) 100%);
}

/* --- Feature cards on navy --- */
.section-dark .card{
  background:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border-color:rgba(248,211,114,.20);box-shadow:none;
  backdrop-filter:blur(3px);
}
.section-dark .card:hover{
  border-color:rgba(248,211,114,.46);
  background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  box-shadow:0 18px 44px rgba(2,14,36,.34);
}
.has-bg.section-dark .card{box-shadow:none}
.has-bg.section-dark .card:hover{box-shadow:0 18px 44px rgba(2,14,36,.34)}
.section-dark .card h4{color:#fff}
.section-dark .card p{color:rgba(208,225,248,.78)}
.section-dark .note-sm{color:rgba(202,222,247,.66)}

/* --- Comparison table on navy --- */
.section-dark .scroll-hint{color:rgba(202,222,247,.72)}
.section-dark .table-wrap{
  background:rgba(6,26,54,.62);border-color:rgba(248,211,114,.20);
  box-shadow:0 18px 44px rgba(2,14,36,.34);backdrop-filter:blur(4px);
}
.has-bg.section-dark .table-wrap{box-shadow:0 18px 44px rgba(2,14,36,.34)}
.section-dark .tbl tbody td{color:rgba(213,229,250,.86);border-bottom-color:rgba(248,211,114,.14)}
.section-dark .tbl tbody tr:nth-child(even){background:rgba(255,255,255,.045)}
.section-dark .tbl tbody tr:hover{background:rgba(242,181,29,.12)}
.section-dark .tbl tbody td:first-child{color:#fff}
.section-dark .tbl .hl{color:var(--gd-300)}
.section-dark .tbl-note{
  background:rgba(242,181,29,.10);border-color:rgba(248,211,114,.26);
  color:rgba(213,229,250,.86);
}
.section-dark .tbl-note svg{color:var(--gd-300)}

/* --- FAQ headings on navy --- */
.section-dark .faq-cat{color:var(--gd-200)}
.section-dark .faq-item:hover{border-color:rgba(248,211,114,.42)}
.section-dark .faq-item[open]{
  border-color:var(--gd-400);background:rgba(255,255,255,.09);
  box-shadow:0 14px 34px rgba(2,14,36,.30);
}

/* --- Careers intro panel --- */
/* CAREER.png is 16:9; the frame follows the picture so nothing is cropped. */
.career-hero .about-frame img{aspect-ratio:16 / 9}
.career-hero .about-frame::before{
  background:linear-gradient(180deg,transparent 62%,rgba(4,31,66,.22) 100%);
}
.career-hero .about-copy{max-width:620px}

/* ============================================================
   38. CONTACT — navy & gold enquiry panel
   ------------------------------------------------------------
   The enquiry form sits on navy inside a champagne gradient
   border; the contact cards beside it use the same two colours.
   ============================================================ */
.form-premium{
  position:relative;isolation:isolate;overflow:hidden;
  border:2.5px solid transparent;border-radius:var(--r-xl);
  /* padding-box carries the navy, border-box the gold gradient rim */
  background:
    linear-gradient(158deg,#0B3A72 0%,#062C5E 46%,#041F42 100%) padding-box,
    linear-gradient(135deg,#FFF3D2 0%,#F5C446 22%,#F2B51D 45%,#FDE9B4 66%,#F2B51D 100%) border-box;
  box-shadow:0 26px 62px rgba(2,14,36,.30),0 8px 20px rgba(2,14,36,.16),
             0 0 0 5px rgba(242,181,29,.13);
}
/* gold light pooling in the top-right corner, breathing slowly */
.form-premium::before{
  content:"";position:absolute;top:-40%;right:-20%;width:66%;aspect-ratio:1;border-radius:50%;
  z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(242,181,29,.26) 0%,transparent 66%);
  animation:heroGlow 9s ease-in-out infinite;
}
.form-premium > form{position:relative;z-index:1}

/* fields */
.form-premium .field label{color:var(--gd-300)}
.form-premium .field label i{color:var(--gd-400)}
.form-premium .field:focus-within label{color:var(--gd-200)}
.form-premium .field input,
.form-premium .field select,
.form-premium .field textarea{
  background-color:rgba(255,255,255,.06);
  border:1.5px solid rgba(248,211,114,.28);
  color:#EAF2FD;
}
.form-premium .field input::placeholder,
.form-premium .field textarea::placeholder{color:rgba(192,212,240,.52)}
.form-premium .field input:hover,
.form-premium .field select:hover,
.form-premium .field textarea:hover{border-color:rgba(248,211,114,.46)}
.form-premium .field input:focus,
.form-premium .field select:focus,
.form-premium .field textarea:focus{
  border-color:var(--gd-400);background-color:rgba(255,255,255,.11);
  box-shadow:0 0 0 4px rgba(242,181,29,.20);
}
/* the caret has to be redrawn in gold once the control turns navy */
.form-premium .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F8D372' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.form-premium .field select option{color:var(--ink);background:#fff}
.form-premium .field small.hint{color:rgba(202,222,247,.62)}
.form-premium .field .err{color:#FFB4B8}
.form-premium .field.invalid input,
.form-premium .field.invalid select,
.form-premium .field.invalid textarea{
  border-color:#E8767C;background-color:rgba(228,90,98,.12);
}
.form-premium .note-sm{color:rgba(202,222,247,.66)}
.form-premium .note-sm a{color:var(--gd-300)!important}
.form-premium .form-msg{
  background:rgba(242,181,29,.14);border:1px solid rgba(248,211,114,.38);color:var(--gd-200);
}
.form-premium button[type="submit"]{margin-top:6px}

/* fields arrive one after another as the panel settles */
.form-premium form > *{animation:formFieldIn .62s var(--ease) both}
.form-premium form > *:nth-child(1){animation-delay:.10s}
.form-premium form > *:nth-child(2){animation-delay:.17s}
.form-premium form > *:nth-child(3){animation-delay:.24s}
.form-premium form > *:nth-child(4){animation-delay:.31s}
.form-premium form > *:nth-child(5){animation-delay:.38s}
.form-premium form > *:nth-child(6){animation-delay:.45s}
.form-premium form > *:nth-child(7){animation-delay:.52s}
.form-premium form > *:nth-child(n+8){animation-delay:.58s}
@keyframes formFieldIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

/* --- Contact detail cards, same navy and gold --- */
.contact-page .cinfo-item{
  background:linear-gradient(155deg,#0B3A72 0%,#062C5E 55%,#041F42 100%);
  border:1.5px solid rgba(248,211,114,.30);
  box-shadow:0 14px 34px rgba(2,14,36,.22);
}
.contact-page .cinfo-item:hover{
  transform:translateX(6px);border-color:var(--gd-400);
  box-shadow:0 20px 46px rgba(2,14,36,.32);
}
.contact-page .cinfo-item h4{color:var(--gd-300)}
.contact-page .cinfo-item p,
.contact-page .cinfo-item a{color:rgba(214,230,250,.86)}
.contact-page .cinfo-item b{color:#fff}
.contact-page .cinfo-item a:hover{color:var(--gd-300)}
.contact-page .cinfo-item .ic{
  background:rgba(242,181,29,.16);color:var(--gd-300);
  border:1px solid rgba(248,211,114,.26);
}
.contact-page .cinfo-item:hover .ic{background:var(--grad-gold);color:var(--em-950);border-color:transparent}