/* ==========================================================================
   iTradeWithTrust — Stylesheet
   --------------------------------------------------------------------------
   Structure of this file:
     1.  Design tokens (colours, type, spacing, radius, shadow)
     2.  Reset & base element styles
     3.  Typography utilities
     4.  Layout helpers (container, grid, section rhythm)
     5.  Buttons
     6.  Site header & navigation
     7.  Hero & "dossier" visual
     8.  Ledger strip (signature component)
     9.  Cards, pillars, process steps
     10. Callouts / disclaimer
     11. Blog components
     12. Forms
     13. Footer
     14. WhatsApp floating button
     15. Scroll-reveal animation system
     16. Utility classes
     17. Responsive breakpoints

   EDITING GUIDE
   --------------------------------------------------------------------------
   - All colours, fonts and spacing are defined once in section 1 (:root).
     Change a value there and it updates the entire website.
   - Class names are written in plain English on purpose so a future
     developer (or you, in six months) can find things quickly.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. FONT FACES (self-hosted — no third-party font requests)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../assets/fonts/publicsans-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colour palette ---------------------------------------------- */
  --ink:            #10151C;   /* primary dark — header, footer, dark sections */
  --ink-soft:       #1B222D;   /* panels/cards that sit on --ink */
  --ink-border:     rgba(237, 241, 245, 0.14);

  --paper:          #EEF1F5;   /* page background — cool ledger-paper tone */
  --paper-deep:     #E3E9EF;   /* alternate section background */
  --surface:        #FFFFFF;   /* card surfaces */

  --brass:          #AD8A3E;   /* primary accent — trust / premium / CTA */
  --brass-deep:     #785D26;   /* text-on-light use (eyebrows, badges, links) — tuned for AA contrast */
  --brass-hover:    #C4A159;   /* brighter gold for button hover backgrounds (keeps dark text legible) */
  --brass-soft:     #EFE6CC;   /* tinted background for badges/eyebrows */

  --pine:           #2C5A4E;   /* secondary accent — stability / growth */
  --pine-deep:      #1F433A;
  --pine-soft:      #DCE8E3;

  --ledger-red:     #8C3B33;   /* tertiary accent — risk / caution ("red ink") */
  --ledger-red-soft:#F2DFDA;

  --text:           #171B21;   /* body text on light backgrounds */
  --text-muted:     #545E6B;
  --text-faint:     #5E6875;
  --text-invert:    #EDF1F5;   /* text on --ink backgrounds */
  --text-invert-muted: #A2ADBA;

  --border:         #D7DEE6;
  --border-soft:    #E4E9EF;

  /* Typography ----------------------------------------------------------- */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl:   clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --text-2xl:  clamp(1.6rem, 1.4rem + 0.9vw, 2rem);
  --text-3xl:  clamp(2rem, 1.7rem + 1.4vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
  --text-5xl:  clamp(3rem, 2.3rem + 3.2vw, 4.75rem);

  /* Spacing scale ---------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* Shape & elevation -------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 21, 28, 0.06), 0 1px 1px rgba(16, 21, 28, 0.04);
  --shadow-md: 0 12px 24px -8px rgba(16, 21, 28, 0.16), 0 4px 8px -4px rgba(16, 21, 28, 0.08);
  --shadow-lg: 0 30px 60px -20px rgba(16, 21, 28, 0.28), 0 10px 20px -8px rgba(16, 21, 28, 0.12);
  --shadow-brass: 0 14px 28px -12px rgba(173, 138, 62, 0.45);

  --container: 1200px;
  --container-narrow: 760px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--brass-soft); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--ink);
  color: var(--text-invert);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-on-ink h1, .section-on-ink h2, .section-on-ink h3 { color: var(--text-invert); }

h1 { font-size: var(--text-5xl); font-weight: 460; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 600; font-family: var(--font-body); }
h4 { font-size: var(--text-lg); font-weight: 600; font-family: var(--font-body); }

p { color: var(--text-muted); }
p + p { margin-top: var(--space-4); }

.italic-accent { font-style: italic; color: var(--brass-deep); }
.section-on-ink .italic-accent { color: var(--brass); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.section-on-ink .eyebrow { color: var(--brass); }

.lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 46ch;
}
.section-on-ink .lede { color: var(--text-invert-muted); }

.measure { max-width: 62ch; }

.stat-figure {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl);
  color: var(--ink);
  line-height: 1;
}
.section-on-ink .stat-figure { color: var(--text-invert); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-11); }
.section--tight { padding-block: var(--space-9); }
.section--alt { background: var(--paper-deep); }
.section--ink { background: var(--ink); }
.section--ink.section-on-ink { color: var(--text-invert); }

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-9);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-3); }
.section-head p { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: var(--space-8);
}
.section-on-ink hr.rule { border-color: var(--ink-border); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brass);
  color: var(--ink);
  box-shadow: var(--shadow-brass);
}
.btn--primary:hover { background: var(--brass-hover); box-shadow: 0 18px 34px -14px rgba(173,138,62,0.55); }

.btn--ghost-invert {
  background: transparent;
  border-color: var(--ink-border);
  color: var(--text-invert);
}
.btn--ghost-invert:hover { background: rgba(237,241,245,0.08); border-color: rgba(237,241,245,0.3); }

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn--whatsapp {
  background: var(--pine);
  color: var(--text-invert);
}
.btn--whatsapp:hover { background: var(--pine-deep); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: var(--text-base); }
.btn--sm { padding: 0.65rem 1.2rem; font-size: var(--text-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.text-link:hover { border-color: var(--brass-deep); color: var(--brass-deep); gap: var(--space-3); }
.section-on-ink .text-link { color: var(--text-invert); border-color: var(--ink-border); }
.section-on-ink .text-link:hover { color: var(--brass); border-color: var(--brass); }

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-border);
  transition: box-shadow var(--dur-base) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -18px rgba(0,0,0,0.6); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-invert);
  font-weight: 500;
  flex-shrink: 0;
}
.brand__mark { color: var(--brass); font-style: italic; }
.brand__trust { color: var(--text-invert-muted); font-size: 0.85em; }

.nav-desktop { display: none; }
.nav-desktop__list { display: flex; align-items: center; gap: var(--space-4); }
.nav-desktop__link {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-invert-muted);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav-desktop__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav-desktop__link:hover, .nav-desktop__link[aria-current="page"] { color: var(--text-invert); }
.nav-desktop__link:hover::after, .nav-desktop__link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-4); }
/* The full "Connect with Rajeev" pill button only has room to sit next to
   the nav links once the nav itself is showing (see the 1200px breakpoint
   below). Below that, showing it next to the hamburger overflowed narrow
   phone screens — so on mobile/tablet only the hamburger is shown here;
   the mobile drawer has its own full-width WhatsApp button. */
.header-actions .btn--primary { display: none; padding: 0.7rem 1.15rem; white-space: nowrap; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-invert);
  margin-inline: auto;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--ink);
  z-index: 99;
  padding: var(--space-6) var(--space-5) var(--space-8);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.nav-mobile.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
