/* Layout: a calm white field, one column of generous rhythm; Investing is the one blue block, Faith over Matter the one grey block that dissolves into the sea. */
:root{
  --white:#ffffff;
  --paper:#f7f8fb;          /* white with a faint blue bias */
  --red:#c30017;            /* sampled from the emblem */
  --blue:#003c88;           /* sampled from the wordmark */
  --blue-bright:#0252a8;    /* the arch line */
  --ink:#0d1b33;            /* blue-black for body text */
  --muted:#5b6578;
  --line:#dfe3ec;
  --rule:#cdd3dd;           /* light grey hairlines inside the Investing frames */
  --slate:#4a5059;          /* grey from the wave's shaded face */
  --slate-deep:#14171b;     /* dark grey that meets the photo's deepest water */
  --gold:#c99a35;           /* the sunlit water in the photo, lifted slightly to read on grey */
  --mist:#d6dbe1;           /* body text on grey */
  --didone:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --display:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(20px,6vw,72px);
  --space:clamp(96px,16vw,200px);
  --hair:1px;               /* fine red lines: one device pixel on high-density screens */
  color-scheme:light;
}
@media (min-resolution:2dppx){:root{--hair:.5px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:11;background:var(--white)}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;color:var(--blue)}
p{margin:0}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.keyhole{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-11px;flex-shrink:0}
.keyhole svg{width:20px;height:auto;display:block;overflow:visible}
.kh-ring{fill:none;stroke:var(--red);stroke-width:3.7;stroke-linejoin:round}
.kh-gap{fill:none;stroke:var(--white);stroke-width:3;stroke-linejoin:round}
.kh-body{fill:var(--blue);transition:fill .25s}
.keyhole:hover .kh-body{fill:var(--red)}
nav{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-shrink:0}
nav a{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;padding-block:6px;border-bottom:var(--hair) solid transparent;transition:border-color .2s,color .2s}
nav a:hover{color:var(--red);border-bottom-color:var(--red)}
@media (max-width:700px){
  nav a.hide-sm{display:none}
  .bar{height:64px}
  .keyhole svg{width:18px}
  nav{gap:16px}
  nav a{font-size:11px;letter-spacing:.1em}
}
@media (max-width:389px){
  nav{gap:14px}
  nav a{letter-spacing:.08em}
  nav a.stack{white-space:normal;width:min-content;text-align:center;line-height:1.25;padding-block:2px}
}

/* Hero */
.hero{padding-block:clamp(56px,9vw,120px) var(--space);text-align:center}
.hero-logo{display:block;width:clamp(220px,26vw,300px);height:auto;aspect-ratio:548/517;margin:0 auto clamp(48px,7vw,80px)}
.hero h1{margin-top:22px;font-size:clamp(40px,7.4vw,92px);line-height:1.04;letter-spacing:-.01em;max-width:14ch;margin-inline:auto}
.hero h1 em{font-style:italic;font-family:var(--serif);color:var(--red)}
.hero .lede{max-width:34em;margin:clamp(28px,4vw,40px) auto 0;color:var(--muted);font-size:clamp(17px,1.6vw,19px)}
.hero .cta{margin-top:48px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--blue);color:var(--blue);background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--blue);color:var(--white)}
.btn.solid{background:var(--red);border-color:var(--red);color:var(--white)}
.btn.solid:hover{background:var(--blue);border-color:var(--blue)}

/* The chain: fund → story → investor */
.chain{margin-top:clamp(80px,12vw,140px);display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:clamp(12px,3vw,32px);max-width:860px;margin-inline:auto;text-align:center}
.chain .node{min-width:0}
.chain .node b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(18px,2.2vw,24px);color:var(--blue)}
.chain .node small{display:block;margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chain .node.mid b{color:var(--red)}
.chain .arrow{width:clamp(28px,6vw,72px);height:1px;background:var(--line);position:relative}
.chain .arrow::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg)}
@media (max-width:640px){
  .chain{grid-template-columns:1fr;gap:18px}
  .chain .arrow{width:1px;height:28px;margin-inline:auto}
  .chain .arrow::after{right:-3px;top:auto;bottom:-1px;transform:rotate(135deg)}
}

