:root{
  --bg:#FFFFFF; --panel:#F7F8FB; --panel2:#FBFCFE; --ink:#16233E; --mut:#5C677E;
  --gold:#D9A62E; --gold-dim:#A67B1E; --line:rgba(22,35,62,.12); --gline:rgba(166,123,30,.45);
  --ok:#1F7A4D; --err:#A32D2D;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.chamfer{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#16233E;padding:12px 20px;z-index:200;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px}

.topbar{height:5px;background:var(--gold)}

.microbar{background:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:rgba(255,255,255,.7);padding:10px 0;text-transform:uppercase}
.microbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.microbar b{color:var(--gold);font-weight:500}

header.site{padding:20px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:50}
header.site .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none}
.brand .nm{font-weight:900;font-size:19px;letter-spacing:.04em}
.brand .nm span{color:var(--gold)}
.brand .tg{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--mut)}
nav.main{margin-left:auto;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.hdr-cta{margin-left:16px;padding:16px 34px}
nav.main a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;position:relative;padding:4px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .25s}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{width:100%}
nav.main a[aria-current="page"]{color:var(--ink)}
nav.main a[aria-current="page"]::after{width:100%}
nav.main a.btn[aria-current="page"]::after{width:0}

.btn{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 26px;text-decoration:none;cursor:pointer;border:1px solid var(--gold);transition:transform .15s, background .2s;
  background:transparent;color:var(--ink)}
.btn.gold{background:var(--gold);color:#16233E;font-weight:600}
.btn.gold:hover{background-color:#E4B63F;transform:translate(-2px,-2px)}
.btn.ghost{color:var(--gold-dim);background:transparent;border-color:var(--gold-dim)}
.btn.ghost:hover{background-color:rgba(166,123,30,.07);transform:translate(-2px,-2px)}
.btn[disabled]{opacity:.55;cursor:progress}

.hero{padding:72px 0 56px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;color:var(--gold-dim);text-transform:uppercase;margin-bottom:18px}
h1{font-weight:900;font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase}
h1 em{font-style:normal;color:var(--gold-dim)}
.route{font-family:'IBM Plex Mono',monospace;color:var(--mut);font-size:13px;letter-spacing:.1em;margin:26px 0 34px}
.route b{color:var(--ink);font-weight:500}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

.pagehead{padding:56px 0 44px;border-bottom:1px solid var(--line);background:var(--panel)}
.pagehead h1{font-size:clamp(32px,4.6vw,54px)}
.pagehead .lead{max-width:620px;margin:20px 0 34px;color:var(--mut);font-size:16px}
.crumb{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.crumb a{color:var(--gold-dim);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.sheet{background:var(--ink);border:1px dashed rgba(217,166,46,.5);padding:32px 30px;position:relative;color:#FFFFFF}
.sheet h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase;margin-bottom:6px}
.sheet ul{list-style:none}
.sheet li{padding:14px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15px;display:flex;gap:13px;line-height:1.5}
.sheet li::before{content:"";width:5px;height:5px;background:var(--gold);flex:none;margin-top:9px}
.sheet .ft{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(217,166,46,.4)}
table.man{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:12.5px}
table.man th{color:var(--mut);font-weight:400;text-align:left;padding:7px 6px;border-bottom:1px solid var(--gline);letter-spacing:.08em;font-size:10.5px;text-transform:uppercase}
table.man td{padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
table.man td.g{color:var(--gold-dim);font-weight:500}
.sheet .ft{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mut);margin-top:14px;letter-spacing:.06em}

.ticker{overflow:hidden;padding:13px 0;background:var(--ink)}
.ticker-inner{display:flex;gap:48px;width:max-content;animation:tick 38s linear infinite;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.66);text-transform:uppercase}
.ticker-inner span b{color:var(--gold);font-weight:500}
.ticker:hover .ticker-inner{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:72px 0}
.tinted{background:var(--panel)}
.tinted .manifest-teaser{background:#FFFFFF}

.band{background:var(--ink);color:#FFFFFF;padding:72px 0}
.band h2{color:#FFFFFF}
.band .sec-k{color:var(--gold)}
.band .step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.band .step h4{color:#FFFFFF}
.band .step p{color:rgba(255,255,255,.7)}
.band .step .n{color:var(--gold)}

.sec-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.26em;color:var(--gold-dim);text-transform:uppercase;margin-bottom:10px}
h2{font-weight:900;font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;letter-spacing:.01em;margin-bottom:34px}
h3{font-weight:900}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);padding:34px 30px;position:relative}
.card:hover{border-color:var(--gline);border-top-color:var(--gold)}
.card .tag{position:absolute;top:0;right:0;background:var(--gold);color:#16233E;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.2em;padding:5px 12px;font-weight:600}
.card h3.t{font-weight:900;font-size:24px;text-transform:uppercase;margin-bottom:6px}
.card p.s{color:var(--mut);font-size:14.5px;margin-bottom:20px}
.card ul{list-style:none}
.card li{padding:11px 0 11px 26px;border-top:1px solid var(--line);font-size:14.5px;position:relative}
.card li::before{content:"◆";position:absolute;left:2px;color:var(--gold-dim);font-size:9px;top:16px}
.card li b{color:var(--gold-dim);font-weight:700}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:st}
.step{border:1px solid var(--line);background:var(--panel2);padding:24px 20px}
.step .n{font-family:'IBM Plex Mono',monospace;color:var(--gold-dim);font-size:12px;letter-spacing:.2em;margin-bottom:10px}
.step .n::before{counter-increment:st;content:"0" counter(st) " /"}
.step h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.step p{color:var(--mut);font-size:13px;line-height:1.55}

.manifest-teaser{background:var(--panel);border:1px dashed var(--gline);padding:44px 34px;text-align:center;position:relative;overflow:hidden}
.manifest-teaser .rows{filter:blur(5px);opacity:.5;user-select:none;pointer-events:none;max-width:640px;margin:0 auto}
.manifest-teaser .stamp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.stamp .cs{font-family:'IBM Plex Mono',monospace;border:2px solid var(--gold-dim);color:var(--gold-dim);padding:12px 26px;
  font-size:15px;letter-spacing:.34em;text-transform:uppercase;transform:rotate(-4deg);background:rgba(255,255,255,.92)}
.stamp p{font-size:13.5px;color:var(--ink);max-width:420px;background:rgba(255,255,255,.92);padding:4px 8px}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.prose p{margin-bottom:16px;font-size:15.5px}
.prose ul{list-style:none;margin:0 0 16px}
.prose li{padding:10px 0 10px 24px;border-top:1px solid var(--line);font-size:15px;position:relative}
.prose li::before{content:"◆";position:absolute;left:2px;color:var(--gold-dim);font-size:9px;top:15px}

.formcard{max-width:720px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--gold);padding:46px 42px}
.formcard h2{text-align:center;margin-bottom:10px}
.formcard .intro{text-align:center;color:var(--mut);font-size:14.5px;max-width:460px;margin:0 auto 8px}
.formcard input,.formcard select,.formcard textarea{background:#FFFFFF}
.submit-row{margin-top:26px;text-align:center}
.alt-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

form{max-width:none}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:18px 0 7px}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:14px;padding:13px 14px;outline:none;transition:border .2s;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut);margin-top:14px;letter-spacing:.06em;text-align:center}
.msg{display:none;font-family:'IBM Plex Mono',monospace;font-size:13px;padding:16px;margin-top:16px;letter-spacing:.06em;line-height:1.5}
.msg.show{display:block}
.ok-msg{border:1px solid var(--ok);color:var(--ok)}
.err-msg{border:1px solid var(--err);color:var(--err)}
.or{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);margin:30px 0 14px;text-align:center;padding-top:26px;border-top:1px solid var(--line)}

