/* =========================================================
   CYPHERA — Website Design System
   Ref: CYPHERA Brand Guidelines, August 2026
   Palette   magenta #CF4FC8 · blue #455FDA · light purple #B27FD6
             navy #14213D · near-black #020E19 · light grey #EFF2F4
   Gradient  magenta -> blue (the "ombre")
   Type      MADE Outer Sans (display) / Creato Display (body),
             with Google-hosted fallbacks so the site renders
             correctly before the licensed fonts are installed.
   ========================================================= */

/* Creato Display — the brand typeface, self-hosted from the supplied brand pack.
   MADE Outer Sans is deliberately NOT shipped: the supplied files are marked
   "PERSONAL USE", which does not cover a commercial site. */
@font-face{font-family:'Creato Display';src:url('fonts/CreatoDisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/CreatoDisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/CreatoDisplay-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('fonts/CreatoDisplay-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* brand colours, straight from the guidelines */
  --magenta:#CF4FC8;
  --blue:#455FDA;
  --purple:#B27FD6;
  --navy:#14213D;
  --ink:#020E19;
  --mist:#EFF2F4;
  --white:#FFFFFF;

  /* derived working tokens */
  --ombre:linear-gradient(100deg,var(--magenta) 0%,#8A57D1 50%,var(--blue) 100%);
  --ombre-soft:linear-gradient(100deg,rgba(207,79,200,.12),rgba(69,95,218,.12));
  --text:#0B1420;
  --text-dim:#48535F;
  --text-faint:#7A838D;
  --on-dark:#FFFFFF;
  --on-dark-dim:rgba(255,255,255,.72);
  --on-dark-faint:rgba(255,255,255,.48);
  --rule:#DFE4E9;
  --rule-dark:rgba(255,255,255,.14);
  --card:#FFFFFF;

  --font-display:'Creato Display',system-ui,-apple-system,sans-serif;
  --font-body:'Creato Display',system-ui,-apple-system,sans-serif;

  --max-w:1320px;
  --gut:32px;
  --r:14px;      /* the new brand is soft-cornered, unlike the old sharp-edge system */
  --r-sm:10px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--magenta); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-0.015em;
  line-height:1.1;
}
h1{ font-size:clamp(2.25rem,4.6vw,3.75rem); }
h2{ font-size:clamp(1.75rem,3.1vw,2.6rem); }
h3{ font-size:1.22rem; line-height:1.25; letter-spacing:-0.01em; }
h4{ font-size:1.02rem; }
p{ margin:0 0 1.1em; }
.lede{ font-size:1.16rem; color:var(--text-dim); }
.container{ max-width:var(--max-w); margin:0 auto; padding:0 var(--gut); }
.narrow{ max-width:780px; }

/* ---------- eyebrow / kicker ---------- */
.kicker{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1.1em;
  background:var(--ombre);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.on-dark .kicker, .kicker.on-dark{
  background:none; -webkit-text-fill-color:initial; color:var(--purple);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:600; font-size:.97rem;
  padding:14px 26px; border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background:var(--ombre); color:#fff; box-shadow:0 6px 20px rgba(122,60,180,.28); }
.btn-primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 26px rgba(122,60,180,.38); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.34); }
.on-dark .btn-ghost:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }
.btn-sm{ padding:10px 18px; font-size:.88rem; }
/* for use on the ombre panels, where a translucent button would sit on
   whichever part of the gradient happens to be behind it */
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:#fff; color:var(--blue); transform:translateY(-1px); }
.textlink{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; font-size:.95rem; color:var(--blue);
}
.textlink:hover{ gap:.65em; }

