/*
Theme Name: Hello Elementor NCL
Theme URI: https://nuclearconsulting.co.uk/
Description: Nuclear Consulting Limited child theme. Navy, charcoal and brass.
Author: Nuclear Consulting Limited
Template: hello-elementor
Version: 2.50.13
Text Domain: hello-elementor-ncl
*/
/* ============================================================
NCL design system
Two brand colours: navy #022251 and brass #C2A14A, taken from
the company's own palette. Charcoal is the secondary. Cream and
sand are the neutrals that carry the page. Nothing else.
============================================================ */
:root{
--navy:#022251;
--navy-dk:#01142F;
--navy-lt:#123B7A;
--charcoal:#414042;
--brass:#C2A14A;
--brass-dk:#7A6222; /* small text on light backgrounds: 5.84:1 */
--brass-lt:#D9C382;
--on-brass:#01142F;
--cream:#FFFFFF;
--sand:#EEF2F7;
--white:#FFFFFF;
--ink:#222222;
--grey:#69727D;
--line:#DCD5C9;
--line-dk:rgba(255,255,255,.16);
--disp:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
--sans:'Inter',system-ui,-apple-system,sans-serif;
--wrap:1260px;
--gut:40px;
--r:10px; /* card radius */
--r-lg:14px; /* image radius */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--cream);color:var(--ink);
font-family:var(--sans);font-size:17px;line-height:1.65;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto}
a{color:var(--navy)}
a:hover{color:var(--brass-dk)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;color:var(--navy);letter-spacing:-0.03em;line-height:1.14;margin:0}
h1{font-size:clamp(40px,4.8vw,66px)}
h2{font-size:clamp(32px,4vw,54px)}
h3{font-size:clamp(21px,2vw,25px);letter-spacing:-0.02em}
h4{font-size:19px;letter-spacing:-0.02em}
.ncl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
/* Shared kicker: the only place small caps appear. */
.ncl-kicker{
display:inline-block;background:var(--brass);color:var(--on-brass);
font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.08em;
text-transform:uppercase;padding:6px 13px;border-radius:99px;margin-bottom:20px;
}
.ncl-eyebrow{
display:block;font-family:var(--disp);font-weight:700;font-size:12.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:18px;
}
/* ---------------- Buttons ---------------- */
.ncl-btn,.ncl-btn-ghost{
display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;
padding:14px 26px;border-radius:99px;border:1.5px solid transparent;
transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.ncl-btn{background:var(--navy);color:var(--white)}
.ncl-btn:hover{background:var(--brass);color:var(--on-brass)}
.ncl-btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.ncl-btn-ghost:hover{background:var(--navy);color:var(--white)}
.ncl-btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 0 !important;max-width:none !important}
/* On navy panels the pair inverts. */
.ncl-on-dark .ncl-btn{background:var(--brass);color:var(--on-brass)}
.ncl-on-dark .ncl-btn:hover{background:var(--white);color:var(--navy)}
.ncl-on-dark .ncl-btn-ghost{color:var(--white);border-color:rgba(255,255,255,.55)}
.ncl-on-dark .ncl-btn-ghost:hover{background:var(--white);color:var(--navy)}
/* ---------------- Header ---------------- */
.ncl-header{background:var(--navy);color:var(--white);position:relative;z-index:40}
/* The header runs on a wider measure than the content grid, so the nav and the
call to action have room to breathe. */
.ncl-header .ncl-wrap{max-width:1600px;padding:0 44px}
.ncl-header-bar{display:flex;align-items:center;gap:40px;min-height:88px}
.ncl-brand{display:flex;align-items:center;text-decoration:none;color:var(--white);flex:0 0 auto}
/* The header carries the mark on its own. The full lockup sits on the hero.
Bar height is unchanged. */
.ncl-brand img{height:42px;width:auto;display:block;filter:brightness(0) invert(1)}
.ncl-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.ncl-nav ul{list-style:none;display:flex;align-items:center;gap:24px;margin:0;padding:0}
.ncl-nav li{position:relative}
.ncl-nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:14.5px;font-weight:500;display:block;padding:10px 0;white-space:nowrap}
.ncl-nav a:hover{color:var(--brass)}
.ncl-nav .current-menu-item > a,.ncl-nav .current-menu-ancestor > a{color:var(--brass)}
/* Specific enough to beat the .ncl-nav a rule above. */
.ncl-nav a.ncl-cta,.ncl-cta{
background:var(--brass);color:var(--on-brass) !important;font-weight:600;
padding:13px 30px;border-radius:99px;text-decoration:none;font-size:14.5px;
white-space:nowrap;line-height:1.15;
}
.ncl-nav a.ncl-cta:hover,.ncl-cta:hover{background:var(--white);color:var(--navy) !important}
.ncl-nav-toggle{display:none}
/* Submenus */
.ncl-nav ul ul{
position:absolute;top:100%;left:-16px;min-width:290px;background:var(--white);
border-radius:var(--r);box-shadow:0 18px 40px rgba(1,20,47,.22);
padding:10px 0;display:none;flex-direction:column;align-items:stretch;gap:0;z-index:50;
border-top:3px solid var(--brass);text-align:left;
}
.ncl-nav ul ul li{width:100%}
.ncl-nav ul ul a{display:block;text-align:left}
/* Focus as well as hover, so the dropdowns can be reached from the keyboard. */
.ncl-nav li:hover > ul,.ncl-nav li:focus-within > ul{display:flex}
.ncl-nav ul ul a{color:var(--navy);padding:9px 20px;font-size:14.5px}
.ncl-nav ul ul a:hover{background:var(--cream);color:var(--brass-dk)}
.ncl-nav ul ul a{white-space:normal}
/*
* The bar collapses to the Menu button below this width. It was 1400px, which
* is wider than most laptops, so a visitor on a normal screen never saw the
* navigation at all. Eight destinations need about 760px beside a 202px logo
* and the contact button, so the bar holds comfortably on a laptop.
*/
@media (max-width:1120px){
.ncl-nav-toggle{
display:block;margin-left:auto;background:transparent;border:1.5px solid rgba(255,255,255,.5);
color:var(--white);border-radius:99px;padding:9px 18px;font:600 14.5px/1 var(--sans);cursor:pointer;
}
.ncl-nav{
display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);
flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut) 26px;
border-top:1px solid var(--line-dk);
}
.ncl-nav.open{display:flex}
.ncl-nav ul{flex-direction:column;align-items:stretch;gap:0}
.ncl-nav a{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ncl-nav ul ul{position:static;display:flex;background:transparent;box-shadow:none;border:0;padding:0 0 0 18px}
.ncl-nav ul ul a{color:rgba(255,255,255,.78)}
.ncl-cta{margin-top:16px;text-align:center}
}
/* ---------------- Interior hero ----------------
Navy panel with the headline, photograph alongside. The same split
the home page opens with, so an interior page is recognisably the
same site rather than a different one. */
/* The photograph sits behind the whole hero under a navy wash, rather than
beside the type in a hard split. */
/* Top aligned, not centred: centring moves the headline up and down from page
to page depending on how long the standfirst is, so it jumps as you navigate. */
.ncl-hero{position:relative;display:flex;align-items:flex-start;overflow:hidden;background:var(--navy-dk);color:var(--white);min-height:440px}
.ncl-hero-im{position:absolute;inset:0;z-index:0}
.ncl-hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 42%;border-radius:0}
.ncl-hero-im::after{
content:"";position:absolute;inset:0;
background:linear-gradient(96deg,rgba(2,34,81,.97) 0%,rgba(2,34,81,.94) 32%,rgba(2,34,81,.72) 58%,rgba(1,20,47,.5) 100%);
}
.ncl-hero-txt{position:relative;z-index:2;width:100%;padding:80px 0 84px}
.ncl-hero-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.ncl-hero h1{color:var(--white);max-width:17ch}
/* Every hero headline off the home page is white, including any emphasised
part of it. The home page hero is styled separately and keeps its brass. */
.ncl-hero h1,.ncl-hero h1 em{color:var(--white)}
.ncl-hero h1 em{font-style:normal}
/* The nine destination headlines are a single word, or two for Join Us, so the
17ch measure no longer applies to them. */
.ncl-hero-brass h1{max-width:none}
.ncl-hero-lead{margin:22px 0 0;font-size:19.5px;line-height:1.6;color:rgba(255,255,255,.88);max-width:48ch}
.ncl-hero-meta{margin:20px 0 0;font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--brass)}
.ncl-hero-fibre,.ncl-hero-rule{display:none}
@media (max-width:980px){
.ncl-hero{min-height:380px}
.ncl-hero-txt{padding:60px 0 64px}
.ncl-hero-im::after{background:linear-gradient(180deg,rgba(2,34,81,.95) 0%,rgba(2,34,81,.88) 60%,rgba(1,20,47,.8) 100%)}
}
/* ---------------- Content bands ---------------- */
.ncl-content{padding:0}
.ncl-band{padding:88px 0}
.ncl-band-wash{background:var(--sand)}
/* Two band colours only: one light, one navy. Photography is the third
register. Alternating two near-identical creams read as an accident, and
nth-child counted siblings that are not bands, so the alternation landed in
the wrong places. */
.ncl-band{background:var(--cream)}
.ncl-band > .ncl-wrap > *:first-child{margin-top:0}
.ncl-band > .ncl-wrap > *:last-child{margin-bottom:0}
@media (max-width:767px){.ncl-band{padding:60px 0}}
/* Band headings sit at a reading size rather than a display size: the big
setting belongs to the hero and the home page, and inside a prose band it
crowded the text it introduced. */
.ncl-content h2{margin:0 0 24px;max-width:26ch;font-size:clamp(24px,2.3vw,32px)}
@media (max-width:767px){.ncl-content h2{font-size:24px}}
/* Ordinary prose keeps a readable measure. Anything of ours (cards, rows,
button rows, leads) sets its own width and is left alone. */
.ncl-content .ncl-band > .ncl-wrap > p:not([class*="ncl-"]),
.ncl-content .ncl-band > .ncl-wrap > ul:not([class*="ncl-"]),
.ncl-content .ncl-band > .ncl-wrap > ol:not([class*="ncl-"]){max-width:66ch}
.ncl-content h2[id]{scroll-margin-top:90px}
.ncl-content h3{margin:42px 0 14px;color:var(--navy)}
.ncl-content h2 + h3{margin-top:22px}
.ncl-content h4{margin:30px 0 10px;color:var(--navy)}
.ncl-content p{margin:0 0 1.1em;max-width:none;font-size:18px;line-height:1.7}
.ncl-content p:last-child{margin-bottom:0}
.ncl-content ul,.ncl-content ol{margin:18px 0 24px 22px;padding:0;max-width:none}
.ncl-content li{margin:0 0 9px}
.ncl-content li::marker{color:var(--brass-dk)}
.ncl-content strong{color:var(--navy);font-weight:600}
.ncl-content a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px;text-decoration-thickness:2px}
.ncl-content a:hover{color:var(--brass-dk)}
.ncl-content blockquote{
margin:32px 0;padding:28px 32px;background:var(--brass);color:var(--on-brass);
border-radius:var(--r);font-family:var(--disp);font-weight:600;font-size:22px;line-height:1.35;letter-spacing:-.02em;
}
.ncl-content blockquote p{margin:0}
.ncl-content figure{margin:36px 0}
.ncl-content figure img{border-radius:var(--r-lg);display:block}
.ncl-content figcaption{font-size:14px;color:var(--grey);margin-top:10px}
.ncl-content img{border-radius:var(--r)}
.ncl-sectionlead{font-size:19.5px !important;line-height:1.6;color:var(--grey);max-width:none !important}
/* ---------------- The card list ----------------
One component for every set on the site. A link is a white card with
a brass rule that lifts on hover; a plain item is a tinted card that
does not, so a reader can see at rest which of them go somewhere. */
.ncl-list{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;margin:44px 0 0 !important;padding:0;max-width:none !important;list-style:none;
}
.ncl-list > a,.ncl-list > span{
display:block;background:var(--white);border-radius:var(--r);
padding:24px 22px 26px;border-bottom:4px solid var(--brass);
text-decoration:none !important;transition:transform .16s ease,box-shadow .16s ease;
}
.ncl-list > a:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,34,81,.15)}
.ncl-list b{
display:block;font-family:var(--disp);font-size:18.5px;font-weight:600;
letter-spacing:-.02em;line-height:1.28;color:var(--navy);margin-bottom:9px;
}
.ncl-list i{display:block;font-style:normal;font-size:15px;line-height:1.5;color:var(--grey)}
.ncl-list > span{background:var(--sand);border-bottom-color:var(--line)}
.ncl-band-wash .ncl-list > span{background:#E6DED1}
.ncl-list > a:hover b{color:var(--brass-dk)}
/* Dark colourway, used on navy panels. */
.ncl-list-dark > a,.ncl-list-dark > span{background:rgba(255,255,255,.07);border-bottom-color:var(--brass)}
.ncl-list-dark b{color:var(--white)}
.ncl-list-dark i{color:rgba(255,255,255,.75)}
.ncl-list-dark > a:hover{background:var(--white)}
.ncl-list-dark > a:hover b{color:var(--navy)}
.ncl-list-dark > a:hover i{color:var(--grey)}
.ncl-list-dark > span{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.22)}
/* Insight cards carry an image. */
.ncl-list-img > a{padding:0;overflow:hidden;border-bottom-width:4px}
.ncl-list-img .im{display:block;height:200px;overflow:hidden;border-radius:0}
.ncl-list-img .im img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block;transition:transform .45s ease}
.ncl-list-img > a:hover .im img{transform:scale(1.05)}
.ncl-list-img b{padding:22px 22px 0;font-size:19.5px}
.ncl-list-img i{padding:0 22px 24px;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-dk)}
@media (max-width:980px){.ncl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ncl-list{grid-template-columns:minmax(0,1fr)}}
/* ---------------- Figures ----------------
Call-outs. Supporting evidence rather than the argument itself, so they sit
apart from the prose. */
.ncl-stats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
margin:38px 0 0 !important;max-width:none !important;
}
.ncl-stats > span{
display:block;background:var(--white);border-radius:var(--r);
border-left:4px solid var(--brass);padding:22px 24px 24px;
}
.ncl-stats b{
display:block;font-family:var(--disp);font-weight:700;color:var(--navy);
font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1.05;margin-bottom:8px;
}
.ncl-stats i{display:block;font-style:normal;font-size:15px;line-height:1.45;color:var(--grey)}
.ncl-on-dark .ncl-stats > span,.hm-navy .ncl-stats > span,.hm-deep .ncl-stats > span{background:rgba(255,255,255,.07)}
.ncl-on-dark .ncl-stats b{color:var(--brass)}
.ncl-on-dark .ncl-stats i{color:rgba(255,255,255,.78)}
@media (max-width:980px){.ncl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ncl-stats{grid-template-columns:minmax(0,1fr)}}
/* ---------------- Proof ----------------
One piece of evidence on the page whose claim it supports. */
.ncl-proof{
display:block;background:var(--navy);color:var(--white);border-radius:var(--r-lg);
border-left:6px solid var(--brass);padding:30px 34px 32px;margin:40px 0 0 !important;max-width:none !important;
}
.ncl-proof em{
display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:12.5px;
letter-spacing:.09em;text-transform:uppercase;color:var(--brass);margin-bottom:14px;
}
.ncl-proof b{
display:block;font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.3vw,28px);
letter-spacing:-.025em;line-height:1.2;color:var(--white);margin-bottom:12px;
}
.ncl-proof span{display:block;font-size:17px;line-height:1.65;color:rgba(255,255,255,.84)}
@media (max-width:767px){.ncl-proof{padding:26px 24px 28px}}
/* ---------------- Case studies ---------------- */
.ncl-case{
display:block;background:var(--white);border-radius:var(--r);
border-top:4px solid var(--brass);padding:28px 30px 30px;margin:0 0 20px !important;max-width:none !important;
}
.ncl-band-wash .ncl-case,.ncl-band:nth-child(even) .ncl-case{background:var(--white)}
.ncl-case b{
display:block;font-family:var(--disp);font-size:21px;font-weight:700;
letter-spacing:-.02em;line-height:1.24;color:var(--navy);margin-bottom:8px;
}
.ncl-case i{
display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:12.5px;
letter-spacing:.06em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:18px;
}
.ncl-case span{display:block;font-size:16.5px;line-height:1.6;color:var(--ink);margin-bottom:10px}
.ncl-case span:last-child{margin-bottom:0}
.ncl-case em{font-style:normal;font-weight:600;color:var(--navy)}
@media (min-width:1100px){
.ncl-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:44px;row-gap:0;align-items:start}
.ncl-case b{grid-column:1;margin-bottom:10px}
.ncl-case i{grid-column:1;margin-bottom:0}
.ncl-case span{grid-column:2}
.ncl-case span:first-of-type{grid-row:1}
}
/* ---------------- Link row ---------------- */
.ncl-linkrow{display:flex;flex-wrap:wrap;gap:14px 36px;margin:28px 0 0 !important;max-width:none !important}
.ncl-content a.ncl-btn,.ncl-content a.ncl-btn-ghost,.ncl-content a.ncl-pop-close{text-decoration:none}
.ncl-content a.ncl-btn{color:var(--white)}
.ncl-content a.ncl-btn:hover{color:var(--on-brass)}
.ncl-content .ncl-on-dark a.ncl-btn,.ncl-band-dark a.ncl-btn{color:var(--on-brass)}
.ncl-band-dark a.ncl-btn:hover{color:var(--navy)}
.ncl-band-dark a.ncl-btn-ghost{color:var(--white)}
.ncl-band-dark a.ncl-btn-ghost:hover{color:var(--navy)}
/* ---------------- People ----------------
Name in the frame: portrait, name and role on the card, a short summary
beneath, and the full profile in a pop-out. Rendered by [ncl_people]. */
.ncl-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:40px 0 0 !important;max-width:none !important}
.ncl-people > a{
position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);overflow:hidden;
border-bottom:4px solid var(--brass);text-decoration:none !important;transition:transform .16s ease,box-shadow .16s ease;
}
.ncl-people > a:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,34,81,.15)}
.ncl-people .ph{display:flex;align-items:center;justify-content:center;position:relative;height:200px;background:var(--navy);overflow:hidden}
.ncl-people .ph img{width:140px;height:140px;border-radius:50%;object-fit:cover;object-position:center top;display:block;border:4px solid rgba(255,255,255,.22);background:var(--white)}
.ncl-people .ph .init{width:140px;height:140px;border-radius:50%;border:4px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:44px;color:rgba(255,255,255,.55);letter-spacing:-.04em}
.ncl-people .nm{display:block;padding:20px 22px 0}
.ncl-people .nm b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.15;color:var(--navy)}
.ncl-people .nm i{display:block;font-style:normal;font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--brass-dk);margin-top:6px}
.ncl-people > a:hover .nm b{color:var(--brass-dk)}
.ncl-band-dark .ncl-people .nm b{color:var(--white)}
.ncl-band-dark .ncl-people .nm i{color:var(--brass)}
.ncl-pop-person img{border-radius:50%;background:var(--white)}
.ncl-people .sm{display:block;padding:18px 22px 22px;font-size:15.5px;line-height:1.55;color:var(--grey);flex:1}
.ncl-people .go{display:block;padding:0 22px 20px;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy)}
.ncl-people .go::after{content:"\2192";margin-left:8px}
.ncl-people > a:hover .go{color:var(--brass-dk)}
.ncl-band-dark .ncl-people > a{background:rgba(255,255,255,.07)}
.ncl-band-dark .ncl-people .sm{color:rgba(255,255,255,.78)}
.ncl-band-dark .ncl-people .go{color:var(--white)}
/* Compact directory rows: small portrait, name, role, one line each. */
.ncl-people.ncl-people-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;margin-top:22px !important}
.ncl-people-compact > a{flex-direction:row;align-items:center;gap:14px;padding:16px 16px 16px 14px;border-bottom:3px solid var(--brass);border-radius:var(--r);background:var(--white)}
.ncl-people-compact > a:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(2,34,81,.12)}
.ncl-people-compact .ph{height:auto;width:64px;flex:none;background:transparent}
.ncl-people-compact .ph img,.ncl-people-compact .ph .init{width:64px;height:64px;border-width:2px;font-size:20px;color:var(--white);background:var(--navy)}
.ncl-people-compact .nm{padding:0;flex:1;min-width:0}
.ncl-people-compact .nm b{font-size:17px;line-height:1.15}
.ncl-people-compact .nm i{margin-top:5px;font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--grey);line-height:1.4}
.ncl-people-compact .go{display:none}
@media (max-width:980px){.ncl-people.ncl-people-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ncl-people.ncl-people-compact{grid-template-columns:1fr}}
.ncl-content h3.ncl-people-h{margin:48px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:22px;display:flex;align-items:baseline;gap:14px}
.ncl-content h3.ncl-people-h span{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--grey)}
.ncl-content h3.ncl-people-h + .ncl-people{margin-top:22px !important}
.ncl-pop-person{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.ncl-pop-person img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);display:block}
.ncl-pop-person .init{width:100%;aspect-ratio:1/1;border-radius:var(--r);background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:56px;color:rgba(255,255,255,.3)}
.ncl-pop-person em{display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:10px}
.ncl-pop-person h3{margin:0 0 10px}
/* Practice leadership list. */
.ncl-content ul.ncl-dirs{list-style:none;margin:32px 0 0;padding:0;max-width:none;border-top:1px solid var(--line)}
.ncl-content ul.ncl-dirs li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;margin:0;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
.ncl-content ul.ncl-dirs li::marker{content:""}
.ncl-content ul.ncl-dirs a.pr{font-family:var(--disp);font-weight:600;color:var(--navy);text-decoration:none}
.ncl-content ul.ncl-dirs a.pr:hover{color:var(--brass-dk)}
.ncl-content ul.ncl-dirs li > a:not(.pr){font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--brass)}
.ncl-content ul.ncl-dirs li > span{color:var(--grey);font-size:15px}
.ncl-band-dark ul.ncl-dirs,.ncl-band-dark ul.ncl-dirs li{border-color:rgba(255,255,255,.2)}
.ncl-band-dark ul.ncl-dirs a.pr,.ncl-band-dark ul.ncl-dirs li > a:not(.pr){color:var(--white)}
.ncl-band-dark ul.ncl-dirs li > span{color:rgba(255,255,255,.6)}
.ncl-pop-person .ln{display:inline-block;margin-top:14px;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy);text-decoration:none !important;border-bottom:2px solid var(--brass)}
@media (max-width:980px){.ncl-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ncl-people{grid-template-columns:1fr}.ncl-pop-person{grid-template-columns:1fr}.ncl-pop-person img,.ncl-pop-person .init{max-width:180px}}
.ncl-content .ncl-linkrow a{
font-weight:600;color:var(--navy);text-decoration:none;
border-bottom:2px solid var(--brass);padding-bottom:3px;
}
.ncl-content .ncl-linkrow a:hover{color:var(--brass-dk);border-bottom-color:var(--navy)}
/* ---------------- Alliance partner plates ---------------- */
.ncl-partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:34px 0 0 !important;max-width:none !important}
.ncl-content .ncl-partners > a{
display:block;background:var(--white);border-radius:var(--r);overflow:hidden;
text-decoration:none !important;border-bottom:4px solid var(--brass);
transition:transform .16s ease,box-shadow .16s ease;
}
.ncl-content .ncl-partners > a:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,34,81,.15)}
.ncl-partners .lg{display:flex;align-items:center;justify-content:center;height:112px;background:var(--navy);padding:22px 28px}
.ncl-partners .lg img{max-height:56px;max-width:210px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);border-radius:0}
.ncl-partners b{display:block;padding:20px 24px 0;font-family:var(--disp);font-size:18.5px;font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.ncl-partners i{display:block;padding:8px 24px 24px;font-style:normal;font-size:15px;line-height:1.5;color:var(--grey)}
.ncl-content img.ncl-ina-mark{height:72px;width:auto;margin:4px 0 22px;border-radius:0}
@media (max-width:700px){.ncl-partners{grid-template-columns:minmax(0,1fr)}}
/* ---------------- Related pages ---------------- */
.ncl-related{margin:0}
.ncl-related ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0;max-width:none}
.ncl-related li{margin:0}
.ncl-related a{
display:block;background:var(--white);border-radius:var(--r);padding:20px 22px;
border-bottom:4px solid var(--brass);text-decoration:none !important;
font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--navy);
transition:transform .16s ease,box-shadow .16s ease;
}
.ncl-related a:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,34,81,.15);color:var(--brass-dk)}
@media (max-width:980px){.ncl-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ncl-related ul{grid-template-columns:minmax(0,1fr)}}
/* ---------------- Closing call to action ---------------- */
/* The closing call to action is navy like every other dark band; the brass is
spent on the button, where it does some work. */
/* The closing call to action is brass: the one place the accent takes a whole
band, which also stops the navy band, the navy close and the navy footer
running together into a single dark mass. */
.ncl-cta-band{background:var(--brass);color:var(--on-brass);padding:92px 0}
.ncl-cta-band h2{color:var(--on-brass);max-width:16ch;margin:0 0 18px}
.ncl-cta-band p{margin:0 0 34px;max-width:54ch;font-size:18.5px;color:rgba(1,20,47,.82)}
.ncl-cta-band .ncl-btn{background:var(--navy-dk);color:var(--white)}
.ncl-cta-band .ncl-btn:hover{background:var(--white);color:var(--navy)}
/* ---------------- Footer ---------------- */
/* Accreditation strip. White ground because the marks are JPGs on white. */
/* Accreditation marks in the footer, white on navy. */
.ncl-footer-marks{display:flex;align-items:center}
.ncl-footer-marks-row{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.ncl-footer-marks-row img{height:78px;width:auto;max-width:100%;display:block;opacity:.95}
.ncl-footer-marks p{display:none}
@media (max-width:767px){.ncl-footer-marks-row{gap:22px}.ncl-footer-marks-row img{height:56px}}
/* At the narrowest widths the three marks ran past the right edge. They shrink
and share the row instead of being clipped. */
/* Setting a width distorted the marks, which do not share an aspect ratio.
Both maxima are set instead and the intrinsic size is left alone, so each
mark scales to whichever limit it meets first and keeps its proportions. */
@media (max-width:420px){
.ncl-footer-marks-row{gap:12px;justify-content:flex-start}
.ncl-footer-marks-row img{
width:auto;height:auto;max-height:46px;max-width:calc((100% - 24px) / 3);
}
}
/* The Academy is one restrained element, not another line of contact details. */
.ncl-footer-academy{
display:inline-flex;align-items:center;gap:12px;margin-top:22px;
padding:10px 16px 10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
text-decoration:none;transition:border-color .16s ease,background .16s ease;
}
.ncl-footer-academy img{height:26px;width:auto;display:block}
.ncl-footer-academy span{font-family:var(--disp);font-weight:600;font-size:14.5px;color:rgba(255,255,255,.9)}
.ncl-footer-academy:hover{border-color:var(--brass);background:rgba(255,255,255,.05)}
.ncl-footer-academy:hover span{color:var(--brass)}
/* Dark content band: anywhere in the block. */
.ncl-band.ncl-band-dark{background:var(--navy-dk);color:var(--white)}
.ncl-band-dark h2,.ncl-band-dark h3{color:var(--white)}
.ncl-band-dark p{color:rgba(255,255,255,.86)}
.ncl-band-dark a{color:var(--white)}
.ncl-band-dark a:hover{color:var(--brass)}
.ncl-band-dark strong{color:var(--white)}
/* An opening statement sits above its prose at ordinary heading size. The
earlier two-column treatment set it at display size in a narrow left column
and pushed the paragraphs into the right-hand half, which left a band of
dead space down the middle of every page that used it. */
.ncl-band .ncl-wrap:has(> .ncl-lead-big) > p:not([class*="ncl-"]){max-width:66ch}
.ncl-band .ncl-wrap:has(> .ncl-lead-big) > .ncl-list{margin-top:40px}
.ncl-content p.ncl-lead-big,.ncl-content h2.ncl-lead-big{
font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.2vw,31px);letter-spacing:-.025em;
color:var(--navy);margin:0 0 22px;max-width:34ch;line-height:1.22;
}
.ncl-content p.ncl-lead-big::before{content:"";display:block;width:84px;height:6px;background:var(--brass);border-radius:3px;margin:0 0 26px}
/* The big lead sets in navy, which is invisible once the band it sits in is
navy. Bands alternate, so any block that hard-codes a colour needs its
counterpart here. */
.ncl-content .ncl-band-dark p.ncl-lead-big,.ncl-on-dark p.ncl-lead-big,.ncl-content .ncl-band-dark h2.ncl-lead-big,.ncl-on-dark h2.ncl-lead-big{color:var(--white)}
/* A photograph band is dark, but carries neither ncl-band-dark nor ncl-on-dark,
so content folded into one was left with its light-background colours. */
.ncl-content .ncl-strip .ncl-wrap h2,.ncl-content .ncl-strip .ncl-wrap h3{color:var(--white)}
.ncl-content .ncl-strip .ncl-wrap p.ncl-lead-big,.ncl-content .ncl-strip .ncl-wrap h2.ncl-lead-big{color:var(--white)}
.ncl-content .ncl-strip .ncl-wrap a.ncl-btn{background:var(--brass);color:var(--on-brass)}
.ncl-content .ncl-strip .ncl-wrap a.ncl-btn-ghost{color:var(--white);border-color:rgba(255,255,255,.55)}
.ncl-content .ncl-strip .ncl-wrap a.ncl-btn-ghost:hover{background:var(--white);color:var(--navy)}
@media (max-width:767px){.ncl-content p.ncl-lead-big,.ncl-content h2.ncl-lead-big{font-size:24px;margin-bottom:20px;max-width:none}}
/* Every band heading carries the brass rule and sits above its own line, the
same as the home page, so a section never opens on a bare heading. Bands
that open with a large statement already carry the rule there. */
.ncl-content .ncl-band .ncl-wrap:not(:has(> .ncl-lead-big)) > h2::before{
content:"";display:block;width:84px;height:6px;background:var(--brass);
border-radius:3px;margin:0 0 26px;
}
.ncl-content .ncl-band .ncl-wrap:not(:has(> .ncl-lead-big)) > h2{margin-top:0}
/* Two plain bands running together read as one long band with a heading
stranded in the middle. A hairline separates them without a tonal shift,
which at these two tints would look like a printing fault rather than a
deliberate change. */
.ncl-content .ncl-band:not(.ncl-band-dark) + .ncl-band:not(.ncl-band-dark) > .ncl-wrap{
border-top:1px solid var(--line);padding-top:76px;
}
.ncl-content .ncl-band .ncl-wrap > h2 + p:not([class*="ncl-"]){
font-size:19.5px;line-height:1.6;color:var(--grey);max-width:none;margin-top:18px;
}
/* The dark class sits on the section itself, not on an ancestor of the
content, so the override has to be written from the section down. */
.ncl-content .ncl-band.ncl-band-dark .ncl-wrap > h2 + p:not([class*="ncl-"]),
.ncl-band.ncl-on-dark .ncl-wrap > h2 + p:not([class*="ncl-"]){color:rgba(255,255,255,.82)}
/* Numbered steps in a row. */
.ncl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:40px 0 0 !important;max-width:none !important}
.ncl-steps > span{display:block;background:var(--white);border-radius:var(--r);border-top:4px solid var(--brass);padding:28px 28px 32px}
.ncl-steps em{display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--brass);margin-bottom:16px}
.ncl-steps b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.2;color:var(--navy);margin-bottom:10px}
.ncl-steps i{display:block;font-style:normal;font-size:16px;line-height:1.55;color:var(--grey)}
.ncl-band-dark .ncl-steps > span{background:rgba(255,255,255,.07)}
.ncl-band-dark .ncl-steps b{color:var(--white)}
.ncl-band-dark .ncl-steps i{color:rgba(255,255,255,.78)}
.ncl-content p.ncl-note{margin-top:28px;font-size:16.5px;color:var(--grey);max-width:70ch}
.ncl-band-dark p.ncl-note{color:rgba(255,255,255,.7)}
@media (max-width:900px){.ncl-steps{grid-template-columns:1fr}}
/* Full-bleed photograph band inside page content. The content marks the
band with
url|alt
; single.php renders it. */
.ncl-strip{min-height:460px}
.ncl-strip .ncl-proof{background:rgba(1,20,47,.82);max-width:820px !important;margin:0 !important;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.ncl-strip .ncl-proof span{font-family:var(--sans);font-weight:400;letter-spacing:0}
.ncl-strip::after{background:linear-gradient(90deg,rgba(1,20,47,.55) 0%,rgba(1,20,47,.35) 60%,rgba(1,20,47,.25) 100%)}
/* Card grid that opens pop-outs. Cards reuse the list component. */
.ncl-list-pop > a{position:relative;padding-top:54px}
.ncl-list-pop > a::before{content:attr(data-n);position:absolute;top:20px;left:24px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--brass-dk)}
.ncl-list-pop > a::after{content:"+";position:absolute;top:14px;right:18px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--navy);transition:.16s}
.ncl-list-pop > a:hover::after{background:var(--navy);color:var(--white)}
.ncl-list-pop > a small{display:block;margin-top:14px;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--brass-dk)}
.ncl-list-dark.ncl-list-pop > a small{color:var(--brass)}
.ncl-pop-dir{display:block;margin:0 0 22px;padding:14px 18px;background:var(--sand);border-radius:var(--r);font-size:15.5px;color:var(--ink)}
.ncl-pop-dir strong{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);display:block;margin-bottom:4px}
.ncl-content p.ncl-dirline{display:inline-flex;align-items:baseline;gap:14px;margin:0 0 30px;padding:14px 20px;border-radius:var(--r);background:rgba(255,255,255,.08);font-size:17px}
.ncl-content p.ncl-dirline strong{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass)}
.ncl-band-dark .ncl-list-dark{margin-top:26px !important}
.ncl-pop-more{display:inline-block;margin-top:8px;font-family:var(--disp);font-weight:700;color:var(--navy);text-decoration:none !important;border-bottom:2px solid var(--brass);padding-bottom:2px}
.ncl-pop-more:hover{color:var(--brass-dk)}
.ncl-pop{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(1,20,47,.72)}
.ncl-pop.is-open{display:flex}
.ncl-pop-box{position:relative;background:var(--white);border-radius:var(--r-lg);border-top:6px solid var(--brass);width:100%;max-width:780px;max-height:90vh;overflow:auto;padding:44px 52px 46px}
.ncl-pop-box > em{display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:12px}
.ncl-pop-box h3{margin:0 0 8px;font-size:clamp(24px,2.6vw,32px)}
.ncl-pop-box .ncl-pop-line{margin:0 0 24px;font-size:17.5px;color:var(--grey)}
.ncl-pop-box p{margin:0 0 16px;font-size:17.5px;line-height:1.65;color:var(--ink);max-width:none}
.ncl-pop-box p:last-child{margin-bottom:0}
.ncl-pop-box p.ncl-eg{border-left:4px solid var(--brass);padding:4px 0 4px 18px;color:var(--charcoal);font-size:16.5px}
.ncl-pop-box p.ncl-eg strong{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);display:block;margin-bottom:6px}
.ncl-pop-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--navy);background:none;color:var(--navy);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
.ncl-pop-close:hover{background:var(--navy);color:var(--white)}
html.ncl-pop-lock{overflow:hidden}
@media (max-width:767px){.ncl-pop-box{padding:36px 24px 32px}}
/* Accordion of service areas: number, title and one line on the summary,
prose and an example when opened. Replaces the static anchored panels. */
.ncl-acc{display:block;margin:0 0 0 !important;max-width:none !important;border-top:1px solid var(--line)}
.ncl-acc details{border-bottom:1px solid var(--line)}
.ncl-acc summary{
list-style:none;cursor:pointer;display:grid;grid-template-columns:56px minmax(0,1fr) 40px;
align-items:center;gap:20px;padding:26px 0;
}
.ncl-acc summary::-webkit-details-marker{display:none}
.ncl-acc summary em{font-style:normal;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--brass-dk)}
.ncl-acc summary b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(20px,2vw,25px);letter-spacing:-.025em;line-height:1.15;color:var(--navy)}
.ncl-acc summary i{display:block;font-style:normal;font-family:var(--sans);font-weight:400;font-size:16px;letter-spacing:0;line-height:1.5;color:var(--grey);margin-top:6px}
.ncl-acc summary span{
width:40px;height:40px;border-radius:50%;border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;
color:var(--navy);font-size:22px;line-height:1;transition:.18s;
}
.ncl-acc summary:hover span{background:var(--navy);color:var(--white)}
.ncl-acc details[open] summary span{transform:rotate(45deg);background:var(--navy);color:var(--white)}
.ncl-acc details[open] summary b{color:var(--brass-dk)}
.ncl-acc .ncl-acc-body{padding:0 0 34px 76px;max-width:860px}
.ncl-acc .ncl-acc-body p{margin:0 0 16px;font-size:17.5px;line-height:1.65;color:var(--ink)}
.ncl-acc .ncl-acc-body p:last-child{margin-bottom:0}
.ncl-acc .ncl-acc-body p.ncl-eg{border-left:4px solid var(--brass);padding:4px 0 4px 18px;color:var(--charcoal);font-size:16.5px}
.ncl-acc .ncl-acc-body p.ncl-eg strong{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);display:block;margin-bottom:6px}
.hm-navy .ncl-acc,.hm-deep .ncl-acc,.ncl-on-dark .ncl-acc{border-top-color:rgba(255,255,255,.2)}
.ncl-on-dark .ncl-acc details{border-bottom-color:rgba(255,255,255,.2)}
.ncl-on-dark .ncl-acc summary b{color:var(--white)}
.ncl-on-dark .ncl-acc summary i{color:rgba(255,255,255,.75)}
.ncl-on-dark .ncl-acc summary em{color:var(--brass)}
.ncl-on-dark .ncl-acc summary span{border-color:rgba(255,255,255,.6);color:var(--white)}
.ncl-on-dark .ncl-acc .ncl-acc-body p{color:rgba(255,255,255,.86)}
.ncl-on-dark .ncl-acc .ncl-acc-body p.ncl-eg{color:rgba(255,255,255,.86)}
.ncl-on-dark .ncl-acc .ncl-acc-body p.ncl-eg strong{color:var(--brass)}
@media (max-width:767px){
.ncl-acc summary{grid-template-columns:36px minmax(0,1fr) 34px;gap:12px;padding:20px 0}
.ncl-acc .ncl-acc-body{padding-left:0}
}
.ncl-footer{background:var(--navy-dk);color:rgba(255,255,255,.7);padding:56px 0 40px;font-size:15px}
.ncl-footer a{color:rgba(255,255,255,.82);text-decoration:none}
.ncl-footer a:hover{color:var(--brass)}
.ncl-footer-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
.ncl-footer-top ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ncl-footer-accred{margin:0;max-width:34ch;color:rgba(255,255,255,.6);font-size:14px}
.ncl-footer-bottom{
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;
}
/* ---------------- Forms (WPForms) ---------------- */
/* WPForms centres its own container and sets a fixed field height. Align the
form with the rest of the column, and tell WPForms the size of our type so
its height and our padding agree. */
/* The heading and its line stay on the page's left margin like every other
section. Only the form itself is a centred panel. */
.ncl-content .ncl-band:has(.wpforms-container) > .ncl-wrap > .wpforms-container{max-width:720px}
/* The form sits on a white panel with a brass edge, like the other panels on
the site, so it reads as a designed block rather than fields on a bare band. */
.ncl-content .wpforms-container,
.ncl-content div.wpforms-container-full{
max-width:100%;
margin:32px auto 0 !important;
background:var(--white) !important;
border-radius:var(--r-lg) !important;
border-top:6px solid var(--brass) !important;
box-shadow:0 14px 34px rgba(2,34,81,.10) !important;
padding:36px 40px 40px !important;
--wpforms-field-size-input-height:52px;
--wpforms-field-size-input-spacing:14px;
--wpforms-field-size-font-size:16px;
--wpforms-field-size-line-height:24px;
--wpforms-field-size-input-max-width:100%;
--wpforms-field-size-checkbox-size:18px;
--wpforms-label-size-font-size:15.5px;
--wpforms-label-size-line-height:22px;
}
.ncl-content .wpforms-field{padding:0 0 20px !important}
.ncl-content .wpforms-field-label{font-family:var(--disp);font-weight:600 !important;font-size:15.5px !important;color:var(--navy) !important;margin-bottom:8px !important}
.ncl-content .wpforms-required-label{color:var(--brass-dk) !important}
.ncl-content .wpforms-field-description{font-size:14px;color:var(--grey)}
.ncl-content input[type=text],.ncl-content input[type=email],.ncl-content input[type=tel],
.ncl-content input[type=url],.ncl-content textarea,.ncl-content select{
width:100% !important;max-width:100% !important;background:var(--cream);
border:1.5px solid var(--line) !important;border-radius:8px !important;
padding:12px 14px !important;font:400 16px/1.5 var(--sans) !important;color:var(--ink);
/* Let the field grow to its content rather than being clipped by a fixed height. */
height:auto !important;min-height:52px;
}
.ncl-content textarea{min-height:120px}
/* The arrow WPForms draws needs room, and the text must clear it. */
.ncl-content select{padding-right:42px !important;background-position:right 14px center}
.ncl-content input:focus,.ncl-content textarea:focus,.ncl-content select:focus{
outline:none;border-color:var(--brass) !important;box-shadow:0 0 0 3px rgba(194,161,74,.25) !important;
}
.ncl-content .wpforms-submit{
background:var(--navy) !important;color:var(--white) !important;border:0 !important;
border-radius:99px !important;padding:14px 30px !important;
font:600 15.5px/1 var(--sans) !important;cursor:pointer;transition:background-color .16s ease;
}
.ncl-content .wpforms-submit:hover{background:var(--brass) !important;color:var(--on-brass) !important}
.ncl-content .wpforms-confirmation-container-full{
background:var(--white);border:0;border-left:4px solid var(--brass);border-radius:var(--r);padding:22px 24px;
}
/* ============================================================
Home page
============================================================ */
/* Same treatment as the interior hero: photograph behind, navy wash over. */
.hm-hero{position:relative;display:flex;align-items:flex-start;overflow:hidden;min-height:660px;background:var(--navy-dk)}
.hm-hero-txt{position:relative;z-index:2;width:100%;color:var(--white);padding:96px 0 100px}
.hm-hero-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.hm-hero h1{color:var(--white);font-size:clamp(42px,4.9vw,70px);max-width:15ch}
.hm-hero h1 em{font-style:normal;color:var(--brass)}
.hm-hero p{margin:24px 0 0;font-size:20px;color:rgba(255,255,255,.86);max-width:42ch}
/* The standfirst carries the argument now, so it runs longer and sets smaller. */
.hm-hero-inner > p:not(.ncl-btnrow){font-size:18.5px;line-height:1.55;max-width:60ch}
.hm-hero-btns{margin:32px 0 0}
.hm-hero-btns .ncl-btn{background:var(--brass);color:var(--on-brass)}
.hm-hero-btns .ncl-btn:hover{background:var(--white);color:var(--navy)}
.hm-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.hm-pills a{
border:1.5px solid rgba(255,255,255,.34);border-radius:99px;padding:9px 19px;
font-size:14.5px;text-decoration:none;color:var(--white);transition:.16s;
}
.hm-pills a:hover{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.hm-hero-im{position:absolute;inset:0;z-index:0}
.hm-hero-im img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hm-hero-im::after{
content:"";position:absolute;inset:0;
background:linear-gradient(96deg,rgba(2,34,81,.97) 0%,rgba(2,34,81,.94) 32%,rgba(2,34,81,.7) 58%,rgba(1,20,47,.46) 100%);
}
@media (max-width:980px){
.hm-hero{min-height:540px}
.hm-hero-txt{padding:68px 0 72px}
.hm-hero-im::after{background:linear-gradient(180deg,rgba(2,34,81,.95) 0%,rgba(2,34,81,.88) 60%,rgba(1,20,47,.82) 100%)}
}
/* Introduction: what NCL is, then the three ways of working as the route in. */
.hm-intro{background:var(--cream);padding:104px 0 100px}
.hm-intro .hm-top{align-items:start}
.hm-intro-head{position:static}
.hm-intro-head h2{max-width:12ch}
.hm-intro-btns{margin-top:36px !important}
.hm-prose p{margin:0 0 22px;font-size:18px;line-height:1.7;color:var(--ink);max-width:62ch}
.hm-prose p:last-child{margin-bottom:0}
.hm-prose p.hm-lead{font-size:22px;line-height:1.55;color:var(--navy);margin-bottom:28px;max-width:none}
.hm-prose strong{font-family:var(--disp);font-weight:700;color:var(--navy);letter-spacing:-.01em}
@media (max-width:980px){.hm-intro{padding:72px 0}.hm-intro-head{position:static}.hm-intro-btns{margin:28px 0 40px !important}}
/* A short brass rule sets a section going, instead of a label. */
.hm-rule{display:block;width:84px;height:6px;background:var(--brass);border-radius:3px;margin:0 0 26px}
.hm-hero .hm-rule{width:104px;height:7px;margin-bottom:30px}
/* Inner pages open with the same brass mark as the home page. */
.ncl-hero-inner h1::before{content:"";display:block;width:104px;height:7px;background:var(--brass);border-radius:3px;margin:0 0 30px}
/* The full lockup, at size, above the headline. */
.hm-hero-logo{
display:block;height:74px;width:auto;margin:0 0 34px;
filter:brightness(0) invert(1);
}
@media (max-width:980px){.hm-hero-logo{height:58px;margin-bottom:26px}}
/* Full-bleed image band with a single statement, vertically centred. */
.hm-strip{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;background:var(--navy-dk)}
/* Direct child only: anything else inside the band is content, not the
background photograph. */
.hm-strip > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,20,47,.92) 0%,rgba(1,20,47,.75) 48%,rgba(1,20,47,.45) 100%)}
.hm-strip-txt{position:relative;z-index:2;width:100%;padding:56px 0}
.hm-strip-txt > .ncl-wrap > p{margin:0 0 30px;max-width:44ch;color:var(--white);font-family:var(--disp);font-weight:600;font-size:clamp(21px,2.2vw,30px);line-height:1.32;letter-spacing:-.02em}
.hm-strip-txt > .ncl-wrap > p.hm-strip-lab{margin:0 0 26px;max-width:none;font-size:12.5px;line-height:1.4}
.hm-strip h2{color:var(--white);font-size:clamp(30px,3.4vw,46px);margin:0 0 24px}
.hm-strip-txt .ncl-btn{background:var(--brass);color:var(--on-brass)}
.hm-strip-txt .ncl-btn:hover{background:var(--white);color:var(--navy)}
@media (max-width:767px){.hm-strip{min-height:340px}}
/* The band carries a label where it holds a set rather than a statement. */
.hm-strip-lab{
margin:0 0 26px;font-family:var(--disp);font-weight:700;font-size:12.5px;
letter-spacing:.09em;text-transform:uppercase;color:var(--brass);
}
/* Client marks close the band. Each has had its white ground removed, so they
all knock out to white cleanly and read as one set rather than ten brands. */
.hm-clients{margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.2)}
.hm-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 30px;align-items:center}
.hm-logos span{display:flex;align-items:center;justify-content:center;height:48px}
.hm-logos img{
max-height:32px;max-width:82%;width:auto;object-fit:contain;
filter:brightness(0) invert(1);opacity:.78;transition:opacity .18s ease;
}
.hm-accredline{margin:26px 0 0;font-size:14px;color:rgba(255,255,255,.62)}
.hm-strip{padding:72px 0}
.hm-strip-txt{padding:0}
/* Optical sizing: wordmarks read larger than stacked marks at equal height. */
.hm-logos span:nth-child(1) img{max-height:42px} /* Sizewell C, has a strapline */
.hm-logos span:nth-child(2) img{max-height:24px} /* Centrica */
.hm-logos span:nth-child(3) img{max-height:44px} /* UKAEA, stacked */
.hm-logos span:nth-child(5) img{max-height:28px} /* EDF */
.hm-logos span:nth-child(6) img{max-height:24px} /* Jacobs */
.hm-logos span:nth-child(7) img{max-height:28px} /* Dassault */
.hm-logos span:nth-child(9) img{max-height:26px} /* Hydrock */
.hm-logos span:nth-child(10) img{max-height:28px} /* AWE */
.hm-logos span:hover img{opacity:1}
@media (max-width:980px){.hm-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.hm-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sectors on the band: a plain set of names, no boxes. */
.hm-sectorlist{display:flex;flex-wrap:wrap;gap:12px 14px;margin:0 0 30px;max-width:68ch}
.hm-sectorlist span{
border:1.5px solid rgba(255,255,255,.34);border-radius:99px;padding:9px 18px;
color:var(--white);font-size:14.5px;font-weight:500;
}
.hm-sec{padding:100px 0;scroll-margin-top:12px}
.hm-cream{background:var(--cream)}
.hm-sand{background:var(--sand)}
/* One blue for every band, the darker navy, so nothing ever shows two blues
against each other. The mid navy stays as a type and button colour. */
.hm-navy{background:var(--navy-dk);color:var(--white)}
.hm-deep{background:var(--navy-dk);color:var(--white)}
/* Adjacent light sections are separated by a rule rather than a second tint. */
.hm-sec.hm-cream + .hm-sec.hm-cream > .ncl-wrap,
.hm-sec.hm-cream + .hm-sec.hm-sand > .ncl-wrap,
.hm-sec.hm-sand + .hm-sec.hm-cream > .ncl-wrap,
.hm-intro + .hm-sec.hm-cream > .ncl-wrap{border-top:1px solid var(--line);padding-top:84px}
.hm-navy h2,.hm-deep h2,.hm-navy h3,.hm-deep h3{color:var(--white)}
.hm-navy .hm-lead,.hm-deep .hm-lead{color:rgba(255,255,255,.8)}
@media (max-width:767px){.hm-sec{padding:66px 0}}
.hm-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:start}
.hm-lead{font-size:19.5px;line-height:1.6;color:var(--grey);margin:0;max-width:60ch}
@media (max-width:980px){.hm-top{grid-template-columns:1fr;gap:26px}}
.hm-inset{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.hm-inset img{width:100%;height:420px;object-fit:cover;border-radius:var(--r-lg)}
@media (max-width:980px){.hm-inset{grid-template-columns:1fr;gap:30px}.hm-inset img{height:290px}}
.hm-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:50px;align-items:stretch}
.hm-rt{
display:flex;flex-direction:column;background:rgba(255,255,255,.07);
border:1px solid var(--line-dk);border-bottom:4px solid var(--brass);
border-radius:var(--r-lg);overflow:hidden;text-decoration:none !important;transition:.16s;height:100%;
}
.hm-rt .im{display:block;height:170px;overflow:hidden}
.hm-rt .im img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .45s ease}
.hm-rt:hover .im img{transform:scale(1.04)}
.hm-rt .bd{display:block;padding:22px 22px 26px}
.hm-rt b{
display:block;font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em;
line-height:1.28;color:var(--brass);margin-bottom:9px;
}
.hm-rt i{display:block;font-style:normal;font-size:15px;line-height:1.5;color:rgba(255,255,255,.8)}
.hm-rt:hover{background:rgba(255,255,255,.12)}
@media (max-width:980px){.hm-routes{grid-template-columns:1fr}}
.hm-sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px}
.hm-sg{
display:flex;flex-direction:column;justify-content:flex-end;min-height:134px;
background:var(--navy);color:var(--white);border-radius:var(--r);padding:22px 20px;
text-decoration:none;border-bottom:4px solid transparent;transition:.16s;
}
.hm-sg:nth-child(even){background:var(--navy-dk)}
.hm-sg b{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--white)}
.hm-sg:hover{transform:translateY(-4px);border-bottom-color:var(--brass)}
.hm-sg:hover b{color:var(--brass)}
@media (max-width:980px){.hm-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hm-team{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hm-team img{width:100%;height:470px;object-fit:cover;border-radius:var(--r-lg)}
.hm-quote{
background:var(--brass);color:var(--on-brass);border-radius:var(--r-lg);padding:30px 32px;
font-family:var(--disp);font-weight:600;font-size:23px;line-height:1.3;letter-spacing:-.02em;margin:26px 0;
}
@media (max-width:980px){.hm-team{grid-template-columns:1fr;gap:30px}.hm-team img{height:320px}}
.hm-clients{margin-top:78px;padding-top:40px;border-top:1px solid var(--line)}
.hm-clients h3{margin:0 0 10px}
.hm-certs{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}
.hm-certs img{height:66px;width:auto;background:var(--white);padding:7px;border-radius:8px}
/* Elementor safety: if any Elementor content survives, keep it on grid. */
.elementor-section > .elementor-container,.e-con>.e-con-inner{max-width:var(--wrap)}
/* ---------------- Cards, second pass ----------------
Every card opens with a short photograph strip under the navy wash, so a
grid reads as a set of places rather than a set of boxes. Four images
rotate by position. Insight cards carry their own image and are left alone. */
.ncl-list > a,.ncl-list > span{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ncl-list > a::before,.ncl-list > span::before{
content:"";display:block;height:82px;flex:none;background-size:cover;background-position:center 40%;
background-image:linear-gradient(100deg,rgba(2,34,81,.92),rgba(2,34,81,.55)),url("https://nuclearconsulting.co.uk/wp-content/uploads/2025/12/Detail-Aerial-02_001-200130-scaled-1.jpg");
}
.ncl-list > :nth-child(4n+2)::before{background-image:linear-gradient(100deg,rgba(2,34,81,.92),rgba(2,34,81,.55)),url("https://nuclearconsulting.co.uk/wp-content/uploads/2025/12/Wylfa_nuclear_power_station_from_above.jpg")}
.ncl-list > :nth-child(4n+3)::before{background-image:linear-gradient(100deg,rgba(2,34,81,.92),rgba(2,34,81,.55)),url("https://nuclearconsulting.co.uk/wp-content/uploads/2025/10/Temelin-Nuclear_Power_Station.jpg")}
.ncl-list > :nth-child(4n+4)::before{background-image:linear-gradient(100deg,rgba(2,34,81,.92),rgba(2,34,81,.55)),url("https://nuclearconsulting.co.uk/wp-content/uploads/2025/10/Llyn_Trawsfynydd_looking_north_and_disused_power_station.jpg")}
.ncl-list > a,.ncl-list > span{position:relative}
/* Stylised header: navy plate with fine brass orbit rings, offset differently by position. */
.ncl-list > a::before,.ncl-list > span::before{
height:118px;background-color:var(--navy);background-size:auto;background-repeat:no-repeat;
background-image:
radial-gradient(circle at 88% 120%, transparent 54px, rgba(194,161,74,.55) 55px, rgba(194,161,74,.55) 56.5px, transparent 57.5px),
radial-gradient(circle at 88% 120%, transparent 84px, rgba(194,161,74,.32) 85px, rgba(194,161,74,.32) 86.5px, transparent 87.5px),
radial-gradient(circle at 88% 120%, transparent 114px, rgba(194,161,74,.16) 115px, rgba(194,161,74,.16) 116.5px, transparent 117.5px),
linear-gradient(135deg, #062B62 0%, var(--navy) 55%, var(--navy-dk) 100%);
}
.ncl-list > :nth-child(4n+2)::before{background-image:
radial-gradient(circle at 12% -30%, transparent 64px, rgba(194,161,74,.5) 65px, rgba(194,161,74,.5) 66.5px, transparent 67.5px),
radial-gradient(circle at 12% -30%, transparent 98px, rgba(194,161,74,.28) 99px, rgba(194,161,74,.28) 100.5px, transparent 101.5px),
radial-gradient(circle at 12% -30%, transparent 132px, rgba(194,161,74,.14) 133px, rgba(194,161,74,.14) 134.5px, transparent 135.5px),
linear-gradient(135deg, #062B62 0%, var(--navy) 55%, var(--navy-dk) 100%)}
.ncl-list > :nth-child(4n+3)::before{background-image:
radial-gradient(circle at 105% 10%, transparent 44px, rgba(194,161,74,.5) 45px, rgba(194,161,74,.5) 46.5px, transparent 47.5px),
radial-gradient(circle at 105% 10%, transparent 78px, rgba(194,161,74,.28) 79px, rgba(194,161,74,.28) 80.5px, transparent 81.5px),
radial-gradient(circle at 105% 10%, transparent 112px, rgba(194,161,74,.14) 113px, rgba(194,161,74,.14) 114.5px, transparent 115.5px),
linear-gradient(135deg, #062B62 0%, var(--navy) 55%, var(--navy-dk) 100%)}
.ncl-list > :nth-child(4n+4)::before{background-image:
radial-gradient(circle at 70% 140%, transparent 74px, rgba(194,161,74,.5) 75px, rgba(194,161,74,.5) 76.5px, transparent 77.5px),
radial-gradient(circle at 70% 140%, transparent 108px, rgba(194,161,74,.28) 109px, rgba(194,161,74,.28) 110.5px, transparent 111.5px),
radial-gradient(circle at 70% 140%, transparent 142px, rgba(194,161,74,.14) 143px, rgba(194,161,74,.14) 144.5px, transparent 145.5px),
linear-gradient(135deg, #062B62 0%, var(--navy) 55%, var(--navy-dk) 100%)}
.ncl-list-dark > a::before,.ncl-list-dark > span::before{background-color:var(--navy-dk)}
/* Title sits on the photograph; the line and the audience sit beneath. */
.ncl-list b{position:absolute;top:0;left:0;right:0;height:118px;display:flex;align-items:flex-end;padding:0 22px 14px;margin:0;color:var(--white);font-size:19px;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ncl-list > a:hover b{color:var(--brass)}
.ncl-list i{padding:18px 22px 24px;flex:1}
.ncl-list-pop > a small{display:none}
.ncl-list i:last-child{padding-bottom:24px}
.ncl-list-dark b{color:var(--white)}
.ncl-list-dark > a:hover b{color:var(--brass)}
.ncl-list-dark em{color:var(--brass)}
.ncl-list-dark > a:hover em{color:var(--brass-dk)}
.ncl-list > a:hover::before{filter:saturate(1.15)}
.ncl-list-img > a::before,.ncl-list-img > span::before{display:none}
.ncl-list-img b{position:static;height:auto;display:block;align-items:normal;padding:22px 22px 0;margin:0 0 9px;color:var(--navy);font-size:19.5px;line-height:1.28;text-shadow:none}
.ncl-list-img > a:hover b{color:var(--brass-dk)}
.ncl-list-img i{padding:0 22px 24px;flex:none}
.ncl-list-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.ncl-list-2{grid-template-columns:minmax(0,1fr)}}
/* Logo cards: a navy plate carrying the organisation's mark in place of the photograph. */
.ncl-list-logo > a::before,.ncl-list-logo > span::before{display:none}
.ncl-list-logo .lg{display:flex;align-items:center;justify-content:center;height:118px;background:var(--navy);padding:22px 28px}
.ncl-list-logo .lg img{max-height:60px;max-width:72%;width:auto;height:auto;object-fit:contain;border-radius:0;filter:brightness(0) invert(1)}
.ncl-list-logo .lg img.asis{filter:none;max-height:54px}
.ncl-content img.ncl-brandmark{display:block;height:44px;width:auto;margin:0 0 22px;border-radius:0}
.ncl-list-logo .lg .wm{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-.03em;color:var(--white)}
.ncl-list-logo b{position:static;height:auto;display:block;align-items:normal;padding:20px 22px 0;margin:0 0 8px;color:var(--navy);font-size:19px;text-shadow:none}
.ncl-list-logo > a:hover b{color:var(--brass-dk)}
/* A card for a company with no website is the same kind of card as the rest, so it
keeps the same surface rather than taking the sand treatment used elsewhere for
items that are not links. */
.ncl-list-logo > span,.ncl-band-wash .ncl-list-logo > span{background:var(--white);border-bottom-color:var(--brass)}
/* Home page grids: same strip height as everywhere else. */
.hm-sec .ncl-list > a::before,.hm-sec .ncl-list > span::before{height:118px}
/* Links inside the hero standfirst. */
.ncl-hero-lead a,.hm-hero p a{color:var(--white);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px;text-decoration-thickness:2px}
.ncl-hero-lead a:hover,.hm-hero p a:hover{color:var(--brass)}
/* Pop-out cards: no numbers; the + sits on the photograph. */
.ncl-list-pop > a{padding-top:0}
.ncl-list-pop > a::before{content:"";position:static;top:auto;left:auto}
.ncl-list-pop > a::after{top:22px;right:18px;border-color:rgba(255,255,255,.75);color:var(--white)}
.ncl-list-pop > a:hover::after{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.ncl-list-pop > a small{padding:0 22px 22px;margin-top:-10px}
/* Cards expand in place. The open card is ringed in brass and its detail
panel spans the grid beneath its row, so a link from the home page lands
on the card with the detail already open below. */
.ncl-list-pop > a{scroll-margin-top:120px}
.ncl-list-pop > a.is-active{transform:none;box-shadow:0 0 0 3px var(--brass),0 14px 34px rgba(2,34,81,.15)}
.ncl-list-pop > a.is-active::after{content:"\2212";background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.ncl-list-pop > a.is-active b{color:var(--brass)}
.ncl-expand{grid-column:1/-1;position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start;background:var(--white);border-radius:var(--r);border-left:6px solid var(--brass);padding:40px 84px 40px 44px;box-shadow:0 14px 34px rgba(2,34,81,.10);animation:nclExpand .26s ease}
@keyframes nclExpand{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ncl-expand-main > em{display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:10px}
.ncl-expand h3{margin:0 0 8px;font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,2.2vw,28px);color:var(--navy)}
.ncl-expand .ncl-pop-line{margin:0 0 18px;font-size:17px;line-height:1.5;color:var(--grey)}
.ncl-expand p{margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--ink);max-width:none}
.ncl-expand p:last-child{margin-bottom:0}
.ncl-expand .ncl-pop-dir{margin:0 0 18px}
.ncl-expand-side p.ncl-eg{margin:0;background:var(--sand);border-radius:var(--r);border-left:0;padding:22px 24px 24px;color:var(--charcoal);font-size:16px;line-height:1.6}
.ncl-expand-side p.ncl-eg strong{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);display:block;margin-bottom:8px}
.ncl-expand > .ncl-pop-close{top:16px;right:16px}
.ncl-on-dark .ncl-expand h3,.ncl-on-dark .ncl-expand p{color:var(--ink)}
.ncl-on-dark .ncl-expand-main > em,.ncl-on-dark .ncl-expand-side p.ncl-eg strong{color:var(--brass-dk)}
.ncl-on-dark .ncl-expand .ncl-pop-line{color:var(--grey)}
@media (max-width:767px){.ncl-expand{grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 24px 26px}.ncl-expand > .ncl-pop-close{top:12px;right:12px;width:34px;height:34px}}
/* Home page Advisory and Consulting: prose and figures on one side, a
ruled index of links on the other. The inner pages carry the cards. */
/* The heading sits inside the left column so that the index beside it starts at
the same height, rather than a standfirst floating in the top right. */
.hm-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:start;margin-top:0}
.hm-split-txt > .hm-rule{margin-bottom:22px}
.hm-split-txt > h2{margin:0 0 26px}
.hm-split-rev > .hm-split-txt{order:2}
/* A heading with its own line beneath it, where there is no second column. */
.hm-head{max-width:70ch}
.hm-head h2{margin:0}
.hm-head .hm-lead{margin-top:20px}
.hm-split-txt p{font-size:18px;line-height:1.68;color:var(--ink);max-width:none;margin:0}
.hm-split .ncl-btnrow{margin-top:30px !important}
/* Figures wrap onto a second line rather than being crushed into columns too
narrow for the words. */
.hm-split .ncl-stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:34px !important}
.hm-split .ncl-stats > span{padding:18px 20px 20px;min-width:0}
.ncl-stats > span{min-width:0}
.ncl-stats b,.ncl-stats i{overflow-wrap:break-word}
.hm-split .ncl-stats b{font-size:clamp(26px,2.4vw,32px)}
.hm-index{margin:0 !important;padding:0;max-width:none !important;border-top:2px solid var(--brass)}
.hm-index > strong{display:block;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);padding:16px 0 4px}
.hm-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy)}
.hm-index a b{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.hm-index a i{grid-column:1;font-style:normal;font-size:14.5px;line-height:1.45;color:var(--grey);margin-top:3px}
.hm-index a::after{content:"\2192";grid-column:2;grid-row:1;color:var(--brass);font-size:18px;transition:transform .16s ease}
.hm-index a:hover{color:var(--brass-dk)}
.hm-index a:hover::after{transform:translateX(4px)}
.ncl-on-dark .hm-split-txt p{color:rgba(255,255,255,.88)}
.ncl-on-dark .hm-index > strong{color:var(--brass)}
.ncl-on-dark .hm-index a{color:var(--white);border-bottom-color:rgba(255,255,255,.16)}
.ncl-on-dark .hm-index a i{color:rgba(255,255,255,.66)}
.ncl-on-dark .hm-index a:hover{color:var(--brass)}
/* Two columns need room. Below that the prose and the index each get the full
width rather than being squeezed into a pair of narrow strips. */
/* Two columns of prose and links need real room. Below that each takes the
full width rather than becoming a pair of narrow strips. */
@media (max-width:1200px){.hm-split{grid-template-columns:minmax(0,1fr);gap:40px}.hm-split-rev > .hm-split-txt{order:0}}
/* Insights index: all articles are in the markup; those past the first batch
are folded until Load more is pressed. */
.ncl-list-img > a.ncl-more{display:none}
.ncl-loadmore{justify-content:center;margin-top:36px !important}
.ncl-loadmore button.ncl-btn{font-family:inherit;cursor:pointer;line-height:1.2}
.ncl-loadmore button.ncl-btn span{opacity:.7;font-weight:500}
/* Sectors: a plain ruled grid, not cards. Nothing here is a link, so
nothing is dressed as one. */
.ncl-sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;margin:40px 0 0 !important;padding:0;max-width:none !important}
.ncl-sectors > span{display:block;padding-top:18px;border-top:2px solid var(--brass)}
.ncl-sectors b{display:block;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1.25;color:var(--navy);margin-bottom:8px}
.ncl-sectors i{display:block;font-style:normal;font-size:15px;line-height:1.5;color:var(--grey)}
.ncl-on-dark .ncl-sectors b{color:var(--white)}
.ncl-on-dark .ncl-sectors i{color:rgba(255,255,255,.72)}
@media (max-width:980px){.ncl-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ncl-sectors{grid-template-columns:minmax(0,1fr)}}
/* Home page grids use the same component, same strip height. */
/* Client logo wall: original marks on white tiles, muted until hover. */
.ncl-content p.ncl-logowall,.hm-logos p.ncl-logowall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:36px 0 0;max-width:none}
/* The client marks on the home page, under the opening statement. */
.hm-logos{margin:0;padding:0}
.hm-logos-lead{margin:0;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--navy)}
.hm-logos .ncl-btnrow{margin:30px 0 0}
.ncl-logowall span{display:flex;align-items:center;justify-content:center;height:104px;background:var(--white);border-radius:var(--r);padding:18px 22px;border:1px solid var(--line)}
.ncl-logowall img{max-height:52px;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:0;filter:grayscale(1);opacity:.75;transition:.2s}
.ncl-logowall span:hover img{filter:none;opacity:1}
@media (max-width:1100px){.ncl-content p.ncl-logowall,.hm-logos p.ncl-logowall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.ncl-content p.ncl-logowall,.hm-logos p.ncl-logowall{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Comparison table: routes as columns, questions as rows. */
.ncl-content table.ncl-compare{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;margin:40px 0 0;font-size:15.5px;line-height:1.5;background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 0 var(--line)}
.ncl-content .ncl-compare thead th:first-child,.ncl-content .ncl-compare tbody th{width:14%}
.ncl-content .ncl-compare tbody tr:last-child td{text-align:center}
.ncl-content .ncl-compare tbody tr:last-child td a.ncl-btn-sm{white-space:normal;max-width:100%}
.ncl-content .ncl-compare th,.ncl-content .ncl-compare td{padding:18px 20px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}
.ncl-content .ncl-compare thead th{background:var(--navy);color:var(--white);font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;border-bottom:0}
.ncl-content .ncl-compare thead th:first-child{background:var(--navy-dk)}
.ncl-content .ncl-compare thead th small{display:block;font-family:var(--sans);font-weight:400;font-size:13px;color:rgba(255,255,255,.7);margin-top:6px;letter-spacing:0}
.ncl-content .ncl-compare tbody th{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;text-transform:none;color:var(--white);background:var(--navy)}
.ncl-content .ncl-compare tbody tr:last-child th{background:var(--navy)}
.ncl-content .ncl-compare tbody tr:last-child th,.ncl-content .ncl-compare tbody tr:last-child td{border-bottom:0}
.ncl-content .ncl-compare td{color:var(--ink)}
.ncl-content .ncl-compare td a{white-space:normal;overflow-wrap:break-word}
.ncl-content a.ncl-btn-sm{padding:10px 18px;font-size:14px;white-space:normal;text-decoration:none;display:inline-block}
.ncl-content .ncl-compare tbody tr:last-child td{padding-top:20px;padding-bottom:22px}
/* Built from the table by script, and shown only on a phone. */
.ncl-compare-acc{display:none}
@media (max-width:900px){
.ncl-content table.ncl-compare{display:none}
.ncl-content .ncl-compare-acc{display:block;margin:32px 0 0}
/* White cards, because this table sits on a navy band: navy panels would
vanish into it. White also reads correctly on the cream bands. */
.ncl-content .ncl-compare-acc details{background:var(--white);border-radius:var(--r-lg);overflow:hidden;border-top:4px solid var(--brass)}
.ncl-content .ncl-compare-acc details+details{margin-top:12px}
.ncl-content .ncl-compare-acc summary{list-style:none;cursor:pointer;position:relative;display:block;padding:17px 52px 17px 20px;background:var(--white)}
.ncl-content .ncl-compare-acc summary::-webkit-details-marker{display:none}
.ncl-content .ncl-compare-acc summary b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--navy)}
.ncl-content .ncl-compare-acc summary small{display:block;font-size:13px;color:rgba(1,20,47,.62);margin-top:5px;line-height:1.45}
.ncl-content .ncl-compare-acc details[open] summary{border-bottom:1px solid var(--line)}
/* A chevron that turns when the panel opens. */
.ncl-content .ncl-compare-acc summary::after{content:"";position:absolute;right:22px;top:25px;width:9px;height:9px;border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(45deg);transition:transform .18s ease}
.ncl-content .ncl-compare-acc details[open] summary::after{transform:rotate(-135deg);top:29px}
.ncl-content .ncl-compare-acc dl{margin:0;padding:4px 20px 22px}
.ncl-content .ncl-compare-acc dt{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(1,20,47,.55);margin:18px 0 4px}
.ncl-content .ncl-compare-acc dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.ncl-content .ncl-compare-acc dd a.ncl-btn-sm{margin-top:4px}
}
/* Skip link */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:100;background:var(--brass);color:var(--on-brass);padding:10px 16px;border-radius:8px}
/* ---------------- Disclosure rows ----------------
Nine equal tiles, each with the same decorative navy cap, say nothing about
nine different services: the reader has to read all nine to find the one
they want. With "rows" switched on, the same expanding list is drawn as
compact full-width rows instead — the title, a sentence of scope and a
visible action — and the detail opens directly beneath the row chosen.
The action is a word as well as a sign, because a bare plus on a tile is
not an instruction. */
.ncl-list .ncl-row-go{display:none}
.ncl-list.ncl-list-rows{display:block;gap:0;border-top:1px solid var(--line)}
.ncl-list-rows > a{
display:grid;grid-template-columns:35% minmax(0,1fr) auto;align-items:start;gap:28px;
padding:22px 4px;background:none;border:0;border-bottom:1px solid var(--line);
border-radius:0;box-shadow:none;overflow:visible;transition:background .16s ease
}
/* No photograph cap and no floating plus: the row is one flat surface. */
.ncl-list-rows > a::before,.ncl-list-rows > a::after{display:none;content:none}
.ncl-list-rows > a:hover{transform:none;box-shadow:none;background:rgba(2,34,81,.035)}
.ncl-list-rows > a:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.ncl-list-rows b{
position:static;height:auto;display:block;padding:0;margin:0;text-shadow:none;
font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.3;color:var(--navy)
}
.ncl-list-rows > a:hover b{color:var(--brass-dk)}
.ncl-list-rows i{padding:0;flex:none;font-size:16px;line-height:1.55;color:var(--grey)}
.ncl-list-rows .ncl-row-go{
display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;
white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:13.5px;
letter-spacing:.03em;color:var(--navy)
}
.ncl-list-rows .ncl-row-plus{
flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--navy);
display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease
}
.ncl-list-rows > a:hover .ncl-row-go{color:var(--brass-dk)}
.ncl-list-rows > a:hover .ncl-row-plus{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
/* The open row keeps its brass, and the plus turns into a cross. */
.ncl-list-rows > a.is-active{box-shadow:none;background:rgba(2,34,81,.045);border-bottom-color:var(--brass)}
.ncl-list-rows > a.is-active b{color:var(--brass-dk)}
.ncl-list-rows > a.is-active .ncl-row-plus{
background:var(--brass);border-color:var(--brass);color:var(--on-brass);transform:rotate(45deg)
}
/* The panel belongs to the row above it, not to a grid row. */
.ncl-list-rows .ncl-expand{grid-column:auto;margin:0;border-bottom:1px solid var(--line);border-radius:0}
@media (max-width:767px){
/* One column on a phone: title, scope, then the action beneath them. */
.ncl-list-rows > a,.ncl-list-rows > button{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 2px}
.ncl-list-rows .ncl-row-go{justify-content:flex-start;margin-top:2px}
}
/* The stylesheet that ships with the parent theme sets white-space:nowrap on
every button. These rows became buttons when the disclosures were made
operable from the keyboard, and inherited it, so their titles and scope
lines ran off the side of the page instead of wrapping. The text wraps
again here, and nothing is clipped to hide it. */
.ncl-list-rows > button,
.ncl-list-rows > button b,
.ncl-list-rows > button i{white-space:normal;min-width:0;overflow-wrap:break-word}
.ncl-list-rows > button > *{min-width:0}
.ncl-list-rows b,.ncl-list-rows i{min-width:0;overflow-wrap:break-word}
/* The brief asks for these rows on a light background, but the advisory
services sit in a navy band and moving the band would break the page's
cream-and-navy alternation. So the list carries its own light surface and
sits on the navy as one panel, which keeps both the rhythm and the
legibility. The titles and scope lines are already navy and grey from the
rules above; only the surface beneath them has to change. */
.ncl-on-dark .ncl-list-rows,.ncl-list-dark.ncl-list-rows{
background:var(--white);border-radius:var(--r-lg);border-top:4px solid var(--brass);
padding:2px 28px;box-shadow:0 14px 34px rgba(1,20,47,.18)
}
.ncl-on-dark .ncl-list-rows > a:last-of-type,.ncl-list-dark.ncl-list-rows > a:last-of-type{border-bottom:0}
.ncl-on-dark .ncl-list-rows > a.is-active:last-of-type,.ncl-list-dark.ncl-list-rows > a.is-active:last-of-type{border-bottom:1px solid var(--brass)}
.ncl-on-dark .ncl-list-rows .ncl-expand,.ncl-list-dark.ncl-list-rows .ncl-expand{
margin:0 -28px;border-radius:0;box-shadow:none;background:var(--sand);border-left:6px solid var(--brass)
}
@media (max-width:767px){
.ncl-on-dark .ncl-list-rows,.ncl-list-dark.ncl-list-rows{padding:2px 18px}
.ncl-on-dark .ncl-list-rows .ncl-expand,.ncl-list-dark.ncl-list-rows .ncl-expand{margin:0 -18px}
}
/* In rows the row itself is the control: its action turns into a cross when
the panel is open, so the floating close button is a second way to do the
same thing, and it hangs over the row above. */
.ncl-list-rows .ncl-expand > .ncl-pop-close{display:none}
/* The example is a separate field, so it needs its own surface rather than
the panel's. */
.ncl-on-dark .ncl-list-rows .ncl-expand-side p.ncl-eg,
.ncl-list-dark.ncl-list-rows .ncl-expand-side p.ncl-eg{background:var(--white)}
/* ---------------- The narrowest phones ----------------
At a 320px viewport the header asks for more room than there is: 44px of
padding each side, a 202px wordmark that is set not to shrink, a 40px gap
and the Menu button come to 408px, so the page scrolls sideways. The
padding and the gap come in, and the wordmark is allowed to scale. */
@media (max-width:430px){
.ncl-wrap{padding-left:20px;padding-right:20px}
.ncl-header-bar{padding-left:20px;padding-right:20px;gap:12px}
.ncl-brand{flex:0 1 auto;min-width:0}
.ncl-brand img{max-width:100%;height:auto}
.ncl-nav-toggle{flex:0 0 auto}
}
/* ---------------- The featured article ----------------
The newest article leads the insights index as a wide editorial card, so
the page opens with something to read rather than with fifteen identical
tiles. The rest keep their chronological grid. */
.ncl-feature{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;
background:var(--white);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
border-top:5px solid var(--brass);box-shadow:0 14px 34px rgba(2,34,81,.10);margin:0 0 34px;
transition:box-shadow .2s ease,transform .2s ease
}
.ncl-feature:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(2,34,81,.16)}
.ncl-feature .im{display:block;min-height:280px;overflow:hidden}
.ncl-feature .im img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ncl-feature .tx{display:flex;flex-direction:column;padding:34px 38px 32px;gap:0}
.ncl-feature em{
font-style:normal;font-family:var(--disp);font-weight:700;font-size:12.5px;
letter-spacing:.09em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:12px
}
.ncl-feature b{
font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.3vw,28px);line-height:1.22;
letter-spacing:-.02em;color:var(--navy);margin:0 0 10px
}
.ncl-feature:hover b{color:var(--brass-dk)}
.ncl-feature time{
font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.05em;
text-transform:uppercase;color:var(--grey);margin-bottom:14px
}
.ncl-feature i{font-style:normal;font-size:16.5px;line-height:1.6;color:var(--ink);margin:0 0 20px}
.ncl-feature .go{
margin-top:auto;align-self:flex-start;font-family:var(--disp);font-weight:700;font-size:14px;
color:var(--navy);border-bottom:2px solid var(--brass);padding-bottom:3px
}
.ncl-feature:hover .go{color:var(--brass-dk)}
@media (max-width:860px){
.ncl-feature{grid-template-columns:minmax(0,1fr)}
.ncl-feature .im{min-height:200px;max-height:260px}
.ncl-feature .tx{padding:26px 24px 26px}
}
/* The standfirst inherits the link underline from the content rules; the
brass rule under "Read the article" is the only underline wanted here. */
.ncl-content .ncl-feature,.ncl-content .ncl-feature *{text-decoration:none}
/* A row that links to another page gets an arrow rather than a plus: it takes
the reader somewhere, it does not open something in place. */
.ncl-list-rows .ncl-row-arrow{font-size:16px;font-weight:700}
.ncl-list-rows > a:hover .ncl-row-arrow{transform:translateX(2px)}
/* The Menu button was picking up a pink from outside the child theme. It is
the same kind of control as Contact in the desktop bar, so it takes the
same brass. Set late and specifically so nothing downstream reclaims it. */
@media (max-width:1120px){
.ncl-header .ncl-header-bar .ncl-nav-toggle,
.ncl-header .ncl-header-bar .ncl-nav-toggle:hover,
.ncl-header .ncl-header-bar .ncl-nav-toggle:focus{
background:var(--brass);border-color:var(--brass);color:var(--on-brass)
}
.ncl-header .ncl-header-bar .ncl-nav-toggle:hover{background:var(--brass-lt);border-color:var(--brass-lt)}
}
/* ---------------- Atomeris on the home page ----------------
Two columns: what can be bought today on the left, what is still being
built on the right. Keeping them apart is the point, so that a reader is
never left guessing which of the two they are looking at. */
.hm-atom{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start;margin:36px 0 34px}
.hm-atom-col h3{
font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--brass-dk);margin:0 0 12px
}
.hm-atom-col h3+h3{margin-top:28px}
.hm-atom-col p{margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--ink);max-width:none}
.hm-atom-col p:last-child{margin-bottom:0}
.hm-atom-col strong{font-weight:700;color:var(--navy)}
@media (max-width:860px){
.hm-atom{grid-template-columns:minmax(0,1fr);gap:30px;margin:28px 0}
.hm-atom-col h3+h3{margin-top:24px}
}
/* ---------------- The Integrated Nuclear Alliance group ----------------
The alliance overview and its three partner profiles have to read as one
thing, so the band carries a soft tint and a brass edge and is announced
as a region. Everything after it returns to the ordinary page background.
The partners are set as editorial rows rather than cards: no logo column,
because approved logo assets exist for only one of the three and equal
prominence matters more than decoration. */
.ncl-band.ncl-band-ina{background:var(--sand);border-top:4px solid var(--brass);border-bottom:1px solid var(--line)}
.ncl-band.ncl-band-ina > .ncl-wrap{padding-top:8px;padding-bottom:8px}
.ncl-ina-group{margin:0}
.ncl-content .ncl-ina-group p.ncl-ina-intro{max-width:72ch;font-size:17.5px;line-height:1.65;color:var(--ink);margin:0 0 18px}
.ncl-content .ncl-ina-group p.ncl-ina-link{margin:0 0 6px}
/* The rows. One column of identity, one of substance, divided by a light rule. */
.ncl-ina-rows{margin:30px 0 0;border-top:1px solid var(--line)}
.ncl-ina-row{
display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,2fr);gap:40px;
align-items:start;padding:30px 0;border-bottom:1px solid var(--line)
}
.ncl-content .ncl-ina-row h3{
margin:0 0 8px;font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.28;
letter-spacing:-.01em;color:var(--navy)
}
.ncl-content .ncl-ina-row p.ncl-ina-cap{
margin:0;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--brass-dk);line-height:1.4
}
.ncl-content .ncl-ina-row p.ncl-ina-desc{margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--ink);max-width:68ch}
.ncl-content .ncl-ina-row p.ncl-ina-more{margin:0}
.ncl-content .ncl-ina-group a{
font-family:var(--disp);font-weight:700;font-size:15px;color:var(--navy);
text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:2px
}
.ncl-content .ncl-ina-group a:hover{color:var(--brass-dk)}
.ncl-content .ncl-ina-group a:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-bottom-color:transparent}
@media (max-width:860px){
/* Stacked: company name, capability label, description, link. */
.ncl-ina-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 0}
.ncl-content .ncl-ina-row p.ncl-ina-cap{margin-bottom:4px}
.ncl-content .ncl-ina-group p.ncl-ina-intro{font-size:16.5px}
}
/* ---------------- A numbered process ----------------
Used where a page sets out steps that would happen, rather than steps that
already have. The numbering is the point, so it is a real ordered list. */
.ncl-content ol.ncl-steps{list-style:none;counter-reset:nclstep;margin:28px 0 0;padding:0;max-width:78ch}
.ncl-content ol.ncl-steps li{
counter-increment:nclstep;position:relative;padding:0 0 22px 62px;margin:0;
border-bottom:1px solid var(--line)
}
.ncl-content ol.ncl-steps li+li{padding-top:22px}
.ncl-content ol.ncl-steps li:last-child{border-bottom:0;padding-bottom:0}
.ncl-content ol.ncl-steps li::before{
content:counter(nclstep);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
background:var(--brass);color:var(--on-brass);display:flex;align-items:center;justify-content:center;
font-family:var(--disp);font-weight:700;font-size:16px
}
.ncl-content ol.ncl-steps li+li::before{top:22px}
.ncl-content ol.ncl-steps b{
display:block;font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.3;
color:var(--navy);margin:0 0 6px
}
.ncl-content ol.ncl-steps span{display:block;font-size:16.5px;line-height:1.6;color:var(--ink)}
.ncl-content p.ncl-privacy-note{font-size:15px;line-height:1.6;color:var(--grey);max-width:72ch}
@media (max-width:560px){
.ncl-content ol.ncl-steps li{padding-left:0;padding-top:48px}
.ncl-content ol.ncl-steps li+li{padding-top:48px}
.ncl-content ol.ncl-steps li+li::before{top:22px}
}
/* The theme sets ordered lists in the content as a grid, which turned the
steps into columns and broke the sequence. Steps are read top to bottom. */
.ncl-content ol.ncl-steps{display:block;grid-template-columns:none;gap:0}
/* The band this sits in alternates, so the steps have to survive navy. */
.ncl-content .ncl-on-dark ol.ncl-steps li{border-bottom-color:rgba(255,255,255,.22)}
.ncl-content .ncl-on-dark ol.ncl-steps b{color:var(--white)}
.ncl-content .ncl-on-dark ol.ncl-steps span{color:rgba(255,255,255,.82)}
/* The Atomeris section on the home page is now a short pointer to the
overview rather than a copy of it, so it needs one readable measure
instead of the old two-column block. */
.hm-atom-line{max-width:76ch;margin:26px 0 30px;font-size:17px;line-height:1.65;color:var(--ink)}
/* ---------------- Disclosure controls are buttons ----------------
The cards that open a panel are now real buttons, so they answer to Space
as well as Enter. The card styling was written for anchors, so the same
rules are restated for buttons, together with the reset a button needs to
stop looking like a form control. */
.ncl-list > button{
-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;
font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer
}
.ncl-list > button,.ncl-list > span{padding:0;overflow:hidden;display:flex;flex-direction:column;position:relative}
.ncl-list > button{
background:var(--white);border-radius:var(--r);border-bottom:3px solid var(--brass);
box-shadow:0 10px 26px rgba(2,34,81,.07);transition:transform .2s ease,box-shadow .2s ease
}
.ncl-list > button:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,34,81,.15)}
.ncl-list > button:hover b{color:var(--brass-dk)}
.ncl-list > button::before{
content:"";display:block;height:82px;flex:none;background-size:cover;background-position:center 40%;
background-color:var(--navy);background-blend-mode:multiply
}
.ncl-list-dark > button{background:rgba(255,255,255,.07);border-bottom-color:var(--brass)}
.ncl-list-dark > button:hover{background:var(--white)}
.ncl-list-dark > button:hover b{color:var(--navy)}
.ncl-list-dark > button::before{background-color:var(--navy-dk)}
.ncl-list-pop > button{padding-top:0;scroll-margin-top:120px}
.ncl-list-pop > button::after{
content:"+";position:absolute;top:22px;right:18px;width:32px;height:32px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;
font-size:20px;line-height:1;color:var(--white);transition:.16s
}
.ncl-list-pop > button:hover::after{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.ncl-list-pop > button.is-active{transform:none;box-shadow:0 0 0 3px var(--brass),0 14px 34px rgba(2,34,81,.15)}
.ncl-list-pop > button.is-active::after{content:"\2212";background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.ncl-list-pop > button.is-active b{color:var(--brass)}
/* Keyboard focus has to be obvious on every one of these. */
.ncl-list > button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
/* The row layout, restated for buttons. */
.ncl-list-rows > button{
display:grid;grid-template-columns:35% minmax(0,1fr) auto;align-items:start;gap:28px;
padding:22px 4px;background:none;border:0;border-bottom:1px solid var(--line);
border-radius:0;box-shadow:none;overflow:visible;transition:background .16s ease
}
.ncl-list-rows > button::before,.ncl-list-rows > button::after{display:none;content:none}
.ncl-list-rows > button:hover{transform:none;box-shadow:none;background:rgba(2,34,81,.035)}
.ncl-list-rows > button:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.ncl-list-rows > button:hover .ncl-row-go{color:var(--brass-dk)}
.ncl-list-rows > button:hover .ncl-row-plus{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.ncl-list-rows > button.is-active{box-shadow:none;background:rgba(2,34,81,.045);border-bottom-color:var(--brass)}
.ncl-list-rows > button.is-active b{color:var(--brass-dk)}
.ncl-list-rows > button.is-active .ncl-row-plus{
background:var(--brass);border-color:var(--brass);color:var(--on-brass);transform:rotate(45deg)
}
.ncl-on-dark .ncl-list-rows > button:last-of-type{border-bottom:0}
.ncl-on-dark .ncl-list-rows > button.is-active:last-of-type{border-bottom:1px solid var(--brass)}
/* A hidden panel must stay hidden: .ncl-expand sets display, which would
otherwise beat the browser's own rule for the hidden attribute. */
.ncl-expand[hidden]{display:none}
/* Long unbroken strings, chiefly email addresses written out in full, used to
push the 320px layout sideways. */
.ncl-content a,.ncl-content p,.ncl-content li,.ncl-hero-lead a{overflow-wrap:break-word;word-break:break-word}
/* The skip link's target takes focus without drawing a box round the page. */
#content:focus,#main-content:focus{outline:none}
/* The adviser counts beside each advisory heading were set in --grey, which
on the navy band measures 3.77:1 at 14px. The count itself is unchanged;
only the colour is. */
.ncl-content .ncl-on-dark h3.ncl-people-h span,
.ncl-content .ncl-band-dark h3.ncl-people-h span{color:rgba(255,255,255,.82)}
/* The rule above has to outweigh .ncl-content h3.ncl-people-h span, which is
where the grey comes from, so it carries the same element parts plus the
band class. The band sits inside .ncl-content, not outside it. */
/* A note marking content that is still in draft, so a reader is not left to
assume a listing has been agreed with the company named. */
.ncl-content p.ncl-draft-note{
font-size:15px;line-height:1.6;color:var(--brass-dk);max-width:76ch;
border-left:3px solid var(--brass);padding-left:16px;margin:0 0 26px
}
.ncl-on-dark p.ncl-draft-note{color:var(--brass-lt)}
/* ---------------- Alliance and affiliate profiles ---------------- */
/* Affiliates use the same row as the alliance partners, so the two sets carry
the same weight. The group is bounded in the same way; only the heading
above it says which is which. */
.ncl-ina-affiliates{margin:0}
.ncl-ina-affiliates .ncl-ina-row:first-child{border-top:1px solid var(--line)}
/* A consistent area for the mark, whatever shape the supplied file is. A
company with no official asset is named in type instead: that is a name, not
a logo, and is set so it does not read as one. */
.ncl-ina-logo{
display:flex;align-items:center;justify-content:flex-start;
height:54px;width:100%;max-width:190px;margin:0 0 14px;overflow:hidden;
}
.ncl-ina-logo img{max-height:54px;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:0;display:block}
.ncl-ina-logo.is-name{height:auto;margin-bottom:10px}
.ncl-ina-logo.is-name span{
font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--brass-dk);line-height:1.3;
}
.ncl-on-dark .ncl-ina-logo.is-name span{color:var(--brass-lt)}
@media (max-width:767px){
.ncl-ina-logo{height:44px;max-width:150px;margin-bottom:10px}
.ncl-ina-logo img{max-height:44px}
}
/* The affiliate section can land on a navy band, where the row's own navy
type disappeared. Every part of a profile row gets its dark counterpart. */
.ncl-on-dark .ncl-ina-row,.ncl-band-dark .ncl-ina-row{border-color:rgba(255,255,255,.18)}
.ncl-content .ncl-on-dark .ncl-ina-row h3,.ncl-content .ncl-band-dark .ncl-ina-row h3{color:var(--white)}
.ncl-content .ncl-on-dark .ncl-ina-row p.ncl-ina-cap,.ncl-content .ncl-band-dark .ncl-ina-row p.ncl-ina-cap{color:var(--brass-lt)}
.ncl-content .ncl-on-dark .ncl-ina-row p.ncl-ina-desc,.ncl-content .ncl-band-dark .ncl-ina-row p.ncl-ina-desc{color:rgba(255,255,255,.88)}
.ncl-content .ncl-on-dark .ncl-ina-group a,.ncl-content .ncl-band-dark .ncl-ina-group a{color:var(--brass-lt)}
.ncl-content .ncl-on-dark .ncl-ina-group a:hover,.ncl-content .ncl-band-dark .ncl-ina-group a:hover{color:var(--white)}
.ncl-on-dark .ncl-ina-affiliates .ncl-ina-row:first-child,.ncl-band-dark .ncl-ina-affiliates .ncl-ina-row:first-child{border-top-color:rgba(255,255,255,.18)}
/* Supplied marks are dark-on-transparent as often as not, so on a navy band
they sit on a light plate rather than vanishing into it. */
.ncl-on-dark .ncl-ina-logo:not(.is-name),.ncl-band-dark .ncl-ina-logo:not(.is-name){
background:var(--white);border-radius:var(--r);padding:8px 12px;box-sizing:content-box;max-width:166px;
}
/* A mark that is itself mostly white needs a dark plate, or it vanishes into
the white one. Applied per logo, so nothing else changes. */
.ncl-ina-logo.is-dark,
.ncl-on-dark .ncl-ina-logo.is-dark,
.ncl-band-dark .ncl-ina-logo.is-dark{
background:var(--navy);border-radius:var(--r);padding:8px 14px;box-sizing:content-box;max-width:166px;
}
/* The button restatement of the row layout appears later in this file than the
phone breakpoint, so it was reinstating three columns at every width and the
middle column collapsed to zero. Restated here, after it, so one column wins
on a phone for both the link and button forms of a row. */
@media (max-width:767px){
.ncl-list-rows > a,
.ncl-list-rows > button{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 2px}
.ncl-list-rows > a > *,
.ncl-list-rows > button > *{min-width:0;max-width:100%}
.ncl-list-rows .ncl-row-go{justify-content:flex-start;margin-top:2px}
}
/* ---------------- Reduced motion ---------------- */
/* The only thing suppressed before was the page's own smooth scrolling. The
panel animation and the lift on hover are movement too, so a reader who has
asked their system for less of it gets none of them. Nothing is hidden and
no state is lost: the same things open and close, they simply appear. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;animation-iteration-count:1 !important;
transition-duration:0.01ms !important;scroll-behavior:auto !important;
}
.ncl-expand{animation:none}
.ncl-list > a:hover,
.ncl-list-rows > a:hover,
.ncl-list-rows > button:hover{transform:none}
.ncl-list-rows > a:hover .ncl-row-arrow,
.ncl-list-rows > button:hover .ncl-row-arrow{transform:none}
}
/* ---------------- Grid cards drawn as buttons ----------------
The disclosure cards in the practice grids became buttons when they were
made operable from the keyboard, but every rule that draws a grid card
names "> a" or "> span". The buttons were left with the parent theme's own
button styling: a pink border, nowrap text clipped inside the card, and a
title still absolutely positioned over a navy plate that was never drawn.
This restates the whole card for them. Nothing here touches the Advisory
row list (.ncl-list-rows) or the affiliate grid (.ncl-list-logo). */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc{
appearance:none;-webkit-appearance:none;font:inherit;text-align:left;cursor:pointer;
background:var(--white);color:inherit;margin:0;padding:0;overflow:hidden;
display:flex;flex-direction:column;position:relative;width:100%;
border:0;border-bottom:4px solid var(--brass);border-radius:var(--r);
box-shadow:none;transition:transform .16s ease,box-shadow .16s ease;
}
/* The parent theme's pink button border, in every state. */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:hover,
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:focus,
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:active{
border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;
background:var(--white);
}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,34,81,.15)}
/* A keyboard ring that belongs to this site. */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:focus{outline:none}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
/* The navy plate the title sits on, matching the linked cards beside it. */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc::before{
content:"";display:block;height:118px;flex:none;border-radius:0;
background-color:var(--navy);background-repeat:no-repeat;background-size:auto;
background-image:
radial-gradient(circle at 88% 120%, transparent 54px, rgba(194,161,74,.55) 55px, rgba(194,161,74,.55) 56.5px, transparent 57.5px),
radial-gradient(circle at 88% 120%, transparent 84px, rgba(194,161,74,.32) 85px, rgba(194,161,74,.32) 86.5px, transparent 87.5px),
radial-gradient(circle at 88% 120%, transparent 114px, rgba(194,161,74,.16) 115px, rgba(194,161,74,.16) 116.5px, transparent 117.5px),
linear-gradient(135deg, #062B62 0%, var(--navy) 55%, var(--navy-dk) 100%);
}
/* The title reads on the plate and wraps. A long one grows the plate with it
rather than being cut off, so nothing is lost at any width. */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc > b{
position:absolute;top:0;left:0;right:0;min-height:118px;height:auto;
display:flex;align-items:flex-end;padding:14px 22px;margin:0;
color:var(--white);font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.2;
letter-spacing:-.02em;text-shadow:0 1px 2px rgba(0,0,0,.25);
white-space:normal;overflow-wrap:break-word;min-width:0;
}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:hover > b{color:var(--brass)}
/* The supporting line sits beneath the plate, in the body of the card. */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc > i{
display:block;padding:18px 22px 0;margin:0;flex:1;font-style:normal;
font-size:15.5px;line-height:1.55;color:var(--grey);
white-space:normal;overflow-wrap:break-word;min-width:0;
}
/* One action, one sign. */
.ncl-list:not(.ncl-list-rows) > button.ncl-disc .ncl-row-go{
display:flex;align-items:center;gap:10px;margin:auto 0 0;padding:14px 22px 20px;
font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--brass-dk);white-space:normal;
}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc .ncl-row-plus{
flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--brass);
display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
color:var(--brass-dk);background:transparent;transition:background .16s ease,color .16s ease;
}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc:hover .ncl-row-plus,
.ncl-list:not(.ncl-list-rows) > button.ncl-disc.is-active .ncl-row-plus{
background:var(--brass);border-color:var(--brass);color:var(--on-brass);
}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc.is-active{border-bottom-color:var(--brass-dk)}
/* The plate's own plus belonged to the linked cards; the action row carries it here. */
.ncl-list-pop > button.ncl-disc::after{content:none;display:none}
@media (max-width:767px){
.ncl-list:not(.ncl-list-rows) > button.ncl-disc > b{font-size:18px;min-height:96px}
.ncl-list:not(.ncl-list-rows) > button.ncl-disc::before{height:96px}
}
/* ---------------- Form consent links ----------------
The enquiry forms sit inside a navy band on some pages, where links are set
white. The consent box itself is white, so the Privacy Policy link was white
on white and only its brass underline showed. Links inside a form are scoped
to the form's own surface, whatever band it sits in. */
.ncl-content .wpforms-container a,
.ncl-content .wpforms-container .wpforms-field-label-inline a,
.ncl-on-dark .wpforms-container a,
.ncl-band-dark .wpforms-container a{
color:var(--navy);text-decoration:underline;text-decoration-color:var(--brass);
text-underline-offset:3px;text-decoration-thickness:2px;
}
.ncl-content .wpforms-container a:hover,
.ncl-on-dark .wpforms-container a:hover,
.ncl-band-dark .wpforms-container a:hover{color:var(--brass-dk)}
.ncl-content .wpforms-container a:focus-visible,
.ncl-on-dark .wpforms-container a:focus-visible,
.ncl-band-dark .wpforms-container a:focus-visible{
outline:3px solid var(--brass);outline-offset:2px;border-radius:2px;
}
/* ---------------- Card body text on the sand band ----------------
#69727d on the sand #F0EAE0 is 4.08:1, under the 4.5:1 needed at this size.
A darker grey of the same family reads at 5.95:1 on sand and 7.4:1 on white.
The row list keeps its own settled styling. */
.ncl-list:not(.ncl-list-rows) i{color:#4F5862}
/* ---------------- Home page client logos ----------------
Two faults sat on top of each other here and the strip rendered as empty
tiles. .hm-logos was still the five-column grid from when it held the logo
spans directly; it now wraps a lead, the logo wall and a button row, so the
grid collapsed those three children to zero width. And .hm-logos img carried
brightness(0) invert(1), which was right when the strip sat on navy and
turns every mark white on the cream band it sits on now. */
.hm-logos{display:block;grid-template-columns:none;gap:0}
.hm-logos > *{min-width:0}
/* The wall draws its own white tiles, which also separates this band from the
cream section above it. */
.hm-logos p.ncl-logowall img,
.hm-logos span img{
filter:grayscale(1);opacity:.8;max-height:52px;max-width:100%;
width:auto;height:auto;object-fit:contain;
}
.hm-logos p.ncl-logowall span:hover img{filter:none;opacity:1}
/* The per-position height tweaks belonged to the old flat strip and now land
on the wrong marks. */
.hm-logos span:nth-child(n) img{max-height:52px}
.hm-logos p.ncl-logowall{margin-top:26px}
/* The opening statement became a real heading so assistive technology gets the
same structure that is visible on screen. It keeps its own look rather than
the band-heading size, and the band's :has() layout rules still match it. */
.ncl-content h2.ncl-lead-big{
max-width:34ch;margin:0 0 22px;
font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.2vw,31px);
letter-spacing:-.025em;line-height:1.22;color:var(--navy);
}
.ncl-content h2.ncl-lead-big::before{
content:"";display:block;width:84px;height:6px;background:var(--brass);
border-radius:3px;margin:0 0 26px;
}
.ncl-content .ncl-band .ncl-wrap:not(:has(> .ncl-lead-big)) > h2.ncl-lead-big::before{margin:0 0 26px}
@media (max-width:767px){.ncl-content h2.ncl-lead-big{font-size:24px;margin-bottom:20px;max-width:none}}
/* Enquiry form fields: the borders were rgb(220,213,201) on white, about
1.46:1, which is too faint to see where a field begins. */
.wpforms-container input[type=text],.wpforms-container input[type=email],
.wpforms-container input[type=tel],.wpforms-container input[type=url],
.wpforms-container input[type=number],.wpforms-container select,
.wpforms-container textarea{
border:1px solid #6B7280;border-radius:6px;background:var(--white);
}
.wpforms-container input:focus,.wpforms-container select:focus,
.wpforms-container textarea:focus{
outline:3px solid var(--brass);outline-offset:1px;border-color:var(--navy);
}
.wpforms-container .wpforms-error{border-color:#A3261B !important}
.wpforms-container label.wpforms-error{color:#A3261B;font-weight:600}
/* ---------------------------------------------------------------------------
2.30.0 — the client marks take a navy band, and the bands below flip.
The palette is navy, cream and brass; sand, white and grey are not band
colours here. Navy was the only right answer for this band, so Advisory,
Consulting, Delivery, Atomeris and Insights swap their tones to keep the
page alternating navy, cream, navy, cream all the way down.
--------------------------------------------------------------------------- */
.hm-logos-sec{background:var(--navy-dk);color:var(--white);padding:72px 0}
@media (max-width:767px){.hm-logos-sec{padding:52px 0}}
.hm-logos-sec .hm-logos-lead{color:var(--white)}
.hm-logos-sec .hm-logos p.ncl-logowall{
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:18px;margin:28px 0 0;max-width:none;
}
.hm-logos-sec .hm-logos p.ncl-logowall span{
background:var(--white);border:0;border-radius:var(--r);padding:16px 20px;height:92px;
display:flex;align-items:center;justify-content:center;
}
/* Knocking the marks out to white turned every logo supplied with an opaque
background into a solid rectangle, so they keep their own greyscale on a
white chip instead. */
.hm-logos-sec .hm-logos p.ncl-logowall span img{
filter:grayscale(1);opacity:.78;
max-height:46px;max-width:100%;width:auto;height:auto;object-fit:contain;
transition:opacity .18s ease,filter .18s ease;
}
.hm-logos-sec .hm-logos p.ncl-logowall span:hover img{opacity:1;filter:none}
.hm-logos-sec .ncl-btnrow{margin:34px 0 0}
.hm-logos-sec .ncl-btn-ghost{border-color:rgba(255,255,255,.42);color:var(--white)}
.hm-logos-sec .ncl-btn-ghost:hover{background:var(--white);color:var(--navy-dk);border-color:var(--white)}
@media (max-width:1100px){.hm-logos-sec .hm-logos p.ncl-logowall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.hm-logos-sec .hm-logos p.ncl-logowall{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---------------------------------------------------------------------------
2.28.0 — footer contact details given the Academy card's weight.
Email, telephone and LinkedIn were three plain links beside a bordered
Academy card, so the most useful things in the footer were the quietest.
They now carry the same chip, border and brass hover.
--------------------------------------------------------------------------- */
.ncl-footer-top ul{gap:12px}
.ncl-footer-top ul a{
display:inline-flex;align-items:center;gap:11px;
padding:10px 18px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
font-family:var(--disp);font-weight:600;font-size:15px;color:rgba(255,255,255,.92);
text-decoration:none;transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.ncl-footer-top ul a::before{
content:"";width:17px;height:17px;flex:0 0 17px;
background:currentColor;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
}
.ncl-footer-top ul a[href^="mailto:"]::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5zM4 7.3v11h16v-11l-8 5.2z' /%3E%3Cpath d='M4.6 6l7.4 4.8L19.4 6z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5zM4 7.3v11h16v-11l-8 5.2z' /%3E%3Cpath d='M4.6 6l7.4 4.8L19.4 6z'/%3E%3C/svg%3E");
}
.ncl-footer-top ul a[href^="tel:"]::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.5a1.6 1.6 0 0 1 2.2.5l1.9 3a1.6 1.6 0 0 1-.3 2.1l-1.3 1a12 12 0 0 0 4.8 4.8l1-1.3a1.6 1.6 0 0 1 2.1-.3l3 1.9a1.6 1.6 0 0 1 .5 2.2l-1.2 2A2.4 2.4 0 0 1 16.6 22 16.8 16.8 0 0 1 2 7.4a2.4 2.4 0 0 1 1.1-2.2z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.5a1.6 1.6 0 0 1 2.2.5l1.9 3a1.6 1.6 0 0 1-.3 2.1l-1.3 1a12 12 0 0 0 4.8 4.8l1-1.3a1.6 1.6 0 0 1 2.1-.3l3 1.9a1.6 1.6 0 0 1 .5 2.2l-1.2 2A2.4 2.4 0 0 1 16.6 22 16.8 16.8 0 0 1 2 7.4a2.4 2.4 0 0 1 1.1-2.2z'/%3E%3C/svg%3E");
}
.ncl-footer-top ul a[href*="linkedin"]::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM2.9 21.5V9.9h4.2v11.6zM9.6 9.9h4v1.6a4.4 4.4 0 0 1 3.9-2.1c4.2 0 5 2.7 5 6.3v5.8h-4.2v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7v5.2H9.6z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM2.9 21.5V9.9h4.2v11.6zM9.6 9.9h4v1.6a4.4 4.4 0 0 1 3.9-2.1c4.2 0 5 2.7 5 6.3v5.8h-4.2v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7v5.2H9.6z'/%3E%3C/svg%3E");
}
.ncl-footer-top ul a:hover{border-color:var(--brass);background:rgba(255,255,255,.05);color:var(--brass)}
.ncl-footer-top ul a:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.ncl-footer-academy{margin-top:0}
/* The Atomeris band on the home page: navy, between the cream Delivery band
above and the cream Insights band below. */
.hm-atom-mark{margin:0 0 18px}
.hm-atom-mark img{height:40px;width:auto;display:block}
.hm-atom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:start;margin-top:34px}
.hm-deep .hm-atom-line{margin:0 0 26px;max-width:58ch;color:rgba(255,255,255,.86)}
.hm-atom-film{margin:0}
.hm-atom-film video{width:100%;height:auto;display:block;border-radius:var(--r-lg);background:var(--navy-dk)}
.hm-atom-film figcaption{margin:12px 0 0;font-size:14px;color:rgba(255,255,255,.6)}
@media (max-width:900px){.hm-atom-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
/* ---------------------------------------------------------------------------
2.31.0
--------------------------------------------------------------------------- */
/* Disclosure rows and cards: the parent theme paints any focused