/* ==========================================================================
   JDL Financial Operations - jdl-fin.com
   Built on the JDL Financial Operations Design System.
   1 Tokens - 2 Reset - 3 Layout - 4 Type - 5 Components
   6 Sections - 7 Forms - 8 Utilities - 9 Responsive - 10 Motion
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Brand base */
  --jdl-navy:#1A3E62; --jdl-navy-900:#122B45; --jdl-navy-800:#173654;
  --jdl-navy-700:#1A3E62; --jdl-navy-600:#24507C; --jdl-navy-500:#2F6296;
  --jdl-slate:#5C7C99; --jdl-slate-700:#456079; --jdl-slate-600:#5C7C99;
  --jdl-slate-400:#8AA3B8; --jdl-slate-200:#C3D0DC;
  --jdl-copper:#BF8A6D; --jdl-copper-600:#BF8A6D;
  --jdl-copper-300:#DFBDA8; --jdl-copper-100:#F3E4DA;
  /* copper-700 is the design system's #9E6B4F nudged one step darker. It always
     carries text - eyebrows on white, and white text on the button hover fill -
     and #9E6B4F scores 4.497 against white, a hair under the 4.5 AA threshold.
     #9A6849 scores 4.72. The shift is imperceptible; the compliance is not. */
  --jdl-copper-700:#9A6849;
  /* Added: 12px uppercase copper text on the copper-100 tint needs a deeper
     shade than copper-700 (3.80) to clear AA. Used by .badge--copper only. */
  --jdl-copper-800:#8A5739;
  --jdl-mist:#E0E3E6; --jdl-mist-100:#F4F6F7; --jdl-mist-200:#E0E3E6; --jdl-mist-300:#CDD3D8;
  --jdl-white:#FFFFFF; --jdl-charcoal:#22262B; --jdl-charcoal-600:#4A5158;

  /* Semantic */
  --jdl-success:#2E7D63; --jdl-warning:#B8862B; --jdl-danger:#B3453C; --jdl-info:#2F6296;

  /* Aliases */
  --surface-page:var(--jdl-white); --surface-subtle:var(--jdl-mist-100);
  --surface-card:var(--jdl-white); --surface-inverse:var(--jdl-navy);
  --surface-inverse-alt:var(--jdl-navy-900); --surface-accent:var(--jdl-copper-100);
  --text-heading:var(--jdl-navy); --text-body:var(--jdl-charcoal); --text-muted:var(--jdl-slate-700);
  --text-inverse:var(--jdl-white); --text-inverse-muted:var(--jdl-slate-200);
  /* copper-800 for eyebrows: they also sit on the mist-100 section tint, where
     copper-700 scores 4.35 against 12px text. copper-800 clears it everywhere. */
  --text-accent:var(--jdl-copper-800); --text-link:var(--jdl-navy-600); --text-link-hover:var(--jdl-copper-700);
  --border-subtle:var(--jdl-mist-200); --border-default:var(--jdl-mist-300);
  --border-strong:var(--jdl-slate-400); --border-inverse:rgba(255,255,255,.18);
  --action-primary:var(--jdl-copper); --action-primary-hover:var(--jdl-copper-700);
  --action-secondary:var(--jdl-navy); --action-secondary-hover:var(--jdl-navy-900);
  --focus-ring:var(--jdl-copper);

  /* Type */
  --font-wordmark:"Poppins",system-ui,sans-serif;
  --font-display:"Inter","Poppins",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-display-1:64px; --fs-display-2:48px; --fs-h1:36px; --fs-h2:28px; --fs-h3:22px; --fs-h4:18px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px; --fs-label:12px;
  --lh-tight:1.08; --lh-heading:1.2; --lh-body:1.6; --lh-relaxed:1.75;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --ls-eyebrow:.18em; --ls-wordmark:.06em; --ls-heading:-0.02em; --ls-body:0;

  /* Space */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-xl:12px; --radius-pill:999px;
  --container-max:1200px; --container-narrow:720px; --gutter:32px;
  --rule-accent:3px; --section-y:88px;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(26,62,98,.08);
  --shadow-md:0 2px 8px rgba(26,62,98,.10);
  --shadow-lg:0 8px 24px rgba(26,62,98,.12);
  --overlay-scrim:rgba(18,43,69,.72);

  /* Motion */
  --ease-standard:cubic-bezier(.2,.6,.25,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms; --dur-ambient:18s;
  --transition-ui:color var(--dur-base) var(--ease-standard),
                  background-color var(--dur-base) var(--ease-standard),
                  border-color var(--dur-base) var(--ease-standard),
                  box-shadow var(--dur-base) var(--ease-standard);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-ui)}
