/* DJLConsulting - brand: navy #1E4288, body #262626, muted #595959, rule #BFBFBF */
:root{
  --navy:#1E4288; --navy-dk:#14295a; --navy-lt:#2c56a8; --ink:#262626; --mute:#595959;
  --rule:#BFBFBF; --wash:#f2f5fa; --line:#e3e8f1; --white:#fff; --maxw:1280px;
}
*{box-sizing:border-box}
/* keyboard users: a way past the navigation, and a focus ring that is actually visible */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:12px 18px; z-index:100; border-radius:0 0 6px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid #7aa2f0; outline-offset:2px; border-radius:2px}
.hero :focus-visible, section.band :focus-visible, footer.site :focus-visible{outline-color:#fff}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font:400 17.5px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--navy); line-height:1.12; letter-spacing:-0.015em; margin:0 0 16px}
h1{font-size:clamp(2.3rem,4.4vw,3.6rem); font-weight:700}
h2{font-size:clamp(1.55rem,2.5vw,2.15rem); font-weight:700; margin-top:0}
h3{font-size:1.14rem; font-weight:700; margin-bottom:10px}
p{margin:0 0 18px; max-width:72ch}
.lead{font-size:1.24rem; line-height:1.6; max-width:64ch}
.muted{color:var(--mute)}
small{color:var(--mute)}
ul{padding-left:22px}


/* header */
header.site{border-bottom:1px solid var(--line); background:var(--white);
  position:sticky; top:0; z-index:20}
header.site .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:18px; padding-bottom:18px}
header.site img{height:28px; width:auto; display:block}
nav.main{display:flex; gap:28px; align-items:center; flex-wrap:wrap}
nav.main a{color:var(--ink); font-size:.97rem}
nav.main a.here{color:var(--navy); font-weight:600}
nav.main a.cta{background:var(--navy); color:#fff; padding:10px 18px; border-radius:5px; font-weight:600}
nav.main a.cta:hover{background:var(--navy-dk); text-decoration:none}

/* hero on a navy field */
.hero{
  position:relative; color:#fff; padding:104px 0 88px; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(90,140,235,.55), transparent 62%),
    linear-gradient(160deg, #1E4288 0%, #16326a 55%, #101f46 100%);
}
.hero::after{                      /* faint diagonal weave, keeps it from looking flat */
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(135deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:26px 26px;
}
.hero .wrap{position:relative; z-index:1}
.hero .wrap.intro{display:grid; gap:40px; grid-template-columns:1.5fr 1fr; align-items:center}
.portrait{margin:0}
.portrait img{width:100%; height:auto; max-width:320px; border-radius:10px; display:block;
  box-shadow:0 10px 34px rgba(8,18,44,.45)}
.portrait figcaption{font-size:.8rem; margin-top:12px; max-width:320px; color:#c3d0ec}
@media (max-width:820px){ .hero .wrap.intro{grid-template-columns:1fr; gap:26px}
  .portrait img{max-width:220px} }
.hero h1{color:#fff; max-width:20ch}
/* the hero lines arrive one after another; anything that cannot animate, or
   any visitor who has asked for less motion, simply sees them already in place */
@media (prefers-reduced-motion: no-preference){
  @keyframes riseIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
  .hero h1, .hero .lead, .hero .btnrow{ animation:riseIn .6s cubic-bezier(.22,.7,.3,1) backwards }
  .hero h1{ animation-delay:.05s }
  .hero .lead:nth-of-type(1){ animation-delay:.5s }
  .hero .lead:nth-of-type(2){ animation-delay:1s }
  .hero .lead.strong{ animation-delay:1.5s }
  .hero .btnrow{ animation-delay:2s }
}
.hero .lead{color:#dfe7f8; margin-top:18px; margin-bottom:0}
.hero .lead + .lead{margin-top:14px}
.hero .lead.strong{color:#fff; font-weight:700; margin-top:20px}
.credline{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.28);
  color:#c3d0ec; font-size:.97rem; max-width:60ch}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.btn{display:inline-block; background:#fff; color:var(--navy); padding:14px 26px;
  border-radius:5px; font-weight:700; border:1px solid #fff}
.btn:hover{background:#eaf0fd; text-decoration:none}
.btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.65)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
/* same buttons on white sections */
section .btn{background:var(--navy); color:#fff; border-color:var(--navy)}
section .btn:hover{background:var(--navy-dk)}
section .btn.ghost{background:transparent; color:var(--navy); border:1px solid var(--navy)}
section .btn.ghost:hover{background:#e9eefb}

/* sections */
section{padding:72px 0}
section[id]{scroll-margin-top:96px}
section.wash{background:var(--wash); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
section.band{background:linear-gradient(160deg,#1E4288,#16326a); color:#fff}
section.band h2{color:#fff}
section.band .lead{color:#dfe7f8}
section.band .btn{background:#fff; color:var(--navy); border-color:#fff}
section.band .btn:hover{background:#eaf0fd}
section.band .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.65)}

.grid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid + p{margin-top:30px}
.card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px;
  box-shadow:0 1px 2px rgba(20,41,90,.05), 0 8px 24px rgba(20,41,90,.06)}
.card p:last-child{margin-bottom:0}
.card .sym{color:var(--mute); font-size:.97rem}
.feature{margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:26px 28px; display:flex; gap:28px; align-items:center; justify-content:space-between;
  box-shadow:0 1px 2px rgba(20,41,90,.05), 0 8px 24px rgba(20,41,90,.06)}
.feature h3{margin-bottom:8px}
.feature p{margin-bottom:0; max-width:78ch}
.feature > a{white-space:nowrap; font-weight:600}
@media (max-width:820px){ .feature{flex-direction:column; align-items:flex-start; gap:18px} }
.steps{counter-reset:s; display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps .step{border-top:3px solid var(--navy); padding-top:16px}
.steps .step b{display:block; color:var(--navy); margin-bottom:8px; font-size:1.05rem}
.recognise li{margin-bottom:12px; max-width:70ch}
.pull{font-size:1.3rem; line-height:1.45; font-weight:700; color:var(--navy); max-width:52ch;
  margin:26px 0 24px; padding:2px 0 2px 20px; border-left:4px solid var(--navy)}
blockquote{margin:0; padding:20px 24px; background:var(--wash); border-left:4px solid var(--navy);
  border-radius:0 8px 8px 0}
blockquote p{margin-bottom:8px}
.stat{font-size:2.3rem; font-weight:700; color:var(--navy); line-height:1.05; margin-bottom:6px}
table{border-collapse:collapse; width:100%; font-size:.97rem}
th,td{text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--navy)}
section.band .tbd, .hero 
/* forms */
form{max-width:620px}
label{display:block; font-size:.86rem; color:var(--mute); margin:16px 0 6px; font-weight:600}
input,textarea{width:100%; padding:13px 14px; border:1px solid #c9d2e4; border-radius:6px;
  font:inherit; font-size:1rem; background:#fff; color:var(--ink)}
input:focus,textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(30,66,136,.12)}
textarea{min-height:150px; resize:vertical}
button.submit{margin-top:20px; background:var(--navy); color:#fff; border:none; padding:14px 30px;
  border-radius:5px; font:inherit; font-weight:700; cursor:pointer}
button.submit:hover{background:var(--navy-dk)}
.formnote{color:var(--mute); font-size:.9rem; margin-top:12px}

/* footer */
footer.site{background:#101f46; color:#c5d0e8; padding:52px 0}
footer.site .wrap{display:flex; gap:36px; justify-content:space-between; flex-wrap:wrap}
footer.site img{height:26px; width:auto}
footer.site a{color:#fff}
footer.site .fcol{font-size:.94rem; line-height:1.9}

@media (max-width:980px){ .wrap{padding:0 26px} .hero{padding:72px 0 58px} section{padding:54px 0} }
@media (max-width:760px){
  body{font-size:17px}
  /* compact header: logo and the call button share the top line, the links sit
     under them, and it scrolls away rather than holding the top of the screen */
  header.site{position:static}
  header.site .wrap{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 12px;
    padding-top:12px; padding-bottom:10px}
  header.site img{height:22px}
  nav.main{width:100%; gap:14px; flex-wrap:nowrap; align-items:center; padding-top:2px}
  nav.main a{font-size:.88rem}
  nav.main a.cta{margin-left:auto; padding:7px 12px; font-size:.85rem; white-space:nowrap}
  .hero{padding:44px 0 38px}
  section{padding:40px 0}
  .pull{font-size:1.15rem}
}

/* Pace menu item */
nav.main a.pace sup.new{font-size:.56rem; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--navy-lt);
  border-radius:3px; padding:2px 4px; margin-left:5px; vertical-align:super; line-height:1}
@media (max-width:760px){
  nav.main a[href="/"]{display:none}          /* the logo links home; frees room for Pace */
  nav.main a.pace sup.new{margin-left:3px}
}

/* Pace links from service content */
.feature .actions{display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.feature .actions a:not(.btn){white-space:nowrap; font-weight:600}
@media (max-width:820px){ .feature .actions{align-items:flex-start} }
.pace-callout{margin:28px 0 30px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:10px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:28px}
.pace-callout h3{margin-bottom:8px}
.pace-callout p{margin-bottom:0; max-width:70ch}
.pace-callout .btn{white-space:nowrap}
@media (max-width:820px){ .pace-callout{flex-direction:column; align-items:flex-start; gap:18px} }

/* five menu items on a phone: tighter spacing so Request a call stays on screen */
@media (max-width:480px){
  nav.main{gap:10px}
  nav.main a{font-size:.8rem}
  nav.main a.cta{padding:6px 9px; font-size:.78rem}
  nav.main a.pace sup.new{font-size:.5rem; padding:1px 3px}
}
@media (max-width:360px){
  nav.main{gap:7px}
  nav.main a{font-size:.72rem}
  nav.main a.cta{padding:5px 7px; font-size:.7rem}
  nav.main a.pace sup.new{display:none}
}