/* 3L Security Services Limited — site styles
   Direction A ("tender document"): light, typography-led; black and gold as accents only.
   Type: Source Serif 4 (display) + Source Sans 3 (text), self-hosted, SIL OFL 1.1.
   Scale: 1.25 modular scale from an 18px base. Spacing: 8px scale. Grid: 12 columns, 1200px max.
   No backdrop-filter or transforms on the header: they create a containing block that breaks
   fixed/positioned descendants (the bug that hid the old mobile menu). */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colour: the 3L brand palette (3l-brand-assets, adopted 1 October 2026).
     Contrast measured against Soft White #F8F7F4 to WCAG 2.1. */
  --paper: #F8F7F4;      /* 3L Soft White — page background */
  --white: #FFFFFF;      /* white panels, forms, alternate sections */
  --stone: #FFFFFF;      /* alternate sections (white on Soft White) */
  --tint: #E5E4E1;       /* permitted tint: Executive Black 8% over Soft White */
  --ink: #0A0A0A;        /* 3L Executive Black — 18.48:1, headings, body, primary button */
  --body: #0A0A0A;
  --muted: #515150;      /* 3L Graphite — 7.42:1, secondary text, form borders */
  --gold-text: #8C6418;  /* 3L Deep Gold — 4.96:1, the only gold used as text on light */
  --gold: #C89B3C;       /* 3L Signature Gold — rules, borders, underlines only; never text on light */
  --rule: #C8C8C5;       /* Executive Black 20% tint, decorative hairlines */
  --focus: #0A0A0A;

  /* Type scale: 1.25 */
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  /* Spacing: 8px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 106.25%; /* 17px on small screens */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 768px) { html { font-size: 112.5%; } } /* 18px */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s4);
  /* text-wrap: balance only on h1 (layout cost) */
}
h1 { font-size: clamp(2.1rem, 1.55rem + 2.4vw, var(--step-5)); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(var(--step-2), 1.2rem + 1.3vw, var(--step-4)); }
h3 { font-size: var(--step-1); line-height: 1.25; }
p, ul, ol, dl { margin: 0 0 var(--s4); }
p { max-width: 68ch; }
strong { color: var(--ink); font-weight: 600; }

/* Links carry no underline (Director, 25 Oct 2026). They stay identifiable by colour: Deep Gold is
   4.96:1 on Soft White and 3.73:1 against the black body text (WCAG 1.4.1 needs 3:1), with an
   underline on hover and keyboard focus. */
a {
  color: var(--gold-text);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }
main:focus { outline: none; } /* skip-link target (tabindex="-1") */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.plain { list-style: none; padding: 0; margin: 0; }

/* ---------- Header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 80px;
  padding-block: var(--s3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.brand img { width: auto; height: 44px; }
/* The full company name always sits on one line (Director, 25 Oct 2026). */
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 479px) {
  .site-header .header-inner { gap: var(--s2); }
  .brand { gap: var(--s2); }
  .brand img { height: 34px; }
  .brand-name { font-size: clamp(0.7rem, 3.55vw, 1rem); }
  .site-header .nav-toggle { padding: 0 var(--s3); }
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s5);
  flex-wrap: wrap;
}
.site-nav a:not(.btn) {
  display: inline-block;
  padding-block: var(--s2);
  font-weight: 600;
  color: var(--ink);
}
.site-nav a[aria-current="page"]:not(.btn) { color: var(--gold-text); }

.nav-toggle {
  display: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 2px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s4);
  cursor: pointer;
}

@media (max-width: 899px) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .site-nav { display: none; }
  .js .site-header[data-open="true"] .site-nav { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--s2) var(--s4); }
  .site-nav li { border-top: 1px solid var(--rule); }
  .site-nav a:not(.btn) { display: block; padding: var(--s3) 0; }
  .site-nav .nav-cta { border-top: 0; padding-top: var(--s4); }
  .site-nav .nav-cta .btn { width: 100%; }
}

/* Dropdown menus (disclosure pattern). Closed until opened with their button; without
   JavaScript the buttons stay hidden and "Services" / "Sectors" link to overview pages
   that list every page. */
.site-nav .has-sub { position: relative; display: flex; align-items: center; }
.site-nav .sub { display: none; }
.sub-toggle { display: none; }
.js .sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.js .sub-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.js .sub-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.js .sub-toggle:hover { border-color: var(--rule); }
.site-nav .has-sub:has(.sub [aria-current]) > a { color: var(--gold-text); }

