/* ============================================================
   TREASURUP - DESIGN SYSTEM
   Tokens taken directly from the New Brand Book (August 2026)
   ============================================================ */
:root{
  /* Core four */
  --paper:#F2F2F3;
  --white:#FFFFFF;
  --ink:#1D1F20;
  --steel:#5980A6;

  /* Dark family */
  --deep:#22303F;
  --deep-2:#2B3D50;
  --deep-3:#2C455D;

  /* Blue scale */
  --t1:#EEF6FF;
  --t2:#D6EBFF;
  --t3:#B5D9FD;
  --t4:#94BCE3;
  --t5:#749DC4;
  --t6:#416180;

  /* Ink alphas */
  --ink-86:rgba(29,31,32,.86);
  --ink-76:rgba(29,31,32,.76);
  --ink-62:rgba(29,31,32,.62);
  --ink-45:rgba(29,31,32,.45);
  --line:rgba(29,31,32,.12);
  --line-soft:rgba(29,31,32,.08);

  /* On dark */
  --on-dark:#F2F2F3;
  --on-dark-78:rgba(242,242,243,.78);
  --on-dark-60:rgba(242,242,243,.60);
  --on-dark-40:rgba(242,242,243,.40);
  --dark-line:rgba(115,150,184,.30);
  --dark-fill:rgba(242,242,243,.06);

  /* Shape - brand book: softly squared, never a pill */
  --r-btn:6px;
  --r-card:10px;
  --r-sec:30px;
  --r-ic:11px;

  --head-h:74px;
  --sub-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --dark-bg:radial-gradient(900px 520px at 84% -150px, rgba(148,188,227,.20), transparent 62%),linear-gradient(165deg,#22303f,#2b3d50);
  --dark-bg-alt:radial-gradient(820px 480px at 14% -140px, rgba(148,188,227,.22), transparent 60%),linear-gradient(200deg,#22303f,#2b3d50);
}

*{box-sizing:border-box}
/* smooth scrolling is applied per call in JS, not globally, so route changes jump instantly */
html{scroll-padding-top:calc(var(--head-h) + var(--sub-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.05}
img,svg{display:block}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}
::selection{background:var(--t3);color:var(--ink)}

.wrap{max-width:1220px;margin:0 auto;padding:0 30px}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 30px}
.num{font-feature-settings:'tnum' 1;font-variant-numeric:tabular-nums}

/* ---------- LOGO ---------- */
/* the supplied SVG mark. Inside a <use> shadow tree only currentColor and custom
   properties reach the paths, so the wordmark rides on color and the accent on --lg-accent. */
.logo{display:inline-flex;align-items:center;line-height:0;color:var(--ink);--lg-accent:var(--steel)}
.logo svg{width:100%;height:100%;display:block}
.site-header .logo{width:134px;height:31px}
.site-footer .logo{width:128px;height:29px;color:var(--on-dark);--lg-accent:var(--t3)}
.drawer .logo{color:var(--on-dark);--lg-accent:var(--t3)}

/* ---------- BUTTONS (brand book: 6px, never a pill) ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--r-btn);font-size:15px;font-weight:700;letter-spacing:-.01em;background:var(--steel);color:#fff;border:1px solid var(--steel);transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);white-space:nowrap}
.btn:hover{background:var(--t6);border-color:var(--t6);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(34,48,63,.6)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(29,31,32,.35)}
.btn-ghost:hover{background:rgba(29,31,32,.05);color:var(--ink);border-color:var(--ink);box-shadow:none}
.on-dark .btn-ghost,.sec-dark .btn-ghost,.sec-dark-alt .btn-ghost,.sec-steel .btn-ghost,.mega .btn-ghost{color:var(--on-dark);border-color:rgba(242,242,243,.45)}
.on-dark .btn-ghost:hover,.sec-dark .btn-ghost:hover,.sec-dark-alt .btn-ghost:hover,.sec-steel .btn-ghost:hover,.mega .btn-ghost:hover{background:rgba(242,242,243,.12);color:#fff;border-color:rgba(242,242,243,.75)}
.btn-paper{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.btn-paper:hover{background:#fff;border-color:#fff;color:var(--deep)}
.btn .arw{width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.btn:hover .arw{transform:rotate(45deg) translate(2px,-2px)}
/* keep a trailing arrow tied to the last word so it never wraps alone.
   svg is display:block globally, which is what pushed the arrow onto its own line. */
.nw{white-space:nowrap}
.nw svg{display:inline-block;vertical-align:-2px;margin-left:5px}
.txt-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--t6);border-bottom:1px solid transparent;transition:border-color .18s var(--ease),color .18s}
.txt-link:hover{border-color:currentColor}
.on-dark .txt-link,.sec-dark .txt-link,.sec-dark-alt .txt-link,.sec-steel .txt-link{color:var(--t3)}
/* inline inside a paragraph the link keeps the text size and stays underlined */
.lead .txt-link,p .txt-link{display:inline;font-size:inherit;border-bottom:1px solid rgba(89,128,166,.5)}
.sec-dark .lead .txt-link,.sec-dark-alt .lead .txt-link{border-bottom-color:rgba(181,217,253,.5)}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(250,250,251,.88);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.header-row{height:var(--head-h);display:flex;align-items:center;gap:26px}
.primary-nav{margin-left:auto}
.primary-nav>ul{display:flex;align-items:center;gap:2px}
.nav-link{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-btn);font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink-86);white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
.nav-link:hover{color:var(--ink);background:rgba(29,31,32,.055)}
.nav-link.is-active{background:rgba(89,128,166,.14);color:var(--t6)}
.nav-link .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);opacity:.5}
.has-mega.is-open>.nav-link{background:linear-gradient(135deg,var(--deep),var(--deep-2));color:var(--on-dark)}
.has-mega.is-open>.nav-link .chev{transform:rotate(-135deg) translate(-3px,-3px);opacity:1}
.header-cta{margin-left:14px}

/* ---------- MENU ITEMS FOR PAGES NOT YET BUILT ---------- */
.nav-link.is-off,.d-top.is-off{color:var(--ink-45);cursor:default}
.nav-link.is-off:hover{background:transparent}
.d-top.is-off{color:var(--on-dark-40)}
.item.is-off{cursor:default;opacity:.42}
.item.is-off:hover{background:transparent;transform:none}
.item.is-off:hover .ic{background:var(--dark-fill);border-color:var(--dark-line);color:var(--on-dark)}
.txt-link.is-pending{color:var(--ink-45);cursor:default;border-bottom:0;font-weight:700}
.sec-dark .txt-link.is-pending,.sec-dark-alt .txt-link.is-pending{color:var(--on-dark-40)}

/* ---------- COMPACT DROPDOWN (About us) ---------- */
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 6px);left:0;min-width:212px;z-index:70;
  background:linear-gradient(160deg,var(--deep),var(--deep-2));border:1px solid var(--dark-line);
  border-radius:var(--r-card);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  box-shadow:0 26px 60px -30px rgba(34,48,63,.65);
  transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .2s}
.has-drop.is-open .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a,.drop span{display:block;padding:9px 12px;border-radius:var(--r-btn);
  font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--on-dark-78);transition:background .16s var(--ease),color .16s}
.drop a:hover{background:rgba(115,150,184,.20);color:#fff}
.drop span.is-off{color:var(--on-dark-40);cursor:default}

/* ---------- MEGA MENU ---------- */
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:calc(var(--head-h) + 1px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .24s var(--ease),transform .3s var(--ease),visibility .24s;z-index:70}
.has-mega.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-card{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,var(--deep) 0%,var(--deep-2) 100%);color:var(--on-dark);border-radius:0 0 var(--r-sec) var(--r-sec);box-shadow:0 34px 80px -34px rgba(34,48,63,.6)}
.mega-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 120% at 88% -10%,rgba(115,150,184,.28) 0%,transparent 58%)}
.mega-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:32px 44px 24px;border-bottom:1px solid var(--dark-line)}
.mega-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-60);margin:0 0 10px}
.mega-title{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.14;max-width:24ch}
.mega-body{padding:28px 44px 38px;display:grid;grid-template-columns:1fr 1fr;gap:0 54px}
.col+.col{border-left:1px solid var(--dark-line);padding-left:54px}
.col-head{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-60);margin:0 0 14px}
.group-head{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-60);margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--dark-line)}
.nest-label{font-size:13px;font-weight:700;margin:14px 0 4px;color:#fff}
.item{display:flex;align-items:flex-start;gap:14px;padding:9px 14px;margin-left:-14px;border-radius:var(--r-card);transition:background .16s var(--ease),transform .16s var(--ease)}
.item:hover{background:rgba(115,150,184,.18);transform:translateX(3px)}
.ic{flex:0 0 36px;width:36px;height:36px;border-radius:var(--r-ic);background:var(--dark-fill);border:1px solid var(--dark-line);display:grid;place-items:center;color:var(--on-dark);transition:background .18s var(--ease),border-color .18s var(--ease)}
.item:hover .ic{background:var(--steel);border-color:var(--steel);color:#fff}
.ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.item .t{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.item .d{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--on-dark-60);line-height:1.45}
.tx{padding-top:2px}
.sub{margin:4px 0 4px 14px;padding-left:16px;border-left:1px solid var(--dark-line)}
.sub .item{padding:7px 14px}
.sub .ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px}
.sub .ic svg{width:15px;height:15px}
.sub .item .t{font-size:13.5px;font-weight:600}
.backdrop{position:fixed;inset:var(--head-h) 0 0;background:rgba(29,31,32,.24);opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s;z-index:60}
body.mega-open .backdrop{opacity:1;visibility:visible}

/* ---------- MOBILE DRAWER ---------- */
.burger{display:none;margin-left:auto;padding:10px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:5px}
.drawer{display:none;position:fixed;inset:var(--head-h) 0 0;z-index:75;background:linear-gradient(160deg,var(--deep),var(--deep-2));color:var(--on-dark);overflow-y:auto;padding:16px 22px 60px}
body.drawer-open{overflow:hidden}
body.drawer-open .drawer{display:block}
.d-item{border-bottom:1px solid var(--dark-line)}
.d-top{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 2px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.plus{font-size:20px;font-weight:500;color:var(--on-dark-60);transition:transform .2s var(--ease);display:inline-block}
.d-body{display:none;padding:0 2px 18px}
.d-item.open .d-body{display:block}
.d-item.open .plus{transform:rotate(45deg)}
.d-sec-title{font-size:13px;font-weight:700;color:#fff;margin:4px 0 12px;line-height:1.4}
.d-body .mega-body{display:block;padding:0}
.d-body .col+.col{border-left:0;padding-left:0;margin-top:20px}
.d-cta{display:block;margin-top:24px;text-align:center;background:var(--steel);color:#fff;font-weight:700;padding:15px;border-radius:var(--r-btn)}

/* ---------- PAGE CONTEXT BAR ---------- */
.subbar{position:sticky;top:var(--head-h);z-index:55;background:rgba(34,48,63,.96);backdrop-filter:blur(10px);color:var(--on-dark)}
.subbar-row{height:var(--sub-h);display:flex;align-items:center;gap:20px}
.sub-name{flex:none;font-size:13px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;padding-right:20px;border-right:1px solid var(--dark-line);max-width:42vw;overflow:hidden;text-overflow:ellipsis}
.sub-name span{color:var(--t3)}
.sub-links{flex:1 1 auto;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:auto}
.sub-links::-webkit-scrollbar{display:none}
.sub-links a{font-size:12.5px;font-weight:600;color:var(--on-dark-60);padding:6px 11px;border-radius:var(--r-btn);white-space:nowrap;transition:color .16s,background .16s}
.sub-links a:hover{color:#fff;background:rgba(242,242,243,.09)}

/* ---------- SECTION SYSTEM ----------
   Brand book: light and dark sections alternate.
   Client rule: every section rounded on bottom-left and bottom-right. */
.sec{position:relative;padding:98px 0;border-radius:0 0 var(--r-sec) var(--r-sec)}
.sec-paper{background:var(--paper)}
.sec-white{background:var(--white)}
.sec-dark{background:var(--dark-bg);color:var(--on-dark)}
.sec-dark-alt{background:var(--dark-bg-alt);color:var(--on-dark)}
.sec-steel{background:var(--deep-3);color:var(--on-dark)}
.sec-tight{padding:70px 0}
.sec-flush{border-radius:0}
.on-dark{color:var(--on-dark)}

.eyebrow{font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--t6);margin:0 0 16px}
.sec-dark .eyebrow,.sec-dark-alt .eyebrow,.sec-steel .eyebrow{color:var(--t3)}
.h-xl{font-size:clamp(38px,5.2vw,64px);letter-spacing:-.045em;line-height:1.02}
/* hero display type: spans the full hero width, copy below stays at a readable measure */
.h-hero{font-size:clamp(40px,6.6vw,86px);letter-spacing:-.05em;line-height:.98;max-width:22ch}
.hero-copy{max-width:none}
/* the hero intro runs the full column, like the section intros below it */
.hero-copy .lead{max-width:none;font-size:19px;line-height:1.6}
@media (max-width:900px){
  .hero-copy .lead{font-size:17px}
}
.h-lg{font-size:clamp(28px,3.3vw,40px)}
.h-md{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.03em}
.h-sm{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.lead{font-size:17px;line-height:1.65;color:var(--ink-76);max-width:62ch;margin-top:20px}
/* a lead that belongs to a full-width element below it, not to the column of copy */
.lead-wide{max-width:none}
.sec-dark .lead,.sec-dark-alt .lead,.sec-steel .lead{color:var(--on-dark-78)}
.body-s{font-size:14.5px;line-height:1.62;color:var(--ink-62)}
.sec-dark .body-s,.sec-dark-alt .body-s,.sec-steel .body-s{color:var(--on-dark-60)}
.sec-head{max-width:56ch}
.sec-head .lead{margin-top:18px}

/* ---------- GRIDS ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mt-l{margin-top:48px}
.mt-m{margin-top:32px}
.mt-s{margin-top:20px}

/* ---------- CARDS ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.sec-white .card{background:var(--paper);border-color:transparent}
.card-dark{background:var(--dark-fill);border:1px solid var(--dark-line);border-radius:var(--r-card);padding:28px}
.card-lift{transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.card-lift:hover{transform:translateY(-3px);box-shadow:0 20px 44px -28px rgba(34,48,63,.5);border-color:rgba(89,128,166,.45)}
.card h3,.card-dark h3{margin-bottom:10px}
.icbox{width:44px;height:44px;border-radius:var(--r-ic);background:var(--white);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:20px}
.sec-white .icbox{background:#fff}
.icbox svg{width:22px;height:22px;fill:none;stroke:var(--deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card-dark .icbox,.sec-dark .icbox,.sec-dark-alt .icbox,.sec-steel .icbox{background:var(--dark-fill);border-color:var(--dark-line)}
.card-dark .icbox svg,.sec-dark .icbox svg,.sec-dark-alt .icbox svg,.sec-steel .icbox svg{stroke:var(--t3)}

/* ---------- STAT ---------- */
.stat-n{font-weight:800;font-size:clamp(40px,4.4vw,58px);line-height:.92;letter-spacing:-.04em}
.stat-l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-top:14px;color:var(--t3)}
.sec-paper .stat-l,.sec-white .stat-l{color:var(--t6)}

/* ---------- LOGO ROW / BADGES ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.logos span{font-size:15px;font-weight:700;letter-spacing:-.02em;opacity:.62}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--r-btn);border:1px solid var(--line);color:var(--ink-62);background:var(--white)}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--steel)}
.sec-dark .badge,.sec-dark-alt .badge,.on-dark .badge{border-color:var(--dark-line);color:var(--on-dark-60);background:var(--dark-fill)}
.sec-dark .badge::before,.on-dark .badge::before{background:var(--t3)}

/* ---------- BULLET LIST ---------- */
.blist li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.6;color:var(--ink-76);margin-top:11px}
.blist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--steel)}
.card-dark .blist li,.sec-dark .blist li{color:var(--on-dark-78)}
.card-dark .blist li::before,.sec-dark .blist li::before{background:var(--t3)}

/* ---------- ARCHITECTURE DIAGRAM ----------
   Structure from TreasurUp_Architecture_Diagram, recoloured to the brand book:
   deep steel panel, TreasurUp layers in the light blue scale. */
.arch{background:var(--dark-bg);border-radius:18px;padding:clamp(22px,3vw,38px)}
.sec-dark .arch,.sec-dark-alt .arch,.sec-steel .arch{background:rgba(20,29,40,.46);border:1px solid var(--dark-line)}
.arch-top{padding:4px 18px 14px;text-align:center}
.arch-cap{font-size:14px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark);margin:0;line-height:1.3}
.arch-sub{font-size:13px;line-height:1.5;margin:6px 0 0;color:var(--on-dark-60)}
.arch-tu{display:grid;gap:10px;margin-top:8px}
.arch-card{background:linear-gradient(160deg,var(--t1),var(--t2));border:1px solid rgba(181,217,253,.9);border-radius:12px;padding:16px 22px;text-align:center;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.arch-card:hover{transform:translateY(-2px);box-shadow:0 20px 44px -24px rgba(0,0,0,.55)}
.arch-card .arch-cap{color:var(--deep);letter-spacing:.08em;font-size:14.5px}
.arch-card .arch-sub{color:rgba(34,48,63,.74)}
.arch-links{display:grid;gap:12px;margin-top:12px}
.arch-links>span{justify-self:center;display:grid;justify-items:center;gap:5px;height:46px;align-content:center}
.arch-links i{width:3px;height:11px;border-radius:99px;background:rgba(214,235,255,.60);display:block}
.arch-links i:nth-child(2){background:rgba(214,235,255,.40)}
.arch-links i:nth-child(3){background:rgba(214,235,255,.22)}
.arch-base{display:grid;gap:16px;margin-top:14px}
.arch-sys{text-align:center}
.arch-disc{display:grid;gap:2px;margin:0 auto 12px;max-width:96px}
.arch-disc i{height:7px;border-radius:50%;background:rgba(214,235,255,.34);display:block}
.arch-disc i:nth-child(2){background:rgba(214,235,255,.26)}
.arch-disc i:nth-child(3){background:rgba(214,235,255,.19)}
.arch-disc i:nth-child(4){background:rgba(214,235,255,.13)}
.arch-disc i:nth-child(5){background:rgba(214,235,255,.08)}
.arch-sys .arch-cap{font-size:12.5px;letter-spacing:.07em}
.arch-sys .arch-sub{font-size:12.5px}
.arch-note{text-align:center;font-size:12.5px;line-height:1.5;color:var(--on-dark-60);margin-top:18px}
.arch-key{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:26px}
.arch-key span{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--on-dark-78)}
.arch-key i{width:14px;height:14px;border-radius:4px;background:linear-gradient(160deg,var(--t1),var(--t2));border:1px solid rgba(181,217,253,.9);display:block;flex:none}
.arch-key .k2{color:var(--on-dark-60)}
.arch-key .k2 i{border-radius:50% 50% 40% 40% / 30% 30% 20% 20%;background:rgba(242,242,243,.10);border-color:var(--dark-line)}

/* ============================================================
   ADVISORY & SOLUTION DESIGNS
   Hierarchy mirrors the source PDF: section number stays small
   against a large heading; card label < card title > card body;
   bank names larger than both the label above and the note below.
   ============================================================ */

/* numbered section heading: "01  Daily Business Banking Advisory" */
.numhead{display:flex;align-items:flex-end;gap:16px}
.numhead .n{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--t6);padding-bottom:.55em;flex:none}
.sec-dark .numhead .n,.sec-dark-alt .numhead .n,.sec-steel .numhead .n{color:var(--t4)}
.numhead h2{letter-spacing:-.04em}
.accent{color:var(--t6)}
.sec-dark .accent,.sec-dark-alt .accent,.sec-steel .accent,.on-dark .accent{color:var(--t3)}

/* client strip: names are the loud element, caption below is quiet */
.namestrip{display:flex;flex-wrap:wrap;gap:8px 30px;align-items:baseline}
.namestrip span{font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.sec-dark .namestrip span,.sec-dark-alt .namestrip span{color:var(--on-dark)}
.factline{display:flex;flex-wrap:wrap;gap:8px 34px;margin-top:20px}
.factline span{font-size:13px;font-weight:500;color:var(--ink-62)}
.sec-dark .factline span,.sec-dark-alt .factline span{color:var(--on-dark-60)}

/* engagement cards, tinted by region instead of the PDF's off-brand colours */
.eng{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eng-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px 28px;overflow:hidden;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .eng-card{background:var(--paper);border-color:transparent}
.eng-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--t4)}
.eng-card:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.eng-card .icbox{margin-bottom:18px}
.eng-card .who{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--t6);margin:0 0 12px}
.eng-card h3{font-size:19px;line-height:1.22;letter-spacing:-.028em;margin:0 0 12px}
.eng-card p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.eng-eu::before{background:var(--steel)}
.eng-am::before{background:var(--t4)}
.eng-ap::before{background:var(--t5)}
.sec-dark .eng-card,.sec-dark-alt .eng-card{background:var(--dark-fill);border-color:var(--dark-line)}
.sec-dark .eng-card:hover,.sec-dark-alt .eng-card:hover{border-color:rgba(148,188,227,.55);background:rgba(115,150,184,.14);box-shadow:none}
.sec-dark .eng-card .who,.sec-dark-alt .eng-card .who{color:var(--t3)}
.sec-dark .eng-card p,.sec-dark-alt .eng-card p{color:var(--on-dark-78)}
.sec-dark .eng-eu::before,.sec-dark-alt .eng-eu::before{background:var(--t3)}
.sec-dark .eng-am::before,.sec-dark-alt .eng-am::before{background:var(--t5)}
.sec-dark .eng-ap::before,.sec-dark-alt .eng-ap::before{background:var(--t4)}

/* photo + text split, used by all three numbered sections */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.split-wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shot{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:rgba(29,31,32,.04);line-height:0}
.sec-dark .shot,.sec-dark-alt .shot{border-color:var(--dark-line);background:rgba(0,0,0,.2)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.split .body-m{font-size:16.5px;line-height:1.62;color:var(--ink-76)}
.sec-dark .split .body-m,.sec-dark-alt .split .body-m{color:var(--on-dark-78)}

/* the "half circle" marker lines under the method paragraph, quieter than the paragraph */
.markers{margin-top:22px;display:grid;gap:12px}
.markers li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:var(--ink-76)}
.markers svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;color:var(--steel)}
.sec-dark .markers li,.sec-dark-alt .markers li{color:var(--on-dark-78)}
.sec-dark .markers svg,.sec-dark-alt .markers svg{color:var(--t3)}

/* three-step and four-point icon cards */
.icard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .icard{background:var(--paper);border-color:transparent}
.icard:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.sec-dark .icard,.sec-dark-alt .icard{background:var(--dark-fill);border-color:var(--dark-line)}
.sec-dark .icard:hover,.sec-dark-alt .icard:hover{border-color:rgba(148,188,227,.5);box-shadow:none}
.icard .icbox{margin-bottom:20px}
.icard h3{font-size:18px;letter-spacing:-.028em;margin:0 0 10px}
.icard p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .icard p,.sec-dark-alt .icard p{color:var(--on-dark-78)}
.icard-flat{padding:24px 22px}
.icard-flat p{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.sec-dark .icard-flat p,.sec-dark-alt .icard-flat p{color:var(--on-dark)}
.icard-flat .icbox{width:38px;height:38px;margin-bottom:16px}
.icard-flat .icbox svg{width:19px;height:19px}

/* full-width note bar: small type, clearly secondary to the cards above it */
.notebar{display:flex;gap:18px;align-items:flex-start;background:var(--t1);border:1px solid rgba(181,217,253,.85);border-radius:var(--r-card);padding:20px 24px}
.sec-dark .notebar,.sec-dark-alt .notebar{background:rgba(115,150,184,.13);border-color:var(--dark-line)}
.notebar .icbox{width:38px;height:38px;margin:0;flex:none;background:var(--white);border-color:rgba(181,217,253,.85)}
.notebar .icbox svg{width:19px;height:19px}
.sec-dark .notebar .icbox,.sec-dark-alt .notebar .icbox{background:var(--dark-fill);border-color:var(--dark-line)}
.notebar p{font-size:14px;line-height:1.62;color:var(--ink-76);margin:0;padding-top:9px}
.sec-dark .notebar p,.sec-dark-alt .notebar p{color:var(--on-dark-78)}
.notebar a{color:var(--t6);font-weight:700;border-bottom:1px solid rgba(89,128,166,.45)}
.notebar a:hover{border-bottom-color:var(--t6)}
.sec-dark .notebar a,.sec-dark-alt .notebar a{color:var(--t3);border-bottom-color:rgba(181,217,253,.45)}

/* FAQ as two columns, heading parked on the left as in the PDF */
.faq-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.faq-aside{position:sticky;top:calc(var(--head-h) + var(--sub-h) + 34px)}
.faq-aside h2{font-size:clamp(26px,3vw,37px);letter-spacing:-.04em;line-height:1.06}
.faq-rule{width:66px;height:2px;background:var(--t5);margin-top:26px}

/* closing block is centred here, matching the PDF */
.center{text-align:center}
.center h2{max-width:26ch;margin-left:auto;margin-right:auto}
.center .lead{margin-left:auto;margin-right:auto}
.center .btnrow{justify-content:center}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1080px){
  .eng{grid-template-columns:repeat(2,1fr)}
  .faq-split{grid-template-columns:1fr;gap:38px}
  .faq-aside{position:static}
}
@media (max-width:820px){
  .split,.split-wide{grid-template-columns:1fr;gap:28px}
  .shot{max-height:340px}
}
@media (max-width:680px){
  .eng{grid-template-columns:1fr}
  .numhead{gap:12px}
  .namestrip span{font-size:17px}
  .notebar{flex-direction:column;gap:14px}
  .notebar p{padding-top:0}
}