a:hover{color:var(--text-link-hover)}
button{font:inherit}
::selection{background:var(--jdl-copper-100);color:var(--jdl-navy-900)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none;border-color:var(--jdl-navy);
  box-shadow:0 0 0 3px rgba(191,138,109,.28);border-radius:var(--radius-md);
}
.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:200;
  background:var(--jdl-white);color:var(--jdl-navy);padding:12px 18px;
  border-radius:var(--radius-md);font-family:var(--font-display);font-weight:var(--fw-semibold);
  box-shadow:var(--shadow-lg);transition:top var(--dur-base) var(--ease-standard);
}
.skip-link:focus{top:var(--space-4)}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section--tight{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.section--subtle{background:var(--surface-subtle);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.section--inverse{background:var(--surface-inverse);color:var(--text-inverse-muted)}
.grid{display:grid;gap:var(--space-5)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7)}
.split--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.prose{max-width:var(--container-narrow)}
.prose p+p{margin-top:var(--space-4)}

/* ---------- 4. TYPE ------------------------------------------------------ */
.eyebrow{
  display:block;font-family:var(--font-display);font-size:var(--fs-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-accent);
}
.eyebrow--inverse{color:var(--jdl-copper-300)}
.display{
  font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:clamp(38px,5vw,var(--fs-display-1));line-height:var(--lh-tight);
  letter-spacing:var(--ls-heading);color:var(--text-heading);text-wrap:balance;
}
.display--inverse{color:var(--jdl-white)}
.h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(28px,3.4vw,var(--fs-h1));
   line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-heading);text-wrap:balance}
.h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h2);
   line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-heading);text-wrap:balance}
.h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);
   line-height:1.25;letter-spacing:-.01em;color:var(--text-heading)}
.h4{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);
   line-height:1.3;color:var(--text-heading)}
.lede{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-muted);text-wrap:pretty}
.body-sm{font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4{color:var(--jdl-white)}
.on-dark .lede,.on-dark p{color:var(--text-inverse-muted)}
/* :not(.btn) matters - without it these two rules outrank .btn--primary's own
   colour and the copper button inside a dark band renders white-on-copper. */
.on-dark a:not(.btn){color:var(--jdl-white)}
.on-dark a:not(.btn):hover{color:var(--jdl-copper-300)}

/* ---------- 5. COMPONENTS ------------------------------------------------ */

/* Logo lockup */
.logo{display:inline-flex;align-items:center;gap:12px;line-height:1}
.logo img{height:38px;width:auto}
.logo__rule{width:1px;height:31px;background:var(--jdl-slate-400)}
.logo--white .logo__rule{background:rgba(255,255,255,.4)}
.logo__word{
  font-family:var(--font-wordmark);font-weight:400;font-size:15px;line-height:1.02;
  letter-spacing:-.01em;color:var(--jdl-navy);
}
.logo--white .logo__word{color:var(--jdl-white)}
.logo--sm img{height:32px}
.logo--lg img{height:48px}
.logo--lg .logo__word{font-size:19px}
.logo--lg .logo__rule{height:39px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:15px;letter-spacing:.01em;
  padding:11px 20px;border:1px solid transparent;border-radius:var(--radius-md);
  cursor:pointer;white-space:nowrap;transition:var(--transition-ui);text-decoration:none;
}
.btn--sm{font-size:13px;padding:7px 14px}
.btn--lg{font-size:16px;padding:14px 28px}
.btn--primary{background:var(--action-primary);color:var(--jdl-charcoal);border-color:var(--action-primary)}
.btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--jdl-white)}
.btn--secondary{background:var(--action-secondary);color:var(--jdl-white);border-color:var(--action-secondary)}
.btn--secondary:hover{background:var(--action-secondary-hover);border-color:var(--action-secondary-hover);color:var(--jdl-white)}
.btn--outline{background:transparent;color:var(--jdl-navy);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--jdl-mist-100);border-color:var(--jdl-navy);color:var(--jdl-navy)}
.btn--ghost{background:transparent;color:var(--jdl-navy);border-color:transparent}
.btn--ghost:hover{background:var(--jdl-mist-100);color:var(--jdl-navy)}
.btn--inverse{background:var(--jdl-white);color:var(--jdl-navy);border-color:var(--jdl-white)}
.btn--inverse:hover{background:var(--jdl-mist-200);border-color:var(--jdl-mist-200);color:var(--jdl-navy)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.btn--block{width:100%}

/* Card */
.card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);
  transition:var(--transition-ui);
}
.card:hover{box-shadow:var(--shadow-md)}
.card--accent{border-top:var(--rule-accent) solid var(--jdl-copper)}
.card--flat{background:var(--surface-subtle);border-color:transparent;box-shadow:none}
.card--flat:hover{box-shadow:none}
.card--inverse{background:var(--surface-inverse);border-color:var(--border-inverse);box-shadow:none;color:var(--text-inverse-muted)}
.card--inverse:hover{box-shadow:none}

