@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700.ttf') format('truetype')}

:root {
  --brand-navy: #252333;
  --brand-indigo: #7850AE;
  --brand-lavender: #A78BFA;
  --brand-off-white: #F5F3F8;
  --brand-stone: #E7E1EF;
  --brand-white: #FFFFFF;
  --site-font: Manrope, Arial, Helvetica, sans-serif;
}
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--brand-navy); background: var(--brand-off-white); font-family: var(--site-font); font-size: 16px; }
*, *::before, *::after { box-sizing: border-box; }
main { min-width: 0; }
img { max-width: 100%; }
[id] { scroll-margin-top: 24px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brand-indigo); outline-offset: 5px; }
.site-skip-link { position: absolute; left: 16px; top: -100px; padding: 12px 20px; background: white; color: var(--brand-navy); z-index: 100; }
.site-skip-link:focus { top: 12px; }
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.site-cookie-banner {
  position: fixed;
  z-index: 1000;
  /* Keep this late-revealed overlay on stable system-font metrics. A Manrope
     swap changes its mobile height and is recorded as a layout shift. */
  font-family: Arial, Helvetica, sans-serif;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 18px max(24px, calc((100vw - 1160px) / 2));
  color: var(--brand-navy);
  background: rgba(255,255,255,.98);
  border-top: 1px solid rgba(167,139,250,.48);
  box-shadow: 0 -12px 36px rgba(37,35,51,.12);
}
.site-cookie-banner[hidden] { display: none; }
.site-cookie-copy h2 { margin: 0 0 5px; font-size: 1.1rem; line-height: 1.25; }
.site-cookie-copy p { margin: 0; font-size: .9rem; line-height: 1.55; }
.site-cookie-copy a { color: var(--brand-indigo); font-weight: 700; }
.site-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.site-cookie-button {
  min-height: 44px;
  padding: 10px 16px;
  font: 700 .88rem/1.2 Arial, Helvetica, sans-serif;
  border: 1px solid var(--brand-indigo);
  border-radius: 11px;
  cursor: pointer;
}
.site-cookie-accept { color: var(--brand-navy); background: #e7dafa; box-shadow: 0 7px 18px rgba(120,80,174,.16); }
.site-cookie-reject { color: var(--brand-navy); background: var(--brand-white); }
.site-cookie-button:is(:hover,:focus-visible) { background: #f2ebfb; }
.site-cookie-settings {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  font: inherit;
  cursor: pointer;
}
@media(max-width:700px) {
  .site-cookie-banner { grid-template-columns: 1fr; gap: 16px; padding: 16px 14px; }
  .site-cookie-actions { justify-content: stretch; }
  .site-cookie-button { flex: 1 1 150px; }
}

/* Shared Insights CTA colours: keep article link rules from overriding buttons. */
.page-content .nlg-cta a.nlg-btn-primary,
.page-content .nl-insights a.nl-button-primary,
.page-content .nl-article .nl-service-cta > a {
  color: var(--brand-white);
  background: var(--brand-navy);
  border: 1px solid var(--brand-navy);
}
.page-content .nlg-cta a.nlg-btn-secondary,
.page-content .nl-insights a.nl-button-secondary {
  color: var(--brand-navy);
  background: var(--brand-white);
  border: 1px solid var(--brand-navy);
}
.page-content .nlg-cta a.nlg-btn-primary:is(:hover, :focus-visible, :active), .page-content .nl-insights a.nl-button-primary:is(:hover, :focus-visible, :active), .page-content .nl-article .nl-service-cta > a:is(:hover, :focus-visible, :active) {
  color: var(--brand-white);
  background: #263454;
  border-color: #263454;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content .nlg-cta a.nlg-btn-secondary:is(:hover, :focus-visible, :active), .page-content .nl-insights a.nl-button-secondary:is(:hover, :focus-visible, :active) {
  color: var(--brand-navy);
  background: var(--brand-off-white);
  border-color: var(--brand-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content .nlg-cta a.nlg-btn:focus-visible,
.page-content .nl-insights a.nl-button:focus-visible,
.page-content .nl-article .nl-service-cta > a:focus-visible {
  outline: 3px solid var(--brand-navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--brand-white);
}

/* Shared opening-section typography. The ID and important declarations override
   legacy page-specific sizes, including the homepage's mobile overrides. */
:root {
  --site-h1-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  --site-intro-colour: var(--brand-lavender);
}
body:not(.page-home) #main-content h1 {
  font-size: var(--site-h1-size) !important;
  font-weight: 680 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
}

/* Each page's intro is the paragraph directly before its H1. Keep section
   labels, breadcrumbs and card labels independent of this opening style. */
body:not(.page-home) #main-content p:has(+ h1),
body:not(.page-home) #main-content .nl-h1-service-line {
  color: var(--site-intro-colour) !important;
  font-weight: 800 !important;
  opacity: 1;
}
body:not(.page-home) #main-content p:has(+ h1) {
  margin-top: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* Align both opening columns at their top edges. Existing breakpoints still
   stack the columns on mobile; remove only the visual's vertical offsets. */
#main-content [class*="-hero-grid"] {
  align-items: start !important;
}
#main-content [class*="-hero-grid"] > * {
  align-self: start !important;
  margin-top: 0 !important;
}
#main-content [class*="-hero-grid"] > [class*="-hero-visual"] {
  transform: none !important;
}

