/* ===== Onshore Partners — shared styles ===== */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/fraunces-var.woff2') format('woff2');
}
:root{
  --navy:#0E2A47; --navy-2:#143b62; --teal:#13B5A6; --teal-d:#087066; --teal-deep:#0a7d72;
  /* 14 Sept 2026: --teal-d was #0E998C, which is 3.53:1 on white and 2.84:1 on --sec-tint, below
     WCAG AA 4.5:1 for the eyebrows and links that use it. #087066 is 5.97 on white, 4.81 on tint. */
  --ink:#1d2b3a; --muted:#54626f; --line:#e3e9f0; --bg:#ffffff; --bg-soft:#f5f9fc; --sec-tint:#dde8f4;
  --gold:#F4B740; --radius:14px; --shadow:0 10px 30px rgba(14,42,71,.10); --maxw:1140px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:100}
.skip-link:focus{left:0}

/* ANNOUNCEMENT BAR */
.topbar{background:var(--teal-deep);color:#fff;font-size:13.5px;font-weight:600;text-align:center;padding:9px 16px;line-height:1.45}
.topbar a{color:#fff;text-decoration:underline;font-weight:800;white-space:nowrap}  /* 19 Sept 2026: the link wrapped on a phone and left the arrow stranded alone on line two. */
.topbar a:hover{opacity:.85}
@media(max-width:620px){.topbar-long{display:none}}

/* CTA RISK-REVERSAL TICKS */
.cta-ticks{display:flex;gap:10px 28px;justify-content:center;flex-wrap:wrap;margin-top:24px;font-size:14px;font-weight:600;color:#fff}
.cta-ticks span{display:inline-flex;align-items:flex-start;gap:7px;white-space:normal;max-width:100%}  /* 19 Sept 2026: was white-space:nowrap, which pushed the 80-character discount tick to 556px and gave 20 pages, the homepage among them, a 90px horizontal scroll on a 375px phone. The flex gap already keeps the tick glued to its text, so nowrap was doing nothing but that. */
.cta-ticks b{font-weight:900}

/* SOFTWARE / COMPATIBILITY CHIPS */
.chip-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 18px;font-weight:700;font-size:14px;color:var(--navy)}

/* QUICK-ENQUIRY HOVER POPOVER */
.qpop{position:fixed;z-index:200;width:312px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(14,42,71,.28);padding:18px}
.qpop[hidden]{display:none}
.qpop-t{font-weight:800;color:var(--navy);font-size:13.5px;margin-bottom:10px;line-height:1.35}
.qpop input,.qpop textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;font-size:14px;font-family:var(--font);color:var(--ink);margin-bottom:8px;box-sizing:border-box;background:#fff}
.qpop input:focus,.qpop textarea:focus{outline:none;border-color:var(--teal)}
.qpop textarea{min-height:64px;resize:vertical}
.qpop .btn{width:100%;padding:10px;font-size:14px}
.qpop-alt{font-size:12px;color:var(--muted);margin-top:9px;text-align:center}
.qpop-alt a{color:var(--teal-d);font-weight:700}
.qpop-msg{display:none;margin-top:8px;padding:9px 11px;border-radius:8px;font-size:12.5px;font-weight:600}
.qpop-msg.ok{display:block;background:#e3f6ef;color:#11885f}
.qpop-msg.err{display:block;background:#fdecea;color:#c0392b}

/* HERO CHAT BUBBLES + MOTION */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .hcard .hrow{opacity:0;animation:fadeUp .55s ease-out forwards}
  .hcard .hrow:nth-of-type(1){animation-delay:.25s}
  .hcard .hrow:nth-of-type(2){animation-delay:.45s}
  .hcard .hrow:nth-of-type(3){animation-delay:.65s}
  .grid>.reveal:nth-child(2),.steps>.reveal:nth-child(2),.why-grid>.reveal:nth-child(2),.post-grid>.reveal:nth-child(2){transition-delay:.08s}
  .grid>.reveal:nth-child(3),.steps>.reveal:nth-child(3),.why-grid>.reveal:nth-child(3),.post-grid>.reveal:nth-child(3){transition-delay:.16s}
  .grid>.reveal:nth-child(4),.steps>.reveal:nth-child(4),.why-grid>.reveal:nth-child(4),.post-grid>.reveal:nth-child(4){transition-delay:.24s}
  .grid>.reveal:nth-child(5),.why-grid>.reveal:nth-child(5){transition-delay:.32s}
}

/* FOUNDING OFFER RIBBON */
.founding-ribbon{display:inline-flex;align-items:center;gap:9px;background:rgba(244,183,64,.15);border:1px solid var(--gold);color:#7a5710;font-weight:800;font-size:13px;letter-spacing:.04em;padding:8px 18px;border-radius:30px;margin-bottom:18px}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);color:var(--navy);line-height:1.15;font-weight:600;letter-spacing:-.01em;font-optical-sizing:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:14px 26px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:none;transition:.2s;text-align:center}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 6px 18px rgba(19,181,166,.35)}
/* 14 Sept 2026: was var(--teal) #13B5A6, white text 2.56:1 on every Get a quote button. teal-deep is 5.01:1. */
.btn-primary:hover{background:var(--teal-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2)}
.btn.btn-addr{max-width:100%;white-space:normal;overflow-wrap:anywhere;padding-left:16px;padding-right:16px}
/* 20 Oct 2026: the hello@ address on /contact is one unbreakable word, 34 to 39px wider than its button, so its end ran out as white text on the white card. It may now wrap, at the @ first (a <wbr> in the markup); where it fits it stays on one line. */
.eyebrow{color:var(--teal-d);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
section{padding:84px 0}
.center{text-align:center}
.lead{font-size:19px;color:var(--muted);max-width:680px;margin:0 auto}
/* 12 Sept 2026: .lead is styled for a WHITE section (var(--muted) #54626f is dark grey on white).
   Inside a DARK hero it was dark grey on navy: 2.33:1 against the gradient's dark end and 1.83:1
   against its light end, where 4.5:1 is the minimum for body text. JH reported it as hard to read
   at the top of the calculator page and he was right; no override existed anywhere. #cdd9e6 gives
   10.18:1 and 8.01:1 against the two ends of every dark hero we use. */
.hero .lead,.post-hero .lead,.calc-hero .lead{color:#cdd9e6}
/* 14 Sept 2026 sweep: the rule above missed four dark heroes defined in page <style> blocks
   (.ct-hero contact, .uk-hero hiring-in-the-uk, .guide-hero payroll-guide, .rf-hero route finder),
   which still showed the dark-grey lead on navy at 1.83:1. Their eyebrows used --teal-d, dark teal on
   navy (1.92:1), and every dark-hero eyebrow in plain --teal was 4.47:1 against the gradient's light
   end. #3ccbbb is 5.71:1 and 7.25:1 against the two ends. */
.ct-hero .lead,.uk-hero .lead,.guide-hero .lead,.rf-hero .lead,.soon-hero .lead{color:#cdd9e6}
.hero .eyebrow,.post-hero .eyebrow,.calc-hero .eyebrow,.soon-hero .eyebrow,.quote .eyebrow,.ct-hero .eyebrow,.uk-hero .eyebrow,.guide-hero .eyebrow,.rf-hero .eyebrow{color:#3ccbbb !important}
.soon-hero a[style*="#13B5A6"]{color:#3ccbbb !important}
.soon-hero p[style*="#8aa0b4"]{color:#a9bccd !important}
.sec-head{max-width:660px;margin:0 auto 50px}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:20px}
.logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--navy));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--ink);font-weight:600;font-size:15px}
.nav-links a:hover,.nav-links a.active{color:var(--teal-d)}
.nav-cta{padding:10px 20px;font-size:14px}
.nav-links a.nav-cta{color:#fff} /* 14 Sept 2026: .nav-links a set ink-dark text, unreadable once .btn-primary moved to teal-deep */
.burger{display:none;font-size:26px;background:none;border:none;color:var(--navy);cursor:pointer;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;line-height:1;margin-right:-10px}  /* 19 Sept 2026: was 23x32 measured on a phone, under the 44px target. The negative margin keeps the glyph where it was while the hit area grows. */

/* HERO */
/* Hero: navy gradient. 20 Oct 2026: the url('london.avif') layer was removed (JH "do everything now"); the file never existed, so every page with .hero asked for it and got a 404 (link check 20 Oct). To add a photo, put the file in Website and add the url() back as the last layer. */
.hero{background:radial-gradient(1000px 460px at 82% -10%,rgba(19,181,166,.16),transparent),linear-gradient(105deg,rgba(14,42,71,.94) 26%,rgba(16,42,71,.60) 100%),#0E2A47;color:#fff;padding:92px 0 84px;position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:50px;max-width:780px}
.hero h1 .hl{color:var(--teal)}
.hero p.sub{font-size:20px;color:#cdd9e6;max-width:620px;margin:22px 0 32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-grid{display:grid;grid-template-columns:1fr;gap:46px;align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.05fr .9fr}}
.hero-art{display:flex;justify-content:center;position:relative}
.hcard{width:100%;max-width:420px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.30)}
.hcard-top{color:#cdd9e6;font-size:15px;line-height:1.4;margin-bottom:14px}
.hcard-top b{color:#fff}
.hrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.10);color:#e6edf5;font-size:15px}
.hrow:first-of-type{border-top:none}
.hbadge{flex:none;width:62px;text-align:center;background:rgba(19,181,166,.16);color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.05em;padding:7px 6px;border-radius:8px}
.hcard-cta{display:inline-block;margin-top:16px;color:var(--teal);font-weight:700;text-decoration:none}
.hcard-cta:hover{text-decoration:underline}
.flag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:30px;font-size:13px;color:#dbe6f1;font-weight:600;margin:30px 8px 0 0}
.flag b{color:#fff}

/* TRUST STRIP */
.trust{background:var(--sec-tint);border-bottom:1px solid var(--line);padding:22px 0}
.sec-tint{background:var(--sec-tint)}
.trust-row{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;align-items:center}
.trust-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--navy)}
.trust-item .tick{color:var(--teal);font-weight:900}

/* GRIDS / CARDS */
.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:.2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.card .ico{width:48px;height:48px;border-radius:12px;background:rgba(19,181,166,.12);color:var(--teal-d);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px}
.ico svg{width:26px;height:26px;display:block}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}
.card.flag-card{border:2px solid var(--teal);position:relative}
.badge-top{position:absolute;top:-12px;left:24px;background:var(--teal-deep);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:20px;letter-spacing:.04em}

/* SERVICE TILES (home) */
.svc{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}
.svc .ico{margin-bottom:16px}
.svc h3{font-size:21px;margin-bottom:8px}
.svc p{flex:1;margin-bottom:16px}
.svc .svc-link{font-weight:700;color:var(--teal-d);font-size:15px}
.svc .soon{position:absolute;top:18px;right:18px;background:var(--bg-soft);color:var(--muted);font-size:11px;font-weight:800;padding:4px 11px;border-radius:20px;letter-spacing:.04em;border:1px solid var(--line)}
.svc.live{border-color:var(--teal)}

/* PROBLEM / PANEL */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.prob-list{list-style:none;margin-top:18px}
.prob-list li{display:flex;gap:12px;margin-bottom:14px;font-size:16px}
.prob-list li .x{color:#e06a5b;font-weight:900;flex-shrink:0}
.panel{background:var(--navy);color:#fff;border-radius:18px;padding:38px}
.panel h3{color:#fff;margin-bottom:8px;font-size:22px}
.panel ul{list-style:none;margin-top:16px}
.panel li{display:flex;gap:12px;margin-bottom:14px;color:#d7e2ee;font-size:16px}
.panel li .tick{color:var(--teal);font-weight:900;flex-shrink:0}
/* 14 Sept 2026 appearance sweep: body copy pasted into a navy .panel kept its inline dark-grey
   (#2a3a4a, 1.25:1 on navy) and inline links kept --teal-d (dark teal on navy). Scoped to .panel
   so the same inline colours stay correct on the light sections where they belong. */
.panel p[style*="#2a3a4a"],.panel ul[style*="#2a3a4a"]{color:#d7e2ee !important}
.panel a[style*="teal"]{color:var(--teal) !important}

/* STEPS */
.steps .step{padding-left:6px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px}

/* PRICING */
.pricing{background:var(--sec-tint)}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column}
.price-card.feat{border:2px solid var(--navy);box-shadow:var(--shadow);position:relative}
.price-card .pill{position:absolute;top:-12px;right:24px;background:var(--gold);color:var(--navy);font-weight:800;font-size:12px;padding:5px 12px;border-radius:20px}
.price-card h3{font-size:21px}
.price-card .who{color:var(--muted);font-size:14px;margin:4px 0 18px;min-height:40px}
.price-card .amt{font-size:34px;font-weight:800;color:var(--navy)}
.price-card .was,.amt .was{color:var(--muted);text-decoration:line-through;font-weight:700;font-size:.55em;margin-right:7px;vertical-align:2px}
.price-card .amt span{font-size:15px;color:var(--muted);font-weight:600}
.price-card ul{list-style:none;margin:18px 0 24px;flex:1}
.price-card li{display:flex;gap:10px;font-size:14.5px;margin-bottom:11px}
.price-card li .tick{color:var(--teal);font-weight:900;flex-shrink:0}
.price-note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:26px}

/* QUOTE */
.quote{background:linear-gradient(180deg,#0E2A47,#143b62);color:#fff}
.quote h2{color:#fff}
.quote-card{background:#fff;color:var(--ink);border-radius:18px;padding:36px;max-width:620px;margin:30px auto 0;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:7px}
.field select,.field input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--font);color:var(--ink)}
.field select:focus,.field input:focus{outline:none;border-color:var(--teal)}
.est{background:var(--bg-soft);border:1px dashed var(--teal);border-radius:12px;padding:22px;text-align:center;margin-top:8px}
.est .big{font-size:32px;font-weight:800;color:var(--navy)}
.est .small{font-size:13px;color:var(--muted)}

/* SCHEME FINDER */
.finder{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.finder-prog{height:6px;background:var(--bg-soft);border-radius:6px;overflow:hidden;margin-bottom:28px}
.finder-prog-bar{height:100%;width:33%;background:var(--teal);border-radius:6px;transition:width .3s}
.fq{font-size:21px;font-weight:800;color:var(--navy);margin-bottom:22px;line-height:1.3}
.fopts{display:flex;flex-direction:column;gap:12px}
.fopt{text-align:left;padding:18px 20px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;font-family:var(--font)}
.fopt:hover{border-color:var(--teal);background:rgba(19,181,166,.06);transform:translateX(3px)}
.fresult{text-align:center}
.fr-tag{display:inline-block;background:rgba(19,181,166,.12);color:var(--teal-d);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:30px;margin-bottom:18px}
.fresult h3{font-size:28px;margin-bottom:12px}
#fr-body{color:var(--muted);font-size:17px;max-width:520px;margin:0 auto 18px}
.fr-meta{background:var(--bg-soft);border-radius:12px;padding:16px 20px;font-size:14.5px;color:var(--navy);margin:0 auto 24px;max-width:520px;text-align:left}
.fr-meta b{color:var(--teal-d)}
.fr-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fr-disclaim{font-size:12.5px;color:var(--muted);margin-top:18px}
.finder-back{margin-top:20px;text-align:center}
.finder-back button{background:none;border:none;color:var(--teal-d);font-weight:700;cursor:pointer;font-size:14px;font-family:var(--font)}

/* WHY / FOUNDING / TESTIMONIAL */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why{padding:26px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.why .ico{font-size:26px;margin-bottom:12px;color:var(--teal-d)}
.why .ico svg{width:28px;height:28px}
.why h3{font-size:18px;margin-bottom:8px}
.why p{color:var(--muted);font-size:14.5px}
.founding .ico{background:rgba(244,183,64,.16);color:#b9851f}
.tcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:26px}
.tcard .quote{font-size:17px;color:var(--ink);font-style:italic;margin-bottom:14px}
.tcard .who{font-size:14px;color:var(--muted)}
/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:.2s}
.step:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent}
.step-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--teal-deep);color:#fff;font-weight:800;font-size:17px;margin-bottom:14px}
/* 20 Oct 2026: was var(--teal), white numbers 2.56:1. teal-deep is 5.01:1, the same fix the buttons had on 14 Sept. */
.step h3{font-size:16.5px;color:var(--navy);margin-bottom:7px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* premium touches */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.hero .wrap{position:relative;z-index:1}
/* scroll-reveal (more pronounced) */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
  .reveal.in{opacity:1;transform:none}
}

/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 22px;margin-bottom:12px}
details summary{cursor:pointer;font-weight:700;color:var(--navy);padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';font-size:24px;color:var(--teal);font-weight:400}
details[open] summary::after{content:'\2013'}
details p{color:var(--muted);padding:0 0 20px;font-size:15px}

/* CTA BAND */
.cta-band{background:var(--teal-deep);color:#fff;text-align:center}
.cta-band h2{color:#fff;font-size:34px}
.cta-band p{color:#fff;font-size:18px;margin:14px auto 26px;max-width:560px}

/* COMING SOON */
.soon-hero{background:linear-gradient(180deg,#0E2A47,#143b62);color:#fff;text-align:center;padding:120px 0 110px}
.soon-hero .tag{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#cdd9e6;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:7px 16px;border-radius:30px;margin-bottom:22px}
.soon-hero h1{color:#fff;font-size:44px;margin-bottom:16px}
.soon-hero p{color:#cdd9e6;font-size:19px;max-width:560px;margin:0 auto 30px}
.soon-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.soon-form input{flex:1;min-width:220px;padding:14px 16px;border:none;border-radius:10px;font-size:15px;font-family:var(--font)}
.soon-list{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.soon-list a{font-size:14px;font-weight:600;color:#aebfd0;border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:30px}
.soon-list a:hover,.soon-list a.on{color:#fff;border-color:var(--teal);background:rgba(19,181,166,.15)}

/* INSIGHTS INDEX + ARTICLES */
.post-hero{background:linear-gradient(180deg,#0E2A47,#143b62);color:#fff;padding:80px 0 64px}
.post-hero .eyebrow{color:var(--teal)}
.post-hero h1{color:#fff;font-size:40px;max-width:820px}
.post-hero p{color:#cdd9e6;font-size:19px;max-width:680px;margin-top:18px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.2s;height:100%}
.post-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.post-card .cat{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d);margin-bottom:12px}
.post-card h3{font-size:20px;margin-bottom:10px;line-height:1.25}
.post-card p{color:var(--muted);font-size:15px;flex:1;margin-bottom:16px}
.post-card .read{font-weight:700;color:var(--teal-d);font-size:14.5px}
.article{max-width:760px;margin:0 auto;padding:64px 24px}
.article .crumb{font-size:14px;color:var(--muted);margin-bottom:22px}
.article .crumb a{color:var(--teal-d);font-weight:600}
.article .cat{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d);margin-bottom:14px}
.article h1{font-size:38px;line-height:1.15;margin-bottom:16px}
.article .meta{color:var(--muted);font-size:14.5px;margin-bottom:8px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.article h2{font-size:25px;margin:38px 0 14px}
.article h3{font-size:19px;margin:26px 0 10px}
.article p{font-size:17px;color:#2a3a4a;margin-bottom:16px}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{font-size:17px;color:#2a3a4a;margin-bottom:8px}
.article .lead-p{font-size:20px;color:var(--muted);line-height:1.5;margin-bottom:24px}
.article .callout{background:var(--bg-soft);border-left:4px solid var(--teal);border-radius:0 10px 10px 0;padding:18px 22px;margin:24px 0}
.article .callout p{margin:0;font-size:16px}
.article .callout b{color:var(--teal-d)}
.article table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.article th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px}
.article td{padding:10px 14px;border-bottom:1px solid var(--line)}
.article tr:nth-child(even) td{background:var(--bg-soft)}
.article .post-cta{background:var(--navy);color:#fff;border-radius:16px;padding:30px;margin:40px 0 10px;text-align:center}
.article .post-cta h3{color:#fff;font-size:22px;margin-bottom:10px}
.article .post-cta p{color:#cdd9e6;margin-bottom:20px}
.article .disclaim{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:18px}

/* FOOTER */
footer{background:var(--navy);color:#aebfd0;padding:54px 0 28px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr;gap:30px;margin-bottom:34px}
footer h4{color:#fff;font-size:15px;margin-bottom:14px}
footer a{display:block;color:#aebfd0;margin-bottom:9px}
footer a:hover{color:#fff}
@media(max-width:900px){footer a{padding:12px 0;margin-bottom:0}}  /* 20 Oct 2026: footer links were 17px tall on a phone. 12px above and below makes each 41px to tap; the stacked footer is 900px and under, so desktop is unchanged. */
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#9aabbe;font-size:13px}

@media(max-width:900px){
  .g3,.g4,.why-grid{grid-template-columns:1fr 1fr}
  .split,.foot-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:38px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:4px;background:#fff;padding:12px 24px 20px;border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(14,42,71,.14)}
  .nav-links.open a{display:flex;align-items:center;min-height:44px;width:100%}  /* 19 Sept 2026: the links were 24px tall. 44px each, with the gap cut from 18px to 4px so the drawer is no taller than it was. */
  .nav-links.open .nav-cta{align-self:stretch;justify-content:center;text-align:center}
  .burger{display:inline-flex}
  section{padding:60px 0}
}
@media(max-width:560px){
  .g3,.g4,.g2,.why-grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
}
/* 14 Sept 2026 appearance sweep, phone width (375px): the insights .post-grid stayed at three
   columns (page 240px too wide), and grid children in .split sized to their content instead of
   the column (how-it-works 134px, do-you-need-a-uk-company-to-hire 8px too wide). */
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}.panel{padding:26px}}
.split>*,.post-grid>*,.grid>*{min-width:0}
/* keep wide tables scrollable on phones instead of breaking the layout */
@media(max-width:700px){
  .article table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .article table td,.article table th{white-space:normal;min-width:96px}  /* 20 Oct 2026: was 130px, which made every three-column table 390px in a 327px column and cut the third column mid-word. 96px lets three columns fit. */
  .article .tbl-scroll>table{display:table}  /* 20 Oct 2026: a wrapped table was itself a second scroll box inside .tbl-scroll. Only the wrapper scrolls now, so the scroll cue below sits on one box. */
  .topbar a,.article .crumb a{display:inline-block;padding:12px 0;margin:-12px 0}  /* 20 Oct 2026: the top bar link (16px) and the breadcrumb link (17px) were too small to tap. The padding is cancelled by an equal negative margin, so the bar and the breadcrumb line keep their height. */
  .pt-consent input[type=checkbox],.tog input[type=checkbox]{width:20px;height:20px;flex:none}  /* 20 Oct 2026: the /partners consent box and the Employment Allowance box on /hiring-in-the-uk were 13px. */
}

/* EDITORIAL SPLIT (breaks the stacked-card rhythm) */
.editorial{display:grid;grid-template-columns:1fr;gap:38px;align-items:start}
.editorial-intro h2{font-size:30px}
@media(min-width:900px){
  .editorial{grid-template-columns:.82fr 1.18fr;gap:56px}
  .editorial-intro{position:sticky;top:96px}
}
.reasons{display:grid;grid-template-columns:1fr;gap:0}
.reason{display:flex;gap:15px;padding:18px 0;border-top:1px solid var(--line)}
.reason:first-child{border-top:none}
.reason .ico{width:40px;height:40px;flex:none;border-radius:10px;background:rgba(19,181,166,.12);color:var(--teal-d);display:flex;align-items:center;justify-content:center;margin:0}
.reason .ico svg{width:22px;height:22px}
.reason h3{font-size:16.5px;margin-bottom:4px;color:var(--navy)}
.reason p{color:var(--muted);font-size:14px;line-height:1.55}
@media(min-width:620px){
  .reasons{grid-template-columns:1fr 1fr;gap:0 30px}
  .reason:nth-child(2){border-top:none}
}

/* FOUNDER (mockup-ready; markup lives commented in index.html until a photo/bio exist) */
.founder-wrap{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:820px){.founder-wrap{grid-template-columns:.8fr 1.2fr;gap:52px}}
.founder-photo{position:relative;max-width:330px;width:100%;margin:0 auto}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block;box-shadow:var(--shadow)}
.founder-photo .ph{aspect-ratio:4/5;border-radius:18px;background:linear-gradient(160deg,var(--navy),var(--navy-2));display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:14px;font-weight:600;text-align:center;padding:20px;box-shadow:var(--shadow)}
.founder-photo .ph.mono{font-size:76px;font-weight:800;letter-spacing:.03em;color:rgba(255,255,255,.92)}
.founder-photo .ph.mono::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:0 0 18px 18px;background:var(--teal)}
.founder-photo .ph.mono{position:relative;overflow:hidden}
.founder-photo .frame{position:absolute;top:-10px;right:-10px;width:66px;height:66px;border-top:3px solid var(--teal);border-right:3px solid var(--teal);border-radius:0 18px 0 0}
.founder-body h2{font-size:30px}
.founder-body p{color:var(--muted);font-size:16px;margin-bottom:14px;max-width:560px}
.founder-name{font-weight:800;color:var(--navy);font-size:19px;margin-top:20px}
.founder-role{color:var(--teal-d);font-weight:700;font-size:14px;margin-bottom:2px}
.founder-sign{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}

/* HOW-IT-WORKS TIMELINE (breaks the stacked-card rhythm) */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.flow::before{content:'';position:absolute;top:29px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,rgba(19,181,166,.35),var(--teal),rgba(19,181,166,.35));z-index:0}
.flow-step{position:relative;text-align:center;padding-top:8px}
.flow-n{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--teal);color:var(--teal-d);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative;z-index:1;box-shadow:0 4px 14px rgba(19,181,166,.22)}
.flow-step h3{font-size:16.5px;color:var(--navy);margin-bottom:7px}
.flow-step p{color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr;gap:30px 26px}.flow::before{display:none}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}

/* ============ Premium craft layer (Aug 2026) ============ */
/* Branded keyboard-focus ring (keyboard/tab users only, not mouse clicks) */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.btn:focus-visible,button:focus-visible{outline-offset:4px}
/* Fraunces display headings want a touch more line height at small sizes */
.card h3,.svc h3,.panel h3,.step h3,.flow-step h3,.price-card h3{line-height:1.22}
/* Fine film grain over the whole page, barely there, kills the flat-gradient look */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Nav condenses + gains a shadow once you scroll */
header.nav{transition:box-shadow .25s ease,background .25s ease}
header.nav.scrolled{box-shadow:0 6px 24px rgba(14,42,71,.10);background:rgba(255,255,255,.96)}
.nav-inner{transition:height .25s ease}
header.nav.scrolled .nav-inner{height:60px}
/* Animated underline on nav links, wipes in from the left */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
/* Sheen sweep across the primary button on hover */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::before{left:135%}
/* Cards lift a little more, smoother curve */
.card{transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s}
.card:hover{transform:translateY(-4px)}
/* Stats / by-the-numbers band */
.stats-band{background:var(--navy)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stats-band .stat .num{font-family:var(--display);font-weight:600;font-size:clamp(40px,6vw,58px);color:#7fe9dd;line-height:1;letter-spacing:-.02em}
.stats-band .stat .num .u{font-size:.42em;color:#cdd9e6;letter-spacing:0;margin-left:3px}
.stats-band .stat .lbl{color:#b9c7d6;font-size:14.5px;margin-top:12px;line-height:1.45}
@media(max-width:720px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}}
@media(prefers-reduced-motion:reduce){.btn-primary::before{display:none}.card:hover{transform:none}header.nav.scrolled .nav-inner{height:72px}}

/* Responsive tables, added 10 Sept 2026. WHY: 44 pages carried 67 tables and only ONE handled
   overflow, so on a 375px phone the 6-column pricing table pushed the whole PAGE sideways by
   270px. Copies the existing .cmp-wrap house pattern rather than inventing one.
   min-width applies ONLY to wide tables so a 2 or 3 column table still fits with no scrollbar.
   IT LIVES HERE, IN THE SHARED SHEET, ON PURPOSE: the first attempt injected it into each
   page's inline <style>, which silently missed every page that has none (our-pricing among
   them) - the wrappers were in the HTML and the rule was not, so grep said fixed and the
   browser still overflowed. One rule, one place. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 4px}
.tbl-scroll>table{width:100%}
h2+.tbl-scroll,h2+p+.tbl-scroll{margin-top:18px}
section h2+p{margin-top:12px}
/* 14 Sept 2026: 660px squeezed the six-column price list to one word per line on a phone, with the
   Monthly column cut at the edge. 860px keeps each column readable and scrolls sideways instead. */
.tbl-scroll.wide>table{min-width:0}
@media(max-width:700px){.tbl-scroll.wide>table:has(tr>:nth-child(4)){min-width:520px}}
/* 20 Oct 2026 (layout check): 860px at every width put the last column of nine article tables (the
   Rate column on /uk-tax-rates-thresholds-2026-27) behind a sideways scroll on desktop and tablet,
   because the article column is 712px. Wide tables now fit their column above 700px. On a phone a
   table of four or more columns keeps 130px a column (520px) and scrolls, with the cue below; the
   price list becomes cards instead (.tbl-cards). */

/* SCROLL CUE, 20 Oct 2026. A table wider than its box scrolled sideways with nothing on screen to
   say so. Now the edge with more table beyond it fades out, and that fade goes once you reach the
   end. It is driven by the box's own scroll position, so a table that fits gets no fade at all.
   Browsers without scroll-driven animations get the background-attachment:local shadow instead,
   which shows through the white and unshaded rows. */
@property --tbl-l{syntax:'<length>';inherits:false;initial-value:0px}
@property --tbl-r{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes tbl-cue{0%{--tbl-l:0px;--tbl-r:56px}8%{--tbl-l:56px}92%{--tbl-r:56px}100%{--tbl-l:56px;--tbl-r:0px}}
.tbl-scroll,.cmp-wrap{background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(14,42,71,.3),rgba(14,42,71,0)) 0 0/16px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(14,42,71,.3),rgba(14,42,71,0)) 100% 0/16px 100% no-repeat}
@supports (animation-timeline:scroll()){
  .tbl-scroll,.cmp-wrap{background:none;animation:tbl-cue linear both;animation-timeline:scroll(self inline);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tbl-l),#000 calc(100% - var(--tbl-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--tbl-l),#000 calc(100% - var(--tbl-r)),transparent)}
}
@media(max-width:700px){
  .article table:not(.tbl-scroll>table){background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(14,42,71,.3),rgba(14,42,71,0)) 0 0/16px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(14,42,71,.3),rgba(14,42,71,0)) 100% 0/16px 100% no-repeat}
  @supports (animation-timeline:scroll()){
    .article table:not(.tbl-scroll>table){background:none;animation:tbl-cue linear both;animation-timeline:scroll(self inline);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tbl-l),#000 calc(100% - var(--tbl-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--tbl-l),#000 calc(100% - var(--tbl-r)),transparent)}
  }
}

@media(max-width:480px){.tbl-scroll td,.tbl-scroll th,.article td,.article th{padding-left:8px !important;padding-right:8px !important}}  /* 20 Oct 2026: with 14px a side, the longest word in each column still pushed most three-column tables 8 to 37px past a 327px column. 8px a side lets all but one of them fit. !important because several tables set their padding inline. */

/* PRICE LIST AS CARDS ON A PHONE, 20 Oct 2026. At 375px "The full list" on /our-pricing showed
   Service and Scheme shape only, and every price sat off to the right with no cue. At 720px and
   under each service is a card, and each value carries its column heading from data-label, so
   every price is on screen with no sideways scroll. Each cell is a one-row CSS table so a two-line
   heading and its value share a row and cannot overlap. */
@media(max-width:720px){
  .tbl-cards{overflow:visible;background:none}
  .tbl-cards>table,.tbl-cards>table>tbody,.tbl-cards tr{display:block;width:auto !important;min-width:0}
  .tbl-cards>table{min-width:0 !important;background:none !important;border-radius:0 !important;overflow:visible !important}
  .tbl-cards tr:first-child{display:none}
  .tbl-cards tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .tbl-cards td{display:table;width:100%;box-sizing:border-box;table-layout:fixed;border-collapse:separate;padding:9px 14px !important}
  .tbl-cards td::before{content:attr(data-label);display:table-cell;width:42%;padding-right:12px;font-weight:700;font-size:13.5px;color:var(--navy);vertical-align:top}
  .tbl-cards td:first-child{background:var(--bg-soft);padding:12px 14px !important}
  .tbl-cards td:first-child::before{content:none}
  .tbl-cards td:last-child{border-bottom:0 !important}
}

/* FORM CONTROLS ON A PHONE (19 Sept 2026)
   iOS Safari zooms the whole page when you focus a control whose font-size is under 16px, and it
   does not zoom back out. Measured on /get-started at 375px: five fields at 15.5px. The desktop
   sizing is deliberate and is left alone; this only lifts the controls on small screens. */
@media(max-width:620px){
  input,select,textarea,.field input,.qpop input,.qpop textarea{font-size:16px}
}

/* 8 Oct 2026 (JH: "check all the other pages and ensure there is appropriate spacing"): the reset sets every margin to 0, so consecutive body paragraphs on 14 pages touched. A paragraph that follows another gets a gap; inline margins (card sub-lines) still win. */
.wrap>p+p,.legal p+p{margin-top:16px}