/* Diamond Banking Group — design system. */
:root{
  --ink:#040706; --ink2:#07110c; --ink3:#0b1a13;
  --brand:#427855; --jade:#7ed0a2; --jade2:#4fb07f; --gold:#c9a961;
  --bone:#eeeae2; --muted:#a3ada7; --dim:#6f7a74;
  --line:rgba(255,255,255,.10); --line2:rgba(126,208,162,.28);
  --glass:rgba(12,24,18,.55);
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg:28px; --r-md:20px; --r-pill:999px;
  --wrap:1240px; --gut:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{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(--ink);color:var(--bone);font:400 16px/1.65 var(--sans);letter-spacing:.005em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--brand);color:#fff}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:8px;background:var(--jade);color:#04110a;padding:10px 16px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:6px}

/* grain: a fixed, non-interactive noise layer that gives the black depth */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.04;margin:0}
h1{font-size:clamp(44px,7.2vw,96px)}
h2{font-size:clamp(34px,4.8vw,64px)}
h3{font-size:clamp(24px,2.4vw,32px);line-height:1.12}
h1 em,h2 em,h3 em{font-style:italic;color:var(--jade)}
p{margin:0 0 1em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--jade)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.lede{font-size:clamp(17px,1.5vw,20px);color:#d5dcd8;max-width:40ch}
.muted{color:var(--muted)}
.hl{color:var(--jade)}

/* ---------- buttons ---------- */
.btn{--bg:var(--jade);display:inline-flex;align-items:center;gap:14px;padding:15px 16px 15px 24px;border-radius:var(--r-pill);
  background:var(--bg);color:#03110a;font:700 14px/1 var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid transparent;
  transition:transform .35s var(--ease),background .3s,box-shadow .35s;box-shadow:0 0 0 0 rgba(126,208,162,0)}
.btn .ar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(3,17,10,.12);transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(126,208,162,.55)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{--bg:transparent;color:var(--bone);border-color:var(--line)}
.btn.ghost .ar{background:rgba(255,255,255,.06)}
.btn.ghost:hover{border-color:var(--line2);box-shadow:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,100% - 24px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 18px;border-radius:var(--r-pill);
  background:rgba(6,14,10,.35);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:background .4s,border-color .4s}
.nav.scrolled{background:rgba(6,14,10,.78);border-color:rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand img{width:40px;height:40px}
.brand span{font:700 15px/1.1 var(--sans);letter-spacing:.02em;white-space:nowrap}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:10px 14px;border-radius:var(--r-pill);font:500 14px/1 var(--sans);color:#cfd6d2;text-decoration:none;transition:background .25s,color .25s}
.nav ul a:hover,.nav ul a[aria-current="page"]{background:rgba(255,255,255,.07);color:#fff}
.nav .btn{padding:11px 12px 11px 18px;font-size:13px}
.nav .btn .ar{width:26px;height:26px}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--bone);border-radius:var(--r-pill);padding:10px 16px;font:600 13px var(--sans)}
@media (max-width:960px){
  .nav ul,.nav .btn{display:none}
  .menu-btn{display:inline-block}
  .nav.open{border-radius:24px;flex-wrap:wrap}
  .nav.open ul{display:flex;flex-direction:column;width:100%;padding:8px 0 4px}
  .nav.open ul a{padding:14px 12px;font-size:16px}
  .nav.open .btn{display:inline-flex;margin:4px 0 8px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-bottom:clamp(40px,7vh,90px)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.hero-media video{position:absolute;inset:0}
/* desktop: the media covers the FIRST SCREEN only and fades into the ink, so the monogram keeps the scale and
   placement of its source frame however tall the hero content grows (14 Sep: a 1128px hero enlarged it 1.2x) */
@media (min-width:901px){.hero-media{bottom:auto;height:100svh;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
  .hero-media img,.hero-media video{transform:scale(.8);transform-origin:96% 58%;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 60% 70% at 72% 52%,#000 58%,transparent 100%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(4,7,6,.92) 0%,rgba(4,7,6,.66) 38%,rgba(4,7,6,.05) 70%),linear-gradient(0deg,var(--ink) 0%,rgba(4,7,6,0) 32%)}
.hero-inner{display:grid;gap:28px;padding-top:140px}
.hero h1{max-width:12ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(10,20,15,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 13px/1 var(--sans);color:#d8dfdb}
.disclose{margin-top:14px;display:flex;gap:12px;align-items:flex-start;max-width:720px;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(8,16,12,.6);font-size:13.5px;line-height:1.55;color:#c3cbc6}
.disclose svg{flex:none;margin-top:2px;color:var(--jade)}
.disclose a{color:var(--jade)}
@media (max-width:900px){
  .hero{align-items:flex-end}
  .hero-media img,.hero-media video{object-position:50% 0%}
  .hero-media{opacity:.42}
  .hero::after{background:linear-gradient(0deg,rgba(4,7,6,.97) 0%,rgba(4,7,6,.8) 45%,rgba(4,7,6,.25) 80%)}
}
.page-hero{position:relative;padding:170px 0 90px;overflow:hidden;isolation:isolate}
.page-hero .ph-media{position:absolute;inset:0;z-index:-2}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,7,6,.95),rgba(4,7,6,.55) 60%,rgba(4,7,6,.3)),linear-gradient(0deg,var(--ink),rgba(4,7,6,0) 45%)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--jade)}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(90px,12vw,160px) 0}
.sec-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(40px,5vw,70px)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* spotlight cards — the cursor carries a soft light across the glass */
.spot{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),border-color .4s;transform-style:preserve-3d}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(126,208,162,.16),transparent 60%)}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(126,208,162,.75),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::before,.spot:hover::after,.spot:focus-within::before,.spot:focus-within::after{opacity:1}
.spot:hover{border-color:rgba(126,208,162,.2)}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .spot{padding:30px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.b-card{grid-column:span 4;min-height:420px!important}
.b-crypto{grid-column:span 2;grid-row:span 2}
.b-apm{grid-column:span 2}.b-direct{grid-column:span 4}
.b-bank{grid-column:span 4}
.bento .art{position:absolute;inset:0;z-index:0}
.bento .art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bento .spot:hover .art img{transform:scale(1.05)}
.bento .art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,6,.95) 8%,rgba(4,7,6,.25) 60%,rgba(4,7,6,.05))}
.bento .txt{position:relative;z-index:1;display:grid;gap:10px}
.bento h3{font-size:clamp(26px,2.6vw,36px)}
.bento p{margin:0;color:#c9d1cc;max-width:46ch}
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(66,120,85,.14);color:var(--jade);margin-bottom:8px}
.more{display:inline-flex;gap:8px;align-items:center;font:600 13px var(--sans);letter-spacing:.04em;color:var(--jade);text-decoration:none;margin-top:6px}
.more svg{transition:transform .35s var(--ease)}.spot:hover .more svg{transform:translateX(4px)}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.b-card,.b-bank{grid-column:span 2}.b-crypto{grid-column:span 2;grid-row:auto;min-height:380px}.b-apm,.b-direct{grid-column:span 1}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.bento .spot{grid-column:auto!important;min-height:240px}.b-card,.b-crypto{min-height:360px!important}}

