/* Swiffy website21 - shared styles for every page.
   Tokens carry over from website2 so the brand reads the same. */
:root{
  --navy:#0E2E6B;
  --navy-2:#104090;
  --navy-3:#1B53B5;
  --ink:#0A1530;
  --ink-2:#3A4665;
  --muted:#65728F;      /* 4.50:1 on --bg, 4.82:1 on #fff - WCAG AA for small text */
  --line:#E6E9F2;
  --bg:#F6F7FB;
  --card:#FFFFFF;
  --magenta:#DB0B7B;    /* 4.51:1 on --bg - was #E01080 (4.31:1), which failed AA on 12-13px labels */
  --magenta-soft:#FCE6F1;
  --mint:#D9F2E5;
  --gold:#FFE7B0;
  --sky:#D9E6FF;
  --grad:linear-gradient(90deg,#3D7BFF,#8B5CF6 55%,#E0409A);
  --radius:18px;
  --shadow:0 1px 0 rgba(14,46,107,.04), 0 30px 50px -30px rgba(14,46,107,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* clip, not hidden: hidden would make <html> the scroll container and break the
   sticky header. Belt-and-braces against any stray element widening the page. */
img{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
a{color:inherit;text-decoration:none}
.serif{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--navy-3);outline-offset:2px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-size:14.5px;font-weight:600;border:1px solid transparent;transition:all .15s;cursor:pointer;font-family:inherit;line-height:1.2}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#0a225a}
.btn-primary:disabled{opacity:.6;cursor:progress}
.btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--navy-3);color:var(--navy)}
.btn-magenta{background:var(--magenta);color:#fff}
.btn-magenta:hover{background:#c00d6d}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:#EEF2FF}
.btn-link{color:var(--navy-2);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:6px}
.arrow{display:inline-block;transform:translateY(1px)}

/* HULL CITY BANNER - first thing on every page, full-bleed. The artwork scales by
   width with its aspect ratio intact, so the percentage hotspot stays locked to the
   "Read the official press release" pill drawn into it. */
.hull-banner{position:relative;width:100%;background:#0a1d73;line-height:0}
.hull-banner picture{display:block}
.hull-banner img{display:block;width:100%;height:auto}
.hull-banner-cta{position:absolute;left:31.93%;top:76%;width:22.93%;height:9.78%;border-radius:999px;transition:background .15s;-webkit-tap-highlight-color:transparent}
.hull-banner-cta:hover{background:rgba(255,255,255,.14)}
.hull-banner-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* HEADER - sits beneath the banner, sticks to the top on scroll. No logo here:
   the banner above already carries the Swiffy mark. */
.site-header{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.menu a,.menu .dd-toggle{display:flex;align-items:center;gap:5px;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2);background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s}
.menu a:hover,.menu .dd-toggle:hover,.menu .dd-toggle[aria-expanded="true"]{color:var(--ink);background:var(--bg)}
.menu a[aria-current="page"]{color:var(--navy);font-weight:600}
.dd-toggle .chev{transition:transform .15s}
.dd-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:290px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 48px -16px rgba(14,46,107,.22)}
.dropdown.open{display:block}
.dropdown a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;white-space:normal}
.dropdown .dd-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.dropdown b{display:block;font-size:14px;color:var(--ink);font-weight:600}
.dropdown small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-hamburger{display:none}

/* SECTIONS */
.section{padding:96px 0}
.section.white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.section-head.center{flex-direction:column;align-items:center;text-align:center}
.section-head.center .lede{max-width:640px}
.kicker{font-size:13px;text-transform:uppercase;letter-spacing:.18em;color:var(--magenta);font-weight:700}
h1,h2,h3,h4{font-weight:700}
h2{font-size:54px;letter-spacing:-.028em;line-height:1.04;margin:14px 0 0;color:var(--ink);max-width:820px}
h2 em,h1 em{font-style:normal;font-family:'Manrope',system-ui,-apple-system,sans-serif;color:var(--navy-2);font-weight:400;font-size:.9em}
.lede{font-size:18px;color:var(--ink-2);max-width:460px;line-height:1.55;margin:0}

/* HERO (home) - clean and light: no video, no grid, no dashboard */
.hero{position:relative;padding:86px 0 104px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 72% 80% at 85% 40%,rgba(224,16,128,.08),rgba(224,16,128,0) 72%),#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,860px);justify-content:center;gap:60px;align-items:center;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);font-weight:500}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#22B07D;box-shadow:0 0 0 4px rgba(34,176,125,.18)}
.hero-title{font-size:80px;line-height:.98;letter-spacing:-.04em;margin:22px 0 24px;color:var(--ink)}
.hero-title .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:600px;margin:0 auto 34px}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.hero-ctas .btn{padding:15px 24px;font-size:15px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--ink-2);font-weight:500}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block}