.nav-mobile__list { display: flex; flex-direction: column; }
.nav-mobile__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-invert);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--ink-border);
}
.nav-mobile__meta { display: flex; flex-direction: column; gap: var(--space-4); }
.nav-mobile__meta a { color: var(--text-invert-muted); font-size: var(--text-sm); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO & DOSSIER VISUAL
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-11) var(--space-9);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(173,138,62,0.10), transparent 55%),
    var(--paper);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

/* Text-only hero variant (About, Loan Management, Traders Corner, Blog,
   Contact): these pages reuse .hero for its background treatment but have
   no visual/dossier side panel and much shorter content, so the tall
   padding tuned for the two-column Home hero left a large empty-looking
   band above and below the text. Tighten it so the section reads as a
   proportional page-intro banner instead. */
.hero--text-only { padding-block: var(--space-9) var(--space-8); }

.hero__content h1 { margin-top: var(--space-4); }
.hero__content .lede { margin-top: var(--space-5); }
.hero__actions { margin-top: var(--space-7); }

.hero__ledger { margin-top: var(--space-9); }

.hero__visual { position: relative; min-height: 360px; }

.dossier {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}
.dossier__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
.dossier__card--back {
  position: absolute;
  inset: 0;
  transform: rotate(-6deg) translate(-14px, 10px);
  background: var(--pine-soft);
  border-color: transparent;
  z-index: 1;
}
.dossier__card--mid {
  position: absolute;
  inset: 0;
  transform: rotate(4deg) translate(12px, -8px);
  background: var(--brass-soft);
  border-color: transparent;
  z-index: 2;
}
.dossier__card--front { position: relative; z-index: 3; }