/* Portfolio hero refresh */
.nloes-hero-grid,.nlcs-hero-grid,.nlsep-hero-grid,.nlpil-hero-grid,.nlnafi-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr)!important;
  gap:38px!important;
  align-items:center!important;
}
.nloes-hero-grid::after,.nlcs-hero-grid::after,.nlsep-hero-grid::after,.nlpil-hero-grid::after,.nlnafi-hero-grid::after{
  content:"";
  grid-column:2;
  grid-row:1;
  display:block;
  width:100%;
  min-height:360px;
  border-radius:24px;
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
}
.nloes-hero-grid::after{
  background-image:url('https://s.wordpress.com/mshots/v1/https%3A%2F%2Foxfordenergyservices.co.uk%2F?w=1400');
  border:1px solid rgba(167,139,250,.28);
  box-shadow:0 18px 45px rgba(37,35,51,.12);
}
.nlcs-hero-grid::after{
  background-image:url('https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.uncoverbritain.com%2F?w=1400');
  border:1px solid rgba(167,139,250,.28);
  box-shadow:0 18px 45px rgba(37,35,51,.12);
}
.nlsep-hero-grid::after{
  background-image:url('https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.susanedwardspaintings.com%2F?w=1400');
  border:1px solid rgba(167,139,250,.28);
  box-shadow:0 18px 45px rgba(37,35,51,.12);
}
.nloes-facts,.nlcs-facts,.nlsep-facts,.nlpil-facts,.nlnafi-facts{
  grid-column:1/-1!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important;
  margin:8px 0 -1px!important;
  padding:20px 24px!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:none!important;
  background:rgba(255,255,255,.72)!important;
}
.nloes-facts dl,.nlcs-facts dl,.nlsep-facts dl,.nlpil-facts dl,.nlnafi-facts dl{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:0!important;
}
.nloes-facts dl>div,.nlcs-facts dl>div,.nlsep-facts dl>div,.nlpil-facts dl>div,.nlnafi-facts dl>div{
  padding:4px 18px!important;
  border:0!important;
  border-right:1px solid rgba(167,139,250,.24)!important;
}
.nloes-facts dl>div:last-child,.nlcs-facts dl>div:last-child,.nlsep-facts dl>div:last-child,.nlpil-facts dl>div:last-child,.nlnafi-facts dl>div:last-child{border-right:0!important}