/* ============================================================
   AGENTIC BUSINESS BANKING
   ============================================================ */

/* 01 - the three layers, stacked, with the layer numeral loud and dim
   exactly as in the source: numeral larger than the title, body smaller */
.layers{display:grid;gap:14px;position:relative}
.layer-row{display:grid;grid-template-columns:44px 1fr;gap:22px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px;position:relative;overflow:hidden;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .layer-row{background:var(--paper);border-color:transparent}
.layer-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--t4)}
.layer-row:hover{transform:translateY(-2px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.layer-rail{display:grid;justify-items:center}
.layer-rail .icbox{width:44px;height:44px;margin:0}
.layer-row h3{font-size:19px;letter-spacing:-.028em;margin:0 0 10px;line-height:1.2}
.layer-row p{font-size:14px;line-height:1.62;color:var(--ink-76);margin:0;max-width:88ch}
.l1::before{background:var(--steel)}
.l2::before{background:var(--t4)}
.l3::before{background:var(--t5)}
.sec-dark .layer-row,.sec-dark-alt .layer-row{background:var(--dark-fill);border-color:var(--dark-line)}
.sec-dark .layer-row p,.sec-dark-alt .layer-row p{color:var(--on-dark-78)}

/* 02 - principles, each opened by a rule across the top */
.prin{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.prin-col{border-top:2px solid var(--steel);padding-top:22px}
.prin-col .icbox{margin-bottom:18px}
.prin-col:nth-child(2){border-top-color:var(--t4)}
.prin-col:nth-child(3){border-top-color:var(--t5)}
.prin-col h3{font-size:19px;letter-spacing:-.028em;margin:0 0 10px;line-height:1.22}
.prin-col p{font-size:14px;line-height:1.62;color:var(--ink-76);margin:0}
.sec-dark .prin-col p,.sec-dark-alt .prin-col p{color:var(--on-dark-78)}

/* the "why now" panel: four short columns, quieter than the principles above */
.shifts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;background:var(--t1);border:1px solid rgba(181,217,253,.85);border-radius:var(--r-card);padding:28px 30px}
.sec-dark .shifts,.sec-dark-alt .shifts{background:rgba(115,150,184,.13);border-color:var(--dark-line)}
.shifts>div{display:grid;gap:12px}
.shifts .sic{width:26px;height:26px;border-radius:8px;background:var(--white);border:1px solid rgba(181,217,253,.85);display:grid;place-items:center}
.sec-dark .shifts .sic,.sec-dark-alt .shifts .sic{background:var(--dark-fill);border-color:var(--dark-line)}
.shifts .sic svg{width:14px;height:14px;fill:none;stroke:var(--deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sec-dark .shifts .sic svg,.sec-dark-alt .shifts .sic svg{stroke:var(--t3)}
.shifts p{font-size:13.5px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .shifts p,.sec-dark-alt .shifts p{color:var(--on-dark-78)}
.shifts b{color:var(--ink);font-weight:800}
.sec-dark .shifts b,.sec-dark-alt .shifts b{color:var(--on-dark)}

/* 03 - the standing rule, given its own panel and larger type than body copy */
.hilite{background:linear-gradient(160deg,rgba(115,150,184,.24),rgba(115,150,184,.07));border:1px solid var(--dark-line);border-radius:var(--r-card);padding:38px 40px}
.sec-paper .hilite,.sec-white .hilite{background:linear-gradient(160deg,var(--t1),var(--t2));border-color:rgba(181,217,253,.9)}
.hilite p{font-size:18px;line-height:1.62;margin:0;color:var(--on-dark);max-width:80ch}
.sec-paper .hilite p,.sec-white .hilite p{color:var(--ink-86)}

/* the four hard limits: short, equal, clearly a list of prohibitions */
.limits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.limit{display:flex;align-items:center;gap:13px;background:var(--dark-fill);border:1px solid var(--dark-line);border-radius:var(--r-card);padding:20px 22px;font-size:14px;font-weight:600;line-height:1.4;color:var(--on-dark)}
.sec-paper .limit,.sec-white .limit{background:var(--white);border-color:var(--line);color:var(--ink)}
.limit .no{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--t4);position:relative}
.limit .no::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:var(--t4);transform:rotate(-45deg)}

/* 05 - governance checklist, two columns */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:13px;font-size:14.5px;line-height:1.6;color:var(--ink-76)}
.sec-dark .checks li,.sec-dark-alt .checks li{color:var(--on-dark-78)}
.checks b{color:var(--ink);font-weight:800}
.sec-dark .checks b,.sec-dark-alt .checks b{color:var(--on-dark)}
.checks svg{width:17px;height:17px;margin-top:3px;fill:none;stroke:var(--steel);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sec-dark .checks svg,.sec-dark-alt .checks svg{stroke:var(--t3)}

/* the three transaction categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{background:var(--dark-fill);border:1px solid var(--dark-line);border-radius:var(--r-card);padding:28px 26px;transition:transform .22s var(--ease),border-color .22s var(--ease)}
.cat:hover{transform:translateY(-3px);border-color:rgba(148,188,227,.55)}
.sec-paper .cat,.sec-white .cat{background:var(--white);border-color:var(--line)}
.sec-white .cat{background:var(--paper);border-color:transparent}
.cat .icbox{margin-bottom:20px}
.cat .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--t3)}
.sec-paper .cat .k,.sec-white .cat .k{color:var(--t6)}
.cat:nth-child(2) .k{color:var(--t4)}
.cat:nth-child(3) .k{color:var(--t5)}
.cat h3{font-size:20px;letter-spacing:-.03em;line-height:1.2;margin:0 0 12px}
.cat p{font-size:14px;line-height:1.62;color:var(--on-dark-78);margin:0}
.sec-paper .cat p,.sec-white .cat p{color:var(--ink-76)}

@media (max-width:1080px){
  .shifts,.limits{grid-template-columns:repeat(2,1fr)}
  .prin,.cats{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
}
@media (max-width:680px){
  .shifts,.limits{grid-template-columns:1fr}
  .layer-row{grid-template-columns:1fr;gap:16px;padding:22px 20px}
  .layer-rail{justify-items:start}
  .hilite{padding:26px 22px}
  .hilite p{font-size:16px}
}

/* ============================================================
   CLIENT PULSE
   ============================================================ */

/* heading parked left, content right - the layout the source uses
   for both "the challenge" and "the agentic block" */
.twocol{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
/* the heading stays with the reader while the points scroll past it */
@media (min-width:1000px){
  .twocol-aside{position:sticky;top:120px}
}
.twocol-aside h2{font-size:clamp(26px,3vw,37px);letter-spacing:-.04em;line-height:1.08}
.twocol-rule{width:66px;height:2px;background:var(--t5);margin:26px 0 0}
.twocol-aside .body-s{margin-top:24px}

/* arrow bullets, one notch quieter than a heading but louder than fine print */
/* ---- the point list, used on eight pages ----
   It was an arrow glyph beside a paragraph, which read as one grey block. Each
   point is now a panel with its own number, so the eye has somewhere to land
   and the reader can see how many points there are before starting. The
   numbers come from a CSS counter, so nothing in the markup carries them and a
   point can be added or removed without renumbering anything. */
.arrows{display:grid;gap:12px;counter-reset:arw}
.arrows li{position:relative;counter-increment:arw;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  padding:22px 24px;border-radius:14px;overflow:hidden;
  font-size:15.5px;line-height:1.6;color:var(--ink-86);
  background:var(--white);border:1px solid var(--line);
  transition:transform .26s var(--ease),border-color .26s var(--ease)}
.sec-white .arrows li{background:var(--paper);border-color:transparent}
.sec-dark .arrows li,.sec-dark-alt .arrows li{background:var(--dark-fill);border-color:var(--dark-line);
  color:var(--on-dark)}
/* the number is the anchor: big enough to scan down the column at a glance */
.arrows li::before{content:counter(arw,decimal-leading-zero);
  font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--t6);
  padding-top:.28em;font-variant-numeric:tabular-nums}
.sec-dark .arrows li::before,.sec-dark-alt .arrows li::before{color:var(--t3)}
/* a rule down the left edge that fills in on hover */
.arrows li::after{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:var(--t4);transform:scaleY(0);transform-origin:center;
  transition:transform .3s var(--ease)}
.sec-dark .arrows li::after,.sec-dark-alt .arrows li::after{background:var(--t3)}
.arrows li:hover{transform:translateX(3px);border-color:var(--t4)}
.sec-dark .arrows li:hover,.sec-dark-alt .arrows li:hover{border-color:var(--t5)}
.arrows li:hover::after{transform:scaleY(1)}
/* the arrow glyph in the markup gives way to the number */
.arrows svg{display:none}
.arrows li b{color:var(--ink);font-weight:800}
.sec-dark .arrows li b,.sec-dark-alt .arrows li b{color:#fff}
.sec-dark .arrows svg,.sec-dark-alt .arrows svg{stroke:var(--t3)}

/* the three signal groups */
.sigs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sig-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;position:relative;overflow:hidden;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .sig-card{background:var(--paper);border-color:transparent}
.sec-dark .sig-card,.sec-dark-alt .sig-card{background:var(--dark-fill);border-color:var(--dark-line)}
.sig-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--steel)}
.sig-card:nth-child(2)::before{background:var(--t4)}
.sig-card:nth-child(3)::before{background:var(--t5)}
.sig-card:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.sig-card .icbox{margin-bottom:20px}
.sig-card .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t6);margin:0 0 10px}
.sec-dark .sig-card .k,.sec-dark-alt .sig-card .k{color:var(--t3)}
.sig-card h3{font-size:19px;letter-spacing:-.028em;margin:0 0 18px}
.sig-card li{font-size:13.5px;line-height:1.45;color:var(--ink-76);padding:9px 0;border-top:1px solid var(--line-soft)}
.sig-card li:first-child{border-top:0;padding-top:0}
.sec-dark .sig-card li,.sec-dark-alt .sig-card li{color:var(--on-dark-78);border-color:rgba(242,242,243,.09)}

/* four delivery steps as a single progression track: a node per step and a
   connector between them, the last one fading out because the copy says the
   same services carry the wider roster. Replaces four separate rules. */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tstep{position:relative;padding-top:40px}
.tstep::before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--steel);background:transparent;box-sizing:border-box;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.tstep::after{content:"";position:absolute;left:22px;right:-17px;top:10px;height:1px;background:var(--steel);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
.tstep:nth-child(2)::before{border-color:var(--t5)}
.tstep:nth-child(3)::before{border-color:var(--t4)}
.tstep:nth-child(4)::before{border-color:var(--t3)}
.tstep:nth-child(2)::after{background:linear-gradient(90deg,var(--steel),var(--t5))}
.tstep:nth-child(3)::after{background:linear-gradient(90deg,var(--t5),var(--t4))}
.tstep:nth-child(5)::before{border-color:var(--t6)}
.tstep:nth-child(5)::after{background:linear-gradient(90deg,var(--t5),var(--t6))}
.tstep:nth-child(5):hover::before{background:var(--t6)}
.tstep:last-child::after{right:0;background:linear-gradient(90deg,var(--t4),transparent)}
.rv.in .tstep::after,.track.in .tstep::after{transform:scaleX(1)}
.track.in .tstep:nth-child(1)::after{transition-delay:.05s}
.track.in .tstep:nth-child(2)::after{transition-delay:.25s}
.track.in .tstep:nth-child(3)::after{transition-delay:.45s}
.track.in .tstep:nth-child(4)::after{transition-delay:.65s}
.tstep:hover::before{background:var(--steel);transform:scale(1.15)}
.tstep:nth-child(2):hover::before{background:var(--t5)}
.tstep:nth-child(3):hover::before{background:var(--t4)}
.tstep:nth-child(4):hover::before{background:var(--t3)}
/* on dark the whole progression is lifted a step up the blue scale */
.sec-dark .tstep::before,.sec-dark-alt .tstep::before{border-color:var(--t5)}
.sec-dark .tstep:nth-child(2)::before,.sec-dark-alt .tstep:nth-child(2)::before{border-color:var(--t4)}
.sec-dark .tstep:nth-child(3)::before,.sec-dark-alt .tstep:nth-child(3)::before{border-color:var(--t3)}
.sec-dark .tstep:nth-child(4)::before,.sec-dark-alt .tstep:nth-child(4)::before{border-color:var(--t2)}
.sec-dark .tstep::after,.sec-dark-alt .tstep::after{background:var(--t5)}
.sec-dark .tstep:nth-child(2)::after,.sec-dark-alt .tstep:nth-child(2)::after{background:linear-gradient(90deg,var(--t5),var(--t4))}
.sec-dark .tstep:nth-child(3)::after,.sec-dark-alt .tstep:nth-child(3)::after{background:linear-gradient(90deg,var(--t4),var(--t3))}
.sec-dark .tstep:nth-child(5)::before,.sec-dark-alt .tstep:nth-child(5)::before{border-color:var(--t2)}
.sec-dark .tstep:nth-child(4)::after,.sec-dark-alt .tstep:nth-child(4)::after{background:linear-gradient(90deg,var(--t3),var(--t2))}
.sec-dark .tstep:last-child::after,.sec-dark-alt .tstep:last-child::after{background:linear-gradient(90deg,var(--t3),transparent)}
.sec-dark .tstep:hover::before{background:var(--t5)}
.sec-dark .tstep:nth-child(2):hover::before{background:var(--t4)}
.sec-dark .tstep:nth-child(3):hover::before{background:var(--t3)}
.sec-dark .tstep:nth-child(4):hover::before{background:var(--t2)}
.tstep .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t6);margin:0 0 12px}
.sec-dark .tstep .k,.sec-dark-alt .tstep .k{color:var(--t3)}
.tstep p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .tstep p,.sec-dark-alt .tstep p{color:var(--on-dark-78)}

/* proof: two measured results and one video slot */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;display:flex;flex-direction:column}
.sec-white .pcard{background:var(--paper);border-color:transparent}
.sec-dark .pcard,.sec-dark-alt .pcard{background:var(--dark-fill);border-color:var(--dark-line)}
.pcard .big{font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--t6);margin:0 0 16px}
.sec-dark .pcard .big,.sec-dark-alt .pcard .big{color:var(--t3)}
.pcard h3{font-size:17px;letter-spacing:-.025em;margin:0 0 12px}
.pcard p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .pcard p,.sec-dark-alt .pcard p{color:var(--on-dark-78)}
.pcard .txt-link{margin-top:18px}
.vslot{aspect-ratio:16/9;border-radius:8px;border:1px dashed rgba(89,128,166,.5);background:rgba(89,128,166,.07);display:grid;place-items:center;text-align:center;margin-bottom:20px;padding:14px}
.sec-dark .vslot,.sec-dark-alt .vslot{border-color:var(--dark-line);background:rgba(0,0,0,.22)}
.vslot span{font-size:12.5px;font-weight:600;color:var(--ink-62)}
.sec-dark .vslot span,.sec-dark-alt .vslot span{color:var(--on-dark-60)}

/* editorial placeholder carried over from the source copy */
.todo{font-size:.86em;font-weight:700;color:var(--t6);white-space:nowrap}
.sec-dark .todo,.sec-dark-alt .todo{color:var(--t3)}

@media (max-width:1080px){
  .twocol{grid-template-columns:1fr;gap:34px}
  .sigs{grid-template-columns:repeat(2,1fr)}
  .track{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .track .tstep:nth-child(2)::after{right:0;background:linear-gradient(90deg,var(--steel),transparent)}
  .proof{grid-template-columns:1fr}
}
@media (max-width:680px){
  .sigs{grid-template-columns:1fr}
  .track{grid-template-columns:1fr;row-gap:0;gap:0}
  .tstep{padding:0 0 30px 34px}
  .tstep:last-child{padding-bottom:0}
  .tstep::before{top:2px}
  .tstep::after{left:6px;right:auto;top:24px;bottom:7px;width:1px;height:auto;background:var(--steel) !important;transform:scaleY(0);transform-origin:top center;transition:transform .6s var(--ease)}
  .rv.in .tstep::after,.track.in .tstep::after{transform:scaleY(1)}
  .tstep::after{background:var(--t5) !important}
  .tstep:last-child::after{bottom:0;background:linear-gradient(180deg,var(--t3),transparent) !important}
  .arrows li{font-size:14.5px}
}

/* ============================================================
   CONNECTION CENTRE
   ============================================================ */

/* exhibit shell, same dark panel treatment as the architecture diagram */
.exhibit{background:var(--dark-bg);border-radius:18px;padding:clamp(24px,3vw,38px)}
.sec-dark .exhibit,.sec-dark-alt .exhibit{background:rgba(20,29,40,.46);border:1px solid var(--dark-line)}
.ex-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin:0 0 26px;line-height:1.5}
.ex-foot{font-size:13px;font-style:italic;color:var(--on-dark-60);margin:22px 0 0}

/* exhibit 1: bank capabilities into the centre, out through four routes */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) minmax(0,1fr) 42px minmax(0,.85fr);align-items:stretch;gap:0}
.fcol{border:1px solid var(--dark-line);border-radius:12px;padding:22px 20px;background:rgba(242,242,243,.04)}
.fcol h4{font-size:17px;letter-spacing:-.028em;line-height:1.2;margin:0 0 16px;color:var(--on-dark)}
.fcol li{font-size:13.5px;line-height:1.4;color:var(--on-dark-78);padding:7px 0}
.fcol-tu{background:linear-gradient(165deg,rgba(115,150,184,.34),rgba(115,150,184,.12));border-color:var(--t5)}
.fcol-tu h4{color:#fff}
.fcol-end{display:grid;align-content:center;text-align:center}
.fcol-end b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--on-dark)}
.fcol-end em{display:block;font-style:italic;font-size:13px;color:var(--on-dark-60);margin-top:8px}
.farrow{display:grid;place-items:center;color:var(--on-dark-40)}
.farrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.froutes{display:grid;gap:10px;margin-left:10px}
.froute{border:1px solid var(--dark-line);border-radius:10px;padding:14px 15px;background:rgba(242,242,243,.05);transition:border-color .2s var(--ease),background .2s var(--ease)}
.froute:hover{border-color:var(--t4);background:rgba(115,150,184,.16)}
.froute b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:5px}
.froute span{display:block;font-size:12.5px;line-height:1.45;color:var(--on-dark-60)}

/* the four distribution routes as cards */
.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* micro apps: icon sits inline with the title, as in the source */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.app{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .app{background:var(--paper);border-color:transparent}
.sec-dark .app,.sec-dark-alt .app{background:var(--dark-fill);border-color:var(--dark-line)}
.app:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.app-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.app-head svg{width:21px;height:21px;flex:none;fill:none;stroke:var(--steel);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sec-dark .app-head svg,.sec-dark-alt .app-head svg{stroke:var(--t3)}
.app-head h3{font-size:17.5px;letter-spacing:-.028em;margin:0}
.app p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .app p,.sec-dark-alt .app p{color:var(--on-dark-78)}
.app-wide{grid-column:1 / -1}

@media (max-width:1080px){
  .routes{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);row-gap:18px}
  .flow .farrow-2{display:none}
  .froutes{grid-column:1 / -1;margin-left:0;grid-template-columns:repeat(2,1fr);display:grid}
  .fcol-end{grid-column:1 / -1}
}
@media (max-width:680px){
  .routes,.apps{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow .farrow,.flow .farrow-2{display:grid;transform:rotate(90deg);padding:6px 0}
  .froutes{grid-template-columns:1fr;margin-left:0}
}

/* ============================================================
   FEDERATED CHANNEL DEVELOPMENT
   ============================================================ */

/* the approved progression track, widened to five stops */
.track-5{grid-template-columns:repeat(5,1fr)}
.track-3{grid-template-columns:repeat(3,1fr)}

/* two federated definitions, side by side */
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pair-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;position:relative;overflow:hidden}
.sec-white .pair-card{background:var(--paper);border-color:transparent}
.sec-dark .pair-card,.sec-dark-alt .pair-card{background:var(--dark-fill);border-color:var(--dark-line)}
.pair-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--steel)}
.pair-card:nth-child(2)::before{background:var(--t4)}
.pair-card .icbox{margin-bottom:20px}
.pair-card .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t6);margin:0 0 10px}
.sec-dark .pair-card .k,.sec-dark-alt .pair-card .k{color:var(--t3)}
.pair-card h3{font-size:19px;letter-spacing:-.028em;line-height:1.24;margin:0 0 12px}
.pair-card p{font-size:14px;line-height:1.62;color:var(--ink-76);margin:0}
.sec-dark .pair-card p,.sec-dark-alt .pair-card p{color:var(--on-dark-78)}
.result{margin-top:22px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sec-dark .result,.sec-dark-alt .result{color:var(--on-dark)}

/* three service pillars, each on its own flat panel.
   Three steps of the brand blue scale, no gradients: the panel lightens as the
   engagement moves from architecting to running, so the row reads as a sequence
   rather than three decorated boxes. */
.spec{position:relative;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line);background:var(--white);padding:30px 28px 32px}
.sec-white .spec{background:var(--paper);border-color:transparent}
.spec::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.spec .n{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t6)}
.spec h3{font-size:20px;margin:12px 0 18px;letter-spacing:-.03em;line-height:1.22}
.spec .blist li{margin-top:13px}
.spec .icbox{margin-bottom:20px}
.spec>p:not(.n){font-size:14px;line-height:1.62;color:var(--ink-76);margin:0}
.sec-dark .spec>p:not(.n),.sec-dark-alt .spec>p:not(.n){color:var(--on-dark-78)}

/* light sections: three tints from the top of the scale */
.sp1{background:var(--white)}
.sp2{background:var(--t1)}
.sp3{background:var(--t2)}
.sec-white .sp1{background:var(--paper)}
.sec-white .sp2{background:var(--t1)}
.sec-white .sp3{background:var(--t2)}
.sp1::before{background:var(--steel)}
.sp2::before{background:var(--t5)}
.sp3::before{background:var(--t6)}
.sp1 .blist li::before{background:var(--steel)}
.sp2 .blist li::before{background:var(--t5)}
.sp3 .blist li::before{background:var(--t6)}

/* dark sections: three steps down the deep end of the scale */
.sec-dark .spec,.sec-dark-alt .spec{border-color:var(--dark-line)}
.sec-dark .sp1,.sec-dark-alt .sp1{background:var(--deep)}
.sec-dark .sp2,.sec-dark-alt .sp2{background:var(--deep-3)}
.sec-dark .sp3,.sec-dark-alt .sp3{background:var(--t6)}
.sec-dark .sp1::before,.sec-dark-alt .sp1::before{background:var(--t5)}
.sec-dark .sp2::before,.sec-dark-alt .sp2::before{background:var(--t4)}
.sec-dark .sp3::before,.sec-dark-alt .sp3::before{background:var(--t3)}
.sec-dark .spec .n,.sec-dark-alt .spec .n{color:var(--t3)}
.sec-dark .spec .blist li,.sec-dark-alt .spec .blist li{color:var(--on-dark-78)}
.sec-dark .sp1 .blist li::before,.sec-dark-alt .sp1 .blist li::before{background:var(--t5)}
.sec-dark .sp2 .blist li::before,.sec-dark-alt .sp2 .blist li::before{background:var(--t4)}
.sec-dark .sp3 .blist li::before,.sec-dark-alt .sp3 .blist li::before{background:var(--t3)}