@media (min-width: 900px) {
  .js .site-nav .has-sub[data-open="true"] > .sub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 17rem;
    padding: var(--s2) 0;
    background: var(--white);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--gold);
  }
  .site-nav .sub a:not(.btn) { display: block; padding: var(--s2) var(--s4); }
}
@media (max-width: 899px) {
  .site-nav .has-sub { flex-wrap: wrap; }
  .site-nav .has-sub > a { flex: 1; }
  .js .sub-toggle { width: 44px; height: 44px; }
  .js .site-nav .has-sub[data-open="true"] > .sub { display: flex; flex-basis: 100%; padding: 0 0 var(--s2) var(--s4); }
  .site-nav .sub li { border-top: 0; }
  .site-nav .sub a:not(.btn) { padding: var(--s2) 0; font-weight: 400; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--muted); border-color: var(--muted); color: var(--white); }
.btn--secondary { background: transparent; color: var(--ink); }
.btn--secondary:hover { background: var(--white); }
.btn--small { min-height: 44px; padding: var(--s2) var(--s4); font-size: var(--step--1); letter-spacing: 0.01em; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 520px) { .actions .btn { width: 100%; } }

/* ---------- Labels and section heads ---------- */
.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--s4);
}

.section { padding-block: clamp(var(--s7), 7vw, var(--s9)); border-top: 1px solid var(--rule); }
.section--alt { background: var(--stone); }
.section-head { display: grid; gap: var(--s2); align-content: start; margin-bottom: var(--s6); max-width: 60ch; }
.section-num {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.section-head h2 { margin: 0; }
.section-head p { margin: var(--s2) 0 0; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--s6), 6vw, var(--s9)) clamp(var(--s6), 5vw, var(--s8)); }
.hero-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); } }
.hero h1 { max-width: 18ch; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--body); max-width: 56ch; }
@media (max-width: 767px) { .lead { font-size: 1.1rem; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-main > * { animation: rise 520ms cubic-bezier(.2, .7, .2, 1) both; }
  .hero-main > *:nth-child(2) { animation-delay: 60ms; }
  .hero-main > *:nth-child(3) { animation-delay: 120ms; }
  .hero-main > *:nth-child(4) { animation-delay: 180ms; }
  .ref-panel { animation: rise 520ms 220ms cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Reference panel: the "document information" block */
.ref-panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  padding: var(--s5);
}
.ref-title {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}

/* Facts: label/value pairs */
.facts { margin: 0; display: grid; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s3);
  border-top: 1px solid var(--rule);
}
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--muted); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; padding-top: 0.15em; }
.facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: break-word; }
.ref-panel .facts > div { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
@media (max-width: 520px) {
  .facts > div, .ref-panel .facts > div { grid-template-columns: 1fr; gap: var(--s1); }
}
@media (max-width: 420px) { .facts > div { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------- Badge strip ---------- */
.badges { padding-block: var(--s6) var(--s7); border-top: 1px solid var(--rule); }
.badges-title {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s5);
}
.badge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s5) var(--s5);
  align-items: end;
}
/* The brand's accreditation panel: white, rounded, Signature Gold border, thin gold dividers */
.badges:not(.badges--compact) .badge-list {
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: var(--s5);
}
@media (min-width: 1100px) {
  .badges:not(.badges--compact) .badge-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; align-items: stretch; padding-inline: var(--s3); }
  .badges:not(.badges--compact) .badge { padding-inline: 4px; }
  .badges:not(.badges--compact) .badge + .badge { border-left: 1px solid var(--gold); }
  /* Seven badges in one row: the two wide logos are scaled proportionally to fit their column. */
  .badges:not(.badges--compact) .badge-art--wide-rec img { height: 42px; }
  .badges:not(.badges--compact) .badge-art--wide-bsi img { height: 50px; }
}
.badge { display: grid; justify-items: center; align-content: end; gap: var(--s3); text-align: center; padding-inline: var(--s2); }
.badge-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  text-decoration: none;
}
.badge-art img { width: auto; }
.badge-art--tall img { height: 120px; }
.badge-art--seal img { height: 120px; }
.badge-art--wide-rec img { height: 48px; }
.badge-art--wide-bsi img { height: 56px; }
.badge-art--wide-dc img { height: 56px; }
.badge-art--ce { position: relative; }
.ce-frame { width: 132px; height: 132px; border: 0; display: block; }
.ce-frame.is-loading { position: absolute; inset: 0; margin: auto; opacity: 0; pointer-events: none; }
.badge-caption { margin: 0; font-size: var(--step--1); line-height: 1.35; color: var(--ink); font-weight: 600; max-width: 22ch; }
.badge-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
}
.badge-text span {
  border: 1px solid var(--muted);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Compact strip in the footer (static artwork only) */
.badges--compact { padding-block: var(--s5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.badges--compact .badge-list { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s4); }
.badges--compact .badge-art { height: 72px; }
.badges--compact .badge-art--tall img,
.badges--compact .badge-art--seal img { height: 64px; }
.badges--compact .badge-art--ce img { height: 64px; }
.badges--compact .badge-art--wide-rec img { height: 30px; }
.badges--compact .badge-art--wide-bsi img { height: 36px; }
.badges--compact .badge-art--wide-dc img { height: 36px; }

/* Home-page banner (the LinkedIn cover v4 artwork): desktop only, as the Director asked. Below 900px
   the <picture> has no matching source, so phones only see a 1-pixel placeholder and never
   download the artwork; the placeholder is hidden too. */
.top-banner { display: none; }
@media (min-width: 900px) {
  .top-banner { display: block; border-bottom: 1px solid var(--rule); }
  .top-banner img { display: block; width: 100%; max-width: 2256px; height: auto; margin-inline: auto; }
}
.badges--compact .badge-text { height: 72px; }
.badges--compact .badge-caption { font-weight: 400; color: var(--muted); }
.badge-art--ce img { height: 120px; }

/* ---------- Content blocks ---------- */
.service-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 768px) { .service-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); } }
.service-index li { border-top: 1px solid var(--ink); padding-block: var(--s5) var(--s4); }
.service-index p { color: var(--body); margin: 0; }

