/* ============================================================================
   Hastelloy Fund Managers — landing page
   Built to the approved design system (runway C1–C6) and the motion spec.

   Tokens below are the twenty-four the design document publishes: the nine that
   are the system, plus the fifteen supporting values documented on 12 September
   after a pre-build audit found the layouts using more colours than the palette
   named.

   Two of those values were repaired at the same time and must not drift back:
   --ink-soft replaced a grey that failed WCAG AA on the form labels, and
   --keyline replaced a field boundary too faint to identify a control.
   ========================================================================= */

/* fonts.css is linked from the document head, not imported here: an @import
   cannot start downloading until this file has arrived and been parsed, which
   put the typefaces one full round trip behind the stylesheet. */

/* ---------------------------------------------------------------- tokens */
:root{
  /* the system */
  --navy:#14133B;          /* primary: hero, footer, headings */
  --navy-deep:#0D0C26;     /* deepest ground */
  --navy-mid:#2A2960;      /* borders and surfaces on dark */
  --red:#E31E24;           /* accent only: swoosh, primary button */
  --red-deep:#B30C0C;      /* red set as text */
  --ink:#1C1B17;           /* body text on paper */
  --ink-muted:#55555F;     /* secondary text, captions */
  --paper:#FBFAF8;         /* page ground */
  --line:#E4E2DE;          /* rules and dividers */

  /* supporting */
  --ink-soft:#6B6B75;      /* eyebrows, field labels, placeholders */
  --ink-body:#3A3A44;      /* header links, secondary body on paper */
  --keyline:#949087;       /* field and secondary-button boundary */
  --disabled:#8C8C97;      /* inactive labels only — exempt from WCAG 1.4.3 */
  --lavender:#C6C4E0;      /* body copy on navy */
  --lavender-muted:#9E9CC4;/* captions and meta on navy */
  --numeral:#8A88C0;       /* step numerals on navy */
  --lavender-pale:#DEDCEE; /* emphasis on navy */
  --navy-line:#4A497E;     /* rules and borders on navy */
  --red-soft:#E9787C;      /* red on navy — never body text */
  --red-deepest:#8E0909;   /* pressed */
  --red-hover:#C4171C;     /* primary button hover fill */
  --paper-shade:#F4F2EE;   /* panel ground on paper */
  --paper-pressed:#F1EFEB; /* secondary button pressed fill */
  --field-disabled:#F7F5F2;/* disabled input fill */

  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* motion — confirms an action, never announces content */
  --t-control:120ms;
  --t-menu:180ms;
  --t-settle:240ms;
  --ease-in:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(.4,0,1,1);

  --gutter:56px;
  --measure:1328px;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:var(--serif); margin:0; letter-spacing:-.01em}
h1{font-size:clamp(34px,4.6vw,56px); line-height:1.06; font-weight:500}
h2{font-size:clamp(27px,3.2vw,38px); line-height:1.16; font-weight:600}
h3{font-size:22px; line-height:1.30; font-weight:600}
p{margin:0}
/* height:auto is not decoration. Every <img> carries width= and height=
   attributes so the browser can reserve the right box before the file
   arrives — but those attributes are also PRESENTATIONAL HINTS, i.e. real
   `width:300px; height:69px` declarations. A rule that sets only a width
   overrides the width hint and leaves the height one standing, so the artwork
   is squeezed into a box of the wrong shape. That caught the reversed logo in
   the mobile menu and the footer here, and on the sister site it had distorted
   two photographs by more than half.
   Declaring it here fixes the whole class of it. The rules below that
   deliberately set a height — the band, the split panel, the context strip,
   all object-fit:cover — are more specific and still win. */
img{max-width:100%; height:auto; display:block}
ul{margin:0; padding:0; list-style:none}
a{color:inherit}

/* Focus is one treatment everywhere: 2px navy, 2px offset. Never removed. */
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:1px}
.on-navy :focus-visible,.hero :focus-visible,.footer :focus-visible{outline-color:#FFFFFF}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px; font-size:15px; font-weight:600;
}
.skip:focus{left:0}