/* MARQUEE (merchant logos) */
.logos{padding:46px 0 52px;background:#fff;border-bottom:1px solid var(--line)}
.logos-head{text-align:center;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.16em;margin:0 auto 28px;font-weight:600}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:marquee 45s linear infinite;padding:4px 0}
.marquee:hover .marquee-track,.marquee.paused .marquee-track{animation-play-state:paused}
.marquee-track img{height:46px;width:auto;flex-shrink:0}
.marquee-track img.sq{height:54px}
.marquee-track img.wide{height:24px}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-pause{display:flex;margin:18px auto 0;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);cursor:pointer;font-family:inherit}
.marquee-pause:hover{color:var(--ink);border-color:var(--navy-3)}

/* CAMPAIGN SHOWCASE - full-width strip in the hero, through to #campaign.
   Lives in its own .wrap (a sibling of .hero-grid) rather than inside the
   hero's 860px copy column, so it spans the content width on any monitor
   instead of drifting toward the bezel. */
@keyframes onair-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,45,142,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,45,142,0)}
  100%{box-shadow:0 0 0 0 rgba(255,45,142,0)}
}
.sc-onair{width:8px;height:8px;border-radius:50%;background:#FF2D8E;flex-shrink:0;display:inline-block;animation:onair-pulse 2s ease-out infinite}
.sc-play{width:68px;height:68px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.96);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -8px rgba(10,21,48,.65);transition:transform .25s}
.sc-play svg{display:block}
/* White pill: the SuperSport mark is dark blue on white and vanishes on the
   navy strip, and recolouring a partner's logo is not an option. */
.sc-flag{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid rgba(255,255,255,.3);color:var(--navy);font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:7px 14px 7px 13px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(8,18,44,.6)}
.sc-flag .rule{width:1px;height:17px;background:var(--line);flex-shrink:0}
.sc-flag .ss{height:26px;width:auto;display:block}

