/* ==========================================================================
   Refine Capital — refine.capital
   Visual system lifted directly from the Refine Capital Brand Guidelines.
   Tokens, logo lockup, eyebrow, hairline bands and the dark ink pattern are
   reused verbatim so the page reads as one piece with the brand document.
   ========================================================================== */

:root{
  --ink:#15171C;
  --ink-2:#1E2128;
  --bone:#F6F4EF;
  --bone-2:#EFEAE0;
  --gold:#B0894F;        /* accent only — rules, underlines, hovers. Never a fill. */
  --gold-soft:#C7A878;   /* gold on dark (AA on ink) */
  --gold-deep:#80632F;   /* gold for label TEXT on bone — AA-safe (5.1:1) */
  --slate:#5E626B;
  --hairline:#E2DED5;
  --hairline-ink:#33363D;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --maxw:1040px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0.005em;
}

/* faint paper grain — lifted from the brand document */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.025;
  mix-blend-mode:multiply;
}

/* ---------- Layout ---------- */
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 48px;}
section{position:relative;z-index:1;}
.band{padding:120px 0;border-top:1px solid var(--hairline);}
/* keep anchored sections clear of the sticky top bar */
section[id]{scroll-margin-top:84px;}

/* Full-bleed dark band — the one reversed-out section (Approach) */
.dark{background:var(--ink);color:var(--bone);}
.dark .eyebrow{color:var(--gold-soft);}
.dark .eyebrow::after{background:var(--gold-soft);}
.dark .body{color:#CFCCC4;}
.dark .meta{color:#8A8D94;}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;letter-spacing:0.005em;}
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 26px;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:0 0 44px;height:1px;background:var(--gold);opacity:0.65;}
.display{font-size:clamp(40px,7vw,84px);line-height:1.02;font-weight:800;}
.lead{font-size:clamp(18px,2.1vw,23px);line-height:1.55;color:#34373E;max-width:34ch;font-weight:300;}
.body{font-size:16.5px;color:#3A3D44;max-width:62ch;line-height:1.65;}
.small{font-size:13.5px;color:var(--slate);line-height:1.5;}
.meta{font-family:var(--sans);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);}
em,.it{font-style:italic;}

/* ---------- Logo lockup (reused from the brand guidelines) ---------- */
.logo{display:inline-flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);line-height:1;}
.logo .mark{height:1.12em;width:auto;display:block;margin-bottom:0.36em;}
svg.mark,svg.mk{fill:currentColor;}
.logo .wordmark{display:block;text-align:center;}
.logo .refine{display:block;font-family:var(--serif);font-weight:700;font-size:1em;letter-spacing:0.045em;}
.logo .capital{display:block;font-family:var(--serif);font-weight:500;font-size:0.40em;letter-spacing:0.345em;margin-top:0.5em;padding-left:0.345em;}
.logo.reverse{color:var(--bone);}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(246,244,239,0.84);
  -webkit-backdrop-filter:saturate(125%) blur(10px);
  backdrop-filter:saturate(125%) blur(10px);
  border-bottom:1px solid var(--hairline);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;gap:24px;}
.topbar a{text-decoration:none;color:inherit;}
.topbar .logo{font-size:16px;}
.topbar-link{
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);
  position:relative;padding:6px 2px;white-space:nowrap;
}
.topbar-link::after{
  content:"";position:absolute;left:2px;right:2px;bottom:2px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.topbar-link:hover::after,.topbar-link:focus-visible::after{transform:scaleX(1);}

/* ---------- Hero ---------- */
.hero{
  min-height:86vh;min-height:86svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:84px 0 96px;
}
.hero .logo{font-size:clamp(38px,6vw,62px);margin-bottom:40px;}
.hero h1{margin:0;}
.hero .lead{max-width:48ch;margin:30px auto 0;text-align:center;color:#34373E;}

/* ---------- What we do ---------- */
.do-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);margin-top:4px;
}
.do-item{background:var(--bone);padding:36px 34px 40px;}
.do-item h3{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.2;margin:0 0 13px;}
.do-item p{font-size:15.5px;color:#3A3D44;line-height:1.62;margin:0;max-width:48ch;}

/* ---------- Approach (the dark ink section) ---------- */
.approach .gold-rule{width:56px;height:2px;background:var(--gold);border:0;margin:0 0 38px;}
.approach .statement{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,2.9vw,33px);line-height:1.4;
  color:var(--bone);max-width:30ch;margin:0;
}

