/* Capstone Wealth — production stylesheet. Generated from the design system tokens + page shell. */

/* ===== tokens/colors.css ===== */
:root{
  /* --- Brand palette (Capstone Wealth Brand Guidelines) --- */
  --rich-ocean:#002D4F;   /* primary navy */
  --fine-gold:#A78A29;    /* accent gold */
  --light-sky:#E1ECF8;    /* soft section background */
  --cool-gray:#E2E3E7;    /* card fills, hairlines */
  --white:#FFFFFF;

  /* --- Rich Ocean tints (navy mixed with white) --- */
  --ocean-800:#00263F;    /* navy + 10% black — button hover */
  --ocean-900:#001E33;    /* navy + 20% black — button press */
  --ocean-60:#66849F;     /* 60% white */
  --ocean-40:#99ABBF;     /* 40% */
  --ocean-20:#CCD5DF;     /* 20% */
  --ocean-08:#EBEEF2;
  --sky-300:#C6DBF1;      /* light sky + navy — button hover */
  --sky-400:#AFCBEA;      /* press */

  /* --- Fine Gold tints/shades --- */
  --gold-800:#967C25;     /* hover */
  --gold-900:#86701F;     /* press */
  --gold-40:#D2C4A8;
  --gold-20:#EDE8DC;

  /* --- Neutrals --- */
  --ink:#002D4F;          /* body text is navy, never pure black */
  --ink-muted:#4A5D6E;
  --ink-subtle:#6E7F8C;
  --hairline:#E2E3E7;
  --hairline-strong:#C9CDD3;

  /* --- Semantic aliases --- */
  --surface-page:var(--white);
  --surface-alt:var(--light-sky);
  --surface-card:var(--white);
  --surface-card-muted:var(--cool-gray);
  --surface-inverse:var(--rich-ocean);

  --text-heading:var(--rich-ocean);
  --text-body:var(--ink-muted);
  --text-eyebrow:var(--fine-gold);
  --text-on-inverse:var(--white);
  --text-on-inverse-muted:var(--ocean-40);
  --text-accent:var(--fine-gold);

  --border-subtle:var(--hairline);
  --border-strong:var(--hairline-strong);
  --border-on-inverse:rgba(255,255,255,.32);

  --action-primary-bg:var(--light-sky);
  --action-primary-fg:var(--rich-ocean);
  --action-primary-bg-hover:var(--sky-300);
  --action-primary-bg-active:var(--sky-400);
  --action-navy-bg:var(--rich-ocean);
  --action-navy-fg:var(--white);
  --action-navy-bg-hover:var(--ocean-800);
  --action-navy-bg-active:var(--ocean-900);
  --action-outline-fg:var(--white);
  --action-outline-border:rgba(255,255,255,.7);
  --focus-ring:var(--fine-gold);

  --icon-circle-bg:var(--rich-ocean);
  --icon-circle-fg:var(--white);
  --icon-circle-bg-inverse:rgba(255,255,255,.1);
  --icon-circle-fg-inverse:var(--fine-gold);
}

/* ===== tokens/typography.css ===== */
:root{
  --font-display:"late-serif-variable",Georgia,"Times New Roman",serif;
  --font-sans:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;

  /* Late Serif is a variable face with a weight axis only (400–900). No italic axis. */
  --wght-display-regular:400; /* @kind other */
  --wght-display-medium:500; /* @kind other */
  --wght-display-bold:700; /* @kind other */
  --wght-display-black:900; /* @kind other */

  /* Type scale — fluid, tuned for a 55+ audience (body never below 16px) */
  --text-display-1:clamp(2.75rem,1.6rem + 3.6vw,4.5rem); /* @kind spacing */
  --text-display-2:clamp(2.25rem,1.5rem + 2.4vw,3.375rem); /* @kind spacing */
  --text-display-3:clamp(1.75rem,1.3rem + 1.4vw,2.375rem); /* @kind spacing */
  --text-h3:1.375rem;    /* 22 — card titles, sans */
  --text-h4:1.125rem;    /* 18 */
  --text-lead:1.25rem;   /* 20 — hero subhead / lead paragraph */
  --text-body:1.0625rem; /* 17 base */
  --text-body-lg:1.125rem;
  --text-small:0.9375rem;/* 15 — captions, disclosure only */
  --text-eyebrow:0.8125rem;

  --leading-display:1.14; /* @kind other */
  --leading-display-tight:1.08; /* @kind other */
  --leading-heading:1.28; /* @kind other */
  --leading-body:1.6; /* @kind other */
  --leading-snug:1.45; /* @kind other */

  --tracking-display:0; /* @kind other */         /* Late Serif reads best open — never tighten */
  --tracking-eyebrow:0.14em; /* @kind other */
  --tracking-button:0.04em; /* @kind other */

  --measure-body:66ch; /* @kind spacing */   /* keep paragraphs under ~70 characters */
  --measure-lead:52ch; /* @kind spacing */
  --measure-display:22ch; /* @kind spacing */
}