.dossier__tab {
  position: absolute;
  top: -14px;
  left: var(--space-6);
  background: var(--ink);
  color: var(--text-invert);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
}
.dossier__label { font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.dossier__title { font-family: var(--font-display); font-size: var(--text-xl); margin-top: var(--space-2); color: var(--ink); }
.dossier__figure { margin-top: var(--space-5); }

.spark { width: 100%; height: 64px; overflow: visible; }
.spark path.line { fill: none; stroke: var(--pine); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#sparkFill); opacity: 0.5; }

.dossier__clip {
  position: absolute;
  top: -22px;
  right: 28px;
  width: 46px;
  height: 46px;
  z-index: 4;
  filter: drop-shadow(0 8px 14px rgba(16,21,28,0.25));
}

.hero__badge {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--ink);
  color: var(--text-invert);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
  z-index: 5;
  max-width: 210px;
}
.hero__badge .stat-figure { font-size: var(--text-2xl); }
.hero__badge p { color: var(--text-invert-muted); font-size: var(--text-xs); margin-top: var(--space-1); }

/* On narrow phones, the rotated back/mid cards and the offset badge can
   poke a few px past the viewport edge (clipped by overflow-x:hidden, but
   visible as a cut-off corner). Tone the offsets down below 480px so the
   layered effect stays intentional-looking with no clipped edges. */
@media (max-width: 479px) {
  .dossier__card--back { transform: rotate(-3deg) translate(-6px, 6px); }
  .dossier__card--mid { transform: rotate(2deg) translate(6px, -5px); }
  .hero__badge { left: -6px; max-width: 180px; }
}

/* --------------------------------------------------------------------------
   8. LEDGER STRIP (signature component)
   -------------------------------------------------------------------------- */
.ledger { display: flex; flex-direction: column; gap: var(--space-3); }
.ledger__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.ledger__label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
}
.section-on-ink .ledger__label { color: var(--text-invert-muted); }
.ledger__leader {
  flex: 1;
  border-bottom: 1.5px dotted var(--border);
  min-width: 24px;
  transform: translateY(-5px);
}
.section-on-ink .ledger__leader { border-color: var(--ink-border); }
.ledger__value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--ink);
  flex-shrink: 0;
  text-align: right;
}
.section-on-ink .ledger__value { color: var(--text-invert); }

.ledger--row-layout { flex-direction: row; flex-wrap: wrap; gap: var(--space-8); }
.ledger--row-layout .ledger__row { flex-direction: column; align-items: flex-start; gap: var(--space-1); flex: 1 1 160px; }
.ledger--row-layout .ledger__leader { display: none; }
.ledger--row-layout .ledger__value { text-align: left; font-size: var(--text-lg); }

/* Below 640px, ANY ledger row (not just .ledger--row-layout) stacks label
   above value instead of forcing both onto one unshrinkable line — a long
   value like "Trading discipline & loan clarity" next to a label simply
   doesn't fit on a phone-width line, and label/value both being
   flex-shrink:0 by default meant it would clip instead of wrap. */