/* Section rule: 52px desktop, 44px mobile. One of the four places red appears. */
.rule{width:52px; height:3px; background:var(--red); border:0; margin:0 0 16px}
.eyebrow{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft); margin:0;
}
.on-navy .eyebrow{color:var(--lavender-muted)}
.lede{font-size:19px; line-height:1.55; color:var(--ink-muted); max-width:52ch}
.small{font-size:14px; line-height:1.5}

section{padding:84px 0}
.on-navy{background:var(--navy); color:#FFFFFF}
.on-navy h2,.on-navy h3{color:#FFFFFF}
.on-navy p{color:var(--lavender)}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:14px 26px; border:1px solid transparent; border-radius:2px;
  font-family:var(--sans); font-size:16px; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--t-control) var(--ease-in),
             border-color var(--t-control) var(--ease-in),
             color var(--t-control) var(--ease-in);
}
.btn-primary{background:var(--red); color:#FFFFFF}
.btn-primary:hover{background:var(--red-hover)}
.btn-primary:active{background:var(--red-deepest)}
.btn-secondary{background:transparent; border-color:var(--keyline); color:var(--navy)}
.btn-secondary:hover{border-color:var(--navy)}
.btn-secondary:active{background:var(--paper-pressed)}
.on-navy .btn-secondary,.hero .btn-secondary{border-color:var(--navy-line); color:#FFFFFF}
.on-navy .btn-secondary:hover,.hero .btn-secondary:hover{border-color:#FFFFFF}
.btn-navy{background:var(--navy); color:#FFFFFF}
.btn-navy:hover{background:var(--navy-mid)}
.btn[disabled]{background:var(--line); color:var(--disabled); border-color:var(--line); cursor:default}

/* ---------------------------------------------------------------- header */
.header{
  position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:32px; min-height:72px}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{width:196px; height:auto}
.nav{display:flex; gap:28px; margin-left:auto}
.nav a{
  position:relative; font-size:15px; font-weight:500; color:var(--ink-body);
  text-decoration:none; padding:6px 0;
}
/* the rule grows from the left — the one place a header link uses red */
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red);
  transition:width var(--t-control) var(--ease-in);
}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}
.header .btn{margin-left:8px; min-height:44px; padding:12px 22px; font-size:15px}
.burger{
  display:none; width:44px; height:44px; margin-left:auto; padding:0;
  background:none; border:0; cursor:pointer; align-items:center; justify-content:center;
}
.burger span{display:block; width:22px; height:2px; background:var(--navy); position:relative}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:22px; height:2px; background:var(--navy);
}
.burger span::before{top:-7px} .burger span::after{top:7px}

/* ------------------------------------------------------------ mobile menu */
.menu{
  position:fixed; inset:0; z-index:50; background:var(--navy); color:#FFFFFF;
  display:flex; flex-direction:column; padding:22px 24px 32px;
  transform:translateY(-100%); transition:transform var(--t-menu) var(--ease-out);
  overflow-y:auto;
}
.menu[data-open="true"]{transform:translateY(0); transition-timing-function:var(--ease-in)}
.menu-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px}
.menu-top img{width:180px}
.menu-close{
  width:44px; height:44px; background:none; border:0; color:#FFFFFF; cursor:pointer;
  font-size:26px; line-height:1;
}
.menu nav a{
  display:block; padding:15px 0; border-bottom:1px solid var(--navy-line);
  font-family:var(--serif); font-size:24px; font-weight:500; color:#FFFFFF; text-decoration:none;
}
.menu .btn{margin-top:24px; width:100%}
.menu-foot{margin-top:auto; padding-top:26px; color:var(--lavender)}
.menu-foot .reg{
  border-left:3px solid var(--red); padding-left:14px; margin-bottom:18px;
}
.menu-foot .reg .eyebrow{color:var(--red-soft); margin-bottom:5px}