/* Section scaffolding */
section.block{padding-block:var(--space)}
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(56px,8vw,96px)}
.head h2{font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-.015em;margin-top:18px}
.head p{color:var(--muted);max-width:32em}
@media (max-width:820px){.head{grid-template-columns:1fr;align-items:start}}

.divider{width:min(56vw,460px);height:var(--hair);margin-inline:auto;background:var(--red)}

/* Marketing and Agency Support: services list */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,96px);border-top:1px solid var(--line)}
.service{padding-block:36px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.service .mark{width:10px;height:10px;margin-top:12px;border:var(--hair) solid var(--red);transform:rotate(45deg)}
.service h3{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--blue)}
.service p{margin-top:10px;color:var(--muted);font-size:16px}
@media (max-width:720px){.services{grid-template-columns:1fr}}

.quote{margin-top:clamp(80px,10vw,128px);text-align:center}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.2vw,36px);line-height:1.35;color:var(--blue);max-width:24ch;margin-inline:auto;text-wrap:balance}
.quote p span{color:var(--red)}

/* Investing: the one bold block; its reading text sits in white frames */
.investing{background:var(--blue);color:var(--white)}
.investing .head{grid-template-columns:1fr}
.investing .head .label{color:#ff8f9b}
.investing h2{color:var(--white)}
.panel{background:var(--white);color:var(--ink);padding:clamp(24px,4vw,48px)}
.panel + .panel{margin-top:clamp(20px,3vw,32px)}
.panel-lede{font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--blue);max-width:34em;margin-top:14px}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,56px)}
.pillar{border-top:var(--hair) solid var(--rule);padding-top:24px;min-width:0}
.pillar .k{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pillar h3{color:var(--blue);font-family:var(--serif);font-size:22px;line-height:1.3;margin-top:12px}
.pillar p{margin-top:10px;color:var(--muted);font-size:16px}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}
.factsheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:center}
.factsheet h3{margin-top:14px;font-size:clamp(28px,3.6vw,40px);line-height:1.1}
.factsheet .sub{color:var(--muted);margin-top:14px;font-size:15px}
.fs-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.fs-table td{padding:12px 0;border-bottom:var(--hair) solid var(--rule)}
.fs-table td:last-child{text-align:right;font-weight:600;color:var(--blue);white-space:nowrap;padding-left:16px}
.fs-table tr:last-child td{border-bottom:0}
.fs-note{grid-column:1/-1;font-size:12px;color:var(--muted);letter-spacing:.02em}
@media (max-width:760px){.factsheet{grid-template-columns:1fr}}

/* Faith over Matter: grey that deepens into the photograph */
.faith{background:linear-gradient(180deg,var(--slate) 0%,var(--slate-deep) 78%);color:var(--white);overflow:hidden}
/* Text to the left of the title. The gold rule is solid under the title and fades out behind the text,
   which it divides the way it divides Faith from Matter: the opening sentence above, the rest below. */