/* ---------- top bar + nav ---------- */
.utility{
  background:var(--ink); color:var(--on-dark-faint);
  font-size:.79rem; letter-spacing:.02em;
}
.utility .container{ display:flex; justify-content:flex-end; gap:26px; padding-top:9px; padding-bottom:9px; }
.utility a{ color:var(--on-dark-dim); }
.utility a:hover{ color:#fff; }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--rule);
  /* no backdrop-filter / transform here: either would become the containing
     block for the position:fixed mobile menu below and break it */
}
.nav-row{
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--gut);
}
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ height:34px; width:auto; }
.main-nav > ul{ display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px; }
.main-nav li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:.35em;
  padding:10px 14px; border-radius:var(--r-sm);
  font-weight:500; font-size:.97rem; color:var(--text);
}
.main-nav > ul > li > a:hover{ color:var(--ink); background:var(--mist); }
.main-nav > ul > li.current > a{ color:var(--blue); }
.caret{ width:9px; height:9px; opacity:.5; flex:0 0 auto; }
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:310px;
  background:#fff; border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:0 22px 48px rgba(2,14,25,.14);
  padding:10px; display:none;
}
.dropdown::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
.main-nav li:hover > .dropdown{ display:block; }
.dropdown a{ display:block; padding:10px 12px; border-radius:var(--r-sm); color:var(--text); font-size:.94rem; font-weight:500; }
.dropdown a:hover{ background:var(--mist); color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.nav-cta-mobile{ display:none; }

.nav-toggle{
  display:none; width:42px; height:42px; padding:0;
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-sm);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- sections ---------- */
section{ padding:88px 0; }
section.tight{ padding:56px 0; }
.bg-mist{ background:var(--mist); }
.bg-white{ background:#fff; }
.section-head{ max-width:760px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p:last-child{ margin-bottom:0; }

/* dark sections use the brand pattern as the backdrop */
.on-dark{ background:var(--ink); color:var(--on-dark); position:relative; }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; }
.on-dark p{ color:var(--on-dark-dim); }
.on-dark .lede{ color:var(--on-dark-dim); }
.pattern-bg{ position:relative; background-color:var(--ink); }
.pattern-bg::before{
  content:""; position:absolute; inset:0;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIgdmlld0JveD0iMCAwIDMyOSAxOTgiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcC0wIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMjIyIDAgTCAzMjkgMCBMIDMyOSA5MCBMIDIyMiA5MCBaIE0gMjIyIDAgIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTAuMDI5IiB5MT0iMCIgeDI9IjEuMDA1IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtNzUuOTg2LCAtMC4wMDAsIC0wLjAwMCwgNzUuOTg2LCAzNy45OSwgLTY3LjU4NikiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjE3NSUsIDMwLjk3OSUsIDc4LjQzMCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNTExIiBzdG9wLWNvbG9yPSJyZ2IoNTQuMTAzJSwgMzQuMTE4JSwgODEuOTYxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjExOSUsIDM3LjI0NiUsIDg1LjQ4MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC0xIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMjgxIDAgTCAzMjkgMCBMIDMyOSA5OSBMIDI4MSA5OSBaIE0gMjgxIDAgIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMC43MzQiIHkxPSIwIiB4Mj0iMC45OTYiIHkyPSIwIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xMTQuNTA4LCAtMC4wMDAsIC0wLjAwMCwgMTE0LjUwOCwgNDQuNzM1LCAtMzMuMDcxKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoNDEuNDA2JSwgMzUuNTkxJSwgODMuNjE4JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSJyZ2IoMzQuNDQ1JSwgMzYuMzk2JSwgODQuNTI0JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjM3NSUsIDM3LjIxNiUsIDg1LjQ0NyUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC0yIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMCAwIEwgMTA3IDAgTCAxMDcgOTkgTCAwIDk5IFogTSAwIDAgIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMC4wMDMiIHkxPSIwIiB4Mj0iMC43MzQiIHkyPSIwIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xMTQuNTA4LCAtMC4wMDAsIC0wLjAwMCwgMTE0LjUwOCwgNDQuNzM1LCAtMzMuMDcxKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoODEuMDAyJSwgMzAuOTk5JSwgNzguNDUzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSJyZ2IoNjEuMzU4JSwgMzMuMjc2JSwgODEuMDE1JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDQxLjU2MCUsIDM1LjU3MiUsIDgzLjU5NiUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC0zIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMjgxIDk5IEwgMzI5IDk5IEwgMzI5IDE5OCBMIDI4MSAxOTggWiBNIDI4MSA5OSAiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLXBhdHRlcm4tMyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwLjczNCIgeTE9IjAiIHgyPSIwLjk5NiIgeTI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTExNC41MDYsIC0wLjAwMCwgLTAuMDAwLCAxMTQuNTA2LCAwLjg2NSwgLTMzLjA3MCkiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDQxLjQwNCUsIDM1LjU5MSUsIDgzLjYxOCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0icmdiKDM0LjQ0NSUsIDM2LjM5NiUsIDg0LjUyNCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyNy4zNzUlLCAzNy4yMTYlLCA4NS40NDclKSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9ImNsaXAtNCI+PHBhdGggY2xpcC1ydWxlPSJub256ZXJvIiBkPSJNIDIyMiAxMDggTCAzMjkgMTA4IEwgMzI5IDE5OCBMIDIyMiAxOTggWiBNIDIyMiAxMDggIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTAuMDI5IiB5MT0iMCIgeDI9IjEuMDA1IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtNzUuOTg2LCAtMC4wMDAsIC0wLjAwMCwgNzUuOTg2LCAzNy45OSwgLTY3LjU4NikiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjE3NSUsIDMwLjk3OSUsIDc4LjQzMCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNTExIiBzdG9wLWNvbG9yPSJyZ2IoNTQuMTAzJSwgMzQuMTE4JSwgODEuOTYxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjExOSUsIDM3LjI0NiUsIDg1LjQ4MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLXBhdHRlcm4tNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwLjAwMyIgeTE9IjAiIHgyPSIwLjk5NiIgeTI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTExNC41MDYsIC0wLjAwMCwgLTAuMDAwLCAxMTQuNTA2LCAwLjg2NSwgLTMzLjA3MCkiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjAwMiUsIDMwLjk5OSUsIDc4LjQ1MyUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0icmdiKDU0LjEzNSUsIDM0LjExNCUsIDgxLjk1OCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyNy4yNjUlLCAzNy4yMjklLCA4NS40NjIlKSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTAuMDI5IiB5MT0iMCIgeDI9IjEuMDA1IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtNzUuOTg2LCAtMC4wMDAsIC0wLjAwMCwgNzUuOTg2LCAzNy45OSwgLTY3LjU4NikiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjE3NSUsIDMwLjk3OSUsIDc4LjQzMCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNTExIiBzdG9wLWNvbG9yPSJyZ2IoNTQuMTAzJSwgMzQuMTE4JSwgODEuOTYxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjExOSUsIDM3LjI0NiUsIDg1LjQ4MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLXBhdHRlcm4tNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwLjAwMyIgeTE9IjAiIHgyPSIwLjk5NiIgeTI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTExNC41MDgsIC0wLjAwMCwgLTAuMDAwLCAxMTQuNTA4LCA0NC43MzUsIC0zMy4wNzEpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9InJnYig4MS4wMDIlLCAzMC45OTklLCA3OC40NTMlKSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9InJnYig1NC4xMzUlLCAzNC4xMTQlLCA4MS45NTglKSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjcuMjY1JSwgMzcuMjI5JSwgODUuNDYyJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJjbGlwLTUiPjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSAwIDk5IEwgMTA3IDk5IEwgMTA3IDE5OCBMIDAgMTk4IFogTSAwIDk5ICIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItcGF0dGVybi04IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAuMDAzIiB5MT0iMCIgeDI9IjAuNzM0IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMTE0LjUwNiwgLTAuMDAwLCAtMC4wMDAsIDExNC41MDYsIDAuODY2LCAtMzMuMDcwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoODEuMDAyJSwgMzAuOTk5JSwgNzguNDUzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSJyZ2IoNjEuMzU4JSwgMzMuMjc2JSwgODEuMDE1JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDQxLjU1OCUsIDM1LjU3MiUsIDgzLjU5OCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC02Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIvPjwvY2xpcFBhdGg+PGcgaWQ9InNvdXJjZS01IiBjbGlwLXBhdGg9InVybCgjY2xpcC02KSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMCkiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi0wKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIC0wLjAwMSAtMC4wMDEgTCAtMzYuMTgwIC02Mi42NjQgQyAtMzcuOTM2IC02NS43MTEgLTM3LjkzNiAtNjkuNDY1IC0zNi4xODAgLTcyLjUwOCBMIC0wLjAwMSAtMTM1LjE3MSBMIDMwLjc1MiAtODkuNjE0IEMgMzkuNzM1IC03Ni4zMDEgMzkuNzM1IC01OC44NzIgMzAuNzUyIC00NS41NTkgWiBNIC0wLjAwMSAtMC4wMDEgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCAyNzguNzg2LCA3NC4zNDUpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTEpIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2U9InVybCgjbGluZWFyLXBhdHRlcm4tMSkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTSAwLjAwMSAwIEwgLTY4LjgzMiAwIEwgLTM1Ljg5NSAtNDguNzk5IEMgLTI4LjU3NSAtNTkuNjQxIC0xNi4zNDcgLTY2LjE0MyAtMy4yNjEgLTY2LjE0MyBMIDQzLjg3MCAtNjYuMTQzIEwgOC41MjUgLTQuOTIxIEMgNi43NjUgLTEuODc1IDMuNTE3IDAgMC4wMDEgMCBaIE0gMC4wMDEgMCAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDM3Mi4yMjQsIDgyLjUpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTIpIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2U9InVybCgjbGluZWFyLXBhdHRlcm4tMikiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTSAwLjAwMSAwIEwgLTY4LjgzMiAwIEwgLTM1Ljg5NSAtNDguNzk5IEMgLTI4LjU3NSAtNTkuNjQxIC0xNi4zNDcgLTY2LjE0MyAtMy4yNjEgLTY2LjE0MyBMIDQzLjg3MCAtNjYuMTQzIEwgOC41MjUgLTQuOTIxIEMgNi43NjUgLTEuODc1IDMuNTE3IDAgMC4wMDEgMCBaIE0gMC4wMDEgMCAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDQzLjIyNCwgODIuNSkiLz48L2c+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMykiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi0zKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIDAuMDAwIC0wLjAwMCBMIC00Ny4xMzAgLTAuMDAwIEMgLTYwLjIxNyAtMC4wMDAgLTcyLjQ0NSAtNi40OTkgLTc5Ljc2NCAtMTcuMzQxIEwgLTExMi42OTggLTY2LjE0MCBMIC00My44NzEgLTY2LjE0MCBDIC00MC4zNTUgLTY2LjE0MCAtMzcuMTAzIC02NC4yNjUgLTM1LjM0NyAtNjEuMjE4IFogTSAwLjAwMCAtMC4wMDAgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCA0MjAuMzM0LCAxODguMjU0KSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcC00KSI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlPSJ1cmwoI2xpbmVhci1wYXR0ZXJuLTQpIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0gLTAuMDAxIC0wLjAwMSBMIC0zNi4xODAgLTYyLjY2NCBDIC0zNy45MzYgLTY1LjcxMSAtMzcuOTM2IC02OS40NjUgLTM2LjE4MCAtNzIuNTA4IEwgLTAuMDAxIC0xMzUuMTcxIEwgMzAuNzUyIC04OS42MTQgQyAzOS43MzUgLTc2LjMwMSAzOS43MzUgLTU4Ljg3MiAzMC43NTIgLTQ1LjU1OCBaIE0gLTAuMDAxIC0wLjAwMSAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDI3OC43ODYsIDI3Mi4zNDUpIi8+PC9nPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi01KSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIDAuMDAwIC0wLjAwMCBMIC00Ny4xMzAgLTAuMDAwIEMgLTYwLjIxNyAtMC4wMDAgLTcyLjQ0NSAtNi40OTkgLTc5Ljc2NCAtMTcuMzQxIEwgLTExMi42OTggLTY2LjE0MCBMIC00My44NzEgLTY2LjE0MCBDIC00MC4zNTUgLTY2LjE0MCAtMzcuMTAzIC02NC4yNjUgLTM1LjM0NyAtNjEuMjE4IFogTSAwLjAwMCAtMC4wMDAgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCAyNTUuODM0LCA4OS4yNTQpIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlPSJ1cmwoI2xpbmVhci1wYXR0ZXJuLTYpIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0gLTAuMDAxIC0wLjAwMSBMIC0zNi4xODAgLTYyLjY2NCBDIC0zNy45MzYgLTY1LjcxMSAtMzcuOTM2IC02OS40NjUgLTM2LjE4MCAtNzIuNTA4IEwgLTAuMDAxIC0xMzUuMTcxIEwgMzAuNzUyIC04OS42MTQgQyAzOS43MzUgLTc2LjMwMSAzOS43MzUgLTU4Ljg3MiAzMC43NTIgLTQ1LjU1OCBaIE0gLTAuMDAxIC0wLjAwMSAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDExNC4yODYsIDE3My4zNDUpIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlPSJ1cmwoI2xpbmVhci1wYXR0ZXJuLTcpIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0gMC4wMDEgLTAuMDAwIEwgLTY4LjgzMiAtMC4wMDAgTCAtMzUuODk1IC00OC43OTkgQyAtMjguNTc1IC01OS42NDEgLTE2LjM0NyAtNjYuMTQzIC0zLjI2MSAtNjYuMTQzIEwgNDMuODcwIC02Ni4xNDMgTCA4LjUyNSAtNC45MjEgQyA2Ljc2NSAtMS44NzUgMy41MTcgLTAuMDAwIDAuMDAxIC0wLjAwMCBaIE0gMC4wMDEgLTAuMDAwICIgdHJhbnNmb3JtPSJtYXRyaXgoMS4wOTYsIDAsIDAsIDEuMSwgMjA3LjcyNCwgMTgxLjUpIi8+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtNSkiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi04KSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIDAuMDAwIC0wLjAwMCBMIC00Ny4xMzAgLTAuMDAwIEMgLTYwLjIxNyAtMC4wMDAgLTcyLjQ0NSAtNi40OTkgLTc5Ljc2NCAtMTcuMzQxIEwgLTExMi42OTggLTY2LjE0MCBMIC00My44NzEgLTY2LjE0MCBDIC00MC4zNTUgLTY2LjE0MCAtMzcuMTAzIC02NC4yNjUgLTM1LjM0NyAtNjEuMjE4IFogTSAwLjAwMCAtMC4wMDAgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCA5MS4zMzQsIDE4OC4yNTQpIi8+PC9nPjwvZz48cGF0dGVybiBpZD0icGF0dGVybi0wIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIgdmlld0JveD0iMCAwIDMyOSAxOTgiIHBhdHRlcm5UcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDE5OCkiPjx1c2UgeGxpbms6aHJlZj0iI3NvdXJjZS01Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIgZmlsbD0idXJsKCNwYXR0ZXJuLTApIi8+PC9zdmc+IA==') repeat; background-size:329px 198px;
  opacity:.9; pointer-events:none;
}
.pattern-bg > *{ position:relative; z-index:1; }

/* ---------- hero on the brand wallpaper ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink) url('img/wallpaper.jpg') center right / cover no-repeat;
  color:#fff;
  padding:120px 0 108px;
}
.hero::after{
  /* keeps headline legible over the brightest part of the ombre */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(2,14,25,.86) 0%, rgba(2,14,25,.62) 42%, rgba(2,14,25,.12) 78%, rgba(2,14,25,0) 100%);
}
.hero > .container{ position:relative; z-index:1; }
.hero h1,.hero h2{ color:#fff; }
.hero p{ color:rgba(255,255,255,.86); }
.hero-content{ max-width:720px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero.compact{ padding:78px 0 74px; }
.hero.compact h1{ font-size:clamp(2rem,3.6vw,2.9rem); }

.breadcrumb{ font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:18px; }
.breadcrumb a{ color:rgba(255,255,255,.72); }
.breadcrumb a:hover{ color:#fff; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:22px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cols-5{ grid-template-columns:repeat(5,1fr); }
/* 5 cards as 3 + 2, no empty cell */
.grid.five{ grid-template-columns:repeat(6,1fr); }
.grid.five > *{ grid-column:span 2; }
.grid.five > *:nth-child(4), .grid.five > *:nth-child(5){ grid-column:span 3; }

.card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
  padding:28px; display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card > p{ color:var(--text-dim); font-size:.98rem; }
.card > p:last-of-type{ margin-bottom:0; }
.card .textlink{ margin-top:auto; padding-top:16px; }
a.card:hover, .card.linked:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(2,14,25,.09); border-color:#CBD3DB; }
.card-topline{ height:3px; border-radius:3px; background:var(--ombre); width:46px; margin-bottom:20px; }
.on-dark .card{ background:rgba(255,255,255,.05); border-color:var(--rule-dark); }
.on-dark .card > p{ color:var(--on-dark-dim); }

.icon-hex{ width:44px; height:44px; margin-bottom:18px; }

/* numbered approach steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule); }
.step{ padding:30px 28px 10px 28px; border-right:1px solid var(--rule); }
.step:first-child{ padding-left:0; }
.step:last-child{ border-right:none; }
.step .num{
  font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.04em;
  background:var(--ombre); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:block; margin-bottom:12px;
}
.step h3{ font-size:1.06rem; margin-bottom:8px; }
.step p{ color:var(--text-dim); font-size:.95rem; margin-bottom:0; }

/* ---------- feature rows (solution detail pages) ---------- */
.feature-row{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:52px;
  padding:40px 0; border-bottom:1px solid var(--rule); align-items:start;
}
.feature-row:first-child{ padding-top:8px; }
.feature-row:last-child{ border-bottom:none; }
.feature-row h3{ font-size:1.34rem; margin-bottom:0; }
.feature-row p{ color:var(--text-dim); margin-bottom:0; font-size:1.04rem; }
.feature-row .aside{
  border-radius:var(--r); background:var(--mist); padding:26px;
  font-size:.94rem; color:var(--text-dim);
}

/* ---------- the ombre panel: the Instagram/LinkedIn post design, as a
   page-break / case-study block. Text stays editable HTML. ---------- */
.ombre-panel{
  position:relative; overflow:hidden; color:#fff;
  background:var(--ink) url('img/wallpaper.jpg') center / cover no-repeat;
  border-radius:var(--r);
  padding:64px 56px;
}
.ombre-panel.light{
  /* softer than the dark variant on purpose: the copy on this one is dark ink,
     so the ombre has to stay pale enough to keep text legible over it */
  background:
    radial-gradient(110% 120% at 94% 88%, rgba(207,79,200,.55) 0%, rgba(207,79,200,0) 62%),
    radial-gradient(110% 120% at 2% 100%, rgba(69,95,218,.42) 0%, rgba(69,95,218,0) 64%),
    linear-gradient(150deg,#FFFFFF 0%,#F7F5FD 42%,#F2ECFA 68%,#FBF1FB 100%);
  color:var(--ink);
}
.ombre-panel.light h2,.ombre-panel.light h3{ color:var(--ink); }
.ombre-panel.light p{ color:#2C3542; }
.ombre-panel::before{
  /* the thin inset keyline from the post designs */
  content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.35);
  border-radius:calc(var(--r) - 6px); pointer-events:none;
}
.ombre-panel.light::before{ border-color:rgba(2,14,25,.18); }
.ombre-panel > *{ position:relative; }
.ombre-panel h2{ color:#fff; max-width:22ch; font-size:clamp(1.7rem,3vw,2.5rem); }
.ombre-panel p{ color:rgba(255,255,255,.9); max-width:56ch; }
.panel-mark{ height:30px; width:auto; margin-bottom:26px; }
.panel-foot{
  margin-top:32px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; font-size:.86rem; color:rgba(255,255,255,.72);
}
.ombre-panel.light .panel-foot{ color:rgba(11,20,32,.66); }
.panel-quote{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.3rem,2.3vw,1.9rem); line-height:1.25; color:#fff; margin:0 0 20px;
  max-width:30ch;
}
.panel-stats{ display:flex; gap:44px; flex-wrap:wrap; margin-top:28px; }
.panel-stats .n{ font-family:var(--font-display); font-weight:700; font-size:2rem; color:#fff; }
.panel-stats .l{ font-size:.86rem; color:rgba(255,255,255,.72); }

/* placeholder marker for copy that still needs writing */
.needs-copy{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; margin-bottom:12px;
  background:rgba(255,255,255,.18); color:#fff; border:1px dashed rgba(255,255,255,.5);
}
.ombre-panel.light .needs-copy, .bg-mist .needs-copy, .bg-white .needs-copy{
  background:#FFF4D6; color:#7A5B00; border-color:#E3C25A;
}

/* ---------- security landscape graphic ---------- */
.landscape{ display:flex; justify-content:center; background:#fff; border-radius:var(--r); padding:34px 24px; }
.landscape svg{ width:100%; max-width:620px; height:auto; }

/* ---------- contact ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.87rem; font-weight:600; color:var(--text); }
.field input,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  padding:13px 15px; border:1px solid var(--rule); border-radius:var(--r-sm); background:#fff;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(69,95,218,.14); }
.field textarea{ min-height:130px; resize:vertical; }
.contact-detail{ font-size:1.02rem; }

/* ---------- live contact form ----------
   Jetpack renders this form. Its wrappers are plain divs and its inputs carry
   .grunion-field, so everything is targeted through the .cy-form wrapper with
   enough specificity to beat Jetpack's own stylesheet. Jetpack enqueues its
   form CSS while rendering the shortcode, so it lands after this file and wins
   any tie on source order — hence the deliberately long selectors rather than
   !important, which would be harder to override later. */
.cy-form{ margin-top:4px; }
.cy-form form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cy-form form > div{ display:flex; flex-direction:column; gap:7px; min-width:0; }
/* the message field and the submit button each take the full row */
.cy-form form > div:has(textarea){ grid-column:1 / -1; }
.cy-form form > button[type=submit]{ grid-column:1 / -1; justify-self:start; }

.cy-form form.contact-form label.grunion-field-label{
  font-size:.87rem; font-weight:600; color:var(--text); margin:0;
}
.cy-form .grunion-label-required{ color:var(--magenta); }

.cy-form form.contact-form input.grunion-field,
.cy-form form.contact-form textarea.grunion-field{
  width:100%; max-width:100%; box-sizing:border-box; margin:0;
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  padding:13px 15px; border:1px solid var(--rule); border-radius:var(--r-sm); background:#fff;
}
.cy-form form.contact-form input.grunion-field:focus,
.cy-form form.contact-form textarea.grunion-field:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(69,95,218,.14);
}
.cy-form form.contact-form textarea.grunion-field{ min-height:130px; resize:vertical; }

.cy-form form.contact-form button.pushbutton-wide,
.cy-form form.contact-form button[type=submit]{
  width:auto; font-family:var(--font-body); font-weight:700; font-size:1rem;
  cursor:pointer; color:#fff; border:0; border-radius:999px; padding:14px 30px;
  background:var(--ombre); box-shadow:0 6px 20px rgba(122,60,180,.28);
}
.cy-form form.contact-form button.pushbutton-wide:hover,
.cy-form form.contact-form button[type=submit]:hover{
  transform:translateY(-1px); box-shadow:0 10px 26px rgba(122,60,180,.38);
}

/* validation message under a field, and Jetpack's post-send confirmation */
.cy-form .contact-form__input-error{ font-size:.85rem; color:var(--magenta); }
.cy-form .contact-form-submission{
  grid-column:1 / -1; background:#fff; border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:22px 24px;
}
/* the anti-spam honeypot must stay invisible to people */
.cy-form .akismet-fields-container{ position:absolute; left:-9999px; }

@media (max-width:760px){
  .cy-form form{ grid-template-columns:1fr; }
}

/* ---------- photo hero (About) ---------- */
/* The picture is a cover crop so it never stretches; the overlay is a
   left-to-right navy wash, heavy enough behind the copy for white text and
   thinning out so the skyline and sunset carry the right-hand side. */
.hero.photo{
  background-color:var(--ink);
  background-repeat:no-repeat;
  background-size:cover;
}
.hero.photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(2,14,25,.93) 0%,
    rgba(2,14,25,.88) 26%,
    rgba(2,14,25,.62) 52%,
    rgba(2,14,25,.30) 74%,
    rgba(2,14,25,.10) 100%);
}
.hero.photo .hero-content{ max-width:660px; }
/* Narrow screens: the copy spans the full width, so the left-to-right wash
   would leave the end of each line on the bright sunset. Lay a vertical wash
   underneath the text instead and keep a lighter horizontal one for depth. */
@media (max-width:760px){
  .hero.photo::after{
    background:
      linear-gradient(180deg, rgba(2,14,25,.88) 0%, rgba(2,14,25,.80) 58%, rgba(2,14,25,.52) 100%),
      linear-gradient(90deg, rgba(2,14,25,.55) 0%, rgba(2,14,25,.10) 100%);
  }
}

/* ---------- sector tiles with a photograph on top ---------- */
/* One aspect ratio for all four so the row stays even whatever the source
   crop, and the picture butts up to the tile edges rather than sitting in
   the card padding. */
.card.has-image{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card.has-image .card-image{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.card.has-image .card-body{ padding:26px 26px 30px; }
.card.has-image .card-topline{ display:none; }
.card.has-image h3{ margin-top:0; }

/* ---------- wide banner under a card row ---------- */
.band-image{ margin-top:44px; }
.band-image img{
  display:block; width:100%; height:auto;
  border-radius:var(--r);
}

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--on-dark-dim); padding:64px 0 30px; position:relative; }
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIgdmlld0JveD0iMCAwIDMyOSAxOTgiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcC0wIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMjIyIDAgTCAzMjkgMCBMIDMyOSA5MCBMIDIyMiA5MCBaIE0gMjIyIDAgIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTAuMDI5IiB5MT0iMCIgeDI9IjEuMDA1IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtNzUuOTg2LCAtMC4wMDAsIC0wLjAwMCwgNzUuOTg2LCAzNy45OSwgLTY3LjU4NikiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjE3NSUsIDMwLjk3OSUsIDc4LjQzMCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNTExIiBzdG9wLWNvbG9yPSJyZ2IoNTQuMTAzJSwgMzQuMTE4JSwgODEuOTYxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjExOSUsIDM3LjI0NiUsIDg1LjQ4MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC0xIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMjgxIDAgTCAzMjkgMCBMIDMyOSA5OSBMIDI4MSA5OSBaIE0gMjgxIDAgIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMC43MzQiIHkxPSIwIiB4Mj0iMC45OTYiIHkyPSIwIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xMTQuNTA4LCAtMC4wMDAsIC0wLjAwMCwgMTE0LjUwOCwgNDQuNzM1LCAtMzMuMDcxKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoNDEuNDA2JSwgMzUuNTkxJSwgODMuNjE4JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSJyZ2IoMzQuNDQ1JSwgMzYuMzk2JSwgODQuNTI0JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjM3NSUsIDM3LjIxNiUsIDg1LjQ0NyUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC0yIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMCAwIEwgMTA3IDAgTCAxMDcgOTkgTCAwIDk5IFogTSAwIDAgIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMC4wMDMiIHkxPSIwIiB4Mj0iMC43MzQiIHkyPSIwIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xMTQuNTA4LCAtMC4wMDAsIC0wLjAwMCwgMTE0LjUwOCwgNDQuNzM1LCAtMzMuMDcxKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoODEuMDAyJSwgMzAuOTk5JSwgNzguNDUzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSJyZ2IoNjEuMzU4JSwgMzMuMjc2JSwgODEuMDE1JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDQxLjU2MCUsIDM1LjU3MiUsIDgzLjU5NiUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC0zIj48cGF0aCBjbGlwLXJ1bGU9Im5vbnplcm8iIGQ9Ik0gMjgxIDk5IEwgMzI5IDk5IEwgMzI5IDE5OCBMIDI4MSAxOTggWiBNIDI4MSA5OSAiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLXBhdHRlcm4tMyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwLjczNCIgeTE9IjAiIHgyPSIwLjk5NiIgeTI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTExNC41MDYsIC0wLjAwMCwgLTAuMDAwLCAxMTQuNTA2LCAwLjg2NSwgLTMzLjA3MCkiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDQxLjQwNCUsIDM1LjU5MSUsIDgzLjYxOCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0icmdiKDM0LjQ0NSUsIDM2LjM5NiUsIDg0LjUyNCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyNy4zNzUlLCAzNy4yMTYlLCA4NS40NDclKSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9ImNsaXAtNCI+PHBhdGggY2xpcC1ydWxlPSJub256ZXJvIiBkPSJNIDIyMiAxMDggTCAzMjkgMTA4IEwgMzI5IDE5OCBMIDIyMiAxOTggWiBNIDIyMiAxMDggIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTAuMDI5IiB5MT0iMCIgeDI9IjEuMDA1IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtNzUuOTg2LCAtMC4wMDAsIC0wLjAwMCwgNzUuOTg2LCAzNy45OSwgLTY3LjU4NikiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjE3NSUsIDMwLjk3OSUsIDc4LjQzMCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNTExIiBzdG9wLWNvbG9yPSJyZ2IoNTQuMTAzJSwgMzQuMTE4JSwgODEuOTYxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjExOSUsIDM3LjI0NiUsIDg1LjQ4MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLXBhdHRlcm4tNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwLjAwMyIgeTE9IjAiIHgyPSIwLjk5NiIgeTI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTExNC41MDYsIC0wLjAwMCwgLTAuMDAwLCAxMTQuNTA2LCAwLjg2NSwgLTMzLjA3MCkiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjAwMiUsIDMwLjk5OSUsIDc4LjQ1MyUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0icmdiKDU0LjEzNSUsIDM0LjExNCUsIDgxLjk1OCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyNy4yNjUlLCAzNy4yMjklLCA4NS40NjIlKSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1wYXR0ZXJuLTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTAuMDI5IiB5MT0iMCIgeDI9IjEuMDA1IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtNzUuOTg2LCAtMC4wMDAsIC0wLjAwMCwgNzUuOTg2LCAzNy45OSwgLTY3LjU4NikiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiKDgxLjE3NSUsIDMwLjk3OSUsIDc4LjQzMCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjAuNTExIiBzdG9wLWNvbG9yPSJyZ2IoNTQuMTAzJSwgMzQuMTE4JSwgODEuOTYxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI3LjExOSUsIDM3LjI0NiUsIDg1LjQ4MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLXBhdHRlcm4tNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwLjAwMyIgeTE9IjAiIHgyPSIwLjk5NiIgeTI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTExNC41MDgsIC0wLjAwMCwgLTAuMDAwLCAxMTQuNTA4LCA0NC43MzUsIC0zMy4wNzEpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9InJnYig4MS4wMDIlLCAzMC45OTklLCA3OC40NTMlKSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9InJnYig1NC4xMzUlLCAzNC4xMTQlLCA4MS45NTglKSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjcuMjY1JSwgMzcuMjI5JSwgODUuNDYyJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJjbGlwLTUiPjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSAwIDk5IEwgMTA3IDk5IEwgMTA3IDE5OCBMIDAgMTk4IFogTSAwIDk5ICIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItcGF0dGVybi04IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAuMDAzIiB5MT0iMCIgeDI9IjAuNzM0IiB5Mj0iMCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMTE0LjUwNiwgLTAuMDAwLCAtMC4wMDAsIDExNC41MDYsIDAuODY2LCAtMzMuMDcwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoODEuMDAyJSwgMzAuOTk5JSwgNzguNDUzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSJyZ2IoNjEuMzU4JSwgMzMuMjc2JSwgODEuMDE1JSkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDQxLjU1OCUsIDM1LjU3MiUsIDgzLjU5OCUpIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iY2xpcC02Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIvPjwvY2xpcFBhdGg+PGcgaWQ9InNvdXJjZS01IiBjbGlwLXBhdGg9InVybCgjY2xpcC02KSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMCkiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi0wKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIC0wLjAwMSAtMC4wMDEgTCAtMzYuMTgwIC02Mi42NjQgQyAtMzcuOTM2IC02NS43MTEgLTM3LjkzNiAtNjkuNDY1IC0zNi4xODAgLTcyLjUwOCBMIC0wLjAwMSAtMTM1LjE3MSBMIDMwLjc1MiAtODkuNjE0IEMgMzkuNzM1IC03Ni4zMDEgMzkuNzM1IC01OC44NzIgMzAuNzUyIC00NS41NTkgWiBNIC0wLjAwMSAtMC4wMDEgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCAyNzguNzg2LCA3NC4zNDUpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTEpIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2U9InVybCgjbGluZWFyLXBhdHRlcm4tMSkiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTSAwLjAwMSAwIEwgLTY4LjgzMiAwIEwgLTM1Ljg5NSAtNDguNzk5IEMgLTI4LjU3NSAtNTkuNjQxIC0xNi4zNDcgLTY2LjE0MyAtMy4yNjEgLTY2LjE0MyBMIDQzLjg3MCAtNjYuMTQzIEwgOC41MjUgLTQuOTIxIEMgNi43NjUgLTEuODc1IDMuNTE3IDAgMC4wMDEgMCBaIE0gMC4wMDEgMCAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDM3Mi4yMjQsIDgyLjUpIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTIpIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2U9InVybCgjbGluZWFyLXBhdHRlcm4tMikiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTSAwLjAwMSAwIEwgLTY4LjgzMiAwIEwgLTM1Ljg5NSAtNDguNzk5IEMgLTI4LjU3NSAtNTkuNjQxIC0xNi4zNDcgLTY2LjE0MyAtMy4yNjEgLTY2LjE0MyBMIDQzLjg3MCAtNjYuMTQzIEwgOC41MjUgLTQuOTIxIEMgNi43NjUgLTEuODc1IDMuNTE3IDAgMC4wMDEgMCBaIE0gMC4wMDEgMCAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDQzLjIyNCwgODIuNSkiLz48L2c+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMykiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi0zKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIDAuMDAwIC0wLjAwMCBMIC00Ny4xMzAgLTAuMDAwIEMgLTYwLjIxNyAtMC4wMDAgLTcyLjQ0NSAtNi40OTkgLTc5Ljc2NCAtMTcuMzQxIEwgLTExMi42OTggLTY2LjE0MCBMIC00My44NzEgLTY2LjE0MCBDIC00MC4zNTUgLTY2LjE0MCAtMzcuMTAzIC02NC4yNjUgLTM1LjM0NyAtNjEuMjE4IFogTSAwLjAwMCAtMC4wMDAgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCA0MjAuMzM0LCAxODguMjU0KSIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcC00KSI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlPSJ1cmwoI2xpbmVhci1wYXR0ZXJuLTQpIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0gLTAuMDAxIC0wLjAwMSBMIC0zNi4xODAgLTYyLjY2NCBDIC0zNy45MzYgLTY1LjcxMSAtMzcuOTM2IC02OS40NjUgLTM2LjE4MCAtNzIuNTA4IEwgLTAuMDAxIC0xMzUuMTcxIEwgMzAuNzUyIC04OS42MTQgQyAzOS43MzUgLTc2LjMwMSAzOS43MzUgLTU4Ljg3MiAzMC43NTIgLTQ1LjU1OCBaIE0gLTAuMDAxIC0wLjAwMSAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDI3OC43ODYsIDI3Mi4zNDUpIi8+PC9nPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi01KSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIDAuMDAwIC0wLjAwMCBMIC00Ny4xMzAgLTAuMDAwIEMgLTYwLjIxNyAtMC4wMDAgLTcyLjQ0NSAtNi40OTkgLTc5Ljc2NCAtMTcuMzQxIEwgLTExMi42OTggLTY2LjE0MCBMIC00My44NzEgLTY2LjE0MCBDIC00MC4zNTUgLTY2LjE0MCAtMzcuMTAzIC02NC4yNjUgLTM1LjM0NyAtNjEuMjE4IFogTSAwLjAwMCAtMC4wMDAgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCAyNTUuODM0LCA4OS4yNTQpIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlPSJ1cmwoI2xpbmVhci1wYXR0ZXJuLTYpIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0gLTAuMDAxIC0wLjAwMSBMIC0zNi4xODAgLTYyLjY2NCBDIC0zNy45MzYgLTY1LjcxMSAtMzcuOTM2IC02OS40NjUgLTM2LjE4MCAtNzIuNTA4IEwgLTAuMDAxIC0xMzUuMTcxIEwgMzAuNzUyIC04OS42MTQgQyAzOS43MzUgLTc2LjMwMSAzOS43MzUgLTU4Ljg3MiAzMC43NTIgLTQ1LjU1OCBaIE0gLTAuMDAxIC0wLjAwMSAiIHRyYW5zZm9ybT0ibWF0cml4KDEuMDk2LCAwLCAwLCAxLjEsIDExNC4yODYsIDE3My4zNDUpIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlPSJ1cmwoI2xpbmVhci1wYXR0ZXJuLTcpIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0gMC4wMDEgLTAuMDAwIEwgLTY4LjgzMiAtMC4wMDAgTCAtMzUuODk1IC00OC43OTkgQyAtMjguNTc1IC01OS42NDEgLTE2LjM0NyAtNjYuMTQzIC0zLjI2MSAtNjYuMTQzIEwgNDMuODcwIC02Ni4xNDMgTCA4LjUyNSAtNC45MjEgQyA2Ljc2NSAtMS44NzUgMy41MTcgLTAuMDAwIDAuMDAxIC0wLjAwMCBaIE0gMC4wMDEgLTAuMDAwICIgdHJhbnNmb3JtPSJtYXRyaXgoMS4wOTYsIDAsIDAsIDEuMSwgMjA3LjcyNCwgMTgxLjUpIi8+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtNSkiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZT0idXJsKCNsaW5lYXItcGF0dGVybi04KSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNIDAuMDAwIC0wLjAwMCBMIC00Ny4xMzAgLTAuMDAwIEMgLTYwLjIxNyAtMC4wMDAgLTcyLjQ0NSAtNi40OTkgLTc5Ljc2NCAtMTcuMzQxIEwgLTExMi42OTggLTY2LjE0MCBMIC00My44NzEgLTY2LjE0MCBDIC00MC4zNTUgLTY2LjE0MCAtMzcuMTAzIC02NC4yNjUgLTM1LjM0NyAtNjEuMjE4IFogTSAwLjAwMCAtMC4wMDAgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NiwgMCwgMCwgMS4xLCA5MS4zMzQsIDE4OC4yNTQpIi8+PC9nPjwvZz48cGF0dGVybiBpZD0icGF0dGVybi0wIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIgdmlld0JveD0iMCAwIDMyOSAxOTgiIHBhdHRlcm5UcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDE5OCkiPjx1c2UgeGxpbms6aHJlZj0iI3NvdXJjZS01Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMzI5IiBoZWlnaHQ9IjE5OCIgZmlsbD0idXJsKCNwYXR0ZXJuLTApIi8+PC9zdmc+IA==') repeat; background-size:329px 198px; opacity:.55; pointer-events:none;
}
.site-footer > .container{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.footer-grid img{ height:30px; margin-bottom:18px; }
.footer-grid h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:11px; }
.footer-grid a{ color:var(--on-dark-dim); font-size:.94rem; }
.footer-grid a:hover{ color:#fff; }
.footer-grid p{ font-size:.94rem; color:var(--on-dark-dim); max-width:34ch; }
.footer-bottom{
  margin-top:52px; padding-top:22px; border-top:1px solid var(--rule-dark);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.82rem; color:var(--on-dark-faint);
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .cols-5{ grid-template-columns:repeat(3,1fr); }
  .grid.five{ grid-template-columns:repeat(2,1fr); }
  .grid.five > *,
  .grid.five > *:nth-child(4), .grid.five > *:nth-child(5){ grid-column:span 1; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2){ border-right:none; }
  .step{ padding-left:28px; padding-right:28px; }
  .step:nth-child(odd){ padding-left:0; }
  .feature-row{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:900px){
  :root{ --gut:22px; }
  .nav-toggle{ display:flex; }
  /* the header CTA would push the hamburger off a phone screen —
     it moves into the menu panel instead */
  .nav-actions > .btn{ display:none; }
  .nav-cta-mobile{ display:inline-flex; width:100%; justify-content:center; margin-top:26px; }
  .main-nav{
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:#fff; z-index:100; padding:96px 22px 44px; overflow-y:auto;
  }
  .site-header.nav-open .main-nav{ display:block; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav > ul > li{ border-bottom:1px solid var(--rule); }
  .main-nav > ul > li > a{ padding:17px 4px; font-size:1.08rem; border-radius:0; }
  .main-nav > ul > li > a:hover{ background:none; }
  .caret{ display:none; }
  /* touch has no hover: sub-items render open and inline */
  .dropdown{
    display:block; position:static; min-width:0;
    border:none; box-shadow:none; padding:0 0 12px 12px; border-radius:0;
  }
  .dropdown a{ padding:9px 0; color:var(--text-dim); }
  .cols-4,.cols-3,.cols-5{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero{ padding:84px 0 76px; background-position:70% center; }
  .hero::after{ background:linear-gradient(180deg, rgba(2,14,25,.86) 0%, rgba(2,14,25,.72) 60%, rgba(2,14,25,.55) 100%); }
  .ombre-panel{ padding:44px 30px; }
  section{ padding:64px 0; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .cols-2,.cols-3,.cols-4,.cols-5,.grid.five{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--rule); padding:24px 0 20px; }
  .step:last-child{ border-bottom:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; justify-content:center; }
}

/* =========================================================
   DARK THEME
   Keeps the V1 feel — dark base, with the wallpaper, brand
   pattern and ombre doing the colour work — on the new brand.
   Applied via <body class="theme-dark">.
   ========================================================= */
body.theme-dark{
  --text:#EDF1F6;
  --text-dim:rgba(237,241,246,.74);
  --text-faint:rgba(237,241,246,.5);
  --rule:rgba(255,255,255,.13);
  --card:rgba(255,255,255,.045);
  background:var(--ink);
  color:var(--text);
}
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4{ color:#fff; }
/* :not(.btn) matters — "body.theme-dark a" outranks ".btn-primary" on
   specificity and would repaint every button's label purple */
body.theme-dark a:not(.btn){ color:var(--purple); }
body.theme-dark a:not(.btn):hover{ color:var(--magenta); }

/* section bands: white -> ink, mist -> a lifted navy */
body.theme-dark .bg-white{ background:var(--ink); }
body.theme-dark .bg-mist{ background:#0A1626; }

/* cards and panels */
body.theme-dark .card{ background:var(--card); border-color:var(--rule); }
body.theme-dark .card > p{ color:var(--text-dim); }
body.theme-dark a.card:hover,
body.theme-dark .card.linked:hover{
  border-color:rgba(255,255,255,.28); box-shadow:0 16px 36px rgba(0,0,0,.35);
}
body.theme-dark .textlink{ color:var(--purple); }
body.theme-dark .feature-row .aside{ background:rgba(255,255,255,.05); color:var(--text-dim); }

/* header + nav */
body.theme-dark .site-header{ background:rgba(2,14,25,.97); border-bottom-color:var(--rule); }
body.theme-dark .main-nav > ul > li > a{ color:var(--text); }
body.theme-dark .main-nav > ul > li > a:hover{ background:rgba(255,255,255,.07); color:#fff; }
body.theme-dark .main-nav > ul > li.current > a{ color:var(--purple); }
body.theme-dark .dropdown{
  background:#0C1B2C; border-color:var(--rule); box-shadow:0 22px 48px rgba(0,0,0,.5);
}
body.theme-dark .dropdown a{ color:var(--text-dim); }
body.theme-dark .dropdown a:hover{ background:rgba(255,255,255,.08); color:#fff; }
body.theme-dark .nav-toggle{ border-color:var(--rule); }
body.theme-dark .nav-toggle span{ background:#fff; }
body.theme-dark .utility{ border-bottom:1px solid var(--rule); }

/* buttons */
body.theme-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.32); }
body.theme-dark .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

/* the landscape graphic keeps its own light card so it reads in both themes */
body.theme-dark .landscape{ background:#fff; }

/* form fields */
body.theme-dark .field input,
body.theme-dark .field textarea{
  background:rgba(255,255,255,.05); border-color:var(--rule); color:#fff;
}
body.theme-dark .field input:focus,
body.theme-dark .field textarea:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(178,127,214,.2); }
body.theme-dark .field label{ color:var(--text); }

/* mobile menu panel */
@media (max-width:900px){
  body.theme-dark .main-nav{ background:var(--ink); }
}

/* placeholder badge on dark bands */
body.theme-dark .bg-mist .needs-copy,
body.theme-dark .bg-white .needs-copy{
  background:rgba(255,214,102,.16); color:#FFD666; border-color:rgba(255,214,102,.5);
}

/* =========================================================
   LIGHT BANDS
   Sections that stay white/off-white even on the dark site, per the
   background-colour brief: "Built on three commitments" and "Security
   shaped around your organisation" on Home, "How we work" on About.
   Declared after the dark theme so these win on specificity.
   ========================================================= */
.band-light,
body.theme-dark .band-light{
  background:#F6F7F9;
  color:#0B1420;
}
body.theme-dark .band-light h1,
body.theme-dark .band-light h2,
body.theme-dark .band-light h3,
body.theme-dark .band-light h4{ color:var(--ink); }
body.theme-dark .band-light p,
body.theme-dark .band-light .lede{ color:#48535F; }
body.theme-dark .band-light .card{
  background:#fff; border-color:#E3E7ED;
}
body.theme-dark .band-light .card > p{ color:#48535F; }
body.theme-dark .band-light a.card:hover,
body.theme-dark .band-light .card.linked:hover{
  border-color:#C7CFDA; box-shadow:0 16px 36px rgba(2,14,25,.10);
}
body.theme-dark .band-light .textlink{ color:var(--blue); }
body.theme-dark .band-light .textlink:hover{ color:var(--magenta); }
body.theme-dark .band-light .steps{ border-top-color:#E3E7ED; }
body.theme-dark .band-light .step{ border-right-color:#E3E7ED; }
body.theme-dark .band-light .feature-row{ border-bottom-color:#E3E7ED; }
body.theme-dark .band-light .kicker{
  background:var(--ombre); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.theme-dark .band-light .btn-ghost{ color:var(--ink); border-color:#D5DBE3; }
body.theme-dark .band-light .btn-ghost:hover{ border-color:var(--blue); color:var(--blue); background:transparent; }
@media (max-width:600px){
  body.theme-dark .band-light .step{ border-right:none; border-bottom:1px solid #E3E7ED; }
  body.theme-dark .band-light .step:last-child{ border-bottom:none; }
}


/* cy-form legibility fix v1 */
body.theme-dark .cy-form form.contact-form input.grunion-field,
body.theme-dark .cy-form form.contact-form textarea.grunion-field,
.cy-form form.contact-form input.grunion-field,
.cy-form form.contact-form textarea.grunion-field{
  background:#fff !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink);
  border-color:#DFE4E9 !important;
}
body.theme-dark .cy-form form.contact-form input.grunion-field::placeholder,
body.theme-dark .cy-form form.contact-form textarea.grunion-field::placeholder,
.cy-form form.contact-form input.grunion-field::placeholder,
.cy-form form.contact-form textarea.grunion-field::placeholder{
  color:#7A838D !important; opacity:1;
}
.cy-form form.contact-form input.grunion-field:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
}
.cy-form .contact-form-submission{ background:#fff !important; }
.cy-form .contact-form-submission,
.cy-form .contact-form-submission *{ color:var(--ink) !important; }
.cy-form .contact-form-submission a{ color:var(--blue) !important; }
img.emoji{
  display:inline !important; border:none !important; box-shadow:none !important;
  height:1em !important; width:1em !important; margin:0 .07em !important;
  vertical-align:-0.1em !important; background:none !important; padding:0 !important;
}


/* cy-form error banner fix */
.cy-form .contact-form__error{
  grid-column:1 / -1;
  align-items:center; gap:10px;
  border-radius:var(--r-sm); padding:12px 16px;
  font-size:.92rem; color:#fff !important;
}
.cy-form .contact-form__error *{ color:#fff !important; }



/* Jetpack toggles the error banner with a .show-errors class; its own rule for
   that lives in a stylesheet this plugin culls, so re-declare it here. */
.cy-form .contact-form__error{ display:none !important; }
.cy-form .contact-form__error.show-errors{ display:flex !important; }