/* Shared typography system for the homepage and all future inner pages. */
:root{
  --hero-shade-gradient:linear-gradient(90deg,rgb(23 27 39 / 96%) 0%,rgb(23 27 39 / 85%) 44%,rgb(23 27 39 / 42%) 72%,rgb(23 27 39 / 15%) 100%);
  --brand-blue:#171b27;
  --brand-blue-rgb:23 27 39;
  --font-heading:Archivo,Arial,sans-serif;
  --font-body:Manrope,Arial,sans-serif;
  --type-ink:#191b20;
  --type-muted:#5b5e66;
  --type-accent:#c92729;
  --section-heading-size:clamp(2.125rem,4.5vw,3.5rem);
}

/* One brand-blue colour and identical fade stops on every hero, at every breakpoint. */
:is(.hero,.gallery-hero) :is(.hero-shade,.gallery-hero-shade),.security-hero::after{background:var(--hero-shade-gradient)!important}
/* Consistent section heading and eyebrow colours; dark sections keep white headings. */
.section-title{color:var(--type-ink)!important}
.section-title :is(span,em,strong){color:inherit!important}
:is(.ink,.hero,.security-hero,.gallery-hero,.policy-title-band,.site-cta,.gallery-visit,.fabrication-enquiry,.consultants-enquiry,.it-book-demo,.it-how-we-work,.academy-apply,.recruitment-enquiry,.security-contact) .section-title{color:#fff!important}
.ink :is(.body-copy,.body-lg,.lead,.timeline-hint){color:#d5d8e0}
.ink .road-milestone p{color:#e2e3e7}
body .eyebrow{color:#f01820!important}
/* All hero strips start at the shared left content edge. */
.trust .shell span{text-align:left!important}
/* Keep the browser/user default as the accessible type scale baseline. */
html{font-size:100%}

/* Purpose-specific privacy notice alongside enquiry/application controls. */
.form-privacy-notice{grid-column:1/-1;margin:0;font:400 .8125rem/1.65 var(--font-body);color:var(--type-muted);overflow-wrap:anywhere}
.form-privacy-notice a{color:var(--type-accent);text-decoration:underline;text-underline-offset:3px}
.form-privacy-notice a:focus-visible{outline:2px solid var(--type-accent);outline-offset:3px}
.academy-application-form .form-privacy-notice{margin-top:18px}

/* All page heroes use the homepage hero's type and button scale. */
/* Hero heading accents stay white across every page. Legal page titles are unaffected. */
:is(.hero,.security-hero,.gallery-hero) h1 *{color:#fff!important}
:is(.hero,.security-hero,.gallery-hero) h1{
  color:#fff!important;
  font-family:var(--font-heading)!important;
  font-size:clamp(3rem,5.7vw,4.5rem)!important;
  font-weight:600!important;
  line-height:1.05!important;
  letter-spacing:-.055em!important;
}
:is(.hero,.security-hero,.gallery-hero) :is(.lead,.gallery-hero-copy>p){
  color:#ffffffb3!important;
  font-family:var(--font-body)!important;
  font-size:1.125rem!important;
  font-weight:400!important;
  line-height:1.65!important;
}
:is(.hero,.security-hero,.gallery-hero) .button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:190px!important;min-height:49px;box-sizing:border-box;
  padding:14px 28px!important;border-radius:2px!important;
  font-family:var(--font-body)!important;font-size:0.875rem!important;
  font-weight:700!important;line-height:1.4!important;
}
:is(.hero,.security-hero,.gallery-hero) .button.red{background:#c92729!important;color:#fff!important}
@media(max-width:600px){
  :is(.hero,.security-hero,.gallery-hero) h1{font-size:clamp(1.5rem,7vw,3rem)!important}
  :is(.hero,.security-hero,.gallery-hero) :is(.lead,.gallery-hero-copy>p){font-size:1rem!important}
}

.page-title,.section-title,.content-title,.card-title{
  margin:0;
  color:inherit;
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:-.045em;
}
.page-title{font-size:clamp(2.75rem,6vw,4.875rem);line-height:1.02}
.section-title{font-family:var(--font-heading)!important;font-size:var(--section-heading-size)!important;font-weight:600!important;line-height:1.08!important;letter-spacing:-.045em!important}
.content-title{font-size:clamp(1.625rem,3vw,2.375rem);line-height:1.15}
.card-title{font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.25;letter-spacing:-.02em}
.eyebrow{color:#f01820!important;font-family:var(--font-heading)!important;font-size:0.875rem!important;font-weight:700!important;line-height:1.25!important;letter-spacing:.2em!important;text-transform:uppercase!important;margin:0 0 24px!important}
.eyebrow::before,.eyebrow::after{content:none!important}
.client-head .section-title{max-width:100%;text-align:left}
.client-heading-line{display:block}
@media(min-width:901px){.client-heading-line{white-space:nowrap}}

.lead,.body-copy,.prose{font-family:var(--font-body)}
.lead{font-size:clamp(1.0625rem,1.8vw,1.3125rem);line-height:1.65}
.body-copy,.prose{font-size:1rem;line-height:1.75;color:#242427}
.prose>*:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.prose p{margin:0 0 1.25em}
.prose h2,.prose h3,.prose h4{margin:1.5em 0 .55em;color:var(--type-ink);font-family:var(--font-heading);line-height:1.2}
.prose h2{font-size:clamp(1.75rem,3vw,2.5rem)}
.prose h3{font-size:clamp(1.375rem,2.4vw,1.875rem)}
.prose h4{font-size:1.1875rem}

.prose ul,.prose ol,.content-list{margin:0 0 1.4em;padding-left:1.3em}
.prose li,.content-list li{margin:.45em 0;padding-left:.25em}
.prose li::marker,.content-list li::marker{color:var(--type-accent);font-weight:700}
.list-unstyled,.footer-links{margin:0;padding:0;list-style:none}

.prose blockquote,.content-quote{margin:1.6em 0;padding:6px 0 6px 22px;border-left:3px solid var(--type-accent);color:var(--type-ink);font:600 clamp(1.25rem,2.4vw,1.875rem)/1.45 var(--font-heading)}
.table-wrap{max-width:100%;overflow-x:auto}
.content-table{width:100%;border-collapse:collapse;font-size:0.9375rem;line-height:1.55}
.content-table th,.content-table td{padding:13px 15px;border:1px solid #d8d5cd;text-align:left;vertical-align:top}
.content-table th{background:#ece9e2;color:var(--type-ink);font-family:var(--font-heading)}

.footer-heading{margin:0 0 20px;color:#fff;font:600 0.625rem/1.25 var(--font-heading);letter-spacing:.12em}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:600px){
  .body-copy,.prose{font-size:0.9375rem}
  .content-table th,.content-table td{padding:11px 12px}
}