/* ===== tokens/spacing.css ===== */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;

  /* Section rhythm — generous whitespace is a brand requirement */
  --section-py:clamp(72px,8vw,128px); /* @kind spacing */
  --section-py-tight:clamp(56px,5vw,88px); /* @kind spacing */
  --section-gap:clamp(40px,5vw,72px); /* @kind spacing */

  --container:1200px; /* @kind spacing */
  --container-narrow:820px; /* @kind spacing */
  --container-wide:1400px; /* @kind spacing */
  --gutter:clamp(20px,5vw,56px); /* @kind spacing */
}

/* ===== tokens/radius.css ===== */
:root{
  --radius-pill:999px;   /* all CTAs are pill-shaped */
  --radius-xs:2px;
  --radius-sm:4px;       /* cards, inputs — established, not playful */
  --radius-md:8px;
  --radius-lg:12px;      /* photo frames only */
  --radius-circle:50%;   /* icon containers */
  --border-width:1px; /* @kind spacing */
  --border-width-strong:2px; /* @kind spacing */
  --rule-accent:3px; /* @kind spacing */     /* gold rule under section headings */
  --icon-stroke:1.5; /* @kind other */     /* line icons only, never filled */
}

/* ===== tokens/elevation.css ===== */
:root{
  /* Shadows are restrained and navy-tinted; nothing floats dramatically. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0,45,79,.06);
  --shadow-card:0 1px 2px rgba(0,45,79,.05),0 10px 28px -12px rgba(0,45,79,.14);
  --shadow-card-hover:0 2px 4px rgba(0,45,79,.07),0 18px 40px -14px rgba(0,45,79,.20);
  --shadow-raised:0 24px 60px -20px rgba(0,45,79,.28);
  --shadow-inset-hairline:inset 0 0 0 1px var(--hairline);

  /* Protection gradient for text over photography */
  --scrim-hero:linear-gradient(90deg,rgba(0,30,51,.86) 0%,rgba(0,30,51,.66) 45%,rgba(0,30,51,.15) 100%); /* @kind other */
  --scrim-bottom:linear-gradient(180deg,rgba(0,30,51,0) 40%,rgba(0,30,51,.72) 100%); /* @kind other */
  --scrim-flat:rgba(0,30,51,.55); /* @kind other */
}

/* ===== tokens/motion.css ===== */
:root{
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */
  --transition-base:all var(--duration-base) var(--ease-standard); /* @kind other */
  --reveal-offset:16px; /* @kind spacing */   /* scroll-reveal: fade + short rise. No bounce, no scale-in. */
  --hover-lift:-2px; /* @kind spacing */      /* cards rise 2px; buttons do not move */
  --press-scale:.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --duration-fast:0ms; /* @kind other */
    --duration-base:0ms; /* @kind other */
    --duration-slow:0ms; /* @kind other */
    --duration-reveal:0ms; /* @kind other */
    --reveal-offset:0px; /* @kind spacing */
    --hover-lift:0px; /* @kind spacing */
    --press-scale:1; /* @kind other */
  }
}

/* ===== tokens/base.css ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading)}
h1,h2{font-family:var(--font-display);font-variation-settings:'wght' var(--wght-display-regular);font-weight:400;line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
h1{font-size:var(--text-display-1)}
h2{font-size:var(--text-display-2)}
h3{font-family:var(--font-sans);font-size:var(--text-h3);font-weight:600;line-height:var(--leading-heading)}
h4{font-family:var(--font-sans);font-size:var(--text-h4);font-weight:600;line-height:var(--leading-heading)}
p{margin:0;max-width:var(--measure-body)}
a{color:var(--rich-ocean);text-decoration:none;transition:color var(--duration-base) var(--ease-standard)}
a:hover{color:var(--fine-gold)}
strong{font-weight:600}
em{font-style:normal;color:var(--fine-gold)} /* Late Serif has no italic — emphasis is weight + gold */
img{display:block;max-width:100%}
.cw-icon>svg{width:100%;height:100%;display:block}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--gold-40);color:var(--rich-ocean)}

/* ===== page shell ===== */

