/* Pronto One shared kit. Tokens and the few components every version must share so the ten read as one brand.
   Lifted from leadpronto.co.uk (agreed work): type scale, easing, 9px button with arrow chip, pill label, portrait card.
   Link fonts.css before this file. Build your own layout and modules on top; do not edit this file. */
:root{
  /* neutrals */
  --po-black:#07090B; --po-ink:#07090B; --po-white:#fff; --po-mist:#F9F9F9;
  --po-w72:rgba(255,255,255,.74); --po-w55:rgba(255,255,255,.58); --po-hair:rgba(255,255,255,.14);
  --po-ink72:rgba(7,9,11,.74); --po-hair-l:rgba(7,9,11,.14); --po-line-strong:#7E8E8B;
  /* type */
  --po-sans:"Pulp","Helvetica Neue",Arial,sans-serif;
  --po-disp:"Founders","Arial Narrow",Impact,sans-serif;
  --po-text-hero:clamp(3.5rem,1.9rem + 8vw,8.4375rem);
  --po-text-display:clamp(3.25rem,2rem + 6.4vw,6.75rem);
  --po-text-h1:clamp(3rem,2rem + 4.6vw,5.625rem);
  --po-text-h2:clamp(2.5rem,1.7rem + 4vw,4.375rem);
  --po-text-lead:clamp(1.125rem,1rem + .5vw,1.375rem);
  /* motion */
  --po-ease:cubic-bezier(.25,1,.5,1); --po-ease-strong:cubic-bezier(.16,1,.3,1);
  /* layout */
  --po-pad:clamp(20px,4vw,72px); --po-container:1680px;
  --po-section:clamp(5rem,3rem + 7vw,10.5rem);
  /* the live colour. PO.clock() or a .pal-* class sets these. One colour at a time, never two on screen as accents. */
  --acc:#ACDD88; --c-a:#04D2BB; --c-b:#A2F761; --c-ground:#021310; --c-base:#3D6B1E; --c-w1:#13D5B2; --c-w2:#B4C7A7; --acc-on-light:#2F5417;
}
/* the six colourways. --acc is the text accent on dark, --acc-on-light the accent on white or mist (AA),
   --c-a to --c-b the logo gradient, --c-ground a near-black tinted ground, --c-base a deep saturated tone, --c-w1/--c-w2 the lights. */
.pal-green{--acc:#ACDD88;--c-a:#04D2BB;--c-b:#A2F761;--c-ground:#021310;--c-base:#3D6B1E;--c-w1:#13D5B2;--c-w2:#B4C7A7;--acc-on-light:#2F5417}
.pal-gold{--acc:#FEE393;--c-a:#FFF8E4;--c-b:#FFCF47;--c-ground:#0F0F03;--c-base:#7A6010;--c-w1:#FFE180;--c-w2:#FEF3D2;--acc-on-light:#7A6010}
.pal-orange{--acc:#FBB45A;--c-a:#EF4810;--c-b:#F5F761;--c-ground:#160505;--c-base:#8B0B09;--c-w1:#FF7322;--c-w2:#FFBB4D;--acc-on-light:#B4320A}
.pal-pink{--acc:#FB91AE;--c-a:#FFC4FC;--c-b:#F76164;--c-ground:#160505;--c-base:#A42464;--c-w1:#F76265;--c-w2:#FEB8EA;--acc-on-light:#A42464}
.pal-peri{--acc:#94A7FF;--c-a:#C9CFFF;--c-b:#5476FF;--c-ground:#0A0C1C;--c-base:#3A4FBF;--c-w1:#7D8AFF;--c-w2:#C9CFFF;--acc-on-light:#3A4FBF}
.pal-blue{--acc:#65E0FE;--c-a:#E4FCFF;--c-b:#00C4FF;--c-ground:#040C16;--c-base:#10527A;--c-w1:#62D4F7;--c-w2:#B8F7FE;--acc-on-light:#10527A}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--po-black);color:var(--po-white);font:400 1.0625rem/1.6 var(--po-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,figure{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}

.po-wrap{width:100%;max-width:var(--po-container);margin-inline:auto;padding-inline:var(--po-pad)}
/* Headlines: Founders, CAPITALS only, always large. The second line of a two-line headline takes the colour. */
.po-h{font-family:var(--po-disp);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:.9;text-wrap:balance}
.po-acc{color:var(--acc)}
.po-light .po-acc{color:var(--acc-on-light)}
.po-lede{font-size:var(--po-text-lead);line-height:1.5;color:var(--po-w72);max-width:46ch;text-wrap:pretty}
.po-light{background:var(--po-mist);color:var(--po-ink)}
.po-light .po-lede{color:var(--po-ink72)}

/* Button: 9px radius, Pulp 600 sentence case, leading arrow chip. One primary action per view. Label: "Start a conversation". */
.po-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:54px;padding:0 24px 0 18px;border-radius:9px;background:#fff;color:var(--po-ink);font:600 1.0625rem/1 var(--po-sans);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform 160ms var(--po-ease)}
.po-btn .po-chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:var(--po-ink);color:var(--acc);flex:none;overflow:hidden}
.po-btn .po-chip svg{width:13px;height:13px;transition:transform 260ms var(--po-ease-strong)}
.po-btn:active{transform:scale(.97)}
.po-btn.po-sm{min-height:44px;padding:0 16px 0 12px;font-size:1rem}
.po-light .po-btn{background:var(--po-ink);color:#fff}
.po-light .po-btn .po-chip{background:#fff;color:var(--po-ink)}
@media (hover:hover) and (pointer:fine){.po-btn:hover{transform:translateY(-2px)}.po-btn:hover .po-chip svg{transform:translateX(3px)}}
/* Pill label with a dot, sentence case. Once or twice a page at most, never above every heading. */
.po-pill{display:inline-flex;align-items:center;gap:.6em;font-weight:500;font-size:1rem;line-height:1.2;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.po-pill::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--acc)}
.po-light .po-pill{background:rgba(7,9,11,.06);box-shadow:inset 0 0 0 1px var(--po-hair-l)}
.po-light .po-pill::before{background:var(--acc-on-light)}
/* Portrait card, as on leadpronto.co.uk */
.po-person{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#e9e9e6}
.po-person img{width:100%;height:100%;object-fit:cover}
.po-person figcaption{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(180deg,transparent,rgba(11,12,12,.55) 42%,rgba(11,12,12,.9));color:#fff}
.po-person b{display:block;font-weight:700;font-size:1.125rem;line-height:1.2}
.po-person span{display:block;font-size:1rem;color:rgba(255,255,255,.8)}
/* Logo: <span data-logo></span> is filled by kit.js. Size it by width. */
[data-logo] svg{display:block;width:100%;height:auto}
/* Reveal helper: add data-reveal to a block; kit.js adds .in when it enters the screen. Style the before/after yourself. */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}