/* ==========================================================================
   SEGsafe — site stylesheet
   Design system inherited from the SEG Web Playbook (SEG Yellow #F5D000 /
   Charcoal #1F1F1F, system fonts, 16px radius). Shared with segcore.co.uk
   and verkadacctv.co.uk. Contrast rule: body-secondary never lighter than
   #464646 on light bands.
   ========================================================================== */

:root{
  --yellow:#F5D000; --yellow-d:#e0bf00; --soft:rgba(245,208,0,.16); --soft2:rgba(245,208,0,.09);
  --charcoal:#1F1F1F; --graphite:#3d3d3d; --lgrey:#D9D9D9; --white:#fff;
  --ink:#1F1F1F; --muted:#464646; --line:#e6e5e1; --bg:#fff; --bg2:#f7f7f4;
  --shadow:0 12px 34px rgba(31,31,31,.12); --shadow-sm:0 4px 16px rgba(31,31,31,.07);
  --radius:16px;

  /* SEG Safe cyan — from the approved "SEG Safe Master Cyan" vector logo.
     --cyan is a block/marker colour (black text on it passes AA).
     --cyan-ink is the darkened tone used whenever cyan has to be TEXT on white. */
  --cyan:#00AEEF; --cyan-d:#0098D1; --cyan-ink:#00607F;
  --cyan-soft:rgba(0,174,239,.12); --cyan-soft2:rgba(0,174,239,.06); --cyan-line:#a8ddf3;
  --slate:#26333F; --slate-2:#eef1f4; --slate-line:#d6dee5;
  --good:#1F5C3A; --good-soft:#eaf3ee; --good-line:#c3ddcd;
  --warn-ink:#7a4a00; --warn-soft:#fdf4e6; --warn-line:#f0dcbb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.62;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:80px 0;position:relative}
section.tight{padding:52px 0}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.02em;color:var(--charcoal)}
h2.sec{font-size:34px;font-weight:800;margin-bottom:12px;max-width:22ch}
h2.sec.wide{max-width:none}
.lead{color:var(--muted);font-size:18px;max-width:680px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.hly{color:var(--charcoal);background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 96%,transparent 96%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.prose{max-width:72ch}
.prose p{color:var(--muted);font-size:16.5px;margin-bottom:16px}
.prose p strong{color:var(--ink)}
.prose h3{margin:30px 0 10px;font-size:20px}
.prose ul{margin:0 0 18px 20px;color:var(--muted)}
.prose li{margin-bottom:8px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--charcoal);background:var(--yellow);padding:6px 14px;border-radius:6px;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:13px 24px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:.18s;white-space:nowrap;text-align:center}
.btn-primary{background:var(--yellow);color:var(--charcoal)}
.btn-primary:hover{background:var(--yellow-d);transform:translateY(-2px)}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--yellow);padding:10px 16px;border-radius:8px;font-weight:800}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.phero a:focus-visible,.process a:focus-visible,footer a:focus-visible{outline-color:var(--yellow)}

/* topbar */
.topbar{background:var(--yellow);color:var(--charcoal);text-align:center;font-size:13px;font-weight:700;padding:9px 16px}

/* header + dropdown nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;color:var(--charcoal);letter-spacing:-.02em;flex:none}
.brand .mark{width:36px;height:36px;border-radius:9px;background:var(--charcoal);display:flex;align-items:center;justify-content:center;flex:none}
.brand .y{color:var(--charcoal);background:var(--yellow);padding:0 6px;border-radius:5px;margin-left:1px}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:-3px}
.menu{display:flex;align-items:center;gap:22px}
.menu>li{list-style:none;position:relative}
.menu a{color:var(--charcoal);font-weight:600;font-size:14.5px;display:inline-block;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{border-bottom-color:var(--yellow)}
.has-sub>button{background:none;border:0;font:inherit;font-weight:600;font-size:14.5px;color:var(--charcoal);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;border-bottom:2px solid transparent}
.has-sub>button:hover,.has-sub.open>button,.has-sub.current>button{border-bottom-color:var(--yellow)}
.has-sub>button svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.6;fill:none;transition:.18s}
.has-sub.open>button svg{transform:rotate(180deg)}
.sub{display:none;position:absolute;top:100%;left:-16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;min-width:290px;list-style:none;z-index:60}
.has-sub.open .sub{display:block}
.sub li{list-style:none}
.sub a{display:block;padding:10px 14px;border-radius:9px;font-weight:700;font-size:14.5px;border:0}
.sub a:hover{background:var(--bg2);border:0}
.sub a small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:1px}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}
.phone{font-weight:800;color:var(--charcoal);font-size:15px}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2.5px;background:var(--charcoal);border-radius:2px}

/* ---- the conductor strand: SEGsolar's variant of the group fibre strand ---- */
.strand{position:fixed;left:30px;top:0;bottom:0;width:2px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(128,128,128,.28) 7%,rgba(128,128,128,.28) 93%,transparent)}
.strand i{position:absolute;left:-1px;top:0;width:4px;border-radius:2px;
  background:linear-gradient(180deg,rgba(245,208,0,.35),var(--yellow));height:0;box-shadow:0 0 10px rgba(245,208,0,.45)}
.strand::before,.strand::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;border:2px solid rgba(128,128,128,.38);background:#8a8a8a}
.strand::before{top:26%}
.strand::after{top:68%}
@media(max-width:1420px){.strand{display:none}}