.sc-strip{
  display:block;position:relative;margin:46px auto 0;max-width:1060px;
  border-radius:26px;overflow:hidden;background:#0A1530;
  box-shadow:0 36px 72px -30px rgba(14,46,107,.62);
  transition:transform .25s,box-shadow .25s;aspect-ratio:1060/372;
}
.sc-strip:hover{transform:translateY(-4px);box-shadow:0 46px 84px -30px rgba(14,46,107,.72)}
.sc-strip > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-strip .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,44,.95) 0%,rgba(8,18,44,.9) 38%,rgba(8,18,44,.55) 68%,rgba(8,18,44,.3) 100%)}
.sc-strip .inner{position:relative;height:100%;display:flex;align-items:center;gap:30px;padding:0 44px;text-align:left}
.sc-strip h2{margin:14px 0 0;color:#fff;font-size:38px;line-height:1.08;letter-spacing:-.03em;max-width:none}
.sc-strip h2 em{font-style:normal;font-family:'Manrope',system-ui,-apple-system,sans-serif;font-weight:400;color:#CBD9FF;font-size:1em}
.sc-strip p{margin:11px 0 0;color:#C2CFE8;font-size:15.5px}
.sc-strip:hover .sc-play{transform:scale(1.09)}
@media(max-width:860px){
  .sc-strip{aspect-ratio:auto;margin-top:34px}
  .sc-strip .inner{flex-direction:column;align-items:flex-start;padding:28px;gap:20px}
  .sc-strip .scrim{background:linear-gradient(180deg,rgba(8,18,44,.78),rgba(8,18,44,.95))}
  .sc-strip h2{font-size:28px}
}
@media (prefers-reduced-motion: reduce){.sc-onair{animation:none}}

/* INDUSTRY CARDS */
.verticals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 28px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.vcard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(14,46,107,.35);border-color:#C9D3EA}
.verticals.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.vcard .vart{position:absolute;right:-130px;top:-130px;width:480px;height:480px;border-radius:50%;opacity:.42;pointer-events:none;filter:blur(26px)}
.vcard > div:not(.vart){position:relative;z-index:1}
.vcard.fx .vart{background:radial-gradient(circle,rgba(217,230,255,.92) 0%,rgba(217,230,255,.52) 36%,rgba(217,230,255,.22) 58%,rgba(217,230,255,0) 78%)}
.vcard.ig .vart{background:radial-gradient(circle,rgba(252,230,241,.92) 0%,rgba(252,230,241,.52) 36%,rgba(252,230,241,.22) 58%,rgba(252,230,241,0) 78%)}
.vcard.sb .vart{background:radial-gradient(circle,rgba(255,231,176,.92) 0%,rgba(255,231,176,.52) 36%,rgba(255,231,176,.22) 58%,rgba(255,231,176,0) 78%)}
.vcard.ec .vart{background:radial-gradient(circle,rgba(217,242,229,.92) 0%,rgba(217,242,229,.52) 36%,rgba(217,242,229,.22) 58%,rgba(217,242,229,0) 78%)}
.vcard h3{font-size:23px;letter-spacing:-.02em;margin:14px 0 8px;color:var(--ink);line-height:1.15}
.vcard h3 a:after{content:"";position:absolute;inset:0;z-index:2}
.vcard p{color:var(--ink-2);font-size:15px;line-height:1.55;margin:0}
.vcard ul{list-style:none;margin:18px 0 0;padding:0;font-size:14px;color:var(--ink-2)}
.vcard ul li{padding:8px 0;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.vcard ul li span:last-child{color:var(--muted)}
.vcard .industry{position:relative;z-index:1;font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.vcard.fx .industry{color:var(--navy)}
.vcard.ig .industry{color:var(--magenta)}
.vcard.sb .industry{color:#8A5A00}
.vcard.ec .industry{color:#0F7C4F}
.industry-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;position:relative;z-index:1}
.fx .industry-icon,.ico-fx{background:#D9E6FF;color:var(--navy)}
.ig .industry-icon,.ico-ig{background:#FCE6F1;color:var(--magenta)}
.sb .industry-icon,.ico-sb{background:#FFE7B0;color:#8A5A00}
.ec .industry-icon,.ico-ec{background:#D9F2E5;color:#0F7C4F}
.vcard .more{margin-top:20px;font-size:14px;font-weight:600;color:var(--navy-2);display:flex;align-items:center;gap:6px}
.vcard:hover .more .arrow{transform:translate(4px,1px)}
.more .arrow{transition:transform .2s}

/* THE STACK - headings with an illustration, no body text */
.stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stack-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 26px;display:flex;align-items:center;gap:20px;overflow:hidden;transition:transform .2s,border-color .2s}
.stack-tile:hover{transform:translateY(-3px);border-color:#C9D3EA}
.stack-tile .art{flex-shrink:0;width:76px;height:76px;border-radius:20px;display:flex;align-items:center;justify-content:center}
.stack-tile .art svg{width:42px;height:42px}
.stack-tile h3{margin:0;font-size:19px;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.t-b{background:linear-gradient(135deg,#E3ECFF,#C9DAFF);color:var(--navy-2)}
.t-m{background:linear-gradient(135deg,#FDEAF4,#F9CDE3);color:var(--magenta)}
.t-g{background:linear-gradient(135deg,#E3F6EC,#C2EBD5);color:#0F7C4F}
.t-y{background:linear-gradient(135deg,#FFF2D6,#FFE1A3);color:#8A5A00}
.t-r{background:linear-gradient(135deg,#FEE9E9,#FDCACA);color:#B91C1C}
.t-v{background:linear-gradient(135deg,#EEE9FF,#D9CEFF);color:#6D28D9}

/* PAYMENT METHODS - logos only */
.pm-stage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.pm-tile{min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:18px;box-shadow:0 18px 30px -24px rgba(14,46,107,.3);transition:border-color .2s,box-shadow .2s}
.pm-tile:hover{border-color:var(--navy-3);box-shadow:0 22px 36px -20px rgba(14,46,107,.35)}
.pm-tile img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.pm-stage .offset{grid-column:span 1}
.pm-markets{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px}

/* CAMPAIGN FILM - poster only until the visitor presses play */
.film{position:relative;border-radius:28px;overflow:hidden;background:#0A1530;box-shadow:var(--shadow);aspect-ratio:16/9}
.film video{display:block;width:100%;height:100%;object-fit:contain;background:#0A1530}
.film video::-webkit-media-controls-panel{background-image:linear-gradient(transparent,rgba(10,21,48,.7))}
@media(max-width:860px){.film{border-radius:20px}}

/* SECURITY - Engineered for Trust */
.sec{background:linear-gradient(135deg,#0E2E6B,#1B53B5);color:#fff;border-radius:28px;padding:64px;position:relative;overflow:hidden}
.sec:after{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(224,16,128,.28),transparent 65%);pointer-events:none}
.sec-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:end;margin-bottom:44px;position:relative;z-index:1}
.sec h2{color:#fff;font-size:52px}
.sec h2 em{color:#FFD0E6}
.sec p{font-size:17px;line-height:1.6;color:#C8D3EA;margin:0}
.sec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;z-index:1}
.sec-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:22px}
.sec-tile.feature{grid-column:span 3;display:flex;align-items:center;gap:22px;background:rgba(255,255,255,.1);border-color:rgba(255,208,230,.4)}
.sec-tile .si{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:#FFD0E6}
.sec-tile.feature .si{margin:0;width:56px;height:56px;flex-shrink:0;background:var(--magenta);color:#fff}
.sec-tile h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.sec-tile p{font-size:14px;color:#B7C5E5;line-height:1.5}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;position:relative;z-index:1}
.badge2{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:999px;font-size:13px;color:#fff;font-weight:500;display:inline-flex;align-items:center;gap:7px}

/* INTEGRATIONS */
.integ{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.integ-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:28px}
.integ-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.integ-item .ii{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.integ-item b{display:block;font-size:14.5px;color:var(--ink)}
.integ-item span{font-size:13px;color:var(--muted);line-height:1.45}
.code{background:#0A1530;border-radius:20px;padding:26px 28px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;color:#C8D3EA;box-shadow:var(--shadow);overflow:auto;white-space:pre}
.code .k{color:#FF8EC4}.code .s{color:#86EFAC}.code .c{color:#73809D}.code .n{color:#93C5FD}
.code-head{display:flex;gap:6px;margin-bottom:16px}
.code-head span{width:10px;height:10px;border-radius:50%;background:#2A3555}

/* AWARDS */
.awards{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px;align-items:stretch}
.award{background:linear-gradient(180deg,#fff,#F8FAFF);border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;align-items:center;text-align:center}
.award img{width:100%;height:330px;object-fit:contain}
.award .yr{margin-top:16px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--magenta);font-weight:700}
.award h3{margin:6px 0 0;font-size:17px;letter-spacing:-.01em;line-height:1.35}
.award small{display:block;color:var(--muted);font-size:13px;margin-top:4px}

/* LICENCES */
.lic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lic-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.lic-card .li{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.lic-card h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.lic-card p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* TESTIMONIALS */
.quotes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.qcard:before{content:"\201C";position:absolute;top:8px;right:28px;font-family:'Instrument Serif',serif;font-size:120px;line-height:1;color:var(--magenta-soft)}
.qtext{font-size:21px;line-height:1.45;color:var(--ink);letter-spacing:-.01em;font-weight:500;margin:0;position:relative}
.qtext em{font-family:'Instrument Serif',serif;color:var(--magenta);font-style:normal;font-weight:400;font-size:1.08em}
.qmeta-row{display:flex;align-items:center;gap:14px;margin-top:28px}
.qlogo{height:36px;width:auto;flex-shrink:0;display:block}
.qmeta b{display:block;color:var(--ink);font-size:15px}
.qmeta span{color:var(--muted);font-size:13px}

/* PARTNERSHIP */
.partner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-radius:28px;overflow:hidden;background:#0a1d73;color:#fff}
.partner-copy{padding:56px}
.partner-copy .kicker{color:#FFB547}
.partner-copy h2{color:#fff;font-size:46px}
.partner-copy h2 em{color:#FFB547}
.partner-copy p{color:#C8D3EA;font-size:17px;line-height:1.6;margin:18px 0 28px;max-width:520px}
.partner-stats{display:flex;gap:28px;margin:0 0 30px;flex-wrap:wrap}
.partner-stats div{font-size:13px;color:#B7C5E5}
.partner-stats b{display:block;font-size:24px;color:#fff;letter-spacing:-.02em}
.partner-art{position:relative;min-height:380px;background:url('img/hull-banner.webp') 88% 50%/auto 100% no-repeat;}
.partner-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1d73,rgba(10,29,115,0) 40%)}
.btn-orange{background:#F08A1C;color:var(--ink)}
.btn-orange:hover{background:#E07D10;color:var(--ink)}

/* TALK / CTA */
.cta{background:#fff;border:1px solid var(--line);border-radius:28px;padding:60px;position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;right:-200px;top:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(224,16,128,.14),transparent 65%);pointer-events:none}
.cta h2{font-size:50px}
.cta h2 em{color:var(--magenta)}
.cta p{color:var(--ink-2);font-size:17px;max-width:560px;line-height:1.55}
.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px;position:relative;z-index:1}
.pick a{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:all .15s}
.pick a:hover{border-color:var(--navy-3);background:#fff;box-shadow:0 18px 30px -22px rgba(14,46,107,.4)}
.pick b{font-size:16px;color:var(--ink)}
.pick span{font-size:13px;color:var(--muted)}
.pick .go{font-size:13.5px;font-weight:600;color:var(--navy-2)}
.cta-foot{margin-top:24px;font-size:14px;color:var(--muted);position:relative;z-index:1}
.cta-foot a{color:var(--navy-2);font-weight:600}

/* PAGE HERO (inner pages) */
.page-hero{padding:64px 0 56px;background:#fff;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--hero-tint,rgba(224,16,128,.10)),transparent 65%);pointer-events:none}
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.page-hero h1{font-size:62px;line-height:1.02;letter-spacing:-.035em;margin:12px 0 18px;max-width:900px}
.page-hero p.sub{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:680px;margin:0 0 28px}

/* INDUSTRY PAGE */
.ind-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.feat-list{display:grid;gap:14px}
.feat{display:flex;gap:16px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px}
.feat .fi{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.feat h3{margin:0 0 4px;font-size:16.5px}
.feat p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.kpis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:26px}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px}
.kpi b{display:block;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.kpi span{font-size:13px;color:var(--muted)}
.mini-logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mini-logos span{display:flex;align-items:center;justify-content:center;width:96px;height:58px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.mini-logos img{max-width:100%;max-height:100%;object-fit:contain}

/* LEAD FORM */
.form-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow);position:sticky;top:90px}
.form-card h2{font-size:30px;margin:0 0 6px}
.form-card > p{margin:0 0 22px;color:var(--ink-2);font-size:15px;line-height:1.5}
.field{margin-bottom:16px}
.field > label,.field > .lbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .req{color:var(--magenta)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field select{display:block;width:100%;padding:12px 14px;border-radius:11px;border:1px solid #D5DBE8;background:#fff;font-size:15px;color:var(--ink);font-family:inherit;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 4px rgba(27,83,181,.14)}
.field.invalid input,.field.invalid select,.field.invalid .radios{border-color:#DC2626}
.field .err{display:none;color:#B91C1C;font-size:12.5px;margin-top:5px;font-weight:500}
.field.invalid .err{display:block}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.radios{display:grid;gap:8px;border:1px solid transparent;border-radius:12px}
.radios.cols2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.radios label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #D5DBE8;border-radius:11px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .15s}
.radios label:hover{border-color:var(--navy-3)}
.radios input{accent-color:var(--navy);margin:0}
.radios label:has(input:checked){border-color:var(--navy);background:#F1F5FF;color:var(--ink)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.highlight-q{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.highlight-q legend{font-size:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-bottom:10px;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--navy);flex-shrink:0}
.check a{color:var(--navy-2);text-decoration:underline}
.conditional[hidden]{display:none}
.form-status{display:none;margin-top:14px;padding:12px 14px;border-radius:11px;font-size:14px;font-weight:500;background:#FEE2E2;color:#B91C1C;border:1px solid #FECACA}
.form-status.show{display:block}
.form-card .btn-primary{width:100%;justify-content:center;padding:15px;font-size:15px;margin-top:6px}
.hp{position:absolute;left:-9999px}
.cf-turnstile-slot{margin:12px 0}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.faq-nav{position:sticky;top:90px;display:flex;flex-direction:column;gap:4px}
.faq-nav a{padding:10px 14px;border-radius:10px;font-size:14px;color:var(--ink-2);font-weight:500}
.faq-nav a:hover{background:#fff;color:var(--ink)}
.faq-group{margin-bottom:44px}
.faq-group h2{font-size:28px;margin:0 0 16px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.faq-item h3{margin:0}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:18px 22px;background:none;border:0;text-align:left;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;line-height:1.4}
.faq-q:hover{color:var(--navy-2)}
.faq-q .pm{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.faq-q[aria-expanded="true"] .pm{transform:rotate(45deg);background:var(--magenta-soft);color:var(--magenta)}
.faq-a{padding:0 22px 20px;color:var(--ink-2);font-size:15px;line-height:1.65}
.faq-a[hidden]{display:none}
.faq-a p{margin:0}

/* SPOTLIGHT */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.news{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.news:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(14,46,107,.35)}
.news .thumb{aspect-ratio:16/9;background:var(--bg);overflow:hidden;position:relative}
.news .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news .thumb.brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#0E2E6B,#1B53B5 60%,#6D28D9);color:#fff;text-align:center;padding:20px}
.news .thumb.brand b{font-size:24px;letter-spacing:-.02em}
.news .thumb.brand span{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:#FFD0E6}
.news .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.news .pub{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--magenta);font-weight:700}
.news h3{font-size:18px;line-height:1.35;margin:8px 0 16px;letter-spacing:-.01em;flex:1}
.news .read{font-size:13.5px;font-weight:600;color:var(--navy-2)}
.fmt{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:10.5px;letter-spacing:.06em}
.pulse-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:box-shadow .2s}
.pulse-feature:hover{box-shadow:0 30px 50px -30px rgba(14,46,107,.35)}
.pulse-feature img{width:100%;height:100%;object-fit:cover;display:block}
.pulse-feature .body{padding:40px}
.pulse-feature h3{font-size:30px;letter-spacing:-.02em;margin:10px 0 12px;line-height:1.15}
.pulse-feature p{color:var(--ink-2);font-size:16px;line-height:1.6;margin:0 0 22px}

/* PULSE ARTICLE */
.article{max-width:860px;margin:0 auto}
.article .hero-img{width:100%;border-radius:24px;display:block;margin-bottom:36px}
.a-block{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 32px;margin-bottom:18px}
.a-block .tag{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--magenta)}
.a-block h2{font-size:28px;margin:8px 0 12px;max-width:none}
.a-block p{margin:0 0 12px;color:var(--ink-2);font-size:16px;line-height:1.7}
.a-block p:last-child{margin-bottom:0}
.a-block.action{border-left:4px solid var(--magenta)}
.a-block.dark{background:linear-gradient(135deg,#0E2E6B,#1B53B5);color:#fff;border:0}
.a-block.dark h2{color:#fff}
.a-block.dark p{color:#C8D3EA}
.a-block.dark .tag{color:#FFD0E6}
.a-block.dark strong{color:#fff}
.a-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:18px}
.a-grid .a-block{margin:0}
.a-grid .a-block h2{font-size:21px}
.a-grid .a-block p{font-size:15px}
.outlook{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.outlook li{display:flex;gap:16px;align-items:flex-start;color:var(--ink-2);font-size:16px;line-height:1.55}
.outlook li b{font-family:'JetBrains Mono',monospace;color:var(--magenta);font-size:15px;padding-top:1px}
.terms{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;font-size:15px}
.terms dt{font-weight:700;color:var(--ink)}
.terms dd{margin:0;color:var(--ink-2)}
.fraud-rate{font-size:56px;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;margin:6px 0 10px}

/* TEAM */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* MEET THE TEAM - grouped by department, every row centred. Each "line" from
   the brief is its own flex row rather than one wrapping grid, so the splits
   (4+3 for Tech, 3+2 for Finance) are explicit instead of falling out of the
   column count. */
@media(max-width:860px){
}
@media(max-width:520px){
}
.member{margin:0;border-radius:20px;overflow:hidden;background:#0a1d73;box-shadow:0 24px 40px -28px rgba(14,46,107,.5);transition:transform .2s}
.member:hover{transform:translateY(-4px)}
.member img{display:block;width:100%;height:auto;aspect-ratio:1485/1856}
.team-sub{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:700;margin:0 0 20px}

/* THANK YOU */
.ty{min-height:60vh;display:flex;align-items:center;padding:96px 0}
.ty-card{max-width:760px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:64px 48px;box-shadow:var(--shadow)}
.ty-tick{width:72px;height:72px;border-radius:50%;background:var(--mint);color:#0F7C4F;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.ty-card h1{font-size:46px;letter-spacing:-.03em;margin:0 0 16px}
.ty-card p{font-size:17px;color:var(--ink-2);line-height:1.6;margin:0 auto 14px;max-width:560px}
.ty-sub{max-width:560px;margin:26px auto 0;padding:20px 24px;border-radius:18px;background:var(--mint);border:1px solid rgba(15,124,79,.18)}
.ty-sub h2{font-size:20px;letter-spacing:-.02em;margin:0 0 6px;color:#0F7C4F}
.ty-card .ty-sub p{font-size:15.5px;margin:0;max-width:none}
.ty-tag{display:inline-block;margin:18px 0 30px;font-size:20px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ty-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* LEGAL */
.legal{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px}
.legal h1{font-size:40px;letter-spacing:-.03em;margin:0 0 8px}
.legal h2{font-size:22px;margin:32px 0 10px}
.legal p,.legal li{color:var(--ink-2);font-size:15.5px;line-height:1.7}

/* FOOTER */
footer{padding:64px 0 36px;border-top:1px solid var(--line);background:#fff;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:36px}
.foot-logo img{height:96px;width:auto;display:block;margin-bottom:16px}
.foot-grid h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 14px;font-weight:600}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{font-size:14px;color:var(--ink-2);padding:5px 0}
.foot-grid li a:hover{color:var(--ink)}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:all .15s}
.socials a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.foot-bot a:hover{color:var(--ink-2)}

/* ═══ TABLET / SMALL LAPTOP - menu collapses ═══ */
@media(max-width:1180px){
  .nav-hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:10px;background:none;border:none;margin-left:-10px}
  .nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px;box-shadow:0 20px 32px -12px rgba(14,46,107,.18);max-height:calc(100vh - 64px);overflow:auto}
  .menu.open{display:flex}
  .menu a,.menu .dd-toggle{padding:13px 4px;font-size:16px;width:100%;justify-content:space-between;border-radius:0;border-bottom:1px solid var(--line)}
  .dropdown{position:static;box-shadow:none;border:0;border-radius:0;padding:4px 0 8px 8px;min-width:0}
  .dropdown a{border-bottom:0;padding:10px 4px}
  .verticals{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pm-stage{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .foot-grid > div:first-child{grid-column:1/-1}
  .lic{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pick{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ═══ TABLET ≤ 860px ═══ */
@media(max-width:860px){
  .wrap{padding:0 20px}
  .section{padding:64px 0}
  .hero{padding:48px 0 60px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .hero-title{font-size:54px}
  .hero-sub{font-size:16.5px}
  h2{font-size:38px}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .lede{max-width:100%;font-size:16px}
  .stack{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .verticals.three{grid-template-columns:minmax(0,1fr)}
  .sec{padding:36px 24px;border-radius:22px}
  .sec-top{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:28px}
  .sec h2{font-size:36px}
  .sec-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sec-tile.feature{grid-column:span 2}
  .integ{grid-template-columns:minmax(0,1fr);gap:32px}
  .awards{grid-template-columns:minmax(0,1fr)}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .partner{grid-template-columns:minmax(0,1fr)}
  .partner-copy{padding:36px 26px}
  .partner-copy h2{font-size:34px}
  .partner-art{min-height:200px;order:-1;background-position:80% 50%}
  .cta{padding:36px 24px;border-radius:22px}
  .cta h2{font-size:36px}
  .page-hero{padding:44px 0 40px}
  .page-hero h1{font-size:42px}
  .ind-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .form-card{position:static;padding:24px}
  .faq-wrap{grid-template-columns:minmax(0,1fr)}
  .faq-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .news-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pulse-feature{grid-template-columns:minmax(0,1fr)}
  .pulse-feature .body{padding:26px}
  .team{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .a-grid{grid-template-columns:minmax(0,1fr)}
  .legal{padding:28px 22px}
  .ty-card{padding:44px 24px}
  .ty-card h1{font-size:34px}
}

/* ═══ PHONE ≤ 520px ═══ */
@media(max-width:520px){
  .hero-title{font-size:42px}
  h2{font-size:31px}
  .verticals{grid-template-columns:minmax(0,1fr)}
  .vcard{min-height:auto}
  .stack{grid-template-columns:minmax(0,1fr)}
  .stack-tile{padding:18px}
  .stack-tile .art{width:60px;height:60px}
  .pm-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sec-grid{grid-template-columns:minmax(0,1fr)}
  .sec-tile.feature{grid-column:auto;flex-direction:column;align-items:flex-start}
  .integ-list{grid-template-columns:minmax(0,1fr)}
  .lic{grid-template-columns:minmax(0,1fr)}
  .pick{grid-template-columns:minmax(0,1fr)}
  .row2,.radios.cols2{grid-template-columns:minmax(0,1fr)}
  .news-grid{grid-template-columns:minmax(0,1fr)}
  .team{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-bot{flex-direction:column;text-align:center}
  .page-hero h1{font-size:36px}
  .qcard{padding:26px}
  .qtext{font-size:18px}
  .marquee-track{gap:44px}
  .marquee-track img{height:36px}
  .nav-cta .btn{padding:9px 14px;font-size:13.5px}
}

/* Respect reduced motion: stop the marquee, floats and spin. The marquee falls
   back to a wrapped static grid so no logo is hidden off-screen. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto;flex-wrap:wrap;justify-content:center;gap:28px 48px}
  .marquee-track [aria-hidden="true"]{display:none}
  .marquee-pause{display:none}
}

/* ── Gradient hover outline ───────────────────────────────────────────────
   The hover border was a flat blue (--navy-3). A gradient cannot be a
   border-color, and border-image ignores border-radius - which would square
   off these pills and rounded tiles. So the ring is a masked pseudo-element
   that inherits the element's own radius and sits exactly over the 1px border.
   ───────────────────────────────────────────────────────────────────────── */
.btn-ghost,.marquee-pause,.pm-tile,.pick a,.radios label{position:relative}
.btn-ghost:hover,.marquee-pause:hover,.pm-tile:hover,.pick a:hover,.radios label:hover{border-color:transparent}
.btn-ghost:hover::after,
.marquee-pause:hover::after,
.pm-tile:hover::after,
.pick a:hover::after,
.radios label:hover::after{
  content:"";
  position:absolute;
  inset:-1px;                 /* sit over the border box, not inside it */
  border-radius:inherit;
  padding:1px;                /* ring thickness */
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

/* ── Hero copy ────────────────────────────────────────────────────────────
   No card: the copy sits straight on the skyline, centred on the page. The
   only job left here is vertical rhythm, since the card used to supply it.
   ───────────────────────────────────────────────────────────────────────── */
.hero-copy{position:relative;z-index:1;padding:8px 0 4px}

@media(max-width:860px){
  .hero-copy{padding:0}
}

/* ── Hero backdrop ────────────────────────────────────────────────────────
   The skyline panorama spans the full browser width and is anchored to the
   bottom, where its horizon sits. It lives on a ::before rather than on .hero
   itself because a background image cannot carry its own opacity, and .hero's
   existing overflow:hidden crops it on very wide screens.
   ───────────────────────────────────────────────────────────────────────── */
.hero::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:100%;
  background:url('img/africa-skyline.webp') center bottom / 100% auto no-repeat;
  opacity:.3;
  pointer-events:none;
  z-index:0;
}
.hero > .wrap{position:relative;z-index:1}

@media(max-width:860px){
  .hero::before{background-size:auto 62%;opacity:.26}
}

/* The horse carries far more line than the other three marks, so it gets a
   little more room. Optical sizing - the tile is unchanged. */
.sb .industry-icon svg,.industry-icon.ico-sb svg{width:30px;height:30px}
.dd-ico.ico-sb svg{width:23px;height:23px}


/* ── Card behaviour ───────────────────────────────────────────────────────
   One hover for every card: a 4px rise, a deepened shadow and the gradient
   ring. Selectors are written out in full - an earlier version generated them
   by string replacement and emitted a bare `:hover`, which matched every
   element under the cursor and ringed the whole page.

   inset:0, not -1px: several of these clip with overflow:hidden and would eat
   a ring outside the padding box. position:relative is set here because most
   of them did not have it.
   ───────────────────────────────────────────────────────────────────────── */
.vcard, .stack-tile, .pm-tile, .pick a, .integ-item, .lic-card, .qcard,
.feat, .kpi, .faq-item, .news, .pulse-feature, .a-block, .award {
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.vcard:hover, .stack-tile:hover, .pm-tile:hover, .pick a:hover,
.integ-item:hover, .lic-card:hover, .qcard:hover, .feat:hover, .kpi:hover,
.faq-item:hover, .news:hover, .pulse-feature:hover, .a-block:hover,
.award:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -30px rgba(14,46,107,.35);
  border-color: transparent;
}

.vcard:hover::after, .stack-tile:hover::after, .pm-tile:hover::after,
.pick a:hover::after, .integ-item:hover::after, .lic-card:hover::after,
.qcard:hover::after, .feat:hover::after, .kpi:hover::after,
.faq-item:hover::after, .news:hover::after, .pulse-feature:hover::after,
.a-block:hover::after, .award:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .vcard:hover, .stack-tile:hover, .pm-tile:hover, .pick a:hover,
  .integ-item:hover, .lic-card:hover, .qcard:hover, .feat:hover, .kpi:hover,
  .faq-item:hover, .news:hover, .pulse-feature:hover, .a-block:hover,
  .award:hover { transform: none; }
}

/* The stack tiles carry a line of copy now, so the heading needs a wrapper to
   stack against rather than sitting beside the art as a bare flex child. */
.stack-tile > div:not(.art){min-width:0}
.stack-tile p{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}