/* kinetic band */
.band{position:relative;overflow:hidden;padding:clamp(80px,11vw,150px) 0;isolation:isolate;border-block:1px solid var(--line)}
.band .bg{position:absolute;inset:-12% 0;z-index:-2}
.band .bg img{width:100%;height:100%;object-fit:cover;opacity:.7}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 50% 50%,rgba(4,7,6,.35),rgba(4,7,6,.9))}
.kinetic{font-family:var(--serif);font-size:clamp(40px,6.4vw,92px);line-height:1.05;text-align:center}
.rot{display:inline-grid;height:1.1em;overflow:hidden;vertical-align:bottom;color:var(--jade);font-style:italic}
.rot span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .8s var(--ease),opacity .6s}
.rot span.on{transform:none;opacity:1}
.rot span.off{transform:translateY(-110%);opacity:0}
/* park the outgoing word instantly; without this it animates back DOWN through
   the window and crosses the incoming word (John, 21 Sep: "goes a bit funny") */
.rot span.reset{transition:none}
.no-js .rot span:first-child,.reduce .rot span:first-child{transform:none;opacity:1}

/* sectors */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sector{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:520px;border:1px solid var(--line);display:flex;align-items:flex-end;isolation:isolate}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease),filter .8s}
.sector::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,7,6,.96) 12%,rgba(4,7,6,.2) 60%,rgba(4,7,6,0))}
.sector .in{padding:26px;display:grid;gap:10px}
.sector .n{font:600 12px var(--sans);letter-spacing:.16em;color:var(--jade)}
.sector p{margin:0;color:#c5cdc8;font-size:15px;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s}
.sector:hover img,.sector:focus-within img{transform:scale(1.07)}
.sector:hover p,.sector:focus-within p{max-height:9em;opacity:1}
@media (hover:none){.sector p{max-height:none;opacity:1}}
@media (max-width:1080px){.sectors{grid-template-columns:1fr 1fr}.sector{min-height:440px}}
@media (max-width:620px){.sectors{grid-template-columns:1fr}.sector{min-height:380px}.sector p{max-height:none;opacity:1}}

/* crystal divider */
.divider{position:relative;height:0;z-index:2}
.divider img{position:absolute;left:50%;top:0;width:clamp(150px,18vw,240px);height:auto;transform:translate(-50%,-50%);mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%);mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%);animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-58%) rotate(3deg)}}

