/* The Omega Group: website overhaul concept. One sheet, no framework. */
:root{
  --navy:#00225b;--deep:#00173f;--ink:#232b3d;--muted:#5c6478;--line:#e1e6ef;--ground:#eef1f6;
  --orange:#ff4d01;--white:#fff;--on-navy:#c6d0e2;--rule-navy:rgba(255,255,255,.16);
  --gutter:clamp(16px,4vw,56px);--wrap:1400px;--band:clamp(56px,6.6vw,96px);
  --font:"Archivo",Arial,Helvetica,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.55 var(--font);font-synthesis:none;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;color:var(--navy);font-weight:600;letter-spacing:-.015em;line-height:1.14;text-wrap:balance}
ul{margin:0;padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:#fff;padding:12px 16px}.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.band{padding:var(--band) 0}
.ground{background:var(--ground)}
.dark{background:var(--deep);color:var(--on-navy)}
.navy{background:var(--navy);color:var(--on-navy)}
.dark h1,.dark h2,.dark h3,.dark h4,.navy h1,.navy h2,.navy h3,.navy h4{color:#fff}

/* Type scale */
.t-1{font-size:clamp(29px,1.9vw + 22px,50px)}
.t-2{font-size:clamp(23px,1.1vw + 19px,36px);line-height:1.17}
.t-3{font-size:clamp(19px,.5vw + 17px,23px);line-height:1.25}
.label{display:block;margin:0 0 14px;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:0}
.label::before{content:"";display:inline-block;width:20px;height:3px;margin:0 10px 4px 0;background:var(--orange)}
.dark .label,.navy .label{color:#fff}
.lead{font-size:clamp(16px,.25vw + 15.4px,18px);line-height:1.55}
.small{font-size:14px;line-height:1.5}
.stack>*+*{margin-top:18px}

/* Buttons: solid only. White on orange is Nick's call (3.3:1 at 16 px). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:3px;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn-o{background:var(--orange);color:#fff}.btn-o:hover{background:#e64500}
.btn-w{background:#fff;color:var(--navy);border-color:var(--navy)}.btn-w:hover{background:var(--navy);color:#fff}
.dark .btn-w,.navy .btn-w,.hero .btn-w{border-color:#fff}.dark .btn-w:hover,.navy .btn-w:hover,.hero .btn-w:hover{background:var(--ground);color:var(--navy)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px}
.dark .more,.navy .more{color:#fff}
.arrow{width:16px;height:16px;flex:none;transition:transform .22s var(--ease)}
a:hover>.arrow,a:hover .arrow{transform:translate(3px,-3px)}

/* Utility bar and header */
.util{background:var(--deep);color:var(--on-navy);font-size:13.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:38px}
.util a{text-decoration:none}.util a:hover{color:#fff;text-decoration:underline}
.util ul{display:flex;gap:22px;align-items:center}
.util-tel{color:#fff;font-weight:600}
.head{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;transition:background .25s}
.head>.wrap{display:flex;align-items:center;gap:32px;min-height:68px}
.head nav{margin-right:auto}
.logo{flex:none;display:block}.logo img{width:96px;height:auto}
.nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:7px;height:68px;padding:0 14px;background:none;border:0;color:#fff;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .18s}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded=true]{box-shadow:inset 0 -3px 0 var(--orange)}
.nav .chev{width:10px;height:10px;transition:transform .2s}
.nav button[aria-expanded=true] .chev{transform:rotate(180deg)}
.head-cta{display:flex;align-items:center;gap:18px;flex:none}
.head-tel{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-top:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,23,63,.45);display:none}
.mega.open{display:block}
.mega-grid{display:grid;grid-template-columns:1fr 1fr minmax(280px,.9fr);gap:48px;padding-top:36px;padding-bottom:40px}
.mega h2{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mega li a{display:block;padding:10px 0;text-decoration:none}
.mega li strong{display:block;color:var(--navy);font-weight:600}
.mega li span{display:block;color:var(--muted);font-size:14px;line-height:1.4}
.mega li a:hover strong{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px;text-decoration-thickness:2px}
.mega-feature{position:relative;display:block;min-height:260px;overflow:hidden;background:var(--navy);color:#fff;text-decoration:none}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.mega-feature div{position:absolute;left:20px;right:20px;bottom:18px;font-weight:600;font-size:18px;line-height:1.25}
.burger{display:none;width:46px;height:46px;background:none;border:0;padding:11px;cursor:pointer;color:#fff}
.burger span{display:block;height:2px;background:currentColor;margin:5px 0}
.drawer{display:none}

/* Hero */
body[data-hero] .head{position:sticky;margin-bottom:-68px;background:linear-gradient(rgba(0,23,63,.72),rgba(0,23,63,0))}
body[data-hero] .head.scrolled{background:var(--navy)}
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(92vh,880px);background:var(--deep);color:#fff;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:settle 1.8s var(--ease) both}
@keyframes settle{from{transform:scale(1.05)}to{transform:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,23,63,.94) 0%,rgba(0,23,63,.82) 34%,rgba(0,23,63,.18) 72%,rgba(0,23,63,.1)),linear-gradient(0deg,rgba(0,23,63,.6),rgba(0,23,63,0) 40%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:128px}
.hero-copy{max-width:620px}
.hero h1{color:#fff;margin-bottom:20px}
.hero p{color:#e8edf6}
.hero .note{margin-top:14px;color:var(--on-navy)}
.hero .btns{margin-top:28px}
.routes{position:relative;z-index:3;margin-top:-72px}
.routes ul{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;box-shadow:0 18px 40px -22px rgba(0,23,63,.4)}
.routes a{display:block;height:100%;padding:24px 24px 26px;text-decoration:none;border-left:1px solid var(--line);transition:background .18s}
.routes li:first-child a{border-left:0;box-shadow:inset 0 3px 0 var(--orange)}
.routes a:hover{background:var(--ground)}
.routes strong{display:flex;justify-content:space-between;gap:10px;color:var(--navy);font-size:18px;font-weight:600;line-height:1.25;margin-bottom:6px}
.routes span{display:block;color:var(--muted);font-size:14.5px;line-height:1.4}

/* Intro + figures */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,6vw,96px)}
.figures{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--navy);border-bottom:1px solid var(--line)}
.figures div{padding:24px 24px 26px 0;border-left:1px solid var(--line);padding-left:24px}
.figures div:first-child{border-left:0;padding-left:0}
.figures strong{display:block;color:var(--navy);font-size:clamp(30px,1.6vw + 22px,46px);font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.figures span{display:block;margin-top:6px;color:var(--muted);font-size:15px}
.proof{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(48px,6vw,88px)}
.proof-img{aspect-ratio:5/4;overflow:hidden;background:var(--ground)}
.proof-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:22px 0 28px}
.ticks li{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);color:var(--navy);font-weight:500}
.dark .ticks li,.navy .ticks li{border-color:var(--rule-navy);color:#fff}
.tick{flex:none;width:18px;height:18px;margin-top:3px;color:var(--orange)}

/* Capabilities index */
.head-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.caps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.caps-stage{position:sticky;top:110px;aspect-ratio:5/4;max-height:calc(100vh - 140px);width:100%;overflow:hidden;background:var(--navy)}
.caps-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.caps-stage img.on{opacity:1}
.caps-list{border-top:1px solid var(--navy)}
.cap{position:relative;border-bottom:1px solid #d3dae6}
.cap>a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;padding:20px 0 20px;text-decoration:none;transition:padding .22s var(--ease)}
.cap h3{font-size:clamp(19px,.4vw + 17.4px,23px);line-height:1.25;transition:color .15s}
.cap p{grid-column:1;color:var(--ink);font-size:15.5px;max-width:62ch}
.cap .go{grid-row:1/span 2;grid-column:2;align-self:center;display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;font-size:15px;white-space:nowrap}
.cap .go .arrow{color:var(--orange)}
.cap figure{display:none;margin:0}
.cap.on>a,.cap>a:hover{padding-left:16px;box-shadow:inset 3px 0 0 var(--orange)}

/* Instrument: the cube test read-out */
.rig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.panel{background:#00102d;border:1px solid var(--rule-navy)}
.panel-top{display:grid;grid-template-columns:1fr}
.panel-video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.panel-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 30%;transform:scale(1.22);transform-origin:72% 30%}
.panel-video::after{content:"";position:absolute;inset:0;background:linear-gradient(28deg,#00102d 0,rgba(0,16,45,.85) 15%,rgba(0,16,45,0) 46%);pointer-events:none}
.panel-video .rec{position:absolute;z-index:2;left:12px;top:12px;display:flex;align-items:center;gap:7px;padding:3px 9px;background:rgba(0,16,45,.85);color:#fff;font-size:12.5px;font-weight:500}
.panel-video i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.play{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px -8px rgba(0,0,0,.7);transition:transform .2s var(--ease)}
.play:hover{transform:scale(1.07)}
.play svg{width:26px;height:26px;margin-left:4px}
.panel-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.panel-video.playing::after{display:none}
.reads{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-navy)}
.read{display:flex;flex-direction:column;gap:8px;padding:16px 22px 18px;border-left:1px solid var(--rule-navy)}
.read:first-child{border-left:0}
.read span{color:var(--on-navy);font-size:14px}
.read strong{color:#fff;font-size:clamp(26px,1.6vw + 14px,38px);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.read em{font-style:normal;font-size:.42em;color:var(--on-navy);margin-left:6px;letter-spacing:0}
.trace{position:relative;padding:18px 22px 12px;border-top:1px solid var(--rule-navy)}
.trace svg{width:100%;height:auto}
.trace .gridline{stroke:rgba(255,255,255,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.trace .curve{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linejoin:round}
.trace text{fill:var(--on-navy);font:400 12px var(--font)}
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 22px 14px;color:var(--on-navy);font-size:13px;line-height:1.35}
.replay{flex:none;min-height:34px;padding:0 12px;background:#fff;border:0;border-radius:3px;color:var(--navy);font-size:13.5px;font-weight:600;cursor:pointer}

/* UK band */
.uk{position:relative;display:flex;align-items:flex-end;min-height:min(78vh,720px);background:var(--deep);color:#fff;overflow:hidden}
.uk>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uk::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,23,63,.92) 4%,rgba(0,23,63,.55) 40%,rgba(0,23,63,0) 70%)}
.uk .wrap{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:clamp(36px,5vw,72px)}
.uk-copy{max-width:680px}
.uk h2{color:#fff;margin-bottom:14px}
.uk p{color:#e8edf6}
.uk .label{color:#fff}
.uk .btn-w{border-color:#fff}

/* Sectors */
.reel-wrap{position:relative}
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,24vw,340px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));scroll-padding:0 max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
.reel::-webkit-scrollbar{display:none}
.sector{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--navy);color:#fff;text-decoration:none;scroll-snap-align:start}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sector:hover img{transform:scale(1.04)}
.sector::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,23,63,.96) 8%,rgba(0,23,63,.5) 46%,rgba(0,23,63,0) 72%)}
.sector div{position:absolute;z-index:2;left:20px;right:20px;bottom:20px}
.sector h3,.sector h4{color:#fff;font-size:22px;margin-bottom:6px}
.sector p{color:#e8edf6;font-size:14.5px;line-height:1.4}
.reel-ctl{display:flex;gap:8px}
.reel-ctl button{width:46px;height:46px;display:grid;place-items:center;background:#fff;border:1px solid var(--navy);border-radius:3px;color:var(--navy);cursor:pointer}
.reel-ctl button:hover{background:var(--navy);color:#fff}
.reel-ctl svg{width:16px;height:16px}
.sector-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(24px,3vw,40px)}
.sector-head>div:first-child{max-width:760px}

/* Spotlights: photo runs to the page edge */
.spot{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.spot-img{position:relative;min-height:clamp(320px,44vw,680px);overflow:hidden;background:var(--ground)}
.spot-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot-copy{padding:var(--band) var(--gutter);display:flex;flex-direction:column;justify-content:center}
.spot-copy>div{max-width:600px}
.spot.flip .spot-img{order:2}
.spot.flip .spot-copy{align-items:flex-end}
.spec{margin-top:20px;border-top:1px solid var(--navy)}
.spec li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.spec strong{color:var(--navy);font-weight:600}
.spec span{font-variant-numeric:tabular-nums}

/* Accreditation */
.accr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,96px);align-items:center}
.accr-state{color:#fff;font-size:clamp(22px,1.3vw + 17px,34px);font-weight:500;line-height:1.2;letter-spacing:-.012em;margin-bottom:20px}
.cert{background:#fff;padding:10px;transform:rotate(1.2deg);box-shadow:0 30px 60px -28px #000}
.cert img{width:100%}

/* Testimonials */
.quotes{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);margin-top:clamp(28px,3vw,48px)}
.q-main{padding-top:24px;border-top:3px solid var(--orange)}
.q-main h3{font-size:clamp(23px,1.3vw + 18px,36px);line-height:1.17;margin-bottom:18px}
.q-who{display:block;margin-top:18px;color:var(--navy);font-weight:600}
.q-who a{display:block;color:var(--muted);font-weight:400;text-underline-offset:3px}
.q-side{display:grid;gap:0;align-content:start}
.q-side article{padding:24px 0;border-top:1px solid var(--line)}
.q-side article:first-child{padding-top:24px;border-top:1px solid var(--navy)}
.q-side h3{font-size:19px;margin-bottom:8px}
.logos{margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--line)}
.logos ul{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.logos li{display:flex;align-items:center;justify-content:center;height:92px;padding:0 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos li:nth-child(6n){border-right:0}
.logos li:nth-last-child(-n+6){border-bottom:0}
.logos img{max-height:38px;max-width:100%;width:auto;filter:grayscale(1) contrast(1.1);opacity:.78;transition:opacity .2s,filter .2s}
.logos li:hover img{filter:none;opacity:1}

/* Pricing + help */
.help{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px)}
.cubes{margin-top:24px;aspect-ratio:16/9;overflow:hidden}
.cubes img{width:100%;height:100%;object-fit:cover}
.help-links{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;background:#fff}
.help-links a{display:block;padding:24px;text-decoration:none;border:1px solid var(--line);margin:-.5px;transition:background .18s}
.help-links a:hover{background:var(--navy);color:#fff}
.help-links a:hover h2{color:#fff}
.help-links h2{font-size:19px;margin-bottom:6px;display:flex;justify-content:space-between;gap:10px}
.help-links p{font-size:15px;line-height:1.4}

/* Quote */
.quote{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);align-items:start}
.contact-lines{margin-top:24px;border-top:1px solid var(--rule-navy)}
.contact-lines li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-navy)}
.contact-lines a{color:#fff;font-weight:600;text-decoration:none;overflow-wrap:anywhere;text-align:right}
.contact-lines a:hover{text-decoration:underline}
.form{background:#fff;color:var(--ink);padding:clamp(20px,3vw,40px)}
.form h3{font-size:20px;margin-bottom:18px;color:var(--navy)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block}
.field.full{grid-column:1/-1}
.field span{display:block;margin-bottom:6px;color:var(--navy);font-size:14.5px;font-weight:600}
.field input,.field textarea{display:block;width:100%;min-height:48px;padding:11px 13px;background:#fff;border:1px solid #9aa5b8;border-radius:3px;font-size:16px;line-height:1.4}
.field textarea{min-height:128px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.form .btn{width:100%;margin-top:18px}

/* Footer */
.foot{background:var(--deep);color:var(--on-navy);font-size:15px}
.foot a{text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.foot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(32px,4vw,56px);border-bottom:1px solid var(--rule-navy)}
.foot-logo img{width:96px;height:auto;margin-bottom:20px}
.foot-line{margin:-8px 0 16px;color:var(--on-navy);font-size:14.5px}
.foot-state{color:#fff;font-size:18px;font-weight:500;line-height:1.35;max-width:32em}
.foot-addr{margin-top:16px}
.foot-social{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px}
.foot-social a{color:#fff;font-size:14px;font-weight:500}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-cols summary{list-style:none;color:#fff;font-weight:600;padding:0 0 10px;cursor:default}
.foot-cols summary::-webkit-details-marker{display:none}
.foot-cols li a{display:block;padding:5px 0}
.foot-search{display:flex;gap:8px;grid-column:1/-1;margin-top:8px}
.foot-search input{flex:1;min-width:0;min-height:46px;padding:0 13px;background:#fff;border:0;border-radius:3px;color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-top:20px;padding-bottom:28px;font-size:13.5px}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-reg{width:100%;color:#9fadc6}

/* Page hero for inner pages */
.phero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,23,63,.95),rgba(0,23,63,.82) 42%,rgba(0,23,63,.25))}
.phero .wrap{position:relative;z-index:2;padding-top:clamp(36px,4vw,64px);padding-bottom:clamp(44px,6vw,92px)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:clamp(32px,6vw,84px);font-size:14px;color:var(--on-navy)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.phero h1{color:#fff;margin-bottom:14px;max-width:18em}
.phero p{max-width:40em;color:#e8edf6}
.phero.plain::after{background:none}

/* Fact strip */
.facts{background:#fff;border-bottom:1px solid var(--line)}
.facts ul{display:grid;grid-template-columns:repeat(3,1fr)}
.facts li{padding:24px 28px 26px;border-left:1px solid var(--line)}
.facts li:first-child{border-left:0;padding-left:0}
.facts h2{font-size:18px;margin-bottom:6px}
.facts p{font-size:15px;line-height:1.45}

/* Service page body */
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,80px)}
.rail{position:sticky;top:100px;align-self:start}
.rail span{display:block;color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:8px}
.rail a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--line);color:var(--navy);font-size:15px;line-height:1.3;text-decoration:none}
.rail a:hover,.rail a.on{border-color:var(--orange);font-weight:600}
.rail .btn{margin-top:18px;width:100%;padding:0 12px;border-left:0}
.prose{max-width:760px}
.prose>*+*{margin-top:18px}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:24px}
.benefits li{padding:10px 0;border-top:1px solid var(--line)}
.benefits strong{color:var(--navy);font-weight:600}
.std{margin-top:18px;border-top:1px solid var(--navy)}
.std li{padding:12px 0;border-bottom:1px solid var(--line)}
.std strong{color:var(--navy);font-weight:600}
.steps{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--navy)}
.step{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,300px);gap:clamp(12px,3vw,40px);padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.step>b{color:var(--orange);font-size:40px;line-height:1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;-webkit-text-stroke:0}
.step h3{margin-bottom:10px}
.step figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ground)}
.step img{width:100%;height:100%;object-fit:cover}
.faq{border-top:1px solid var(--navy);margin-top:24px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:17px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:18px;line-height:1.3}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details>*:not(summary){padding-bottom:12px;max-width:68ch}
.q-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px);margin-top:28px}
.q-grid article{padding:22px 0;border-top:1px solid var(--line)}
.q-grid h3{font-size:19px;margin-bottom:8px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.imgs2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}
.imgs2 div{aspect-ratio:4/3;overflow:hidden}
.imgs2 img{width:100%;height:100%;object-fit:cover}

/* Sector grid + about */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.sector-row .sector{aspect-ratio:4/5}
.sector-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.sector-card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.sector-card img{width:100%;height:100%;object-fit:cover}
.sector-card div{padding:20px 22px 24px}
.sector-card h4{font-size:21px;margin-bottom:8px}
.sector-card p{font-size:15.5px}
.values{display:grid;grid-template-columns:repeat(5,1fr);margin-top:32px;border-top:1px solid var(--navy)}
.values article{padding:22px 22px 8px;border-left:1px solid var(--line)}
.values article:first-child{border-left:0;padding-left:0}
.values h3{font-size:19px;margin-bottom:8px}
.values p{font-size:15px;line-height:1.45}
.badge{display:flex;gap:20px;align-items:center;margin-top:24px;padding:18px;background:var(--ground)}
.badge img{width:110px;flex:none}
.badge p{font-size:15px;line-height:1.45}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);align-items:start}
.map{display:block;margin-top:24px;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.map img{width:100%;height:100%;object-fit:cover}
.lines{margin-top:18px;border-top:1px solid var(--navy)}
.lines li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.lines a{color:var(--navy);font-weight:600;text-decoration:none;text-align:right;overflow-wrap:anywhere}
.lines a:hover{text-decoration:underline}

#enquiry{scroll-margin-top:90px}
.callbar [data-state=offline] .i-chat,.callbar [data-state=online] .i-msg{display:none}

/* Holding page */
.hold{min-height:50vh;display:flex;align-items:center}

/* Phone call bar */
.callbar{display:none}

/* Tablet */
@media (max-width:1180px){
  .nav,.head-tel,.util{display:none}
  .burger{display:block}
  .head>.wrap{justify-content:space-between;min-height:58px;gap:12px}
  .logo img{width:88px}
  body[data-hero] .head{margin-bottom:-58px}
  .head-cta .btn{display:none}
  .drawer{position:fixed;inset:58px 0 0;z-index:39;background:#fff;color:var(--ink);overflow:auto;padding:16px var(--gutter) 110px}
  .drawer.open{display:block}
  .routes ul{grid-template-columns:1fr 1fr}
  .routes li:nth-child(3) a{border-left:0}
  .routes li:nth-child(n+3) a{border-top:1px solid var(--line)}
  .caps{grid-template-columns:1fr}
  .caps-stage{display:none}
  .caps-list{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;border-top:0}
  .cap{border-bottom:0}
  .cap figure{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy);margin-bottom:12px}
  .cap figure img{width:100%;height:100%;object-fit:cover}
  .cap>a{display:block;padding:0}
  .cap.on>a,.cap>a:hover{padding-left:0;box-shadow:none}
  .cap h3{margin-bottom:6px}
  .cap .go{margin-top:8px}
  .logos ul{grid-template-columns:repeat(4,1fr)}
  .logos li:nth-child(6n){border-right:1px solid var(--line)}
  .logos li:nth-child(4n){border-right:0}
  .logos li:nth-last-child(-n+6){border-bottom:1px solid var(--line)}
  .logos li:nth-last-child(-n+4){border-bottom:0}
  .foot-top{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .rail{display:none}
  .values{grid-template-columns:1fr 1fr 1fr}
  .values article:nth-child(4){border-left:0;padding-left:0}
  .sector-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .intro,.proof,.head-row,.rig,.accr,.quotes,.help,.quote,.foot-top,.split2,.contact-grid{grid-template-columns:1fr}
  .spot{grid-template-columns:1fr}
  .spot.flip .spot-img{order:0}
  .spot.flip .spot-copy{align-items:flex-start}
  .spot-img{min-height:0;aspect-ratio:16/10}
  .spot-copy{padding:40px var(--gutter) 56px}
  .cert{max-width:440px;transform:none}
  .figures{grid-template-columns:1fr 1fr}
  .figures div:nth-child(3){border-left:0;padding-left:0}
  .figures div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero{min-height:0}
  .hero .wrap{padding-top:112px;padding-bottom:104px}
  .facts ul{grid-template-columns:1fr}
  .facts li{padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .facts li:first-child{border-top:0}
  .step{grid-template-columns:44px minmax(0,1fr)}
  .step>b{font-size:30px}
  .step figure{grid-column:2}
}
/* Phone */
@media (max-width:640px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .logo img{width:80px}
  .hero{align-items:stretch}
  .hero>img{height:400px;bottom:auto;object-position:66% 50%;animation:none}
  .hero::after{height:420px;bottom:auto;background:linear-gradient(0deg,#00173f 8%,rgba(0,23,63,.5) 46%,rgba(0,23,63,.25) 100%)}
  .hero .wrap{padding-top:300px;padding-bottom:84px}
  .hero .btns .btn{flex:1 1 140px}
  .routes{margin-top:-52px}
  .routes ul{grid-template-columns:1fr}
  .routes a{padding:15px 16px 16px;border-left:0;border-top:1px solid var(--line)}
  .routes li:first-child a{border-top:0}
  .routes strong{font-size:17px;margin-bottom:2px}
  .figures strong{font-size:clamp(23px,7.4vw,40px)}
  .figures div{padding-left:14px;padding-right:6px}
  .ticks,.fields,.benefits,.q-grid{grid-template-columns:1fr}
  .caps-list{grid-template-columns:1fr;gap:28px}
  .read{padding:12px 12px 14px}
  .read strong{font-size:clamp(20px,6.2vw,26px)}
  .read span{font-size:13px}
  .trace{padding:14px 16px 8px}
  .panel-foot{padding:8px 16px 12px}
  .reel{grid-auto-columns:76vw}
  .reel-ctl{display:none}
  .spec li{grid-template-columns:1fr;gap:0}
  .logos ul{grid-template-columns:repeat(3,1fr)}
  .logos li{height:76px;padding:0 14px;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  .logos li:nth-child(3n){border-right:0!important}
  .logos li:nth-last-child(-n+3){border-bottom:0!important}
  .help-links{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr;gap:0}
  .foot-cols details{border-bottom:1px solid var(--rule-navy)}
  .foot-cols summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer}
  .foot-cols summary::after{content:"";width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
  .foot-cols details[open] summary::after{transform:rotate(225deg)}
  .foot-cols ul{padding-bottom:10px}
  .foot-search{margin-top:16px}
  .values{grid-template-columns:1fr}
  .values article,.values article:nth-child(4){border-left:0;padding-left:0;padding-right:0;border-bottom:1px solid var(--line)}
  .sector-grid{grid-template-columns:1fr}
  .badge{flex-direction:column;align-items:flex-start}
  .callbar{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px -14px rgba(0,23,63,.6),0 2px 6px rgba(0,23,63,.08);overflow:hidden}
  .callbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,34,91,.15);padding:7px 4px 8px;color:var(--navy);font-size:12.5px;line-height:1.1;font-weight:600;text-decoration:none;border-left:1px solid var(--line)}
  .callbar a:first-child{border-left:0}
  .callbar svg{width:22px;height:22px;flex:none}
  .callbar a.q{flex-direction:row;gap:0;margin:6px;min-height:50px;padding:0 6px;background:var(--orange);color:#fff;border-left:0;border-radius:10px;font-size:13.5px;white-space:nowrap}
}
@media (max-width:374px){.callbar .w{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ================================================================ Engagement layer (4 Nov 2026)
   CSS only: no script, no extra requests. Scroll motion uses scroll-driven animations where the
   browser has them and does nothing elsewhere; reduced-motion users get the static page. */

/* Cards and panels lift on hover */
.sector-card,.help-links a,.routes a{transition:translate .25s var(--ease),box-shadow .25s var(--ease),background .18s}
.sector-card:hover{translate:0 -4px;box-shadow:0 22px 44px -30px rgba(0,34,91,.55)}
.sector-card{position:relative;overflow:hidden;border-radius:4px}
.sector-card::before{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sector-card:hover::before{transform:scaleX(1)}
.sector-card img,.proof-img img,.spot-img img,.step img,.map img{transition:transform .7s var(--ease)}
.sector-card:hover img,.step:hover img,.map:hover img{transform:scale(1.05)}
.routes a{position:relative}
.routes a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.routes a:hover::after{transform:scaleX(1)}

/* Figures: an orange rule grows under each number */
.figures div{position:relative}
.figures div::after{content:"";display:block;width:40px;height:3px;margin-top:14px;background:var(--orange)}

/* Testimonial: a large quotation mark */
.q-main{position:relative}
.q-main::before{content:"\201C";position:absolute;top:-6px;right:0;color:var(--orange);font-size:120px;font-weight:600;line-height:1;opacity:.18}

/* Values (About): numbered white cards */
.values{counter-reset:val;gap:12px;border-top:0}
.values article,.values article:first-child{counter-increment:val;padding:24px 22px 26px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:4px;transition:border-color .25s,translate .25s var(--ease)}
.values article::before{content:counter(val,decimal-leading-zero);display:block;margin-bottom:14px;color:var(--orange);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.values article:hover{border-top-color:var(--orange);translate:0 -3px}

/* Process steps (Cube Testing): a timeline with numbered nodes */
.steps{position:relative;border-top:0;view-timeline:--steps block}
.steps::before,.steps::after{content:"";position:absolute;left:31px;top:36px;bottom:36px;width:2px;background:#d3dae6}
.steps::after{display:none;background:var(--orange);transform-origin:top}
.step{position:relative;border-bottom:0;padding:22px 0}
.step>b{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;font-size:24px;font-weight:600;box-shadow:0 0 0 7px #fff}
.step>div{padding-top:6px}
.step figure{border-radius:4px}

/* Contact lines: full-width tap rows */
.lines li{align-items:center;min-height:52px;transition:background .18s}
.lines li:hover{background:var(--ground)}

@media (max-width:900px){
  .values article,.values article:nth-child(4){border-left:1px solid var(--line);padding-left:22px}
  .steps::before,.steps::after{left:21px;top:30px}
  .step>b{width:44px;height:44px;font-size:17px;box-shadow:0 0 0 5px #fff}
}
@media (max-width:640px){
  .values{gap:10px}
  .values article,.values article:nth-child(4){border:1px solid var(--line);border-top:3px solid var(--navy);padding:20px 18px 22px}
  .lines li{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 0}
  .lines a{text-align:left;font-size:17px}
  .q-main::before{font-size:84px}
}


/* Services on phones: a swipeable row instead of nine stacked cards */
@media (max-width:640px){
  .caps{position:relative}
  .caps::before{content:"Swipe for all services";display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--muted);font-size:13.5px;font-weight:600}
  .caps-list{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 10px;scroll-padding:0 var(--gutter)}
  .caps-list::-webkit-scrollbar{display:none}
  .cap{scroll-snap-align:start;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 14px 30px -26px rgba(0,34,91,.6)}
  .cap>a{display:flex;flex-direction:column;height:100%}
  .cap figure{margin-bottom:0;aspect-ratio:4/3}
  .cap h3{padding:16px 16px 0}
  .cap p{padding:0 16px}
  .cap .go{align-self:flex-start;margin-top:auto;padding:14px 16px 18px}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cap,.sector-card,.values article,.figures>div,.q-side article,.q-grid article,.help-links a,.facts li,.step>div,.step figure,.logos li,.lines li,.faq details,.routes li,.sector-grid .sector-card,.fw-found article{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .figures div::after{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
    .proof-img img,.spot-img img,.uk>img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .steps::after{display:block;animation:fill linear both;animation-timeline:--steps;animation-range:cover 50vh cover calc(100% - 50vh)}
    .step>b{animation:node linear both;animation-timeline:view();animation-range:cover 35% cover 50%}
  }
  @media (max-width:640px){.cap{animation:none}}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}to{width:40px}}
@keyframes drift{from{transform:scale(1.12) translateY(-2%)}to{transform:scale(1.02) translateY(2%)}}
@keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes node{from{background:var(--navy)}to{background:var(--orange)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Jump strip in a page hero (Cube Testing process) */
.strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin:clamp(36px,5vw,64px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.3)}
.strip li{position:relative}
.strip li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.strip a{display:block;padding:16px 12px 0 0;color:#fff;text-decoration:none}
.strip b{display:block;color:var(--orange);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.strip span{display:block;margin-top:4px;color:#e8edf6;font-size:14px;line-height:1.3}
.strip a:hover span{color:#fff;text-decoration:underline}
.step{scroll-margin-top:100px}

/* Sector chips: jump to any sector card */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font-size:14.5px;font-weight:600;text-decoration:none;transition:background .18s,color .18s}
.chips a:hover{background:var(--navy);color:#fff}
.sector-card{scroll-margin-top:100px}
.sector-card:target{outline:3px solid var(--orange);outline-offset:3px}

@media (max-width:900px){
  .strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px;border-top:0}
  .strip li{border-top:1px solid rgba(255,255,255,.3)}
}
@media (max-width:640px){
  .strip span{font-size:13px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter) 4px}
  .chips::-webkit-scrollbar{display:none}
  .chips a{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ================================================================ Service pages: shared parts (drilling, cutting)
   Hero chips that jump down the page, the quote promise, and the health and safety block with its ring-fence plan. */
.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.svc-chips a{text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,23,63,.45);color:#fff;font-size:14px;font-weight:500;backdrop-filter:blur(4px)}
.svc-chips a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.svc-promise{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--on-navy);font-size:14.5px}
.svc-promise svg{flex:none;width:18px;height:18px;color:var(--orange)}
.svc-chips a{transition:background .2s,border-color .2s}
.svc-chips a:hover{background:rgba(0,23,63,.8);border-color:#fff}
.svc-safe{align-items:center}
.svc-safe-list{border-top:1px solid var(--navy)}
.svc-safe-list li{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);color:var(--navy);font-weight:500}
.svc-safe-list .tick{margin-top:3px}
.svc-fence{margin:0;padding:clamp(18px,3vw,36px);background:var(--ground);border-radius:4px}
.svc-fence-svg{width:100%;max-width:520px;margin:0 auto}
.svc-fence-svg .zone{fill:#fff}
.svc-fence-svg .fence{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:7 5}
.svc-fence-svg .post{fill:var(--navy)}
.svc-fence-svg .rig{fill:#fff;stroke:var(--navy);stroke-width:1.6}
.svc-fence-svg .core{fill:rgba(255,77,1,.2);stroke:var(--orange);stroke-width:1.6}
.svc-fence-svg text{fill:var(--muted);font-size:9px;font-weight:600;font-family:var(--font)}
.svc-fence-svg .cut{stroke:var(--orange);stroke-width:2.4;stroke-dasharray:6 4}
.svc-fence-svg .blade{fill:#fff;stroke:var(--navy);stroke-width:1.6;stroke-dasharray:3 2}
.svc-fence-svg .hub{fill:var(--navy)}
@media (max-width:640px){.svc-chips a{font-size:13px;min-height:32px;padding:0 12px}.svc-promise{font-size:13.5px}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.svc-safe-list li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ================================================================ Header and navigation (4 Nov 2026)
   Sliding underline, current section marked, phone icon, menus that ease open, a reading-progress hairline,
   burger that turns into a close cross. CSS only apart from the aria-label swap in omega.js. */
.util-state{color:var(--on-navy)}
.util ul{gap:18px}
.util li+li{position:relative}
.util li+li::before{content:"";position:absolute;left:-10px;top:50%;width:1px;height:12px;margin-top:-6px;background:rgba(255,255,255,.22)}
.head{transition:background .25s,box-shadow .25s}
.head.scrolled{box-shadow:0 12px 28px -20px rgba(0,0,0,.7)}
.nav>li>a,.nav>li>button{position:relative}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded=true]{box-shadow:none}
.nav>li>a::after,.nav>li>button::after{content:"";position:absolute;left:14px;right:14px;bottom:15px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav>li>a:hover::after,.nav>li>button:hover::after,.nav>li>button[aria-expanded=true]::after,.nav .is-current::after{transform:scaleX(1)}
.nav .is-current{color:#fff;font-weight:600}
.head-tel{display:inline-flex;align-items:center;gap:8px}
.head-tel svg{width:17px;height:17px;color:var(--orange)}
.head-tel:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;pointer-events:none}
@supports (animation-timeline:scroll()){.progress{animation:progress linear both;animation-timeline:scroll(root)}}
@keyframes progress{to{transform:scaleX(1)}}
.mega.open{animation:menu-in .18s var(--ease) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega li a{margin:0 -12px;padding:10px 12px;border-radius:4px;transition:background .15s}
.mega li a:hover{background:var(--ground)}
.mega li a:hover strong{text-decoration:none;color:var(--orange)}
.mega-feature img{transition:transform .6s var(--ease),opacity .3s}
.mega-feature:hover img{transform:scale(1.05);opacity:.75}
.mega-foot{border-top:1px solid var(--line);background:var(--ground)}
.mega-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;color:var(--muted);font-size:15px}
.mega-foot a{color:var(--navy);font-weight:600}
.burger span{transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1180px){
  .head-tel{display:none}
  .drawer.open{animation:menu-in .2s var(--ease) both}
  .drawer-util{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .drawer-util a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-size:14.5px;font-weight:600;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ================================================================ Opened menu panel (6 Nov 2026)
   Nick: "a little pizazz without compromising speed or usability". No images, fonts or libraries added.
   Page dims behind the panel, an orange line draws across the top, rows arrive in a quick cascade (all done
   by ~0.35 s), rows gain an orange edge bar and arrow on hover or keyboard focus, the feature photo eases in,
   and the foot strip carries real buttons. Only opacity and transform animate. Reduced motion: no animation. */
.mega{z-index:1}
.mega::before{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(0,23,63,.42);cursor:pointer}
.mega::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--orange);transform-origin:left;transform:scaleX(0)}
.mega.open::after{animation:mega-line .45s var(--ease) both}
@keyframes mega-line{to{transform:scaleX(1)}}
.mega.open{animation:mega-in .2s var(--ease) both}
@keyframes mega-in{from{opacity:0}to{opacity:1}}
.mega-grid>div,.mega-grid>.mega-feature,.mega-foot{position:relative}
.mega h2{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.mega h2::before{content:"";width:8px;height:8px;background:var(--orange)}
/* Rows: edge bar, arrow, cascade */
.mega li a{position:relative;padding-right:40px}
.mega li a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--orange);transform:scaleY(0);transition:transform .2s var(--ease)}
.mega li a::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);opacity:0;transform:translateX(-6px) rotate(45deg);transition:opacity .2s,transform .2s var(--ease)}
.mega li a:hover,.mega li a:focus-visible{background:var(--ground)}
.mega li a:focus-visible{outline-offset:0}
.mega li a:hover::before,.mega li a:focus-visible::before{transform:scaleY(1)}
.mega li a:hover::after,.mega li a:focus-visible::after{opacity:1;transform:translateX(0) rotate(45deg)}
.mega li a strong{transition:color .15s,translate .2s var(--ease)}
.mega li a:hover strong,.mega li a:focus-visible strong{color:var(--orange);translate:4px 0}
.mega li a span{transition:translate .2s var(--ease)}
.mega li a:hover span,.mega li a:focus-visible span{translate:4px 0}
.mega.open h2,.mega.open li,.mega.open .mega-foot .wrap>*{animation:mega-row .32s var(--ease) both;animation-delay:calc(var(--d,0) * 26ms + 50ms)}
@keyframes mega-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mega-grid>div:nth-child(2){--c:2}
.mega li:nth-child(1){--d:calc(var(--c,0) + 1)}.mega li:nth-child(2){--d:calc(var(--c,0) + 2)}.mega li:nth-child(3){--d:calc(var(--c,0) + 3)}.mega li:nth-child(4){--d:calc(var(--c,0) + 4)}
.mega li:nth-child(5){--d:calc(var(--c,0) + 5)}.mega li:nth-child(6){--d:calc(var(--c,0) + 6)}.mega li:nth-child(7){--d:calc(var(--c,0) + 7)}.mega li:nth-child(8){--d:calc(var(--c,0) + 8)}
.mega h2{--d:var(--c,0)}
.mega-foot .wrap>*{--d:8}
/* Feature card */
.mega-feature{border-radius:4px;isolation:isolate}
.mega-feature img{opacity:.9}
.mega-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,23,63,.05) 30%,rgba(0,23,63,.92));z-index:0;transition:opacity .3s}
.mega-feature div{z-index:1;display:grid;gap:8px;justify-items:start}
.mega-feature strong{font-size:21px;font-weight:600;line-height:1.2}
.mega-tag{padding:4px 9px;border-radius:2px;background:var(--orange);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mega-go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff}
.mega-go svg{width:16px;height:16px;color:var(--orange);transition:transform .25s var(--ease)}
.mega-feature:hover .mega-go svg,.mega-feature:focus-visible .mega-go svg{transform:translateX(5px)}
.mega-feature:hover img{opacity:1}
.mega.open .mega-feature{animation:mega-row .4s var(--ease) both;animation-delay:80ms}
.mega.open .mega-feature img{animation:mega-zoom 1.2s var(--ease) both}
@keyframes mega-zoom{from{scale:1.08}to{scale:1}}
/* Foot strip */
.mega-foot .wrap{min-height:72px;font-size:16px;color:var(--navy);font-weight:600}
.mega-acts{display:flex;gap:10px;flex-wrap:wrap}
.mega-foot .btn{min-height:44px;padding:0 18px;font-size:15px;text-shadow:none}
.mega-foot .btn-o{color:#fff}
.mega-foot .btn svg{width:16px;height:16px}
.mega-foot .btn-w:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.mega li a::before,.mega li a::after,.mega li a strong,.mega li a span{transition:none}.mega::after{transform:none}}

/* Office hours panel (build.py HOURS, filled by omega.js): open or closed now, and when we are back. Sits beside a
   "get in touch" line. Light by default; glass on navy in heroes and navy bands. Grey dot closed, green open. */
.hours{display:flex;align-items:flex-start;gap:12px;width:fit-content;max-width:100%;margin-top:22px;padding:12px 18px 12px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--navy)}
.hours[hidden]{display:none}
.hours p{margin:0}
.hours-dot{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:#8d97a9}
.hours strong{display:block;font-size:15px;font-weight:600;line-height:1.4}
.hours p span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.phero .hours,.navy .hours,.dark .hours,.nf-hero .hours{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
.phero .hours p span,.navy .hours p span,.dark .hours p span,.nf-hero .hours p span{color:#c9d3e3}
.phero .hours-dot,.navy .hours-dot,.dark .hours-dot,.nf-hero .hours-dot{background:#aab4c6}
.hours.is-open .hours-dot{background:#17914a}
.phero .hours.is-open .hours-dot,.navy .hours.is-open .hours-dot,.dark .hours.is-open .hours-dot,.nf-hero .hours.is-open .hours-dot{background:#3fd07a}
@media (prefers-reduced-motion:no-preference){.hours.is-open .hours-dot{animation:hours-pulse 2s ease-out infinite}}
@keyframes hours-pulse{from{box-shadow:0 0 0 0 rgba(63,208,122,.5)}to{box-shadow:0 0 0 7px rgba(63,208,122,0)}}
@media (max-width:1180px){.mega.open{display:none}}

/* ================================================================ Phone and tablet menu (6 Nov 2026)
   Nick: "perfectly crafted, easy to use, helpful, options and data FAST, pass all Google's tests".
   Order = what a visitor needs first: open-now status and quote promise, call/quote (tablet only; phones have
   the call bar), instant search over every menu page, three tabs instead of long accordions, quick-link tiles,
   portal chips, three figures, address card. Tabs are radio buttons + :has(), so they work with no script;
   without :has() every panel simply shows. Targets 48 px+, text 14 px+, 16 px in the search box (no iOS zoom). */
.drawer .dw{max-width:640px;margin:0 auto;display:grid;gap:18px}
.drawer h2{margin:0}
.dw-top{display:grid;gap:6px}
.dw-hours{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:14px}
.dw-now{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-size:14px;font-weight:600;white-space:nowrap}
.dw-now[hidden]{display:none}
.dw-now::before{content:"";width:8px;height:8px;border-radius:50%;background:#8d97a9}
.dw-now.is-open{border-color:#bfe3cc;background:#effaf3}
.dw-now.is-open::before{background:#138a43;box-shadow:0 0 0 3px rgba(19,138,67,.18)}
.dw-now:not([hidden])+span{display:none}
.dw-promise{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:14px;font-weight:600}
.dw-promise svg{width:18px;height:18px;flex:none;color:var(--orange)}
.dw-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dw-acts .btn{min-height:52px;padding:0 12px;font-size:19px;font-weight:700;text-shadow:none}
.dw-acts svg{width:20px;height:20px}
.dw-search{position:relative}
.dw-search svg{position:absolute;left:15px;top:15px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.dw-search input{width:100%;height:50px;padding:0 14px 0 46px;border:1.5px solid #c9d1de;border-radius:10px;background:#fff;color:var(--ink);font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.dw-search input::placeholder{color:#6b7385}
.dw-search input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,34,91,.15)}
.dw-count{min-height:0;color:var(--muted);font-size:14px}
.dw-count:not(:empty){margin-top:8px}
.dw-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0;padding:4px;border:0;border-radius:12px;background:var(--ground)}
.dw-tabs label{position:relative;display:block;cursor:pointer}
.dw-tabs input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.dw-tabs span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 4px;border-radius:9px;color:var(--navy);font-size:14.5px;font-weight:600;text-align:center;transition:background .15s,box-shadow .15s}
.dw-tabs i{min-width:22px;padding:1px 6px;border-radius:999px;background:#d9dfea;color:var(--navy);font-size:12px;font-style:normal;line-height:18px}
.dw-tabs input:checked+span{background:#fff;box-shadow:0 1px 2px rgba(0,23,63,.1),0 4px 10px -4px rgba(0,23,63,.25)}
.dw-tabs input:checked+span i{background:var(--navy);color:#fff}
.dw-tabs input:focus-visible+span{outline:3px solid var(--orange);outline-offset:1px}
@supports selector(:has(*)){
  .drawer:has([value=onsite]:checked) .dw-panel:not([data-tab=onsite]),
  .drawer:has([value=lab]:checked) .dw-panel:not([data-tab=lab]),
  .drawer:has([value=company]:checked) .dw-panel:not([data-tab=company]){display:none}
  .dw-panel h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.dw-panel,.dw-more{display:grid;gap:4px}
.dw-list{display:grid;gap:22px}
.dw-panel h2,.dw-more h2{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dw-panel ul{display:grid}
.dw-panel li+li{border-top:1px solid var(--line)}
.dw-panel a{position:relative;display:grid;gap:2px;min-height:60px;align-content:center;padding:10px 36px 10px 14px;margin:0 -14px;border-radius:8px;text-decoration:none;-webkit-tap-highlight-color:rgba(0,34,91,.08);transition:background .15s}
.dw-panel a::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-5px;border-top:2px solid #9aa3b5;border-right:2px solid #9aa3b5;transform:rotate(45deg)}
.dw-panel a:active,.dw-panel a:hover{background:var(--ground)}
.dw-panel strong{color:var(--navy);font-size:16.5px;font-weight:600;line-height:1.25}
.dw-panel span{color:var(--muted);font-size:14px;line-height:1.35}
.dw-panel a[aria-current]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--orange)}
.dw-panel a[aria-current]{background:#fff4ee}
.dw-panel a[aria-current] strong{color:var(--navy);font-weight:700}
.dw-panel a[aria-current]::after{border-color:var(--orange)}
.dw-panel.is-in{animation:dw-in .22s var(--ease) both}
@keyframes dw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dw-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.dw-tiles a{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--navy);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;-webkit-tap-highlight-color:rgba(0,34,91,.08)}
.dw-tiles a:active,.dw-tiles a:hover{border-color:var(--navy);background:var(--ground)}
.dw-tiles svg{width:22px;height:22px;flex:none;color:var(--orange)}
.dw-tiles a[aria-current]{border-color:var(--orange)}
.drawer .drawer-util{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.drawer .drawer-util a{min-height:44px}
.dw-none{padding:18px;border-radius:12px;background:var(--ground);font-size:15px;display:grid;gap:6px}
.dw-none[hidden]{display:none}
.dw-none a{color:var(--navy);font-weight:600}
.dw-figs{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dw-figs div{padding:14px 8px 14px 0}
.dw-figs div+div{padding-left:12px;border-left:1px solid var(--line)}
.dw-figs dt{color:var(--navy);font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.dw-figs dd{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.3}
.dw-card{display:grid;gap:6px;padding:18px;border-radius:12px;background:var(--ground);font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.45}
.dw-card strong{color:var(--navy);font-weight:600}
.dw-card-links{display:grid;margin-top:4px}
.dw-card-links a{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--navy);font-weight:600;text-decoration:none;word-break:break-word}
.dw-card-links svg{width:20px;height:20px;flex:none;color:var(--orange)}
.dw-ukas{color:var(--muted);font-size:13px;line-height:1.45}
/* Searching: every panel shows, tabs and figures step aside, rows that do not match hide */
.drawer.is-search .dw-tabs,.drawer.is-search .dw-figs{display:none}
.drawer.is-search .dw-panel{display:grid!important}
.drawer.is-search .dw-panel h2{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.drawer .dw-i[hidden],.drawer .dw-panel[hidden],.drawer .dw-more[hidden]{display:none!important}
.drawer.is-search .dw-panel li+li{border-top:1px solid var(--line)}
@media (max-width:1180px){
  .drawer{inset:58px 0 0;padding:18px var(--gutter) calc(120px + env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .drawer.open{animation:dw-open .24s var(--ease) both}
  .drawer.open .dw>*{animation:dw-in .3s var(--ease) both}
  .drawer.open .dw>:nth-child(2){animation-delay:30ms}.drawer.open .dw>:nth-child(3){animation-delay:60ms}
  .drawer.open .dw>:nth-child(4){animation-delay:90ms}.drawer.open .dw>:nth-child(n+5){animation-delay:120ms}
}
@keyframes dw-open{from{opacity:0}to{opacity:1}}
@media (min-width:641px) and (max-width:1180px){.drawer{padding-bottom:40px}}

@media (max-width:359px){.dw-tabs span{font-size:13.5px;gap:4px}.dw-tabs i{display:none}.dw-figs dt{font-size:17px}}
.dw-list[hidden]{display:none}
/* WhatsApp in the menus (6 Nov 2026, Nick: "add whatsapp to the menu also"). Real WhatsApp mark in its darker
   brand green (4:1 on white), white + navy button like Call. Tablet menu: Call + WhatsApp side by side, Quote below. */
svg.wa{color:#128c7e}
.btn-w:hover svg.wa{color:#fff}
.dw-acts .btn-o{grid-column:1/-1}
.dw-card-links svg.wa{color:#128c7e}
/* Tablet menu buttons, compact (6 Nov 2026, Nick: "way too big ... look ugly"): one row of three, 44 px, 15 px text. */
.dw-acts{grid-template-columns:1fr 1fr 1.15fr;gap:8px}
.dw-acts .btn,.dw-acts .btn-o{grid-column:auto;min-height:44px;padding:0 10px;gap:8px;font-size:15px;font-weight:600;border-radius:8px}
.dw-acts svg{width:17px;height:17px}
/* Phone menu shows Call · WhatsApp · Get a Quote too (6 Nov 2026, Nick: "the call, whatsapp and quote button aren't showing").
   Content-sized columns so the row fits on one line down to ~280 px. */
@media (max-width:640px){
  .dw-acts{gap:6px}
}
@media (max-width:430px){
  .dw-acts{grid-template-columns:auto auto 1fr}
  .dw-acts .btn,.dw-acts .btn-o{padding:0 10px;gap:6px;font-size:14.5px}
}
@media (max-width:359px){
  .dw-acts .btn,.dw-acts .btn-o{padding:0 7px;gap:5px;font-size:13.5px}
  .dw-acts .btn:first-child svg{display:none}
}

/* ================================================================ Header search (9 Nov 2026)
   Nick: "a search icon into the header which can open search". A round icon button beside the phone number (beside
   the burger on tablets and phones). The panel drops under the header like the menus: one wide box, Enter sends the
   words to /search (Webflow site search), and while you type the same instant page index as the phone menu offers
   the page itself. Empty box = popular pages. Right column = ways to ask us. Only opacity and transform animate. */
.head-search{display:grid;place-items:center;width:44px;height:44px;margin-right:-4px;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background .18s}
.head-search:hover,.head-search[aria-expanded=true]{background:rgba(255,255,255,.14)}
.head-search svg{width:21px;height:21px}
.head-search .i-x,.head-search[aria-expanded=true] .i-s{display:none}
.head-search[aria-expanded=true] .i-x{display:block}
.spanel{position:absolute;left:0;right:0;top:100%;z-index:1;background:#fff;color:var(--ink);border-top:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,23,63,.45);animation:menu-in .18s var(--ease) both}
.spanel[hidden]{display:none}
.spanel::before{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(0,23,63,.42);cursor:pointer}
.spanel::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--orange);transform-origin:left;animation:mega-line .45s var(--ease) both}
.spanel-in{position:relative;max-width:1100px;display:grid;gap:14px;padding-top:26px;padding-bottom:30px}
.sp-form{display:flex;align-items:stretch;gap:10px}
.sp-field{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.sp-field>svg{position:absolute;left:18px;width:22px;height:22px;color:var(--navy);pointer-events:none}
.sp-field input{width:100%;height:58px;padding:0 54px;border:1.5px solid #cfd6e2;border-radius:5px;background:#fff;color:var(--navy);font:500 18px/1 var(--font);-webkit-appearance:none;appearance:none;outline:none;transition:border-color .2s,box-shadow .2s}
.sp-field input::placeholder{color:#767e91;font-weight:400;opacity:1}
.sp-field input:hover{border-color:#9aa6bb}
.sp-field input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(255,77,1,.22)}
.sp-field input::-webkit-search-cancel-button,.sp-field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.sp-clear{position:absolute;right:9px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ground);color:var(--navy);cursor:pointer;transition:background .18s,color .18s}
.sp-clear[hidden]{display:none}
.sp-clear:hover{background:var(--navy);color:#fff}
.sp-clear svg{width:14px;height:14px}
.sp-go{min-height:58px;padding:0 28px;text-shadow:none}
.sp-hint{color:var(--muted);font-size:14px}
.sp-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:18px;border-top:1px solid var(--line)}
.sp-pages h2,.sp-help h2{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--navy);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sp-pages h2::before{content:"";width:8px;height:8px;background:var(--orange)}
.sp-pages h2 span[hidden]{display:none}
.sp-pages ul{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.sp-pages li[hidden]{display:none}
.sp-pages li a{position:relative;display:grid;gap:1px;padding:9px 36px 9px 12px;margin:0 -12px;border-radius:4px;text-decoration:none;transition:background .15s}
.sp-pages li a::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--orange);transform:scaleY(0);transition:transform .2s var(--ease)}
.sp-pages li a::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);opacity:0;transform:translateX(-6px) rotate(45deg);transition:opacity .2s,transform .2s var(--ease)}
.sp-pages li a:hover,.sp-pages li a:focus-visible{background:var(--ground)}
.sp-pages li a:focus-visible{outline-offset:0}
.sp-pages li a:hover::before,.sp-pages li a:focus-visible::before{transform:scaleY(1)}
.sp-pages li a:hover::after,.sp-pages li a:focus-visible::after{opacity:1;transform:translateX(0) rotate(45deg)}
.sp-pages li strong{color:var(--navy);font-weight:600;transition:color .15s}
.sp-pages li a:hover strong,.sp-pages li a:focus-visible strong{color:var(--orange)}
.sp-pages li span{color:var(--muted);font-size:14px;line-height:1.4}
.sp-none{padding:14px 16px;border-radius:6px;background:var(--ground);font-size:15px;line-height:1.5}
.sp-none[hidden]{display:none}
.sp-none a{color:var(--navy);font-weight:600}
.sp-help{display:grid;gap:10px;align-content:start;padding:18px 20px 20px;border-radius:6px;background:var(--ground)}
.sp-help h2{margin-bottom:0}
.sp-help p{color:var(--muted);font-size:14.5px;line-height:1.5}
.sp-help .btn{min-height:44px;padding:0 16px;justify-content:flex-start;font-size:15px;text-shadow:none}
.sp-help .btn svg{width:17px;height:17px}
.sp-help .btn-w:hover svg{color:#fff}
.sp-link{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--navy);font-weight:600;text-decoration:none}
.sp-link svg{width:16px;height:16px;color:var(--orange);transition:transform .25s var(--ease)}
.sp-link:hover svg{transform:translateX(5px)}
.sp-link:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
/* Answers and sections as you type (9 Nov 2026, Nick chose headings + FAQ questions over full text): omega.js fetches
   assets/search-hints.json when the panel first opens and fills this list under the matching pages. */
.sp-answers{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sp-answers[hidden]{display:none}
.sp-answers h2{display:flex;align-items:center;gap:10px;margin-bottom:6px;color:var(--navy);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sp-answers h2::before{content:"";width:8px;height:8px;background:var(--navy)}
.sp-answers ul{display:grid}
.sp-answers li a{position:relative;display:grid;gap:1px;padding:8px 36px 8px 12px;margin:0 -12px;border-radius:4px;text-decoration:none;transition:background .15s}
.sp-answers li a::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);opacity:0;transform:translateX(-6px) rotate(45deg);transition:opacity .2s,transform .2s var(--ease)}
.sp-answers li a:hover,.sp-answers li a:focus-visible{background:var(--ground)}
.sp-answers li a:hover::after,.sp-answers li a:focus-visible::after{opacity:1;transform:translateX(0) rotate(45deg)}
.sp-answers strong{color:var(--navy);font-weight:600;line-height:1.3}
.sp-answers strong mark{background:none;color:var(--orange)}
.sp-answers span{color:var(--muted);font-size:13.5px}
.sp-answers span b{font-weight:600;color:var(--navy)}
@media (max-width:1180px){
  .head-cta{gap:6px}
  .head-search{margin-right:0}
  .spanel{position:fixed;inset:58px 0 0;z-index:39;overflow:auto;border-top:0;box-shadow:none;padding-bottom:110px}
  .spanel::before,.spanel::after{display:none}
  .spanel-in{padding-top:16px;gap:12px}
  .sp-cols{grid-template-columns:1fr;gap:24px}
  .sp-pages ul{grid-template-columns:1fr}
  .sp-pages li+li,.sp-answers li+li{border-top:1px solid var(--line)}
  .sp-pages li a,.sp-answers li a{min-height:56px;align-content:center;padding:10px 36px 10px 14px;margin:0 -14px;border-radius:8px}
}
@media (max-width:640px){
  .sp-form{flex-wrap:wrap}
  .sp-field input{height:52px;font-size:17px;padding-left:48px}
  .sp-field>svg{left:16px;width:20px;height:20px}
  .sp-go{flex:1 1 100%;min-height:50px}
  .sp-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.spanel,.spanel::after{animation:none}}

/* Webflow build (8 Nov 2026): HTML embeds wrap each block in div.w-embed; make the wrapper boxless so sticky/fixed and body-level layout behave as in the local build. */
.w-embed{display:contents}