/* =========================================================
   Anselme Capital — Visual System
   Palette & type per Brand Guidelines (Draft), Plain Sight, June 2026
   Gold #937532 · Deep Gold #7A5F28 · Garnet #A42B2B (single emphasis)
   Charcoal #211C19 · Sand #F6F5F1 · Line #E3DED5
   Display: Cormorant Garamond · Body: Montserrat
   ========================================================= */

:root{
  --gold:#937532;
  --deep-gold:#7A5F28;
  --garnet:#A42B2B;
  --charcoal:#211C19;
  --charcoal-90:rgba(33,28,25,.90);
  --sand:#F6F5F1;
  --white:#FFFFFF;
  --line:#E3DED5;
  --ink-soft:#4A443E;
  --stone:#EDEAE3;
  --container:1180px;
  --measure:66ch;
  --shadow:0 18px 50px -30px rgba(33,28,25,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--charcoal);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Typography ---------- */
h1,h2,h3,.display{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  color:var(--charcoal);
  line-height:1.12;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:.02em}
h2{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:.015em}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:.01em}
p{margin:0 0 1.1em;max-width:var(--measure)}
.lead{font-size:1.18rem;line-height:1.7;color:var(--ink-soft);font-weight:400}
strong{font-weight:600;color:var(--charcoal)}