/* ---------- Principles (the five values) ---------- */
.values{margin-top:8px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hairline);}
.value{padding:28px 22px 32px;border-left:1px solid var(--hairline);}
.value:first-child{border-left:0;}
.value .vnum{font-family:var(--sans);font-size:11px;letter-spacing:0.2em;color:var(--gold-deep);}
.value h3{font-family:var(--serif);font-weight:700;font-size:20px;margin:14px 0 10px;line-height:1.2;}
.value p{font-size:13px;color:var(--slate);line-height:1.55;margin:0;}

/* ---------- Focus ---------- */
.focus .statement{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(19px,2.3vw,26px);line-height:1.5;
  color:#34373E;max-width:46ch;margin:0;
}
.focus .statement .accent{color:var(--ink);font-weight:400;}

/* ---------- Enquiries ---------- */
.enquiries .wrap{text-align:center;}
.enquiries .eyebrow{justify-content:center;}
.enquiries .eyebrow::after{display:none;}
.enquiries .line{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(21px,2.6vw,30px);line-height:1.4;color:var(--ink);
  margin:0 auto;max-width:24ch;
}
.enquiries .line a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease;
}
.enquiries .line a:hover{color:var(--gold-deep);}
.btn{
  display:inline-flex;align-items:center;gap:11px;margin-top:34px;
  background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:17px 30px;border:1px solid var(--ink);border-radius:2px;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--ink-2);border-color:var(--gold);}
.btn .arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.btn:hover .arrow{transform:translateX(4px);}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--hairline);padding:54px 0 64px;text-align:center;}
.site-footer .mk{height:22px;width:auto;color:var(--ink);fill:currentColor;display:block;margin:0 auto 26px;}
.colophon{
  font-family:var(--sans);font-size:12.5px;letter-spacing:0.06em;
  color:var(--slate);line-height:1.9;margin:0;
}
.colophon a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--gold);}
.colophon a:hover{color:var(--ink);}
.colophon .sep{margin:0 10px;color:var(--hairline);}
.rc-line{
  font-family:var(--sans);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--slate);margin:14px 0 0;
}
.rc-line .rc-pending{color:var(--gold-deep);font-style:normal;}

/* ---------- Accessibility & motion ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--bone);
  padding:12px 18px;text-decoration:none;font-size:13px;letter-spacing:0.04em;
}
.skip-link:focus{left:10px;top:10px;}
a:focus-visible,.btn:focus-visible,.topbar-link:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;
}

.fade{opacity:0;transform:translateY(14px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.10s;}.d2{animation-delay:.30s;}.d3{animation-delay:.52s;}
@keyframes rise{to{opacity:1;transform:none;}}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .wrap{padding:0 28px;}
  .band{padding:84px 0;}
  .do-grid{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr 1fr;}
  .value{border-left:0;border-top:1px solid var(--hairline);}
  .value:first-child{border-top:0;}
  .approach .statement{max-width:34ch;}
}
@media (max-width:520px){
  .values{grid-template-columns:1fr;}
  .hero{min-height:auto;padding:64px 0 76px;}
  .hero .lead{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .fade{animation:none;opacity:1;transform:none;}
  *{transition:none !important;}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;}
  body::before{display:none;}
  .topbar{position:static;}
  .dark{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .hero{min-height:auto;}
  .fade{opacity:1;transform:none;animation:none;}
}