/* Badge / Tag */
.badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-size:var(--fs-label);font-weight:var(--fw-semibold);letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-sm);
  background:var(--jdl-mist-200);color:var(--jdl-charcoal);
}
.badge--navy{background:var(--jdl-navy);color:var(--jdl-white)}
.badge--copper{background:var(--jdl-copper-100);color:var(--jdl-copper-800)}
.badge--success{background:#E4EFEA;color:var(--jdl-success)}
.badge-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tag{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-default);
  color:var(--text-muted);font-family:var(--font-body);font-size:var(--fs-caption);
  line-height:1.4;white-space:nowrap;padding:3px 10px;border-radius:var(--radius-pill);
}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Stat tile */
.stat{display:flex;flex-direction:column;gap:6px}
.stat__label{
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.stat__value{font-family:var(--font-mono);font-size:32px;font-weight:var(--fw-medium);
  letter-spacing:-.02em;color:var(--jdl-navy);font-variant-numeric:tabular-nums}
.stat__delta{font-size:var(--fs-caption);color:var(--text-muted)}
.stat--inverse .stat__label,.stat--inverse .stat__delta{color:var(--jdl-slate-200)}
.stat--inverse .stat__value{color:var(--jdl-white)}
.stat-row{display:flex;flex-wrap:wrap;gap:var(--space-6) 56px}

/* Section heading */
.section-heading{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--container-narrow)}

/* Process step */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:var(--space-4)}
.step__rail{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.step__index{
  width:34px;height:34px;flex:0 0 34px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:14px;font-weight:var(--fw-semibold);
  background:var(--jdl-mist-100);color:var(--jdl-navy);border:1px solid var(--border-default);
  transition:var(--transition-ui);
}
.step__line{flex:1;width:1px;background:var(--border-subtle)}
.step__body{padding-bottom:var(--space-6)}
.step__body p{margin-top:6px;font-size:15px;color:var(--text-muted);max-width:520px;text-wrap:pretty}
.step:last-child .step__line{display:none}
.step.is-active .step__index{background:var(--jdl-copper);color:var(--jdl-charcoal);border-color:var(--jdl-copper)}
.steps--inverse .step__index{background:transparent;color:var(--jdl-white);border-color:rgba(255,255,255,.28)}
.steps--inverse .step__line{background:rgba(255,255,255,.18)}
.steps--inverse .step__body h3{color:var(--jdl-white)}
.steps--inverse .step__body p{color:var(--jdl-slate-200)}
.steps--inverse .step.is-active .step__index{background:var(--jdl-copper);color:var(--jdl-charcoal);border-color:var(--jdl-copper)}

/* Alert */
.alert{
  display:block;padding:var(--space-4);border-radius:var(--radius-md);
  border:1px solid var(--border-default);background:var(--jdl-mist-100);font-size:var(--fs-body-sm);
  margin-bottom:var(--space-5);
}
.alert__title{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-heading);margin-bottom:2px}
.alert--success{background:#E4EFEA;border-color:#BEDCCE}
.alert--success .alert__title{color:var(--jdl-success)}
.alert--danger{background:#F6E3E1;border-color:#E7C4C0}
.alert--danger .alert__title{color:var(--jdl-danger)}

/* Checklist */
.checklist li{
  position:relative;padding-left:26px;margin-top:var(--space-3);
  font-size:15px;line-height:var(--lh-body);color:var(--text-muted);
}
.checklist li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  border:2px solid var(--jdl-copper);border-radius:var(--radius-sm);
}
.checklist--inverse li{color:var(--jdl-slate-200)}

/* Deliverable table */
.spec{width:100%;border-collapse:collapse;margin-top:var(--space-5);font-size:15px}
.spec th,.spec td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.spec th{
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
  border-bottom:1px solid var(--border-default);
}
.spec td:first-child{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-heading);white-space:nowrap}
.spec td{color:var(--text-muted)}
.spec-scroll{overflow-x:auto}
/* On a navy section the light-mode table colours render navy-on-navy. */
.on-dark .spec th{color:var(--jdl-slate-200);border-bottom-color:var(--border-inverse)}
.on-dark .spec td{color:var(--jdl-slate-200);border-bottom-color:var(--border-inverse)}
.on-dark .spec td:first-child{color:var(--jdl-white)}