/* four integration options, with the depth of integration made visible */
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--white)}
.sec-white .opts{background:var(--paper)}
.sec-dark .opts,.sec-dark-alt .opts{background:var(--dark-fill);border-color:var(--dark-line)}
.opt-col{padding:28px 24px;border-left:1px solid var(--line);transition:background .22s var(--ease)}
.sec-dark .opt-col,.sec-dark-alt .opt-col{border-left-color:var(--dark-line)}
.opt-col:first-child{border-left:0}
.opt-col:hover,.opt-col.on{background:var(--t1)}
.sec-dark .opt-col:hover,.sec-dark .opt-col.on{background:rgba(115,150,184,.16)}
.opt-col .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--t6);margin:0}
.sec-dark .opt-col .k,.sec-dark-alt .opt-col .k{color:var(--t3)}
.opt-col p.d{font-size:13.5px;line-height:1.6;color:var(--ink-76);margin:14px 0 18px}
.sec-dark .opt-col p.d,.sec-dark-alt .opt-col p.d{color:var(--on-dark-78)}
.opt-list li{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:13px;line-height:1.45;color:var(--ink-76);padding:5px 0}
.sec-dark .opt-list li,.sec-dark-alt .opt-list li{color:var(--on-dark-78)}
.opt-list svg{width:14px;height:14px;margin-top:3px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke:var(--steel)}
.sec-dark .opt-list svg,.sec-dark-alt .opt-list svg{stroke:var(--t3)}
.opt-list .minus svg{stroke:var(--ink-45)}
.sec-dark .opt-list .minus svg,.sec-dark-alt .opt-list .minus svg{stroke:var(--on-dark-40)}
.opt-meter{display:flex;gap:3px;margin-top:22px}
.opt-meter i{height:5px;flex:1;border-radius:2px;background:rgba(29,31,32,.10);display:block}
.sec-dark .opt-meter i,.sec-dark-alt .opt-meter i{background:rgba(242,242,243,.12)}
.opt-meter i.f{background:var(--steel)}
.sec-dark .opt-meter i.f,.sec-dark-alt .opt-meter i.f{background:var(--t3)}
.opt-scale{display:flex;justify-content:space-between;gap:16px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-top:16px}
.sec-dark .opt-scale,.sec-dark-alt .opt-scale{color:var(--on-dark-40)}

/* tables: engagement models and the governance split.
   Given a card of their own with a tinted header row, so a table reads as a
   table and not as loose paragraphs sharing the section background. */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--white)}
.sec-white .tbl-wrap{background:var(--paper);border-color:var(--line)}
.sec-dark .tbl-wrap,.sec-dark-alt .tbl-wrap{background:var(--dark-fill);border-color:var(--dark-line)}
.tbl-scroll{overflow-x:auto;scrollbar-width:thin}
.tbl{width:100%;border-collapse:collapse;text-align:left}
.tbl thead th{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t6);
  padding:16px 24px;background:var(--t1);border-bottom:1px solid rgba(89,128,166,.35);white-space:nowrap}
.sec-dark .tbl thead th,.sec-dark-alt .tbl thead th{color:var(--t3);background:rgba(115,150,184,.18);border-bottom-color:var(--dark-line)}
.tbl td{font-size:14px;line-height:1.55;color:var(--ink-76);padding:18px 24px;border-top:1px solid var(--line);vertical-align:top}
.sec-dark .tbl td,.sec-dark-alt .tbl td{color:var(--on-dark-78);border-top-color:rgba(242,242,243,.12)}
.tbl tbody tr:first-child td{border-top:0}
.tbl td:first-child{font-weight:800;color:var(--ink);letter-spacing:-.02em}
.sec-dark .tbl td:first-child,.sec-dark-alt .tbl td:first-child{color:var(--on-dark)}
.tbl tbody tr{transition:background .16s var(--ease)}
.tbl tbody tr:hover{background:var(--t1)}
.sec-dark .tbl tbody tr:hover,.sec-dark-alt .tbl tbody tr:hover{background:rgba(115,150,184,.12)}
/* the row label column carries a hairline so the three columns stay legible across */
.tbl td:not(:last-child),.tbl th:not(:last-child){border-right:1px solid var(--line-soft)}
.sec-dark .tbl td:not(:last-child),.sec-dark .tbl th:not(:last-child),
.sec-dark-alt .tbl td:not(:last-child),.sec-dark-alt .tbl th:not(:last-child){border-right-color:rgba(242,242,243,.09)}

@media (max-width:1080px){
  .opts{grid-template-columns:repeat(2,1fr)}
  .opt-col:nth-child(3){border-left:0}
  .opt-col:nth-child(n+3){border-top:1px solid var(--line)}
  .sec-dark .opt-col:nth-child(n+3){border-top-color:var(--dark-line)}
  .track-5{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .pair{grid-template-columns:1fr}
}
@media (max-width:680px){
  .opts{grid-template-columns:1fr}
  .opt-col{border-left:0;border-top:1px solid var(--line)}
  .opt-col:first-child{border-top:0}
  .track-5,.track-3{grid-template-columns:1fr}
  .opt-scale{flex-direction:column;gap:6px}
  .tbl td{white-space:normal;padding:15px 18px}
  .tbl thead th{padding:14px 18px}
  .tbl{min-width:560px}
}

/* ============================================================
   ORCHESTRATION & INTEGRATION
   ============================================================ */

/* four use cases, each read as trigger -> calculation -> destination */
.ucards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ucard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;
  display:flex;flex-direction:column;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .ucard{background:var(--paper);border-color:transparent}
.sec-dark .ucard,.sec-dark-alt .ucard{background:var(--dark-fill);border-color:var(--dark-line)}
.ucard:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.ucard .icbox{margin-bottom:18px}
.ucard .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t6);margin:0 0 16px}
.sec-dark .ucard .k,.sec-dark-alt .ucard .k{color:var(--t3)}
.ucard p.u{font-size:13.5px;line-height:1.6;color:var(--ink-76);margin:0 0 12px;padding-left:15px;position:relative}
.sec-dark .ucard p.u,.sec-dark-alt .ucard p.u{color:var(--on-dark-78)}
.ucard p.u::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--steel)}
.sec-dark .ucard p.u::before,.sec-dark-alt .ucard p.u::before{background:var(--t3)}
.ucard p.u b{color:var(--ink);font-weight:800}
.sec-dark .ucard p.u b,.sec-dark-alt .ucard p.u b{color:var(--on-dark)}
.ucard .more{margin-top:auto;padding-top:14px}

@media (max-width:900px){ .ucards{grid-template-columns:1fr} }

/* ============================================================
   WEB & MOBILE
   ============================================================ */

/* two portal screenshots, each with its caption */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.shot-fig{margin:0}
.shot-frame{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--white);line-height:0;
  box-shadow:0 24px 54px -34px rgba(34,48,63,.5)}
.sec-dark .shot-frame,.sec-dark-alt .shot-frame{border-color:var(--dark-line);box-shadow:none}
.shot-frame img{width:100%;height:auto;display:block}
.shot-cap{font-size:12.5px;color:var(--ink-62);margin:12px 0 0}
.sec-dark .shot-cap,.sec-dark-alt .shot-cap{color:var(--on-dark-60)}

/* three phones, the middle one lifted so the row has a centre */
/* margin shorthand here would override .mt-l, so only the horizontal centring is set;
   the padding pays back the lift on the middle phone */
/* margin shorthand here would override .mt-l, so only the horizontal centring is set;
   the padding pays back the lift on the middle phone */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:end;max-width:760px;margin-left:auto;margin-right:auto;padding-top:30px}
.phone-fig{margin:0;text-align:center}
.phone-fig.mid .ph{display:block;transform:translateY(-26px)}
.phone-cap{font-size:12.5px;color:var(--ink-62);margin:14px 0 0}
.sec-dark .phone-cap,.sec-dark-alt .phone-cap{color:var(--on-dark-60)}
.phone-fig.mid .phone-cap{transform:translateY(-26px)}

@media (max-width:820px){
  .shots{grid-template-columns:1fr}
  .phones{grid-template-columns:1fr;max-width:320px;gap:34px;padding-top:0}
  .phone-fig.mid .ph,.phone-fig.mid .phone-cap{transform:none}
}

/* ============================================================
   BANK PORTAL MOCK
   Rebuilt as markup rather than a screenshot, so it stays sharp
   and the whole interface re-skins from one custom property.
   --bank is the CLIENT bank's brand colour, not TreasurUp's.
   ============================================================ */
