/* ==========================================================================
   Intelliwealth — boutique investment & trading firm
   Design system + layout. One stylesheet, no framework, no build step.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#0B2240;          /* brand navy, taken from the logo */
  --ink-deep:#061628;
  --ink-soft:#16304f;
  --gold:#B4884A;
  --gold-light:#CBA265;
  --paper:#FFFFFF;
  --paper-warm:#F7F5F1;
  --paper-cool:#F1F3F6;
  --rule:#E2E5EA;
  --rule-dark:rgba(255,255,255,.16);
  --body:#3F4A59;
  --muted:#6B7788;
  --on-dark:#EEF1F5;
  --on-dark-muted:#A9B6C6;

  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",ui-serif,Georgia,"Times New Roman",serif;

  --step--1:clamp(.8rem,.77rem + .15vw,.875rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.0625rem);
  --step-1:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --step-2:clamp(1.5rem,1.32rem + .9vw,2.125rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.25rem);
  --step-4:clamp(2.5rem,1.85rem + 3.2vw,4.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.14;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- Layout primitives ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,132px)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.stack>*+*{margin-top:1.15rem}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem
}
.eyebrow--onDark{color:var(--gold-light)}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--body)}
.lede--onDark{color:var(--on-dark-muted)}

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border:1px solid transparent;border-radius:2px;
  font-size:.9rem;font-weight:600;letter-spacing:.02em;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--ink-soft)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-light)}