/* how it works — pinned story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px)}
.story-pin{position:sticky;top:120px;align-self:start;display:grid;gap:22px}
.story-pin figure{margin:18px 0 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;max-height:62vh}
.story-pin figure img{width:100%;height:100%;object-fit:cover}
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 46px}
.steps::before{content:"";position:absolute;left:14px;top:10px;bottom:10px;width:1px;background:var(--line)}
.steps .prog{position:absolute;left:14px;top:10px;width:1px;height:calc(100% - 20px);background:linear-gradient(var(--jade),var(--brand));transform-origin:top;transform:scaleY(var(--p,0))}
.steps li{position:relative;padding:34px 0 64px;opacity:.38;transition:opacity .6s}
.steps li.active,.no-js .steps li,.reduce .steps li{opacity:1}
.steps li::before{content:attr(data-n);position:absolute;left:-46px;top:34px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--sans);background:var(--ink);border:1px solid var(--line2);color:var(--jade)}
.steps li.active::before{background:var(--jade);color:#03110a}
.steps h3{margin-bottom:12px}
.steps p{color:#c5cdc8;max-width:44ch}
@media (max-width:900px){.story{grid-template-columns:1fr}.story-pin{position:relative;top:0}.story-pin figure{aspect-ratio:16/10}.steps li{opacity:1;padding-bottom:40px}}

/* principles */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid4 .spot{padding:30px;min-height:250px}
.grid4 h3{font-size:26px;margin:14px 0 10px}
.grid4 p{color:#c3cbc6;margin:0;font-size:15px}
@media (max-width:1000px){.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}

/* network plate */
.plate{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(30px,6vw,80px)}
.plate figure{margin:0;border-radius:50%;overflow:hidden;aspect-ratio:1;border:1px solid var(--line);box-shadow:0 0 120px -30px rgba(66,120,85,.6)}
.plate figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
@media (max-width:900px){.plate{grid-template-columns:1fr}.plate figure{max-width:440px;margin-inline:auto}}

/* chess rows (solutions page) */
.chess{display:grid;gap:clamp(70px,9vw,130px)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.row:nth-child(even) .row-media{order:2}
.row-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.row-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.row:hover .row-media img{transform:scale(1.04)}
.row .txt{display:grid;gap:18px}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;color:#d0d7d3}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:rgba(126,208,162,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237ed0a2' stroke-width='2.4'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:900px){.row{grid-template-columns:1fr}.row:nth-child(even) .row-media{order:0}}

/* two columns: what we are / are not */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split .spot{padding:34px}
.split h3{margin-bottom:16px}
.split .ticks.x li::before{background:rgba(201,169,97,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c9a961' stroke-width='2.4'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:500 clamp(18px,1.6vw,21px)/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--jade);transition:transform .4s var(--ease),background .3s}
.faq details[open] summary .pm{transform:rotate(45deg);background:rgba(126,208,162,.12)}
.faq .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq details[open] .ans{grid-template-rows:1fr}
.faq .ans>div{overflow:hidden}
.faq .ans p{color:#c3cbc6;padding-bottom:22px;margin:0;max-width:62ch}
@media (max-width:900px){.faq{grid-template-columns:1fr}}

/* cta band */
.cta{position:relative;margin:0 var(--gut) clamp(60px,8vw,110px);border-radius:36px;overflow:hidden;isolation:isolate;border:1px solid var(--line);padding:clamp(60px,9vw,120px) clamp(24px,6vw,90px)}
.cta .bg{position:absolute;inset:0;z-index:-2}.cta .bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,7,6,.93),rgba(4,7,6,.55) 60%,rgba(4,7,6,.25))}
.cta .in{display:grid;gap:22px;max-width:640px}

/* contact */
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}
.form{padding:clamp(24px,4vw,44px)}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
.field label{font:600 13px var(--sans);letter-spacing:.04em;color:#cdd4d0}
.field input,.field textarea,.field select{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--bone);font:400 16px var(--sans);transition:border-color .3s,background .3s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--jade);background:rgba(126,208,162,.05)}
.field select option{background:#0b1a13}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill);border:1px solid var(--line);cursor:pointer;font:500 14px var(--sans);color:#d0d7d3;transition:border-color .3s,background .3s}
/* the checkbox is a flex ITEM with no basis, so it stretched to fill the pill and shoved
   the label across its neighbour on a real phone (John's 21 Sep 16:33 screenshot) */
.checks input{accent-color:var(--jade);flex:0 0 auto;width:18px;height:18px;margin:0}
.checks label{white-space:nowrap}
.checks label:has(input:checked){border-color:var(--jade);background:rgba(126,208,162,.08)}
.form .note{font-size:13px;color:var(--muted);margin:18px 0 0}
.form .ok{display:none;padding:18px;border-radius:14px;border:1px solid var(--line2);background:rgba(126,208,162,.07);margin-top:18px}
.form.sent .ok{display:block}
.aside{padding:clamp(24px,3vw,36px);display:grid;gap:22px}
.aside ol{margin:0;padding-left:20px;display:grid;gap:12px;color:#c9d1cc}
@media (max-width:900px){.contact{grid-template-columns:1fr}.form .grid{grid-template-columns:1fr}}

/* prose (legal pages) */
.prose{max-width:760px}
.prose h2{font-size:clamp(28px,3vw,38px);margin:48px 0 14px}
.prose p,.prose li{color:#c9d1cc}
.prose a{color:var(--jade)}

/* footer */
.foot{border-top:1px solid var(--line);padding:70px 0 40px;background:linear-gradient(180deg,var(--ink),#020403)}
.foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot .brand img{width:64px;height:64px}
.foot h4{font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--jade);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{color:#c4ccc7;text-decoration:none}.foot ul a:hover{color:var(--jade)}
.foot .legal{border-top:1px solid var(--line);padding-top:26px;font-size:12.5px;line-height:1.7;color:var(--dim);display:grid;gap:10px}
.foot .legal a{color:var(--muted)}
@media (max-width:820px){.foot .top{grid-template-columns:1fr}}

/* reveal — transform only for anything that carries a call to action; content is readable on the first frame */
.js .rv{transform:translateY(28px);opacity:.001;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.js .rv.in{transform:none;opacity:1}
.js .rv-t{transform:translateY(22px);transition:transform 1s var(--ease)}
.js .rv-t.in{transform:none}
.reduce .rv,.reduce .rv-t{transform:none!important;opacity:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.divider img{animation:none}.spot{transform:none!important}}

/* 15 Sep call: business banking removed; APM takes the wide London tile; contact form full width without the aside */
.b-apm{grid-column:span 2}.b-crypto{grid-column:span 3;grid-row:auto}.b-direct{grid-column:span 3}
@media (max-width:980px){.b-apm{grid-column:span 2}.b-crypto,.b-direct{grid-column:span 1}}
.contact.solo{grid-template-columns:minmax(0,860px);justify-content:center}