/* ------------------------------------------------------------------ hero */
.hero{
  background:var(--navy); color:#FFFFFF; position:relative; overflow:hidden;
  padding:96px 0 92px;
}
/* The watermark is the mark knocked back to pure white, not the red mark at low
   opacity: red appears in four places on this site and a washed-out swoosh
   behind the hero would be a fifth. brightness(0) invert(1) is what the design
   specifies — it flattens the artwork to white before the opacity is applied. */
.hero-mark{
  position:absolute; right:-90px; top:-40px; width:520px; opacity:.16;
  pointer-events:none; filter:brightness(0) invert(1);
}
.hero-grid{
  position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:64px; align-items:start;
}
.hero h1{color:#FFFFFF; max-width:15ch; margin:16px 0 0}
.hero .hero-lede{font-size:18px; line-height:1.6; color:var(--lavender); max-width:46ch; margin-top:20px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero .eyebrow{color:var(--lavender-muted)}
/* the regulatory position occupies the slot every competitor gives Invest Now */
.reg-panel{border-left:3px solid var(--red); padding:2px 0 2px 20px}
.reg-panel .eyebrow{color:var(--red-soft)}
.reg-panel p{font-size:16.5px; line-height:1.6; color:#FFFFFF; margin-top:10px}
.hero-meta{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--navy-line);
  font-size:14px; line-height:1.7; color:var(--lavender-muted);
}

/* ----------------------------------------------------------------- about */
.two-col{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start}
.stack-sm > * + *{margin-top:18px}
.band{margin-top:56px}
/* <picture> is an inline wrapper; without this the band image shrinks to fit
   instead of filling the column. The absolutely-positioned images elsewhere
   are unaffected, because picture is never the positioned ancestor. */
.band picture{display:block}
.band img{width:100%; height:480px; object-fit:cover; display:block}

/* -------------------------------------------------------------- approach */
.approach{position:relative; overflow:hidden}
/* The guilloche is original artwork and already carries its own value range —
   it is not dimmed further. It is the one thing on this page doing the job a
   growth photograph would do, without making a claim. */
.guilloche{
  position:absolute; right:-46px; top:50%; transform:translateY(-50%);
  width:620px; pointer-events:none;
}
.approach-in{position:relative; max-width:60%}
.approach .lede{color:var(--lavender); font-style:italic; font-family:var(--serif); font-size:20px}
.steps{margin-top:34px; border-top:1px solid var(--navy-line)}
.step{display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px; padding:22px 0; border-bottom:1px solid var(--navy-line)}
.step-n{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--numeral); font-variant-numeric:tabular-nums; padding-top:5px}
.step p{font-size:16px; line-height:1.6; color:var(--lavender); margin-top:6px}

/* ------------------------------------------------------------- solutions */
/* the compliance lead-in sits above the products, never beneath them */
.leadin{
  background:var(--paper-shade); border:1px solid var(--line);
  padding:16px 20px; margin-top:26px; font-size:15.5px; line-height:1.6; color:var(--ink-muted);
}
.leadin strong{color:var(--ink); font-weight:600}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px}
.card{background:#FFFFFF; border:1px solid var(--line); padding:24px 24px 26px}
.card h3{font-size:19px; line-height:1.3}
.card p{font-size:15.5px; line-height:1.55; color:var(--ink-muted); margin-top:9px}

/* ---------------------------------------------------------- who we serve */
.split{display:grid; grid-template-columns:minmax(0,.60fr) minmax(0,1fr); align-items:stretch}
.split-img{position:relative; min-height:460px; background:var(--navy-deep)}
.split-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.split-body{background:var(--navy); color:#FFFFFF; padding:76px 56px}
.segs{margin-top:28px; border-top:1px solid var(--navy-line)}
.seg{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:26px; padding:20px 0; border-bottom:1px solid var(--navy-line)}
.seg h3{font-size:17px; line-height:1.35; font-family:var(--sans); font-weight:600}
.seg p{font-size:15.5px; line-height:1.55; color:var(--lavender)}

/* ---------------------------------------------------------------- why us */
.admission{font-size:19px; line-height:1.6; color:var(--ink); max-width:62ch; margin-top:20px}
.admission strong{font-weight:600}
.values{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 32px; margin-top:38px}
.value{border-top:1px solid var(--line); padding-top:15px}
.value h3{font-size:17px; font-family:var(--sans); font-weight:600}
.value p{font-size:15px; line-height:1.55; color:var(--ink-muted); margin-top:7px}

/* ----------------------------------------------------------- context band */
.context{position:relative; height:300px; overflow:hidden; background:var(--navy)}
.context img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%}
.context .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,12,38,.10) 0%,rgba(13,12,38,.86) 100%)}
.context .cap{
  position:absolute; left:0; right:0; bottom:24px; color:#FFFFFF;
  font-size:15.5px; line-height:1.5;
}

