/* Boxmoor Consulting Group Limited: site styles
   Design refresh, 17 September 2026. See DESIGN-NOTES.md. */

:root{
  --display:'Fira Sans', Helvetica, Arial, sans-serif;
  --body:'Public Sans', Helvetica, Arial, sans-serif;

  --bg:#22262A;         /* page ground */
  --panel:#1D2124;      /* footer ground */
  --text:#E9EBEC;       /* primary ink */
  --lede:#BCC4CA;       /* hero standfirst */
  --muted:#C6CCD1;      /* secondary running text */
  --label:#9AA0A6;      /* section labels, field labels, accent */
  --faint:#8A9096;      /* statutory footer text */
  --rule:#33383D;       /* section rules */
  --rule-soft:#3A4046;  /* sub-point rule, image border */

  --shell:1080px;
  --gutter:clamp(20px, 5vw, 64px);
  --label-col:180px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{flex:1}

a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#FFFFFF;text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--label);outline-offset:3px}
::selection{background:var(--label);color:#1A1D20}
img{max-width:100%;height:auto;display:block}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--text);color:#1A1D20;
  font-family:var(--display);font-size:15px;
  padding:10px 16px;text-decoration:none;z-index:10;
}
.skip:focus{left:var(--gutter);top:10px}

/* Shell and the hanging-label grid ------------------------------------ */

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.row > .col{min-width:0}
.row > .label{
  font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--label);
  margin:0;line-height:1.5;
}

@media (min-width:760px){
  .row{grid-template-columns:var(--label-col) minmax(0,1fr);gap:20px 40px}
  .row > .label{padding-top:5px}
  .row--hang > .col{grid-column:2}
}

.band{border-bottom:1px solid var(--rule)}
.rule-strong{border-bottom:1px solid var(--text)}

/* Masthead ------------------------------------------------------------ */

.masthead{border-bottom:1px solid var(--text)}
.masthead .shell{
  padding-top:20px;padding-bottom:20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
}
.wordmark{
  font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--text);
}
.wordmark:hover{text-decoration:none}
.masthead nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--display);font-size:15px}
.masthead nav a{
  color:var(--label);text-decoration:none;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.masthead nav a:hover{color:var(--text)}
.masthead nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text)}

/* Page openings ------------------------------------------------------- */

.hero .shell{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(40px,6vw,64px)}
.hero h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,5vw,48px);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 26px;max-width:20ch;text-wrap:balance;
}
.lede{
  font-size:clamp(18px,2.4vw,21px);line-height:1.55;color:var(--lede);
  margin:0;max-width:50ch;text-wrap:pretty;
}

.page-head .shell{padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(32px,5vw,48px)}
.page-head h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(32px,4.4vw,44px);line-height:1.1;letter-spacing:-.02em;margin:0;
}
.eyebrow{
  font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--label);margin:14px 0 0;
}

/* Running text -------------------------------------------------------- */

.prose{display:flex;flex-direction:column;gap:18px;max-width:68ch}
.prose p{margin:0;text-wrap:pretty}
.prose p + p{color:var(--muted)}
.band-pad .shell{padding-top:clamp(40px,6vw,56px);padding-bottom:clamp(40px,6vw,56px)}

/* Services ------------------------------------------------------------ */

.service{display:flex;flex-direction:column;gap:8px;padding:26px 0;border-top:1px solid var(--rule)}
.service:first-child{padding-top:0;border-top:0}
.service:last-child{padding-bottom:0}
.service h3{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.35;margin:0}
.service p{margin:0;font-size:16px;color:var(--muted);max-width:66ch;text-wrap:pretty}
.subpoint{
  margin-top:8px !important;
  padding-left:20px;border-left:1px solid var(--rule-soft);
  font-size:15px !important;line-height:1.6;color:#A8B0B6 !important;max-width:64ch;
}

/* Contact ------------------------------------------------------------- */

.contact .shell{padding-bottom:clamp(48px,7vw,72px)}
.contact .label{padding-top:0}
.contact .col{border-top:1px solid var(--text);padding-top:36px;display:flex;flex-wrap:wrap;gap:28px 32px}
@media (min-width:760px){.contact .label{padding-top:40px}}
.field{flex:1 1 240px;min-width:0}
.field-label{font-family:var(--display);font-weight:600;font-size:14px;color:var(--label);margin-bottom:4px}
.field a{word-break:break-word}

/* Biography ----------------------------------------------------------- */

.bio .shell{
  padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(48px,7vw,72px);
  display:flex;flex-wrap:wrap;gap:clamp(32px,4vw,48px);
}
.bio-side{flex:0 0 260px;max-width:100%;display:flex;flex-direction:column;gap:20px}
.bio-side img{border:1px solid var(--rule-soft)}
.bio-side h2{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.25;margin:0 0 4px}
.role{
  margin:0;font-family:var(--display);font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--label);line-height:1.5;
}
.bio .prose{flex:1 1 420px;min-width:0;max-width:66ch}

/* Legal document ------------------------------------------------------ */

.doc .shell{padding-top:clamp(40px,6vw,56px);padding-bottom:clamp(48px,7vw,72px)}
.doc .row{padding:34px 0;border-top:1px solid var(--rule)}
.doc .row:first-child{padding-top:0;border-top:0}
.doc .row:last-child{padding-bottom:0}
.doc .col{max-width:66ch;display:flex;flex-direction:column;gap:14px}
.doc p{margin:0;text-wrap:pretty}
.doc b{font-weight:600;color:#F2F4F5}

/* Simple pages -------------------------------------------------------- */

.simple .shell{padding-top:clamp(32px,5vw,48px);padding-bottom:clamp(48px,7vw,72px)}
.simple p{margin:0;max-width:60ch;text-wrap:pretty}

/* Footer -------------------------------------------------------------- */

footer{border-top:1px solid var(--rule);background:var(--panel)}
footer .shell{padding-top:28px;padding-bottom:40px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
footer p{margin:0;font-size:14px;line-height:1.6;color:var(--faint);max-width:80ch;text-wrap:pretty}
footer a{font-size:14px;color:var(--faint)}
footer a:hover{color:var(--text)}

/* Print: the privacy notice and the biography get printed ------------- */

@media print{
  :root{--bg:#fff;--text:#111;--muted:#333;--lede:#333;--label:#555;--faint:#555;--rule:#ccc;--rule-soft:#ccc;--panel:#fff}
  body{background:#fff;color:#111;font-size:11pt;line-height:1.55}
  .masthead nav,.skip{display:none}
  .masthead{border-bottom:1px solid #111}
  a{color:#111}
  .bio-side img{width:160px}
  .doc .row,.service{break-inside:avoid}
  footer{border-top:1px solid #ccc}
}