/* North Bear V2 // Modern British information design.
   Layout: a 12-column ruled grid; every section opens on a teletext-style page band; dark and warm off-white surfaces alternate; real photography breaks through the grid. */
.nb-site{
  --nb-green:#4DB88C; --nb-green-ink:#1E6B4A; --nb-green-dk:#3FA77C;
  --nb-ink:#0F1012; --nb-char:#17191C; --nb-paper:#F1EEE7; --nb-white:#FFFFFF;
  --nb-text:#16181B; --nb-muted:#575B61; --nb-muted-d:#A6ABB1; --nb-soft-d:#D5D8DB;
  --nb-rule-d:rgba(255,255,255,.15); --nb-rule-l:rgba(22,24,27,.18);
  --nb-cyan:#58C3DA; --nb-yellow:#F2C230; --nb-red:#E4573F;
  --nb-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --nb-mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  container:site / inline-size;
  font-family:var(--nb-sans); font-size:18px; line-height:1.55; color:var(--nb-text); background:var(--nb-paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.nb-site *,.nb-site *::before,.nb-site *::after{box-sizing:border-box}
.nb-site img{display:block; max-width:100%; height:auto}
.nb-site :where(a){color:inherit}
.nb-site [hidden]{display:none!important}
.nb-site :is(p,li,dd){text-wrap:pretty}
.nb-site :focus-visible{outline:3px solid var(--nb-yellow); outline-offset:3px}
.nb-paper :focus-visible,.nb-white :focus-visible,.nb-trust :focus-visible{outline-color:var(--nb-text)}
.nb-site :is(a,button,input,textarea,summary,[tabindex],[id]){scroll-margin-top:136px}
.nb-vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.nb-wrap{width:100%; max-width:1440px; margin-inline:auto; padding-inline:64px}

/* type */
.nb-mono{font-family:var(--nb-mono); font-size:11.5px; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; font-weight:500}
.nb-h2{font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:58px; line-height:.97; letter-spacing:-.003em; margin:0 0 28px; text-wrap:balance; max-width:20ch}
.nb-h3{font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:34px; line-height:1; margin:0 0 14px}
.nb-lead{font-size:21px; line-height:1.5; margin:0; max-width:36em}
.nb-label{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--nb-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; margin:0 0 30px; color:var(--nb-muted-d)}
.nb-pg{display:inline-block; background:var(--nb-green); color:var(--nb-ink); padding:4px 8px 3px; font-family:var(--nb-mono); font-weight:700; letter-spacing:.04em; font-stretch:87.5%}
.nb-cursor{display:inline-block; width:9px; height:15px; background:var(--nb-green); animation:nb-blink 1.1s steps(1) 4}
@keyframes nb-blink{50%{opacity:0}}

/* surfaces */
.nb-sec{padding-block:96px 112px}
.nb-dark{background:var(--nb-char); color:#fff}
.nb-ink{background:var(--nb-ink); color:#fff}
.nb-paper{background:var(--nb-paper); color:var(--nb-text)}
.nb-white{background:var(--nb-white); color:var(--nb-text)}
.nb-dark .nb-lead,.nb-ink .nb-lead{color:var(--nb-soft-d)}

/* page band */
.nb-band{display:flex; align-items:center; gap:12px; border-top:2px solid currentColor; padding-top:14px; margin-bottom:52px; font-family:var(--nb-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; font-weight:500}
.nb-band-r{margin-left:auto; color:var(--nb-muted)}
.nb-dark .nb-band-r,.nb-ink .nb-band-r{color:var(--nb-muted-d)}

/* buttons + links */
.nb-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; font-family:var(--nb-sans); font-weight:700; font-size:15px; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; border-radius:2px; border:2px solid transparent; cursor:pointer; line-height:1; transition:background .15s, border-color .15s, color .15s}
.nb-btn-green{background:var(--nb-green); color:var(--nb-ink)} .nb-btn-green:hover{background:var(--nb-green-dk)}
.nb-btn-line{border-color:rgba(255,255,255,.7); color:#fff; background:transparent} .nb-btn-line:hover{border-color:var(--nb-green); color:var(--nb-green)}
.nb-btn-ink{background:var(--nb-ink); color:#fff} .nb-btn-ink:hover{background:var(--nb-green-ink)}
.nb-arrow{display:inline-block; font-weight:700; font-size:14px; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; color:var(--nb-green); border-bottom:2px solid currentColor; padding-bottom:3px}
.nb-arrow:hover{color:#fff}
.nb-arrow-dark{color:var(--nb-green-ink)} .nb-arrow-dark:hover{color:var(--nb-text)}

/* status chips (secondary palette: status only) */
.nb-chip{display:inline-block; font-family:var(--nb-mono); font-size:10.5px; line-height:1.3; letter-spacing:.05em; font-stretch:87.5%; font-weight:700; padding:3px 7px 2px; border-radius:2px; color:var(--nb-ink); white-space:nowrap; vertical-align:middle}
.nb-chip-r{background:var(--nb-red)} .nb-chip-y{background:var(--nb-yellow)} .nb-chip-c{background:var(--nb-cyan)} .nb-chip-g{background:var(--nb-green)}
.nb-chip-o{background:transparent; color:inherit; box-shadow:inset 0 0 0 1px currentColor}

/* 1. header */
.nb-header{position:sticky; top:0; z-index:30; background:var(--nb-ink); color:#fff}
.nb-strip{border-bottom:1px solid var(--nb-rule-d); color:var(--nb-muted-d)}
.nb-strip-in{display:flex; justify-content:space-between; align-items:center; min-height:34px}
.nb-bar{position:relative; display:flex; align-items:center; gap:36px; min-height:84px}
.nb-logo{display:block; text-decoration:none}
.nb-logo img{width:118px; height:118px; margin-block:-17px}
.nb-nav{display:flex; gap:30px; margin-left:auto}
.nb-nav a{font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--nb-soft-d); padding-block:8px; border-bottom:2px solid transparent}
.nb-nav a:hover{color:#fff; border-bottom-color:var(--nb-green)}
.nb-dd{position:relative}
.nb-dd-top::after{content:" \25BE"; color:var(--nb-green)}
.nb-dd-menu{display:none; position:absolute; top:100%; left:-20px; min-width:280px; list-style:none; margin:0; padding:8px 20px 12px; background:var(--nb-ink); border:1px solid var(--nb-rule-d); border-top:2px solid var(--nb-green); z-index:40}
.nb-dd:hover .nb-dd-menu,.nb-dd:focus-within .nb-dd-menu{display:block}
.nb-nav .nb-dd-menu a{display:block; padding-block:10px; font-size:13px; border-bottom:1px solid var(--nb-rule-d)}
.nb-nav .nb-dd-menu li:last-child a{border-bottom:0}
.nb-bar-cta{min-height:46px; padding:0 20px; font-size:14px}
.nb-menu{display:none}

/* 2. hero */
.nb-hero{padding-top:64px}
.nb-hero-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end}
.nb-hero-copy{grid-column:1 / span 7; padding-bottom:48px}
.nb-hero-h{margin:0}
.nb-h1a{display:block; font-weight:800; font-stretch:76%; text-transform:uppercase; font-size:92px; line-height:.9; letter-spacing:-.005em}
.nb-h1b{display:block; margin-top:16px; font-weight:700; font-stretch:80%; text-transform:uppercase; font-size:38px; line-height:1.02; color:var(--nb-green); max-width:20ch}
.nb-hero-sub{font-size:21px; line-height:1.5; color:var(--nb-soft-d); margin:30px 0 36px; max-width:31em}
.nb-ctas{display:flex; flex-wrap:wrap; gap:14px}
.nb-proof{margin:26px 0 0; font-size:15px; color:var(--nb-soft-d)}
.nb-proof strong{color:#fff}
.nb-stars{color:var(--nb-green); letter-spacing:.12em}
.nb-hero-photo{grid-column:8 / span 5; margin:0}
.nb-hero-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:72% 30%; filter:saturate(.9) contrast(1.03)}
.nb-site figcaption{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid currentColor; margin-top:0}
.nb-dark figcaption{color:var(--nb-muted-d)}
.nb-clients{display:flex; align-items:center; gap:28px; border-top:1px solid var(--nb-rule-d); margin-top:56px; padding-block:22px 26px}
.nb-clients-l{color:var(--nb-muted-d); flex:none}
.nb-clients-list{display:flex; flex-wrap:wrap; gap:8px 36px; list-style:none; margin:0; padding:0}
.nb-clients-list li{font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:19px; letter-spacing:.03em; color:#8F949A}

/* 3. problem */
.nb-problem{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px}
.nb-problem .nb-h2{grid-column:1 / span 4; font-size:64px}
.nb-queue{grid-column:5 / span 8; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--nb-rule-l)}
.nb-queue li{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:18px; align-items:center; padding:13px 0; border-top:1px solid var(--nb-rule-l)}
.nb-queue .t{font-family:var(--nb-mono); font-size:12px; color:var(--nb-muted); font-variant-numeric:tabular-nums; font-stretch:87.5%}
.nb-queue .m{font-weight:700; font-stretch:84%; text-transform:uppercase; font-size:23px; line-height:1.1}
.nb-relief{margin-top:132px; padding-top:40px; border-top:2px solid var(--nb-text)}
.nb-relief-a,.nb-relief-b{margin:0; font-weight:800; font-stretch:76%; text-transform:uppercase; font-size:88px; line-height:.94}
.nb-relief-b{color:var(--nb-green-ink)}
.nb-relief-c{margin:30px 0 0; font-size:22px; line-height:1.5; max-width:30em}

/* 4. how it works: one line, four stops */
.nb-line{list-style:none; margin:60px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative}
.nb-line::before{content:""; position:absolute; left:0; right:0; top:14px; height:4px; background:var(--nb-green)}
.nb-stop{position:relative; padding:60px 24px 0; border-left:1px solid var(--nb-rule-d)}
.nb-stop:first-child{border-left:0; padding-left:0}
.nb-node{position:absolute; top:3px; left:-13px; width:26px; height:26px; border-radius:50%; background:var(--nb-char); border:5px solid var(--nb-green)}
.nb-stop:first-child .nb-node{left:0}
.nb-stop-n{font-family:var(--nb-mono); font-size:13px; color:var(--nb-green); font-stretch:87.5%; font-weight:700}
.nb-stop h3{font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:44px; line-height:1; margin:6px 0 18px}
.nb-stop ul{list-style:none; margin:0; padding:0; color:var(--nb-soft-d); font-size:17px; line-height:1.75}
.nb-loop{position:relative; height:44px; margin-top:40px; border:3px solid var(--nb-green); border-top:0; border-radius:0 0 18px 18px; margin-inline:13px}
.nb-loop .nb-mono{position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); background:var(--nb-char); padding:0 12px; color:var(--nb-green); font-weight:700}
.nb-under{display:flex; justify-content:space-between; align-items:baseline; gap:32px; flex-wrap:wrap; margin-top:64px; padding-top:28px; border-top:1px solid var(--nb-rule-d)}
.nb-under p{margin:0; font-weight:700; font-size:26px; line-height:1.3; max-width:28em}

/* 5. turn up */
.nb-turnup{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end}
.nb-turnup .nb-h2{grid-column:1 / span 7; margin:0}
.nb-turnup .nb-lead{grid-column:8 / span 5}
.nb-big-photo{margin:52px 0 0}
.nb-big-photo img{width:100%; height:620px; object-fit:cover; filter:saturate(.88) contrast(1.03)}
.nb-day{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-top:64px; padding-top:32px; border-top:2px solid var(--nb-text)}
.nb-day-copy{grid-column:1 / span 4}
.nb-day-copy p{margin:0 0 16px; font-size:19px}
.nb-envs{grid-column:5 / span 8; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.nb-envs img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.88) contrast(1.03)}
.nb-envs .nb-mono{display:block; padding-top:9px; margin-top:9px; border-top:1px solid var(--nb-rule-l); color:var(--nb-muted)}

/* 6. results */
.nb-cases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:56px; border-top:1px solid var(--nb-rule-d)}
.nb-case{padding:32px 32px 40px; border-left:1px solid var(--nb-rule-d); min-width:0; display:flex; flex-direction:column}
.nb-case:first-child{border-left:0; padding-left:0} .nb-case:last-child{padding-right:0}
.nb-shot{position:relative; aspect-ratio:16/7; margin-bottom:20px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; color:var(--nb-muted-d);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px), #212428}
.nb-shot::before,.nb-shot::after{content:""; position:absolute; width:22px; height:22px; border-color:var(--nb-green); border-style:solid}
.nb-shot::before{top:10px; left:10px; border-width:2px 0 0 2px} .nb-shot::after{top:10px; right:10px; border-width:2px 2px 0 0}
.nb-shot-s{color:#969CA2}
.nb-result{text-transform:uppercase; margin:0 0 4px; font-weight:800; font-stretch:72%; font-size:112px; line-height:.86; color:var(--nb-green); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.nb-result-l{margin:0; font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:26px; line-height:1.05}
.nb-result-t{margin:10px 0 24px; font-size:15px; color:var(--nb-muted-d); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.nb-case-who{margin:0; font-family:inherit; font-stretch:100%; text-transform:none; letter-spacing:0; line-height:1.4; padding-top:16px; border-top:1px solid var(--nb-rule-d); font-weight:700; font-size:18px}
.nb-case-who .nb-mono{color:var(--nb-muted-d)}
.nb-case-dl{margin:16px 0 26px; flex:1}
.nb-case-dl dt{font-family:var(--nb-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--nb-green); font-stretch:87.5%; font-weight:700; margin-top:12px}
.nb-case-dl dd{margin:3px 0 0; font-size:16px; line-height:1.5; color:var(--nb-soft-d)}
.nb-q span{display:block; margin-top:4px; font-size:14px; color:var(--nb-muted-d)}
.nb-case .nb-arrow{align-self:flex-start}
.nb-all{margin-top:44px; padding-top:28px; border-top:1px solid var(--nb-rule-d)}

/* 7. trust */
.nb-trust{background:var(--nb-green); color:var(--nb-ink)}
.nb-trust-list{list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.nb-trust-list li{padding:34px 24px 34px; border-left:1px solid rgba(15,16,18,.28); display:flex; flex-direction:column; justify-content:flex-end; min-height:150px}
.nb-trust-list li:first-child{border-left:0; padding-left:0}
.nb-trust-list b{font-weight:800; font-stretch:76%; text-transform:uppercase; font-size:38px; line-height:.98}
.nb-trust-list .nb-tn b{font-size:72px; line-height:.86}
.nb-trust-list span{font-family:var(--nb-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; font-weight:700; margin-top:8px}

/* 8. nort */
.nb-nort{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start}
.nb-nort-photo{grid-column:1 / span 5; margin:0}
.nb-nort-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%}
.nb-nort-photo figcaption{color:var(--nb-muted)}
.nb-nort-copy{grid-column:7 / span 6}
.nb-nort-copy p{font-size:19px; margin:0 0 18px; max-width:33em}
.nb-subline.nb-subline{margin:30px 0 28px; padding-block:16px; border-block:2px solid var(--nb-text); font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:36px; line-height:1; color:var(--nb-green-ink)}

/* 9. capabilities */
.nb-tools-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end}
.nb-tools-head .nb-h2{grid-column:1 / span 6; margin:0}
.nb-tools-head .nb-lead{grid-column:8 / span 5}
.nb-tools{list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-auto-flow:column; column-gap:56px; border-top:1px solid var(--nb-rule-d)}
.nb-tools a{display:grid; grid-template-columns:60px minmax(0,1fr) 28px; column-gap:16px; row-gap:4px; padding:22px 0 24px; border-bottom:1px solid var(--nb-rule-d); text-decoration:none; color:#fff; height:100%}
.nb-tool-n{grid-row:1 / span 2; font-family:var(--nb-mono); font-size:12px; font-weight:700; color:var(--nb-green); font-stretch:87.5%; padding-top:8px}
.nb-tool-h{font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:28px; line-height:1.05}
.nb-tool-d{grid-column:2; font-size:16px; color:var(--nb-muted-d); line-height:1.5}
.nb-tool-a{grid-column:3; grid-row:1; color:var(--nb-green); font-size:22px; line-height:1.2}
.nb-tools a:hover .nb-tool-h{color:var(--nb-green)}
.nb-tools-next{margin:28px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; font-size:18px; color:var(--nb-soft-d)}
.nb-tools-next .nb-mono{color:var(--nb-green)}
.nb-trust-list .nb-chip{align-self:flex-start; margin-top:10px}
.nb-chip-k{background:var(--nb-ink); color:#fff}

/* 10. investment */

/* 11. reviews */
.nb-rev-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end}
.nb-rev-head .nb-h2{grid-column:1 / span 8; margin:0}
.nb-rating{grid-column:9 / span 4; justify-self:end; text-align:right; margin:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.nb-rating b{font-weight:800; font-stretch:72%; font-size:84px; line-height:.85}
.nb-paper .nb-stars,.nb-white .nb-stars{color:var(--nb-green-ink)}
.nb-rating span:last-child{font-family:var(--nb-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; font-weight:700}
.nb-reviews{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:48px 0 36px; border-top:1px solid var(--nb-rule-l)}
.nb-reviews blockquote{margin:0; padding:28px 32px 32px 0; border-bottom:1px solid var(--nb-rule-l); display:flex; flex-direction:column; justify-content:space-between; gap:20px}
.nb-reviews blockquote:nth-child(3n+2),.nb-reviews blockquote:nth-child(3n+3){padding-left:32px; border-left:1px solid var(--nb-rule-l)}
.nb-reviews p{margin:0; font-size:19px; line-height:1.5}
.nb-reviews footer{display:flex; flex-direction:column; gap:2px}
.nb-reviews footer b{font-weight:800; font-stretch:84%; text-transform:uppercase; font-size:17px; letter-spacing:.02em}
.nb-reviews footer span{font-family:var(--nb-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--nb-muted); font-stretch:87.5%}

/* 12. local */
.nb-local{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:center}
.nb-local > div{grid-column:1 / span 6}
.nb-coords{margin:30px 0 0; color:var(--nb-green); font-weight:700}
.nb-map{grid-column:8 / span 5; margin:0; color:#fff}
.nb-map svg{width:100%; height:auto; display:block}
.nb-map-t text{fill:var(--nb-muted-d); font-family:var(--nb-mono); letter-spacing:.05em}
.nb-map-towns circle{fill:#9AA0A6} .nb-map-towns text{fill:var(--nb-soft-d); font-family:var(--nb-sans); font-weight:600}
.nb-map-home{fill:var(--nb-green)} .nb-map-home-t{fill:var(--nb-green); font-family:var(--nb-mono); font-weight:700; letter-spacing:.05em}
.nb-map figcaption{color:var(--nb-muted-d); border-top-color:var(--nb-rule-d)}

/* 13. faq */
.nb-faq{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start}
.nb-faq > div:first-child{grid-column:1 / span 4}
.nb-faq .nb-h2{font-size:48px}
.nb-faq-list{grid-column:6 / span 7; border-bottom:1px solid var(--nb-rule-l)}
.nb-faq-list details{border-top:1px solid var(--nb-rule-l)}
.nb-faq-list summary{display:flex; justify-content:space-between; gap:24px; align-items:baseline; padding:20px 0; cursor:pointer; list-style:none; font-weight:700; font-size:22px; line-height:1.3}
.nb-faq-list summary::-webkit-details-marker{display:none}
.nb-faq-list summary::after{content:"+"; font-family:var(--nb-mono); font-size:20px; color:var(--nb-green-ink); flex:none}
.nb-faq-list details[open] summary::after{content:"\2212"}
.nb-faq-list p{margin:0 0 22px; font-size:18px; color:var(--nb-muted); max-width:36em}

/* 14. final */
.nb-final{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:stretch}
.nb-marker{grid-column:1 / span 3; background:var(--nb-green); color:var(--nb-ink); padding:26px 24px; display:flex; flex-direction:column; gap:10px; min-height:520px}
.nb-marker-pg{font-family:var(--nb-mono); font-weight:700; font-size:68px; line-height:.9; font-stretch:87.5%; letter-spacing:-.02em}
.nb-marker-l{font-family:var(--nb-mono); font-weight:700; font-size:13px; letter-spacing:.05em; font-stretch:87.5%}
.nb-marker-a{margin-top:auto; font-size:72px; line-height:1; font-weight:300}
.nb-final-main{grid-column:5 / span 8}
.nb-final .nb-h2{font-size:60px; max-width:18ch}
.nb-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 28px; margin-top:44px}
.nb-field{display:flex; flex-direction:column; gap:8px; min-width:0}
.nb-field-wide{grid-column:1 / -1}
.nb-field label{font-family:var(--nb-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; font-weight:600; color:var(--nb-soft-d)}
.nb-field input,.nb-field textarea{font:inherit; font-size:19px; color:#fff; background:transparent; border:0; border-bottom:2px solid rgba(255,255,255,.45); border-radius:0; padding:10px 0; width:100%}
.nb-field textarea{resize:vertical; min-height:110px}
.nb-field input:focus,.nb-field textarea:focus{border-bottom-color:var(--nb-green); outline:none}
.nb-field input:focus-visible,.nb-field textarea:focus-visible{outline:3px solid var(--nb-yellow); outline-offset:4px}
.nb-field [aria-invalid="true"]{border-bottom-color:#FF8A78}
.nb-form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:4px}
.nb-form-note{margin:0; font-size:15px; color:var(--nb-soft-d)}
.nb-form-err{margin:0; flex-basis:100%; color:#FF9C8C; font-size:15px; min-height:1px}
.nb-success{margin-top:44px; padding:28px 0 8px; border-top:2px solid var(--nb-green)}
.nb-success-h{margin:0 0 10px; font-weight:800; font-stretch:76%; text-transform:uppercase; font-size:64px; line-height:.92; color:var(--nb-green)}
.nb-success-links{display:flex; flex-wrap:wrap; gap:14px 28px; margin:26px 0 0}
.nb-direct{list-style:none; margin:52px 0 0; padding:20px 0 0; border-top:1px solid var(--nb-rule-d); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; font-size:16px}
.nb-direct .nb-mono{display:block; color:var(--nb-muted-d); margin-bottom:4px}
.nb-direct a,.nb-foot-contact a{display:inline-block; padding-block:12px; text-decoration:none; border-bottom:1px solid var(--nb-rule-d); line-height:1.3}
.nb-direct a:hover,.nb-foot-contact a:hover{color:var(--nb-green); border-bottom-color:var(--nb-green)}

/* 15. footer */
.nb-footer{background:#0A0B0C; color:var(--nb-soft-d)}
.nb-foot-grid{display:grid; grid-template-columns:4fr 2fr 2fr 2fr; gap:40px; padding-block:76px 52px}
.nb-foot-brand img{width:150px; height:150px; margin:-30px 0 -6px -10px}
.nb-foot-statement{margin:0 0 18px; font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:28px; line-height:1.02; color:#fff; max-width:15ch}
.nb-foot-contact{list-style:none; margin:6px 0 0; padding:0; font-size:16px; line-height:1.5}
.nb-footer nav .nb-mono,.nb-foot-brand .nb-mono{display:block; color:var(--nb-muted-d); margin:0 0 14px}
.nb-footer ul{list-style:none; margin:0; padding:0}
.nb-footer nav a{display:inline-block; text-decoration:none; font-size:16px; line-height:1.9; color:var(--nb-soft-d)}
.nb-footer nav a:hover{color:var(--nb-green)}
.nb-legal{display:flex; justify-content:space-between; gap:24px; padding-block:20px 28px; border-top:1px solid var(--nb-rule-d); font-size:13px; color:var(--nb-muted-d)}
.nb-legal p{margin:0} .nb-legal a{margin-right:16px; color:var(--nb-muted-d)}

/* P170 work with us: three levels of responsibility, the middle one dominant */
.nb-own-h.nb-own-h{max-width:none; margin-bottom:22px}
.nb-pkgs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); margin-top:64px; border-top:2px solid var(--nb-text); align-items:stretch}
.nb-pkg{min-width:0; display:flex; flex-direction:column; padding:28px 32px 36px; border-left:1px solid var(--nb-rule-l)}
.nb-pkg:first-child{border-left:0; padding-left:0} .nb-pkg:last-child{padding-right:0}
.nb-pkg-main{background:var(--nb-ink); color:#fff; margin-top:-30px; padding:40px 36px 44px; border-left:0; border-top:6px solid var(--nb-green)}
.nb-pkg-main + .nb-pkg{border-left:0}
.nb-pkg-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; color:var(--nb-muted)}
.nb-pkg-main .nb-pkg-top{color:var(--nb-muted-d)}
.nb-meter{display:inline-flex; gap:4px}
.nb-meter-s{width:22px; height:8px; box-shadow:inset 0 0 0 1.5px currentColor}
.nb-meter-s.on{background:var(--nb-green-ink); box-shadow:none}
.nb-pkg-main .nb-meter-s.on{background:var(--nb-green)}
.nb-pkg-pop{margin-left:auto}
.nb-pkg-h{font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:40px; line-height:.95; margin:20px 0 0; text-wrap:balance}
.nb-pkg-main .nb-pkg-h{font-size:50px}
.nb-pkg-price{display:flex; align-items:baseline; gap:10px; margin:18px 0 0; padding-bottom:22px; border-bottom:1px solid var(--nb-rule-l)}
.nb-pkg-price b{font-weight:800; font-stretch:72%; font-size:64px; line-height:.9; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--nb-green-ink)}
.nb-pkg-main .nb-pkg-price{border-bottom-color:var(--nb-rule-d)}
.nb-pkg-main .nb-pkg-price b{font-size:80px; color:var(--nb-green)}
.nb-pkg-k{margin:22px 0 8px; color:var(--nb-green-ink); font-weight:700}
.nb-pkg-main .nb-pkg-k{color:var(--nb-green)}
.nb-pkg-sit{margin:0; font-weight:800; font-stretch:82%; text-transform:uppercase; font-size:22px; line-height:1.12}
.nb-pkg-main .nb-pkg-sit{font-size:26px}
.nb-hours{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-top:72px; padding-top:28px; border-top:2px solid var(--nb-text); align-items:start}
.nb-hours-h{grid-column:1 / span 6; margin:0; font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:46px; line-height:.97; text-wrap:balance}
.nb-hours-p{grid-column:7 / span 6; margin:0; font-size:21px; line-height:1.5}
.nb-pkg-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:44px}


/* P171 first 30 days: the P120 line, five stops */
.nb-line-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.nb-line-5 .nb-stop{padding-inline:20px}
.nb-line-5 .nb-stop:first-child{padding-left:0}
.nb-line-5 .nb-stop h3{font-size:38px}
.nb-90{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-top:64px; padding-top:24px; border-top:1px solid var(--nb-rule-d)}
.nb-90-k{grid-column:1 / span 3; margin:0; padding-top:14px; color:var(--nb-green); font-weight:700}

/* P172 projects: standalone work */
.nb-proj-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end}
.nb-proj-head .nb-h2{grid-column:1 / span 6; margin:0}
.nb-proj{list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:2px solid var(--nb-text); border-bottom:1px solid var(--nb-rule-l)}
.nb-proj li + li{border-left:1px solid var(--nb-rule-l)}
.nb-proj a{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr; gap:12px; min-height:156px; padding:20px 20px 22px; text-decoration:none; color:var(--nb-text)}
.nb-proj li:first-child a{padding-left:0}
.nb-proj .nb-tool-n{grid-row:1; grid-column:1; padding-top:0; color:var(--nb-green-ink)}
.nb-proj .nb-tool-a{grid-row:1; grid-column:2; color:var(--nb-green-ink)}
.nb-proj-h{grid-column:1 / -1; align-self:end; font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:32px; line-height:1}
.nb-proj a:hover .nb-proj-h{color:var(--nb-green-ink)}
.nb-proj-cta{margin-top:40px}

/* P170-P172 final copy */
.nb-own-intro{max-width:40em}
.nb-pkg-role{margin:0 0 14px; font-size:18px; line-height:1.45}
.nb-pkg-main .nb-pkg-role{color:var(--nb-soft-d)}
.nb-pkg-owns{list-style:none; margin:0; padding:0; border-top:1px solid var(--nb-rule-l)}
.nb-pkg-owns li{position:relative; padding:10px 0 10px 22px; border-bottom:1px solid var(--nb-rule-l); font-size:17px; line-height:1.4}
.nb-pkg-owns li::before{content:""; position:absolute; left:0; top:18px; width:10px; height:4px; background:var(--nb-green-ink)}
.nb-pkg-main .nb-pkg-owns,.nb-pkg-main .nb-pkg-owns li{border-color:var(--nb-rule-d)}
.nb-pkg-main .nb-pkg-owns li::before{background:var(--nb-green)}
.nb-stop-p{margin:0; color:var(--nb-soft-d); font-size:17px; line-height:1.55}
.nb-90-p{grid-column:4 / span 9; margin:0; font-size:22px; line-height:1.5; max-width:40em}
.nb-proj-intro{grid-column:8 / span 5}

.nb-result.nb-result-words{font-size:66px; line-height:.9}
/* ---------- 390 mobile ---------- */
@container site (max-width: 640px){
  .nb-site :is(a,button,input,textarea,summary,[tabindex],[id]){scroll-margin-top:112px}
  .nb-strip{display:none}
  .nb-chip{white-space:normal; max-width:100%}
  .nb-dd-top::after{content:none}
  .nb-header.open .nb-dd-menu{display:none}
  .nb-header.open .nb-dd-top{display:block}
  .nb-proof,.nb-result-t,.nb-q span,.nb-form-note,.nb-form-err,.nb-tools-next{font-size:16px}
  .nb-arrow{display:inline-flex; align-items:flex-end; min-height:44px}
  .nb-footer nav a{display:block; line-height:1.5; padding-block:10px}
  .nb-legal{font-size:15px}
  .nb-legal a{display:inline-block; padding-block:12px}
  .nb-map-towns text{font-size:16px} .nb-map-t text{font-size:14px} .nb-map-home-t{font-size:18px}
  .nb-wrap{padding-inline:20px}
  .nb-strip-r{display:none}
  .nb-strip-in{min-height:30px}
  .nb-bar{gap:12px; min-height:68px}
  .nb-logo img{width:84px; height:84px; margin-block:-10px}
  .nb-nav{display:none}
  .nb-header.open .nb-nav{display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%; background:var(--nb-ink); padding:4px 20px 20px; border-bottom:1px solid var(--nb-rule-d); margin:0}
  .nb-header.open .nb-nav a{font-size:17px; padding-block:14px; border-bottom:1px solid var(--nb-rule-d)}
  .nb-bar-cta{margin-left:auto; min-height:44px; padding:0 14px; font-size:13px}
  .nb-menu{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:none; border:1px solid var(--nb-rule-d); border-radius:2px; cursor:pointer; padding:0}
  .nb-menu span{display:block; width:20px; height:2px; background:#fff}
  .nb-sec{padding-block:64px 72px}
  .nb-h2{font-size:38px; max-width:none}
  .nb-h3{font-size:28px}
  .nb-lead{font-size:18px}
  .nb-band{margin-bottom:32px; font-size:11px}
  .nb-band-r{display:none}
  .nb-label{font-size:11px; margin-bottom:22px}

  .nb-hero{padding-top:36px}
  .nb-hero-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .nb-hero-copy,.nb-hero-photo{grid-column:1}
  .nb-hero-copy{padding-bottom:36px}
  .nb-h1a{font-size:50px; line-height:.92}
  .nb-h1b{font-size:24px; margin-top:12px}
  .nb-hero-sub{font-size:18px; margin:22px 0 26px}
  .nb-ctas{flex-direction:column}
  .nb-ctas .nb-btn{width:100%}
  .nb-hero-photo img{aspect-ratio:4/3}
  .nb-site figcaption{flex-direction:column; align-items:flex-start}
  .nb-clients{flex-direction:column; align-items:flex-start; gap:12px; margin-top:36px}
  .nb-clients-list{gap:6px 20px}
  .nb-clients-list li{font-size:16px}

  .nb-problem{grid-template-columns:minmax(0,1fr); gap:20px}
  .nb-problem .nb-h2,.nb-queue{grid-column:1}
  .nb-problem .nb-h2{font-size:44px}
  .nb-queue li{grid-template-columns:50px minmax(0,1fr); gap:4px 12px; padding:12px 0}
  .nb-queue .t{grid-row:1 / span 2; align-self:start; padding-top:4px; font-size:11px}
  .nb-queue .m{font-size:19px}
  .nb-queue .nb-chip{justify-self:start}
  .nb-relief{margin-top:72px; padding-top:28px}
  .nb-relief-a,.nb-relief-b{font-size:44px}
  .nb-relief-c{font-size:18px; margin-top:22px}

  .nb-line{grid-template-columns:minmax(0,1fr); margin-top:36px}
  .nb-line::before{left:11px; right:auto; top:0; bottom:0; width:4px; height:auto}
  .nb-stop,.nb-stop:first-child{padding:0 0 34px 48px; border-left:0}
  .nb-node,.nb-stop:first-child .nb-node{left:0; top:0}
  .nb-stop h3{font-size:36px; margin-bottom:10px}
  .nb-stop ul{font-size:17px; line-height:1.6}
  .nb-loop{height:auto; border:0; margin:0}
  .nb-loop .nb-mono{position:static; transform:none; display:inline-block; padding:6px 10px; border:2px solid var(--nb-green); margin-left:0}
  .nb-under{flex-direction:column; gap:18px; margin-top:40px}
  .nb-under p{font-size:21px}

  .nb-turnup{grid-template-columns:minmax(0,1fr); gap:18px}
  .nb-turnup .nb-h2,.nb-turnup .nb-lead{grid-column:1}
  .nb-big-photo{margin-top:32px}
  .nb-big-photo img{height:300px}
  .nb-day{grid-template-columns:minmax(0,1fr); gap:24px; margin-top:44px}
  .nb-day-copy,.nb-envs{grid-column:1}
  .nb-envs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .nb-envs img{aspect-ratio:1/1}

  .nb-cases{grid-template-columns:minmax(0,1fr); margin-top:32px}
  .nb-case,.nb-case:first-child,.nb-case:last-child{padding:28px 0 36px; border-left:0; border-top:1px solid var(--nb-rule-d)}
  .nb-case:first-child{border-top:0}
  .nb-result{font-size:92px; margin-top:24px}
  .nb-result-l{font-size:22px}

  .nb-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-trust-list li,.nb-trust-list li:first-child{padding:22px 0 22px 16px; min-height:0; border-left:1px solid rgba(15,16,18,.28); border-top:1px solid rgba(15,16,18,.28)}
  .nb-trust-list li:nth-child(odd){border-left:0; padding-left:0}
  .nb-trust-list li:nth-child(-n+2){border-top:0}
  .nb-trust-list li:last-child{grid-column:1 / -1}
  .nb-trust-list b{font-size:28px}
  .nb-trust-list .nb-tn b{font-size:56px}

  .nb-nort{grid-template-columns:minmax(0,1fr); gap:28px}
  .nb-nort-photo,.nb-nort-copy{grid-column:1}
  .nb-nort-photo img{aspect-ratio:1/1}
  .nb-nort-copy p{font-size:17px}
  .nb-subline.nb-subline{font-size:28px}

  .nb-tools-head{grid-template-columns:minmax(0,1fr); gap:18px}
  .nb-tools-head .nb-h2,.nb-tools-head .nb-lead{grid-column:1}
  .nb-tools{grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; margin-top:32px}
  .nb-tools a{grid-template-columns:46px minmax(0,1fr) 22px; column-gap:12px; padding:18px 0 20px}
  .nb-tool-h{font-size:23px}
  .nb-tool-d{font-size:16px}


  .nb-pkgs{grid-template-columns:minmax(0,1fr); margin-top:36px; border-top:0}
  .nb-pkg,.nb-pkg:first-child,.nb-pkg:last-child,.nb-pkg-main + .nb-pkg{padding:24px 0 30px; border-left:0; border-top:2px solid var(--nb-text)}
  .nb-pkg-main.nb-pkg-main{margin:14px -20px; padding:28px 20px 32px; border-top:6px solid var(--nb-green)}
  .nb-pkg-h{font-size:34px} .nb-pkg-main .nb-pkg-h{font-size:40px}
  .nb-pkg-price b{font-size:56px} .nb-pkg-main .nb-pkg-price b{font-size:66px}
  .nb-pkg-sit,.nb-pkg-main .nb-pkg-sit{font-size:21px}
  .nb-hours{grid-template-columns:minmax(0,1fr); gap:14px; margin-top:36px}
  .nb-hours-h,.nb-hours-p{grid-column:1} .nb-hours-h{font-size:34px} .nb-hours-p{font-size:17px}
  .nb-pkg-cta{flex-direction:column; align-items:stretch; gap:8px}
  .nb-pkg-cta .nb-btn{width:100%}
  .nb-line-5 .nb-stop,.nb-line-5 .nb-stop:first-child{padding:0 0 30px 48px}
  .nb-line-5 .nb-stop h3{font-size:34px}
  .nb-90{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px}
  .nb-90-k{grid-column:1} .nb-90-k{padding-top:0}
  .nb-proj-head{grid-template-columns:minmax(0,1fr); gap:18px}
  .nb-proj-head .nb-h2{grid-column:1}
  .nb-proj{grid-template-columns:minmax(0,1fr); margin-top:28px}
  .nb-proj li + li{border-left:0; border-top:1px solid var(--nb-rule-l)}
  .nb-proj a,.nb-proj li:first-child a{min-height:0; padding:16px 0; grid-template-columns:46px minmax(0,1fr) 22px; grid-template-rows:auto; align-items:center; gap:12px}
  .nb-proj .nb-tool-n{grid-column:1} .nb-proj-h{grid-column:2; grid-row:1; align-self:center; font-size:24px} .nb-proj .nb-tool-a{grid-column:3}
  .nb-proj-cta .nb-btn{width:100%}

  .nb-pkg-role{font-size:17px}
  .nb-90-p{grid-column:1; font-size:18px}
  .nb-proj-intro{grid-column:1}

  .nb-result.nb-result-words{font-size:56px}
  .nb-rev-head{grid-template-columns:minmax(0,1fr); gap:20px}
  .nb-rev-head .nb-h2,.nb-rating{grid-column:1}
  .nb-rating{justify-self:start; text-align:left; align-items:flex-start}
  .nb-rating b{font-size:64px}
  .nb-reviews{grid-template-columns:minmax(0,1fr); margin-top:28px}
  .nb-reviews blockquote,.nb-reviews blockquote:nth-child(3n+2),.nb-reviews blockquote:nth-child(3n+3){padding:22px 0 24px; border-left:0}
  .nb-reviews p{font-size:17px}

  .nb-local{grid-template-columns:minmax(0,1fr); gap:28px}
  .nb-local > div,.nb-map{grid-column:1}

  .nb-faq{grid-template-columns:minmax(0,1fr); gap:20px}
  .nb-faq > div:first-child,.nb-faq-list{grid-column:1}
  .nb-faq .nb-h2{font-size:36px}
  .nb-faq-list summary{font-size:19px; padding:18px 0}
  .nb-faq-list p{font-size:17px}

  .nb-final{grid-template-columns:minmax(0,1fr); gap:0}
  .nb-marker{grid-column:1; min-height:0; flex-direction:row; align-items:baseline; gap:12px; padding:14px 16px; margin-bottom:28px}
  .nb-marker-pg{font-size:34px}
  .nb-marker-a{display:none}
  .nb-final-main{grid-column:1}
  .nb-final .nb-h2{font-size:38px}
  .nb-form{grid-template-columns:minmax(0,1fr); gap:22px; margin-top:30px}
  .nb-form-foot .nb-btn{width:100%}
  .nb-field input,.nb-field textarea{font-size:17px}
  .nb-success-h{font-size:46px}
  .nb-direct{grid-template-columns:minmax(0,1fr); gap:14px; margin-top:40px}

  .nb-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; padding-block:56px 36px}
  .nb-foot-brand{grid-column:1 / -1}
  .nb-foot-statement{font-size:26px}
  .nb-legal{flex-direction:column; gap:12px}
}
@media (prefers-reduced-motion: reduce){ .nb-cursor{animation:none} .nb-btn{transition:none} }

/* ==========================================================================
   Inner pages. Same tokens, type and teletext devices as the approved homepage.
   Components read theme colours from --rule / --muted / --accent so one block
   works on dark, paper and white sections.
   ========================================================================== */
.nb-dark,.nb-ink{--rule:var(--nb-rule-d); --muted:var(--nb-muted-d); --accent:var(--nb-green); --body:var(--nb-soft-d)}
.nb-paper,.nb-white{--rule:var(--nb-rule-l); --muted:var(--nb-muted); --accent:var(--nb-green-ink); --body:var(--nb-text)}
.nb-skip{position:absolute; left:12px; top:-60px; z-index:60; background:var(--nb-yellow); color:var(--nb-ink); padding:10px 14px; font-weight:700; text-decoration:none}
.nb-skip:focus{top:12px}
.nb-nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--nb-green)}

/* breadcrumbs */
.nb-crumbs{display:flex; flex-wrap:wrap; gap:4px 10px; list-style:none; margin:0 0 26px; padding:0; font-family:var(--nb-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; color:var(--nb-muted-d)}
.nb-crumbs li + li::before{content:"//"; margin-right:10px; color:var(--nb-green)}
.nb-crumbs a{text-decoration:none; color:var(--nb-soft-d)} .nb-crumbs a:hover{color:var(--nb-green)}
.nb-crumbs a,.nb-byline a{display:inline-block; padding-block:15px; margin-block:-15px}
.nb-crumbs [aria-current]{color:#fff}

/* page hero */
.nb-phero{padding-block:52px 84px}
.nb-ph1{margin:0; max-width:17ch; font-weight:800; font-stretch:74%; text-transform:uppercase; font-size:84px; line-height:.9; letter-spacing:-.01em; text-wrap:balance}
.nb-phero .nb-lead{margin-top:26px; color:var(--nb-soft-d); max-width:38em}
.nb-phero .nb-ctas{margin-top:34px}
.nb-phero-note{margin:22px 0 0; font-size:16px; color:var(--nb-muted-d)}

/* text, split */
.nb-col{max-width:46em}
.nb-col > p,.nb-split-b > p{margin:0 0 18px; font-size:19px; line-height:1.6; color:var(--body)}
.nb-col > p:last-child,.nb-split-b > p:last-child{margin-bottom:0}
.nb-col .nb-lead,.nb-split-b .nb-lead{margin-bottom:22px}
.nb-split{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start}
.nb-split-h{grid-column:1 / span 5}
.nb-split-h .nb-h2{margin:0}
.nb-split-b{grid-column:7 / span 6}
.nb-aside{list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--rule)}
.nb-aside li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--rule); font-size:17px}
.nb-aside .nb-mono{color:var(--accent); font-weight:700; padding-top:4px}

/* steps reuse the P120 line; light themes get light nodes */
.nb-line-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nb-line-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.nb-paper .nb-stop,.nb-white .nb-stop{border-left-color:var(--nb-rule-l)}
.nb-paper .nb-node{background:var(--nb-paper)} .nb-white .nb-node{background:var(--nb-white)}
.nb-paper .nb-line::before,.nb-white .nb-line::before{background:var(--nb-green-ink)}
.nb-paper .nb-node,.nb-white .nb-node{border-color:var(--nb-green-ink)}
.nb-paper .nb-stop-n,.nb-white .nb-stop-n{color:var(--nb-green-ink)}
.nb-paper .nb-stop ul,.nb-white .nb-stop ul,.nb-paper .nb-stop-p,.nb-white .nb-stop-p{color:var(--nb-text)}
.nb-stop ul + .nb-stop-p,.nb-stop-p + ul{margin-top:10px}

/* ruled list (generic version of the toolbox) */
.nb-rlist{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px; border-top:1px solid var(--rule)}
.nb-rlist > li{border-bottom:1px solid var(--rule)}
.nb-rlist-i{display:grid; grid-template-columns:56px minmax(0,1fr) 28px; column-gap:16px; row-gap:6px; padding:22px 0 24px; height:100%; text-decoration:none; color:inherit}
.nb-rlist-n{grid-row:1 / span 2; padding-top:8px; font-family:var(--nb-mono); font-size:12px; font-weight:700; font-stretch:87.5%; color:var(--accent)}
.nb-rlist-h{font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:28px; line-height:1.05}
.nb-rlist-d{grid-column:2; font-size:17px; line-height:1.5; color:var(--muted)}
.nb-rlist-a{grid-column:3; grid-row:1; color:var(--accent); font-size:22px; line-height:1.2}
a.nb-rlist-i:hover .nb-rlist-h{color:var(--accent)}
.nb-rlist-1{grid-template-columns:minmax(0,1fr)}

/* result cards: any number, three per row */
.nb-cases-many{grid-template-columns:repeat(3,minmax(0,1fr))}
.nb-cases-many .nb-case:nth-child(3n+1){border-left:0; padding-left:0}
.nb-cases-many .nb-case:nth-child(3n){padding-right:0}
.nb-cases-many .nb-case:nth-child(n+4){border-top:1px solid var(--nb-rule-d)}
.nb-case .nb-result-t:last-child{margin-bottom:0}
/* four cards: two by two */
.nb-cases-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.nb-cases-4 .nb-case:nth-child(odd){border-left:0; padding-left:0; padding-right:32px}
.nb-cases-4 .nb-case:nth-child(even){padding-right:0}
.nb-cases-4 .nb-case:nth-child(n+3){border-top:1px solid var(--nb-rule-d)}
.nb-case-link{margin-top:auto}

/* quote */
.nb-pull{margin:0; max-width:34em}
.nb-pull p{margin:0; font-weight:700; font-size:34px; line-height:1.22; text-wrap:balance}
.nb-pull footer{margin-top:22px; font-family:var(--nb-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-stretch:87.5%; color:var(--muted)}
.nb-pull footer b{color:var(--accent)}

/* links and facts */
.nb-linkrow{display:flex; flex-wrap:wrap; gap:4px 28px; list-style:none; margin:32px 0 0; padding:0}
.nb-linkrow a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-weight:600; border-bottom:1px solid var(--rule)}
.nb-linkrow a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.nb-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); list-style:none; margin:0; padding:0; border-block:1px solid var(--rule)}
.nb-facts li{padding:18px 20px 18px 0}
.nb-facts .nb-mono{display:block; color:var(--accent); font-weight:700; margin-bottom:6px}
.nb-facts b{font-size:19px}

/* flags: review builds only (the production build refuses to run while any remain) */
.nb-flag{margin-top:14px}

/* call to action band (no form) */
.nb-cta-acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.nb-final .nb-direct{margin-top:44px}

/* marketing MOT and contact forms share the homepage form styles */
.nb-form-mot{margin-top:36px}

/* insights */
.nb-article{max-width:46em}
.nb-article > :first-child{margin-top:0}
.nb-article h2{font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:34px; line-height:1; margin:52px 0 16px}
.nb-article h3{font-weight:800; font-size:22px; margin:34px 0 10px}
.nb-article p,.nb-article li{font-size:19px; line-height:1.65}
.nb-article p{margin:0 0 18px}
.nb-article ul,.nb-article ol{margin:0 0 20px; padding-left:22px}
.nb-article li{margin-bottom:8px}
.nb-article a{color:var(--nb-green-ink)}
.nb-article blockquote{margin:28px 0; padding-left:20px; border-left:6px solid var(--nb-green)}
.nb-article table{width:100%; border-collapse:collapse; margin:0 0 24px; font-size:17px}
.nb-article th,.nb-article td{text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--nb-rule-l); vertical-align:top}
.nb-byline{display:flex; flex-wrap:wrap; gap:6px 18px; margin:26px 0 0; color:var(--nb-muted-d)}
.nb-postlist{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--rule)}
.nb-postlist li{border-bottom:1px solid var(--rule)}
.nb-postlist a{display:grid; grid-template-columns:140px minmax(0,1fr) 28px; gap:6px 20px; padding:20px 0; text-decoration:none; color:inherit}
.nb-postlist .nb-mono{color:var(--accent); padding-top:6px}
.nb-postlist b{font-weight:800; font-stretch:82%; text-transform:uppercase; font-size:24px; line-height:1.08}
.nb-postlist span.nb-pd{grid-column:2; color:var(--muted); font-size:17px}
.nb-postlist i{grid-column:3; grid-row:1; font-style:normal; color:var(--accent); font-size:22px}
.nb-postlist a:hover b{color:var(--accent)}

/* work examples: lead image plus up to four, all 3:2 */
.nb-work{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:28px 20px; margin-top:44px}
.nb-work-f{margin:0; min-width:0; display:flex; flex-direction:column}
.nb-work-f img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--nb-char)}
.nb-work-5 .nb-work-f:first-child{grid-row:1 / span 2}
.nb-work-5 .nb-work-f:first-child img{flex:1 1 auto; height:0; min-height:320px; aspect-ratio:auto}
.nb-work-1{grid-template-columns:minmax(0,1fr)}
.nb-work-1 .nb-work-f{max-width:1000px}
.nb-work-1 .nb-work-f img{aspect-ratio:3/2}
.nb-site .nb-work-f figcaption{display:block; padding-top:12px; border:0; font-size:16px; line-height:1.4; color:var(--body)}
.nb-work-f figcaption .nb-mono{display:block; margin-bottom:3px; color:var(--accent); font-weight:700}
.nb-work-more{margin:32px 0 0}
/* social posts and other design: shown whole, never cropped */
.nb-work-posts{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start}
.nb-work-posts .nb-work-f:first-child{grid-row:auto}
.nb-work-posts .nb-work-f img,.nb-work-posts.nb-work-5 .nb-work-f:first-child img{aspect-ratio:auto; height:auto; min-height:0; flex:none}

/* cookie consent: bottom bar, never blocks the page */
.nb-consent{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--nb-ink); color:#fff; border-top:2px solid var(--nb-green); box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.nb-consent-in{display:flex; align-items:center; justify-content:space-between; gap:16px 32px; padding-block:16px}
.nb-consent-t{margin:0; font-size:16px; line-height:1.5; color:var(--nb-soft-d); max-width:62em}
.nb-consent-t .nb-mono{color:var(--nb-green); font-weight:700; margin-right:6px}
.nb-consent-t a{color:#fff}
.nb-consent-b{display:flex; gap:10px; flex:none}
.nb-consent .nb-btn{min-height:46px}

/* review board chrome is not part of the site */

@container site (max-width: 640px){
  .nb-phero{padding-block:30px 56px}
  .nb-ph1{font-size:48px; line-height:.92}
  .nb-crumbs{margin-bottom:18px}
  .nb-split{grid-template-columns:minmax(0,1fr); gap:18px}
  .nb-split-h,.nb-split-b{grid-column:1}
  .nb-col > p,.nb-split-b > p{font-size:17px}
  .nb-aside li{grid-template-columns:minmax(0,1fr); gap:2px}
  .nb-line-3 .nb-stop,.nb-line-3 .nb-stop:first-child,.nb-line-6 .nb-stop,.nb-line-6 .nb-stop:first-child{padding:0 0 30px 48px}
  .nb-rlist{grid-template-columns:minmax(0,1fr); margin-top:30px}
  .nb-rlist-i{grid-template-columns:46px minmax(0,1fr) 22px; column-gap:12px; padding:18px 0 20px}
  .nb-rlist-h{font-size:23px}
  .nb-rlist-d{font-size:16px}
  .nb-cases-many{grid-template-columns:minmax(0,1fr)}
  .nb-cases-many .nb-case,.nb-cases-many .nb-case:nth-child(3n+1),.nb-cases-many .nb-case:nth-child(3n){padding:28px 0 36px; border-left:0; border-top:1px solid var(--nb-rule-d)}
  .nb-cases-many .nb-case:first-child{border-top:0}
  .nb-cases-4{grid-template-columns:minmax(0,1fr)}
  .nb-cases-4 .nb-case,.nb-cases-4 .nb-case:nth-child(odd),.nb-cases-4 .nb-case:nth-child(even){padding:28px 0 36px; border-left:0; border-top:1px solid var(--nb-rule-d)}
  .nb-cases-4 .nb-case:first-child{border-top:0}
  .nb-pull p{font-size:25px}
  .nb-consent-in{flex-direction:column; align-items:stretch; gap:12px}
  .nb-consent-b{flex-direction:column}
  .nb-consent .nb-btn{width:100%}
  .nb-work{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; margin-top:30px}
  .nb-work-5 .nb-work-f:first-child{grid-column:1 / -1; grid-row:auto}
  .nb-work-5 .nb-work-f:first-child img{height:auto; min-height:0; aspect-ratio:3/2}
  .nb-work-1{grid-template-columns:minmax(0,1fr)}
  .nb-site .nb-work-f figcaption{font-size:16px}
  .nb-linkrow{flex-direction:column; gap:0}
  .nb-linkrow a{display:flex}
  .nb-facts{grid-template-columns:minmax(0,1fr)}
  .nb-article h2{font-size:28px}
  .nb-article p,.nb-article li{font-size:17px}
  .nb-postlist a{grid-template-columns:minmax(0,1fr) 22px}
  .nb-postlist .nb-mono{grid-column:1; padding-top:0}
  .nb-postlist b{grid-column:1; font-size:21px}
  .nb-postlist span.nb-pd{grid-column:1}
  .nb-postlist i{grid-column:2; grid-row:1 / span 3; align-self:center}
}

/* Phone/email/WhatsApp strip: four columns only when the email address fits (it overlapped WhatsApp from ~641px to ~1430px) */
.nb-direct{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
/* MOT order form (V2 /mot) */
.nb-help{display:block; font-size:14px; line-height:1.5; color:var(--nb-muted-d); margin-top:2px}
.nb-opt{color:var(--nb-muted-d); font-weight:400; text-transform:none}

.nb-alias{display:block; position:relative; top:-1px}

/* ---------------------------------------------------------------------------------------------
   CALMER READING LAYER (22 Oct 2026). Norton: "a little busy... needs to be easy to read and less
   cramped". Same design language, colours and type; this layer only removes competing labels,
   adds space and makes body text larger and higher contrast. Loaded after site.css and pages.css;
   build with NB_CALM=0 to see the site without it.
   --------------------------------------------------------------------------------------------- */

/* 1. Fewer labels: one teletext label per section, no secondary metadata */
.nb-strip{display:none}                                   /* the BELPER // DERBYSHIRE // UK line above the menu */
.nb-band-r{display:none}                                  /* right-hand section metadata, e.g. QUEUE // 9 OPEN */
.nb-cursor{display:none}                                  /* blinking cursor */
.nb-label > span:nth-child(3):not(.nb-cursor){display:none}  /* hero label keeps page number + label only */
.nb-queue .t{display:none}                                /* timestamps in the queue list */
.nb-queue li{grid-template-columns:minmax(0,1fr) auto}
.nb-tool-n,.nb-rlist-n{display:none}                      /* T01-style numbering on lists that are not sequences */
.nb-tools a{grid-template-columns:minmax(0,1fr) 28px}
.nb-tools .nb-tool-h,.nb-tools .nb-tool-d{grid-column:1}
.nb-tools .nb-tool-a{grid-column:2}
.nb-rlist-i{grid-template-columns:minmax(0,1fr) 28px}
.nb-rlist-h,.nb-rlist-d{grid-column:1}
.nb-rlist-a{grid-column:2}
.nb-proj a{grid-template-rows:1fr}
.nb-proj .nb-tool-a{grid-row:1; grid-column:2; align-self:end}
.nb-proj-h{grid-column:1; grid-row:1}

/* 2. More room between and inside things */
.nb-sec{padding-block:128px 144px}
.nb-band{margin-bottom:64px}
.nb-h2{margin-bottom:36px; line-height:1.02}
.nb-phero{padding-block:64px 104px}
.nb-ph1{line-height:.95}
.nb-phero .nb-lead{margin-top:32px}
.nb-split{column-gap:48px}
.nb-tools{column-gap:80px}
.nb-tools a{padding:30px 0 32px; row-gap:8px}
.nb-rlist{column-gap:80px}
.nb-rlist-i{padding:30px 0 32px; row-gap:8px}
.nb-queue li{padding:18px 0}
.nb-aside li{padding:16px 0; gap:20px}
.nb-case{padding:40px 40px 48px}
.nb-faq-list summary{padding:26px 0}
.nb-postlist a{padding:26px 0}
.nb-work{gap:40px 28px}
.nb-facts li{padding:24px 24px 24px 0}
.nb-line{margin-top:72px}
.nb-stop{padding-top:68px}

/* 3. Easier reading: bigger, higher-contrast body text and comfortable line lengths */
.nb-lead{line-height:1.55}
.nb-col > p,.nb-split-b > p{font-size:20px; line-height:1.7; margin-bottom:22px; max-width:38em}
.nb-tool-d,.nb-rlist-d,.nb-postlist span.nb-pd{font-size:18px; line-height:1.6}
.nb-dark .nb-tool-d,.nb-ink .nb-tool-d,.nb-dark .nb-rlist-d,.nb-ink .nb-rlist-d{color:var(--nb-soft-d)}
.nb-case-dl dd{font-size:17px; line-height:1.6}
.nb-stop ul,.nb-stop-p{font-size:18px; line-height:1.7}
.nb-faq-list summary{font-size:22px}
.nb-faq-list p{font-size:19px; line-height:1.7}
.nb-aside li{font-size:18px}
.nb-article p,.nb-article li{font-size:20px; line-height:1.75}
.nb-article p{margin-bottom:22px}
.nb-article h2{margin-top:64px}

/* Phones */
@container site (max-width: 640px){
  .nb-sec{padding-block:80px 88px}
  .nb-band{margin-bottom:40px}
  .nb-wrap{padding-inline:24px}
  .nb-phero{padding-block:44px 72px}
  .nb-col > p,.nb-split-b > p,.nb-article p,.nb-article li{font-size:18px; line-height:1.7}
  .nb-tool-d,.nb-rlist-d,.nb-postlist span.nb-pd{font-size:17px}
  .nb-tools a,.nb-rlist-i{padding:24px 0 26px}
  .nb-case{padding:32px 0 36px}
  .nb-faq-list summary{font-size:20px; padding:22px 0}
}

/* Client videos */
.nb-reels{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:28px; margin-top:44px}
.nb-reel{margin:0; min-width:0}
.nb-reel video{display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:#000; border-radius:2px}
.nb-reel-wide{grid-column:span 2} .nb-reel-wide video{aspect-ratio:16/9}
@container site (max-width: 640px){ .nb-reel-wide{grid-column:auto} }
.nb-reel figcaption{padding-top:12px; font-size:16px; line-height:1.4; color:var(--body)}
.nb-reel figcaption .nb-mono{display:block; margin-bottom:3px; color:var(--accent); font-weight:700}

/* ---------------------------------------------------------------------------------------------
   TYPE AND ALIGNMENT (28 Oct 2026, Norton: "blocks that look orderly", headings level with the text beside them)
   --------------------------------------------------------------------------------------------- */
/* Running text is justified, hyphenated so word spacing stays even */
/* 28 Oct 2026: only wide running paragraphs are justified. Narrow columns, lists, cards and steps stay left-aligned,
   because justifying a short line opens big gaps between words. */
.nb-site :is(.nb-lead, .nb-col > p, .nb-split-b > p, .nb-article p, .nb-faq-list p, .nb-relief-c, .nb-hero-sub, .nb-nort-copy p, .nb-proj-intro, .nb-under p){text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:7 3 3}
/* Display type, labels and interface text are never justified */
.nb-site :is(h1, h2, h3, h4, .nb-h2, .nb-ph1, .nb-result, .nb-result-l, .nb-label, .nb-mono, .nb-band, .nb-chip, .nb-btn, .nb-arrow, .nb-crumbs, .nb-byline,
  .nb-updated, .nb-ctas, .nb-form-note, .nb-form-err, .nb-proof, .nb-phero-note, .nb-success-links, .nb-work-more, .nb-tools-next, .nb-queue li, .nb-queue .m,
  .nb-proj-h, .nb-pkg-h, .nb-pkg-sit, .nb-pkg-price, .nb-facts li, .nb-aside li, .nb-direct li, .nb-legal p, .nb-foot-statement, .nb-consent-t, .nb-nav a, figcaption, summary,
  .nb-tool-h, .nb-rlist-h, .nb-case-who, .nb-postlist b, .nb-trust *, .nb-map *){text-align:left; hyphens:manual; -webkit-hyphens:manual}
.nb-footer *{text-align:left}

/* Two-column sections: everything starts on the same line as the heading */
.nb-site :is(.nb-split, .nb-tools-head, .nb-proj-head, .nb-faq, .nb-day, .nb-nort, .nb-problem, .nb-turnup, .nb-90, .nb-under){align-items:start}
.nb-site :is(.nb-split-b, .nb-tools-head .nb-lead, .nb-proj-intro, .nb-faq-list) > :first-child{margin-top:0}
.nb-site :is(.nb-split-b, .nb-tools-head .nb-lead, .nb-proj-intro){padding-top:6px}

/* Result cards: words get a size made for phrases, and the three cards line up row by row */
.nb-result-words{font-size:clamp(34px,3.1vw,44px)!important; line-height:1!important; min-height:3em; text-wrap:balance}
.nb-result-l{min-height:3.4em}
.nb-result-t{min-height:2.8em}
.nb-cases{align-items:stretch}

/* Lists inside the stage line read as short justified blocks */
.nb-stop ul li{margin-bottom:6px}
@container site (max-width: 640px){ .nb-result-words,.nb-result-l,.nb-result-t{min-height:0} .nb-site :is(.nb-split-b, .nb-tools-head .nb-lead, .nb-proj-intro){padding-top:0} }

/* Client websites: framed screenshots that open the live site */
.nb-sites{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:40px 32px; margin-top:48px}
.nb-site-card{margin:0; min-width:0}
.nb-site-card > a{display:block; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 18px 40px -24px rgba(0,0,0,.45); transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s}
.nb-site-card > a:hover{transform:translateY(-6px); box-shadow:0 28px 50px -24px rgba(0,0,0,.55)}
.nb-site-card > a:focus-visible{outline:3px solid var(--nb-yellow); outline-offset:4px}
.nb-site-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#eceae4; border-bottom:1px solid rgba(0,0,0,.08)}
.nb-site-bar i{width:9px; height:9px; border-radius:50%; background:#cfcbc2}
.nb-site-bar span{margin-left:10px; font-family:var(--nb-mono); font-size:11px; color:#6b6f75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nb-site-card img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top}
.nb-site-card figcaption{padding-top:14px; font-size:16px; line-height:1.45; color:var(--body)}
.nb-site-card figcaption .nb-mono{display:block; margin-bottom:4px; color:var(--accent); font-weight:700}
.nb-site-go{display:inline-block; margin-top:6px; color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1px solid currentColor}

/* Image hover: a slow, slight zoom on work photos */
.nb-work-f{overflow:hidden}
.nb-work-f img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.nb-work-f:hover img{transform:scale(1.035)}

/* Scroll transitions: only when JavaScript has switched them on and the visitor hasn't asked for reduced motion */
.nb-anim .nb-rv{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rv-d,0ms)}
.nb-anim .nb-rv.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .nb-anim .nb-rv{opacity:1; transform:none; transition:none} .nb-site-card > a,.nb-work-f img{transition:none} }

/* Hero photo: keep the subject's head in frame (crop from the top, not the middle) */
.nb-hero-photo img{object-position:62% 0% !important}
@container site (max-width: 640px){ .nb-hero-photo img{aspect-ratio:4/5 !important} }

/* More motion (28 Oct 2026). All of it is skipped for reduced motion. */
@keyframes nb-up{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none}}
@keyframes nb-fade{from{opacity:0} to{opacity:1}}
@keyframes nb-settle{from{opacity:0; transform:scale(1.06)} to{opacity:1; transform:none}}
/* hero only: movement without fading, so the first screen is fully readable at rest (28 Oct 2026 review) */
@keyframes nb-rise{from{transform:translateY(14px)} to{transform:none}}
@keyframes nb-zoom{from{transform:scale(1.04)} to{transform:none}}
/* hero entrance on load */
.nb-anim .nb-hero .nb-h1a,.nb-anim .nb-hero .nb-h1b,.nb-anim .nb-phero .nb-ph1{display:block; animation:nb-rise .9s cubic-bezier(.2,.7,.2,1) both}
.nb-anim .nb-hero .nb-h1b{animation-delay:.15s}
.nb-anim .nb-hero .nb-lead,.nb-anim .nb-phero .nb-lead{animation:nb-rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
.nb-anim .nb-hero .nb-ctas,.nb-anim .nb-phero .nb-ctas,.nb-anim .nb-hero .nb-proof{animation:nb-rise .9s .25s cubic-bezier(.2,.7,.2,1) both}
.nb-anim .nb-hero-photo{overflow:hidden}
.nb-anim .nb-hero-photo img{animation:nb-zoom 1.4s .1s cubic-bezier(.2,.7,.2,1) both}
/* hero label: no entrance, it's visible from the first frame */
/* section rule draws across as it arrives */
.nb-anim .nb-band.nb-rv{opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.nb-anim .nb-band.nb-rv.is-in{clip-path:inset(0 0 0 0)}
/* photos wipe in */
.nb-anim figure.nb-rv:not(.nb-site-card) img{clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1)}
.nb-anim figure.nb-rv.is-in img{clip-path:inset(0 0 0 0)}
/* stage nodes pop in */
.nb-anim .nb-stop.nb-rv .nb-node{transform:scale(0); transition:transform .6s .35s cubic-bezier(.3,1.6,.5,1)}
.nb-anim .nb-stop.nb-rv.is-in .nb-node{transform:scale(1)}
/* buttons and links respond */
.nb-btn{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease}
.nb-btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.nb-arrow{transition:letter-spacing .3s ease}
.nb-arrow:hover{letter-spacing:.02em}
.nb-nav a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 2px; transition:background-size .3s ease}
.nb-nav a:hover{background-size:100% 2px}
.nb-reel video{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nb-reel:hover video{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){
  .nb-anim *,.nb-anim *::before,.nb-anim *::after{animation:none !important; transition:none !important}
  .nb-anim .nb-band.nb-rv,.nb-anim figure.nb-rv img{clip-path:none !important}
  .nb-anim .nb-stop.nb-rv .nb-node{transform:none !important}
}

.nb-site .nb-site-card figcaption{display:block !important; text-align:left}
.nb-site-card figcaption .nb-mono{display:block !important}
.nb-site-card .nb-site-go{display:block; width:max-content}

/* hire vs Found & Filmed comparison table (28 Oct 2026) */
.nb-cmp-wrap{margin-top:40px; max-width:980px}
.nb-cmp{width:100%; border-collapse:collapse; font-size:18px; line-height:1.4; text-align:left}
.nb-cmp th,.nb-cmp td{padding:16px 14px; border-bottom:1px solid rgba(127,127,127,.25); vertical-align:middle}
.nb-cmp thead th{font-family:var(--nb-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; text-align:center; padding-bottom:14px}
.nb-cmp tbody th,.nb-cmp tfoot th{font-weight:500; text-align:left}
.nb-cmp td{text-align:center; width:22%}
.nb-cmp .nb-cmp-us{background:rgba(77,184,140,.12)}
.nb-cmp thead .nb-cmp-us{background:var(--nb-green); color:var(--nb-ink); font-weight:700; border-radius:6px 6px 0 0}
.nb-cmp tbody td:last-child{background:rgba(77,184,140,.12)}
.nb-cmp-y span[aria-hidden]{color:var(--nb-green-ink); font-size:26px; font-weight:700}
.nb-cmp-n span[aria-hidden]{color:var(--nb-red); font-size:24px; font-weight:700}
.nb-cmp-m{font-family:var(--nb-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--nb-muted)}
.nb-cmp tfoot th,.nb-cmp tfoot td{border-bottom:0; padding-top:20px; font-size:16px}
.nb-cmp tfoot td{color:var(--nb-muted)}
.nb-cmp tfoot td.nb-cmp-us{color:inherit; border-radius:0 0 6px 6px}
.nb-cmp tfoot b{font-size:26px; font-weight:800; display:block}
.nb-dark .nb-cmp-y span[aria-hidden]{color:var(--nb-green)}
.nb-dark .nb-cmp-m,.nb-dark .nb-cmp tfoot td{color:var(--nb-muted-d)}
.nb-cmp-after{margin-top:28px; max-width:760px; font-size:20px; font-weight:600}
@media (max-width:640px){
  .nb-cmp{font-size:15px}
  .nb-cmp th,.nb-cmp td{padding:12px 6px}
  .nb-cmp thead th{font-size:10px; letter-spacing:.02em}
  .nb-cmp td{width:24%}
  .nb-cmp-y span[aria-hidden],.nb-cmp-n span[aria-hidden]{font-size:20px}
  .nb-cmp-m{font-size:10px}
  .nb-cmp tfoot b{font-size:20px}
  .nb-cmp tfoot th,.nb-cmp tfoot td{font-size:13px}
}
/* year-one cost of a full-time hire, under the comparison table */
.nb-cost{margin-top:56px; max-width:980px}
.nb-cost .nb-h3{margin-bottom:20px}
.nb-cost-t{width:100%; border-collapse:collapse; font-size:18px; line-height:1.4}
.nb-cost-t th,.nb-cost-t td{padding:14px 14px; border-bottom:1px solid rgba(127,127,127,.25); text-align:left; font-weight:400; vertical-align:top}
.nb-cost-t td{text-align:right; white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums}
.nb-cost-t tr.sub th,.nb-cost-t tr.sub td{padding-top:4px; color:var(--nb-muted); font-size:15px; font-style:italic; font-weight:400}
.nb-cost-t tr.sub th{padding-left:34px}
.nb-cost-t tr:has(+ tr.sub) th,.nb-cost-t tr:has(+ tr.sub) td{border-bottom:0}
.nb-cost-t .nb-cost-tot th,.nb-cost-t .nb-cost-tot td{font-weight:800; font-size:22px; border-bottom:2px solid currentColor; padding-top:20px}
.nb-cost-t .nb-cost-tot td{color:var(--nb-red)}
.nb-cost-t .nb-cost-us th,.nb-cost-t .nb-cost-us td{font-weight:800; font-size:22px; background:rgba(77,184,140,.12); border-bottom:0; padding-top:18px; padding-bottom:18px}
.nb-cost-t .nb-cost-us td{color:var(--nb-green-ink)}
.nb-cost-t td span{display:block; font-size:13px; font-weight:500; color:var(--nb-muted); white-space:normal}
.nb-dark .nb-cost-t tr.sub th,.nb-dark .nb-cost-t tr.sub td,.nb-dark .nb-cost-t td span{color:var(--nb-muted-d)}
.nb-dark .nb-cost-t .nb-cost-us td{color:var(--nb-green)}
.nb-cost-note{margin-top:18px; font-size:14px; line-height:1.6; color:var(--nb-muted); max-width:760px}
.nb-dark .nb-cost-note{color:var(--nb-muted-d)}
.nb-cmp tfoot td b{font-size:24px}
@media (max-width:640px){
  .nb-cost-t{font-size:15px}
  .nb-cost-t th,.nb-cost-t td{padding:12px 6px}
  .nb-cost-t tr.sub th{padding-left:16px}
  .nb-cost-t .nb-cost-tot th,.nb-cost-t .nb-cost-tot td,.nb-cost-t .nb-cost-us th,.nb-cost-t .nb-cost-us td{font-size:17px}
  .nb-cost-t td span{font-size:11px}
  .nb-cmp tfoot td b{font-size:18px}
}

/* audit F11: remove the browser's default 8px page margin (the white frame round the design) */
html,body{margin:0; padding:0}
/* cookie settings: the Fathom objection box only shows when the banner is reopened from "Cookie settings" */
.nb-consent-stats{display:none; align-items:center; gap:10px; font-size:15px; margin:4px 0 10px}
.nb-consent.is-settings .nb-consent-stats{display:flex}
.nb-consent-stats input{width:20px; height:20px; accent-color:var(--nb-green); flex:none}
.nb-consent.is-settings .nb-consent-in{flex-wrap:wrap}
.nb-consent.is-settings .nb-consent-t{flex:1 1 60%}
.nb-consent.is-settings .nb-consent-stats{flex-basis:100%; order:3}
.nb-consent.is-settings .nb-consent-b{order:2}

/* ---- 28 Oct 2026 review ---- */
/* nav: the MOT is the button; Book a call sits in the menu */
.nb-nav .nb-nav-call{color:var(--nb-green)}
@container site (max-width: 560px){ .nb-cta-l{display:none} }
/* page hero short line (e.g. /mot: six checks, 48 hours, £295) */
.nb-phero-sub{margin:20px 0 0; font-size:24px; font-weight:700; color:var(--nb-green); line-height:1.3}
.nb-hero-hire{margin:22px 0 0; font-size:16px; line-height:1.55; color:var(--nb-soft-d); max-width:34em; text-align:left}
.nb-hero-hire a{color:var(--nb-green); font-weight:700; white-space:nowrap}
/* first screen on phones: smaller headline, button straight after it */
@container site (max-width: 480px){
  .nb-h1a{font-size:38px}
  .nb-ph1{font-size:34px; line-height:.95}
  .nb-hero{padding-top:20px}
  .nb-phero{padding-top:22px}
  .nb-hero-copy{display:flex; flex-direction:column}
  .nb-hero-copy .nb-label{order:0} .nb-hero-copy .nb-hero-h{order:1} .nb-hero-copy .nb-ctas{order:2; margin-top:18px} .nb-hero-copy .nb-hero-sub{order:3; margin:22px 0 0} .nb-hero-copy .nb-proof{order:4} .nb-hero-copy .nb-hero-hire{order:5}
  .nb-hero-copy .nb-ctas .nb-btn + .nb-btn,.nb-phero .nb-ctas .nb-btn + .nb-btn{min-height:44px}
  .nb-phero-copy{display:flex; flex-direction:column}
  .nb-phero-copy > *{order:1} .nb-phero .nb-ctas{order:2; margin-top:18px} .nb-phero .nb-lead{order:3; margin-top:22px} .nb-phero .nb-phero-note,.nb-phero .nb-updated,.nb-phero .nb-byline{order:4}
  .nb-phero-sub{font-size:19px; margin-top:14px}
  .nb-ctas{gap:10px}
}
/* cookie banner on phones: a slim bar, same two choices side by side */
@container site (max-width: 640px){
  .nb-consent:not(.is-settings) .nb-consent-in{flex-direction:column; align-items:stretch; gap:8px; padding-block:10px}
  .nb-consent:not(.is-settings) .nb-consent-t{font-size:14px; line-height:1.3}
  .nb-consent:not(.is-settings) .nb-c-long{display:none}
  .nb-consent:not(.is-settings) .nb-c-short{display:inline}
  .nb-consent:not(.is-settings) .nb-consent-b{flex-direction:row; gap:8px}
  .nb-consent:not(.is-settings) .nb-btn{flex:1; width:auto; min-height:40px; padding:0 8px; font-size:12px}
}
/* "Try it now" ChatGPT question builder */
.nb-aitest{margin-top:28px; max-width:880px}
.nb-aitest-in{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.nb-aitest-k{margin:26px 0 8px; font-size:16px; color:var(--nb-muted)}
.nb-aitest-q{margin:0; padding:20px 22px; border:2px solid var(--nb-green); border-radius:6px; font-size:22px; font-weight:600; line-height:1.4; text-align:left; background:rgba(77,184,140,.07); user-select:all}
.nb-aitest-acts{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:16px}
.nb-aitest-plx{font-size:15px; color:inherit}
.nb-aitest-status{font-size:14px; color:var(--nb-green-ink); font-weight:600}
.nb-dark .nb-aitest-status{color:var(--nb-green)}
.nb-aitest-after{margin-top:24px; padding-top:20px; border-top:1px solid rgba(127,127,127,.3)}
.nb-aitest-after p{margin:0 0 16px; font-size:18px; max-width:40em}
@container site (max-width: 640px){
  .nb-aitest-in{grid-template-columns:1fr}
  .nb-aitest-q{font-size:18px; padding:16px}
  .nb-aitest-acts .nb-btn{flex:1 1 100%}
}
/* Ginger Butchers proof block */
.nb-gbproof .nb-split{align-items:center}
.nb-gb-photo{margin:0} .nb-gb-photo img{width:100%; height:auto; display:block}
/* MOT order: card or invoice */
.nb-pay{border:0; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:10px}
.nb-pay legend{font-weight:700; margin-bottom:8px}
.nb-pay label{display:flex; gap:10px; align-items:flex-start; font-weight:400}
.nb-pay input{width:20px; height:20px; margin-top:3px; accent-color:var(--nb-green); flex:none}
.nb-pay-inv{font-size:15px; opacity:.85}

.nb-c-short{display:none}

/* header: keep every item on one line; the long button text and the menu's Book a call only show when there's room */
.nb-nav a,.nb-bar-cta,.nb-dd-top{white-space:nowrap}
@container site (min-width: 641px) and (max-width: 1100px){ .nb-nav .nb-nav-home{display:none} }
@container site (min-width: 641px) and (max-width: 1000px){ .nb-dd-top{font-size:12px; letter-spacing:.05em} }
@container site (max-width: 1240px){ .nb-cta-l{display:none} }
@container site (min-width: 641px) and (max-width: 1180px){ .nb-nav .nb-nav-call{display:none} }
@container site (min-width: 641px) and (max-width: 1000px){ .nb-nav{gap:18px} .nb-nav a{font-size:12px; letter-spacing:.05em} }
/* test tool inputs on light sections */
.nb-paper .nb-aitest .nb-field label,.nb-white .nb-aitest .nb-field label{color:var(--nb-muted)}
.nb-paper .nb-aitest .nb-field input,.nb-white .nb-aitest .nb-field input{color:var(--nb-text); border-bottom-color:rgba(15,16,18,.45); font-size:20px}
.nb-aitest .nb-field input::placeholder{color:rgba(127,127,127,.75)}
.nb-gbproof .nb-gb-photo{grid-column:1 / span 7}
.nb-gbproof .nb-split-b{grid-column:9 / span 4}
@container site (max-width: 640px){ .nb-gbproof .nb-gb-photo,.nb-gbproof .nb-split-b{grid-column:1} }
.nb-gbproof .nb-lead{text-align:left}

/* ---- navigation rework (28 Oct 2026) ---- */
.nb-nav{align-items:center}
.nb-dd-top{font:inherit; font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--nb-soft-d); background:none; border:0; border-bottom:2px solid transparent; padding:8px 0; cursor:pointer}
.nb-dd-top:hover,.nb-dd.is-open .nb-dd-top,.nb-dd-top[data-current]{color:#fff; border-bottom-color:var(--nb-green)}
.nb-dd-menu{min-width:360px; padding:10px 0; left:-24px; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.nb-dd.is-open .nb-dd-menu{display:block}
.nb-nav .nb-dd-menu a{display:flex; flex-direction:column; gap:3px; padding:12px 24px; border-bottom:1px solid var(--nb-rule-d); text-transform:none; letter-spacing:0; white-space:normal}
.nb-nav .nb-dd-menu a b{font-size:15px; font-weight:700; color:#fff; letter-spacing:.02em}
.nb-nav .nb-dd-menu a span{font-size:13px; font-weight:400; color:var(--nb-muted-d); line-height:1.35}
.nb-nav .nb-dd-menu a:hover{background:rgba(77,184,140,.10)} .nb-nav .nb-dd-menu a:hover b{color:var(--nb-green)}
.nb-nav .nb-dd-all a{font-size:13px; color:var(--nb-green); font-weight:700; border-bottom:0}
.nb-nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--nb-green)}
/* phones: the menu lists everything, services included, nothing hidden behind a second tap */
@container site (max-width: 640px){
  .nb-header.open .nb-nav{max-height:calc(100vh - 80px); overflow-y:auto}
  .nb-header.open .nb-dd{display:block}
  .nb-header.open .nb-dd-top{display:block; width:100%; text-align:left; font-size:17px; padding:14px 0; border-bottom:1px solid var(--nb-rule-d); pointer-events:none; color:var(--nb-green)}
  .nb-header.open .nb-dd-top::after{content:none}
  .nb-header.open .nb-dd-menu{display:block; position:static; min-width:0; box-shadow:none; border:0; padding:0 0 6px 14px; background:none}
  .nb-header.open .nb-nav .nb-dd-menu a{padding:10px 0}
  .nb-header.open .nb-nav .nb-dd-menu a b{font-size:16px}
}
/* big display lines are never justified (the "You know all of that needs doing" gaps) */
.nb-site :is(.nb-relief-a, .nb-relief-b, .nb-rating, .nb-success-h, .nb-hours-h, .nb-subline, .nb-pull p, .nb-under p, .nb-pkg-sit, .nb-phero-sub,
  .nb-hero-hire, .nb-aitest-q, .nb-aitest-k, .nb-cmp-after, .nb-90-k, .nb-result-t, .nb-dd-menu *, .nb-cost-note, .nb-gbproof p, .nb-nort-photo figcaption){text-align:left; hyphens:manual; -webkit-hyphens:manual}

@container site (max-width: 640px){ .nb-site :is(.nb-lead, .nb-col > p, .nb-split-b > p, .nb-article p, .nb-faq-list p, .nb-relief-c, .nb-hero-sub, .nb-nort-copy p, .nb-proj-intro, .nb-under p){text-align:left; hyphens:manual; -webkit-hyphens:manual} }

/* page hero photo: copy left, real work right; under the copy on phones */
.nb-phero-has-img .nb-phero-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px 56px; align-items:center}
.nb-phero-has-img .nb-ph1{font-size:68px}
.nb-phero-fig{margin:0}
.nb-phero-fig img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 30%; border-radius:2px; box-shadow:0 24px 60px rgba(0,0,0,.35)}
.nb-phero-fig img[src*="/img/sites/"]{object-position:50% 0; aspect-ratio:16/10}
.nb-phero-fig figcaption{margin-top:10px; font-size:11px; letter-spacing:.06em; color:var(--nb-muted-d)}
.nb-anim .nb-phero-fig img{animation:nb-zoom 1.4s .1s cubic-bezier(.2,.7,.2,1) both}
@container site (max-width: 900px){
  .nb-phero-has-img .nb-phero-grid{grid-template-columns:minmax(0,1fr)}
  .nb-phero-has-img .nb-ph1{font-size:56px}
  .nb-phero-fig{max-width:640px}
}
@container site (max-width: 480px){ .nb-phero-has-img .nb-ph1{font-size:34px} }
@container site (max-width: 640px){
  .nb-header.open .nb-nav > a{display:block; text-align:left; width:100%}
  .nb-header.open .nb-nav .nb-nav-call{color:var(--nb-green)}
  .nb-phero .nb-updated{margin-top:18px}
}

/* homepage offers: the custom option, full width under the three packages */
.nb-pkg-custom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; margin-top:36px; padding:28px 32px; background:var(--nb-paper); border-left:6px solid var(--nb-green)}
.nb-pkg-custom-t{flex:1 1 480px; min-width:0}
.nb-pkg-custom .nb-pkg-k{margin-top:0}
.nb-pkg-custom-h{font-weight:800; font-stretch:82%; text-transform:uppercase; font-size:30px; line-height:1; margin:0 0 12px; text-wrap:balance}
.nb-pkg-custom .nb-pkg-role{margin:0; max-width:62ch}
.nb-pkg-custom .nb-btn-line{color:var(--nb-text); border-color:var(--nb-text)}
@container site (max-width: 640px){
  .nb-pkg-custom{margin-top:24px; padding:22px 18px}
  .nb-pkg-custom-h{font-size:24px}
}

/* homepage projects: the phones image above the list */
.nb-proj-fig{margin:36px 0 8px}
.nb-proj-fig img{display:block; width:100%; height:auto; border-radius:2px}
.nb-proj-fig figcaption{margin-top:10px; color:var(--nb-muted)}