@media (max-width: 639px) {
  .ledger__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .ledger__leader { display: none; }
  .ledger__value { text-align: left; flex-shrink: 1; }
}

/* --------------------------------------------------------------------------
   9. CARDS, PILLARS, PROCESS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border); }

.card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--brass-soft);
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.card__icon svg { width: 22px; height: 22px; }
.card--pine .card__icon { background: var(--pine-soft); color: var(--pine-deep); }
.card h3 { margin-top: 0; }
.card p { margin-top: var(--space-3); font-size: var(--text-sm); }
.card__meta { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.04em; }

.pillar {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.pillar__index { font-family: var(--font-display); font-style: italic; color: var(--brass-deep); font-size: var(--text-lg); }
.pillar h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; margin-top: var(--space-2); }
.pillar p { margin-top: var(--space-4); }
.pillar__list { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.pillar__list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  align-items: flex-start;
}
.pillar__list li svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--pine); }

.process { display: flex; flex-direction: column; }
.process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.process__step:last-child { padding-bottom: 0; }
.section-on-ink .process__step { border-color: var(--ink-border); }
.process__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--brass);
  line-height: 1;
}
.process__step h3 { margin-bottom: var(--space-2); }
.process__step p { font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   10. CALLOUTS
   -------------------------------------------------------------------------- */
.callout {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  display: flex;
  gap: var(--space-4);
}
.callout svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.callout h4 { margin-bottom: var(--space-2); }
.callout p { font-size: var(--text-sm); }
.callout--risk { background: var(--ledger-red-soft); border-color: transparent; }
.callout--risk svg { color: var(--ledger-red); }
.callout--info { background: var(--pine-soft); border-color: transparent; }
.callout--info svg { color: var(--pine-deep); }

.disclaimer-band {
  background: var(--paper-deep);
  border-top: 1px solid var(--border);
  padding-block: var(--space-6);
}
.disclaimer-band p { font-size: var(--text-xs); color: var(--text-faint); max-width: 76ch; }

/* --------------------------------------------------------------------------
   11. BLOG
   -------------------------------------------------------------------------- */
.blog-featured {
  display: grid;
  gap: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.blog-featured__media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--ink) 0%, var(--pine-deep) 100%);
  position: relative;
}
.blog-featured__body { padding: var(--space-8); }

.blog-grid { display: grid; gap: var(--space-6); }
.blog-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card__media {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.blog-card__media svg { width: 100%; height: 100%; }
.blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.blog-card__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.blog-card h3 { margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }
.blog-card p { margin-top: var(--space-3); font-size: var(--text-sm); flex: 1; }
.blog-card__meta {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.filter-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }

.article-header { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.article-header .eyebrow { justify-content: center; }
.article-header h1 { margin-top: var(--space-4); }
.article-meta {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-faint);
  flex-wrap: wrap;
}
.article-cover {
  max-width: var(--container);
  margin: var(--space-8) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
}
.article-body {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.article-body h2 { margin-top: var(--space-9); margin-bottom: var(--space-4); font-size: var(--text-2xl); }
.article-body h3 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.article-body p { font-size: var(--text-base); }
.article-body ul, .article-body ol { margin-top: var(--space-4); padding-left: 1.3rem; color: var(--text-muted); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: var(--space-2); }
.article-body blockquote {
  margin-block: var(--space-8);
  padding: var(--space-6) var(--space-7);
  border-left: 3px solid var(--brass);
  background: var(--paper-deep);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink);
}
.article-share { max-width: var(--container-narrow); margin: var(--space-9) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border); }
.article-nav {
  max-width: var(--container-narrow);
  margin: var(--space-9) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}
@media (max-width: 479px) {
  .article-nav { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--text-xs); color: var(--text-faint); }
.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(173,138,62,0.15);
  outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-faint); }
.field-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brass); }

