/* Golden Ceiba — v3 one-pager. Dark-green-dominant, institutional.
   No JS anywhere; all motion is CSS-only and honors reduced-motion. */

:root{
  --green-deep:#0a1f16;   /* page ground */
  --green-body:#0e2a1e;   /* section alt */
  --green-raised:#143526; /* panels/status */
  --ivory:#f4efe4;
  --ivory-dim:rgba(244,239,228,.74);
  --ivory-faint:rgba(244,239,228,.45);
  --gold:#c9a227;
  --gold-bright:#d8b95a;
  --gold-hairline:rgba(216,185,90,.28);
  --ink:#122b1e;          /* text on ivory band */
  --ink-dim:rgba(18,43,30,.78);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --wrap:68rem;
  --wrap-text:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--green-deep);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--green-deep)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--green-deep);
  padding:.5rem 1rem;z-index:99;font-weight:600}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--green-deep) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gold-hairline);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.8rem}
.wordmark{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ivory)}
.wordmark .mark{width:1.9rem;height:auto;color:var(--gold-bright);flex:none}
.wordmark-text{font-family:var(--serif);font-weight:600;font-size:1.12rem;letter-spacing:.01em;
  line-height:1.15;display:flex;flex-direction:column}
.wordmark-text span{font-family:var(--sans);font-weight:400;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright)}
.site-nav ul{display:flex;gap:clamp(.9rem,2.5vw,1.8rem);list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory-dim);padding-block:.35rem;border-bottom:1px solid transparent}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ivory);border-bottom-color:var(--gold)}
.site-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:44rem){.site-nav{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:min(92svh,54rem);
  display:grid;align-items:center;
  border-bottom:1px solid var(--gold-hairline);
}
.hero .topo{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--gold);opacity:.07;
  animation:topo-drift 80s linear infinite alternate;
}
@keyframes topo-drift{from{transform:translateX(-1.5%) scale(1.02)}to{transform:translateX(1.5%) scale(1.06)}}
.hero-mark{
  position:absolute;right:clamp(0rem,6vw,6rem);top:50%;
  width:clamp(14rem,32vw,24rem);height:auto;
  transform:translateY(-50%);
  color:var(--gold-bright);opacity:.5;
}
.hero-mark path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 2.6s cubic-bezier(.4,0,.2,1) forwards;
}
.hero-mark path:nth-child(2){animation-delay:.15s}
.hero-mark path:nth-child(3){animation-delay:.3s}
.hero-mark path:nth-child(4){animation-delay:.5s}
.hero-mark path:nth-child(5){animation-delay:.6s}
.hero-mark path:nth-child(6){animation-delay:.7s}
.hero-mark path:nth-child(7){animation-delay:.8s}
.hero-mark path:nth-child(8){animation-delay:1s}
.hero-mark path:nth-child(9){animation-delay:1.1s}
.hero-mark path:nth-child(10){animation-delay:1.2s}
.hero-mark path:nth-child(11){animation-delay:1.3s}
.hero-mark path:nth-child(12){animation-delay:1.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:56rem){.hero-mark{opacity:.16;right:-4rem}}

.hero .wrap{position:relative;padding-block:clamp(5rem,12vh,9rem);max-width:var(--wrap)}
.hero-inner{max-width:38rem}
.eyebrow{
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-bright);margin:0 0 1.4rem;font-weight:500;
}
h1{
  font-family:var(--serif);font-weight:520;
  font-size:clamp(2.5rem,5.6vw,4.1rem);
  line-height:1.06;letter-spacing:-.012em;
  margin:0 0 1.5rem;text-wrap:balance;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;color:var(--ivory-dim);
  margin:0 0 2.4rem;max-width:34rem}
.actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--green-deep);background:var(--gold-bright);
  padding:.95rem 1.9rem;border:1px solid var(--gold-bright);
  transition:background .25s,color .25s;
}
.btn:hover{background:transparent;color:var(--gold-bright)}
.btn--ghost{background:transparent;color:var(--ivory);border-color:var(--ivory-faint)}
.btn--ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* staggered hero entrance */
.hero .eyebrow,.hero h1,.hero .lede,.hero .actions{
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1{animation-delay:.12s}
.hero .lede{animation-delay:.24s}
.hero .actions{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}

/* ---------- facts strip ---------- */
.facts{border-bottom:1px solid var(--gold-hairline);background:var(--green-body)}
.facts .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.5rem 2.5rem;padding-block:2rem;
}
.facts dl{margin:0}
.facts dt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:.35rem}
.facts dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--ivory-dim)}