/* ---------- type scale ---------- */
:root{--text-display-1:clamp(2.25rem,1.45rem + 2.5vw,3.375rem);--text-display-2:clamp(1.875rem,1.35rem + 1.6vw,2.625rem);--text-display-3:clamp(1.5rem,1.2rem + .95vw,1.9375rem);--text-lead:1.125rem}
@media(max-width:639px){
  :root{
    --text-display-1:clamp(1.9375rem,1.1rem + 3.2vw,2.25rem);
    --text-display-2:clamp(1.6875rem,1.15rem + 2vw,1.875rem);
    --text-display-3:1.375rem;
    --section-py:clamp(56px,13vw,72px);
    --section-py-tight:clamp(44px,10vw,56px);
    --section-gap:clamp(32px,7vw,40px);
  }
}
html{scroll-behavior:smooth}
body{background:var(--white)}
img,svg{max-width:100%}
a{color:var(--rich-ocean)}
a:hover{color:var(--fine-gold)}
:focus-visible{outline:2px solid var(--fine-gold);outline-offset:2px}
.cw-oneline h2{max-width:none}

/* ---------- shared responsive layout primitives ---------- */
.cw-split{display:grid;grid-template-columns:minmax(0,var(--cw-l,1fr)) minmax(0,var(--cw-r,1fr));gap:var(--cw-gap,clamp(40px,6vw,88px));align-items:center}
.cw-split--start{align-items:start}
@media(min-width:900px){.cw-split--flip > :first-child{order:2}}
.cw-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--cw-min,280px)),1fr));gap:var(--cw-gap,clamp(32px,4vw,56px))}
.cw-cols--start{align-items:start}
.cw-2up{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.cw-band{width:100%;height:clamp(280px,42vw,520px);overflow:hidden}
.cw-band > img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.cw-slot{aspect-ratio:var(--cw-ratio,16 / 7)}
.cw-btn{white-space:normal!important;text-align:center;max-width:100%}
.cw-legal{display:flex;flex-wrap:wrap;gap:0 var(--space-3)}
@media(max-width:899px){
  .cw-split{grid-template-columns:minmax(0,1fr);gap:clamp(28px,6vw,44px)}
}
@media(max-width:639px){
  .cw-cols{gap:clamp(28px,7vw,40px)}
  .cw-band{height:clamp(220px,52vw,320px)}
  .cw-slot{aspect-ratio:16 / 9}
}
@media(max-width:559px){.cw-2up{grid-template-columns:1fr}}

/* ---------- hero: content-driven height on small screens ---------- */
main > section:first-child{align-items:center!important;padding-top:var(--space-20)!important;padding-bottom:var(--space-20)!important}
main > section:first-child a{white-space:normal!important;text-align:center;max-width:100%}
@media(max-width:899px){main > section:first-child{min-height:min(64vh,560px)!important;padding-top:var(--space-16)!important;padding-bottom:var(--space-16)!important}}
@media(max-width:479px){main > section:first-child{min-height:min(66vh,460px)!important;padding-top:var(--space-12)!important;padding-bottom:var(--space-12)!important}}
@media(max-height:540px) and (orientation:landscape){main > section:first-child{min-height:auto!important;padding-top:var(--space-12)!important;padding-bottom:var(--space-12)!important}}

/* ---------- header ---------- */
/* keep the nav dropdown open while the cursor crosses the gap below the link */
header [data-nav-item]{padding-bottom:6px}
header [data-nav-item] > ul::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
/* below the desktop nav breakpoint: logo + menu only; the CTA lives in the drawer as Contact Us */
@media(max-width:1079px){
  header > div:first-of-type{gap:var(--space-4)!important;height:72px!important}
  header nav > a{display:none!important}
  header > div:nth-of-type(2){max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(var(--space-8),env(safe-area-inset-bottom))!important}
  header > div:nth-of-type(2) a{display:flex!important;align-items:center;min-height:48px}
}
@media(max-width:419px){header > div:first-of-type img{height:30px!important}}

/* ---------- footer ---------- */
main a[href^="mailto:"],main a[href^="tel:"],footer a{overflow-wrap:anywhere}
@media(max-width:479px){main a[href^="mailto:"]{font-size:1rem!important}}
footer > div > div:first-child{grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(min(100%,150px),1fr))!important}
footer > div > div:last-child p{font-size:0.875rem!important;color:rgba(255,255,255,.74)!important}
@media(max-width:899px){
  footer > div > div:first-child{grid-template-columns:minmax(0,1fr)!important;gap:var(--space-10)!important}
}
@media(max-width:639px){
  footer nav ul a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem!important}
  footer a[href^="mailto:"],footer a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
  footer > div > div:last-child p{font-size:0.9375rem!important}
  .cw-legal{flex-direction:column;gap:var(--space-2)}
  .cw-legal a{display:inline-flex;align-items:center;min-height:44px}
  .cw-pipe{display:none}
}

/* ---------- photo hover zoom: 1.03 inside a fixed frame ---------- */
@media(hover:hover){
  main figure > div > img, .cw-zoom > img{transition:transform 600ms var(--ease-standard)}
  main figure > div:hover > img, .cw-zoom:hover > img{transform:scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  main figure > div:hover > img, .cw-zoom:hover > img{transform:none}
}