.form-status {
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--success { background: var(--pine-soft); color: var(--pine-deep); }
.form-status--error { background: var(--ledger-red-soft); color: var(--ledger-red); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-invert); padding-top: var(--space-11); }
.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-9);
}
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-brand p { color: var(--text-invert-muted); font-size: var(--text-sm); max-width: 32ch; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--ink-border);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.footer-social a:hover { background: rgba(237,241,245,0.08); border-color: var(--brass); }
.footer-social svg { width: 17px; height: 17px; }

.footer-col h4 { color: var(--text-invert); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-5); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a, .footer-col address { font-size: var(--text-sm); color: var(--text-invert-muted); font-style: normal; }
.footer-col a:hover { color: var(--brass); }

.footer-bottom {
  border-top: 1px solid var(--ink-border);
  padding-block: var(--space-6);
  /* Extra bottom clearance so the fixed WhatsApp bubble (bottom-right,
     ~82px footprint) never sits on top of these links when the page is
     scrolled all the way down. */
  padding-bottom: calc(var(--space-6) + 64px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-invert-muted);
}
.footer-bottom__links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-bottom__links a:hover { color: var(--brass); }

/* --------------------------------------------------------------------------
   14. WHATSAPP FLOATING BUTTON
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--text-invert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.04); background: var(--pine-deep); }
.whatsapp-fab svg { width: 27px; height: 27px; }

/* --------------------------------------------------------------------------
   15. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.hero__content > * {
  opacity: 0;
  animation: heroIn var(--dur-slow) var(--ease) forwards;
}
.hero__content .eyebrow { animation-delay: 0.05s; }
.hero__content h1 { animation-delay: 0.14s; }
.hero__content .lede { animation-delay: 0.24s; }
.hero__content .hero__actions { animation-delay: 0.34s; }
.hero__content .hero__ledger { animation-delay: 0.44s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__content > * { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-11 { margin-top: var(--space-11); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--brass-soft);
  color: var(--brass-deep);
}
.badge--pine { background: var(--pine-soft); color: var(--pine-deep); }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1.1fr 1fr; }
  .blog-featured__media { aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }

  .hero .container { grid-template-columns: 1.05fr 0.95fr; }

  /* Text-only hero variant (About, Loan Management, Traders Corner, Blog,
     Contact): these pages reuse .hero for its background treatment and
     padding but only ever provide one column of content — no visual/
     dossier side panel. Without this override the 2-column grid above
     still applies at this breakpoint and leaves a large empty column on
     the right. Force a single column so the text sits centered/left with
     no dead space. */
  .hero--text-only .container { grid-template-columns: 1fr !important; }

  /* Hero ledger on wider screens: lay the three entries out side by side,
     each as its own label-above-value column (same proven pattern as
     .ledger--row-layout used on the About page) instead of forcing them
     into equal-width flex items with a dotted leader — that combination
     doesn't leave enough room for longer values like "Trading discipline
     & loan clarity" and causes label/value text to overlap. */
  .hero__ledger .ledger {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6);
  }
  .hero__ledger .ledger__row {
    flex: 1 1 150px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .hero__ledger .ledger__leader { display: none; }
  .hero__ledger .ledger__value { text-align: left; font-size: var(--text-base); }

  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse { direction: rtl; }
  .split--reverse > * { direction: ltr; }

  .pillar { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
}

/* The main nav switches from the hamburger menu to the full inline nav
   here, once the container has room to reach its full 1200px width — see
   the header/nav budget note in section 6. Below this, the hamburger menu
   (already fully responsive) is used instead of cramming 7 links into a
   too-narrow bar. */
@media (min-width: 1200px) {
  :root { --header-h: 84px; }
  .nav-desktop { display: block; }
  .nav-toggle, .nav-mobile { display: none; }
  .header-actions .btn--primary { display: inline-flex; }
}

@media (min-width: 1280px) {
  .hero__content h1 { max-width: 15ch; }
}