footer{background:var(--ink);padding:48px 0 60px;color:rgba(255,255,255,.72);font-size:13px;border-top:5px solid var(--gold)}
footer strong{color:#FFFFFF}
footer .fbrand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#FFFFFF}
footer .fbrand svg{flex:none}
footer .fbrand .nm{font-weight:900;font-size:15px;letter-spacing:.05em}
footer .fbrand .nm span{color:var(--gold)}
footer .fnav{display:flex;gap:22px;flex-wrap:wrap;margin:20px 0}
footer .fnav a{color:rgba(255,255,255,.78);text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
footer .fnav a:hover{color:var(--gold)}
footer .legal{margin-top:20px;font-size:11.5px;letter-spacing:.01em;line-height:1.75;color:rgba(255,255,255,.38);max-width:760px}
footer .legal a{color:var(--gold)}

.center{text-align:center}
.notfound{padding:110px 0 130px;text-align:center}
.notfound .big{font-weight:900;font-size:clamp(60px,12vw,140px);line-height:1;color:var(--gold)}

/* ---- Chamfered buttons ---------------------------------------------------
   A clip-path cuts the corner but cannot draw a border along the diagonal it
   creates, so an outlined button ends up with three sides and an open corner.
   Fixed by building the button from two stacked chamfered layers: ::before is
   the edge colour at full size, ::after is the fill inset by the border width.
   The visible 1px ring between them IS the border, and it follows the diagonal
   like any other side. Both layers sit behind the label via negative z-index.
   Must stay below the component rules — `background:` shorthands would
   otherwise wipe this out.                                                  */
.btn.chamfer{
  --cut:15px;                    /* how far the corner is cut back */
  --b:1px;                       /* border thickness */
  --edge:var(--gold);
  --fill:#FFFFFF;
  clip-path:none;                /* the gradients make the shape instead */
  border:var(--b) solid transparent;
  /* The padding box corner already sits √2·b inward, so the inner cut is pulled
     back by (√2−1)·b to leave exactly b of edge showing along the diagonal. */
  background:
    linear-gradient(225deg,transparent calc(var(--cut) - 0.414px),var(--fill) 0) padding-box,
    linear-gradient(225deg,transparent var(--cut),var(--edge) 0) border-box;
}
.btn.gold.chamfer{--fill:var(--gold);--edge:var(--gold)}
.btn.gold.chamfer:hover{--fill:#E4B63F;--edge:#E4B63F}
.btn.ghost.chamfer{--edge:var(--gold-dim)}
.btn.ghost.chamfer:hover{--fill:#F8F2E7}

/* Same treatment for the panels. The buy/sell cards and the form card also carry
   a gold cap, which can't be part of a single-colour ring — so the ring is the
   hairline and the cap becomes its own bar that stops where the corner is cut
   (leg = cut × √2). The hero sheet keeps the plain clip-path: its dashed rule
   can't be a gradient ring, and its solid navy fill already carries the shape. */
.step.chamfer,
.card.chamfer,
.formcard.chamfer{
  --cut:15px; --b:1px; --edge:var(--line); --fill:var(--panel);
  clip-path:none;
  border:var(--b) solid transparent;
  background:
    linear-gradient(225deg,transparent calc(var(--cut) - 0.414px),var(--fill) 0) padding-box,
    linear-gradient(225deg,transparent var(--cut),var(--edge) 0) border-box;
}
.step.chamfer{--fill:var(--panel2)}
.band .step.chamfer{--edge:rgba(255,255,255,.16);--fill:#222E48}

.card.chamfer,
.formcard.chamfer{position:relative}
.card.chamfer::before,
.formcard.chamfer::before{
  content:"";position:absolute;top:0;left:0;height:3px;
  width:calc(100% - var(--cut) * 1.414);
  background:var(--gold);
}
.card.chamfer:hover{--edge:var(--gline)}
/* The corner tag used to be clipped by the card's old clip-path. Put a clip back
   on exactly the same diagonal (leg = cut × √2) so children still follow the
   corner — it coincides with the gradient cut, so the border is untouched. */
.card.chamfer{clip-path:polygon(0 0,calc(100% - 21.2px) 0,100% 21.2px,100% 100%,0 100%)}

.rv{opacity:0;transform:translateY(14px);animation:rv .6s forwards}
@keyframes rv{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{animation:none;opacity:1;transform:none}
  .ticker-inner{animation:none}
  .btn:hover{transform:none}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero .wrap>*{min-width:0}
  .split,.cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  nav.main{gap:16px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .microbar{font-size:10px;letter-spacing:.1em;padding:8px 0}
  .microbar .wrap{justify-content:center;gap:3px 14px}

  /* Row 1: brand left, Enquire right. Row 2: the nav links. */
  header.site{padding:12px 0}
  header.site .wrap{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
  .brand{order:1;gap:10px}
  .brand svg{width:42px;height:42px}
  .brand .nm{font-size:16px}
  .brand .tg{display:none}
  .hdr-cta{order:2;margin-left:0;padding:12px 20px;font-size:11px;letter-spacing:.12em}
  nav.main{order:3;width:100%;margin-left:0;justify-content:space-between;gap:8px;
    border-top:1px solid var(--line);padding-top:11px;margin-top:2px}
  nav.main a{font-size:10.5px;letter-spacing:.1em;padding:2px 0}

  .wrap{padding:0 16px}
}
/* Narrow phones — keep brand and Enquire on the same row */
@media (max-width:400px){
  .wrap{padding:0 13px}
  .brand{gap:8px}
  .brand svg{width:36px;height:36px}
  .brand .nm{font-size:14px;letter-spacing:.03em}
  .hdr-cta{padding:11px 15px;font-size:10px;letter-spacing:.1em}
  nav.main{gap:4px}
  nav.main a{font-size:9.5px;letter-spacing:.06em}
}
/* Smallest phones — the longer name needs a little more squeeze to stay on one row */
@media (max-width:345px){
  .brand svg{width:30px;height:30px}
  .brand .nm{font-size:12.5px;letter-spacing:.02em}
  .hdr-cta{padding:10px 12px;font-size:9px}
}
@media (max-width:560px){
  .sheet{padding:18px 14px}
  .sheet::before{font-size:34px}
  table.man{font-size:11px}
  table.man th,table.man td{padding:7px 3px}
  .manifest-teaser{padding:34px 16px}
  .manifest-teaser .rows{display:none}
  .manifest-teaser .stamp{position:static;min-height:0}
  .stamp .cs{font-size:13px;letter-spacing:.22em}
  section{padding:52px 0}
}