.eyebrow{
  font-family:"Montserrat",sans-serif;
  font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;
  color:var(--gold);
  margin:0 0 1.1rem;display:block;
}
.eyebrow--onDark{color:#D9C79A}

.serif-caps{
  font-family:"Cormorant Garamond",serif;
  text-transform:uppercase;letter-spacing:.14em;font-weight:500;
}

/* single-emphasis garnet, used once per view */
.hl{color:var(--garnet)}
a.textlink{color:var(--gold);border-bottom:1px solid rgba(147,117,50,.35);transition:border-color .2s}
a.textlink:hover{border-color:var(--gold)}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:820px}
section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section--sand{background:var(--sand)}
.section--white{background:var(--white)}
.section--stone{background:var(--stone)}
.section--charcoal{background:var(--charcoal);color:#E7E2DA}
.section--charcoal h1,.section--charcoal h2,.section--charcoal h3{color:#FBF9F5}
.section--charcoal p{color:#C9C2B7}

.divider{display:flex;align-items:center;gap:.9rem;margin:0 0 1.6rem}
.diamond{width:11px;height:11px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}
.divider .rule{height:1px;background:var(--line);flex:1}

hr.rule{border:0;height:1px;background:var(--line);margin:0}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,245,241,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--container);margin:0 auto;padding:12px clamp(1.25rem,4vw,2.5rem)}
.nav__logo img{height:56px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav__links a{
  font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--charcoal);
  padding:.3rem 0;position:relative;transition:color .2s;
}
.nav__links a:hover{color:var(--gold)}
.nav__links a.active{color:var(--gold)}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--gold)}
.nav__cta{white-space:nowrap}
.nav__links a.nav__cta{color:var(--gold);padding:1rem 2.2rem}
.nav__links a.nav__cta:hover{color:#fff}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;
  font-size:1.5rem;color:var(--charcoal)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Montserrat",sans-serif;font-size:.8rem;font-weight:600;line-height:1.1;
  letter-spacing:.05em;text-transform:none;
  padding:1.1rem 1.6rem;border:1px solid transparent;cursor:pointer;transition:all .2s ease;
}
.btn--primary{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn--primary:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
/* gold outline optimized for dark backgrounds (hero, CTA bands) */
.btn--primary.btn--onDark{background:transparent;color:#EAD3A0;border-color:#C7A24F}
.btn--primary.btn--onDark:hover{background:#C7A24F;color:var(--charcoal);border-color:#C7A24F}
/* CTA: header-size type, no caps, generous space to the box outline */
.btn--cta{letter-spacing:.06em;padding:1.6rem 3rem;font-size:.82rem;text-transform:none}
@media(max-width:900px){.btn--cta{padding:1.3rem 2rem}}
.btn--dark{background:var(--charcoal);color:#FBF9F5;border:1.5px solid var(--charcoal)}
.btn--dark:hover{background:#37312C;border-color:#37312C}
.btn--ghost{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn--ghost:hover{background:var(--charcoal);color:var(--sand)}
.btn--ghostLight{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghostLight:hover{background:#fff;color:var(--charcoal)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.6rem}
/* inside a CTA band the primary and secondary buttons are a matched pair:
   same padding, size and tracking, so only colour separates them */
.btn-row .btn--cta{padding:1.1rem 1.6rem;font-size:.8rem;letter-spacing:.05em}
@media(max-width:900px){.btn-row .btn--cta{padding:1.1rem 1.6rem}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(560px,86vh,820px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,16,13,.78) 0%,rgba(20,16,13,.5) 42%,rgba(20,16,13,.15) 100%),
             linear-gradient(0deg,rgba(20,16,13,.6) 0%,rgba(20,16,13,0) 45%)}
.hero__inner{position:relative;z-index:2;padding-bottom:clamp(3rem,7vw,6rem);padding-top:6rem;max-width:760px}
.hero h1{color:#fff;margin-bottom:.4em}
.hero .lead{color:#fff;max-width:40ch;font-size:1.26rem;font-weight:400;text-shadow:0 1px 14px rgba(15,11,8,.5)}
.hero h1{text-shadow:0 2px 18px rgba(15,11,8,.4)}
.hero .eyebrow{color:#F0DCA9;text-shadow:0 1px 10px rgba(15,11,8,.5)}
.hero .hero-note{color:#fff;font-size:1.04rem;font-weight:400;margin:.2rem 0 0;max-width:46ch;text-shadow:0 1px 14px rgba(15,11,8,.55)}

/* page banner (shorter hero for interior pages) */
.banner{position:relative;min-height:clamp(300px,46vh,440px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.banner__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.banner__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,16,13,.72),rgba(20,16,13,.28)),
             linear-gradient(0deg,rgba(20,16,13,.55),rgba(20,16,13,0) 60%)}
.banner__inner{position:relative;z-index:2;padding:5rem 0 clamp(2rem,4vw,3.2rem);max-width:760px}
.banner__note{color:#F2EDE4;font-size:.98rem;line-height:1.72;font-weight:400;margin:.9rem 0 0;max-width:62ch;text-shadow:0 1px 14px rgba(15,11,8,.65)}
/* the shorthand above zeroes .container's side padding; on phones the banner is
   full-bleed so the type would otherwise touch the screen edge */
@media(max-width:700px){.banner__inner{
  padding-left:clamp(1.25rem,4vw,2.5rem);padding-right:clamp(1.25rem,4vw,2.5rem)}}
.banner h1{color:#fff;margin-bottom:.2em}
.banner .lead{color:rgba(255,255,255,.9)}
.banner .eyebrow{color:#E4CF9E}
/* portrait banner: photo has faces mid-frame, so the type block sits low
   and the bottom scrim is deepened to hold white text over a lit background */
.banner--portrait{min-height:clamp(440px,68vh,660px);padding-bottom:1.6rem}
.banner--portrait .banner__bg{background-position:center 48%}
.banner--portrait .banner__inner{padding-bottom:1.1rem;max-width:880px}
.banner--portrait .banner__bg::after{
  background:linear-gradient(90deg,rgba(20,16,13,.66),rgba(20,16,13,.20)),
             linear-gradient(0deg,rgba(20,16,13,.80),rgba(20,16,13,.34) 34%,rgba(20,16,13,0) 66%)}
@media(max-width:700px){
  /* phone: the crop can't move much, so the room comes from height + a slightly
     smaller headline — enough to clear both faces */
  .banner--portrait{min-height:clamp(520px,72vh,600px)}
  .banner--portrait .banner__inner{max-width:none}
  .banner--portrait h1{font-size:2.05rem}}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:clamp(1.2rem,2.5vw,2rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white);border:1px solid var(--line);padding:2rem 1.8rem;transition:transform .25s,box-shadow .25s;height:100%}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.98rem}
.card .more{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:.6rem;display:inline-block}
.card__img{aspect-ratio:16/10;object-fit:cover;width:100%;margin:-2rem -1.8rem 1.4rem;width:calc(100% + 3.6rem);max-width:none}

/* pillars */
.pillar{padding:1.4rem 0}
.pillar .num{font-family:"Cormorant Garamond",serif;font-size:2.2rem;color:var(--gold);line-height:1}
.pillar h3{margin:.5rem 0 .4rem}
.pillar p{font-size:.96rem;color:var(--ink-soft)}

/* split feature (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.split--rev .split__media{order:2}
.split__media img{width:100%;height:100%;max-height:520px;object-fit:cover}
/* logo panel variant: the mark is the subject, so it is contained, not cropped */
.split__media--logo{display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);
  padding:clamp(2.2rem,6vw,4rem);min-height:clamp(300px,38vw,460px)}
.split__media--logo img{width:100%;max-width:320px;height:auto;max-height:none;object-fit:contain}
.split__body{max-width:560px}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stats--three{grid-template-columns:repeat(3,1fr)}
.stat .figure{font-family:"Cormorant Garamond",serif;font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--charcoal)}
.stat .label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
.section--charcoal .stat .figure{color:#FBF9F5}
.section--charcoal .stat .label{color:#B7AF a3}
.section--charcoal .stat .label{color:#B7AFA3}

/* Two-sleeve pie (client direction, 9-11-26). Charcoal core, gold strategic
   wedge starting at 12 o'clock so the smaller share reads first. The legend is
   real text, not labels baked into the SVG, so it stays selectable and crawlable. */
.sleeve{display:grid;grid-template-columns:210px 1fr;gap:clamp(1.8rem,4vw,3.2rem);
  align-items:center;margin:2rem 0 2.6rem}
.sleeve__chart svg{width:100%;height:auto;display:block}
.sleeve__key{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.sleeve__item{padding-left:1.1rem;border-left:3px solid var(--line)}
.sleeve__item--strat{border-left-color:var(--gold)}
.sleeve__item--core{border-left-color:var(--charcoal)}
.sleeve__pct{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.5rem;
  line-height:1;letter-spacing:.01em;color:var(--charcoal)}
.sleeve__item--strat .sleeve__pct{color:var(--deep-gold)}
.sleeve__qual{display:inline-block;font-family:"Montserrat",system-ui,sans-serif;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--ink-soft);margin-left:.5rem}
.sleeve__label{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-top:.45rem;line-height:1.5;color:var(--charcoal)}
.sleeve small{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.55rem;line-height:1.5}

/* callout / disclosure box */
.callout{background:var(--white);border-left:3px solid var(--gold);padding:1.3rem 1.5rem;margin:2rem 0;font-size:.95rem;color:var(--ink-soft)}
.callout--garnet{border-left-color:var(--garnet)}
.note{font-size:.82rem;color:#7A736A;line-height:1.6}

/* ---------- FAQ ---------- */
.faq-cat{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;
  margin:2.5rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
details.faq{border-bottom:1px solid var(--line);padding:0}
details.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;position:relative;
  font-family:"Cormorant Garamond",serif;font-size:1.28rem;color:var(--charcoal);font-weight:500;line-height:1.3}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:0;top:1rem;font-family:"Montserrat",system-ui,sans-serif;font-size:1.4rem;color:var(--gold);font-weight:300;transition:transform .2s}
details.faq[open] summary::after{content:"\2013";transform:none}
details.faq .faq-body{padding:0 0 1.4rem;color:var(--ink-soft);font-size:1rem}
details.faq .faq-body p{max-width:70ch}

/* ---------- CTA band ---------- */
.cta-band{position:relative;color:#fff;text-align:center;overflow:hidden}
.cta-band__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cta-band__bg::after{content:"";position:absolute;inset:0;background:rgba(20,16,13,.68)}
.cta-band .container{position:relative;z-index:2;padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);margin-left:auto;margin-right:auto}

/* ---------- Footer ---------- */
.footer{background:var(--charcoal);color:#C3BBAE;padding:clamp(3rem,5vw,4.5rem) 0 2rem;font-size:.9rem;font-weight:500}
.footer > .container{max-width:none}
.footer__top{display:grid;grid-template-columns:1.45fr 1.2fr .85fr 1.15fr;gap:clamp(1.5rem,3vw,2.8rem);
  padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12);align-items:start}
.footer__brand .contactline{max-width:34ch}
.footer strong{color:#EDE7DC;font-weight:600}
.footer__person{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;margin:0 0 1.15rem}
.footer__person:last-child{margin-bottom:0}
.footer__where{color:#A9A195;font-size:.82rem;margin-bottom:.25rem}
.footer img.footlogo{height:46px;width:auto;margin-bottom:1.3rem}
.footer h3{font-family:"Montserrat",system-ui,sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#D9C79A;font-weight:600;margin:0 0 1rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.6rem}
.footer a:hover{color:#fff}
.footer a.textlink{color:#D9C79A;border-bottom-color:rgba(217,199,154,.4)}
.footer a.textlink:hover{color:#fff;border-bottom-color:#fff}
.footer .contactline{color:#D8D1C6;margin:.2rem 0}
.footer__bottom{padding-top:1.8rem}
.footer .fineprint{font-size:.71rem;line-height:1.65;color:#989186;font-weight:400;letter-spacing:.004em;columns:2;column-gap:clamp(2.5rem,5vw,4.5rem);text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.footer .fineprint p{break-inside:avoid}
.footer .fineprint p{margin:0 0 .5rem;max-width:none}
.footer .fineprint p:last-child{margin-bottom:0}
.footer .fineprint strong{color:#C2BAAD;font-weight:600}
.footer .fineprint a.textlink{color:#BBA878;border-bottom-color:rgba(187,168,120,.35)}
.footer .fineprint a.textlink:hover{color:#fff;border-bottom-color:#fff}
.footer__copy{display:block;clear:both;font-size:.71rem;line-height:1.6;color:#918A7E;max-width:none;margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- misc ---------- */
.kicker-list{list-style:none;padding:0;margin:1.2rem 0}
.kicker-list li{position:relative;padding-left:1.6rem;margin-bottom:.8rem;color:var(--ink-soft)}
.kicker-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.anchor{scroll-margin-top:90px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:2rem}
  .stats--three{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split__media img{max-height:360px}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer .fineprint{columns:1}
  .nav__logo img{height:38px}
  .nav__links{
    position:fixed;inset:72px 0 auto 0;background:var(--sand);flex-direction:column;
    align-items:flex-start;gap:0;padding:1rem clamp(1.25rem,4vw,2.5rem) 2rem;
    border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .3s;box-shadow:var(--shadow)}
  .nav__links.open{transform:translateY(0)}
  .nav__links li{width:100%;border-bottom:1px solid var(--line)}
  .nav__links a{display:block;padding:.9rem 0;font-size:.95rem}
  .nav__links .nav__cta{margin-top:1rem;border-bottom:0}
  .nav__toggle{display:block}
}
@media(max-width:560px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats--three{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
}

/* ---------- Timeline (Our Story: founders' life timeline) ---------- */
.timeline{margin:2.4rem 0 0}
.tl__lead{font-size:1.14rem;line-height:1.7;color:var(--ink-soft);font-weight:400;max-width:62ch;margin:0 0 2.8rem}
.tl-track{position:relative;padding-left:2.4rem}
.tl-track::before{content:"";position:absolute;left:5px;top:.5rem;bottom:.6rem;width:1px;background:var(--line)}
.tl-item{position:relative;padding:0 0 2.7rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:calc(-2.4rem + 0px);top:.4rem;width:11px;height:11px;background:var(--gold);transform:rotate(45deg)}
/* future Alex track: hollow node signals the second lane */
.tl-item--alex::before{background:var(--sand);border:1.5px solid var(--gold)}
.tl__era{font-family:"Montserrat",sans-serif;font-size:.71rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.4rem}
.tl-item h3{margin:.05rem 0 .55rem;max-width:24ch}
.tl-item p{color:var(--ink-soft);max-width:60ch;margin-bottom:.75rem;font-size:1rem}
.tl__point{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:1.2rem;line-height:1.42;color:var(--deep-gold);max-width:54ch;margin:0;padding-left:1rem;border-left:2px solid var(--gold)}
.tl-item--next h3{color:var(--ink-soft)}
.tl-item--next p{margin-bottom:0;font-style:italic}
/* Second track (Alex) — where the story hands off from father to son */
.tl-turn{margin-top:1.6rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.tl-turn h3{color:var(--charcoal)}
.tl-turn__lead{font-size:1.1rem;line-height:1.7;color:var(--ink-soft);font-weight:400;max-width:60ch;margin-bottom:0}
@media(max-width:560px){
  .tl-track{padding-left:1.8rem}
  .tl-item::before{left:-1.8rem}
  .tl__point{font-size:1.12rem}
}