.two-col { display: grid; gap: var(--s6); align-items: start; }
.two-col > .section-head { margin-bottom: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }

.list-rule { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.list-rule li { border-top: 1px solid var(--rule); padding-block: var(--s3); }
.list-rule li:last-child { border-bottom: 1px solid var(--rule); }

.notice {
  border-left: 3px solid var(--gold);
  background: var(--white);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  max-width: 68ch;
}
.notice p { margin: 0; }

.statement {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  border-left: 3px solid var(--ink);
  padding-left: var(--s5);
}

.table-wrap { overflow-x: auto; margin-bottom: var(--s5); }
table.data { border-collapse: collapse; width: 100%; background: var(--white); }
table.data--wide { min-width: 720px; } /* only the 5-column privacy table scrolls on phones */
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
table.data caption { text-align: left; font-weight: 600; color: var(--ink); padding-bottom: var(--s3); }
table.data th, table.data td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
table.data thead th { background: var(--tint); border-bottom: 2px solid var(--gold); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ink); }
table.data tbody th { font-weight: 600; color: var(--ink); }
table.data td.code { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* Procurement panel */
.procurement { background: var(--white); border-top: 3px solid var(--ink); }
.procurement-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .procurement-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); } }

/* Page header (interior pages) */
.page-head { padding-block: clamp(var(--s6), 6vw, var(--s8)) var(--s6); }
.page-head h1 { max-width: 22ch; }
.page-head .lead { margin-bottom: 0; }

/* Prose (legal pages) */
.prose > * { max-width: 72ch; }
.prose > .table-wrap { max-width: none; }
.prose h2 { font-size: var(--step-2); margin-top: var(--s7); }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: var(--s2); }
.prose .doc-meta { color: var(--muted); font-size: var(--step--1); }

/* ---------- Forms ---------- */
.form { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: clamp(var(--s5), 4vw, var(--s6)); }
.form .field { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.form label, .form legend { font-weight: 600; color: var(--ink); }
.form .hint { font-size: var(--step--1); color: var(--muted); margin: 0; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"], .form select, .form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--muted);
  border-radius: 2px;
  padding: var(--s3);
  min-height: 48px;
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.form .privacy-note { font-size: var(--step--1); color: var(--muted); margin-top: var(--s4); }
.form .honeypot { display: none; }
.req { font-weight: 400; color: var(--muted); }

.contact-grid { display: grid; gap: var(--s7); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--tint); border-top: 3px solid var(--gold); padding-block: var(--s7) var(--s6); font-size: var(--step--1); }
.site-footer a { color: var(--ink); }
.footer-top { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
@media (min-width: 768px) { .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.footer-heading { font-weight: 600; color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s2); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-nav a, .legal-links a { display: inline-block; padding-block: var(--s1); }
.legal-line { list-style: none; padding: 0; margin: var(--s5) 0 var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) 0; color: var(--body); }
.legal-line li { font-variant-numeric: tabular-nums lining-nums; }
.legal-line li + li::before { content: "·" / ""; padding-inline: var(--s2); color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s3); }
.copyright { color: var(--muted); margin: 0; }

/* ---------- Print ---------- */
@media print {
  .site-header nav, .nav-toggle, .skip-link, .actions, .form, .badges--compact { display: none !important; }
  body { background: #fff; }
  a { text-decoration: none; }
}