/* ---------- sections ---------- */
.section{padding-block:clamp(4.5rem,9vw,7.5rem);border-bottom:1px solid var(--gold-hairline)}
.section:last-of-type{border-bottom:0}
.section--alt{background:var(--green-body)}
.section h2{
  font-family:var(--serif);font-weight:520;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;letter-spacing:-.01em;
  margin:0 0 1.4rem;max-width:32ch;text-wrap:balance;
}
.section p{max-width:var(--wrap-text);color:var(--ivory-dim);margin:0 0 1.1rem}
.section p:last-child{margin-bottom:0}
.section .eyebrow{margin-bottom:1rem}

/* ivory band */
.section--ivory{background:var(--ivory);color:var(--ink)}
.section--ivory h2{color:var(--ink)}
.section--ivory p{color:var(--ink-dim)}
.section--ivory .eyebrow{color:#8a6d1c}

/* method rows (cardless) */
.method{display:grid;gap:0;margin-top:3rem;border-top:1px solid rgba(18,43,30,.2)}
.method>div{
  display:grid;grid-template-columns:5.5rem 11rem 1fr;gap:1.5rem;
  padding-block:1.6rem;border-bottom:1px solid rgba(18,43,30,.2);align-items:baseline;
}
.method .num{font-family:var(--serif);font-size:1.9rem;color:var(--gold);font-weight:500}
.method h3{margin:0;font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--ink)}
.method p{margin:0;font-size:.98rem;max-width:none}
@media (max-width:44rem){.method>div{grid-template-columns:3.2rem 1fr;grid-template-rows:auto auto}
  .method p{grid-column:2}}

/* commitments list */
.ticks{list-style:none;margin:2.4rem 0 0;padding:0;max-width:var(--wrap-text)}
.ticks li{
  padding:.95rem 0 .95rem 2rem;position:relative;
  border-bottom:1px solid var(--gold-hairline);color:var(--ivory-dim);line-height:1.55;
}
.ticks li::before{
  content:"";position:absolute;left:.1rem;top:1.45rem;
  width:.85rem;height:1px;background:var(--gold-bright);
}
.ticks li b{color:var(--ivory);font-weight:600}

/* statement */
.statement{
  font-family:var(--serif);font-weight:480;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.25;letter-spacing:-.008em;
  color:var(--ivory);max-width:26ch;margin:0 0 1.6rem;text-wrap:balance;
}
.statement em{font-style:italic;color:var(--gold-bright)}

/* leadership */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2.5rem;margin-top:3rem}
.person{display:flex;gap:1.1rem;align-items:flex-start}
.monogram{
  flex:none;width:3.4rem;height:3.4rem;display:grid;place-items:center;
  border:1px solid var(--gold-hairline);border-radius:50%;
  font-family:var(--serif);font-size:1rem;letter-spacing:.05em;color:var(--gold-bright);
}
.person h3{margin:0 0 .15rem;font-family:var(--serif);font-weight:600;font-size:1.15rem}
.person .role{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-bright)}
.person p{font-size:.95rem;margin:0}
.note{font-size:.88rem;color:var(--ivory-faint);margin-top:2.4rem}
.note a{color:var(--ivory-dim)}

/* status / contact */
.status-list{list-style:none;margin:2.2rem 0;padding:0;max-width:var(--wrap-text)}
.status-list li{padding:.8rem 0;border-bottom:1px solid var(--gold-hairline);
  color:var(--ivory-dim);font-size:.98rem}
.status-list b{color:var(--ivory);font-weight:600}
.contact-line{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.8rem)}
.contact-line a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid var(--gold-hairline)}
.contact-line a:hover{border-bottom-color:var(--gold-bright)}
.contact-line a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Scroll-linked reveals intentionally omitted: on a credibility site, content
   that can arrive invisible is worse than content that doesn't animate.
   The page's motion budget is spent in the hero (entrance stagger, drawing
   mark, topo drift). .reveal is kept in the markup as an inert hook. */

/* ---------- footer ---------- */
.site-footer{background:var(--green-deep);border-top:1px solid var(--gold-hairline);
  padding-block:2.5rem;font-size:.85rem;color:var(--ivory-faint)}
.site-footer .wrap{display:flex;flex-direction:column;gap:1rem}
.footer-links{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0;flex-wrap:wrap}
.footer-links a{color:var(--ivory-dim);text-decoration:none;border-bottom:1px solid transparent}
.footer-links a:hover{border-bottom-color:var(--gold-bright);color:var(--ivory)}
.footer-note{max-width:52rem;line-height:1.6;margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}