/* Rule */
.rule{height:1px;background:var(--border-subtle);border:0;margin:var(--space-7) 0}
.rule--inverse{background:var(--border-inverse)}

/* ---------- 6. SECTIONS -------------------------------------------------- */

/* Header / nav */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--surface-inverse);
  border-bottom:1px solid var(--border-inverse);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding-top:14px;padding-bottom:14px;position:relative}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__link{
  font-family:var(--font-display);font-size:13px;font-weight:var(--fw-semibold);
  letter-spacing:.1em;text-transform:uppercase;color:var(--jdl-slate-200);
  padding:6px 0;border-bottom:2px solid transparent;transition:var(--transition-ui);
}
.nav__link:hover{color:var(--jdl-white)}
.nav__link[aria-current="page"]{color:var(--jdl-white);border-bottom-color:var(--jdl-copper)}
.nav__toggle{
  display:none;background:transparent;border:1px solid var(--border-inverse);
  border-radius:var(--radius-md);padding:8px 10px;cursor:pointer;color:var(--jdl-white);
}
.nav__toggle span{display:block;width:18px;height:2px;background:currentColor;margin:3px 0}

/* Hero */
.hero{position:relative;background:var(--surface-inverse-alt);overflow:hidden}
.hero__field{position:absolute;inset:0;width:100%;height:100%;opacity:.42;pointer-events:none}
.hero .wrap{position:relative;padding-top:var(--space-9);padding-bottom:104px}
.hero__title{margin:18px 0 20px;max-width:840px}
.hero__lede{margin:0 0 var(--space-6);max-width:620px;font-size:var(--fs-body-lg);
  line-height:var(--lh-body);color:var(--jdl-slate-200);text-wrap:pretty}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero .stat-row{margin-top:var(--space-8)}

/* Page header (interior pages) */
.page-head{background:var(--surface-inverse);position:relative;overflow:hidden}
.page-head .wrap{position:relative;padding-top:var(--space-8);padding-bottom:var(--space-8)}
.page-head__title{margin:14px 0 14px;max-width:800px}
.page-head p{max-width:640px;color:var(--jdl-slate-200);font-size:var(--fs-body-lg);text-wrap:pretty}

/* Stack strip */
.stack-strip{border-top:1px solid var(--border-inverse)}
.stack-strip .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding-top:var(--space-5);padding-bottom:var(--space-5)}
/* slate-200, not slate-400: at 12px on navy, slate-400 scores 4.20 - below AA. */
.stack-strip__label{font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--jdl-slate-200)}
.stack-strip__item{font-size:15px;color:var(--jdl-slate-200)}

/* Service card */
.service-card h3{margin-bottom:var(--space-3)}
.service-card p{margin-bottom:var(--space-5);font-size:15px;line-height:1.65;color:var(--text-muted);text-wrap:pretty}

/* Advisor */
.advisor{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--space-7);align-items:start}
.advisor__portrait{
  aspect-ratio:3/4;background:var(--jdl-mist-100);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-5);overflow:hidden;
}
.advisor__portrait img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}
.advisor__portrait span{
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-semibold);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);line-height:1.6;
}

/* CTA band */
.cta-band{background:var(--surface-inverse);position:relative;overflow:hidden}
.cta-band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-7);flex-wrap:wrap;padding-top:var(--space-8);padding-bottom:var(--space-8)}
.cta-band__copy{max-width:620px}

/* Contact details */
.contact-list{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-6)}
.contact-item__label{font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:4px}
.contact-item__value{font-size:var(--fs-body-lg);color:var(--text-heading);font-family:var(--font-display);font-weight:var(--fw-semibold)}
a.contact-item__value:hover{color:var(--text-link-hover)}