/* ----------------------------------------------------------- coming soon */
.soon{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:start}

/* -------------------------------------------------------------- register */
.reg-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start}
.panel{background:#FFFFFF; border:1px solid var(--line); padding:34px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:16.5px; color:var(--ink); background:#FFFFFF;
  border:1px solid var(--keyline); border-bottom-width:2px; border-radius:2px;
  padding:13px 14px; width:100%; min-height:48px;
  transition:border-color var(--t-control) var(--ease-in), box-shadow var(--t-control) var(--ease-in);
}
.field textarea{min-height:96px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft); opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(20,19,59,.18);
}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--navy)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--red-deep)}
.err{font-size:14px; line-height:1.45; color:var(--red-deep); min-height:0}
.consent{font-size:14px; line-height:1.5; color:var(--ink-muted); margin-top:14px}
.consent a{color:var(--red-deep); text-decoration:underline; text-underline-offset:2px}
.form-msg{margin-top:16px; font-size:15.5px; line-height:1.55}
.form-msg[data-kind="error"]{color:var(--red-deep)}
/* the honeypot: present for a bot, unreachable for a person or a screen reader */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.done h3{font-family:var(--serif); font-size:24px}
.done p{margin-top:12px; color:var(--ink-muted)}

/* ---------------------------------------------------------------- footer */
.footer{background:var(--navy-deep); color:#FFFFFF; padding:64px 0 40px}
.footer-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px}
.footer img.logo{width:200px}
.footer p{color:var(--lavender); font-size:14.5px; line-height:1.7}
.footer a{color:#FFFFFF}
.footer h4{
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--lavender-muted); margin:0 0 8px;
}
.footer .block + .block{margin-top:24px}
/* margin-left:0 is load-bearing: the browser's own stylesheet centres an
   <hr>, and a 44px rule centred over a left-aligned heading reads as a
   mistake. */
.footer .rule-sm{width:44px; height:3px; background:var(--red); border:0;
                 margin:0 0 14px}
/* The compact footer carries the same legal text on the pages that have no
   full footer. Same colours, same rules, one column. */
.footer-compact{padding:52px 0 36px; margin-top:0}
.footer-compact .wrap{max-width:720px}
.footer-compact .block + .block{margin-top:20px}
.footer-base{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--navy-line);
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
  font-size:13.5px; color:var(--lavender-muted);
}

/* ------------------------------------------------------------ cookie consent
   Bottom-left, and deliberately substantial rather than a thin strip along the
   bottom edge — Nigeria's GAID asks for a prominent notice, not one that can
   be missed. It sits below the menu overlay (z-index 50) so the two never
   argue, and above the sticky header (40).

   Bottom-RIGHT, not bottom-left. The hero's calls to action are left-aligned,
   and a left-anchored card sat on top of "Register your interest" — the only
   conversion on the site — on a visitor's first screen.

   The class is 'cookiebar' and not the obvious 'consent': the Register
   Interest form already owns .consent for its data-protection line, and these
   rules would have torn that paragraph out of the page.

   BOTH BUTTONS ARE IDENTICAL. That is the point, not an oversight. A red
   Accept beside a faint outlined Decline is the pattern regulators single out,
   and "equally accessible" is the exact wording of the requirement. Nothing
   here is weighted toward yes. */
