/* ==========================================================================
   SEGwifi — site stylesheet
   SEG group design system: Yellow #F5D000 / Charcoal #1F1F1F / 16px radius
   Site-specific devices: signal-arc hero art, coverage-gradient band,
   AP-node fibre strand.
   ========================================================================== */

:root{
  --yellow:#F5D000; --yellow-d:#e0bf00; --soft:rgba(245,208,0,.16);
  --charcoal:#1F1F1F; --graphite:#3d3d3d; --lgrey:#D9D9D9; --white:#fff;
  --ink:#1F1F1F; --muted:#464646; --line:#EAE6DA; --bg:#fff; --bg2:#F7F4EA;
  --shadow:0 12px 34px rgba(31,31,31,.12); --shadow-sm:0 4px 16px rgba(31,31,31,.07);
  --radius:16px;
  /* Warm figure panel — measured off verkadacctv.co.uk/cameras/, not guessed.
     The yellow sits on the RIGHT of the panel and fades left, it is not a wash:
       left / mid-left  rgb(246,242,227)
       right, upper     rgb(245,236,195)
       right, lower     rgb(245,240,220)
     and each panel is closed by a solid 3px rule in rgb(243,202,0) before the
     white caption strip. That rule is what makes those cards read as crisp
     rather than soft, and it was the piece missing from the first attempt. */
  --pane: radial-gradient(105% 135% at 100% 0%, rgba(245,208,0,.155) 0%,
                          rgba(245,208,0,.055) 46%, rgba(245,208,0,0) 84%),
          linear-gradient(#F6F2E3, #F6F2E3);
  --pane-line: rgba(245,208,0,.42);
  --pane-rule: #F3CA00;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
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.6;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;position:relative;z-index:2}
section{padding:84px 0;position:relative}
section.tight{padding:56px 0}
.flow{position:relative}
h1,h2,h3,h4{line-height:1.13;letter-spacing:-.02em;color:var(--charcoal)}
h1{font-size:clamp(30px,5vw,50px);font-weight:800}
h2.sec{font-size:clamp(26px,3.4vw,34px);font-weight:800;margin-bottom:12px;padding-bottom:12px;position:relative}
h2.sec::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--yellow);border-radius:2px}
.center h2.sec::after,h2.sec.center::after{left:50%;transform:translateX(-50%)}
h3.sub{font-size:22px;font-weight:800;margin-bottom:10px}
.lead{color:var(--muted);font-size:18px;max-width:660px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.hl{color:var(--yellow)}
.hly{background:var(--yellow);color:var(--charcoal);padding:0 8px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.prose p{color:var(--muted);font-size:16.5px;margin-bottom:16px;max-width:72ch}
.prose h2{margin:34px 0 12px;font-size:25px;font-weight:800}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px;font-size:21px}
.prose h4{margin:22px 0 8px;font-size:17px}
.prose ul,.prose ol{margin:0 0 18px 22px;color:var(--muted);max-width:72ch}
.prose li{margin-bottom:9px}
.prose strong{color:var(--charcoal)}
.prose a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:2px}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--charcoal);background:var(--yellow);padding:6px 14px;border-radius:6px;margin-bottom:16px}

/* buttons */
.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}

