/* ============================================================
   NISHA PAL — Tulip Financial Services
   Brand foundation: tokens, type, components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand crimson (Tulip) ---- */
  --crimson-900:#5E0E16;
  --crimson-800:#7E1019;
  --crimson-700:#9A1420;
  --crimson:#B71C2B;        /* primary */
  --crimson-600:#C4283A;
  --crimson-500:#D24252;
  --crimson-200:#F0C9CC;
  --crimson-100:#F8E6E7;
  --crimson-50:#FCF2F2;

  /* ---- Warm neutrals (echo her blush blazer + studio grey) ---- */
  --ink:#1C1A1D;            /* near-black, warm */
  --ink-800:#2A272B;
  --ink-700:#403C42;
  --slate:#6B6670;          /* muted body */
  --slate-400:#938E97;
  --line:#EBE4DD;           /* hairline */
  --line-strong:#DCD3CA;
  --cream:#FBF7F2;          /* page background */
  --cream-deep:#F4EDE4;
  --blush:#F3E2DD;          /* blazer tint */
  --blush-deep:#E9CFC8;
  --white:#FFFFFF;

  /* ---- Accent ---- */
  --gold:#BC9A4C;
  --gold-soft:#D8C18A;
  --green:#2E7D5B;          /* "covered / yes" */

  /* ---- Type ---- */
  --font-display:'Newsreader', Georgia, serif;
  --font-sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Radius ---- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;
  --r-pill:999px;

  /* ---- Shadow ---- */
  --sh-sm:0 1px 2px rgba(28,26,29,.06), 0 2px 6px rgba(28,26,29,.05);
  --sh-md:0 4px 14px rgba(28,26,29,.07), 0 14px 40px rgba(28,26,29,.07);
  --sh-lg:0 10px 30px rgba(94,14,22,.10), 0 30px 70px rgba(28,26,29,.12);
  --sh-crimson:0 12px 30px rgba(183,28,43,.28);

  /* ---- Spacing rhythm ---- */
  --container:1180px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5{margin:0;font-weight:500;letter-spacing:-.01em;line-height:1.08;}
p{margin:0;}
::selection{background:var(--crimson);color:#fff;}

/* ============================================================
   TYPE SCALE
   ============================================================ */
.display{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(44px,6.4vw,86px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.h1{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-.02em;}
.h2{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;}
.h3{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.15;}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--ink-700);font-weight:400;}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:400;}

.eyebrow{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--crimson);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow.muted{color:var(--slate);}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;display:inline-block;}
.eyebrow.no-rule::before{display:none;}

.muted{color:var(--slate);}
.on-dark{color:#fff;}
.on-dark .muted{color:rgba(255,255,255,.66);}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.section{padding:clamp(64px,9vw,120px) 0;}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.center{text-align:center;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 28px;
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--crimson);color:#fff;box-shadow:var(--sh-crimson);}
.btn-primary:hover{background:var(--crimson-700);transform:translateY(-2px);box-shadow:0 16px 38px rgba(183,28,43,.36);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:#000;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--crimson);box-shadow:var(--sh-md);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
.btn-on-dark-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);}
.btn-on-dark-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-lg{padding:20px 34px;font-size:17px;}
.btn-block{display:flex;width:100%;}

/* ============================================================
   CHIPS / PILLS / BADGES
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);
  font-weight:600;font-size:14.5px;color:var(--ink-700);
  box-shadow:var(--sh-sm);
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--crimson-50);color:var(--crimson-700);
  font-weight:700;font-size:13px;letter-spacing:.02em;
}
.badge-gold{background:rgba(188,154,76,.14);color:#8a6f2c;}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.card-pad{padding:30px;}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong);}

/* Product card */
.product-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s, background .3s;
  position:relative;
  overflow:hidden;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--crimson-200);}
.product-card .ico{
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--crimson-50);color:var(--crimson);
  margin-bottom:20px;transition:background .3s,color .3s;
}
.product-card:hover .ico{background:var(--crimson);color:#fff;}
.product-card .ico svg{width:28px;height:28px;}

/* ============================================================
   ICON CIRCLE
   ============================================================ */
.icon-circle{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--crimson-50);color:var(--crimson);flex:none;
}
.icon-circle svg{width:24px;height:24px;}

/* ============================================================
   TULIP MARK (inline svg sizing helper)
   ============================================================ */
.tulip{display:inline-block;}

/* ============================================================
   FORM
   ============================================================ */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-weight:600;font-size:14px;color:var(--ink-700);}
.input,.textarea,.select{
  font-family:var(--font-sans);font-size:16px;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);padding:14px 16px;width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.input::placeholder,.textarea::placeholder{color:var(--slate-400);}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--crimson);
  box-shadow:0 0 0 4px var(--crimson-100);
}
.textarea{resize:vertical;min-height:110px;}

/* ============================================================
   DIVIDERS / RULES
   ============================================================ */