/* FAQ */
.faq{border-top:1px solid var(--border-subtle);margin-top:var(--space-6)}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  cursor:pointer;padding:var(--space-5) 0;list-style:none;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4);color:var(--text-heading);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:22px;color:var(--jdl-copper);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding-bottom:var(--space-5);max-width:720px;color:var(--text-muted);font-size:15px}

/* Footer */
.site-footer{
  background:var(--surface-inverse-alt);color:var(--jdl-slate-200);
  padding-top:56px;padding-bottom:28px;font-size:var(--fs-body-sm);
}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.site-footer__tagline{margin-top:var(--space-4);max-width:280px;color:var(--jdl-slate-400);font-size:var(--fs-caption)}
.site-footer__col-title{
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--jdl-white);
  display:block;margin-bottom:var(--space-3);
}
.site-footer__col a,.site-footer__col li{color:var(--jdl-slate-200);display:block;margin-top:10px}
.site-footer__col a:hover{color:var(--jdl-copper-300)}
.site-footer__legal{
  max-width:var(--container-max);margin:40px auto 0;padding:20px var(--gutter) 0;
  border-top:1px solid var(--border-inverse);font-size:var(--fs-caption);color:var(--jdl-slate-400);
  display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
}
.site-footer__legal a{color:var(--jdl-slate-400)}
.site-footer__legal a:hover{color:var(--jdl-copper-300)}

/* ---------- 7. FORMS ----------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field__label{
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
}
.field__hint,.field__error{font-size:var(--fs-caption);color:var(--text-muted)}
.field__error{color:var(--jdl-danger)}
.input,.select,.textarea{
  font-family:var(--font-body);font-size:15px;color:var(--text-body);background:var(--jdl-white);
  border:1px solid var(--border-default);border-radius:var(--radius-md);padding:11px 13px;
  width:100%;outline:none;transition:var(--transition-ui);
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--jdl-navy);box-shadow:0 0 0 3px rgba(191,138,109,.28)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--jdl-danger)}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-body)}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235C7C99' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;
}
.checkbox{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font-size:var(--fs-body-sm);color:var(--text-muted)}
.checkbox input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--jdl-white);
  cursor:pointer;transition:var(--transition-ui);
}
.checkbox input:checked{
  background:var(--jdl-copper) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5 4.5 8.5 11 1.5' fill='none' stroke='%2322262B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat;
  border-color:var(--jdl-copper);
}
.form-actions{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 8. UTILITIES ------------------------------------------------- */
.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-8{margin-top:var(--space-8)}
.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;
}
[hidden]{display:none!important}

/* ---------- 9. RESPONSIVE ------------------------------------------------ */
@media (max-width:960px){
  :root{--section-y:64px;--gutter:24px}
  .split,.split--wide-right{grid-template-columns:1fr;gap:var(--space-6)}
  .advisor{grid-template-columns:1fr;gap:var(--space-6)}
  .advisor__portrait{max-width:260px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}
@media (max-width:760px){
  .nav__toggle{display:block}
  /* The panel spans the nav's own border box - .wrap padding is already inside
     it, so 0/0 sits flush with the viewport and the panel's own gutter padding
     lines the links up with the logo. Offsetting further overflows the page. */
  .nav__links{
    display:none;position:absolute;left:0;right:0;
    top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--surface-inverse-alt);
    border-bottom:1px solid var(--border-inverse);
    padding:var(--space-4) var(--gutter) var(--space-5);
  }
  .nav__links.is-open{display:flex}
  .nav__link{padding:12px 0;border-bottom:1px solid var(--border-inverse)}
  .nav__link[aria-current="page"]{border-bottom-color:var(--jdl-copper)}
  .nav__links .btn{margin-top:var(--space-4);justify-content:center}
  .hero .wrap{padding-top:var(--space-8);padding-bottom:var(--space-8)}
  .stat-row{gap:var(--space-6) 40px}
  .stat__value{font-size:28px}
  .form-grid{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
}
@media print{
  .site-header,.cta-band,.nav__toggle,.hero__field{display:none}
  body{background:#fff;color:#000}
  .section{padding:24px 0}
}

/* ---------- 10. MOTION --------------------------------------------------- */
.reveal{opacity:0;transform:translateY(8px)}
.reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard)}
.hero__field .drift{animation:drift var(--dur-ambient) linear infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-60px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}