.faith-copy{--gap:clamp(40px,6vw,96px);position:relative;z-index:1;padding-block:var(--space) clamp(64px,8vw,104px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a faith" "rule rule" "b matter";column-gap:var(--gap)}
.fw{font-family:var(--didone);font-weight:400;font-size:clamp(64px,10vw,140px);line-height:1;letter-spacing:.01em;color:var(--white);justify-self:end}
.fw-faith{grid-area:faith;padding-bottom:.12em}
.fw-matter{grid-area:matter;padding-top:.04em}
.faith-text{display:contents;color:var(--mist);font-size:clamp(17px,1.5vw,19px)}
.ft-a,.ft-b{justify-self:end;width:min(100%,26em)}
.ft-a{grid-area:a;align-self:end;padding-bottom:clamp(14px,1.6vw,22px)}
.ft-b{grid-area:b;align-self:start;padding-top:clamp(14px,1.6vw,22px)}
.gold-rule{grid-area:rule;height:1px;display:grid;grid-template-columns:subgrid;clip-path:inset(0)}
.gold-rule::before{content:"";grid-column:1;margin-right:calc(-1 * var(--gap));background:linear-gradient(to right,transparent,var(--gold))}
.gold-rule::after{content:"";grid-column:2;background:var(--gold)}
@supports not (grid-template-columns:subgrid){
  .gold-rule{display:block;background:linear-gradient(to left,var(--gold) 40%,transparent)}
  .gold-rule::before,.gold-rule::after{content:none}
}
.gold-rule.armed{clip-path:inset(0 0 0 100%)}
.gold-rule.armed.drawn{clip-path:inset(0);transition:clip-path 1.8s cubic-bezier(.2,.7,.2,1)}
@media (max-width:560px){
  /* Phones keep the side-by-side layout with a smaller title so the text column stays readable */
  .faith-copy{--gap:16px}
  .fw{font-size:12.4vw}
  .faith-text{font-size:15px;line-height:1.55}
  .ft-a{padding-bottom:10px}
  .ft-b{padding-top:10px}
}
.faith-media{margin:clamp(-140px,-9vw,-56px) 0 0}
.faith-media img,.faith-media video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:40% 30%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%)}
@media (max-width:700px){.faith-media img,.faith-media video{aspect-ratio:1/1;object-position:38% 50%}}

/* Contact */
.contact .head{align-items:start}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;width:100%;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--blue)}
textarea{resize:vertical;min-height:120px}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 22px,calc(100% - 7px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.roles{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
.roles input{position:absolute;opacity:0;width:1px;height:1px}
.roles label{font-size:13px;letter-spacing:.08em;text-transform:none;font-weight:500;color:var(--ink);border:1px solid var(--line);padding:10px 18px;cursor:pointer;transition:all .2s}
.roles input:checked+label{border-color:var(--blue);background:var(--blue);color:var(--white)}
.roles input:focus-visible+label{outline:2px solid var(--blue-bright);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:12px}
.form-foot small{color:var(--muted);font-size:13px;max-width:36em}
.sent{grid-column:1/-1;border-left:var(--hair) solid var(--red);padding:6px 0 6px 18px;font-family:var(--serif);font-size:20px;color:var(--blue)}
.form-error{grid-column:1/-1;color:var(--red);font-size:15px}
.btn:disabled{opacity:.6;cursor:default}
/* Spam trap: kept off-screen so people never fill it in */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){form{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:clamp(72px,10vw,120px) clamp(40px,6vw,56px);text-align:center}
footer .logo{display:block;width:min(240px,64%);height:auto;aspect-ratio:548/517;margin-inline:auto}
footer .meta{margin-top:56px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer .disclaimer{margin-top:28px;font-size:12px;line-height:1.6;color:var(--muted);max-width:70em;margin-inline:auto;text-align:left}
.cities{margin-top:clamp(36px,5vw,48px);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cities i{width:4px;height:4px;border:var(--hair) solid currentColor;transform:rotate(45deg)}
@media (max-width:480px){.cities{letter-spacing:.14em;gap:8px 12px}}

/* Gentle entrance from a visible resting state */
.rise{animation:rise .9s ease-out both}
.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.36s}
@keyframes rise{from{transform:translateY(14px);opacity:.001}to{transform:none;opacity:1}}

/* 404 page */
.notfound{padding-block:clamp(96px,16vw,180px);text-align:center}
.notfound h1{font-size:clamp(40px,6vw,72px);line-height:1.05;margin-top:22px}
.notfound p:not(.label){max-width:30em;margin:28px auto 0;color:var(--muted)}
.notfound .btn{margin-top:44px}