.cookiebar{
  position:fixed; right:20px; bottom:20px; z-index:45;
  width:380px; max-width:calc(100vw - 40px);
  background:var(--navy-deep); color:#FFFFFF;
  border:1px solid var(--navy-line); padding:24px 24px 22px;
  box-shadow:0 18px 48px rgba(13,12,38,.34);
}
.cookiebar h2{
  font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--lavender-muted);
  margin:0 0 10px;
}
.cookiebar p{font-size:14.5px; line-height:1.6; color:var(--lavender); margin:0}
.cookiebar-acts{display:flex; gap:10px; margin-top:18px}
.cookiebar-acts .btn{
  flex:1 1 0; min-width:0; justify-content:center;
  background:transparent; border:1px solid var(--navy-line); color:#FFFFFF;
}
.cookiebar-acts .btn:hover{border-color:#FFFFFF; background:var(--navy-mid)}
.cookiebar-acts .btn:active{background:var(--navy)}
.cookiebar-more{margin-top:14px}
.cookiebar-more a{color:var(--lavender-pale); font-size:13.5px}
.cookiebar-more a:hover{color:#FFFFFF}
@media (max-width:880px){
  /* Full width at the foot of a phone screen, and as short as the copy allows:
     it still overlays the hero on the first visit, so every line it does not
     need is a line of the page it hides. */
  .cookiebar{left:12px; right:12px; bottom:12px; width:auto; max-width:none; padding:16px 16px 14px}
  .cookiebar p{font-size:14px; line-height:1.5}
  .cookiebar-acts{margin-top:14px; gap:8px}
  .cookiebar-acts .btn{height:46px; padding:0 12px}
  .cookiebar-more{margin-top:10px}
}
/* The banner must never be part of a printed page. */
@media print{ .cookiebar{display:none} }

/* ============================================================ breakpoints
   880px is the one that matters: the nav collapses to a full-screen overlay
   and every two-column grid becomes one. Touch targets stay 44px throughout. */
@media (max-width:1100px){
  :root{--gutter:40px}
  .hero-grid,.two-col,.reg-grid,.soon,.footer-grid{gap:40px}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .approach-in{max-width:72%}
}
@media (max-width:880px){
  :root{--gutter:20px}
  section{padding:52px 0}
  .nav{display:none}
  .header .btn{display:none}
  .burger{display:flex}
  .hero{padding:52px 0 56px}
  .hero-grid,.two-col,.reg-grid,.soon,.footer-grid,.split{grid-template-columns:minmax(0,1fr)}
  .split-body{padding:44px 20px}
  .split-img{min-height:250px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .rule{width:44px}
  .band img{height:220px}
  .context{height:200px}
  .approach-in{max-width:100%}
  .guilloche{width:420px; right:-170px; opacity:.55}
  .hero-mark{width:300px; right:-110px}
  .hero-cta .btn{flex:1 1 100%}
  .step{grid-template-columns:40px minmax(0,1fr); gap:14px}
  .seg{grid-template-columns:minmax(0,1fr); gap:6px}
  .values{gap:22px 24px}
}
@media (max-width:420px){
  h1{font-size:31px}
  .band img{height:180px}
}

/* Motion carries meaning on the controls, so colour transitions stay.
   Everything that travels is removed. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto!important}
  .menu{transition:none}
  .settle{opacity:1!important; transform:none!important}
}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:88px}

/* The one indulgence: headline then subheadline, 8px rise, 60ms apart, once. */
.settle{opacity:0; transform:translateY(8px)}
.settle.in{opacity:1; transform:none; transition:opacity var(--t-settle) var(--ease-in), transform var(--t-settle) var(--ease-in)}
.settle.d1{transition-delay:60ms}

@media print{
  .header,.menu,.burger,.hero-mark,.guilloche{display:none}
  body{background:#fff}
  .on-navy,.hero,.footer,.split-body{background:#fff!important; color:#000!important}
  .on-navy h2,.on-navy h3,.hero h1{color:#000!important}
  .on-navy p,.hero .hero-lede,.footer p{color:#333!important}
}