/* topbar + header */
.topbar{background:var(--yellow);color:var(--charcoal);text-align:center;font-size:13px;font-weight:700;padding:8px 16px;letter-spacing:.01em}
header{position:sticky;top:0;z-index:60;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:74px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto;display:block}
.foot-logo{height:42px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:24px}
.menu>li{list-style:none;position:relative}
.menu a{color:var(--charcoal);font-weight:600;font-size:15px;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:15px;color:var(--charcoal);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;border-bottom:2px solid transparent}
.has-sub>button svg{width:14px;height:14px;stroke:var(--charcoal);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.has-sub.open>button svg{transform:rotate(180deg)}
.has-sub>button:hover,.has-sub.open>button,.has-sub.current>button{border-bottom-color:var(--yellow)}
.sub{position:absolute;top:calc(100% + 14px);left:-16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;min-width:300px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;list-style:none}
.has-sub.open .sub,.has-sub:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{list-style:none}
.sub a{display:block;padding:9px 12px;border-radius:9px;border:0;font-weight:700;font-size:14.5px}
.sub a:hover{background:var(--bg2)}
.sub small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px;letter-spacing:0}
.nav-cta{display:flex;align-items:center;gap:14px}
.phone{font-weight:800;font-size:15px;white-space:nowrap}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;position:relative;z-index:90}
.burger span{display:block;width:24px;height:2.5px;background:var(--charcoal);border-radius:2px;transition:.2s;transform-origin:center}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* bands */
.band-alt{background:var(--bg2)}
.band-dark{background:var(--charcoal);color:#fff}
.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .lead,.band-dark p{color:#dcdcdc}
.band-dark .eyebrow{background:var(--yellow);color:var(--charcoal)}
.band-cover{background:var(--charcoal);color:#fff;position:relative;overflow:hidden}
.band-cover::before{content:"";position:absolute;inset:0;background:
  radial-gradient(58% 74% at 16% 42%, rgba(245,208,0,.26) 0%, rgba(245,208,0,0) 62%),
  radial-gradient(48% 62% at 78% 26%, rgba(245,208,0,.15) 0%, rgba(245,208,0,0) 66%),
  radial-gradient(70% 80% at 52% 108%, rgba(61,61,61,.85) 0%, rgba(31,31,31,0) 70%);
  z-index:1}
.band-cover h2,.band-cover h3,.band-cover h4{color:#fff}
.band-cover p{color:#e2e2e2}

/* hero — the group pattern: charcoal band, hero lines art, copy left, short form right.
   Matches segcore.co.uk / verkadacctv.co.uk so the estate reads as one group. */
.hero{position:relative;overflow:hidden;background:var(--charcoal);color:#fff;padding:92px 0 100px}
.hero::before{content:"";position:absolute;top:-30%;right:-10%;width:620px;height:620px;
  background:radial-gradient(circle,rgba(245,208,0,.20),transparent 62%);pointer-events:none}
/* The lines art carries a scrim over the copy column. Without it the rings run
   straight through the h1 and the lead, which is the same readability fault the
   strand had -- decoration must sit beside the words, never across them. */
.hero::after{content:"";position:absolute;inset:0;opacity:.95;pointer-events:none;
  background:linear-gradient(90deg,rgba(31,31,31,.93) 0%,rgba(31,31,31,.86) 26%,rgba(31,31,31,.38) 52%,rgba(31,31,31,0) 72%),
             url("/img/hero-lines.svg") right center/cover no-repeat}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:50px;font-weight:800;line-height:1.1;margin-bottom:18px}
.hero .lead{color:#d6d6d6;font-size:19px;max-width:560px;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero-note{font-size:14.5px;color:#e6e6e6;font-weight:600}
.hero .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.hero .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* hero card — the short form. Five fields; every one changes the answer we give. */
/* Solid, not translucent: a panel with only an rgba() background sits on whatever
   the lines art happens to put behind it, and every contrast reading becomes a guess
   (playbook 2.2 -- the checker walks up to white). This one is its own band. */
.hero-card{position:relative;z-index:2;background-color:#2b2b2b;
  border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:26px;
  box-shadow:0 18px 46px rgba(0,0,0,.34)}
.hero-card h2{color:#fff;font-size:19px;margin:0 0 6px;font-weight:800}
.hero-card .sub-t{color:#c9c9c9;font-size:13.5px;margin-bottom:18px;line-height:1.5}
.hero-card .field{margin-bottom:12px}
.hero-card .field label{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:5px}
.hero-card .field input,.hero-card .field select{width:100%;padding:11px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.28);color:#fff;font:inherit;font-size:15px}
.hero-card .field input::placeholder{color:#a8a8a8}
.hero-card .field input:focus,.hero-card .field select:focus{outline:3px solid var(--yellow);outline-offset:1px;border-color:var(--yellow)}
.hero-card .field select option{color:#1F1F1F;background:#fff}
.hero-card .btn{width:100%;justify-content:center;margin-top:8px}
.hero-card .reassure{color:#e6e6e6;font-size:12.5px;margin-top:12px;text-align:center;line-height:1.5}

/* proof strip */
.proof-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.proof{border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;background:#fff;text-align:center;transition:.18s}
.proof:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pico{width:38px;height:38px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.pico svg{width:20px;height:20px}
.pn{font-weight:800;font-size:15.5px;color:var(--charcoal);display:block;line-height:1.25}
.pl{font-size:12.5px;color:var(--muted);display:block;margin-top:5px;line-height:1.4}

/* fibre strand — SVG, weaves down the page and lights as you scroll.
   Same construction as the other group sites: base path + glow path revealed by
   stroke-dashoffset, nodes that light at each section, and a head that travels the path. */
main{position:relative}
#strand{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
.strand-base{fill:none;stroke:rgba(146,138,108,.45);stroke-width:2.5}
.strand-glow{fill:none;stroke:var(--yellow);stroke-width:3.6;stroke-linecap:round;
             filter:drop-shadow(0 1px 2px rgba(160,132,0,.45))}
.strand-node{fill:#fff;stroke:#E4E0D2;stroke-width:2.5;transition:fill .3s,stroke .3s,r .3s}
.strand-node.lit{fill:var(--yellow);stroke:#C9A400}
.strand-head{fill:var(--yellow);stroke:#fff;stroke-width:2;
             filter:drop-shadow(0 0 6px rgba(245,208,0,.9))}
.strand-packet{fill:var(--yellow);opacity:0}

/* grids + cards */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:#fff;transition:.18s;display:flex;flex-direction:column}
.card h3{font-size:19px;font-weight:800;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px;margin-bottom:0}
.card.link:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#dcdcd8}
.card .more{margin-top:auto;padding-top:14px;font-weight:800;font-size:14.5px;color:var(--charcoal)}
.card .more::after{content:" →"}
.band-dark .card{background:var(--graphite);border-color:#4d4d4d}
.band-dark .card p{color:#d6d6d6}
.ico{width:44px;height:44px;border-radius:11px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex:none}
.ico svg{width:23px;height:23px}
.band-dark .ico{background:rgba(245,208,0,.18)}
.band-dark .ico svg{stroke:var(--yellow)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;background:#fff;position:relative}
.step .n{width:34px;height:34px;border-radius:9px;background:var(--yellow);color:var(--charcoal);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:13px;font-size:15px}
.step h3{font-size:17px;margin-bottom:7px}
.step p{color:var(--muted);font-size:14.5px}
.step:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--yellow);clip-path:polygon(0 20%,55% 20%,55% 0,100% 50%,55% 100%,55% 80%,0 80%);z-index:3}

/* sectors */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sector{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff;transition:.18s;display:block}
.sector:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.sector h3{font-size:17px;margin-bottom:6px}
.sector p{color:var(--muted);font-size:14.5px}

/* case studies — uniform cards, rows of three */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.case:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.case .ch{height:118px;background-color:#1F1F1F;background-image:linear-gradient(135deg,var(--charcoal) 0%,var(--graphite) 60%,#565656 100%);position:relative;display:flex;align-items:flex-end;padding:16px}
.case .ch::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 76% 18%, rgba(245,208,0,.34) 0%, rgba(245,208,0,0) 62%)}
.case .ch span{position:relative;z-index:2;font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--yellow)}
.case .cb{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.case h3{font-size:18px;margin-bottom:8px}
.case p{color:var(--muted);font-size:14.5px;margin-bottom:0}
.case .more{margin-top:auto;padding-top:14px;font-weight:800;font-size:14.5px}
.case .more::after{content:" →"}

/* accreditations + partners */
.accred{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.accred li{list-style:none;border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-weight:800;font-size:14px;background:#fff;color:var(--charcoal)}
.logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.logo-chip{border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-weight:700;font-size:14.5px;background:#fff;color:var(--charcoal)}

/* group band */
.group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.gcard{border:1px solid #4d4d4d;align-items:center;border-radius:var(--radius);padding:26px 22px 22px;background:var(--graphite);text-align:center;display:flex;flex-direction:column;justify-content:flex-start}
.gcard.is-here{border-color:var(--yellow);background:#2b2b2b}
.gcard img{height:52px;width:auto;margin:0 auto;display:block;flex:none}
.gcard > span{display:block;font-size:13.5px;color:#c9c9c9;margin-top:16px;margin-bottom:14px}
a.gcard:hover{border-color:var(--yellow);transform:translateY(-2px)}
a.gcard{transition:.18s}
.gcard .tagx{display:inline-block;margin-top:auto;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal);background:var(--yellow);padding:3px 9px;border-radius:20px}

/* faq */
.faq{max-width:880px}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;font-weight:800;font-size:16px;padding:17px 20px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;color:var(--charcoal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:700;line-height:1;color:var(--charcoal);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px;color:var(--muted);font-size:15.5px}
.faq .a p{margin-bottom:10px}
.faq .a p:last-child{margin-bottom:0}
.faq .a ul{margin:0 0 10px 20px}
.faq .a a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:2px}

/* cta band */
.cta-band{background:var(--charcoal);color:#fff;border-radius:var(--radius);padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 130% at 88% 10%, rgba(245,208,0,.22) 0%, rgba(245,208,0,0) 62%)}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{font-size:27px;font-weight:800;color:#fff;margin-bottom:7px;max-width:640px}
.cta-band p{color:#d5d5d5;font-size:15.5px;max-width:600px}
.cta-band .btns{display:flex;gap:12px;flex-wrap:wrap}

/* Page hero on the warm panel. The home hero stays charcoal -- that band is the
   group signature and matches segcore.co.uk and verkadacctv.co.uk -- but running
   it on all 52 inner pages made the site read dark and cool, which is the
   opposite of the tone Michael asked for. Same gradient as the figure panels, so
   the header and the first diagram below it belong to each other. */
.phero{position:relative;overflow:hidden;padding:60px 0 58px;color:var(--ink);
  background-color:#F9F6ED;background-image:var(--pane);
  border-bottom:1px solid var(--pane-line)}
.phero::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:linear-gradient(90deg,rgba(249,246,237,.97) 0%,rgba(249,246,237,.88) 32%,rgba(249,246,237,.3) 62%,rgba(249,246,237,0) 82%),
             url("/img/hero-lines.svg") right center/cover no-repeat}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:var(--charcoal);margin-bottom:14px;max-width:22ch}
.phero p{color:var(--muted);font-size:18px;max-width:680px}
.phero .hero-cta{margin-top:24px;margin-bottom:0}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:16px;font-weight:600}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(31,31,31,.28);text-underline-offset:2px}
.crumbs a:hover{color:var(--charcoal)}

/* Reduced motion gets the static twin of the lines art (playbook, brand system). */
@media (prefers-reduced-motion:reduce){
  .hero::after{background-image:linear-gradient(90deg,rgba(31,31,31,.93) 0%,rgba(31,31,31,.86) 26%,rgba(31,31,31,.38) 52%,rgba(31,31,31,0) 72%),url("/img/hero-lines-static.svg")}
  .phero::after{background-image:linear-gradient(90deg,rgba(249,246,237,.97) 0%,rgba(249,246,237,.88) 32%,rgba(249,246,237,.3) 62%,rgba(249,246,237,0) 82%),url("/img/hero-lines-static.svg")}
}

/* contact + forms */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--charcoal)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--yellow)}
.field .hint{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.cols-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.reassure{font-size:14.5px;color:var(--charcoal);font-weight:600;margin-top:14px;max-width:60ch}
.hp,.hp *{position:absolute;left:-9999px;color:#1F1F1F;background:#fff}
.cinfo{list-style:none}
.cinfo li{display:flex;gap:13px;align-items:flex-start;margin-bottom:17px;font-size:15.5px;color:var(--muted)}
.cinfo b{display:block;color:var(--charcoal);font-size:15.5px}
.cinfo .ico{width:38px;height:38px;margin-bottom:0}
.cinfo .ico svg{width:19px;height:19px}

/* misc */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 22px;border:1px solid var(--line);border-radius:var(--radius)}
table.t{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.t th{background:var(--charcoal);color:#fff;text-align:left;padding:12px 15px;font-weight:800;font-size:14px}
table.t td{padding:12px 15px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t td strong{color:var(--charcoal)}
table.t a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:2px}
.quote{border-left:4px solid var(--yellow);padding:6px 0 6px 22px;margin:22px 0;font-size:17.5px;color:var(--charcoal);max-width:70ch}
.quote cite{display:block;font-size:14.5px;color:var(--muted);font-style:normal;font-weight:700;margin-top:10px}
.ticks{list-style:none;max-width:72ch}
.ticks li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--muted);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:5px;background:var(--soft)}
.ticks li::after{content:"";position:absolute;left:5px;top:11px;width:9px;height:5px;border-left:2.2px solid var(--charcoal);border-bottom:2.2px solid var(--charcoal);transform:rotate(-45deg)}
.ticks li strong{color:var(--charcoal)}
.band-dark .ticks li,.band-cover .ticks li{color:#d8d8d8}
.band-dark .ticks li strong,.band-cover .ticks li strong{color:#fff}
.band-dark .ticks li::before,.band-cover .ticks li::before{background:rgba(245,208,0,.22)}
.band-dark .ticks li::after,.band-cover .ticks li::after{border-color:var(--yellow)}
.note{border:1.5px solid var(--yellow);background:#fffdf0;border-radius:12px;padding:18px 20px;margin:20px 0;font-size:15.5px;color:var(--charcoal);max-width:72ch}
.note b{display:block;margin-bottom:5px}
.note a{text-decoration:underline}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.mini{font-size:13.5px;color:var(--muted)}
.mini a{text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel a{border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-weight:800;font-size:15px;background:#fff;transition:.18s}
.rel a:hover{border-color:var(--yellow);transform:translateY(-2px)}
.rel a small{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:4px}

/* footer */
footer{background:var(--charcoal);color:#fff;padding:62px 0 30px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:34px;border-bottom:1px solid #383838}
.foot-brand p{color:#c4c4c4;font-size:14.5px;margin-top:17px;max-width:40ch}
.foot-top h4,.foot-top .fh{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:15px}
.foot-top ul{list-style:none}
.foot-top li{margin-bottom:10px;font-size:14.5px;color:#c4c4c4;line-height:1.55}
.foot-top a{color:#c4c4c4}
.foot-top a:hover{color:#fff;text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:13.5px;color:#a8a8a8}
.foot-bottom a{color:#a8a8a8}
.foot-bottom a:hover{color:#fff}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1140px){
  .menu{gap:18px}
  .menu a,.has-sub>button{font-size:14.5px}
}
@media (max-width:1080px){
  .proof-grid{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:1240px){
  #strand{display:none}
}
@media (max-width:1000px){
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .menu{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:88px 22px 30px;box-shadow:-10px 0 40px rgba(0,0,0,.16);transform:translateX(100%);transition:.24s;overflow-y:auto;z-index:70}
  .menu.open{transform:translateX(0);visibility:visible}
  .menu:not(.open){visibility:hidden}
  .menu>li{border-bottom:1px solid var(--line)}
  .menu a{display:block;width:100%;padding:14px 0;border-bottom:0;font-size:16px}
  .has-sub>button{display:flex;width:100%;padding:14px 0;border-bottom:0;font-size:16px;justify-content:space-between;align-items:center;text-align:left}
  .sub a{padding:11px 0 11px 14px}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px;min-width:0;display:none}
  .has-sub:hover .sub{display:none}
  .has-sub.open .sub{display:block}
  .burger{display:flex}
  .phone{display:none}
  .nav-cta .btn{display:none}
  .hero-grid,.contact-grid,.split{grid-template-columns:1fr}
  .hero{padding:64px 0 72px}
  .hero h1{font-size:37px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2)::after{display:none}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  #strand{display:none}
}
@media (max-width:760px){
  .brand img{height:33px}
  section{padding:60px 0}
  .wrap{padding:0 20px}
  .cols-3,.sector-grid,.case-grid,.rel,.group-grid{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr}
  .cta-band{padding:32px 26px}
  .cta-band h2{font-size:23px}
  .cols-form{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step::after{display:none}
  .hero{padding:56px 0 60px}
  .hero h1{font-size:31px}
  .hero .lead{font-size:17px}
  .phero{padding:46px 0 46px}
  .hero::after,.phero::after{background-position:right top;opacity:.55}
}
@media (max-width:420px){
  .proof-grid{grid-template-columns:1fr}
  .cols-4{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .hero-cta{flex-direction:column}
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  #strand{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .arc{animation:none;opacity:.75}
}

/* ---------------------------------------------------------------- print */
@media print{
  header,footer,.cta-band,.burger,#strand,.topbar{display:none}
  body{font-size:12pt;color:#000}
  a{text-decoration:underline}
}

/* ---------------------------------------------------------------- figures */
.fig{margin:26px 0 30px;max-width:none}
.fig svg{width:100%;height:auto;display:block;border-radius:var(--radius);
         border:1px solid var(--line);border-bottom:3px solid var(--pane-rule);
         background-color:#F6F2E3;background-image:var(--pane)}
.fig.dark svg{border-color:#3d3d3d;background:var(--charcoal)}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:11px;line-height:1.55;max-width:74ch}
.fig figcaption b{color:var(--charcoal);font-weight:800}
.band-dark .fig figcaption,.band-cover .fig figcaption{color:#cfcfcf}
.band-dark .fig figcaption b,.band-cover .fig figcaption b{color:#fff}
.fig-wide{max-width:100%}
.fig-side{margin:0}
.fig-side svg{border-radius:12px}
/* Site photographs. These are portrait phone shots taken on a live job, and
   cropping them to landscape throws away the subject -- an engineer at a tripod
   becomes a picture of a ceiling. So the photograph keeps its own shape and sits
   BESIDE its caption, which also fills the space a tall image would otherwise
   leave empty down one side. */
.prose,.split>div{container-type:inline-size}
.photo{margin:28px 0 32px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:30px;
       align-items:center;max-width:none}
@container (max-width:640px){
  .photo{grid-template-columns:1fr;gap:14px}
  .photo img{grid-column:1;grid-row:1;max-width:100%}
  .photo figcaption{grid-column:1;grid-row:2;max-width:none}
}
.photo img{width:100%;height:auto;display:block;border-radius:var(--radius);
           border:1px solid var(--line);grid-column:1;grid-row:1}
.photo figcaption{font-size:15px;color:var(--muted);line-height:1.6;max-width:60ch;
                  grid-column:2;grid-row:1;margin:0}
.photo figcaption b{color:var(--charcoal);font-weight:800}

/* A pair reads as a comparison, so both stay the same size with captions beneath. */
.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 32px}
.photo-row .photo{margin:0;display:block}
.photo-row .photo img{aspect-ratio:3/4;object-fit:cover;object-position:center 42%}
.photo-row .photo figcaption{margin-top:11px;font-size:14px;max-width:none}

/* Photo strip. auto-fit rather than a fixed count, so dropping a tile closes the
   row instead of leaving a hole (playbook 2.2.14). */
.pstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:0}
.pstrip-item{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
             background-color:#232323;border:1px solid var(--line)}
.pstrip-item img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
                 object-position:center 42%}
.pstrip-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 14px 13px;
  font-size:13.5px;font-weight:700;color:#fff;line-height:1.35;
  background:linear-gradient(to top,rgba(15,15,15,.92) 0%,rgba(15,15,15,.72) 45%,rgba(15,15,15,0) 100%)}
.band-dark .pstrip-item,.band-cover .pstrip-item{border-color:#3d3d3d}
@media (max-width:700px){.pstrip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}}

/* A landscape photograph fights the beside-the-caption grid -- give it the whole
   column and put the caption under it. */
/* The van shot is the one people judge the company by -- give it the full column
   and let it run at its native width rather than a thumbnail's. */
.photo.wide{display:block;max-width:none}
.photo.wide img{width:100%;aspect-ratio:auto;border-radius:var(--radius)}
.photo.wide figcaption{margin-top:14px;max-width:72ch;font-size:15.5px}

@media (max-width:860px){
  .photo{grid-template-columns:1fr;gap:14px}
  .photo img{grid-column:1;grid-row:1;max-width:420px;margin:0 auto}
  .photo figcaption{grid-column:1;grid-row:2;max-width:none}
}
@media (max-width:600px){.photo-row{grid-template-columns:1fr}}
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 30px}
.figrow .fig{margin:0;max-width:100%}
@media (max-width:760px){.figrow{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- long form */
.qform{max-width:860px}
.qsec{border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 8px;margin-bottom:18px;background:#fff}
.qsec>legend{font-weight:800;font-size:18px;color:var(--charcoal);padding:0 10px;margin-left:-10px;letter-spacing:-.01em}
.qsec .qintro{color:var(--muted);font-size:14.5px;margin:6px 0 20px;max-width:66ch}
.qnum{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
      background:var(--yellow);color:var(--charcoal);font-size:13px;font-weight:800;margin-right:9px;vertical-align:2px}
.cols-3f{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.checkrow{display:flex;flex-wrap:wrap;gap:8px 20px;margin:2px 0 4px}
.checkrow label{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--charcoal);
                border:1.5px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;background:#fff;margin:0}
.checkrow label:hover{border-color:var(--yellow)}
.checkrow input{width:17px;height:17px;accent-color:var(--charcoal);margin:0;flex:none}
.field input[type=file]{padding:10px 12px;background:var(--bg2);cursor:pointer}
.qform .btn{margin-top:6px}
@media (max-width:760px){.cols-3f{grid-template-columns:1fr}}

/* ------------------------------------------------- vendor / tooling renders
   Transparent renders on a yellow-tinted radial panel, per the group pattern —
   never a white-boxed image sitting on a tint. */
/* Product renders on the warm panel — Michael's instruction, matching
   verkadacctv.co.uk. This is a departure from playbook 2.2.13, which says
   transparent renders go on a DARK panel; that rule was written after a WHITE
   product on a pale panel rendered as an empty box. The Ekahau kit is dark grey,
   so a warm light ground gives it more contrast than charcoal did, not less.
   Recorded as a departure rather than silently overriding the playbook. */
.render{margin:26px 0 30px;border-radius:var(--radius);position:relative;overflow:hidden;
        background-color:#F6F2E3;background-image:var(--pane);
        border:1px solid var(--line);border-bottom:3px solid var(--pane-rule);
        padding:30px 26px 24px;text-align:center}
picture{display:contents}
/* A square render at full column width makes a panel taller than the section it
   illustrates. Cap the height and let width follow. */
.render img{max-width:100%;max-height:460px;width:auto;height:auto;display:block;margin:0 auto}
.render figcaption{font-size:14px;color:var(--muted);margin-top:18px;line-height:1.55;
                   max-width:62ch;margin-left:auto;margin-right:auto;text-align:center}
.render figcaption b{color:var(--charcoal);font-weight:800}
.band-dark .render,.band-cover .render{border-color:rgba(245,208,0,.5)}
.render.sm{padding:24px 20px 20px}
.render.sm img{max-width:360px}
/* A portrait render in a full-width panel leaves a hole either side of it
   (playbook 2.2.12: anywhere there is space, use it). Set the tall variant beside
   its caption instead of above it. picture{display:contents} means the img and the
   figcaption are the grid children. */
.render.tall{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center;
             text-align:left;padding:26px}
/* Place both children explicitly. picture{display:contents} promotes the <source>
   to a grid item too, and auto-placement gives it the first cell -- which pushes
   the render into column two and leaves an empty box where the image should be.
   Exactly the dead-cell fault, arriving from an element that draws nothing. */
.render.tall img{max-width:230px;margin:0;grid-column:1;grid-row:1}
.render.tall figcaption{margin:0;text-align:left;max-width:54ch;font-size:15px;
                        grid-column:2;grid-row:1}
@media (max-width:760px){
  .render.tall{grid-template-columns:1fr;text-align:center}
  .render.tall img{margin:0 auto;max-width:200px;grid-column:1;grid-row:1}
  .render.tall figcaption{text-align:center;margin:16px auto 0;grid-column:1;grid-row:2}
}
/* Product-type cards — the verkadacctv.co.uk pattern Michael asked for. A warm
   tinted panel carrying the artwork, then a white body with the copy and a
   labelled fact line. Panel art on the tint, facts on white: the two halves do
   different jobs and the colour change is what says so. */
.ctype-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.ctype{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
       border-radius:var(--radius);overflow:hidden;transition:.18s}
a.ctype:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--yellow)}
.ctype-pane{background-color:#F6F2E3;background-image:var(--pane);
            border-bottom:3px solid var(--pane-rule);
            padding:22px 20px;display:flex;align-items:center;justify-content:center;min-height:186px}
.ctype-pane svg,.ctype-pane img{width:100%;height:auto;max-height:170px;display:block;
                                object-fit:contain;border:0;background:none;border-radius:0}
.ctype-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.ctype-body h3{font-size:19px;font-weight:800;margin-bottom:8px;color:var(--charcoal)}
.ctype-body p{color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:14px}
.ctype-fact{font-size:14px;color:var(--muted);margin-top:auto;line-height:1.5}
.ctype-fact b{color:var(--charcoal);font-weight:800}
.ctype-fact + .ctype-fact{margin-top:6px}

/* Survey plots are photographs of paper drawings with a heatmap over them. They
   want a light, neutral mount -- not the dark panel the transparent product renders
   sit on, which would fight the plot's own colour scale. */
.plot{margin:26px 0 30px;border-radius:var(--radius);overflow:hidden;
      background-color:#F6F2E3;background-image:var(--pane);
      border:1px solid var(--line);border-bottom:3px solid var(--pane-rule);
      padding:14px 14px 0}
.plot img{display:block;width:100%;height:auto;border-radius:8px}
.plot figcaption{font-size:14px;color:var(--muted);line-height:1.55;padding:14px 8px 16px;
                 max-width:74ch;margin:0 auto;text-align:center}
.plot figcaption b{color:var(--charcoal);font-weight:800}
.plot-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 30px}
.plot-row .plot{margin:0}
.further{border-left:3px solid var(--yellow);padding:10px 0 10px 16px;margin:22px 0;
         font-size:15.5px;color:var(--muted);max-width:72ch}
.further b{color:var(--charcoal)}
.plot.half figcaption{padding:12px 8px 14px;font-size:13.5px}
@media (max-width:860px){.plot-row{grid-template-columns:1fr}}

.render-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 30px}
.render-row .render{margin:0}
@media (max-width:760px){.render-row{grid-template-columns:1fr}.render{padding:18px}}