.btn--ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--onDark{border-color:rgba(255,255,255,.4);color:#fff}
.btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.9rem;color:var(--ink);
  padding-bottom:2px;border-bottom:1px solid var(--gold);
}
.link-arrow:hover{color:var(--gold)}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:78px}
.hdr__logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:2.1rem}
.nav a{
  position:relative;font-size:.9rem;font-weight:500;color:var(--ink);padding:.4rem 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* The in-nav CTA is for the mobile panel only; the desktop CTA sits outside the list. */
.nav .btn{display:none}
.nav .btn::after{display:none}
/* `.nav a` outranks the button colour rules, so restate them for the in-nav CTA. */
.nav a.btn--primary,.nav a.btn--gold{color:#fff}
.hdr__cta{display:inline-flex;flex:none}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:2px;
  background:transparent;cursor:pointer;padding:0;place-items:center;color:var(--ink)
}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav,.hdr__cta{display:none}
  .burger{display:grid}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--rule);padding:.5rem var(--gutter) 1.5rem;
  }
  .nav.is-open a{width:100%;padding:.95rem 0;border-bottom:1px solid var(--rule);font-size:1rem}
  .nav.is-open a::after{display:none}
  .nav.is-open .btn{display:inline-flex;margin-top:1.1rem;width:100%;justify-content:center;border-bottom:0;padding:1rem 1.7rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--ink-deep);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,22,40,.94) 0%,rgba(6,22,40,.80) 42%,rgba(6,22,40,.42) 100%),
    linear-gradient(180deg,rgba(6,22,40,.55) 0%,rgba(6,22,40,.15) 45%,rgba(6,22,40,.75) 100%);
}
.hero__in{padding-block:clamp(96px,15vw,180px)}
.hero h1{color:#fff;font-size:var(--step-4);max-width:16ch}
.hero .lede{color:var(--on-dark-muted);max-width:54ch;margin-top:1.6rem}
.hero--page .hero__in{padding-block:clamp(76px,10vw,132px)}
.hero--page h1{max-width:20ch;font-size:var(--step-3)}

/* Scoped notice strip directly under the hero */
.notice{background:var(--ink);color:var(--on-dark-muted);border-top:1px solid rgba(255,255,255,.1)}
.notice__in{display:flex;align-items:flex-start;gap:1rem;padding-block:1.35rem;font-size:var(--step--1);line-height:1.6}
.notice svg{flex:none;margin-top:2px;color:var(--gold-light)}
.notice strong{color:#fff;font-weight:600}

/* ---------- Pillars (what we do) ---------- */
.pillars{display:grid;gap:clamp(24px,3.5vw,44px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:clamp(36px,5vw,60px)}
.pillar{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.pillar__media{aspect-ratio:3/2;overflow:hidden;background:var(--paper-cool)}
.pillar__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pillar:hover .pillar__media img{transform:scale(1.04)}
.pillar__body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;flex:1}
.pillar__num{
  font-family:var(--serif);font-size:.85rem;font-weight:600;color:var(--gold);
  letter-spacing:.12em;margin-bottom:.9rem
}
.pillar h3{font-size:var(--step-2);margin-bottom:.9rem}
.pillar p{color:var(--body)}
.pillar .link-arrow{margin-top:auto;padding-top:1.6rem;align-self:flex-start}

/* ---------- Split feature ---------- */
.split{display:grid;gap:clamp(32px,5vw,72px);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  .split--reverse .split__media{order:2}
}
.split__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.split h2{font-size:var(--step-3);margin-bottom:1.3rem}

/* ---------- Definition list / criteria ---------- */
.grid-3{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  padding:clamp(24px,3vw,36px);background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;border-top:2px solid var(--gold);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.card:hover{box-shadow:0 14px 44px -22px rgba(11,34,64,.4);transform:translateY(-3px)}
/* Four-up variant: 1 / 2 / 4 across, so a four item row never leaves an orphan */
.grid-4{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:1fr}
@media (min-width:560px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card h3{font-size:var(--step-1);margin-bottom:.7rem}
.card p{font-size:var(--step--1);color:var(--muted);line-height:1.7}

/* Numbered process steps */
.steps{counter-reset:step;display:grid;gap:0;margin-top:clamp(32px,4vw,52px)}
.step{
  counter-increment:step;display:grid;gap:.4rem 2rem;
  grid-template-columns:auto 1fr;align-items:start;
  padding-block:clamp(22px,3vw,32px);border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-size:var(--step-1);color:var(--gold);font-weight:600;
  line-height:1.2;min-width:2.4ch
}
.step h3{font-size:var(--step-1);margin-bottom:.35rem}
.step p{color:var(--muted);font-size:var(--step--1);line-height:1.7;grid-column:2}

/* ---------- Investee logo wall ----------
   Flex rather than grid so an odd number of marks still fills the final row.
   Every cell is the same box; each mark is contained inside an identical
   safe area, so aspect ratios are never distorted. Square icon marks are
   given slightly more height than wordmarks so the row reads as evenly
   weighted rather than mathematically equal. */
.logo-wall{
  display:flex;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  margin-top:clamp(32px,4vw,52px);background:#fff;
}
.logo-wall__cell{
  flex:1 1 190px;display:grid;place-items:center;
  padding:clamp(26px,3vw,36px) 1.75rem;min-height:158px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.logo-wall__cell img{
  width:auto;max-width:100%;max-height:100%;object-fit:contain;
  height:44px;                      /* wordmarks */
  transition:transform .35s var(--ease);
}
.logo-wall__cell--icon img{height:62px}   /* square marks need more height to match */
.logo-wall__cell:hover img{transform:scale(1.05)}

/* ---------- Dark band ---------- */
.band{position:relative;isolation:isolate;background:var(--ink-deep);color:var(--on-dark);overflow:hidden}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,22,40,.95),rgba(6,22,40,.72))}
.band h2{color:#fff;font-size:var(--step-3)}
.band p{color:var(--on-dark-muted)}

/* ---------- Facts / positioning list ---------- */
.facts{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:760px){.facts{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,5vw,72px)}}
.fact{padding-block:1.5rem;border-top:1px solid var(--rule)}
.fact h3{font-size:var(--step-0);margin-bottom:.35rem;font-family:var(--sans);font-weight:600;letter-spacing:0}
.fact p{font-size:var(--step--1);color:var(--muted);line-height:1.7}
.facts--onDark .fact{border-color:var(--rule-dark)}
.facts--onDark .fact h3{color:#fff}
.facts--onDark .fact p{color:var(--on-dark-muted)}

/* ---------- CTA ---------- */
.cta{background:var(--paper-warm);border-top:1px solid var(--rule)}
.cta__in{display:grid;gap:clamp(24px,4vw,56px);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.cta__in{grid-template-columns:1.35fr auto}}
.cta h2{font-size:var(--step-2);margin-bottom:.8rem}
.cta p{color:var(--muted);max-width:56ch}

/* ---------- Contact: primary call to action ---------- */
.contact-cta{
  text-align:center;max-width:none;
  padding:clamp(40px,6vw,76px) clamp(24px,4vw,56px);
  border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:3px;
  background:var(--paper-warm);
}
.contact-cta h2{
  font-size:clamp(1.5rem,1rem + 2.4vw,2.75rem);
  word-break:break-word;margin-bottom:1.2rem;
}
.contact-cta h2 a{color:inherit}
.contact-cta .btn-row{margin-top:2.2rem}

/* ---------- Footer ---------- */
.ftr{background:var(--ink-deep);color:var(--on-dark-muted);font-size:var(--step--1)}
.ftr__top{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:1fr;padding-block:clamp(48px,6vw,78px)}
@media (min-width:820px){.ftr__top{grid-template-columns:1.4fr 1fr 1fr}}
.ftr__logo img{height:30px;width:auto;margin-bottom:1.3rem}
.ftr h4{color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.ftr li+li{margin-top:.7rem}
.ftr a:hover{color:#fff}
/* Social links: inline SVG glyphs, tinted with currentColor */
.social{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.6rem}
/* the footer's list spacing (.ftr li+li) would otherwise push icons 2 and 3 down */
.ftr .social li{margin-top:0;display:flex}
.social a{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--rule-dark);border-radius:2px;
  color:var(--on-dark-muted);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.social a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.social a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.social svg{width:17px;height:17px;fill:currentColor}

.ftr__legal{border-top:1px solid var(--rule-dark);padding-block:2rem;line-height:1.75}
.ftr__legal p+p{margin-top:.9rem}
.ftr__base{
  border-top:1px solid var(--rule-dark);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;align-items:center;
  font-size:.78rem
}

/* ---------- Entrance animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pillar__media img,.btn,.link-arrow svg{transition:none}
}

/* ---------- Utilities ---------- */
.bg-warm{background:var(--paper-warm)}
.bg-cool{background:var(--paper-cool)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:1rem 1.5rem;z-index:100}
.skip:focus{left:0}