/* Stylised package-family laptop treatment for Pilio and Nafi. */
.nlpil-hero-grid,.nlnafi-hero-grid{position:relative}
.nlpil-hero-grid::after,.nlnafi-hero-grid::after{
  min-height:330px;
  border:18px solid #252333;
  border-bottom-width:30px;
  border-radius:22px 22px 12px 12px;
  box-shadow:0 20px 44px rgba(37,35,51,.17),0 18px 0 -8px #ddd7e7;
  background-color:#fff;
  background-size:auto;
}
.nlpil-hero-grid::after{
  background:radial-gradient(circle at 80% 24%,rgba(167,139,250,.36) 0 9%,transparent 10%),linear-gradient(90deg,transparent 7%,rgba(120,80,174,.13) 7% 9%,transparent 9% 100%),linear-gradient(180deg,#f8f5fb 0 24%,#fff 24% 100%);
}
.nlnafi-hero-grid::after{
  background:radial-gradient(circle at 77% 28%,rgba(214,198,164,.46) 0 10%,transparent 11%),radial-gradient(circle at 66% 61%,rgba(167,139,250,.20) 0 13%,transparent 14%),linear-gradient(180deg,#fbf8f2 0 28%,#fff 28% 100%);
}
.nlpil-hero-grid:before,.nlnafi-hero-grid:before{
  grid-column:2;
  grid-row:1;
  align-self:center;
  justify-self:center;
  z-index:2;
  width:72%;
  color:#252333;
  font:700 1rem/1.45 var(--site-font);
  text-align:left;
  pointer-events:none;
}
.nlpil-hero-grid:before{content:"Six customer sectors\A\A Energy · Estates · Retail\A Culture · Workplaces · Sustainability";white-space:pre-line}
.nlnafi-hero-grid:before{content:"Natural fibres. Thoughtful choices.\A\A Parents · Grandparents · Gift buyers\A Sustainable baby clothing";white-space:pre-line}

@media(max-width:900px){
  .nloes-hero-grid,.nlcs-hero-grid,.nlsep-hero-grid,.nlpil-hero-grid,.nlnafi-hero-grid{grid-template-columns:1fr!important}
  .nloes-hero-grid::after,.nlcs-hero-grid::after,.nlsep-hero-grid::after,.nlpil-hero-grid::after,.nlnafi-hero-grid::after,.nlpil-hero-grid:before,.nlnafi-hero-grid:before{grid-column:1;grid-row:2}
  .nloes-facts,.nlcs-facts,.nlsep-facts,.nlpil-facts,.nlnafi-facts{grid-row:3!important}
  .nloes-facts dl,.nlcs-facts dl,.nlsep-facts dl,.nlpil-facts dl,.nlnafi-facts dl{grid-template-columns:1fr 1fr!important}
  .nloes-facts dl>div,.nlcs-facts dl>div,.nlsep-facts dl>div,.nlpil-facts dl>div,.nlnafi-facts dl>div{border-right:0!important;border-bottom:1px solid rgba(167,139,250,.2)!important}
}
@media(max-width:620px){
  .nloes-hero-grid::after,.nlcs-hero-grid::after,.nlsep-hero-grid::after{min-height:260px;border-radius:18px}
  .nlpil-hero-grid::after,.nlnafi-hero-grid::after{min-height:270px;border-width:12px;border-bottom-width:24px}
  .nloes-facts dl,.nlcs-facts dl,.nlsep-facts dl,.nlpil-facts dl,.nlnafi-facts dl{grid-template-columns:1fr!important}
}

/* Shared internal-link sections connect services, audiences, proof and guidance. */
.nl-internal-links{
  padding:72px 24px;
  background:linear-gradient(180deg,#f8f5fb 0%,#f5f3f8 100%);
  border-top:1px solid rgba(167,139,250,.22);
}
.nl-internal-links-inner{max-width:1160px;margin:0 auto}
.nl-internal-links-eyebrow{
  margin:0 0 10px;
  color:var(--brand-indigo);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
}
.nl-internal-links h2{
  max-width:780px;
  margin:0;
  font-size:clamp(1.65rem,1.25rem + 1vw,2.35rem);
  line-height:1.15;
  letter-spacing:-.025em;
}
.nl-internal-links-intro{
  max-width:760px;
  margin:14px 0 28px;
  font-size:1rem;
  line-height:1.65;
}
.nl-internal-links-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.nl-internal-link-card{
  display:flex;
  flex-direction:column;
  min-height:190px;
  padding:22px;
  color:var(--brand-navy);
  text-decoration:none;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(167,139,250,.28);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(37,35,51,.06);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.nl-internal-link-card strong{font-size:1rem;line-height:1.35}
.nl-internal-link-card span{margin:10px 0 18px;font-size:.9rem;line-height:1.55;color:#514d61}
.nl-internal-link-card b{margin-top:auto;color:var(--brand-indigo);font-size:.88rem}
.nl-internal-link-card:is(:hover,:focus-visible){
  transform:translateY(-2px);
  border-color:rgba(120,80,174,.52);
  box-shadow:0 14px 32px rgba(37,35,51,.10);
}
@media(max-width:950px){.nl-internal-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .nl-internal-links{padding:52px 18px}
  .nl-internal-links-grid{grid-template-columns:1fr}
  .nl-internal-link-card{min-height:0}
}