.mockwrap{container-type:inline-size}
.mock{--bank:#5980A6;--bank-soft:rgba(89,128,166,.10);
  font-size:11px;font-size:clamp(6.5px,1.62cqw,12px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 24px 54px -34px rgba(34,48,63,.5);color:#1D1F20;line-height:1.35;position:relative}
.sec-dark .mock,.sec-dark-alt .mock{border-color:var(--dark-line);box-shadow:none}

/* top bar */
.mk-top{display:flex;align-items:center;gap:.7em;padding:.85em 1.1em;border-bottom:1px solid #ECEDEF}
.mk-logo{width:1.9em;height:1.9em;border-radius:.4em;background:var(--bank);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:1.05em;flex:none}
.mk-name{font-weight:800;font-size:1.35em;letter-spacing:-.02em;color:var(--bank)}
.mk-top .sp{margin-left:auto}
.mk-co{font-size:.95em;color:#6E6F70}
.mk-ico{width:1.5em;height:1.5em;border-radius:.35em;display:grid;place-items:center;color:#8B8C8D;position:relative}
.mk-ico svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-dot{position:absolute;top:.12em;right:.12em;width:.75em;height:.75em;border-radius:50%;background:var(--bank);
  color:#fff;font-size:.62em;display:grid;place-items:center;font-weight:800}
.mk-avatar{width:1.5em;height:1.5em;border-radius:50%;background:#E7EAEE;display:grid;place-items:center;color:#6E6F70}
.mk-lang{font-size:.9em;font-weight:700;color:#1D1F20;display:flex;align-items:center;gap:.25em}

/* tabs: the brand shows as one underline, not four filled blocks */
.mk-tabs{display:flex;align-items:center;gap:.2em;padding:0 1.1em;border-bottom:1px solid #ECEDEF;background:#FCFCFD}
.mk-tab{padding:.75em .95em;font-size:.95em;color:#6E6F70;border-bottom:2px solid transparent;white-space:nowrap}
.mk-tab.on{color:var(--bank);font-weight:700;border-bottom-color:var(--bank)}
.mk-tab.home{display:grid;place-items:center;color:var(--bank)}
.mk-tab.home svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7}

/* page header */
.mk-head{display:flex;align-items:center;gap:.7em;padding:1.05em 1.1em .8em;flex-wrap:wrap}
.mk-h1{font-size:1.5em;font-weight:800;letter-spacing:-.025em}
.mk-meta{font-size:.85em;color:#6E6F70}
.mk-link{font-size:.85em;color:#6E6F70;display:flex;align-items:center;gap:.3em}
.mk-btn{margin-left:auto;background:var(--bank);color:#fff;font-size:.9em;font-weight:700;
  padding:.6em 1em;border-radius:.45em;white-space:nowrap}
.mk-i{width:.95em;height:.95em;border-radius:50%;border:1px solid #C9CBCE;color:#9A9C9E;display:inline-grid;
  place-items:center;font-size:.75em;font-weight:700;flex:none}

/* search */
.mk-search{margin:0 1.1em .9em;height:2.1em;border-radius:.45em;background:#F4F5F7;display:grid;place-items:center;color:#A6A8AB}
.mk-search svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8}

/* plan card */
.mk-plan{margin:0 1.1em;border:1px solid #ECEDEF;border-radius:.55em;overflow:hidden;position:relative}
.mk-plan::after{content:"";position:absolute;right:0;top:2.6em;bottom:3.4em;width:2.2em;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);pointer-events:none}
.mk-planbar{display:flex;align-items:center;gap:.55em;padding:.75em .9em;background:#FAFBFC;border-bottom:1px solid #ECEDEF;flex-wrap:wrap}
.mk-chev{color:#8B8C8D;display:grid;place-items:center}
.mk-chev svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:2}
.mk-plan b{font-size:1.05em;font-weight:800}
.mk-pair{font-weight:700;font-size:.9em}
.mk-amt{font-size:.9em;color:#505153}
.mk-lbl{font-size:.85em;color:#6E6F70}
.mk-badge{background:#FDECEC;color:#B3261E;font-weight:700;font-size:.82em;padding:.25em .5em;border-radius:.3em;white-space:nowrap}
.mk-tools{margin-left:auto;display:flex;gap:.45em;color:#A6A8AB}
.mk-tools svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* table */
.mk-tbl{width:100%;border-collapse:collapse}
.mk-tbl th{font-size:.72em;font-weight:700;color:#8B8C8D;text-align:left;padding:.7em .5em;
  border-bottom:1px solid #ECEDEF;white-space:nowrap;letter-spacing:.01em}
.mk-tbl td{font-size:.8em;color:#1D1F20;padding:.75em .5em;white-space:nowrap;vertical-align:middle}
.mk-tbl th:first-child,.mk-tbl td:first-child{padding-left:.9em}
.mk-tbl th:last-child,.mk-tbl td:last-child{padding-right:.9em}
.mk-box{width:.8em;height:.8em;border:1px solid #C9CBCE;border-radius:.15em;display:inline-block;vertical-align:-1px}
.mk-bell{width:1.5em;height:1.5em;border:1px solid #E3E5E8;border-radius:.3em;display:grid;place-items:center;color:#8B8C8D}
.mk-bell svg{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:1.7}
.mk-bell.on{border-color:var(--bank);color:var(--bank);background:var(--bank-soft)}

.mk-add{display:flex;align-items:center;gap:.4em;padding:.75em .9em;font-size:.85em;color:var(--bank);font-weight:700;
  border-top:1px solid #ECEDEF}
.mk-add svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8}

.mk-foot{display:flex;align-items:center;gap:.6em;padding:.75em .9em;border-top:1px solid #ECEDEF;background:#FAFBFC}
.mk-foot .t{font-size:.8em;color:#6E6F70}
.mk-pager{margin-left:auto;display:flex;gap:.25em}
.mk-pg{min-width:1.5em;height:1.5em;border:1px solid #E3E5E8;border-radius:.3em;display:grid;place-items:center;
  font-size:.78em;color:#8B8C8D;padding:0 .35em}
.mk-pg.on{background:var(--bank);border-color:var(--bank);color:#fff;font-weight:700}

.mk-back{display:flex;align-items:center;gap:.4em;padding:.85em 1.1em;font-size:.85em;color:var(--bank);font-weight:700}
.mk-back svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8}
.mk-done{margin:0 1.1em 1.1em;border:1px solid #ECEDEF;border-radius:.55em;padding:.85em .9em;font-size:.95em;
  font-weight:700;color:#505153;display:flex;align-items:center;gap:.5em;background:#FCFCFD}
.mk-done svg{width:.95em;height:.95em;fill:none;stroke:#A6A8AB;stroke-width:1.8}

/* alert popover, anchored over the table as in the source */
.mk-pop{position:absolute;right:3%;top:44%;width:31%;background:#fff;border:1px solid #E3E5E8;border-radius:.55em;
  box-shadow:0 18px 40px -14px rgba(29,31,32,.28);padding:.9em;z-index:2}
.mk-pop .t{font-size:.85em;color:#505153;margin-bottom:.75em}
.mk-row{display:flex;align-items:center;gap:.5em;margin-bottom:.6em}
.mk-sw{width:2em;height:1.1em;border-radius:1em;background:#D8DBDF;position:relative;flex:none}
.mk-sw::after{content:"";position:absolute;top:.15em;left:.15em;width:.8em;height:.8em;border-radius:50%;background:#fff}
.mk-sw.on{background:var(--bank)}
.mk-sw.on::after{left:auto;right:.15em}
.mk-row span{font-size:.85em;color:#505153}
.mk-inputs{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.7em 0 .9em}
.mk-in{border:1px solid #E3E5E8;border-radius:.35em;padding:.5em .55em;font-size:.85em;color:#B9BBBE;background:#FAFBFC}
.mk-in.on{border-color:var(--bank);color:#1D1F20;background:#fff}
.mk-pop .acts{display:flex;align-items:center;gap:.6em}
.mk-ghost{font-size:.85em;color:#6E6F70;display:flex;align-items:center;gap:.35em}
.mk-ghost svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:1.8}
.mk-save{margin-left:auto;font-size:.85em;font-weight:700;color:#fff;background:var(--bank);padding:.5em .9em;border-radius:.35em}

@media (max-width:820px){ .mk-pop{position:static;width:auto;margin:.9em 1.1em 0;box-shadow:none} }

/* ============================================================
   BANK MOBILE APP MOCK
   Same approach as the portal: markup, not a screenshot, so the
   whole app re-skins from --bank and stays sharp at any size.
   ============================================================ */
.ph{container-type:inline-size;--bank:#0B4FD1;--up:#167C48}
.ph-in{font-size:11px;font-size:clamp(5.2px,4.55cqw,11.5px);
  background:#fff;border-radius:1.9em;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 56px -30px rgba(34,48,63,.55);color:#1D1F20;line-height:1.3;
  display:flex;flex-direction:column;aspect-ratio:419/900}
.sec-dark .ph-in,.sec-dark-alt .ph-in{border-color:var(--dark-line);box-shadow:0 26px 56px -30px rgba(0,0,0,.6)}

.ph-top{background:var(--bank);color:#fff;display:flex;align-items:center;gap:.55em;padding:1.5em 1em .9em}
.ph-back{display:flex;align-items:center;gap:.3em;font-size:1.05em;font-weight:600}
.ph-back svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2.4}
.ph-top .sp{margin-left:auto}
.ph-ic{position:relative;display:grid;place-items:center}
.ph-ic svg{width:1.15em;height:1.15em;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ph-ic .b{position:absolute;top:-.25em;right:-.3em;background:#fff;color:var(--bank);font-size:.6em;font-weight:800;
  width:1.2em;height:1.2em;border-radius:50%;display:grid;place-items:center}
.ph-av{width:1.85em;height:1.85em;border-radius:50%;background:#0B1220;color:#fff;display:grid;place-items:center;
  font-size:.85em;font-weight:800;letter-spacing:.02em}

.ph-head{display:flex;align-items:center;padding:.9em 1em .7em}
.ph-h1{font-size:1.35em;font-weight:700;letter-spacing:-.02em}
.ph-filters{margin-left:auto;display:flex;align-items:center;gap:.35em;font-size:.9em;font-weight:600;color:var(--bank)}
.ph-filters svg{width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.ph-body{flex:1;overflow:hidden;padding:0 .75em;background:#F6F7F9}
.ph-card{background:#fff;border-radius:.6em;padding:.75em .8em;margin-bottom:.6em;border:1px solid #ECEDEF}
.ph-r1{display:flex;align-items:baseline;gap:.4em}
.ph-r1 b{font-size:.95em;font-weight:800}
.ph-date{margin-left:auto;font-size:.82em;color:var(--bank);font-weight:600}
.ph-plus{width:1.05em;height:1.05em;display:grid;place-items:center;color:var(--bank);flex:none}
.ph-plus svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.6}
.ph-sub{font-size:.78em;color:#8B8C8D;margin-top:.1em}
.ph-tags{display:flex;align-items:center;gap:.35em;margin-top:.6em}
.ph-tag{font-size:.62em;font-weight:800;letter-spacing:.05em;padding:.35em .6em;border-radius:.9em;
  background:var(--bank);color:#fff;white-space:nowrap}
.ph-tag.off{background:#EDEFF2;color:#8B8C8D}
.ph-pair{margin-left:auto;font-size:.85em;font-weight:700}
.ph-r3{display:flex;align-items:center;margin-top:.55em;font-size:.85em;color:#505153}
.ph-r3 b{margin-left:auto;font-weight:700;color:#1D1F20}
.ph-hier{display:flex;align-items:center;justify-content:center;gap:.35em;margin-top:.6em;padding-top:.55em;
  border-top:1px solid #F0F1F3;font-size:.8em;font-weight:600;color:var(--bank)}
.ph-hier svg{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:1.8}

/* rate screen */
.ph-rate{padding:.9em 1em .2em}
.ph-pairline{display:flex;align-items:center;gap:.4em;font-size:1.15em;font-weight:700}
.ph-flag{width:1.3em;height:.92em;border-radius:.16em;display:block;flex:none}
.ph-big{font-size:1.7em;font-weight:800;color:var(--bank);letter-spacing:-.02em;margin-top:.15em}
.ph-when{font-size:.78em;color:#8B8C8D}
.ph-pills{display:flex;gap:.3em;padding:.7em 1em .5em;flex-wrap:nowrap}
.ph-pill{font-size:.72em;font-weight:700;padding:.4em .6em;border-radius:.35em;background:#F0F1F3;color:#6E6F70}
.ph-pill.on{background:var(--bank);color:#fff}
.ph-chart{padding:0 1em;position:relative}
.ph-chart svg{width:100%;height:7.2em;display:block;overflow:visible}
.ph-tip{position:absolute;left:56%;top:.4em;background:#0B1220;color:#fff;font-size:.66em;font-weight:700;
  padding:.3em .5em;border-radius:.25em;white-space:nowrap}
.ph-ax{display:flex;justify-content:space-between;font-size:.66em;color:#A6A8AB;padding:.2em 1em .5em}
.ph-hist{padding:0 1em}
.ph-hrow{display:flex;align-items:center;padding:.5em 0;border-top:1px solid #F0F1F3}
.ph-hrow .t{font-size:.85em;color:#505153}
.ph-hval{margin-left:auto;text-align:right}
.ph-hval .d{font-size:.68em;font-weight:700;color:var(--up)}
.ph-hval .v{font-size:.9em;font-weight:800}

.ph-tabs{display:flex;background:#fff;border-top:1px solid #ECEDEF;padding:.5em .3em .7em}
.ph-tab{flex:1;display:grid;justify-items:center;gap:.2em;font-size:.65em;font-weight:600;color:#9A9C9E}
.ph-tab svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ph-tab.on{color:var(--bank);font-weight:800}

/* ---------- BRAND COLOUR PICKER ---------- */
.swatches{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.sw-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t6);margin-right:4px}
.sec-dark .sw-label,.sec-dark-alt .sw-label{color:var(--t3)}
.sw{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(29,31,32,.15) inset;cursor:pointer;
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{border-color:var(--paper);box-shadow:0 0 0 2px var(--steel)}
.sec-dark .sw[aria-pressed="true"],.sec-dark-alt .sw[aria-pressed="true"]{border-color:var(--deep);box-shadow:0 0 0 2px var(--t3)}

/* ============================================================
   CLIENT CASES
   ============================================================ */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px;
  display:flex;flex-direction:column;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .case{background:var(--paper);border-color:transparent}
.sec-dark .case,.sec-dark-alt .case{background:var(--dark-fill);border-color:var(--dark-line)}
.case:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 22px 48px -30px rgba(34,48,63,.45)}
.case h3{font-size:20px;letter-spacing:-.03em;line-height:1.26;margin:0 0 14px}
.case p.d{font-size:14.5px;line-height:1.62;color:var(--ink-76);margin:0 0 20px}
.sec-dark .case p.d,.sec-dark-alt .case p.d{color:var(--on-dark-78)}

.quote-block{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.sec-dark .quote-block,.sec-dark-alt .quote-block{border-top-color:var(--dark-line)}
.quote-block q{display:block;font-size:15.5px;line-height:1.6;font-style:italic;color:var(--ink-86)}
.sec-dark .quote-block q,.sec-dark-alt .quote-block q{color:var(--on-dark)}
/* the name block must be allowed to shrink, otherwise the row sets a floor on the
   card width once the play button joins it */
.person{display:flex;align-items:center;gap:12px;margin-top:18px;min-width:0}
.person>span{min-width:0}
.person b,.person span span{overflow-wrap:break-word}
/* scoped through .person, otherwise ".person span" forces display:block and the
   initials fall out of the circle. Only shows when there is no photograph. */
.person .avatar{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--t2);color:var(--t6);font-size:13px;font-weight:800;letter-spacing:.02em;margin:0;
  box-shadow:0 0 0 1px rgba(29,31,32,.08)}
.person .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sec-dark .person .avatar,.sec-dark-alt .person .avatar{background:rgba(115,150,184,.24);color:var(--t3);
  box-shadow:0 0 0 1px rgba(242,242,243,.14)}
.person b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em}
.person span{display:block;font-size:12.5px;color:var(--ink-62);margin-top:2px}
.sec-dark .person span,.sec-dark-alt .person span{color:var(--on-dark-60)}

/* a slot for the bank logo until the asset is supplied */
/* a row of client marks, monochrome so nine brands do not fight each other */
.logostrip{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px}
.logostrip img,.logostrip svg{display:block;width:auto;opacity:.75;transition:opacity .18s var(--ease)}
.logostrip img:hover,.logostrip svg:hover{opacity:1}
.logostrip svg{color:var(--ink-62)}
.sec-dark .logostrip svg,.sec-dark-alt .logostrip svg{color:var(--on-dark-60)}
@media (max-width:680px){ .logostrip{gap:18px 26px} .logostrip img,.logostrip svg{transform:scale(.86);transform-origin:left center} }

/* the client's own mark, rendered monochrome so the page stays on one palette.
   Every card reserves the same band height and the artwork sits on its baseline,
   so quotes start at the same line no matter how tall each mark is. */
.banklogo{display:flex;align-items:flex-end;height:24px;margin-bottom:22px}
.banklogo img,.banklogo svg{width:auto;display:block}
.say .banklogo{height:26px;margin-bottom:20px}
/* an inline svg with only a height set stretches to the container and centres its
   artwork, so the ratio is pinned to keep it left-aligned like the others */
/* an inline svg with only a height stretches to the container and centres its artwork,
   so the box is fixed to the mark's own ratio */
.banklogo svg{color:var(--on-dark-78);flex:none}
.sec-white .banklogo svg,.sec-paper .banklogo svg{color:var(--ink-76)}

.says{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* five quotes in a three-column grid leave a hole; the opening quote takes the
   spare cell and is set larger, which also gives the section a lead voice */
.say.say-lead{grid-column:span 2;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 190px;grid-template-rows:auto 1fr;gap:0 30px;
  align-items:start;padding:28px 30px}
.say.say-lead .banklogo{grid-column:1;height:26px;margin-bottom:18px}
.say.say-lead q{grid-column:1;font-size:20px;line-height:1.5;color:var(--ink-86);letter-spacing:-.015em}
.sec-dark .say.say-lead q,.sec-dark-alt .say.say-lead q{color:var(--on-dark)}
/* the person moves beside the quote instead of under it, so the wide card
   uses its width rather than stretching to the height of its neighbour */
.say.say-lead .person{grid-column:2;grid-row:1 / -1;flex-direction:column;align-items:flex-start;
  margin:0;gap:14px;text-align:left;border-left:1px solid var(--line);padding:4px 0 4px 30px;
  align-self:center}
.sec-dark .say.say-lead .person,.sec-dark-alt .say.say-lead .person{border-left-color:var(--dark-line)}
.say.say-lead .avatar{width:64px;height:64px}
.say.say-lead .person b{font-size:15px}
.say{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;
  display:flex;flex-direction:column}
.sec-white .say{background:var(--paper);border-color:transparent}
.sec-dark .say,.sec-dark-alt .say{background:var(--dark-fill);border-color:var(--dark-line)}
.say q{display:block;font-size:14px;line-height:1.62;color:var(--ink-76)}
.sec-dark .say q,.sec-dark-alt .say q{color:var(--on-dark-78)}
.say .person{margin-top:auto;padding-top:18px}

/* the video sits on the same line as the person it belongs to, at the right end */
.playbtn{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none;padding-left:16px}
/* scoped through .playbtn: ".person span" would otherwise force display:block
   and knock the glyph out of the circle */
.playbtn .play{width:38px;height:38px;border-radius:50%;flex:none;background:var(--steel);
  display:grid;place-items:center;transition:background .18s var(--ease),transform .18s var(--ease)}
.playbtn:hover .play{background:var(--t6);transform:scale(1.08)}
.playbtn .play svg{width:12px;height:12px;display:block;margin-left:2px}
.playbtn .play svg path{fill:#fff;stroke:none}
/* scoped through .playbtn so ".person span" cannot win on specificity */
.playbtn .playbtn-t{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink-76);line-height:1.2;white-space:nowrap;margin:0}
.sec-dark .playbtn .playbtn-t,.sec-dark-alt .playbtn .playbtn-t{color:var(--on-dark-78)}
.playbtn:hover .playbtn-t{color:var(--t6)}
@media (max-width:820px){ .playbtn .playbtn-t{display:none} .playbtn{padding-left:10px} }

.awards{display:grid;gap:0}

/* the satisfaction score, given the weight it carries on this page */
.score{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.gauge{position:relative;width:210px;height:210px;flex:none}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.gauge .track{fill:none;stroke:var(--line);stroke-width:10}
.sec-dark .gauge .track,.sec-dark-alt .gauge .track{stroke:var(--dark-line)}
.gauge .arc{fill:none;stroke:var(--steel);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:565.5;stroke-dashoffset:565.5;transition:stroke-dashoffset 1.6s var(--ease)}
.sec-dark .gauge .arc,.sec-dark-alt .gauge .arc{stroke:var(--t3)}
.rv.in .gauge .arc,.gauge.in .arc{stroke-dashoffset:62.2}
.gauge-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.score-n{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--ink)}
.sec-dark .score-n,.sec-dark-alt .score-n{color:var(--on-dark)}
.score-n span{font-size:.42em;color:var(--ink-45);letter-spacing:-.02em}
.sec-dark .score-n span,.sec-dark-alt .score-n span{color:var(--on-dark-40)}
.score-u{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t6);margin-top:8px}
.sec-dark .score-u,.sec-dark-alt .score-u{color:var(--t3)}
.score-cap{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-top:20px}
.sec-dark .score-cap,.sec-dark-alt .score-cap{color:var(--on-dark-40)}

/* the single copy of the client marks every strip is built from */
.logo-lib{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.d-single{display:block;text-decoration:none}

.h-sm{font-size:clamp(21px,2vw,26px);letter-spacing:-.035em;line-height:1.18;margin:0}

/* ---- 2. the client marks drift instead of sitting still ---- */
/* a strip that has not been filled yet must not collapse the section */
.logostrip[data-logos]:empty{min-height:26px}
.logomarquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logomarquee .logostrip{flex-wrap:nowrap;width:max-content;animation:drift 46s linear infinite}
.logomarquee:hover .logostrip{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- 3. awards on a rail, newest at the top ---- */
/* the padding sits on the cells, not on the row, so the rail spans the full height
   and the line runs unbroken from the first node to the last */
.award{display:grid;grid-template-columns:64px 26px 1fr;gap:0 20px;border:0;position:relative}
.award .yr,.award .body{padding-bottom:30px}
.award:last-child .yr,.award:last-child .body{padding-bottom:0}
.award .rail{position:relative}
.award .rail::after{content:"";position:absolute;left:50%;top:11px;bottom:0;width:1.5px;margin-left:-.75px;
  background:var(--t4)}
.sec-dark .award .rail::after,.sec-dark-alt .award .rail::after{background:var(--t6)}
.award:last-child .rail::after{display:none}
.award .rail::before{content:"";position:absolute;left:50%;top:6px;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--steel);box-sizing:border-box;z-index:1;
  box-shadow:0 0 0 4px var(--paper);transition:transform .18s var(--ease)}
.sec-white .award .rail::before{box-shadow:0 0 0 4px var(--white)}
.sec-dark .award .rail::before,.sec-dark-alt .award .rail::before{background:var(--t3);box-shadow:0 0 0 4px var(--deep)}
.award:hover .rail::before{transform:scale(1.25)}
.award .yr{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--t6);text-align:right;padding-top:0}
.sec-dark .award .yr,.sec-dark-alt .award .yr{color:var(--t3)}
.award h3{font-size:16.5px;letter-spacing:-.025em;margin:0 0 8px;line-height:1.3}
.award p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .award p,.sec-dark-alt .award p{color:var(--on-dark-78)}

.case{position:relative}

@media (max-width:980px){ .cases{grid-template-columns:1fr} .says{grid-template-columns:repeat(2,1fr)}
  .say.say-lead{grid-column:span 2;grid-template-columns:1fr 170px;gap:0 22px}
  .say.say-lead q{font-size:17px} }
@media (max-width:680px){
  .says{grid-template-columns:1fr}
  .say.say-lead{grid-column:span 1;grid-template-columns:1fr;gap:0;padding:26px 24px}
  .say.say-lead q{font-size:16px}
  .say.say-lead .person{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;border-left:0;padding-left:0;padding-top:18px;margin-top:auto;gap:12px}
  .say.say-lead .avatar{width:44px;height:44px}
    .award{grid-template-columns:52px 22px 1fr;gap:0 14px}
  .award .yr{font-size:16px}
  .case{padding:26px 22px}
  .score{grid-template-columns:1fr;gap:26px;justify-items:start}
  .gauge{width:168px;height:168px}
  .gauge .score-n{font-size:44px}
  .gauge .score-u{font-size:8.5px;letter-spacing:.1em}
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{display:grid;gap:0}
.partner{display:grid;grid-template-columns:270px 1fr;gap:0 44px;padding:34px 0;
  border-top:1px solid var(--line);transition:background .2s var(--ease)}
.sec-dark .partner,.sec-dark-alt .partner{border-top-color:var(--dark-line)}
.partner:last-child{border-bottom:1px solid var(--line)}
.sec-dark .partner:last-child,.sec-dark-alt .partner:last-child{border-bottom-color:var(--dark-line)}
.p-idx{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--t6);display:block;margin-bottom:10px}
.sec-dark .p-idx,.sec-dark-alt .p-idx{color:var(--t3)}
.partner h3{font-size:24px;letter-spacing:-.035em;line-height:1.1;margin:0 0 16px}
/* the partner's own mark replaces the typographic name where a logo exists */
.partner h3 img,.partner h3 svg{display:block;width:auto}
.partner h3 svg{color:var(--ink-76)}
.sec-dark .partner h3 svg,.sec-dark-alt .partner h3 svg{color:var(--on-dark-78)}
.partner p{font-size:14.5px;line-height:1.65;color:var(--ink-76);margin:0 0 14px}
.sec-dark .partner p,.sec-dark-alt .partner p{color:var(--on-dark-78)}
.partner p:last-child{margin-bottom:0}
/* the line that names what TreasurUp actually ships from that partner */
.p-use{font-weight:700;color:var(--ink)!important}
.sec-dark .p-use,.sec-dark-alt .p-use{color:var(--on-dark)!important}
.p-note{font-size:13px;line-height:1.6;color:var(--ink-62);margin-top:26px;max-width:88ch}
.sec-dark .p-note,.sec-dark-alt .p-note{color:var(--on-dark-60)}

/* how partners are selected */
/* the source lists these three as labels with no body copy, so they are set as a
   compact row rather than tall cards that would read as unfinished */
.criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.crit{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);padding:18px 22px}
.sec-white .crit{background:var(--paper);border-color:transparent}
.sec-dark .crit,.sec-dark-alt .crit{background:var(--dark-fill);border-color:var(--dark-line)}
.crit .icbox{margin-bottom:0;flex:none}
.crit h3{font-size:17px;letter-spacing:-.03em;margin:0;line-height:1.25}

@media (max-width:820px){
  .partner{grid-template-columns:1fr;gap:14px}
  .criteria{grid-template-columns:1fr}
  /* the hover band bleeds past the wrap padding, which there is none of down here */
  .partner::before{left:0;right:0}
}

/* rows lift on hover and the index picks up the accent, so the list feels handled */
.partner{position:relative}
.partner::before{content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;border-radius:var(--r-card);
  background:transparent;transition:background .2s var(--ease);pointer-events:none}
.partner:hover::before{background:rgba(89,128,166,.055)}
.sec-dark .partner:hover::before,.sec-dark-alt .partner:hover::before{background:rgba(115,150,184,.10)}
.partner>*{position:relative;z-index:1}
.partner:hover .p-idx{color:var(--steel)}
.partner h3 img,.partner h3 svg{transition:opacity .2s var(--ease)}
.partner h3 img{opacity:.82}
.partner:hover h3 img{opacity:1}

/* three criteria, on the approved three-tint pillar treatment */
.crit:nth-child(1){background:var(--white)}
.crit:nth-child(2){background:var(--t1);border-color:rgba(181,217,253,.85)}
.crit:nth-child(3){background:var(--t2);border-color:rgba(181,217,253,.9)}
.sec-white .crit:nth-child(1){background:var(--paper)}
.sec-dark .crit:nth-child(1),.sec-dark-alt .crit:nth-child(1){background:var(--deep)}
.sec-dark .crit:nth-child(2),.sec-dark-alt .crit:nth-child(2){background:var(--deep-3)}
.sec-dark .crit:nth-child(3),.sec-dark-alt .crit:nth-child(3){background:var(--t6)}
/* declared after the earlier breakpoint block, so the override has to be repeated here */
@media (max-width:820px){ .partner::before{left:0;right:0} }

/* ============================================================
   ABOUT US
   ============================================================ */
/* the opening statement, set larger than body copy because it is the thesis */
.thesis{font-size:clamp(22px,2.4vw,30px);line-height:1.34;letter-spacing:-.035em;font-weight:800;
  color:var(--ink);max-width:26ch}
.sec-dark .thesis,.sec-dark-alt .thesis{color:var(--on-dark)}
/* the same statement set across the full column instead of a narrow block */
.thesis-wide{max-width:none;font-size:clamp(26px,3.9vw,54px);line-height:1.16;letter-spacing:-.04em}
.split-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}

/* partner and shareholder cards, mark first */
.orgs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.org{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;
  display:flex;flex-direction:column;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .org{background:var(--paper);border-color:transparent}
.sec-dark .org,.sec-dark-alt .org{background:var(--dark-fill);border-color:var(--dark-line)}
.org:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 20px 44px -28px rgba(34,48,63,.45)}
.org .mark{display:flex;align-items:flex-end;height:28px;margin-bottom:20px}
.org .mark img,.org .mark svg{width:auto;display:block}
.org .mark svg{color:var(--ink-76)}
.sec-dark .org .mark svg,.sec-dark-alt .org .mark svg{color:var(--on-dark-78)}
.org p{font-size:13.5px;line-height:1.62;color:var(--ink-76);margin:0 0 18px}
.sec-dark .org p,.sec-dark-alt .org p{color:var(--on-dark-78)}
.org .txt-link{margin-top:auto;font-size:13px}
/* where no mark exists the name takes the same band, so links line up across cards */
.org h3{display:flex;align-items:flex-end;height:28px;margin:0 0 20px;font-size:19px;letter-spacing:-.03em;line-height:1}

@media (max-width:980px){ .orgs{grid-template-columns:repeat(2,1fr)} .split-intro{grid-template-columns:1fr;gap:28px} }
@media (max-width:680px){ .orgs{grid-template-columns:1fr} }

/* a full-width band for the team photograph; the slot is styled so an empty
   prototype still reads as a deliberate placeholder rather than a gap */
.photoband{border-radius:var(--r-card);overflow:hidden;position:relative;aspect-ratio:21/8;
  background:var(--t1);border:1px dashed rgba(89,128,166,.5);display:grid;place-items:center;text-align:center;padding:24px}
.sec-dark .photoband,.sec-dark-alt .photoband{background:rgba(115,150,184,.12);border-color:var(--dark-line)}
.photoband.filled{border:1px solid var(--line);background:none;display:block;padding:0}
.sec-dark .photoband.filled,.sec-dark-alt .photoband.filled{border-color:var(--dark-line)}
.photoband img{width:100%;height:100%;object-fit:cover;display:block}
.photoband .ph-label{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-62);max-width:44ch;line-height:1.5}
.sec-dark .photoband .ph-label,.sec-dark-alt .photoband .ph-label{color:var(--on-dark-60)}
.photo-cap{font-size:12.5px;color:var(--ink-62);margin:14px 0 0}
.sec-dark .photo-cap,.sec-dark-alt .photo-cap{color:var(--on-dark-60)}
@media (max-width:680px){ .photoband{aspect-ratio:4/3} }

/* location band: real address, no invented imagery. When a photograph arrives it
   replaces the panel and the address moves to the caption. */
.place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--white)}
.sec-white .place{background:var(--paper);border-color:var(--line)}
.sec-dark .place,.sec-dark-alt .place{background:var(--dark-fill);border-color:var(--dark-line)}
.place-copy{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.place-copy .eyebrow{margin-bottom:14px}
.place-copy h3{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.035em;line-height:1.22;margin:0 0 16px}
.place-addr{font-size:15px;line-height:1.6;color:var(--ink-76);margin:0 0 20px}
.sec-dark .place-addr,.sec-dark-alt .place-addr{color:var(--on-dark-78)}
.place-slot{position:relative;background:var(--t1);border-left:1px solid var(--line);display:grid;place-items:center;
  text-align:center;padding:28px;min-height:280px}
.sec-dark .place-slot,.sec-dark-alt .place-slot{background:rgba(115,150,184,.12);border-left-color:var(--dark-line)}
.place-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place-slot .ph-label{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-62);max-width:30ch;line-height:1.55}
.sec-dark .place-slot .ph-label,.sec-dark-alt .place-slot .ph-label{color:var(--on-dark-60)}
@media (max-width:820px){ .place{grid-template-columns:1fr} .place-slot{border-left:0;border-top:1px solid var(--line);min-height:220px}
  .place-copy{padding:30px 26px} }

/* the building shot runs off the left edge of the viewport and its own white
   right-hand side dissolves into the section, so there is no visible seam */
.introband{position:relative;overflow:hidden}
.ib-photo{position:absolute;left:0;top:0;bottom:0;width:44vw;max-width:760px;pointer-events:none}
.ib-photo img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.ib-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 55%,#fff 96%)}
.introband .wrap{position:relative;z-index:1}
/* both blocks share the right column, so the column gap becomes a row gap */
.introband .split-intro{grid-template-columns:minmax(0,42%) minmax(0,58%);gap:20px 0}
.introband .split-intro>:first-child{grid-column:2}
.introband .split-intro>:last-child{grid-column:2}
@media (max-width:980px){
  .ib-photo{position:relative;width:auto;max-width:none;height:280px;margin:0 -30px 28px;border-radius:0}
  .introband .split-intro{gap:18px 0}
  .ib-photo::after{background:linear-gradient(180deg,rgba(255,255,255,0) 60%,#fff 98%)}
  .introband .split-intro{grid-template-columns:1fr}
  .introband .split-intro>:first-child,.introband .split-intro>:last-child{grid-column:1}
}

/* ============================================================
   OUR TEAM
   ============================================================ */
/* four short quotes across; an inline style here would beat the breakpoints */
.says-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .says-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .says-4{grid-template-columns:1fr} }

/* five across rather than six, so each portrait gets more room */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px}
.member{text-align:left}
.m-face{aspect-ratio:1;border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center;
  background:var(--t1);color:var(--t6);font-size:clamp(18px,2vw,26px);font-weight:800;letter-spacing:.02em;
  transition:transform .22s var(--ease)}
.member:nth-child(3n+2) .m-face{background:var(--t2)}
.member:nth-child(3n) .m-face{background:var(--t3);color:var(--deep-3)}
.sec-dark .m-face,.sec-dark-alt .m-face{background:rgba(115,150,184,.18);color:var(--t3)}
.sec-dark .member:nth-child(3n+2) .m-face,.sec-dark-alt .member:nth-child(3n+2) .m-face{background:rgba(115,150,184,.28)}
.sec-dark .member:nth-child(3n) .m-face,.sec-dark-alt .member:nth-child(3n) .m-face{background:var(--t6);color:var(--paper)}
.member:hover .m-face{transform:translateY(-4px)}
.m-face img{width:100%;height:100%;object-fit:cover;display:block}
.member b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;margin-top:12px}
.member span{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-62);margin-top:2px}
.sec-dark .member span,.sec-dark-alt .member span{color:var(--on-dark-60)}

/* six values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px}
.sec-white .value{background:var(--paper);border-color:transparent}
.sec-dark .value,.sec-dark-alt .value{background:var(--dark-fill);border-color:var(--dark-line)}
.value .icbox{margin-bottom:20px}
.value h3{font-size:19px;letter-spacing:-.03em;margin:0 0 10px}
.value p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .value p,.sec-dark-alt .value p{color:var(--on-dark-78)}

/* the way-of-life paragraphs, set as three columns of running copy */
.wol{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.wol p{font-size:14.5px;line-height:1.68;color:var(--ink-76);margin:0}
.sec-dark .wol p,.sec-dark-alt .wol p{color:var(--on-dark-78)}
.wol>div{border-top:2px solid var(--steel);padding-top:20px}
.wol>div:nth-child(2){border-top-color:var(--t4)}
.wol>div:nth-child(3){border-top-color:var(--t5)}

@media (max-width:1100px){ .team{grid-template-columns:repeat(4,1fr)} }
@media (max-width:820px){ .values{grid-template-columns:repeat(2,1fr)} .wol{grid-template-columns:1fr;gap:22px} }
@media (max-width:600px){ .team{grid-template-columns:repeat(3,1fr);gap:16px 12px} .values{grid-template-columns:1fr} }

/* photography on the team page.
   The group shot straddles the seam: it lifts into the dark hero and sits on the
   white section below, so the frame is shown whole instead of cropped to a band. */
.heroshot{margin:calc(-1 * clamp(70px,11vw,170px)) 0 clamp(34px,4vw,56px);line-height:0;
  border-radius:var(--r-card);overflow:hidden;box-shadow:0 40px 80px -40px rgba(34,48,63,.55);
  position:relative;z-index:1}
.heroshot img{width:100%;height:auto;display:block}
.sec-bleed{padding:0}
.photo-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px}
.photo-pair figure{margin:0;line-height:0}
.photo-pair img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-card)}
.photo-pair figure:first-child img,.photo-pair figure:last-child img{height:clamp(220px,26vw,360px)}
.shot-lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.shot-lead img{width:100%;border-radius:var(--r-card);display:block}
.says-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .says-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .photo-pair{grid-template-columns:1fr}
  .shot-lead{grid-template-columns:1fr;gap:26px}
}
@media (max-width:680px){ .says-3{grid-template-columns:1fr} }

/* ============================================================
   CAREERS
   ============================================================ */
/* a hero headline built from a full sentence needs a smaller ceiling than .h-hero */
.h-hero-sm{font-size:clamp(30px,4.4vw,58px);line-height:1.12;letter-spacing:-.04em;font-weight:800}

/* the six values, listed rather than boxed, so the page does not read as a copy
   of the team page where the same six appear as cards */
.vlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.vrow{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--line)}
.sec-dark .vrow,.sec-dark-alt .vrow{border-top-color:var(--dark-line)}
.vrow b{font-size:17px;letter-spacing:-.03em;color:var(--ink)}
.sec-dark .vrow b,.sec-dark-alt .vrow b{color:var(--on-dark)}
.vrow span{font-size:14px;line-height:1.6;color:var(--ink-76)}
.sec-dark .vrow span,.sec-dark-alt .vrow span{color:var(--on-dark-78)}

/* the two "what we look for" blocks beside the office photograph */
.look{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center}
.look figure{margin:0;line-height:0}
/* height:auto is required: the img carries an HTML height attribute, which acts as a
   presentational hint and squashes the picture once width is set to 100% */
.look img{width:100%;height:auto;border-radius:var(--r-card);display:block}
.look-block+.look-block{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.sec-dark .look-block+.look-block,.sec-dark-alt .look-block+.look-block{border-top-color:var(--dark-line)}
.look-block h3{font-size:20px;letter-spacing:-.03em;margin:0 0 12px}
.look-block p{font-size:14.5px;line-height:1.68;color:var(--ink-76);margin:0}
.sec-dark .look-block p,.sec-dark-alt .look-block p{color:var(--on-dark-78)}

@media (max-width:900px){ .vlist{grid-template-columns:1fr} .look{grid-template-columns:1fr;gap:30px} }
@media (max-width:560px){ .vrow{grid-template-columns:1fr;gap:6px} }

/* ============================================================
   HOME
   ============================================================ */
/* the six pressures on a business banking portal */
.chal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.chal-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;
  position:relative;overflow:hidden}
.sec-white .chal-card{background:var(--paper);border-color:transparent}
.sec-dark .chal-card,.sec-dark-alt .chal-card{background:var(--dark-fill);border-color:var(--dark-line)}
.chal-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--steel)}
.sec-dark .chal-card::before,.sec-dark-alt .chal-card::before{background:var(--t5)}
.chal-card:nth-child(3n+2)::before{background:var(--t4)}
.chal-card:nth-child(3n)::before{background:var(--t3)}
.chal-card h3{font-size:17.5px;letter-spacing:-.03em;margin:0 0 10px}
.chal-card p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .chal-card p,.sec-dark-alt .chal-card p{color:var(--on-dark-78)}

/* the single-sentence positioning statement */
.stmt{font-size:clamp(28px,4.2vw,58px);line-height:1.14;letter-spacing:-.04em;font-weight:800;margin:0}

/* three levels of engagement, each aimed at a different reader */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.level{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 28px;
  display:flex;flex-direction:column;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.sec-white .level{background:var(--paper);border-color:transparent}
.sec-dark .level,.sec-dark-alt .level{background:var(--dark-fill);border-color:var(--dark-line)}
.level:hover{transform:translateY(-3px);border-color:rgba(89,128,166,.45);box-shadow:0 22px 48px -30px rgba(34,48,63,.45)}
.level .lv-n{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--t6);display:block;margin-bottom:14px}
.sec-dark .level .lv-n,.sec-dark-alt .level .lv-n{color:var(--t3)}
.level h3{font-size:21px;letter-spacing:-.035em;line-height:1.2;margin:0 0 12px}
.level p{font-size:14px;line-height:1.6;color:var(--ink-76);margin:0 0 20px}
.sec-dark .level p,.sec-dark-alt .level p{color:var(--on-dark-78)}
.level .txt-link{margin-top:auto}

/* seven bank quotes, mark above the words */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1100px){ .chal{grid-template-columns:repeat(2,1fr)} .levels{grid-template-columns:1fr} .quotes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .chal{grid-template-columns:1fr} .quotes{grid-template-columns:1fr} }

/* the hero carries a live portal mock beside the copy */
.hero-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hero-split .hero-copy{max-width:none}
.hero-mock{position:relative}
/* container-type on .mockwrap makes it a containment context, and a transform there
   would break the container query the mock scales with, so the tilt goes on a wrapper */
.hero-mock{perspective:1600px}
.hero-mock>.mockwrap{transform:rotateY(-7deg) rotateX(1.5deg);transform-origin:left center;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.6);border-radius:12px;overflow:hidden}
/* the headline shares the row with the mock, so it needs a lower ceiling */
.hero-split .h-hero{font-size:clamp(38px,4.6vw,68px)}
@media (max-width:1024px){
  .hero-split{grid-template-columns:1fr;gap:36px}
  .hero-mock>.mockwrap{transform:none;box-shadow:0 30px 60px -34px rgba(0,0,0,.55)}
}

/* a compact figure caption under an exhibit */
.exh-cap{font-size:12.5px;color:var(--ink-62);margin:14px 0 0;text-align:center}
.sec-dark .exh-cap,.sec-dark-alt .exh-cap{color:var(--on-dark-60)}

/* three phones, sized for a supporting row rather than a showcase */
.phones-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:760px;margin-inline:auto}
.phones-row .phone-fig{margin:0}
@media (max-width:680px){ .phones-row{grid-template-columns:1fr;max-width:280px} }

/* ============================================================
   HOME V2
   ============================================================ */
/* the six pressures as a numbered ledger rather than a card grid */
.press{display:grid;gap:0}
.press-row{display:grid;grid-template-columns:64px 1fr 1.35fr;gap:0 28px;align-items:baseline;
  padding:24px 0;border-top:1px solid var(--dark-line);transition:padding-left .22s var(--ease)}
.press-row:last-child{border-bottom:1px solid var(--dark-line)}
.press-row:hover{padding-left:10px}
.press-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--t5)}
.press-row:hover .press-n{color:var(--t3)}
.press-row b{font-size:clamp(18px,1.9vw,24px);letter-spacing:-.035em;color:var(--on-dark);line-height:1.2}
.press-row span{font-size:14.5px;line-height:1.6;color:var(--on-dark-78)}

/* a wide answer panel that follows the pressures */
.answer{background:var(--white);border-radius:var(--r-card);padding:clamp(34px,4vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.answer h2{margin:0}
.answer p{font-size:15.5px;line-height:1.68;color:var(--ink-76);margin:0}

/* the offer, laid out the way the new navigation is: Solutions by audience,
   Products & services by platform and service. Replaces the old three-level model. */
.offer2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.opanel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px}
.sec-white .opanel{background:var(--paper);border-color:transparent}
.sec-dark .opanel,.sec-dark-alt .opanel{background:var(--dark-fill);border-color:var(--dark-line)}
.opanel>.eyebrow{margin-bottom:10px}
.opanel h3{font-size:21px;letter-spacing:-.035em;line-height:1.22;margin:0 0 24px}
.ogroup+.ogroup{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.sec-dark .ogroup+.ogroup,.sec-dark-alt .ogroup+.ogroup{border-top-color:var(--dark-line)}
.ogroup>p{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t6);margin:0 0 12px}
.sec-dark .ogroup>p,.sec-dark-alt .ogroup>p{color:var(--t3)}
.oitem{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:9px 10px;margin:0 -10px;
  border-radius:10px;text-decoration:none;transition:background .18s var(--ease)}
a.oitem:hover{background:rgba(89,128,166,.07)}
.sec-dark a.oitem:hover,.sec-dark-alt a.oitem:hover{background:rgba(115,150,184,.12)}
/* the icon box is a <span>, so a bare ".oitem span" rule would force display:block
   and knock the glyph off centre; the text rules are scoped to the description instead */
.oitem .icbox{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;margin:0;flex:none}
.oitem .icbox svg{width:17px;height:17px;display:block}
.oitem>span:last-child{display:block;min-width:0}
.oitem b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.sec-dark .oitem b,.sec-dark-alt .oitem b{color:var(--on-dark)}
.oitem b+span{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-62);margin-top:2px}
.sec-dark .oitem b+span,.sec-dark-alt .oitem b+span{color:var(--on-dark-60)}
.oitem.is-off{opacity:.55}

@media (max-width:900px){ .offer2{grid-template-columns:1fr} }

/* a single quote given the full width, rotated through by the reader */
.bigq{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:center}
.bigq q{display:block;font-size:clamp(20px,2.5vw,32px);line-height:1.34;letter-spacing:-.03em;
  font-weight:800;color:var(--on-dark)}
.bigq .person{margin-top:26px}
.bigq-side{display:grid;gap:10px}
.qbtn{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--dark-line);
  border-radius:10px;padding:10px 14px;cursor:pointer;text-align:left;transition:border-color .18s var(--ease),background .18s var(--ease)}
.qbtn:hover{border-color:var(--steel)}
.qbtn[aria-pressed="true"]{background:rgba(115,150,184,.16);border-color:var(--t5)}
/* sized in CSS, not inline, so the marks can shrink on a narrow screen without
   an inline height overriding the rule and pushing the button past the viewport */
.qbtn{min-width:0;overflow:hidden}
.qbtn img,.qbtn svg{height:16px;width:auto;max-width:100%;object-fit:contain;display:block;opacity:.8}
.qbtn[aria-pressed="true"] img,.qbtn[aria-pressed="true"] svg{opacity:1}

@media (max-width:900px){
  .press-row{grid-template-columns:44px 1fr;gap:4px 18px}
  .press-row span{grid-column:2}
  .answer{grid-template-columns:1fr}
  .rung{grid-template-columns:56px 1fr;gap:6px 20px}
  .rung .txt-link{grid-column:2}
  .bigq{grid-template-columns:1fr;gap:30px}
  .bigq-side{grid-template-columns:repeat(3,1fr);display:grid}
  .qbtn{padding:9px 10px;justify-content:center}
  .qbtn img,.qbtn svg{height:13px}
}

/* ============================================================
   BOOK A DEMO
   ============================================================ */
/* grid items default to a min-width of auto, so a form control's intrinsic width
   can push the column past the page; every level is pinned to 0 instead */
.demo-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,64px);align-items:start}
.demo-grid>*{min-width:0}
.frow>*{min-width:0}
.field input,.field select,.field textarea{max-width:100%;min-width:0}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(26px,3vw,42px)}
.sec-white .form-card{background:var(--paper);border-color:transparent}
.sec-dark .form-card,.sec-dark-alt .form-card{background:var(--dark-fill);border-color:var(--dark-line)}
.frow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink-76);margin-bottom:7px}
.sec-dark .field>span,.sec-dark-alt .field>span{color:var(--on-dark-78)}
.field .req{color:var(--t6)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.sec-white .field input,.sec-white .field select,.sec-white .field textarea{background:var(--white)}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--steel);
  box-shadow:0 0 0 3px rgba(89,128,166,.18)}
.field input:invalid:not(:placeholder-shown){border-color:#B4472F}
.field-err{display:none;font-size:12px;color:#B4472F;margin-top:6px}
.field.has-err .field-err{display:block}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#B4472F}
.consent{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;margin:6px 0 22px}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--steel)}
.consent span{font-size:12.5px;line-height:1.55;color:var(--ink-62)}
.sec-dark .consent span,.sec-dark-alt .consent span{color:var(--on-dark-60)}
.form-note{font-size:12.5px;color:var(--ink-62);margin:16px 0 0}
.sec-dark .form-note,.sec-dark-alt .form-note{color:var(--on-dark-60)}

/* the confirmation that replaces the form once it is submitted */
.form-done{display:none;text-align:center;padding:clamp(30px,4vw,56px) 10px}
.form-done .icbox{margin:0 auto 20px;width:52px;height:52px;border-radius:14px}
.form-done .icbox svg{width:24px;height:24px}
.form-done h3{font-size:24px;letter-spacing:-.035em;margin:0 0 10px}
.form-done p{font-size:15px;line-height:1.6;color:var(--ink-76);margin:0 auto;max-width:44ch}
.sec-dark .form-done p,.sec-dark-alt .form-done p{color:var(--on-dark-78)}
.form-card.is-done form{display:none}
.form-card.is-done .form-done{display:block}

/* what happens after the form is sent */
.next-steps{display:grid;gap:0}
.next-step{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.sec-dark .next-step,.sec-dark-alt .next-step{border-top-color:var(--dark-line)}
.next-step:last-child{border-bottom:1px solid var(--line)}
.sec-dark .next-step:last-child,.sec-dark-alt .next-step:last-child{border-bottom-color:var(--dark-line)}
.next-step .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--t2);color:var(--t6);font-size:12px;font-weight:800}
.sec-dark .next-step .n,.sec-dark-alt .next-step .n{background:rgba(115,150,184,.22);color:var(--t3)}
.next-step b{display:block;font-size:15px;letter-spacing:-.025em;margin-bottom:4px}
.next-step p{font-size:13.5px;line-height:1.6;color:var(--ink-76);margin:0}
.sec-dark .next-step p,.sec-dark-alt .next-step p{color:var(--on-dark-78)}

@media (max-width:900px){ .demo-grid{grid-template-columns:1fr} .frow{grid-template-columns:1fr;gap:0} }

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line)}
.sec-dark .faq-item,.sec-dark-alt .faq-item{border-color:var(--dark-line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.sec-dark .faq-item:last-child{border-color:var(--dark-line)}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:26px;text-align:left;padding:24px 0;font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.35}
.faq-sign{flex:none;width:24px;height:24px;border-radius:5px;border:1px solid var(--line);display:grid;place-items:center;position:relative;margin-top:2px;transition:background .2s,border-color .2s}
.sec-dark .faq-sign{border-color:var(--dark-line)}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.faq-sign::before{width:10px;height:2px}
.faq-sign::after{width:2px;height:10px;transition:transform .24s var(--ease)}
.faq-item.open .faq-sign{background:var(--steel);border-color:var(--steel);color:#fff}
.faq-item.open .faq-sign::after{transform:scaleY(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:15px;line-height:1.68;color:var(--ink-76);padding:0 60px 26px 0;max-width:80ch}
.sec-dark .faq-a p,.sec-dark-alt .faq-a p{color:var(--on-dark-78)}

/* ---------- CLOSING CTA ---------- */
.closing{padding:104px 0 118px}
.closing h2{max-width:20ch}
.closing .h-lg span{color:var(--t3)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink);color:var(--on-dark);padding:66px 0 34px}
/* the brand block on the left, the three link columns to its right */
.foot-top{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,7fr);gap:40px 56px;align-items:start}
@media (max-width:860px){
  .foot-top{grid-template-columns:1fr;gap:34px}
}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 34px}
.foot-nav a{font-size:14px;font-weight:600;color:var(--on-dark-60);transition:color .16s}
.foot-nav a:hover{color:#fff}
.foot-nav .is-off{font-size:14px;font-weight:600;color:var(--on-dark-40);cursor:default}
.foot-bot{margin-top:46px;padding-top:22px;border-top:1px solid rgba(242,242,243,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-40)}

/* ---------- ROUTER ---------- */
@keyframes pgin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   PAGE SIGNATURES - each page gets one instrument of its own
   ============================================================ */

.lifecycle{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.life{background:var(--white);padding:30px 22px;transition:background .22s var(--ease)}
.life:hover{background:var(--t1)}
.life .step{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.life .step i{width:26px;height:26px;border-radius:7px;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;font-style:normal}
.life .step b{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--t6);font-weight:700}
.life h3{font-size:17px;margin-bottom:10px;letter-spacing:-.028em}
.life p{font-size:13px;line-height:1.55;color:var(--ink-62)}
.steps-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step-card{counter-increment:s;position:relative;padding-top:26px;border-top:2px solid var(--dark-line)}
.step-card::before{content:"0" counter(s);position:absolute;top:-11px;left:0;background:var(--deep-2);padding-right:12px;font-size:12px;font-weight:800;color:var(--t3);letter-spacing:.06em}
.step-card b{display:block;font-size:16px;font-weight:800;letter-spacing:-.025em;margin-bottom:9px}
.step-card p{font-size:13.5px;line-height:1.6;color:var(--on-dark-78)}

/* --- CLIENT PULSE: the missed-signal strip --- */
.miss{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);border-radius:var(--r-card);overflow:hidden}
.miss div{background:var(--deep);padding:24px 20px;font-size:13.5px;line-height:1.55;color:var(--on-dark-78)}
.miss div b{display:block;font-size:24px;font-weight:800;color:var(--t3);margin-bottom:14px;letter-spacing:-.03em}

/* --- ORCHESTRATION: pipelines --- */
.pipe{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--white);margin-top:16px;transition:border-color .2s}
.pipe:hover{border-color:var(--steel)}
.pipe-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.pipe-head .icbox{width:38px;height:38px;margin:0;background:var(--white)}
.pipe-head .icbox svg{width:19px;height:19px}
.pipe-head b{font-size:17px;font-weight:800;letter-spacing:-.028em}
.pipe-head span{font-size:13.5px;color:var(--ink-62);margin-left:auto;text-align:right}
.pipe-body{display:grid;grid-template-columns:1fr 1fr 1fr}
.pipe-cell{padding:22px 24px;border-left:1px solid var(--line)}
.pipe-cell:first-child{border-left:0}
.pipe-cell b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--t6);margin-bottom:11px}
.pipe-cell p{font-size:13.5px;line-height:1.6;color:var(--ink-76)}
.pipe-cell.dest{background:var(--t1)}
.threecol-int{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* --- FEDERATED: depth scale + phase rail --- */
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:p}
.phase{counter-increment:p;padding:0 22px 0 0;position:relative}
.phase-dot{display:flex;align-items:center;gap:0;margin-bottom:22px}
.phase-dot i{width:15px;height:15px;border-radius:50%;background:var(--steel);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--steel);flex:none}
.phase-dot span{height:1px;background:var(--line);flex:1}
.phase:last-child .phase-dot span{background:transparent}
.phase b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t6);font-weight:700;margin-bottom:9px}
.phase h3{font-size:16.5px;margin-bottom:9px;letter-spacing:-.025em}
.phase p{font-size:13px;line-height:1.55;color:var(--ink-62)}
.spec{border-top:2px solid var(--ink);padding-top:24px}
.spec .n{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t6)}
.spec h3{font-size:22px;margin:12px 0 4px}
.spec .sub{font-size:14px;color:var(--ink-62);margin-bottom:16px}
.three-way{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:stretch}
.way{border-radius:var(--r-card);padding:28px 26px;border:1px solid var(--dark-line);background:var(--dark-fill)}
.way.mid{background:linear-gradient(160deg,rgba(115,150,184,.28),rgba(115,150,184,.08));border-color:var(--t5)}
.way .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--on-dark-40);margin-bottom:14px}
.way.mid .lbl{color:var(--t3)}
.way p{font-size:14px;line-height:1.62;color:var(--on-dark-78)}
.way h3{font-size:18px;margin-bottom:10px}

/* ---------- SOON PAGE ---------- */
.soon{min-height:62vh;display:grid;place-items:center;text-align:center;padding:120px 0}
.soon .eyebrow{margin-bottom:14px}
.soon .lead{margin-left:auto;margin-right:auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .nav-link{padding:9px 10px;font-size:13.5px}
  .mega-top,.mega-body{padding-left:30px;padding-right:30px}
  .col+.col{padding-left:34px}
  .mega-body{gap:0 34px}
}
@media (max-width:1080px){
    .lifecycle,.miss{grid-template-columns:repeat(2,1fr)}
  .phases,.depth{grid-template-columns:repeat(2,1fr)}
  .depth-col{border-left:0;border-top:1px solid var(--line)}
  .depth-col:nth-child(-n+2){border-top:0}
  .depth-col:nth-child(even){border-left:1px solid var(--line)}
  .steps-4,.sol-rail,.tier,.three-way,.threecol-int{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .phase{padding-bottom:30px}
}
@media (max-width:1100px){
  .primary-nav,.header-cta{display:none}
  .burger{display:block}
}
@media (max-width:980px){
  .sec{padding:70px 0}
  .closing{padding:76px 0 86px}
  .g3,.g2{grid-template-columns:1fr}
  .facing{grid-template-columns:1fr}
  .facing>div+div{border-left:0;border-top:1px solid var(--dark-line)}
  .agent-flow{grid-template-columns:1fr}
  .agent-arw{width:auto;padding:14px 0;transform:rotate(90deg)}
  .pipe-body{grid-template-columns:1fr}
  .pipe-cell{border-left:0;border-top:1px solid var(--line)}
  .pipe-cell:first-child{border-top:0}
  .pipe-head span{margin-left:0;text-align:left;width:100%}
  .pipe-head{flex-wrap:wrap}
  .leak-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:680px){
  .h-hero{max-width:none}
  .wrap,.wrap-narrow{padding:0 20px}
  .sec{padding:58px 0}
  .lifecycle,.miss,.steps-4,.sol-rail,.tier,.three-way,.threecol-int,.g4,.depth,.phases{grid-template-columns:1fr}
  .depth-col:nth-child(even){border-left:0}
  .depth-col{border-top:1px solid var(--line)}
  .depth-col:first-child{border-top:0}
  .sub-name{flex:none;max-width:none;padding-right:16px;white-space:nowrap}
  .sub-name span{display:none}
  .pipe-head span,.pipe-head b{min-width:0;overflow-wrap:anywhere}
  .btn{white-space:normal}
  .card,.card-dark{padding:22px}
  .faq-a p{padding-right:0}
  :root{--r-sec:20px}
}
@media (max-width:900px){
  .arch-links,.arch-base{grid-template-columns:repeat(2,1fr) !important}
  .arch-links>span:nth-child(n+3){display:none}
}
@media (max-width:600px){
  .arch-links,.arch-base{grid-template-columns:1fr !important}
  .arch-links>span:nth-child(n+2){display:none}
  .arch-card{padding:15px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}
/* ============================================================
   FX - THE BANK'S OWN BUSINESS PORTAL, WITH TREASURUP INSIDE
   Markup, not a screenshot, so the whole dashboard re-skins from
   --bank exactly like the .mock portal above it and stays sharp
   at any width. Sized from the container, same as .mock.
   ============================================================ */
.dashwrap{container-type:inline-size}
.dsh{--bank:#0E7A9E;--bank-soft:rgba(14,122,158,.10);
  font-size:11px;font-size:clamp(6px,.94cqw,11px);
  background:#EEF1F4;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 24px 54px -34px rgba(34,48,63,.5);color:#1D1F20;line-height:1.35}
.sec-dark .dsh,.sec-dark-alt .dsh{border-color:var(--dark-line);box-shadow:none}

/* identity strip above the bank's own navigation */
.dsh-id{display:flex;align-items:center;gap:.8em;background:#fff;padding:.7em 1.2em;border-bottom:1px solid #E7EAED}
.dsh-id .co{display:flex;align-items:center;gap:.45em;font-size:.92em;font-weight:800;letter-spacing:.01em}
.dsh-id .co svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dsh-out{display:flex;align-items:center;gap:.35em;font-size:.9em;color:#6E6F70;padding-left:.9em;border-left:1px solid #E7EAED}
.dsh-out svg{width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dsh-id .sp{margin-left:auto}
.dsh-util{display:flex;gap:1.5em}
.dsh-u{display:grid;justify-items:center;gap:.25em;font-size:.78em;color:#6E6F70;position:relative}
.dsh-u svg{width:1.3em;height:1.3em;fill:none;stroke:#5A6068;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dsh-u i{position:absolute;top:-.1em;right:.5em;width:.5em;height:.5em;border-radius:50%;background:#D2372B;
  display:block;font-size:1em;text-indent:-99em;overflow:hidden}

/* the bank's own navigation */
.dsh-nav{display:flex;align-items:center;gap:.9em;background:#fff;padding:.75em 1.2em;border-bottom:1px solid #E7EAED}
.dsh-mark{width:2.1em;height:2.1em;border-radius:.42em;background:var(--bank);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:1.05em;flex:none;letter-spacing:-.03em}
.dsh-brand{font-size:.9em;line-height:1.15;color:#5A6068}
.dsh-brand b{display:block;font-size:1.05em;color:#1D1F20;letter-spacing:-.02em}
.dsh-links{margin-left:auto;display:flex;align-items:center;gap:1.35em}
.dsh-links span{font-size:.95em;font-weight:600;color:#3F4347;white-space:nowrap}
.dsh-links .home{color:var(--bank)}
.dsh-links .home svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the widget grid */
.dsh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;padding:1.2em}
.dsh-col{display:grid;gap:1.1em;align-content:start}
.dsh-card{background:#fff;border:1px solid #E7EAED;border-radius:.75em;padding:1.05em 1.1em 1.15em}
.dsh-ch{display:flex;align-items:center;gap:.55em;margin-bottom:.95em}
.dsh-ch svg{width:1.25em;height:1.25em;fill:none;stroke:var(--bank);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dsh-ch b{font-size:1.15em;font-weight:800;letter-spacing:-.02em}
.dsh-opt{margin-left:auto;display:flex;align-items:center;gap:.3em;font-size:.85em;color:#8B8C8D;white-space:nowrap}
.dsh-opt svg{width:.85em;height:.85em;stroke:currentColor;stroke-width:2.2;fill:none}
.dsh-meta{font-size:.8em;color:#9A9C9E;text-align:center;margin-bottom:.7em}
.dsh-empty{font-size:.85em;color:#9A9C9E;text-align:center;padding:1.9em 0}

/* rate rows */
.dsh-rate{display:flex;align-items:center;gap:.6em;padding:.6em 0;border-top:1px solid #F1F3F5}
.dsh-rate:first-of-type{border-top:0}
.dsh-flag{width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;font-size:.85em;flex:none;
  background:#EEF1F4;color:#5A6068;font-weight:800}
.dsh-rate .p{font-size:.95em;font-weight:600}
.dsh-rate .v{margin-left:auto;font-weight:800;font-size:1.02em;color:var(--bank)}
.dsh-up{color:#1D8348;font-size:.8em;letter-spacing:-.1em}
.dsh-add{display:flex;align-items:center;gap:.5em;font-size:.85em;color:#9A9C9E;padding:.75em 0;border-top:1px solid #F1F3F5;margin-top:.2em}
.dsh-add .plus{margin-left:auto;width:1.25em;height:1.25em;border-radius:50%;border:1px solid #C9CBCE;
  display:grid;place-items:center;font-size:1em;line-height:1;font-weight:700;color:#9A9C9E;padding-bottom:.08em}
.dsh-btn{display:block;text-align:center;font-size:.92em;font-weight:700;padding:.7em;border-radius:.45em;
  border:1px solid #D8DBDF;color:#1D1F20;background:#fff;margin-top:.35em}
.dsh-btn.fill{background:var(--bank);border-color:var(--bank);color:#fff}

/* message rows */
.dsh-msg{display:flex;gap:.8em;align-items:baseline;padding:.62em 0;border-top:1px solid #F1F3F5;font-size:.88em}
.dsh-msg:first-of-type{border-top:0}
.dsh-msg .d{margin-left:auto;color:#9A9C9E;font-size:.9em;white-space:nowrap}

/* account rows */
.dsh-acc{display:flex;align-items:flex-start;gap:.8em;padding:.66em 0;border-top:1px solid #F1F3F5}
.dsh-acc:first-of-type{border-top:0}
.dsh-acc .n{font-size:.95em;font-weight:800;letter-spacing:-.01em}
.dsh-acc .i{font-size:.82em;color:#9A9C9E;display:block;margin-top:.15em}
.dsh-acc .r{margin-left:auto;text-align:right;white-space:nowrap}
.dsh-acc .b{font-size:1.05em;font-weight:800;color:var(--bank)}
.dsh-acc .b sup{font-size:.6em;font-weight:700;margin-left:.15em}
.dsh-acc .res{font-size:.78em;color:#9A9C9E;display:block;margin-top:.15em}
.dsh-pill{display:inline-flex;align-items:center;gap:.5em;background:var(--bank);color:#fff;font-size:.88em;font-weight:700;
  padding:.55em .85em;border-radius:.45em;margin-top:.55em}
.dsh-pill svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8}
.dsh-new{background:rgba(255,255,255,.24);font-size:.8em;padding:.1em .45em;border-radius:.3em;font-weight:800}
.dsh-2btn{display:grid;grid-template-columns:1fr 1fr;gap:.55em;margin-top:.5em}
.dsh-2btn .dsh-btn{margin-top:0}

/* favourites */
.dsh-fav{display:grid;grid-template-columns:1fr 1fr;gap:.55em .8em}
.dsh-fav span{display:grid;grid-template-columns:1em 1fr;gap:.45em;font-size:.88em;color:#3F4347;align-items:start;line-height:1.3}
.dsh-fav svg{width:.95em;height:.95em;margin-top:.15em;fill:none;stroke:var(--bank);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dsh-fav .off{color:#9A9C9E}
.dsh-fav .off svg{stroke:#C9CBCE}

/* ---- the TreasurUp widget sitting inside the bank's grid ---- */
.dsh-embed{position:relative;border-color:var(--bank);box-shadow:0 0 0 3px var(--bank-soft)}
.dsh-tag{position:absolute;top:-.85em;right:.9em;background:var(--bank);color:#fff;font-size:.72em;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:.32em .6em;border-radius:.3em}
.fxw-bal{background:#F1F3F6;border-radius:.5em;padding:.7em .8em;margin-bottom:.75em}
.fxw-bal div{display:flex;align-items:baseline;gap:.8em;font-size:.9em;padding:.16em 0}
.fxw-bal b{margin-left:auto;font-weight:800;font-size:1.05em;letter-spacing:-.01em}
.fxw-opt{display:flex;align-items:flex-start;gap:.65em;border:1px solid #E3E5E8;border-radius:.5em;padding:.65em .8em;margin-bottom:.5em}
.fxw-opt .rd{width:1.05em;height:1.05em;border-radius:50%;border:1.5px solid #C9CBCE;flex:none;margin-top:.1em;position:relative}
.fxw-opt b{display:block;font-size:.98em;font-weight:800}
.fxw-opt span{font-size:.82em;color:#8B8C8D}
.fxw-opt.on{background:var(--bank);border-color:var(--bank);color:#fff}
.fxw-opt.on span{color:rgba(255,255,255,.82)}
.fxw-opt.on .rd{border-color:#fff}
.fxw-opt.on .rd::after{content:"";position:absolute;inset:.22em;border-radius:50%;background:#fff}
.fxw-lbl{font-size:.76em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8B8C8D;margin:.85em 0 .4em}
.fxw-in{display:flex;align-items:stretch;border:1px solid #D8DBDF;border-radius:.45em;overflow:hidden}
.fxw-in .cur{width:2.4em;display:grid;place-items:center;background:#F1F3F6;color:var(--bank);font-weight:800;font-size:1.05em}
.fxw-in .val{padding:.62em .8em;font-size:1.35em;font-weight:800;letter-spacing:-.02em}
.fxw-quote{background:#EAF5EE;border-radius:.5em;padding:.7em .8em;margin:.75em 0}
.fxw-quote .r{font-size:.95em;font-weight:800;color:#1D8348;margin-bottom:.25em}
.fxw-quote p{font-size:.85em;line-height:1.5;color:#3F4347}
.fxw-note{font-size:.76em;color:#9A9C9E;text-align:center;margin-top:.6em;line-height:1.4}

@container (max-width:760px){
  .dsh-grid{grid-template-columns:1fr}
  .dsh-links,.dsh-util{display:none}
}

/* ---- the exhibit row: two brands side by side, the embedded case below ---- */
.shots-3{margin-top:26px}
.shots-3 .shot-cap{margin-top:14px}

/* ---- architecture toggle: same diagram, price engine on either side ---- */
.archswitch{display:inline-flex;padding:4px;border-radius:8px;background:rgba(242,242,243,.08);border:1px solid var(--dark-line);gap:4px;margin-bottom:26px}
.archswitch label{font-size:13px;font-weight:700;letter-spacing:-.01em;padding:9px 16px;border-radius:6px;color:var(--on-dark-60);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.archswitch label:hover{color:var(--on-dark)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fxarch-1:checked~.archswitch label[for="fxarch-1"],
#fxarch-2:checked~.archswitch label[for="fxarch-2"]{background:var(--t3);color:var(--deep)}
#fxarch-1:checked~.archstage .av2,
#fxarch-2:checked~.archstage .av1{display:none}
.vh:focus-visible~.archswitch label{outline:2px solid var(--t3);outline-offset:3px}

/* ---- FX: the two desk problems, stated then answered ---- */
.deskpair{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.deskcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto}
/* the two cards hold a different number of points, so the rows are shared across
   the pair: both "with TreasurUp" panels start on the same line */
@supports (grid-template-rows:subgrid){
  .deskpair{grid-template-rows:auto auto auto}
  .deskcard{grid-row:span 3;grid-template-rows:subgrid}
}
.sec-white .deskcard{background:var(--paper);border-color:transparent}
.sec-dark .deskcard,.sec-dark-alt .deskcard{background:var(--dark-fill);border-color:var(--dark-line)}
.deskcard>h3{font-size:19px;letter-spacing:-.028em;padding:26px 26px 0}
.deskhalf{padding:22px 26px 26px}
.deskhalf .k{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin:0 0 14px}
.deskhalf li{font-size:14px;line-height:1.55;color:var(--ink-76);padding:8px 0 8px 19px;position:relative}
.deskhalf li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1.5px;background:var(--ink-45)}
.deskhalf.ans{background:var(--t1);border-top:1px solid rgba(89,128,166,.28)}
.deskhalf.ans .k{color:var(--t6)}
.deskhalf.ans li{color:var(--ink-86);display:grid;grid-template-columns:18px 1fr;gap:11px;padding-left:0}
.deskhalf.ans li::before{display:none}
.deskhalf.ans svg{width:15px;height:15px;margin-top:4px;fill:none;stroke:var(--t6);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sec-dark .deskhalf li,.sec-dark-alt .deskhalf li{color:var(--on-dark-60)}
.sec-dark .deskhalf li::before,.sec-dark-alt .deskhalf li::before{background:var(--on-dark-40)}
.sec-dark .deskhalf.ans,.sec-dark-alt .deskhalf.ans{background:rgba(115,150,184,.14);border-top-color:var(--dark-line)}
.sec-dark .deskhalf.ans .k,.sec-dark-alt .deskhalf.ans .k{color:var(--t3)}
.sec-dark .deskhalf.ans li,.sec-dark-alt .deskhalf.ans li{color:var(--on-dark)}
.sec-dark .deskhalf.ans svg,.sec-dark-alt .deskhalf.ans svg{stroke:var(--t3)}

/* ---- FX: the ladder of three solutions, entry level made explicit ---- */
.entry{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.entry i{flex:1;height:1px;background:var(--line);display:block}
.sec-dark .entry,.sec-dark-alt .entry{color:var(--on-dark-40)}
.sec-dark .entry i,.sec-dark-alt .entry i{background:var(--dark-line)}

@media (max-width:900px){
  .deskpair{grid-template-columns:1fr}
}
@media (max-width:760px){
  .archswitch{width:100%}
  .archswitch label{flex:1;text-align:center}
}

/* ============================================================
   HOME - THE CHANNEL RING, IN THE HERO
   Six channels on a ring around the statement they feed. Each one is
   a badge with its name underneath, so the six read as the subject of
   the picture and the centre reads as what they add up to.
   ============================================================ */
.hero-split.hero-hub{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px)}
.hero-hub .h-hero{font-size:clamp(38px,4.3vw,62px)}
/* the headline always breaks after "Build Better", so the two halves read as
   two lines rather than wherever the column width happens to fold them */
.hero-hub .h-hero .accent{display:block}


/* the orbit is a rotating square, and a rotated box reports a bigger footprint
   than it paints, which was widening the page. Clip it, with enough side room
   that the outermost channel name is never cut. */
.hubwrap{container-type:inline-size;width:100%;overflow:hidden;
  /* the clip stops the rotating square widening the page, so the box needs
     room inside it for the badge glow: padding gives it, the negative margin
     puts the diagram back where it was */
  margin:-42px -22px;padding:42px 22px}
.hub{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin-inline:auto;
  font-size:clamp(10px,3.15cqw,15px)}

/* the ring the badges sit on, plus the soft halo behind the centre */
.hub-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* six arcs rather than one dashed ring: each fades out toward the badge at
   either end, so the line resolves into the background instead of stopping
   at a hard cut */
.hub-ring{--arc:#749DC4}
.sec-white .hub-ring,.sec-paper .hub-ring{--arc:#94BCE3}
.hub-ring .arc{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.hub-ring .halo{fill:rgba(115,150,184,.10);stroke:rgba(148,188,227,.35);stroke-width:1;vector-effect:non-scaling-stroke}
.sec-white .hub-ring .track,.sec-paper .hub-ring .track{stroke:var(--t4);opacity:1}
.sec-white .hub-ring .halo,.sec-paper .hub-ring .halo{fill:rgba(89,128,166,.07);stroke:rgba(89,128,166,.22)}

/* the centre: the statement the six channels add up to */
.hub-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:43%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;padding:1.2em;
  background:radial-gradient(120% 120% at 32% 24%,rgba(148,188,227,.30),rgba(89,128,166,.22) 55%,rgba(34,48,63,.30) 100%);
  box-shadow:0 0 60px 14px rgba(89,128,166,.18)}
.sec-white .hub-mid,.sec-paper .hub-mid{
  background:radial-gradient(120% 120% at 32% 24%,#7CA0C2,var(--steel) 52%,#3F5F80 100%);
  box-shadow:0 22px 50px -26px rgba(34,48,63,.7)}
.hub-mid b{display:block;font-size:1.42em;line-height:1.28;letter-spacing:-.03em;color:var(--on-dark)}
.sec-white .hub-mid b,.sec-paper .hub-mid b{color:#fff}

/* a badge with its name under it, centred on the ring */
/* the node box IS the badge, so translate(-50%,-50%) puts the badge dead on
   the ring point. The name hangs off it absolutely, which keeps it out of the
   centring maths: a two-line label can never drag the badge off the line. */
.hub-node{position:absolute;width:3.75em;height:3.75em;transform:translate(-50%,-50%)}
.hub-in{position:relative;display:block;width:100%;height:100%;transform-origin:50% 50%}
.hub-ic{width:3.75em;height:3.75em;border-radius:50%;display:grid;place-items:center;
  background:var(--deep);border:1.5px solid var(--t5);
  box-shadow:0 0 0 6px rgba(34,48,63,.55);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.sec-white .hub-ic,.sec-paper .hub-ic{background:var(--white);border-color:var(--t4);
  box-shadow:0 0 0 6px var(--paper),0 10px 24px -16px rgba(34,48,63,.5)}
.hub-ic svg{width:1.7em;height:1.7em;fill:none;stroke:var(--t3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sec-white .hub-ic svg,.sec-paper .hub-ic svg{stroke:var(--t6)}
.hub-node b{position:absolute;top:calc(100% + .6em);left:50%;transform:translateX(-50%);width:8.4em;
  font-size:1.02em;font-weight:700;letter-spacing:-.01em;color:var(--on-dark-78);
  text-align:center;line-height:1.25;transition:color .25s var(--ease)}
.sec-white .hub-node b,.sec-paper .hub-node b{color:var(--ink-76)}
.hub-node:hover .hub-ic{border-color:var(--t3);transform:translateY(-2px)}
.hub-node:hover b{color:var(--on-dark)}
.sec-white .hub-node:hover b,.sec-paper .hub-node:hover b{color:var(--ink)}

/* two columns only while the ring has room to stay legible beside the copy */

/* --- the loop: the wheel turns one channel at a time, and whatever stops
   at twelve o'clock is the one in focus. One full turn shows all six, then
   it starts again. The six arcs are six-fold symmetric, so they stay put
   while the badges move and the gaps still line up. --- */
.hub{--hub-cycle:18s}
.hub-orbit{position:absolute;inset:0;
  animation:hubwheel var(--hub-cycle) cubic-bezier(.66,0,.34,1) infinite}
/* each badge and label turns back on itself by the same amount, so the wheel
   rotates but nothing ends up on its side */
.hub-in{animation:hubcounter var(--hub-cycle) cubic-bezier(.66,0,.34,1) infinite}

@keyframes hubwheel{
  0%,10%       {transform:rotate(0deg)}
  16.67%,26.67%{transform:rotate(-60deg)}
  33.33%,43.33%{transform:rotate(-120deg)}
  50%,60%      {transform:rotate(-180deg)}
  66.67%,76.67%{transform:rotate(-240deg)}
  83.33%,93.33%{transform:rotate(-300deg)}
  100%         {transform:rotate(-360deg)}
}
@keyframes hubcounter{
  0%,10%       {rotate:0deg}
  16.67%,26.67%{rotate:60deg}
  33.33%,43.33%{rotate:120deg}
  50%,60%      {rotate:180deg}
  66.67%,76.67%{rotate:240deg}
  83.33%,93.33%{rotate:300deg}
  100%         {rotate:360deg}
}

/* the focus runs on its own track, offset by one sixth per channel, so it
   fires exactly while that channel is the one standing at the top */
.hub-node:nth-child(1){--d:0s}
.hub-node:nth-child(2){--d:3s}
.hub-node:nth-child(3){--d:6s}
.hub-node:nth-child(4){--d:9s}
.hub-node:nth-child(5){--d:12s}
.hub-node:nth-child(6){--d:15s}
.hub-node .hub-ic{animation:hubic var(--hub-cycle) var(--ease) infinite var(--d)}
.hub-node .hub-ic svg{animation:hubicon var(--hub-cycle) var(--ease) infinite;animation-delay:var(--d)}
.hub-node b{animation:hublbl var(--hub-cycle) var(--ease) infinite var(--d)}

@keyframes hubic{
  0%     {transform:scale(1);border-color:var(--t5);
          box-shadow:0 0 0 6px rgba(34,48,63,.55)}
  2.5%   {transform:scale(1.12);border-color:var(--t3);
          box-shadow:0 0 0 6px rgba(34,48,63,.55),0 0 34px 7px rgba(148,188,227,.38)}
  10%    {transform:scale(1.12);border-color:var(--t3);
          box-shadow:0 0 0 6px rgba(34,48,63,.55),0 0 34px 7px rgba(148,188,227,.38)}
  14%,100%{transform:scale(1);border-color:var(--t5);
          box-shadow:0 0 0 6px rgba(34,48,63,.55)}
}
@keyframes hubicon{
  0%      {stroke:var(--t3)}
  2.5%,10%{stroke:#EEF6FF}
  14%,100%{stroke:var(--t3)}
}
@keyframes hublbl{
  0%      {color:var(--on-dark-78);letter-spacing:-.01em}
  2.5%,10%{color:#fff;letter-spacing:.02em}
  14%,100%{color:var(--on-dark-78);letter-spacing:-.01em}
}

/* the wheel holds still while a channel is under the cursor */
.hub:hover .hub-orbit,.hub:hover .hub-in,.hub:hover .hub-ic,.hub:hover .hub-ic svg,.hub:hover b{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .hub-orbit,.hub-in,.hub-node .hub-ic,.hub-node .hub-ic svg,.hub-node b{animation:none}
}

@media (max-width:1080px){
  .hero-split.hero-hub{grid-template-columns:1fr;gap:46px}
  .hero-hub .hero-copy{max-width:640px}
  .hub{max-width:440px}
}
@media (max-width:560px){
  .hub{max-width:340px}
  .hub-mid{width:45%}
}

/* ---- cards that carry a link to the page behind them ---- */
.icard-link{display:flex;flex-direction:column}
.icard-link .txt-link{margin-top:auto;padding-top:18px;font-size:13.5px}
.icard-wide{grid-column:1 / -1}
.icard-wide p{max-width:74ch}

/* ---- the six reasons: title only, as supplied ---- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

@media (max-width:900px){
  .reasons{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .reasons{grid-template-columns:1fr}
}

/* ============================================================
   HOME - PLATFORM AND SERVICES, GROUPED AS THE MENU GROUPS THEM
   Nine entries in three named groups, so the section reads as the
   shape of the offer rather than nine equal cards.
   ============================================================ */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.pcol{display:grid;gap:20px}
.pgroup{background:var(--paper);border:1px solid transparent;border-radius:var(--r-card);padding:24px 22px}
.sec-paper .pgroup{background:var(--white);border-color:var(--line)}
.sec-dark .pgroup,.sec-dark-alt .pgroup{background:var(--dark-fill);border-color:var(--dark-line)}
.pgroup-t{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t6);margin:0 0 4px}
.sec-dark .pgroup-t,.sec-dark-alt .pgroup-t{color:var(--t3)}
.pgroup-s{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink-45);margin:10px 0 2px}
.sec-dark .pgroup-s,.sec-dark-alt .pgroup-s{color:var(--on-dark-40)}

.prow{display:grid;grid-template-columns:38px 1fr 14px;align-items:center;gap:14px;
  padding:14px 12px;margin:0 -12px;border-radius:10px;text-decoration:none;
  transition:background .2s var(--ease)}
.prow:hover{background:var(--white)}
.sec-paper .prow:hover{background:var(--paper)}
.sec-dark .prow:hover,.sec-dark-alt .prow:hover{background:rgba(255,255,255,.05)}
/* the layer that sits under the three engagement entries is set apart by a rule,
   the way the menu separates it */
.prow-sep{margin-top:8px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:18px}
.sec-dark .prow-sep,.sec-dark-alt .prow-sep{border-top-color:var(--dark-line)}
.prow .ic{width:38px;height:38px;border-radius:9px;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center}
.sec-paper .prow .ic{background:var(--paper)}
.sec-dark .prow .ic,.sec-dark-alt .prow .ic{background:rgba(255,255,255,.05);border-color:var(--dark-line)}
.prow .ic svg{width:18px;height:18px;fill:none;stroke:var(--t6);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sec-dark .prow .ic svg,.sec-dark-alt .prow .ic svg{stroke:var(--t3)}
.prow .tx b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.prow .tx span{display:block;font-size:13px;line-height:1.45;color:var(--ink-62);margin-top:3px}
.sec-dark .prow .tx b,.sec-dark-alt .prow .tx b{color:var(--on-dark)}
.sec-dark .prow .tx span,.sec-dark-alt .prow .tx span{color:var(--on-dark-60)}
.prow .go{fill:none;stroke:var(--ink-45);stroke-width:2;opacity:0;transform:translateX(-4px);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.prow:hover .go{opacity:1;transform:translateX(0);stroke:var(--t6)}
.sec-dark .prow:hover .go,.sec-dark-alt .prow:hover .go{stroke:var(--t3)}

@media (max-width:860px){
  .pgrid{grid-template-columns:1fr}
}

/* ============================================================
   HOME - THE QUOTE SLIDER
   Three cards on screen, moving one at a time. The track is
   duplicated at the end so the loop never has to rewind.
   ============================================================ */
.qslider{position:relative}
.qs-view{overflow:hidden;margin:0 -4px;padding:4px}
.qs-track{display:flex;gap:18px;will-change:transform;
  transition:transform .62s cubic-bezier(.66,0,.34,1)}
.qs-track.no-anim{transition:none}
.qs-track>.say{flex:0 0 calc((100% - 36px) / 3);min-width:0}
/* cards in the same view line up: the name sits at the foot of each card */
.qs-track>.say q{flex:1 1 auto}

.qs-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.qs-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.qs-arrow svg{width:17px;height:17px;fill:none;stroke:var(--ink-62);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.qs-arrow:hover{border-color:var(--t4);background:var(--paper)}
.qs-arrow:hover svg{stroke:var(--t6)}
.sec-dark .qs-arrow,.sec-dark-alt .qs-arrow{background:var(--dark-fill);border-color:var(--dark-line)}
.sec-dark .qs-arrow svg,.sec-dark-alt .qs-arrow svg{stroke:var(--on-dark-60)}

.qs-dots{display:flex;align-items:center;gap:9px}
.qs-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .25s var(--ease),width .25s var(--ease)}
.qs-dot.on{width:22px;border-radius:4px;background:var(--t6)}
.sec-dark .qs-dot,.sec-dark-alt .qs-dot{background:var(--dark-line)}
.sec-dark .qs-dot.on,.sec-dark-alt .qs-dot.on{background:var(--t3)}

@media (max-width:1000px){
  .qs-track>.say{flex:0 0 calc((100% - 18px) / 2)}
}
@media (max-width:680px){
  .qs-track>.say{flex:0 0 100%}
}

/* ============================================================
   HOME - THE GAP, IN THREE ACTS
   The three points are the argument the whole site rests on, so
   each one gets its own band and its own device: the pace of
   release, the workflows walking out, and the way back. The third
   act flips to a lighter panel because the copy turns there.
   ============================================================ */
.gapsec .h-lg{margin-bottom:8px}
.gap-acts{display:grid;gap:22px;margin-top:44px}
.gap-act{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.4vw,54px);
  align-items:center;background:var(--dark-fill);border:1px solid var(--dark-line);
  border-radius:var(--r-card);padding:clamp(26px,3vw,42px)}
.gap-copy{position:relative}
.gap-num{display:block;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--t3);margin-bottom:16px}
.gap-pull{font-size:clamp(19px,1.75vw,25px);line-height:1.32;letter-spacing:-.028em;
  color:var(--on-dark);font-weight:700;margin:0 0 14px}
.gap-pull em{font-style:normal;color:var(--t3)}
.gap-body{font-size:15px;line-height:1.62;color:var(--on-dark-60);margin:0}
.gap-viz{min-width:0}

/* ---- 01 · release cadence: many ticks against two ---- */
.pace{display:grid;gap:16px}
.pace-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr) auto;gap:16px;align-items:center}
.pace-who{font-size:13px;font-weight:700;color:var(--on-dark-78);letter-spacing:-.01em}
.pace-track{position:relative;display:flex;align-items:center;justify-content:space-between;
  height:38px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid var(--dark-line);overflow:hidden}
.pace-track i{width:2px;height:14px;border-radius:1px;background:var(--t5);flex:none}
.pace-track.fast i{background:var(--t3);height:18px}
.pace-run{position:absolute;top:0;bottom:0;width:64px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(148,188,227,.22),transparent)}
.pace-track.fast .pace-run{animation:pacerun 2.6s linear infinite}
.pace-track.slow{justify-content:space-around}
.pace-track.slow .pace-run{animation:pacerun 9s linear infinite}
@keyframes pacerun{from{transform:translateX(-70px)}to{transform:translateX(760px)}}
.pace-chip{font-size:12px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  padding:7px 11px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--on-dark-60);
  border:1px solid var(--dark-line)}
.pace-chip.on{background:rgba(115,150,184,.2);color:var(--on-dark);border-color:rgba(148,188,227,.4)}
.pace-foot{display:flex;align-items:center;gap:16px;margin-top:6px;padding-top:20px;
  border-top:1px solid var(--dark-line)}
.pace-stat{font-size:clamp(34px,3.4vw,46px);font-weight:800;letter-spacing:-.05em;color:var(--t3);line-height:1}
.pace-note{font-size:13px;line-height:1.45;color:var(--on-dark-60)}
.pace-note .src{font-size:11.5px;color:var(--on-dark-40)}

/* ---- 02 · the workflows walking out ---- */
.leak{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,1.6vw,22px);align-items:center}
.leak-side{display:grid;gap:8px;justify-items:stretch}
.leak-label{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-40);margin-bottom:2px}
.leak-box{width:clamp(58px,7vw,86px);height:clamp(96px,11vw,132px);border-radius:10px;
  border:1px solid rgba(148,188,227,.45);background:linear-gradient(180deg,rgba(115,150,184,.22),rgba(115,150,184,.06));
  display:grid;align-content:start;gap:7px;padding:12px 10px}
.leak-box i{display:block;height:5px;border-radius:3px;background:rgba(214,235,255,.34)}
.leak-box i:first-child{background:rgba(214,235,255,.6)}
.leak-box i:nth-child(3){width:70%}
.leak-box i:nth-child(4){width:45%}
.leak-dest{font-size:12.5px;font-weight:700;color:var(--on-dark-78);padding:9px 12px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px dashed var(--dark-line);white-space:nowrap}
.leak-flows{display:grid;gap:10px}
.leak-flow{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;color:var(--on-dark-78);
  padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--dark-line)}
.leak-flow span{min-width:0;overflow-wrap:break-word}
/* the arrow keeps drifting out of the box: the point is that this is ongoing */
.leak-arw{position:relative;height:9px}
.leak-arw::before,.leak-arw::after{content:"";position:absolute;top:3px;left:0;width:16px;height:1.5px;
  background:linear-gradient(90deg,rgba(148,188,227,0),var(--t3));animation:leakout 2.8s linear infinite}
.leak-arw::after{animation-delay:1.4s}
.leak-flow:nth-child(2) .leak-arw::before{animation-delay:.5s}
.leak-flow:nth-child(2) .leak-arw::after{animation-delay:1.9s}
.leak-flow:nth-child(3) .leak-arw::before{animation-delay:1s}
.leak-flow:nth-child(3) .leak-arw::after{animation-delay:2.4s}
@keyframes leakout{
  0%  {transform:translateX(0);opacity:0}
  20% {opacity:1}
  80% {opacity:1}
  100%{transform:translateX(16px);opacity:0}
}

/* ---- 03 · the way back up ---- */
.gap-act-up{background:linear-gradient(120deg,rgba(115,150,184,.26),rgba(115,150,184,.10) 62%,rgba(255,255,255,.03));
  border-color:rgba(148,188,227,.34)}
.gap-act-up .gap-body{color:var(--on-dark-78)}
.climb{position:relative;aspect-ratio:520/210;min-height:190px}
.climb-line{position:absolute;inset:0;width:100%;height:100%}
.climb-line path{fill:none;stroke:var(--t3);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:640;stroke-dashoffset:640;animation:climbdraw 2.6s cubic-bezier(.5,0,.2,1) infinite}
@keyframes climbdraw{
  0%  {stroke-dashoffset:640}
  45% {stroke-dashoffset:0}
  85% {stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
.climb-step,.climb-goal{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:12px;font-weight:700;letter-spacing:-.01em;padding:8px 12px;border-radius:7px;
  background:var(--deep);border:1px solid var(--dark-line);color:var(--on-dark-78)}
.climb-step.s1{left:14%;top:88%}
.climb-step.s2{left:33%;top:72%}
.climb-step.s3{left:55%;top:53%}
.climb-step.s4{left:76%;top:31%}
.climb-goal{left:84%;top:10%;background:var(--t3);border-color:var(--t3);color:var(--deep);font-weight:800}

@media (max-width:1000px){
  .gap-act{grid-template-columns:1fr;gap:30px}
  .pace-row{grid-template-columns:1fr;gap:8px}
  .pace-chip{justify-self:start}
  .climb-step,.climb-goal{font-size:11px;padding:6px 9px}
}
@media (max-width:620px){
  .leak{grid-template-columns:1fr;gap:14px}
  .leak-box{width:100%;height:54px}
  .leak-flow{grid-template-columns:minmax(0,1fr) 30px}
  .climb{aspect-ratio:auto;min-height:0;display:grid;gap:8px}
  .climb-line{display:none}
  .climb-step,.climb-goal{position:static;transform:none;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .pace-run,.leak-arw::before,.leak-arw::after,.climb-line path{animation:none}
  .climb-line path{stroke-dashoffset:0}
  .leak-arw::before{opacity:1;transform:translateX(8px)}
  .leak-arw::after{display:none}
}

/* ---- a labelled group inside a section, the way the menu groups them ---- */
.grp-label{display:flex;align-items:center;gap:14px;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin-bottom:16px}
.grp-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-dark .grp-label,.sec-dark-alt .grp-label{color:var(--on-dark-40)}
.sec-dark .grp-label::after,.sec-dark-alt .grp-label::after{background:var(--dark-line)}

/* ============================================================
   HOME - THE INDEX
   One component for both Solutions and Products & services, so the
   two read as a pair. A sticky brief on the left, a numbered index
   on the right. Rows rather than cards: nine items in cards is a
   wall, nine items in an index is a list you can actually scan.
   ============================================================ */
.idxwrap{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.idx-aside{position:sticky;top:120px}
.idx-aside h2{font-size:clamp(26px,3vw,37px);letter-spacing:-.04em;line-height:1.08;margin:0}
.idx-rule{width:54px;height:2px;background:var(--t4);margin:22px 0 20px}
.sec-dark .idx-rule,.sec-dark-alt .idx-rule{background:var(--t5)}
.idx-group{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);margin:34px 0 6px}
.idx-group:first-child{margin-top:0}
.idx-group::after{content:"";flex:1;height:1px;background:var(--line)}
.idx-sub{font-size:12.5px;font-weight:700;color:var(--ink-62);margin:8px 0 2px}
.sec-dark .idx-group,.sec-dark-alt .idx-group{color:var(--on-dark-40)}
.sec-dark .idx-group::after,.sec-dark-alt .idx-group::after{background:var(--dark-line)}

/* the row: number, mark, text, arrow. The accent bar on the left grows on
   hover, which is what makes a list of nine feel navigable instead of flat */
.idx-row{position:relative;display:grid;grid-template-columns:44px 44px minmax(0,1fr) 24px;
  align-items:center;gap:18px;padding:20px 18px 20px 14px;border-radius:12px;
  text-decoration:none;border-bottom:1px solid var(--line);
  transition:background .24s var(--ease),transform .24s var(--ease)}
.sec-dark .idx-row,.sec-dark-alt .idx-row{border-bottom-color:var(--dark-line)}
.idx-row::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--t4);transform:scaleY(0);transform-origin:center;
  transition:transform .28s var(--ease)}
.idx-row:hover{background:var(--white);transform:translateX(3px)}
.sec-white .idx-row:hover{background:var(--paper)}
.sec-dark .idx-row:hover,.sec-dark-alt .idx-row:hover{background:rgba(255,255,255,.05)}
.idx-row:hover::before{transform:scaleY(1)}

.idx-n{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--ink-45);
  transition:color .24s var(--ease)}
.idx-row:hover .idx-n{color:var(--t6)}
.sec-dark .idx-n,.sec-dark-alt .idx-n{color:var(--on-dark-40)}

.idx-ic{width:44px;height:44px;border-radius:11px;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background .24s var(--ease),border-color .24s var(--ease)}
.sec-white .idx-ic{background:var(--paper)}
.sec-dark .idx-ic,.sec-dark-alt .idx-ic{background:rgba(255,255,255,.05);border-color:var(--dark-line)}
.idx-ic svg{width:20px;height:20px;fill:none;stroke:var(--t6);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .24s var(--ease)}
.idx-row:hover .idx-ic{background:var(--t1);border-color:var(--t4)}
.sec-dark .idx-row:hover .idx-ic,.sec-dark-alt .idx-row:hover .idx-ic{background:rgba(115,150,184,.2)}
.sec-dark .idx-ic svg,.sec-dark-alt .idx-ic svg{stroke:var(--t3)}

.idx-tx{min-width:0}
.idx-tx b{display:block;font-size:17px;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.3}
.idx-tx span{display:block;font-size:14px;line-height:1.55;color:var(--ink-62);margin-top:5px;max-width:62ch}
.sec-dark .idx-tx b,.sec-dark-alt .idx-tx b{color:var(--on-dark)}
.sec-dark .idx-tx span,.sec-dark-alt .idx-tx span{color:var(--on-dark-60)}

.idx-go{justify-self:end;display:grid;place-items:center;opacity:.32;
  transition:opacity .24s var(--ease),transform .24s var(--ease)}
.idx-go svg{fill:none;stroke:var(--ink);stroke-width:2}
.sec-dark .idx-go svg,.sec-dark-alt .idx-go svg{stroke:var(--on-dark)}
.idx-row:hover .idx-go{opacity:1;transform:translateX(4px)}
.idx-row:hover .idx-go svg{stroke:var(--t6)}
.sec-dark .idx-row:hover .idx-go svg,.sec-dark-alt .idx-row:hover .idx-go svg{stroke:var(--t3)}

@media (max-width:980px){
  .idxwrap{grid-template-columns:1fr;gap:34px}
  .idx-aside{position:static}
}
@media (max-width:560px){
  /* the number reads better level with the title than floating beside a
     five-line description */
  .idx-row{grid-template-columns:36px minmax(0,1fr) 20px;gap:12px;padding:18px 10px 18px 12px;
    align-items:start}
  .idx-n,.idx-go{padding-top:3px}
  .idx-ic{display:none}
  .idx-tx b{font-size:16px}
}

/* ---- FX: four channel exhibits, each given the room it needs ---- */
.exhibits{display:grid;gap:54px}
.shot-wide{margin:0}
.shot-wide .phones{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;justify-items:center}
.shot-wide .phones .phone-fig{margin:0}
.ph.is-tagged{position:relative}
.ph-tagchip{position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--t3);color:var(--deep);font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:4px;white-space:nowrap}
@media (max-width:760px){
  .shot-wide .phones{grid-template-columns:1fr;gap:44px}
}

/* ---- FX: the three propositions, each broken into the four layers ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:0;margin-top:26px}
/* the four layers carry different amounts of detail per tier, so the rows are
   shared across the three cards and every layer label starts on one line */
@supports (grid-template-rows:subgrid){
  .tiers{grid-template-rows:repeat(10,auto)}
  .tier{display:grid;grid-row:span 10;grid-template-rows:subgrid}
}
.tier{border-radius:var(--r-card);padding:28px 24px 26px;border:1px solid transparent}
.tier .n{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.tier h3{font-size:19px;letter-spacing:-.03em;line-height:1.25;margin:0 0 6px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.tier-k{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-45);margin:20px 0 10px;align-self:end}
/* a shorter list must sit at the top of its shared row, not spread through it */
.tier ul{display:grid;gap:9px;align-content:start}
.tier li{font-size:13.5px;line-height:1.5;color:var(--ink-76);padding-left:15px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--t4)}
/* the three tones carry the ladder, lightest at the entry level */
.tier.t1{background:var(--white);border-color:var(--line)}
.tier.t2{background:var(--t1)}
.tier.t3{background:var(--t2)}
.tier.t2 h3,.tier.t3 h3{border-bottom-color:rgba(89,128,166,.28)}
.tier.t1 .n{color:var(--t6)}
.tier.t2 .n,.tier.t3 .n{color:#2C455D}
.tier.t2 li::before,.tier.t3 li::before{background:var(--t6)}
.tier.t2 li,.tier.t3 li{color:var(--ink-86)}

@media (max-width:1000px){
  .tiers{grid-template-columns:1fr;row-gap:16px}
  @supports (grid-template-rows:subgrid){
    .tiers{grid-template-rows:none}
    .tier{display:block;grid-row:auto}
  }
}

/* a hero headline whose accent clause belongs on its own line */
.h-hero.hero-break .accent{display:block}

/* ============================================================
   THE TWO SIDES OF THE SAME PROBLEM
   A pair of lists reads as one grey block, and the label above each
   one disappears. Each side gets a filled header in its own tone, so
   the two are told apart at a glance, and the points are numbered so
   the eye has something to hold on to.
   ============================================================ */
.sides{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}
/* both cards run to the same height, and the spare room is shared out between
   the points rather than left as a gap under the shorter list */
.side{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column}
.sec-white .side{background:var(--paper);border-color:transparent}
.sec-dark .side,.sec-dark-alt .side{background:var(--dark-fill);border-color:var(--dark-line)}

.side-h{flex:none;display:flex;align-items:center;gap:16px;min-height:88px;padding:22px 26px;
  background:linear-gradient(115deg,var(--t6),#2C455D)}
.side-b .side-h{background:linear-gradient(115deg,#42607F,var(--deep))}
.side-ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.side-ic svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.side-h h3{margin:0;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.03em;line-height:1.25;color:#fff}

.side-list{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:8px 26px 22px}
.side-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.58;color:var(--ink-76)}
.side-list li:last-child{border-bottom:0;padding-bottom:4px}
.sec-dark .side-list li,.sec-dark-alt .side-list li{border-bottom-color:var(--dark-line);color:var(--on-dark-60)}
.side-n{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--t6);
  padding-top:3px;font-variant-numeric:tabular-nums}
.sec-dark .side-n,.sec-dark-alt .side-n{color:var(--t3)}
.side-b .side-n{color:#42607F}
.sec-dark .side-b .side-n,.sec-dark-alt .side-b .side-n{color:var(--t4)}

@media (max-width:860px){
  .sides{grid-template-columns:1fr}
}
@media (max-width:520px){
  .side-h{min-height:76px;padding:18px 20px;gap:13px}
  .side-list{padding:6px 20px 18px}
  .side-list li{grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:14px}
}


/* ============================================================
   WHAT THE CLIENT GETS
   Deliberately not the two-header cards used for the challenge: these
   are capabilities, not two sides of a problem. Each group runs the
   full width, with the heading held on the left and the points laid
   out as tiles, so a six-point list and a four-point list can sit
   under each other without one looking short.
   ============================================================ */
.capgrp{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);
  gap:clamp(26px,3.6vw,64px);align-items:start;padding:clamp(30px,3.4vw,46px) 0;
  border-top:1px solid var(--line)}
.capgrp:first-of-type{border-top:0;padding-top:8px}
.sec-dark .capgrp,.sec-dark-alt .capgrp{border-top-color:var(--dark-line)}

.capgrp-h{position:relative;position:sticky;top:120px}
/* the number sits beside the mark on one line: behind it, it read as a
   watermark the icon was covering up */
.capgrp-top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.capgrp-mark{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--t4)}
.sec-dark .capgrp-mark,.sec-dark-alt .capgrp-mark{color:var(--t5)}
.capgrp-ic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(125deg,var(--t6),#2C455D)}
.capgrp-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.capgrp-h h3{position:relative;z-index:1;margin:0;font-size:clamp(22px,2.3vw,30px);
  letter-spacing:-.035em;line-height:1.16;color:var(--ink)}
.sec-dark .capgrp-h h3,.sec-dark-alt .capgrp-h h3{color:var(--on-dark)}

.captiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.captile{position:relative;background:var(--paper);border-radius:12px;padding:20px 20px 20px 22px;
  overflow:hidden;transition:transform .24s var(--ease),background .24s var(--ease)}
.sec-paper .captile{background:var(--white)}
.sec-dark .captile,.sec-dark-alt .captile{background:var(--dark-fill)}
.captile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--t4),var(--t6));opacity:.5;
  transition:opacity .24s var(--ease)}
.captile:hover{transform:translateY(-2px)}
.captile:hover::before{opacity:1}
.captile-n{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--t6);margin-bottom:9px}
.sec-dark .captile-n,.sec-dark-alt .captile-n{color:var(--t3)}
.captile p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-76)}
.sec-dark .captile p,.sec-dark-alt .captile p{color:var(--on-dark-60)}

@media (max-width:980px){
  .capgrp{grid-template-columns:1fr;gap:26px}
  .capgrp-h{position:static}
}
@media (max-width:620px){
  .captiles{grid-template-columns:1fr}
}

/* ============================================================
   FX INTERFACE MOCKUPS
   Markup, not screenshots, so they stay sharp at any size. One fixed
   bank identity, no colour switching. Sized in em off a container
   query, so a screen scales as a whole instead of reflowing into a
   layout nobody designed.
   ============================================================ */
.uiwrap{container-type:inline-size}
.ui{
  --acc:#3F6084; --acc-2:#25405A; --acc-3:#7E9DBC; --acc-soft:#EDF2F7;
  --ink:#101821; --mid:#5A6572; --soft:#98A2AE;
  --line:rgba(16,24,33,.10); --line-2:rgba(16,24,33,.06);
  --surf:#F6F8FA; --white:#fff; --pos:#2F7D64; --neg:#B4515F;
  font-size:11px; font-size:clamp(6.5px,.83cqw,11px);
  color:var(--ink);line-height:1.4;letter-spacing:-.012em}
.ui *{box-sizing:border-box}
.ui b{font-weight:700}
.ui .num{font-variant-numeric:tabular-nums;letter-spacing:-.025em}

/* ---- window chrome: layered shadow plus a soft glow underneath ---- */
.uiwin{position:relative;background:var(--white);border-radius:1.5em;overflow:hidden;
  box-shadow:0 .1em .2em rgba(16,24,33,.06),
             0 2.4em 3.4em -1.6em rgba(16,24,33,.28),
             0 5em 9em -3em rgba(16,24,33,.5),
             inset 0 0 0 1px rgba(255,255,255,.6)}
.uiglow{position:relative}
.uiglow::before{content:"";position:absolute;left:10%;right:10%;top:20%;bottom:-4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,96,132,.32),rgba(63,96,132,0) 72%);
  filter:blur(34px);z-index:0;pointer-events:none}
.uiglow>*{position:relative;z-index:1}

.ui-top{display:flex;align-items:center;gap:1.1em;padding:1.05em 1.5em;
  border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.9)}
.ui-logo{display:flex;align-items:center;gap:.62em;font-weight:800;font-size:1.15em;letter-spacing:-.04em}
.ui-logo i{width:2em;height:2em;border-radius:.65em;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acc-3),var(--acc) 45%,var(--acc-2));color:#fff;font-size:.88em;
  font-style:normal;font-weight:800;box-shadow:0 .3em .7em -.2em rgba(37,64,90,.55)}
.ui-nav{display:flex;gap:1.6em;margin-left:1.8em;min-width:0;overflow:hidden}
.ui-nav span{position:relative;font-size:.95em;font-weight:600;color:var(--mid);white-space:nowrap;padding-bottom:.3em}
.ui-nav .on{color:var(--ink);font-weight:700}
.ui-nav .on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.16em;border-radius:.1em;
  background:linear-gradient(90deg,var(--acc),var(--acc-3))}
.ui-sp{margin-left:auto}
.ui-ava{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;font-size:.85em;font-weight:800;
  color:#fff;background:linear-gradient(140deg,#6F8FB0,#25405A)}
.ui-round{position:relative;width:2.1em;height:2.1em;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--white)}
.ui-round svg{width:1.05em;height:1.05em;fill:none;stroke:var(--mid);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ui-round.dot::after{content:"";position:absolute;top:.05em;right:.05em;width:.55em;height:.55em;border-radius:50%;
  background:#B4515F;box-shadow:0 0 0 .14em #fff}

/* ---- page head ---- */
.ui-page{display:flex;align-items:flex-end;gap:1em;padding:1.5em 1.5em 1.1em}
.ui-h1{font-size:1.75em;font-weight:800;letter-spacing:-.05em;line-height:1.05}
.ui-crumb{font-size:.82em;font-weight:600;color:var(--soft);margin-bottom:.35em;letter-spacing:.02em}
.ui-btn{font-size:.95em;font-weight:700;padding:.75em 1.15em;border-radius:.7em;white-space:nowrap;
  color:#fff;background:linear-gradient(140deg,var(--acc),var(--acc-2));
  box-shadow:0 .5em 1.1em -.4em rgba(37,64,90,.6)}
.ui-btn.ghost{background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.ui-btn.wide{display:block;text-align:center;padding:.9em}

/* ---- cards ---- */
.ui-grid{display:grid;gap:1em;padding:0 1.5em 1.5em}
.ui-card{background:var(--white);border:1px solid var(--line);border-radius:1.1em;padding:1.2em 1.3em;
  box-shadow:0 .5em 1.4em -1em rgba(16,24,33,.18)}
.ui-card.flat{background:var(--surf);border-color:transparent;box-shadow:none}
.ui-ch{display:flex;align-items:center;gap:.55em;margin-bottom:1em}
.ui-ch b{font-size:1.08em;letter-spacing:-.03em}
.ui-ch .tag{margin-left:auto;font-size:.78em;font-weight:700;color:var(--mid);
  background:var(--surf);padding:.35em .6em;border-radius:.45em;white-space:nowrap}
.ui-lbl{font-size:.75em;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.ui-live{display:inline-flex;align-items:center;gap:.4em;font-size:.78em;font-weight:800;color:var(--pos);
  background:rgba(47,125,100,.1);padding:.32em .6em;border-radius:.45em;white-space:nowrap}
.ui-live i{width:.42em;height:.42em;border-radius:50%;background:var(--pos)}

/* ---- rate tiles ---- */
.ui-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.ui-rate{position:relative;overflow:hidden;border-radius:1.1em;padding:1.05em 1.2em;
  background:linear-gradient(160deg,var(--white),#FAFBFC);
  border:1px solid var(--line);box-shadow:0 .5em 1.4em -1em rgba(16,24,33,.18)}
.ui-rate .top{display:flex;align-items:center;gap:.55em;margin-bottom:.5em}
.ui-rate .ccy{display:flex;flex:none}
.ui-rate .ccy i{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.8em;font-weight:800;background:var(--acc-soft);color:var(--acc-2);box-shadow:0 0 0 1.5px #fff}
.ui-rate .ccy i+i{margin-left:-.55em;background:#EDF0F3;color:var(--mid)}
.ui-rate .pair{font-size:.88em;font-weight:700;color:var(--mid);letter-spacing:0}
.ui-rate .val{font-size:1.7em;font-weight:800;line-height:1.1}
.ui-rate .chg{display:inline-block;font-size:.78em;font-weight:800;margin-top:.4em;
  padding:.28em .55em;border-radius:.45em;background:rgba(47,125,100,.1);color:var(--pos)}
.ui-rate .chg.dn{background:rgba(180,81,95,.09);color:var(--neg)}
.ui-spark{position:absolute;right:0;bottom:0;width:54%;height:58%}
.ui-spark svg{width:100%;height:100%;display:block}
.ui-spark .ln{fill:none;stroke:var(--acc);stroke-width:1.9;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.ui-spark.dn .ln{stroke:var(--neg)}

/* ---- chart ---- */
.ui-chart{position:relative;height:11.5em;margin:.1em 0 .2em}
.ui-chart svg{width:100%;height:100%;display:block}
.ui-chart .grid{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 5}
.ui-chart .line{fill:none;stroke:var(--acc);stroke-width:2.2;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.ui-chart .knob{fill:#fff;stroke:var(--acc);stroke-width:2.4;vector-effect:non-scaling-stroke}
.ui-chart .rule{stroke:var(--acc);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;opacity:.45}
.ui-tip{position:absolute;top:6%;right:16%;background:var(--ink);color:#fff;font-size:.78em;font-weight:800;
  padding:.42em .65em;border-radius:.5em;white-space:nowrap;box-shadow:0 .6em 1.2em -.5em rgba(16,24,33,.6)}
.ui-tip span{opacity:.6;font-weight:600;margin-right:.45em}
.ui-pills{display:flex;gap:.3em;margin-left:auto}
.ui-pills span{font-size:.78em;font-weight:800;color:var(--soft);padding:.35em .6em;border-radius:.5em}
.ui-pills .on{background:var(--ink);color:#fff}
.ui-xaxis{display:flex;justify-content:space-between;font-size:.75em;font-weight:700;color:var(--soft);margin-top:.55em}

/* ---- trade ticket ---- */
.ui-seg{display:flex;background:var(--surf);border-radius:.8em;padding:.28em;gap:.28em;margin-bottom:1em}
.ui-seg span{flex:1;text-align:center;font-size:.95em;font-weight:700;color:var(--mid);padding:.6em;border-radius:.6em}
.ui-seg .on{background:var(--white);color:var(--ink);box-shadow:0 .2em .6em -.15em rgba(16,24,33,.18)}
.ui-field{border:1px solid var(--line);border-radius:.85em;padding:.8em 1em;margin-bottom:.65em;
  background:linear-gradient(180deg,var(--white),#FCFDFE)}
.ui-field.focus{border-color:var(--acc);box-shadow:0 0 0 .28em rgba(63,96,132,.12)}
.ui-field .k{font-size:.78em;color:var(--soft);font-weight:700}
.ui-field .v{display:flex;align-items:center;gap:.5em;font-size:1.45em;font-weight:800;margin-top:.15em}
.ui-field .v .ccy{margin-left:auto;font-size:.7em;font-weight:800;color:var(--ink);
  background:var(--surf);padding:.4em .7em;border-radius:.55em;display:flex;align-items:center;gap:.4em}
.ui-field .v .ccy svg{width:.85em;height:.85em;fill:none;stroke:var(--mid);stroke-width:2.4}
.ui-swap{display:grid;place-items:center;margin:-.6em 0 .25em;position:relative;z-index:2}
.ui-swap i{width:2.1em;height:2.1em;border-radius:50%;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:0 .3em .8em -.3em rgba(16,24,33,.3)}
.ui-swap svg{width:1em;height:1em;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ui-quote{position:relative;overflow:hidden;border-radius:1em;padding:1.05em 1.15em;color:#fff;margin:.5em 0 .85em;
  background:linear-gradient(135deg,var(--acc-3) -10%,var(--acc) 35%,var(--acc-2));
  box-shadow:0 .9em 1.8em -.9em rgba(37,64,90,.75)}
.ui-quote::after{content:"";position:absolute;right:-18%;top:-60%;width:60%;height:180%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0))}
.ui-quote>*{position:relative}
.ui-quote .k{font-size:.76em;opacity:.82;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ui-quote .r{font-size:1.9em;font-weight:800;letter-spacing:-.045em;line-height:1.05}
.ui-quote .row{display:flex;align-items:flex-end;gap:.6em;margin-top:.2em}
.ui-quote .hold{margin-left:auto;font-size:.76em;font-weight:800;background:rgba(255,255,255,.2);
  padding:.35em .6em;border-radius:.45em;white-space:nowrap}
.ui-quote .sub{font-size:.82em;opacity:.9;margin-top:.5em}
.ui-bar{height:.28em;border-radius:.2em;background:rgba(255,255,255,.25);margin-top:.7em;overflow:hidden}
.ui-bar i{display:block;height:100%;width:62%;border-radius:.2em;background:#fff}

/* ---- table ---- */
.ui-tbl{width:100%;border-collapse:collapse}
.ui-tbl th{font-size:.75em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  text-align:left;padding:0 .9em .8em 0;white-space:nowrap}
.ui-tbl td{font-size:.95em;padding:.78em .9em .78em 0;border-top:1px solid var(--line-2);white-space:nowrap}
.ui-tbl td:last-child,.ui-tbl th:last-child{text-align:right;padding-right:0}
.ui-tbl .pair{font-weight:700}
.ui-chip{font-size:.78em;font-weight:800;padding:.32em .6em;border-radius:.45em;background:var(--acc-soft);color:var(--acc-2)}
.ui-chip.g{background:rgba(47,125,100,.1);color:#2A6E58}
.ui-chip.n{background:var(--surf);color:var(--mid)}
.ui-pos{color:var(--pos);font-weight:800}
.ui-neg{color:var(--neg);font-weight:800}

/* ---- portal shell ---- */
.ui-shell{display:grid;grid-template-columns:14em 1fr;min-height:28em}
.ui-side{background:linear-gradient(180deg,#16202B,#0E161E);padding:1.3em 1em;display:grid;align-content:start;gap:.2em}
.ui-side .ui-logo{color:#fff;margin:0 .3em 1.4em}
.ui-side .s{display:flex;align-items:center;gap:.7em;font-size:.95em;font-weight:600;color:#8B98A6;
  padding:.65em .75em;border-radius:.65em}
.ui-side .s svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ui-side .s.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ui-main{background:var(--surf);padding:1.4em 1.5em}
.ui-two{display:grid;grid-template-columns:1.35fr 1fr;gap:1em;align-items:stretch}
.ui-embed{position:relative;border:1.5px solid var(--acc);
  box-shadow:0 0 0 .5em rgba(63,96,132,.1),0 1.2em 2.4em -1.2em rgba(37,64,90,.5)}
.ui-embed .flag{position:absolute;top:-.9em;right:1em;background:linear-gradient(135deg,var(--acc),var(--acc-2));
  color:#fff;font-size:.72em;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.35em .6em;border-radius:.4em;box-shadow:0 .4em .9em -.35em rgba(37,64,90,.8)}

/* ---- phone ---- */
.ui-phone{position:relative;width:100%;max-width:21em;margin-inline:auto;border-radius:3em;padding:.55em;
  background:linear-gradient(160deg,#2A343F,#101821);
  box-shadow:0 .1em .2em rgba(16,24,33,.4),0 3em 5em -2em rgba(16,24,33,.75),
             inset 0 0 0 1px rgba(255,255,255,.1)}
/* a real handset ratio (9:19.5) rather than however tall the content happens
   to run, so the render reads as a device and not as a tall card */
.ui-screen{position:relative;background:var(--white);border-radius:2.35em;overflow:hidden;
  aspect-ratio:9 / 19.5;display:flex;flex-direction:column}
.ui{--pad:1.4em}
.ui-status{flex:none;display:flex;align-items:center;padding:1.1em calc(var(--pad) / .8) .6em;font-size:.8em;
  font-weight:800;color:var(--ink)}
.ui-status .sp{margin-left:auto;display:flex;gap:.22em;align-items:flex-end}
.ui-status .sp i{display:block;width:.26em;border-radius:.1em;background:currentColor}
.ui-status .sp i:nth-child(1){height:.34em}
.ui-status .sp i:nth-child(2){height:.5em}
.ui-status .sp i:nth-child(3){height:.66em}
.ui-status .bat{position:relative;width:1.5em;height:.78em;border-radius:.24em;
  border:1px solid currentColor;margin-left:.4em;opacity:.9}
.ui-status .bat::before{content:"";position:absolute;top:.12em;left:.12em;bottom:.12em;width:62%;
  border-radius:.12em;background:currentColor}
.ui-status.on-acc{color:#fff}

.ui-phead{flex:none;position:relative;overflow:hidden;padding:.45em var(--pad) 1.6em;color:#fff;
  background:linear-gradient(150deg,var(--acc-3) -20%,var(--acc) 40%,var(--acc-2))}
.ui-phead::after{content:"";position:absolute;right:-25%;top:-70%;width:70%;height:200%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(255,255,255,0))}
.ui-phead>*{position:relative}
.ui-phead .k{font-size:.85em;opacity:.85;font-weight:700}
.ui-phead .v{font-size:2em;font-weight:800;letter-spacing:-.05em;margin-top:.1em}
.ui-phead .row{display:flex;gap:.6em;margin-top:1.15em}
.ui-phead .row span{flex:1;display:grid;justify-items:center;gap:.32em;font-size:.8em;font-weight:700;
  background:rgba(255,255,255,.17);padding:.65em .3em;border-radius:.8em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ui-phead .row svg{width:1.1em;height:1.1em;fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

.ui-pbody{flex:1 1 auto;min-height:0;padding:1.2em var(--pad) .9em;display:grid;gap:.75em;align-content:start;min-width:0}
.ui-pbody>*{min-width:0}
.ui-prow{display:flex;align-items:center;gap:.85em;padding:.68em 0;border-top:1px solid var(--line-2);min-width:0}
.ui-prow:first-of-type{border-top:0}
.ui-flag{width:2.2em;height:2.2em;border-radius:.75em;background:var(--surf);display:grid;place-items:center;
  font-size:.85em;font-weight:800;color:var(--mid);flex:none}
.ui-prow .t{min-width:0}
/* names truncate, figures never break: a split amount reads as a bug */
.ui-prow .t b{display:block;font-size:.98em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-prow .t span{display:block;font-size:.82em;color:var(--soft);overflow:hidden;text-overflow:ellipsis}
.ui-prow .r{margin-left:auto;text-align:right}
.ui-prow .r b{display:block;font-size:1.02em;white-space:nowrap}
.ui-prow .r span{display:block;font-size:.78em;font-weight:800;color:var(--pos)}
.ui-prow .r span.dn{color:var(--neg)}

.ui-tabs{flex:none;margin-top:auto;display:flex;border-top:1px solid var(--line-2);padding:.72em 0 1.05em;
  background:rgba(246,248,250,.75)}
.ui-tabs span{flex:1;display:grid;justify-items:center;gap:.3em;font-size:.72em;font-weight:700;color:var(--soft)}
.ui-tabs svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ui-tabs .on{color:var(--acc)}

.ui-inapp{position:relative;border:1.5px solid var(--acc);border-radius:1.1em;padding:1.1em;
  background:linear-gradient(180deg,#FAFBFD,var(--white));
  box-shadow:0 0 0 .45em rgba(63,96,132,.1),0 1em 2em -1em rgba(37,64,90,.45)}
.ui-inapp .flag{position:absolute;top:-.85em;left:1em;background:linear-gradient(135deg,var(--acc),var(--acc-2));
  color:#fff;font-size:.7em;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.32em .55em;border-radius:.4em;box-shadow:0 .4em .9em -.35em rgba(37,64,90,.8)}

/* ---- the exhibit frame ---- */
.exhibits{display:grid;gap:clamp(44px,4.4vw,74px)}
.exhibit{margin:0}
.exhibit figcaption{margin-top:20px;font-size:13.5px;line-height:1.5;color:var(--on-dark-60);max-width:70ch}
.exhibit figcaption b{display:block;color:var(--on-dark);font-size:15px;font-weight:800;
  letter-spacing:-.02em;margin-bottom:3px}
.exhibit-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
/* a phone in a half-width column needs its own scale: the window ratio would
   shrink it to a thumbnail */
.exhibit-pair .ui{font-size:clamp(10px,2.55cqw,15px)}
@media (max-width:760px){
  .exhibit-pair{grid-template-columns:1fr;gap:44px}
  /* a full desktop toolbar cannot fit a phone-width frame; the secondary
     controls step aside instead of spilling past the window edge */
  .ui-nav{display:none}
  .ui-top .ui-live{display:none}
  .ui-page{flex-wrap:wrap}
  /* three rate tiles and a two-column workspace need width; at phone size the
     desktop screens stack the same way the real product would */
  .ui-rates{grid-template-columns:1fr}
  .ui-two{grid-template-columns:1fr}
  .ui-shell{grid-template-columns:1fr}
  .ui-side{display:none}
}

/* ---- the testimonial opens over the page, so the visitor never leaves ---- */
.vbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.vbox[hidden]{display:none}
.vbox-back{position:absolute;inset:0;background:rgba(9,15,22,.72);backdrop-filter:blur(6px);
  animation:vfade .22s var(--ease)}
.vbox-panel{position:relative;width:min(880px,100%);animation:vrise .26s var(--ease)}
.vbox-frame{border-radius:var(--r-card);overflow:hidden;background:#000;
  box-shadow:0 40px 90px -40px rgba(9,15,22,.9)}
.vbox-frame video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.vbox-cap{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--on-dark-78)}
.vbox-x{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);display:grid;place-items:center}
.vbox-x:hover{background:rgba(255,255,255,.2)}
.vbox-x svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
@keyframes vfade{from{opacity:0}to{opacity:1}}
@keyframes vrise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:620px){
  .vbox-x{top:-42px}
}

/* ---- footer: three named columns instead of one row of links ---- */
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 32px}
.foot-h{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-40);margin:0 0 14px}
.foot-cols a{display:block;font-size:14px;font-weight:600;color:var(--on-dark-60);
  padding:5px 0;transition:color .16s var(--ease)}
.foot-cols a:hover{color:#fff}
@media (max-width:760px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:22px 24px}
}
@media (max-width:460px){
  .foot-cols{grid-template-columns:1fr}
}

/* ---- named awards inside a proof card ---- */
.awards{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sec-dark .awards,.sec-dark-alt .awards{border-top-color:var(--dark-line)}
.awards-h{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 12px}
.sec-dark .awards-h,.sec-dark-alt .awards-h{color:var(--on-dark-40)}
.awards li{padding:7px 0}
.awards li b{display:block;font-size:13px;font-weight:800;letter-spacing:-.015em;line-height:1.35}
.awards li span{display:block;font-size:12px;color:var(--ink-62);margin-top:2px}
.sec-dark .awards li span,.sec-dark-alt .awards li span{color:var(--on-dark-60)}

/* ---- a note that closes a section: full width, and the space above and
   below it matched so it does not read as an orphan paragraph ---- */
.leadnote{max-width:none;margin:40px 0;padding-top:36px;border-top:1px solid var(--line)}
.sec-dark .leadnote,.sec-dark-alt .leadnote{border-top-color:var(--dark-line)}
@media (max-width:760px){
  .leadnote{margin:32px 0;padding-top:28px}
}

/* ---- a hero intro that runs the full column ----
   Two columns rather than one long measure: at 1160px a single line would run
   past 140 characters, which is past the point where the eye finds the start
   of the next line reliably. */
.hero-lead-wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px;margin-top:20px}
.hero-lead-wide .lead{max-width:none;margin-top:0}
@media (max-width:900px){
  .hero-lead-wide{grid-template-columns:1fr;gap:16px}
}

/* ---- section intros run the full column ----
   Every paragraph introducing a section used to be capped at 62 characters, so
   it sat as a narrow block under a full-width heading. They now use the whole
   column as one block of prose. A single paragraph split across two columns
   makes the reader go down and back up, so the measure is kept readable by
   setting these a step larger rather than by dividing them. */
.sec > .wrap > .lead{max-width:none;font-size:19px;line-height:1.62}
@media (max-width:900px){
  .sec > .wrap > .lead{font-size:17px}
}

/* ---- hackathon: the two sides that end up in one room ----
   A stock photo of strangers at laptops said nothing; this says what the
   section says, that the bank does not solve the puzzle on its own. */
.hackviz{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  aspect-ratio:3/2;padding:26px 22px;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(150deg,var(--deep-2,#22303F),var(--deep,#1B2733));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hackviz::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(115,150,184,.22),rgba(115,150,184,0) 70%)}
.hackviz>*{position:relative}
.hv-side{display:grid;justify-items:center;gap:12px;text-align:center}
.hv-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hv-ic svg{width:21px;height:21px;fill:none;stroke:var(--t3);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hv-side b{font-size:13px;font-weight:800;letter-spacing:-.015em;color:var(--on-dark);line-height:1.3;
  max-width:11ch}
.hv-mid{display:grid;justify-items:center;gap:9px}
.hv-join{display:flex;align-items:center;gap:5px}
.hv-join i{width:5px;height:5px;border-radius:50%;background:var(--t4);opacity:.5;
  animation:hvpulse 2.4s ease-in-out infinite}
.hv-join i:nth-child(2){animation-delay:.25s}
.hv-join i:nth-child(3){animation-delay:.5s}
@keyframes hvpulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
.hv-room{font-size:15px;font-weight:800;letter-spacing:-.02em;color:#fff;
  padding:9px 16px;border-radius:10px;background:rgba(115,150,184,.24);
  box-shadow:inset 0 0 0 1px rgba(148,188,227,.35);white-space:nowrap}
.hv-mode{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
@media (prefers-reduced-motion:reduce){ .hv-join i{animation:none;opacity:.7} }
@media (max-width:520px){
  .hackviz{aspect-ratio:auto;grid-template-columns:1fr;gap:16px;padding:24px 18px}
  .hv-side b{max-width:none}
}

/* ============================================================
   THE DESK: WHAT CHANGES, LINE BY LINE
   The two stacked lists said the same thing twice and read as one
   grey block. Every problem has exactly one answer in the copy, so
   they are set as pairs: the problem on the left, the answer on the
   right, joined by an arrow. The contrast does the explaining.
   ============================================================ */
.swaps{display:grid;gap:26px}
.swap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 26px 12px}
.sec-white .swap{background:var(--paper);border-color:transparent}
.sec-dark .swap,.sec-dark-alt .swap{background:var(--dark-fill);border-color:var(--dark-line)}
.swap-top{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.swap-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--t6)}
.sec-dark .swap-n,.sec-dark-alt .swap-n{color:var(--t3)}
.swap-top h3{margin:0;font-size:21px;letter-spacing:-.03em}

.swap-head{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-dark .swap-head,.sec-dark-alt .swap-head{border-bottom-color:var(--dark-line)}
.swap-head span{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-45)}
.swap-head span:last-child{grid-column:3;color:var(--t6)}
.sec-dark .swap-head span,.sec-dark-alt .swap-head span{color:var(--on-dark-40)}
.sec-dark .swap-head span:last-child,.sec-dark-alt .swap-head span:last-child{color:var(--t3)}

.swap-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;
  gap:0 14px;padding:16px 0;border-bottom:1px solid var(--line)}
.swap-row:last-child{border-bottom:0}
.sec-dark .swap-row,.sec-dark-alt .swap-row{border-bottom-color:var(--dark-line)}
.swap-a,.swap-b{margin:0;font-size:14.5px;line-height:1.55}
/* the problem is stated plainly and sits back; the answer carries the weight */
.swap-a{color:var(--ink-62)}
.swap-b{color:var(--ink);font-weight:600;padding:14px 16px;border-radius:10px;background:var(--t1)}
.sec-dark .swap-a,.sec-dark-alt .swap-a{color:var(--on-dark-60)}
.sec-dark .swap-b,.sec-dark-alt .swap-b{color:var(--on-dark);background:rgba(115,150,184,.18)}
.swap-arw{display:grid;place-items:center}
.swap-arw svg{width:18px;height:18px;fill:none;stroke:var(--t4);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease),stroke .25s var(--ease)}
.swap-row:hover .swap-arw svg{transform:translateX(3px);stroke:var(--t6)}
.sec-dark .swap-row:hover .swap-arw svg,.sec-dark-alt .swap-row:hover .swap-arw svg{stroke:var(--t3)}

@media (max-width:820px){
  .swap{padding:22px 20px 16px}
  .swap-head{display:none}
  .swap-row{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .swap-arw{justify-items:start}
  .swap-arw svg{transform:rotate(90deg)}
  .swap-row:hover .swap-arw svg{transform:rotate(90deg) translateX(3px)}
}

/* ============================================================
   BLOG
   ============================================================ */
/* ---- the featured article ---- */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);
  align-items:stretch;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(26px,3vw,40px);margin-top:22px;text-decoration:none;
  transition:transform .26s var(--ease),border-color .26s var(--ease)}
.sec-paper .feature{background:var(--white);border-color:var(--line)}
.feature:hover{transform:translateY(-2px);border-color:var(--t4)}
.feature-tx{display:flex;flex-direction:column}
.feature-tx h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.04em;line-height:1.12;margin:14px 0 0}
.feature-tx p{font-size:16px;line-height:1.6;color:var(--ink-76);margin:16px 0 0}
.feature-tx .txt-link{margin-top:auto;padding-top:22px}

/* the cover is markup, not a screenshot: the episode, the line, the two voices */
.feature-art{position:relative;overflow:hidden;border-radius:calc(var(--r-card) - 6px);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  background:linear-gradient(150deg,#2C4560,var(--deep) 70%)}
.feature-art::after{content:"";position:absolute;right:-30%;top:-40%;width:80%;height:160%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(115,150,184,.35),rgba(115,150,184,0) 70%)}
.feature-art>*{position:relative}
.feature-art .ep{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--t3)}
.feature-art .q{font-size:clamp(17px,1.7vw,22px);line-height:1.35;letter-spacing:-.03em;font-weight:700;
  color:var(--on-dark);margin:0}
.feature-art .faces{display:flex}
.feature-art .faces img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--deep)}
.feature-art .faces img+img{margin-left:-14px}
.feature-art .who{font-size:12.5px;font-weight:700;color:var(--on-dark-60);margin-top:-8px}

/* ---- topic filter ---- */
.barticles-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.btopics{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.btopic{font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--white);color:var(--ink-62);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.sec-white .btopic{background:var(--paper);border-color:transparent}
.btopic:hover{color:var(--ink);border-color:var(--t4)}
.btopic.on{background:var(--deep);border-color:var(--deep);color:#fff}
.bnone{margin-top:26px;font-size:15px;color:var(--ink-62)}

/* ---- the article cards ---- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{display:flex;flex-direction:column;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 24px 22px;
  transition:transform .26s var(--ease),border-color .26s var(--ease)}
.sec-white .bcard{background:var(--paper);border-color:transparent}
.bcard:hover{transform:translateY(-3px);border-color:var(--t4)}
.bcard h3{font-size:18px;letter-spacing:-.03em;line-height:1.28;margin:14px 0 0}
.bcard p{font-size:14px;line-height:1.6;color:var(--ink-62);margin:12px 0 0}
.bcard-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--ink-45)}
.sec-dark .bcard-meta,.sec-dark-alt .bcard-meta{color:var(--on-dark-60)}
.bchip{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:var(--t1);color:var(--t6)}
.sec-dark .bchip,.sec-dark-alt .bchip{background:rgba(115,150,184,.22);color:var(--t3)}
.bcard-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;
  font-size:13px;font-weight:700;color:var(--t6)}
.bcard-foot svg{fill:none;stroke:currentColor;stroke-width:2;transition:transform .22s var(--ease)}
.bcard:hover .bcard-foot svg{transform:translateX(3px)}

/* ---- newsletter ---- */
.subscribe{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(26px,3.4vw,56px);
  align-items:center}
/* the field and the button read as one control, the way a signup should */
.subform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.subform input{width:100%;font:inherit;font-size:15px;color:var(--on-dark);
  background:rgba(255,255,255,.06);border:1px solid var(--dark-line);border-radius:10px;padding:15px 16px}
.subform input::placeholder{color:var(--on-dark-40)}
.subform input:focus{outline:none;border-color:var(--t4);box-shadow:0 0 0 4px rgba(115,150,184,.18)}
.subform .btn{border:0;cursor:pointer;font:inherit;font-weight:700;white-space:nowrap}
.subnote{grid-column:1 / -1;font-size:12.5px;color:var(--on-dark-40);margin:2px 0 0}
@media (max-width:520px){
  .subform{grid-template-columns:1fr}
  .subform .btn{justify-self:start}
}

/* ============================================================
   ARTICLE
   ============================================================ */
.readbar{position:sticky;top:0;z-index:60;height:3px;background:transparent}
.readbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--t5),var(--t3))}
.posthead{max-width:none}
.byline{display:flex;align-items:center;gap:14px;margin-top:30px}
.byfaces{display:flex}
.byfaces img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--deep)}
.byfaces img+img{margin-left:-13px}
.bytx b{display:block;font-size:14.5px;color:var(--on-dark)}
.bytx span{display:block;font-size:12.5px;color:var(--on-dark-60);margin-top:2px}

.postwrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,4vw,64px);
  align-items:start}
.toc{position:sticky;top:120px;display:grid;gap:4px}
.toc-h{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 10px}
.toc a{font-size:14px;line-height:1.45;color:var(--ink-62);padding:7px 0 7px 14px;
  border-left:2px solid var(--line);transition:color .2s var(--ease),border-color .2s var(--ease)}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--t5)}
.share{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sharebtns{display:flex;gap:8px}
.sbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.sbtn:hover{border-color:var(--t4);background:var(--paper)}
.sbtn svg{width:16px;height:16px;fill:none;stroke:var(--ink-62);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.post{max-width:74ch}
.post h2{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.035em;line-height:1.2;margin:44px 0 0;
  scroll-margin-top:120px}
.post h2:first-child{margin-top:0}
.post p{font-size:17px;line-height:1.72;color:var(--ink-86);margin:18px 0 0}
.post blockquote{margin:34px 0 0;padding:26px 28px;border-radius:var(--r-card);
  background:var(--t1);border-left:3px solid var(--t5)}
.post blockquote p{font-size:20px;line-height:1.45;letter-spacing:-.025em;font-weight:700;
  color:var(--ink);margin:0}
.post blockquote cite{display:block;font-style:normal;font-size:13px;font-weight:700;
  color:var(--ink-62);margin-top:14px}
.postcta{margin-top:46px;padding-top:30px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.postcta p{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:0}

@media (max-width:1000px){
  .postwrap{grid-template-columns:1fr;gap:30px}
  .toc{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:0 18px}
  .toc-h,.share{display:none}
  .toc a{border-left:0;border-bottom:2px solid var(--line);padding:8px 0;white-space:nowrap}
  .post{max-width:none}
}
@media (max-width:980px){
  .feature{grid-template-columns:1fr}
  .feature-art{order:-1;min-height:190px}
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .subscribe{grid-template-columns:1fr}
}
@media (max-width:620px){
  .bgrid{grid-template-columns:1fr}
  .btopics{margin-left:0}
}