/* hero */
.hero{overflow:hidden;background:var(--charcoal);color:#fff;padding:88px 0 100px}
.hero::before{content:"";position:absolute;top:-32%;right:-8%;width:640px;height:640px;background:radial-gradient(circle,rgba(245,208,0,.22),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:36px 36px;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:50px;font-weight:800;max-width:15ch}
.hero h1{max-width:26ch}
.hero p{color:#dcdcdc;font-size:19px;margin:20px 0 30px;max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trust{margin-top:32px;color:#cfcfcf;font-size:13.5px;font-weight:600}
.trust b{color:var(--yellow)}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:26px;backdrop-filter:blur(6px)}
.hero-card h2{color:#fff;font-size:19px;margin-bottom:6px}
.hero-card .sub-t{color:#cfcfcf;font-size:13px;margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:#e0e0e0;margin-bottom:5px;font-weight:700}
.field .req{color:var(--yellow);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-left:4px}
.field .opt{color:#767676;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-left:4px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#fff;font-size:14.5px;color:var(--ink);font-family:inherit}
.hero-card .btn{width:100%;justify-content:center;margin-top:6px}
.reassure{font-size:12px;color:#1F1F1F;margin-top:10px;text-align:center;font-weight:600}
.hero-card .reassure{color:#e0e0e0}
.reassure a{text-decoration:underline;color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* page hero */
.phero{background:var(--charcoal);color:#fff;padding:56px 0 62px;overflow:hidden}
.phero::before{content:"";position:absolute;top:-40%;right:-6%;width:540px;height:540px;background:radial-gradient(circle,rgba(245,208,0,.18),transparent 62%);pointer-events:none}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;font-size:42px;font-weight:800;max-width:19ch}
.phero p{color:#dadada;font-size:18px;margin-top:16px;max-width:660px}
.phero .hero-cta{margin-top:28px}
.crumbs{font-size:13px;color:#c4c4c4;margin-bottom:18px;font-weight:600}
.crumbs a{color:#c4c4c4;text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--yellow)}
.crumbs span{color:var(--yellow)}

/* proof strip */
.proofsec{padding:0;background:var(--bg2);border-bottom:1px solid var(--line)}
.proofs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.proof{background:var(--bg2);padding:22px 20px}
.proof b{display:block;font-size:15px;color:var(--charcoal);font-weight:800;letter-spacing:-.01em}
.proof span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

/* grid + cards */
.grid{display:grid;gap:24px}
.cols-5{grid-template-columns:repeat(5,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:.2s;border-top:4px solid transparent;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-top-color:var(--yellow)}
.ico{width:52px;height:52px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.ico svg{width:26px;height:26px;stroke:var(--charcoal);fill:none}
.card h3{font-size:19px;margin-bottom:9px}
.card p{color:var(--muted);font-size:14.5px}
.card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.card li{font-size:13.5px;color:var(--ink);padding-left:24px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:3px;background:var(--yellow)}
.card .more{margin-top:18px;font-weight:800;font-size:14px;color:var(--charcoal);display:inline-flex;align-items:center;gap:6px}
.card .more::after{content:"→";transition:.18s}
.card:hover .more::after{transform:translateX(4px)}
.card.plain:hover{transform:none;border-top-color:transparent;box-shadow:var(--shadow-sm)}

/* checks list */
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;margin-top:26px}
.checks li{font-size:15px;color:var(--ink);padding-left:28px;position:relative;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:4px;background:var(--yellow)}
.checks.one{grid-template-columns:1fr}

/* numbered stages */
.stages{list-style:none;margin-top:36px;max-width:860px}
.stages li{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.stages li:last-child{border-bottom:0}
.stages .sn{flex:none;width:38px;height:38px;border-radius:10px;background:var(--yellow);color:var(--charcoal);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.stages h3{font-size:18px;margin-bottom:5px}
.stages p{color:var(--muted);font-size:15px;max-width:64ch}

/* process (dark band) */
.process{background:var(--charcoal);color:#fff}
.process h2,.process h3{color:#fff}
.process .lead{color:#d2d2d2}
.process .eyebrow{background:var(--yellow);color:var(--charcoal)}
.process a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.step{padding:26px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.step .num{width:42px;height:42px;border-radius:11px;background:var(--yellow);color:var(--charcoal);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:16px}
.step h3{color:#fff;font-size:17px;margin-bottom:7px}
.step p{color:#d2d2d2;font-size:13.5px}
.dpoints{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;margin-top:40px}
.dpoint{border-left:3px solid var(--yellow);padding-left:20px}
.dpoint h3{font-size:17.5px;margin-bottom:6px;color:#fff}
.dpoint p{color:#d2d2d2;font-size:14.5px;max-width:58ch}

/* callout */
.callout{border:1px solid var(--line);border-left:5px solid var(--yellow);border-radius:var(--radius);background:var(--bg2);padding:24px 28px;margin-top:30px;max-width:820px}
.callout h3{font-size:17px;margin-bottom:7px}
.callout p{color:var(--muted);font-size:15px}
.callout.warn{border-left-color:var(--charcoal)}
.process .callout{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);border-left-color:var(--yellow)}
.process .callout h3{color:#fff}
.process .callout p{color:#d2d2d2}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);margin-top:32px}
table.sla{width:100%;border-collapse:collapse;min-width:620px}
table.sla caption{caption-side:top;text-align:left;padding:16px 20px 0;font-size:13px;font-weight:700;color:var(--muted)}
table.sla th,table.sla td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
table.sla thead th{background:var(--charcoal);color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
table.sla tbody th{font-weight:800;color:var(--charcoal);width:26%}
table.sla td{color:var(--muted)}
table.sla tbody tr:last-child th,table.sla tbody tr:last-child td{border-bottom:0}

/* sectors */
.sector-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.sector{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;font-weight:700;font-size:15px;color:var(--charcoal);transition:.18s;display:block}
.sector:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-3px)}
.sector svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;margin-bottom:10px}
.sector span{display:block;font-weight:600;font-size:12.5px;color:var(--muted);margin-top:4px}
.sector:hover span{color:#3a3a2e}

/* accreditations / group */
.partners{background:var(--bg2)}
.accred{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.accred .chip{background:var(--charcoal);color:#fff;border-radius:12px;padding:14px 18px;font-weight:700;font-size:14px}
.accred .chip em{font-style:normal;color:var(--yellow);font-weight:800;display:block;font-size:15px;letter-spacing:.01em}
.accred .chip small{display:block;font-weight:500;font-size:11.5px;color:#c9c9c9;margin-top:3px}
.gnote{margin-top:24px;color:var(--muted);font-size:15px}
.gnote a{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.gband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.gbrand{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;box-shadow:var(--shadow-sm);transition:.18s}
.gbrand:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gbrand b{display:block;font-size:21px;font-weight:800;color:var(--charcoal);letter-spacing:-.02em}
.gbrand span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px}
.gbrand.centre{border-top:4px solid var(--yellow)}

/* why / ticks */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;margin-top:36px}
.why{display:flex;gap:16px;align-items:flex-start}
.why .tick{flex:none;width:30px;height:30px;border-radius:7px;background:var(--yellow);display:flex;align-items:center;justify-content:center}
.why .tick svg{width:16px;height:16px;stroke:var(--charcoal);stroke-width:3;fill:none}
.why h3{font-size:17px;margin-bottom:3px}
.why p{color:var(--muted);font-size:14.5px}

/* case studies */
.csgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.cscard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.cscard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cscard .csimg{aspect-ratio:16/10;background:var(--charcoal);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cscard .csimg svg{width:54px;height:54px;stroke:var(--yellow);fill:none;stroke-width:1.4;opacity:.85}
.cscard .csimg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(245,208,0,.16),transparent 60%)}
.cscard .csbody{padding:24px;display:flex;flex-direction:column;flex:1}
.cscard .cskind{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cscard h3{font-size:18px;margin:8px 0 8px}
.cscard p{color:var(--muted);font-size:14.5px;flex:1}
.cscard .more{margin-top:16px;font-weight:800;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.cscard .more::after{content:"→"}

/* FAQ */
.faqsec{background:var(--bg2)}
.faq{max-width:840px;margin-top:32px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:800;font-size:16px;color:var(--charcoal);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:800;color:var(--charcoal);flex:none;background:var(--yellow);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 20px;color:var(--muted);font-size:15.5px}
.faq .a p{margin-bottom:12px}
.faq .a p:last-child{margin-bottom:0}
.faq .a a{font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* CTA band */
.ctasec{padding:60px 0}
.cta-band{background:var(--yellow);color:var(--charcoal);border-radius:24px;padding:54px;text-align:center}
.cta-band h2{color:var(--charcoal);font-size:32px;margin-bottom:12px;max-width:20ch;margin-left:auto;margin-right:auto}
.cta-band p{color:#3a3320;max-width:620px;margin:0 auto 26px;font-weight:500;font-size:16.5px}
.cta-band .btn{margin:6px}

/* contact + forms */
.contactsec{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.cinfo{display:flex;gap:15px;align-items:flex-start}
.cinfo .ico{margin:0;width:46px;height:46px}
.cinfo .ico svg{width:22px;height:22px}
.cinfo b{display:block;color:var(--charcoal);font-size:15px}
.cinfo a,.cinfo span{color:var(--muted);font-size:14.5px}
.cinfo a{text-decoration:underline;text-underline-offset:2px}
form.cform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);position:relative}
form.cform .field label{color:var(--charcoal)}
form.cform .field .req{color:#6b5a00}
form.cform .field input,form.cform .field select,form.cform .field textarea{border:1px solid #cfcdc7;background:#fff}
form.cform textarea{min-height:110px;resize:vertical}
form.cform .btn{width:100%;justify-content:center;margin-top:8px}
form.cform .reassure{color:var(--muted)}
form.cform fieldset{border:0;margin-bottom:26px}
form.cform legend{font-weight:800;font-size:17px;color:var(--charcoal);margin-bottom:16px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
form.cform legend em{font-style:normal;font-weight:500;font-size:13.5px;color:var(--muted)}
form.cform legend .fs{width:26px;height:26px;border-radius:7px;background:var(--yellow);color:var(--charcoal);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
form.cform.big{padding:34px}
.field.upload input[type=file]{padding:10px;background:var(--bg2);font-size:13.5px}
.uhelp{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.uhelp a{text-decoration:underline}

/* calculator */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:30px;margin-top:36px}
.calc .cin{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.calc .field label{color:var(--charcoal)}
.calc .field input,.calc .field select{border:1px solid #cfcdc7}
.calc .out{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.calc .ov{background:var(--bg2);border-radius:12px;padding:18px}
.calc .ov b{display:block;font-size:27px;font-weight:800;color:var(--charcoal);letter-spacing:-.03em;border-bottom:3px solid var(--yellow);padding-bottom:4px;display:inline-block}
.calc .ov span{display:block;font-size:13px;color:var(--muted);margin-top:9px;font-weight:600}
.assump{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.assump h3{font-size:15px;margin-bottom:10px}
.assump ul{margin:0 0 0 18px;color:var(--muted);font-size:14px}
.assump li{margin-bottom:6px}

/* areas / postcodes */
.pcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pcs span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-weight:700;font-size:13.5px;color:var(--charcoal)}
.quickans{background:var(--charcoal);color:#fff;border-radius:var(--radius);padding:30px 34px;margin-top:8px}
.quickans h2{color:#fff;font-size:20px;margin-bottom:10px}
.quickans p{color:#dcdcdc;font-size:16.5px;max-width:70ch}

/* insights list */
.artlist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.art .kind{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.art h3{font-size:18.5px;margin:9px 0 9px}
.art p{color:var(--muted);font-size:14.5px;flex:1}
.art .more{margin-top:16px;font-weight:800;font-size:14px}
.art .more::after{content:" →"}

/* article body */
.article{max-width:760px}
.article h2{font-size:26px;margin:38px 0 12px}
.article h3{font-size:19px;margin:28px 0 10px}
.article p{color:var(--muted);font-size:17px;margin-bottom:17px}
.article ul,.article ol{margin:0 0 20px 22px;color:var(--muted);font-size:17px}
.article li{margin-bottom:9px}
.article strong{color:var(--ink)}
.article .standfirst{font-size:19px;color:var(--ink);font-weight:500;margin-bottom:26px}

/* 404 */
.notfound{text-align:center;padding:100px 0}
.notfound h1{font-size:64px;margin-bottom:12px}
.notfound p{color:var(--muted);font-size:18px;max-width:520px;margin:0 auto 28px}

/* footer */
footer{background:var(--charcoal);color:#cccccc;padding:60px 0 30px;font-size:14px;position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr .8fr;gap:30px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.13)}
footer h4{color:var(--yellow);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a{color:#cccccc}
footer a:hover{color:#fff;text-decoration:underline}
.foot-brand .brand{margin-bottom:14px}
.foot-brand .brand b{color:#fff}
.foot-brand p{max-width:300px;color:#b8b8b8;font-size:13.5px;margin-bottom:14px}
.foot-addr{font-size:13px!important}
.foot-bottom{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#adadad}
.foot-bottom a{color:#adadad;text-decoration:underline}

@media(max-width:1100px){
  .foot-top{grid-template-columns:repeat(3,1fr)}
  .proofs{grid-template-columns:repeat(3,1fr)}
  .sector-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  section{padding:58px 0}
  .hero{padding:56px 0 70px}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:36px}
  .hero p{font-size:17px}
  .phero h1{font-size:30px}
  .phero p{font-size:16.5px}
  h2.sec{font-size:26px}
  .cols-5,.cols-4,.cols-3,.steps,.calc .cin,.calc .out{grid-template-columns:repeat(2,1fr)}
  .cols-2,.why-grid,.contact-grid,.feature,.dpoints,.checks,.gband,.csgrid,.artlist{grid-template-columns:1fr}
  .cta-band{padding:36px 22px}
  .cta-band h2{font-size:24px}
  .menu,.nav-cta .btn{display:none}
  .nav-cta{gap:10px}
  .brand small{display:none}
  .burger{display:flex}
  .menu.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;padding:18px 24px 24px;gap:6px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 72px);overflow-y:auto;z-index:70}
  .menu.open>li{width:100%}
  .menu.open a,.menu.open .has-sub>button{width:100%;padding:11px 0;border-bottom:1px solid var(--line);justify-content:space-between}
  .menu.open .sub{position:static;display:none;border:0;box-shadow:none;padding:4px 0 10px 12px;min-width:0;left:auto}
  .menu.open .has-sub.open .sub{display:block}
  .menu.open .sub a{border-bottom:0;padding:8px 10px}
  form.cform.big{padding:24px}
  .foot-top{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .cols-5,.cols-4,.cols-3,.steps,.proofs,.sector-grid,.calc .cin,.calc .out{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .phero h1{font-size:26px}
  .cta-band h2{font-size:22px}
  .notfound h1{font-size:46px}
  .foot-top{grid-template-columns:1fr}
  .stages li{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .strand i{display:none}
}
@media print{
  header,.topbar,.strand,.burger,.nav-cta,footer,.ctasec,form{display:none}
  body{font-size:11pt}
}

/* placeholder marker — content awaiting Director sign-off (see README) */
.ph{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:#3a3320;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.ph::before{content:"!";width:14px;height:14px;border-radius:50%;background:#3a3320;color:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:10px}
.phbar{background:#3a3320;color:var(--yellow);font-size:13px;font-weight:700;text-align:center;padding:9px 16px}
.cscard .csimg .ph{position:absolute;top:12px;left:12px;z-index:2}
.stockbadge{position:absolute;bottom:10px;right:10px;background:rgba(31,31,31,.85);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px;z-index:2}

/* highlighter on dark bands must be a full block, or the top of the glyphs
   disappears against the charcoal background */
.hero .hly,.phero .hly,.process .hly,footer .hly{
  background:var(--yellow);color:var(--charcoal);border-radius:5px;padding:.02em .14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---- light/dark band variants -------------------------------------------
   .steps and .stages appear on both white and charcoal bands. Base styling is
   for light bands; .process (charcoal) overrides follow. Contrast rule: body
   text never lighter than #464646 on light, never darker than #d2d2d2 on dark. */
.step{background:var(--bg2);border:1px solid var(--line)}
.step h3{color:var(--charcoal)}
.step p{color:var(--muted)}
.process .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.process .step h3{color:#fff}
.process .step p{color:#d2d2d2}
.process .stages li{border-bottom-color:rgba(255,255,255,.13)}
.process .stages h3{color:#fff}
.process .stages p{color:#d2d2d2}
.foot-brand .brand,.foot-brand .brand b{color:#fff}
.foot-brand .brand .y{color:var(--charcoal)}

/* ---- technical diagrams --------------------------------------------------
   Hand-authored SVG, drawn for light bands. Responsive by viewBox; the box
   scrolls horizontally on narrow screens rather than shrinking to illegible. */
.dg{margin:36px 0 0;max-width:none}
.dgbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 20px;overflow-x:auto}
.dgbox svg{display:block;width:100%;min-width:720px;height:auto}
.dg.tall .dgbox svg{min-width:820px}
.dg figcaption{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:76ch}
.dg svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.dg svg .dl{font-size:13.5px;font-weight:700;fill:#1F1F1F}
.dg svg .ds{font-size:12.5px;font-weight:500;fill:#464646}
.dg svg .dn{font-size:12.5px;font-weight:800;fill:#F5D000}
.dg svg .dt{font-size:10.5px;font-weight:600;fill:#464646}
.process .dgbox{background:#fff}
.process .dg figcaption{color:#d2d2d2}
@media(max-width:640px){.dgbox{padding:12px}.dg figcaption{font-size:13.5px}}

/* ---- photographs ---------------------------------------------------------
   Every photo component returns nothing when the image has not been supplied,
   so layouts degrade to text rather than to a placeholder box. */
.pbandwrap{display:grid;grid-template-columns:0.85fr 1fr;gap:52px;align-items:center}
.pbandwrap.flip{grid-template-columns:1fr 0.85fr}
.pb-fig{margin:0}
.pb-fig picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pb-fig img{display:block;width:100%;height:auto}
.pb-fig figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.pb-txt .why-grid{grid-template-columns:1fr}
.pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.psh{margin:0}
.psh picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--charcoal)}
.psh img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.psh figcaption{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.5}
.figphoto{margin:32px 0 0}
.figphoto picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.figphoto img{display:block;width:100%;height:auto}
.figphoto figcaption{margin-top:12px;font-size:14px;color:var(--muted);max-width:72ch;line-height:1.55}
.cscard .csimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cscard .csimg picture{position:absolute;inset:0}
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.30}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#1F1F1F 30%,rgba(31,31,31,.72) 62%,rgba(31,31,31,.55) 100%)}
@media(max-width:900px){
  .pbandwrap,.pbandwrap.flip{grid-template-columns:1fr;gap:28px}
  .pstrip{grid-template-columns:1fr}
}
.dghint{display:none}
@media(max-width:760px){
  .dgbox{position:relative;
    background:linear-gradient(90deg,#fff 60%,rgba(255,255,255,0)) left/44px 100% no-repeat,
               linear-gradient(-90deg,#fff 60%,rgba(255,255,255,0)) right/44px 100% no-repeat,
               radial-gradient(farthest-side at 0 50%,rgba(31,31,31,.14),transparent) left/16px 100% no-repeat,
               radial-gradient(farthest-side at 100% 50%,rgba(31,31,31,.14),transparent) right/16px 100% no-repeat,
               #fff;
    background-attachment:local,local,scroll,scroll,local}
  .dghint{display:block;font-weight:700;color:var(--charcoal);margin-bottom:6px}
}


/* ==========================================================================
   SEGsafe additions
   ========================================================================== */

/* brand wordmark: yellow stays the group marker, cyan is the site accent */
.brand .c{color:var(--cyan);font-weight:800}
.foot-brand .brand .c{color:var(--cyan)}
.hlc{color:var(--charcoal);background:linear-gradient(transparent 58%,var(--cyan) 58%,var(--cyan) 96%,transparent 96%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* cyan variants of the shared furniture */
.eyebrow.cy{background:var(--cyan);color:#04222e}
.btn-cyan{background:var(--cyan);color:#04222e}
.btn-cyan:hover{background:var(--cyan-d);transform:translateY(-2px)}
a.tlink{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:2px}
a.tlink:hover{color:var(--charcoal)}
.prose a,.callout a,.srclist a,.a a{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:2px}
.prose a:hover,.callout a:hover,.a a:hover{color:var(--charcoal)}

/* honesty band — the "what we will not tell you" section */
.honesty{background:var(--bg2)}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.hcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;position:relative}
.hcard h3{font-size:18px;margin:14px 0 8px;line-height:1.25}
.hcard p{color:var(--muted);font-size:15.5px;margin:0}
.hcard.no{border-top:4px solid #b23b3b}
.hcard.yes{border-top:4px solid var(--good);background:var(--good-soft);border-color:var(--good-line)}
.hx,.hy{display:inline-flex;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center}
.hx{background:#f7ecec;color:#8E2323}
.hy{background:#fff;color:var(--good)}
.hx .ico,.hy .ico{width:20px;height:20px;margin:0}
.ico.sm{width:20px;height:20px}
@media(max-width:1080px){.hgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hgrid{grid-template-columns:1fr}}

/* status / warn / note callouts */
.callout.status{background:var(--cyan-soft2);border-color:var(--cyan-line)}
.callout.status h3{color:var(--cyan-ink)}
.callout.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.callout.warn h3{color:var(--warn-ink)}

/* sources block on every regulatory page */
.srcsec{background:var(--bg2);padding:56px 0}
h2.sec.small{font-size:24px}
.srclist{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.srclist li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5}
.srclist li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--cyan)}
@media(max-width:760px){.srclist{grid-template-columns:1fr}}

/* status table: in force / not in force */
.statustable td .st{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px}
.st.on{color:var(--good)}
.st.off{color:#8E2323}
.st .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* incident-flow diagram band */
.flowsec{background:#fff}
.dsvg{width:100%;height:auto;display:block;margin:8px auto 0;max-width:960px}
.dsvg .dl{stroke:var(--line)}
.dsvg .dfill{fill:#fff}
.dsvg .dtxt{fill:var(--charcoal);font-family:inherit}
.dsvg .dsub{fill:var(--muted);font-family:inherit}
.dsvg .dkey{fill:var(--cyan)}
.dcap{color:var(--muted);font-size:15px;max-width:70ch;margin:18px auto 0;text-align:center}
.band-dark .dsvg .dl{stroke:rgba(255,255,255,.28)}
.band-dark .dsvg .dfill{fill:#2a2a2a}
.band-dark .dsvg .dtxt{fill:#fff}
.band-dark .dsvg .dsub{fill:#d6d6d6}

/* two-column compare table (sounder vs app) */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.compare .col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.compare .col h3{font-size:19px;margin-bottom:6px}
.compare .col .sub{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.compare .col ul{list-style:none;margin:0;padding:0}
.compare .col li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15.5px;color:var(--muted)}
.compare .col li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--cyan)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}

/* scenario tiles */
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.scen .s{background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;padding:20px 20px}
.scen .s h3{font-size:17px;margin-bottom:6px}
.scen .s p{color:var(--muted);font-size:15px;margin:0}
@media(max-width:900px){.scen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.scen{grid-template-columns:1fr}}

/* footer legal strip */
.foot-legal{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 4px;margin-top:8px}
.foot-legal p{color:#c9c9c9;font-size:13.5px;line-height:1.6;max-width:98ch;margin:0 0 8px}
.foot-legal b{color:#fff}

/* resource cards */
.rescard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.18s}
.rescard:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.rescard .kind{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px}
.rescard h3{font-size:19px;margin-bottom:8px}
.rescard p{color:var(--muted);font-size:15.5px;margin:0}

/* SEGsafe: cyan replaces yellow on dark furniture (yellow stays the group marker) */
.hero::before{background:radial-gradient(circle,rgba(0,174,239,.24),transparent 62%)}
.phero::before{background:radial-gradient(circle,rgba(0,174,239,.20),transparent 62%)}
.trust b{color:var(--yellow)}
.field .req{color:var(--cyan)}
.crumbs a:hover{color:var(--cyan)}
.crumbs span{color:var(--cyan)}
.hero .hlc,.phero .hlc,.process .hlc{background:linear-gradient(transparent 58%,var(--cyan) 58%,var(--cyan) 94%,transparent 94%);color:#04222e;padding:0 .1em}

/* visible placeholder — must be obvious, must never be mistaken for content */
.phold{display:inline-block;background:#fff6d6;border:1px dashed #c9a227;border-radius:8px;padding:3px 10px;
  font-size:14.5px;color:#5a4300;line-height:1.5}
.phold b{color:#3f2f00}
.phold em{font-style:normal;color:#6b5200}

/* --- contrast fixes found by a11y.py ---------------------------------------
   1. cyan is a marker colour, not a text colour: on white the wordmark and any
      cyan text use --cyan-ink (#00607F), which clears 4.5:1.
   2. on dark bands the highlighter must be a SOLID block, not a partial
      gradient, or the tops of the glyphs sit on charcoal and vanish.
   3. diagram captions inside dark bands inherit --muted and must not.
   4. the honeypot label is off-screen but still computed; take it out entirely. */
header .brand .c{color:var(--cyan-ink)}
.hero .hlc,.phero .hlc,.process .hlc,.band-dark .hlc{
  background:var(--cyan);color:#04222e;padding:.04em .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.process .dcap,.band-dark .dcap,.process .dsub,.process figure .dcap{color:#d6d6d6}
.hp{opacity:0}
.hp,.hp label,.hp input{color:#1F1F1F;background:#fff}

/* diagram axis labels: readable on light bands and on charcoal */
.dsvg .daxis{fill:var(--muted);font-family:inherit}
.dsvg .daxisline{stroke:var(--line)}
.process .dsvg .daxis,.band-dark .dsvg .daxis{fill:#c9c9c9}
.process .dsvg .daxisline,.band-dark .dsvg .daxisline{stroke:rgba(255,255,255,.3)}
.process .dsvg .dtxt{fill:var(--charcoal)}
.process .dsvg .dsub{fill:var(--muted)}

/* --- the real SEG SAFE logo -------------------------------------------------
   One SVG, two contexts: the mark keeps its own colours, the SAFE wordmark
   inherits currentColor so it is charcoal in the header and white in the footer. */
.brand{display:flex;align-items:center;gap:12px;color:var(--charcoal)}
.brand .logo{height:34px;width:auto;display:block;flex:none}
.brand-strap{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);border-left:1px solid var(--line);padding-left:12px;line-height:1}
.foot-logo{color:#fff}
.foot-logo .logo{height:40px}
@media(max-width:1320px){.brand-strap{display:none}}
@media(max-width:900px){.brand .logo{height:30px}}

/* --- photograph bands ------------------------------------------------------ */
.photoband{background:var(--bg2);padding:76px 0}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.photoband.flip .pb-media{order:2}
.pb-media{margin:0}
.pb-media picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.pb-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pb-media figcaption{color:var(--muted);font-size:13.5px;margin-top:10px}
.pb-points{list-style:none;margin:26px 0 0;padding:0}
.pb-points li{position:relative;padding-left:28px;margin-bottom:14px;color:var(--muted);font-size:16px;line-height:1.6}
.pb-points li b{color:var(--ink)}
.pb-points li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:12px;border-radius:3px;background:var(--cyan)}
@media(max-width:900px){.pb-grid{grid-template-columns:1fr;gap:28px}.photoband.flip .pb-media{order:0}}

/* ==========================================================================
   SEGsafe v2 — Verkada product presentation
   ========================================================================== */

/* transparent renders on a tinted panel, never a white box on a tint */
.renderwrap{position:relative;border-radius:var(--radius);padding:30px;
  background:radial-gradient(circle at 50% 45%,rgba(0,174,239,.16),rgba(0,174,239,.04) 55%,transparent 72%),var(--bg2);
  display:flex;align-items:center;justify-content:center}
.renderwrap picture{display:block;width:100%}
.renderwrap img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.band-dark .renderwrap,.process .renderwrap{background:radial-gradient(circle at 50% 45%,rgba(0,174,239,.22),rgba(0,174,239,.05) 55%,transparent 72%),rgba(255,255,255,.03)}

.prodband{padding:76px 0}
.prodband:nth-of-type(even){background:var(--bg2)}
.prodband .pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.prodband.flip .pb-media{order:2}
@media(max-width:900px){.prodband .pb-grid{grid-template-columns:1fr;gap:30px}.prodband.flip .pb-media{order:0}}

/* product family grid */
.famgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.fam{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 0 24px;
  overflow:hidden;transition:.18s}
.fam:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.fam-img{background:radial-gradient(circle at 50% 50%,rgba(0,174,239,.14),transparent 68%),var(--bg2);
  padding:22px;display:flex;align-items:center;justify-content:center;min-height:180px}
.fam-img img{max-height:150px;width:auto;max-width:100%;object-fit:contain}
.fam h3{font-size:19px;margin:20px 24px 6px}
.fam p{color:var(--muted);font-size:15.5px;margin:0 24px 12px}
.fam ul{list-style:none;margin:0 24px;padding:0}
.fam li{position:relative;padding-left:20px;font-size:14.5px;color:var(--muted);margin-bottom:6px;line-height:1.5}
.fam li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--cyan)}
.fam .more{display:inline-block;margin:14px 24px 0;font-weight:800;font-size:14.5px;color:var(--cyan-ink)}
@media(max-width:1000px){.famgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.famgrid{grid-template-columns:1fr}}

/* can / cannot grid */
.ccgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.cc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.cc h3{font-size:17.5px;margin:13px 0 8px;line-height:1.3}
.cc p{color:var(--muted);font-size:15px;margin:0}
.cc.yes{border-top:4px solid var(--good)}
.cc.no{border-top:4px solid #b23b3b;background:var(--bg2)}
@media(max-width:1000px){.ccgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ccgrid{grid-template-columns:1fr}}

/* spec table */
.spec td b,.spec th b{color:var(--ink)}
.modelchip{display:inline-block;background:var(--charcoal);color:#fff;border-radius:6px;padding:2px 9px;
  font-family:var(--fm,ui-monospace,Menlo,monospace);font-size:13px;font-weight:700;letter-spacing:.02em;margin-right:6px}
.band-dark .modelchip,.process .modelchip{background:var(--cyan);color:#04222e}

/* case note cards */
.casenotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.casenote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;padding:22px 24px}
.casenote h3{font-size:17.5px;margin-bottom:2px}
.casenote .where{color:var(--cyan-ink);font-size:13.5px;font-weight:700;margin-bottom:10px}
.casenote p{color:var(--muted);font-size:15px;margin:0 0 10px}
.casenote a{font-size:14px;font-weight:700}
@media(max-width:800px){.casenotes{grid-template-columns:1fr}}

/* ==========================================================================
   Photography — the verkadacctv card language, in SEGsafe cyan
   ========================================================================== */

/* inner-page hero with a framed photograph floated beside the copy */
.phero.part .wrap{position:relative;z-index:2;padding-right:480px}
.phero-art{position:absolute;right:max(24px,calc(50% - 566px));top:50%;transform:translateY(-50%);
  width:430px;z-index:1;border-radius:18px;overflow:hidden;margin:0;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 54px rgba(0,0,0,.5)}
.phero-art picture,.phero-art img{display:block;width:100%;height:288px;object-fit:cover}
@media (max-width:1080px){
  .phero.part .wrap{padding-right:0}
  .phero-art{display:none}
}

/* inner-page hero with a full-bleed photograph behind a scrim */
.phero.pbg{position:relative}
.phero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero-bg picture,.phero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* the scrim has to protect the copy and still let the photograph be a photograph:
   near-opaque under the text, and thin enough on the right that you can see the room */
.phero.pbg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(93deg,rgba(31,31,31,.97) 0%,rgba(31,31,31,.94) 34%,
    rgba(31,31,31,.78) 50%,rgba(31,31,31,.34) 72%,rgba(31,31,31,.22) 100%)}
.phero.pbg .wrap{position:relative;z-index:2}
.phero.pbg{padding:78px 0 84px}
.phero.pbg h1{max-width:16ch}
.phero.pbg p{max-width:520px}
.phero-bg img{filter:saturate(1.05) contrast(1.03)}
@media (max-width:900px){
  /* on a phone the photograph would sit behind the whole column, so it goes flat */
  .phero.pbg::after{background:linear-gradient(180deg,rgba(31,31,31,.93),rgba(31,31,31,.97))}
  .phero.pbg p{max-width:none}
}

/* a framed photograph in prose */
.frame{margin:34px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(31,31,31,.13);background:var(--bg2)}
.frame picture,.frame img{display:block;width:100%;height:auto}
.frame figcaption{padding:13px 18px 15px;font-size:13.5px;color:var(--muted);
  background:#fff;border-top:1px solid var(--line);line-height:1.55}
.process .frame,.sceneband .frame{border-color:rgba(255,255,255,.16)}
.process .frame figcaption,.sceneband .frame figcaption{background:rgba(255,255,255,.05);color:#dcdcdc;
  border-top-color:rgba(255,255,255,.14)}

/* three framed photographs across */
.figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.figrow .frame{margin:0}
.figrow .frame picture,.figrow .frame img{height:210px;object-fit:cover}
.figrow .frame figcaption{font-size:13px;padding:12px 15px 14px}
@media (max-width:900px){.figrow{grid-template-columns:1fr;gap:16px}
  .figrow .frame picture,.figrow .frame img{height:200px}}

/* full-bleed photo cards */
.scenegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.scene{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.scene:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--cyan)}
.scimg{height:200px;overflow:hidden;background:var(--charcoal)}
.scimg picture,.scimg img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .3s}
.scene:hover .scimg img{transform:scale(1.04)}
.scbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.scene h3{font-size:18.5px;margin-bottom:5px}
.scene p{color:var(--muted);font-size:14px;flex:1}
.scuse{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--cyan-ink);
  border-top:1px solid var(--line);padding-top:11px}
/* four cards in a three-column grid leaves an orphan; two-up reads better */
.scenegrid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.scenegrid:has(> :nth-child(4):last-child) .scimg,
.scenegrid:has(> :nth-child(4):last-child) .scimg img{height:250px}
@media (max-width:900px){.scenegrid{grid-template-columns:1fr 1fr;gap:14px}
  .scenegrid:has(> :nth-child(4):last-child) .scimg,
  .scenegrid:has(> :nth-child(4):last-child) .scimg img{height:158px}
  .scimg,.scimg img{height:158px}}
@media (max-width:560px){.scenegrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.scene:hover{transform:none}.scene:hover .scimg img{transform:none}}

/* photograph + copy, dark by default */
.sceneband{background:var(--charcoal);color:#fff;padding:74px 0}
.sceneband.light{background:var(--bg2);color:var(--charcoal)}
.sb-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.sceneband.flip .sb-grid{grid-template-columns:1.08fr .92fr}
.sceneband.flip .sb-media{order:2}
.sb-media{margin:0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.sceneband.light .sb-media{border-color:var(--line);box-shadow:0 18px 40px rgba(31,31,31,.15)}
.sb-media picture,.sb-media img{display:block;width:100%;height:auto}
.sb-media figcaption{padding:12px 17px 14px;font-size:13px;line-height:1.55;
  background:rgba(255,255,255,.06);color:#dcdcdc;border-top:1px solid rgba(255,255,255,.14)}
.sceneband.light .sb-media figcaption{background:#fff;color:var(--muted);border-top-color:var(--line)}
/* the eyebrow is a filled chip, so it keeps the yellow ground and charcoal ink
   on every background — cyan ink on yellow is 1.68:1 and fails outright */
.sceneband .eyebrow,.sceneband.light .eyebrow{background:var(--yellow);color:var(--charcoal)}
.sceneband h2.sec{color:#fff}
.sceneband.light h2.sec{color:var(--charcoal)}
.sceneband .lead{color:#d8d8d8}
.sceneband.light .lead{color:var(--muted)}
.sceneband .pb-points li{color:#e4e4e4}
.sceneband .pb-points li b{color:#fff}
.sceneband.light .pb-points li{color:var(--muted)}
.sceneband.light .pb-points li b{color:var(--charcoal)}
@media (max-width:900px){
  .sb-grid,.sceneband.flip .sb-grid{grid-template-columns:1fr;gap:28px}
  .sceneband.flip .sb-media{order:0}
  .sceneband{padding:54px 0}
}

/* Between the mobile breakpoint and a comfortable desktop the header has just
   enough room for six items but not enough for their labels, so "Martyn's Law"
   and "Why us" broke onto two lines. Hold them on one line and tighten the gap
   through that band instead. */
.menu > li > a,.menu > li > button{white-space:nowrap}
@media(min-width:901px) and (max-width:1080px){
  .menu{gap:13px}
  .menu > li > a,.menu > li > button{font-size:14.5px}
  .nav-cta{gap:12px}
  .nav-cta .phone{font-size:14px}
}
/* the tightest part of the band: the phone number is the first thing to go,
   because the header button already carries the call to action */
@media(min-width:901px) and (max-width:985px){
  .menu{gap:10px}
  .menu > li > a,.menu > li > button{font-size:13.5px}
  .nav-cta .phone{display:none}
}

/* the tier map is a decision flow and needs more width than the process diagrams */
.dsvg.wide{max-width:1000px}
.dsvg .dkeyfill{fill:#F2FBFE}
.band-dark .dsvg .dkeyfill,.process .dsvg .dkeyfill{fill:#123240}

/* the seventh family closes the grid as a full-width card rather than an orphan
   sitting in a third of a row with dead space beside it */
.fam-wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  align-items:center;padding:0;overflow:hidden}
.fam-wide .fam-img{height:100%;min-height:260px;border-radius:0;margin:0}
.fam-wide .fam-img img{max-height:210px}
.fam-wide .fam-body{padding:30px 34px 32px}
.fam-wide .eyebrow{margin-bottom:14px}
.fam-wide h3{font-size:23px;margin:0 0 8px}
.fam-wide p{margin:0 0 14px;font-size:16px;max-width:52ch}
.fam-wide ul{margin:0}
.fam-wide .more{margin:16px 0 0}
@media(max-width:1000px){
  .fam-wide{grid-template-columns:1fr}
  .fam-wide .fam-img{min-height:0;height:210px}
  .fam-wide .fam-body{padding:24px}
}
/* a photograph in the wide card fills its panel instead of floating in it */
.fam-wide .fam-img.photo{padding:0;background:var(--charcoal)}
.fam-wide .fam-img.photo picture,.fam-wide .fam-img.photo img{width:100%;height:100%;max-height:none;
  object-fit:cover;display:block}
@media(max-width:1000px){.fam-wide .fam-img.photo,.fam-wide .fam-img.photo img{height:210px}}

/* A provision can be neither in force nor untouched — the SIA's section 12
   guidance is consulted on and awaiting publication. Amber ink, dark enough
   to pass AA on the table's white ground. */
.st.part{color:#8A5A00}
.st.part .dot{background:#8A5A00}

/* The Systems dropdown carries the hardware families and the application pages,
   which is thirteen items — one column would run off the bottom of the viewport. */
.sub.two{min-width:600px;columns:2;column-gap:10px}
.sub.two li{break-inside:avoid}
@media(max-width:900px){.sub.two{min-width:0;columns:1}}

/* The two commercial tracks. Cyan marks the procedures half (Cosafe, the duty a
   school actually has); yellow marks the building half (Verkada, through SEGcore).
   The colours are the same markers used everywhere else on the site. */
.trackgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.track{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px 24px;border-top:4px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.track:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.track.procedures{border-top-color:var(--cyan)}
.track.building{border-top-color:var(--yellow)}
.track-eye{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 11px;border-radius:5px;margin-bottom:14px}
.track.procedures .track-eye{background:var(--cyan);color:#04222e}
.track.building .track-eye{background:var(--yellow);color:var(--charcoal)}
.track h3{font-size:22px;margin:0 0 8px}
.track p{color:var(--muted);font-size:15.5px;margin:0}
.track .more{display:inline-block;margin-top:16px;font-weight:800;font-size:14.5px;color:var(--cyan-ink)}
@media(max-width:820px){.trackgrid{grid-template-columns:1fr;gap:16px}}
@media(prefers-reduced-motion:reduce){.track:hover{transform:none}}

/* Playbook §3.1: the current site sits in the group band bordered yellow and
   says so, rather than being the one name missing from the row. */
.gbrand.here{border:2px solid var(--yellow);cursor:default;background:var(--bg2)}
.gbrand.here:hover{transform:none;box-shadow:var(--shadow-sm)}
.gbrand.here em{display:block;margin-top:10px;font-style:normal;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal);
  background:var(--yellow);border-radius:5px;padding:4px 9px}
@media(max-width:1000px){.gband{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gband{grid-template-columns:1fr}}

/* ==========================================================================
   Martyn's Law scope checker — the one thing nobody else on this SERP has
   ========================================================================== */
.checker{background:var(--charcoal);color:#fff;padding:74px 0}
.checker .eyebrow{margin-bottom:16px}
.checker h2.sec{color:#fff;max-width:20ch}
.checker .lead{color:#d8d8d8;max-width:60ch}
.ck{margin-top:34px}
.ckq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;counter-reset:ck}
.ckq > li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);padding:24px 26px}
.ckq h3{color:#fff;font-size:18px;margin:0 0 4px;display:flex;align-items:baseline;gap:12px}
.ckn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#04222e;
  font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;margin-top:2px}
.ckhelp{color:#c9c9c9;font-size:14.5px;margin:6px 0 0 38px;max-width:66ch}
.ckopts{display:flex;flex-direction:column;gap:9px;margin:16px 0 0 38px}
.ckopts label{display:flex;align-items:flex-start;gap:11px;cursor:pointer;color:#e8e8e8;
  font-size:15.5px;line-height:1.5;padding:9px 12px;border-radius:9px;border:1px solid transparent}
.ckopts label:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.ckopts input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--cyan)}
.ckopts input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ck > .btn{margin-top:28px}
.ckmiss{color:#FFD9D5;font-size:14.5px;margin-top:14px;font-weight:600}

.ckresult{margin-top:32px}
.ckcard{background:#fff;color:var(--charcoal);border-radius:var(--radius);padding:30px 32px;
  border-top:5px solid var(--cyan)}
.ckcard.enh{border-top-color:var(--yellow)}
.ckcard.out{border-top-color:#8E8E8E}
.cktag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:var(--cyan);color:#04222e;padding:5px 12px;border-radius:6px;margin-bottom:14px}
.ckcard.enh .cktag{background:var(--yellow);color:var(--charcoal)}
.ckcard.out .cktag{background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.ckcard h3{font-size:24px;margin:0 0 10px}
.ckcard p{color:var(--muted);font-size:16.5px;margin:0;max-width:72ch}
.ckcard em{font-style:italic}
.ckwarn{margin-top:20px;background:var(--bg2);border-left:3px solid var(--cyan-ink);
  padding:14px 18px;border-radius:0 8px 8px 0;font-size:15px;color:var(--muted)}
.ckwarn strong{color:var(--charcoal)}
.ckcard h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:24px 0 8px;font-weight:800}
.cksrc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.cksrc a{font-size:14.5px;font-weight:600}
@media(max-width:700px){
  .checker{padding:54px 0}
  .ckq > li{padding:20px 18px}
  .ckhelp,.ckopts{margin-left:0}
  .ckcard{padding:24px 20px}
}

/* floor-plan upload on the survey form */
.fileup input[type=file]{width:100%;font:inherit;font-size:14.5px;padding:11px 12px;
  border:1px dashed var(--line);border-radius:10px;background:var(--bg2);cursor:pointer}
.fileup input[type=file]:hover{border-color:var(--cyan)}
.fileup input[type=file]:focus-visible{outline:2px solid var(--cyan-ink);outline-offset:2px}
.fileup .opt{font-weight:500;font-size:12.5px;color:var(--muted);text-transform:none;letter-spacing:0}
.fhelp{font-size:13.5px;color:var(--muted);margin:4px 0 8px;line-height:1.55}
.fhelp:last-of-type{margin:8px 0 0}
.ckcarried{display:inline-block;background:var(--cyan);color:#04222e;font-weight:800;font-size:13.5px;
  padding:8px 14px;border-radius:8px;margin:0 0 18px}
/* the result scrolls itself into view, so it needs to clear the sticky header */
.ckresult{scroll-margin-top:118px}

/* Playbook signature: hero-lines art behind the home hero. Yellow, because the
   art is the group marker; SEGsafe's cyan stays on the highlighted phrase. */
.hero{position:relative}
.hero-lines{position:absolute;top:0;right:0;bottom:0;width:min(62%,900px);z-index:0;
  pointer-events:none;overflow:hidden}
.hero-lines img{width:100%;height:100%;object-fit:cover;object-position:right center;
  opacity:.55;display:block}
@media(max-width:900px){.hero-lines{width:100%;opacity:.5}}

/* if the highlight ever wraps, each line keeps its own padding and radius */
.hlc{-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===========================================================================
   RUSSELL'S DESIGN — 6 October 2026
   ---------------------------------------------------------------------------
   Applied as an override layer at the foot of the stylesheet rather than by
   rewriting the rules above. Three reasons: the cascade does the work so no
   existing selector has to be hunted down and edited; every change is visible
   in one block for review; and it reverts by deleting this block.

   Ported from SEGsafe-final-2026-10-05: the warmer sand palette, the brighter
   yellow, pill buttons, the bar-and-text eyebrow, heavier display weights and
   the larger radius.

   TYPE: Russell's file loads Inter and JetBrains Mono from Google Fonts. Not
   adopted. The site's CSP is `style-src 'self'; font-src 'self'`, so a Google
   Fonts link would be blocked outright, and widening it to a third party puts
   an IP-logging request on every page load on a site whose whole posture is
   restraint about visitor data. The system stack renders SF Pro on macOS and
   Segoe on Windows, both close enough to Inter that the design reads as
   intended. Self-host Inter later if the difference matters.
   =========================================================================== */

:root{
  /* palette — warmer ground, brighter action */
  --yellow:#FDEE1C; --yellow-d:#E8D800;
  --soft:rgba(253,238,28,.28); --soft2:rgba(253,238,28,.12);
  --bg2:#F2F1EC;            /* sand, was #f7f7f4 */
  --line:#E4E2D8;           /* warmer rule, was #e6e5e1 */
  --muted:#3A3A38;          /* body copy, was #464646 */
  --muted-2:#6B6B66;        /* secondary copy */
  --radius:18px; --radius-sm:12px;
  --shadow:0 18px 50px rgba(31,31,31,.10);
  --shadow-sm:0 6px 18px rgba(31,31,31,.08);

  /* the four procedures, colour-coded per Russell's tiles */
  --c-evac:#1E9E5A; --c-inv:#1D5FA8; --c-lock:#D7301F; --c-comm:#FDEE1C;
  --on-evac:#fff; --on-inv:#fff; --on-lock:#fff; --on-comm:#1F1F1F;
}

/* --- type ----------------------------------------------------------------
   segplc.com and segwifi.co.uk both run Inter, loaded from Google Fonts, at
   17px/1.6. SEGsafe now matches. This needs `style-src` and `font-src` widened
   in _headers for fonts.googleapis.com and fonts.gstatic.com — the two have to
   ship together or the font is blocked in production while working locally. */
body{font-size:17px;line-height:1.6;
  font-family:Inter,"Aptos","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif}
h1,h2,h3,h4{letter-spacing:-.03em}
h1{font-weight:900}
h2.sec{font-weight:800;letter-spacing:-.028em}
.lead{font-size:1.12rem;max-width:62ch}

/* --- buttons: pills ------------------------------------------------------ */
.btn{border-radius:999px;min-height:46px;padding:13px 26px;border-width:2px}
.btn-primary{border-color:var(--yellow)}
.btn-primary:hover{background:var(--yellow-d);border-color:var(--yellow-d)}

/* --- eyebrow: bar and text, not a filled chip ----------------------------
   The old eyebrow was a filled yellow chip precisely so it stayed legible on
   any ground. Russell's is a rule plus muted text, which does NOT survive a
   dark band — hence the dark-context override below. Both are kept correct. */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  background:none;color:var(--muted-2);padding:0;border-radius:0;
  font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:4px;border-radius:2px;
  background:var(--yellow-d);flex:none}

/* dark bands: the muted grey would drop to ~2:1 on charcoal */
/* Two earlier rules (.process .eyebrow and .sceneband .eyebrow) set the yellow
   chip background at 0,2,0 specificity, so clearing it needs the same weight —
   otherwise the light ink below lands on a yellow ground at 1.03:1. */
.process .eyebrow,.hero .eyebrow,.ctasec .eyebrow,.groupsec.dark .eyebrow,
.phero .eyebrow,.sceneband .eyebrow,.sceneband.light .eyebrow{
  background:none;padding:0;border-radius:0;color:#E9E7DD}
.sceneband.light .eyebrow{color:var(--muted-2)}
.process .eyebrow::before,.hero .eyebrow::before,.ctasec .eyebrow::before,
.phero .eyebrow::before{background:var(--yellow)}

/* keep the cyan variant a filled chip — cyan ink on charcoal is too close */
.eyebrow.cy{display:inline-block;background:var(--cyan);color:#04222e;
  padding:6px 14px;border-radius:6px}
.eyebrow.cy::before{display:none}

/* --- surfaces ------------------------------------------------------------ */
.card{border-radius:var(--radius);padding:1.5rem 1.6rem}
.wrap{max-width:1200px}

/* --- the cyan question -----------------------------------------------------
   Russell's design is yellow-only. The live site used SEG Safe Cyan as the
   accent, taken from the approved master logo. Those two cannot both drive the
   page, so: cyan stays the BRAND MARK (the logo dot, and the dark-ground
   accents where yellow would shout), and yellow takes every highlight and
   action. The hero highlight in particular had cyan and yellow fighting each
   other at the top of every page.
   Michael to confirm — this is the one judgement call in the restyle. */
/* On a LIGHT ground the highlight is an underline sweep behind the text. On a
   DARK ground that leaves the top of the letterforms sitting on charcoal with
   charcoal ink, which is unreadable — so dark grounds get a solid block, the
   same treatment the cyan version used. */
.hlc{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 96%,transparent 96%);
  color:var(--charcoal)}
/* segplc.com sets the group pattern: on a dark ground the highlight is YELLOW
   TEXT, not a filled block. Matching it, so the two sites read as one estate. */
.hero .hlc,.phero .hlc,.process .hlc,.band-dark .hlc{
  background:none;color:var(--yellow);padding:0;border-radius:0}
.field .req{color:var(--yellow-d)}

/* --- SEG GROUP lockup ------------------------------------------------------
   Supplied by Michael 26 Sep 2026. The master has a black wordmark, so it needs
   a light ground; in the charcoal footer it sits on a white chip rather than
   being recoloured, because there is no reversed master on file and inventing
   one is not ours to do. */
.glogo{display:block}
.glogo img{display:block;width:100%;height:auto}
.glogo.band{width:300px;max-width:62vw;margin:0 0 22px}
.glogo-chip{display:inline-block;background:#fff;border-radius:10px;padding:12px 16px;margin:0 0 18px}
.glogo.foot{width:150px}
@media(max-width:700px){.glogo.band{width:230px;margin-bottom:18px}}

/* --- CSP fallout, found live 6 Oct 2026 -----------------------------------
   `_headers` sets `style-src 'self'` with no 'unsafe-inline'. That blocks BOTH
   inline style="" attributes AND <style> blocks inside the inline SVG logo —
   in production only, because a local static server sends no CSP at all. The
   visible symptom was the SEGsafe mark rendering as a BLACK blob instead of
   the cyan droplet, on every page, since launch.

   Fixed by moving both out of the markup rather than by weakening the CSP:
   the logo fill lives here, and the ten inline spacing values became the
   utility classes below. Nothing inline remains.
   -------------------------------------------------------------------------- */
.logo .st0,.brand svg .st0{fill:var(--cyan)}

.u-gap14{gap:14px}
.u-gap12{gap:12px}
.u-m0{margin:0}
.u-mt38{margin-top:38px}
.u-mt30{margin-top:30px}
.u-mt28{margin-top:28px}
.u-mt26{margin-top:26px}
.u-mt24{margin-top:24px}
.u-mt20{margin-top:20px}
.u-mt18{margin-top:18px}