.rule{height:1px;background:var(--line);border:0;width:100%;}
.fern-rule{display:flex;align-items:center;gap:18px;color:var(--crimson);}
.fern-rule::before,.fern-rule::after{content:"";flex:1;height:1px;background:var(--line-strong);}

/* ============================================================
   UTILITY
   ============================================================ */
.grid{display:grid;gap:24px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
}

.bg-cream{background:var(--cream);}
.bg-white{background:var(--white);}
.bg-blush{background:var(--blush);}
.bg-ink{background:var(--ink);color:#fff;}
.bg-crimson{background:var(--crimson);color:#fff;}

/* fade-up on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* ============================================================
   COLOUR THEMES — override the token scale to reskin everything
   Set data-theme on <html>. Default (no attr) = Tulip Crimson.
   ============================================================ */

/* Midnight Navy + Gold — classic financial trust, premium */
html[data-theme="navy"]{
  --crimson-900:#0C1A2B; --crimson-800:#112338; --crimson-700:#173052;
  --crimson:#1E416B; --crimson-600:#27517E; --crimson-500:#3D6C9A;
  --crimson-200:#C2D2E2; --crimson-100:#E3EBF3; --crimson-50:#F1F5F9;
  --cream:#FAF9F5; --cream-deep:#EFEDE6; --blush:#E9EFF5; --blush-deep:#D6E2EE;
  --ink:#13202E; --ink-800:#1E2C3B; --ink-700:#33414F;
  --gold:#C2A14E;
  --sh-crimson:0 12px 30px rgba(30,65,107,.30);
}
/* Evergreen — calm, modern, growth & security */
html[data-theme="forest"]{
  --crimson-900:#0E2A1F; --crimson-800:#123528; --crimson-700:#18402F;
  --crimson:#1F5A41; --crimson-600:#266B4E; --crimson-500:#368063;
  --crimson-200:#BFD9CC; --crimson-100:#E1EFE8; --crimson-50:#EFF7F2;
  --cream:#F8F6F0; --cream-deep:#ECEFE7; --blush:#E5F0E9; --blush-deep:#CFE4D7;
  --ink:#16261E; --ink-800:#21342A; --ink-700:#33433B;
  --gold:#B8923F;
  --sh-crimson:0 12px 30px rgba(31,90,65,.28);
}
/* Aubergine Plum — sophisticated, warm bridge from red */
html[data-theme="plum"]{
  --crimson-900:#2A0E27; --crimson-800:#371432; --crimson-700:#4C1B45;
  --crimson:#6A2459; --crimson-600:#7E2E6B; --crimson-500:#9C4489;
  --crimson-200:#E4C9DE; --crimson-100:#F4E7F0; --crimson-50:#FAF2F7;
  --cream:#FAF6F4; --cream-deep:#EFE7EC; --blush:#F1E2EC; --blush-deep:#E2CBDA;
  --ink:#221A21; --ink-800:#2F242D; --ink-700:#403541;
  --gold:#C2934E;
  --sh-crimson:0 12px 30px rgba(106,36,89,.28);
}
/* Charcoal & Blush — minimal editorial, near-monochrome + warm blush */
html[data-theme="mono"]{
  --crimson-900:#171314; --crimson-800:#221C1E; --crimson-700:#2E2629;
  --crimson:#3A2F33; --crimson-600:#4C3E43; --crimson-500:#6E5B61;
  --crimson-200:#DDD0CC; --crimson-100:#EEE5E1; --crimson-50:#F6F0ED;
  --cream:#F7F2EE; --cream-deep:#ECE4DE; --blush:#EEE1DB; --blush-deep:#DECEC6;
  --ink:#1C1719; --ink-800:#2A2225; --ink-700:#3B3034;
  --gold:#B89256;
  --sh-crimson:0 12px 30px rgba(58,47,51,.24);
}

/* ---------- MODERN / LIGHTER THEMES ---------- */
/* Coral — warm & fresh, softer than crimson */
html[data-theme="coral"]{
  --crimson-900:#5E1A14; --crimson-800:#7A2219; --crimson-700:#9E2E22;
  --crimson:#D8584C; --crimson-600:#C2463A; --crimson-500:#E0786E;
  --crimson-200:#F6CFC9; --crimson-100:#FBE7E3; --crimson-50:#FEF4F2;
  --cream:#FBF7F4; --cream-deep:#F3EAE5; --blush:#FBE5E0; --blush-deep:#F4CFC7;
  --ink:#26181A; --ink-800:#342426; --ink-700:#473838;
  --gold:#C2924E; --sh-crimson:0 12px 30px rgba(216,88,76,.26);
}
/* Dusty Rose — soft pastel, echoes her blush blazer */
html[data-theme="rose"]{
  --crimson-900:#4A1A2A; --crimson-800:#5E2235; --crimson-700:#7E2E47;
  --crimson:#BE5C7B; --crimson-600:#A24A65; --crimson-500:#CE7B93;
  --crimson-200:#EFCBD7; --crimson-100:#F8E7ED; --crimson-50:#FDF3F6;
  --cream:#FCF7F8; --cream-deep:#F3E9EC; --blush:#F8E2E9; --blush-deep:#EFCAD6;
  --ink:#241A1E; --ink-800:#33252B; --ink-700:#46373D;
  --gold:#C0924F; --sh-crimson:0 12px 30px rgba(190,92,123,.24);
}
/* Periwinkle — modern indigo-violet */
html[data-theme="periwinkle"]{
  --crimson-900:#1F1F52; --crimson-800:#28286A; --crimson-700:#33338C;
  --crimson:#5B5BD6; --crimson-600:#4A4AC0; --crimson-500:#7A7AE3;
  --crimson-200:#CFCFF6; --crimson-100:#E8E8FB; --crimson-50:#F3F3FE;
  --cream:#FAFAFC; --cream-deep:#ECECF3; --blush:#ECECFB; --blush-deep:#D6D6F2;
  --ink:#1A1A2E; --ink-800:#26263F; --ink-700:#37374A;
  --gold:#B79A52; --sh-crimson:0 12px 30px rgba(91,91,214,.24);
}
/* Sky — clean modern blue */
html[data-theme="sky"]{
  --crimson-900:#102A55; --crimson-800:#15366E; --crimson-700:#1B458C;
  --crimson:#2E6FD6; --crimson-600:#2A5FBC; --crimson-500:#5388E0;
  --crimson-200:#C3D6F3; --crimson-100:#E3ECFB; --crimson-50:#F1F6FE;
  --cream:#FAFBFD; --cream-deep:#EAEEF4; --blush:#E6EFFB; --blush-deep:#CFE0F4;
  --ink:#13202E; --ink-800:#1E2C3B; --ink-700:#33414F;
  --gold:#BE9A4E; --sh-crimson:0 12px 30px rgba(46,111,214,.24);
}
/* Ocean Teal — fresh, trustworthy */
html[data-theme="teal"]{
  --crimson-900:#063638; --crimson-800:#08474A; --crimson-700:#0A5C5F;
  --crimson:#0F8A8F; --crimson-600:#0D7378; --crimson-500:#2BA4A9;
  --crimson-200:#BEE3E4; --crimson-100:#DEF2F3; --crimson-50:#EFF9F9;
  --cream:#F8FBFA; --cream-deep:#E8F1F0; --blush:#DEF1F1; --blush-deep:#C6E6E6;
  --ink:#10241F; --ink-800:#1A352E; --ink-700:#314740;
  --gold:#BC9A4C; --sh-crimson:0 12px 30px rgba(15,138,143,.24);
}
/* Sage — soft, calming muted green */
html[data-theme="sage"]{
  --crimson-900:#23382B; --crimson-800:#2D4737; --crimson-700:#3A5C46;
  --crimson:#5C8A6B; --crimson-600:#4C7458; --crimson-500:#79A888;
  --crimson-200:#D2E2D7; --crimson-100:#E8F1EB; --crimson-50:#F2F8F4;
  --cream:#F9FAF7; --cream-deep:#EAEFE9; --blush:#E6F0E8; --blush-deep:#D0E2D4;
  --ink:#1E2620; --ink-800:#2C362E; --ink-700:#3B463E;
  --gold:#B8923F; --sh-crimson:0 12px 30px rgba(92,138,107,.22);
}

/* ============================================================
   BACKGROUND TONE — independent of theme. Set data-bg on <html>.
   Default (no attr) = each theme's warm tone. Overrides page +
   alt-section + hairline neutrals; cards stay --white.
   Placed AFTER themes so it wins for these neutrals.
   ============================================================ */
html[data-bg="paper"]{
  --cream:#FCFCFB; --cream-deep:#F2F2F0; --blush:#F4F3F0; --blush-deep:#E8E6E2;
  --line:#ECEAE6; --line-strong:#DCD9D3;
}
html[data-bg="white"]{
  --cream:#FFFFFF; --cream-deep:#F5F6F8; --blush:#F4F6F8; --blush-deep:#E9ECF1;
  --line:#EBEDF1; --line-strong:#DBDEE4;
}
html[data-bg="grey"]{
  --cream:#F3F4F6; --cream-deep:#E8EAEE; --blush:#EAECF0; --blush-deep:#DCDFE5;
  --line:#E3E5EA; --line-strong:#D2D5DC;
}

/* Heading font variant — modern sans display */
html[data-headfont="sans"] .display,
html[data-headfont="sans"] .h1,
html[data-headfont="sans"] .h2,
html[data-headfont="sans"] .h3,
html[data-headfont="sans"] .p-tag,
html[data-headfont="sans"] .display .em{
  font-family:var(--font-sans)!important;
  font-weight:800;
  letter-spacing:-.03em;
}
html[data-headfont="sans"] .serif-italic,
html[data-headfont="sans"] .display .em{font-style:normal;}